Fix some auction and media bits

slmnio · Jun 15, 2024 · 271271d · 271271d
1 parent 6496d5d
commit 271271d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/website/src/components/broadcast/RecoloredHero.vue b/website/src/components/broadcast/RecoloredHero.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="recolored-hero" :data-hero="hero?.name">
+    <div v-show="valid && complete" class="recolored-hero" :data-hero="hero?.name">
         <div class="color-holder">
             <div class="hero-image-base" :style="mainImage || fallbackImage" :class="{ 'fallback-image': !mainImage && fallbackImage }"></div>
 
@@ -83,6 +83,7 @@ function getOpacityAdjustment(color, inverted, multiplier, boost, minOpacity, ma
 export default {
     name: "RecoloredHero",
     props: ["hero", "theme"],
+    emits: ["recolor_starting", "recolor_width", "recolor_complete"],
     data: () => ({
         colorData: [
             {
@@ -101,7 +102,8 @@ export default {
         lastRecolor: {
             colors: [],
             images: []
-        }
+        },
+        complete: false
     }),
     computed: {
         mainImage() {
@@ -124,6 +126,9 @@ export default {
                 style.primary,
                 style.secondary
             ];
+        },
+        valid() {
+            return this.mainImage?.backgroundImage || this.fallbackImage?.backgroundImage;
         }
     },
     methods: {
@@ -191,14 +196,16 @@ export default {
             if (JSON.stringify(payload) === JSON.stringify(this.lastRecolor)) return console.warn("[muffle]", "Same payload requested", payload, this.lastRecolor);
             this.lastRecolor = payload;
 
-            console.log("[recolor]", "starting");
+            console.log("[recolor]", "starting", payload);
             this.$emit("recolor_starting");
+            this.complete = false;
             for (let i = 0; i < this.layers.length; i++) {
                 const layer = this.layers[i];
                 await this.recolor(layer, colors[i], i + 1);
             }
-            console.log("[recolor]", "complete");
+            console.log("[recolor]", "complete", payload);
             this.$emit("recolor_complete");
+            this.complete = true;
         }
     },
     watch: {

diff --git a/website/src/components/broadcast/auction/AuctionOverlay.vue b/website/src/components/broadcast/auction/AuctionOverlay.vue
@@ -279,7 +279,6 @@ export default {
         accolades() {
             if (!this.player) return [];
 
-            console.log("accolades", this?.players?.member_of);
             return [
                 // team things
                 ...(this.player.member_of ? [].concat(...this.player.member_of.map(e => e.accolades).filter(e => e?.show_for_players)) : []),

diff --git a/website/src/components/broadcast/roots/MediaOverlay.vue b/website/src/components/broadcast/roots/MediaOverlay.vue
@@ -1,5 +1,8 @@
 <template>
-    <div class="media-overlay" style="height: 100vh; width: 100vw;">
+    <div
+        class="media-overlay"
+        style="height: 100vh; width: 100vw;"
+        :class="{'black-out': ended }">
         <yt-player
             v-if="media"
             ref="youtube"
@@ -116,11 +119,13 @@ export default {
         async active(isActive) {
             if (isActive && this.$refs.youtube.player) {
                 this.$refs.youtube.player.seekTo(0);
+                this.ended = false;
             }
         },
         async animationActive(isActive) {
             if (isActive && this.$refs.youtube.player) {
                 this.$refs.youtube.player.playVideo();
+                this.ended = false;
                 const remaining = await this.$refs.youtube?.player?.getDuration() - await this.$refs.youtube?.player?.getCurrentTime();
                 socket.emit("media_update", "playing", true);
                 socket.emit("media_update", "remaining", remaining);
@@ -158,7 +163,7 @@ export default {
     body:hover :deep(.player) {
         --overlap: 0px;
     }
-    .media-overlay:deep(.player.black-out) {
+    .media-overlay.black-out {
         filter: brightness(0);
     }
 </style>
diff --git a/website/src/views/sub-views/event/EventAuction.vue b/website/src/views/sub-views/event/EventAuction.vue
@@ -419,7 +419,7 @@ export default {
             if (!this.teams?.length) return groups;
             (this.teams || []).forEach(team => {
                 // eslint-disable-next-line no-constant-binary-expression
-                if (team.players?.length === this.auctionSettings?.each_team ?? 7) {
+                if (team?.players?.length === this.auctionSettings?.each_team ?? 7) {
                     // Finished
                     groups.finished.push(team);
                 } else {