Merge pull request #68 from Pandipipas/update-graphicsview-with-overlay-previews

Add static overlay previews to Graphics view for scoreboard and commentary

src/dashboard/scoreko-dev/views/Graphics.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useHead } from '@unhead/vue';
+import { computed } from 'vue';
 
 defineOptions({ name: 'GraphicsView' });
 
@@ -12,6 +12,8 @@ type GraphicConfig = {
   height?: number;
 };
 
+type PreviewKind = 'scoreboard' | 'commentary' | null;
+
 useHead({ title: 'Graphics' });
 
 const graphics = computed<GraphicConfig[]>(
@@ -47,6 +49,20 @@ const copyUrl = async (graphic: GraphicConfig) => {
   document.body.removeChild(input);
 };
 
+const getPreviewKind = (graphic: GraphicConfig): PreviewKind => {
+  const name = buildGraphicName(graphic).toLowerCase();
+
+  if (name.includes('scoreboard')) {
+    return 'scoreboard';
+  }
+
+  if (name.includes('commentary')) {
+    return 'commentary';
+  }
+
+  return null;
+};
+
 const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
   const url = buildGraphicUrl(graphic);
   const name = buildGraphicName(graphic);
@@ -111,13 +127,6 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
           <QSeparator />
 
           <QCardSection>
-            <div class="text-caption text-grey-5 q-mb-xs">
-              URL
-            </div>
-            <div class="text-body2 text-mono q-mb-md">
-              {{ buildGraphicUrl(graphic) }}
-            </div>
-
             <div class="row items-center q-gutter-sm">
               <QBtn
                 color="primary"
@@ -133,9 +142,64 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
                 @dragstart="onDragStart($event, graphic)"
               />
             </div>
+
+            <div
+              v-if="getPreviewKind(graphic)"
+              class="graphics-preview q-mt-md"
+            >
+              <div class="graphics-preview__label text-caption text-grey-5 q-mb-sm">
+                Overlay preview (real)
+              </div>
+
+              <div class="graphics-preview__frame-wrap">
+                <iframe
+                  class="graphics-preview__frame"
+                  :src="buildGraphicUrl(graphic)"
+                  title="Graphic preview"
+                  loading="lazy"
+                />
+              </div>
+            </div>
           </QCardSection>
         </QCard>
       </div>
     </div>
   </QPage>
 </template>
+
+<style scoped>
+.graphics-preview {
+  border-top: 1px solid rgb(255 255 255 / 10%);
+  padding-top: 14px;
+}
+
+.graphics-preview__frame-wrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  container-type: inline-size;
+  border-radius: 8px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  background:
+    linear-gradient(45deg, rgb(255 255 255 / 8%) 25%, transparent 25%),
+    linear-gradient(-45deg, rgb(255 255 255 / 8%) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 8%) 75%),
+    linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / 8%) 75%),
+    rgb(8 8 8 / 70%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.graphics-preview__frame {
+  --preview-zoom: 0.50;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(100% / var(--preview-zoom));
+  height: calc(100% / var(--preview-zoom));
+  border: 0;
+  transform: translate(-50%, -50%) scale(var(--preview-zoom));
+  transform-origin: center;
+}
+</style>