Add twitter GFX

website/package.json

@@ -27,6 +27,7 @@
     "vue-meta": "^2.4.0",
     "vue-router": "^3.2.0",
     "vue-socket.io-extended": "^4.1.0",
+    "vue-tweet-embed": "^2.4.0",
     "vue-youtube-embed": "^2.2.2",
     "vuex": "^3.6.2"
   },

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

@@ -3,6 +3,7 @@
         <ScheduleOverlay v-if="gfx?.type === 'Schedule'" v-bind="overlayProps" />
         <BracketOverlay v-if="gfx?.type === 'Bracket'" v-bind="overlayProps" />
         <ImageOverlay v-if="gfx?.type === 'Image'" v-bind="overlayProps" />
+        <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" />
         <v-style>
@@ -18,10 +19,11 @@ import BracketOverlay from "@/components/broadcast/roots/BracketOverlay.vue";
 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";
 
 export default {
     name: "GFXRoot",
-    components: { StandingsOverlay, IframeOverlay, ImageOverlay, BracketOverlay, ScheduleOverlay },
+    components: { TweetOverlay, StandingsOverlay, IframeOverlay, ImageOverlay, BracketOverlay, ScheduleOverlay },
     props: {
         index: Number,
         broadcast: Object,
@@ -38,7 +40,7 @@ export default {
                 forceBracket: this.gfx?.bracket,
                 image: this.gfx?.image?.[0],
                 url: this.gfx?.url,
-                key: this.gfx?.key
+                identifier: this.gfx?.identifier
             };
         },
         gfx() {

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

@@ -0,0 +1,40 @@
+<template>
+    <div class="h-100 flex flex-center">
+        <Tweet :id="identifier"/>
+    </div>
+</template>
+
+<script>
+import { Tweet } from "vue-tweet-embed";
+
+export default {
+    name: "TweetOverlay",
+    props: ["broadcast", "identifier"],
+    components: { Tweet },
+    metaInfo() {
+        return {
+            title: `Tweet "${this.identifier}" | ${this.broadcast?.code || this.broadcast?.name || ""}`
+        };
+    },
+    mounted() {
+        // wait for an item with id twitter-widget-0
+        const interval = setInterval(() => {
+            const tweet = document.getElementById("twitter-widget-0");
+            if (tweet && tweet.style.height !== "0px") {
+                // increase height by 10px
+                tweet.style.height = tweet.style.height.replace("px", "") * 1 + 10 + "px";
+                // stop the interval
+                clearInterval(interval);
+            }
+        }, 100);
+    }
+};
+</script>
+
+
+<style>
+#twitter-widget-0 {
+    min-width: 550px;
+    transform: scale(2);
+}
+</style>