Bunch of deadlock stuff

website/src/components/broadcast/break/BreakMatch.vue

@@ -2,7 +2,7 @@
     <div class="break-match flex-center" :class="{'expanded': expanded, 'has-scores': hasScore}" :data-center="centerShow">
         <div v-if="!expanded" class="match-next-details">
             <transition name="fade" mode="out-in">
-                <span :key="match ? match.round : 'empty'">{{ hasFinished ? 'FINAL SCORE:' : 'UP NEXT:' }} {{ match && match.round }}</span>
+                <span :key="match ? match.round : 'empty'">{{ textPrefix }} {{ match && match.round }}</span>
             </transition>
         </div>
         <!--
@@ -67,7 +67,7 @@ import { resizedImage } from "@/utils/images";
 
 export default {
     name: "BreakMatch",
-    props: ["match", "expanded", "timezone", "live", "themeColor"],
+    props: ["match", "expanded", "timezone", "live", "themeColor", "times"],
     computed: {
         teams() {
             if (this.match?.special_event) return [];
@@ -144,6 +144,12 @@ export default {
 
 
             // return null;
+        },
+        textPrefix() {
+            if (this.times && this.start) {
+                return `${this.start}:`
+            }
+            return this.hasFinished ? 'FINAL SCORE:' : 'UP NEXT:'
         }
     },
     methods: {

website/src/components/broadcast/roots/LBarOverlay.vue

@@ -18,6 +18,7 @@
                     :timezone="broadcast?.timezone"
                     :match="match"
                     :expanded="false"
+                    :times="true"
                     :theme-color="themeColor" />
             </div>
         </div>
@@ -40,95 +41,151 @@
                     v-html="nbr(title || broadcast.title)"></span>
             </transition>
         </div>
+        <div v-if="showSponsors" class="lbar-sponsors-holder">
+            <Sponsors class="lbar-sponsors" :sponsors="sponsorThemes" />
+        </div>
     </div>
 </template>
 
 <script>
 import ThemeLogo from "@/components/website/ThemeLogo.vue";
 import BreakMatch from "@/components/broadcast/break/BreakMatch.vue";
-import { ReactiveArray, ReactiveThing } from "@/utils/reactive";
+import { ReactiveArray, ReactiveThing, ReactiveRoot } from "@/utils/reactive";
 import { sortMatches } from "@/utils/sorts";
-import { themeBackground1 } from "@/utils/theme-styles";
+import { logoBackground1, themeBackground1 } from "@/utils/theme-styles";
 import Countdown from "@/components/broadcast/Countdown.vue";
+import Sponsors from "@/components/broadcast/Sponsors.vue";
 
 export default {
     name: "LBarOverlay",
-    components: { Countdown, BreakMatch, ThemeLogo },
+    components: { Countdown, BreakMatch, ThemeLogo, Sponsors },
     props: {
         broadcast: {},
         client: {},
         virtualMatch: {},
-        title: String
+        title: String,
+        showSponsors: String,
     },
     computed: {
         fullSchedule() {
             if (this.virtualMatch) return [this.virtualMatch];
             if (!this.broadcast?.schedule) return null;
             return ReactiveArray("schedule", {
                 teams: ReactiveArray("teams", {
-                    theme: ReactiveThing("theme")
-                })
+                    theme: ReactiveThing("theme"),
+                }),
             })(this.broadcast).sort(sortMatches);
         },
         schedule() {
             if (!this.broadcast?.schedule || !this.fullSchedule) return null;
-            return this.fullSchedule.filter(m => {
-                return this.secondary ? m.show_on_secondary_overlays : m.show_on_overlays;
-            }).sort(sortMatches);
+            return this.fullSchedule
+                .filter((m) => {
+                    return this.secondary
+                        ? m.show_on_secondary_overlays
+                        : m.show_on_overlays;
+                })
+                .sort(sortMatches);
         },
         themeColor() {
             return themeBackground1(this.broadcast?.event);
         },
         countdownText() {
             if (!this.broadcast.countdown_end) return "LOCAL TIME";
-            if (this.schedule && this.schedule.filter(s => [s.score_1, s.score_2].some(_s => _s)).length === 0) { return "STARTING IN"; }
+            if (
+                this.schedule &&
+                this.schedule.filter((s) =>
+                    [s.score_1, s.score_2].some((_s) => _s)
+                ).length === 0
+            ) {
+                return "STARTING IN";
+            }
             return "BACK IN";
-        }
+        },
+        sponsorThemes() {
+            if (!this.broadcast?.sponsors) return null;
+            return ReactiveArray("sponsors", {
+                theme: ReactiveThing("theme"),
+            })(this.broadcast);
+        },
     },
     methods: {
         nbr(text) {
             if (!text) return "";
             return text.replace(/\\n/g, "<br>");
-        }
-    }
+        },
+        getTeamStyle(team) {
+            return {
+                ...logoBackground1(team),
+            };
+        },
+    },
 };
 </script>
 
 <style scoped>
