Add text overlay for GFX

slmnio · Aug 25, 2023 · 1c948b7 · 1c948b7
1 parent 2995f80
commit 1c948b7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/website/src/components/broadcast/roots/GFXRoot.vue b/website/src/components/broadcast/roots/GFXRoot.vue
@@ -6,6 +6,7 @@
         <TweetOverlay v-if="gfx?.type === 'Tweet'" v-bind="overlayProps" />
         <IframeOverlay v-if="gfx?.type === 'Iframe'" v-bind="overlayProps" />
         <StandingsOverlay v-if="gfx?.type === 'Standings'" v-bind="overlayProps" :stage="overlayProps.identifier" />
+        <TextOverlay v-if="gfx?.type === 'Text'" v-bind="overlayProps" />
         <v-style>
             {{ gfx?.custom_css }}
         </v-style>
@@ -20,10 +21,11 @@ import ImageOverlay from "@/components/broadcast/roots/ImageOverlay.vue";
 import IframeOverlay from "@/components/broadcast/roots/IframeOverlay.vue";
 import StandingsOverlay from "@/components/broadcast/roots/StandingsOverlay.vue";
 import TweetOverlay from "@/components/broadcast/roots/TweetOverlay.vue";
+import TextOverlay from "@/components/broadcast/roots/TextOverlay.vue";
 
 export default {
     name: "GFXRoot",
-    components: { TweetOverlay, StandingsOverlay, IframeOverlay, ImageOverlay, BracketOverlay, ScheduleOverlay },
+    components: { TextOverlay, TweetOverlay, StandingsOverlay, IframeOverlay, ImageOverlay, BracketOverlay, ScheduleOverlay },
     props: {
         index: Number,
         broadcast: Object,
@@ -40,7 +42,8 @@ export default {
                 forceBracket: this.gfx?.bracket,
                 image: this.gfx?.image?.[0],
                 url: this.gfx?.url,
-                identifier: this.gfx?.identifier
+                identifier: this.gfx?.identifier,
+                markdown: this.gfx?.markdown
             };
         },
         gfx() {

diff --git a/website/src/components/broadcast/roots/TextOverlay.vue b/website/src/components/broadcast/roots/TextOverlay.vue
@@ -0,0 +1,16 @@
+<template>
+    <GenericOverlay :title="title">
+        <Markdown class="overlay-markdown w-100 h-100" :markdown="markdown"></Markdown>
+    </GenericOverlay>
+</template>
+
+<script>
+import GenericOverlay from "@/components/broadcast/roots/GenericOverlay.vue";
+import Markdown from "@/components/website/Markdown.vue";
+
+export default {
+    name: "TextOverlay",
+    props: ["broadcast", "title", "markdown", "extended"],
+    components: { Markdown, GenericOverlay }
+};
+</script>