Add schedule team logos to thumbnail creator

slmnio · Dec 15, 2023 · 09ee522 · 09ee522
1 parent 083f221
commit 09ee522
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/website/src/components/broadcast/EventThumbnailCreator.vue b/website/src/components/broadcast/EventThumbnailCreator.vue
@@ -6,6 +6,11 @@
             <div class="event-icon-holder flex-center">
                 <div class="event-icon bg-center" :style="eventIcon"></div>
             </div>
+            <div class="schedule-holder d-flex" v-if="showSchedule" :class="{'has-title': !!title}">
+                <div class="match d-flex" v-for="match in schedule" :key="match.id">
+                    <ThemeLogo icon-padding="32px" class="team" :theme="team.theme" v-for="team in match.teams" :key="team.id" />
+                </div>
+            </div>
             <div class="title" v-if="title" :style="textColor" contenteditable="true">{{ title }}</div>
         </div>
 
@@ -19,12 +24,14 @@
 </template>
 
 <script>
-import { ReactiveRoot, ReactiveThing } from "@/utils/reactive";
+import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 import { resizedImage } from "@/utils/images";
+import ThemeLogo from "@/components/website/ThemeLogo.vue";
 
 export default {
     name: "EventThumbnailCreator",
-    props: ["broadcast", "title"],
+    components: { ThemeLogo },
+    props: ["broadcast", "title", "showSchedule"],
     data: () => ({
         noStinger: true
     }),
@@ -35,6 +42,15 @@ export default {
                 theme: ReactiveThing("theme")
             });
         },
+        schedule() {
+            return (ReactiveRoot(this.broadcast, {
+                schedule: ReactiveArray("schedule", {
+                    teams: ReactiveArray("teams", {
+                        theme: ReactiveThing("theme")
+                    })
+                })
+            })?.schedule || []).filter(m => m.show_on_overlays);
+        },
         eventIcon() {
             if (!this.event || !this.event.theme) return {};
             return resizedImage(this.event.theme, ["default_wordmark", "default_logo", "small_logo"], "orig");
@@ -120,4 +136,22 @@ export default {
         text-align: center;
     }
 
+    .schedule-holder {
+        width: 80%;
+        height: 25%;
+        display: flex;
+        justify-content: center;
+        gap: 5%;
+        margin-bottom: 2%;
+        flex-shrink: 0;
+    }
+    .schedule-holder.has-title {
+        margin-bottom: 1%;
+    }
+
+    .team {
+        height: 100% !important;
+        width: 250px !important;
+    }
+
 </style>
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
@@ -148,7 +148,13 @@ export default [
             stage: route.query.stage || route.query.group
         })
     },
-    { path: "thumbnail", component: () => import("@/components/broadcast/EventThumbnailCreator.vue") },
+    {
+        path: "thumbnail",
+        component: () => import("@/components/broadcast/EventThumbnailCreator.vue"),
+        props: route => ({
+            showSchedule: route.query.schedule
+        })
+    },
     {
         path: "draft",
         component: () => import("@/components/broadcast/roots/DraftOverlay.vue"),