-    .l-bar-overlay {
-        display: grid;
-        height: 100vh;
-        width: 100vw;
+.l-bar-overlay {
+    display: grid;
+    height: 100vh;
+    width: 100vw;
 
-        grid-template-columns: repeat(2, 1fr);
-        grid-template-rows: repeat(2, 1fr);
-    }
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
 
+.content {
+    --content-width: 1504px;
+    width: var(--content-width);
+    height: calc(var(--content-width) * (9 / 16));
+}
 
-    .content {
-        --content-width: 1504px;
-        width: var(--content-width);
-        height: calc(var(--content-width) * (9 / 16));
-    }
+.countdown-group {
+    width: 100%;
+    font-size: 48px;
+    line-height: 1;
+    padding: 0.25em 0;
+}
+.countdown-group .countdown-timer {
+    font-size: 2.5em;
+}
+.schedule {
+    gap: 1em;
+}
+.title-text.has-br {
+    font-size: 80px;
+    line-height: 1.2;
+}
+.title-text {
+    font-size: 120px;
+    line-height: 1.2;
+}
 
-    .countdown-group {
-        width: 100%;
-        font-size: 48px;
-        line-height: 1;
-        padding: 0.25em 0
-    }
-    .countdown-group .countdown-timer {
-        font-size: 2.5em;
-    }
-    .schedule {
-        gap: 1em;
-    }
-    .title-text.has-br {
-        font-size: 80px;
-        line-height: 1.2;
-    }
-    .title-text {
-        font-size: 120px;
-        line-height: 1.2;
-    }
+.team-text-box {
+    width: 515px;
+    /* position: absolute; */
+    line-height: 1;
+    /* top: calc(100% - 150px); */
+    height: 79px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.team-text {
+    background-color: #333;
+    color: white;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 42px;
+    text-align: center;
+    padding: 0.25em 0.5em;
+    width: 515px;
+    position: absolute;
+    line-height: 1;
+}
+.teams-holder {
+    max-width: 100%;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
 </style>

website/src/components/broadcast/roots/MVPOverlay.vue

@@ -2,6 +2,8 @@
     <div class="mvp-overlay">
         <div v-if="mvp">
             <div class="text-container">
+                <div v-if="showSponsor" class="break-sponsor-logo bg-center" :style="logo(sponsor)"></div>
+
                 <div class="title-holder">
                     <ThemeTransition
                         start="right"
@@ -43,11 +45,12 @@ import ThemeLogo from "@/components/website/ThemeLogo";
 import { themeBackground1 } from "@/utils/theme-styles";
 import ThemeTransition from "@/components/broadcast/ThemeTransition";
 import { useStatusStore } from "@/stores/statusStore";
+import { resizedImage } from "@/utils/images";
 
 export default {
     name: "MVPOverlay",
     components: { ThemeTransition, ThemeLogo, RecoloredHero },
-    props: ["broadcast", "title", "animationActive"],
+    props: ["broadcast", "title", "animationActive", "showSponsor"],
     computed: {
         match() {
             return ReactiveRoot(this.broadcast?.live_match?.[0], {
@@ -89,7 +92,18 @@ export default {
         },
         themeBackground() {
             return themeBackground1(this.mvpTeam);
-        }
+        },
+        sponsor() {
+            if (!this.broadcast?.sponsors) return null;
+            return ReactiveArray("sponsors", {
+                theme: ReactiveThing("theme"),
+            })(this.broadcast)[0];
+        },
+    },
+    methods: {
+        logo (theme) {
+            return resizedImage(theme, ["default_wordmark", "default_logo"], "h-300");
+        },
     },
     watch: {
         mvpTeam: {
@@ -133,6 +147,27 @@ export default {
     .title-holder {
         min-height: 168px;
     }
+    .sponsor-holder {
+        padding-top: 80px;
+        min-height: 64px;
+    }
+    .sponsor-name-holder {
+        display: flex;
+        flex-direction: column;
+        border-bottom: 8px solid transparent;
+    }
+    .sponsor-name {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 2em;
+        padding: 0 0.5em;
+    }
+    .break-sponsor-logo {
+        position: relative;
+        width: 300px;
+        height: 150px;
+    }
     .title {
         display: flex;
         font-size: 6em;