From 8939ac4fbd3a67d36c63f209eb7f41d3bcd09a96 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Thu, 5 Jun 2025 10:14:42 +0530
Subject: [PATCH] show debug info only on dev environment

---
 .../ScrollyVideo/ScrollyVideo.svelte          | 37 ++++++++++++++-----
 .../ScrollyVideo/demo/BasicTextBoxes.svelte   |  5 ++-
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/ScrollyVideo/ScrollyVideo.svelte b/src/components/ScrollyVideo/ScrollyVideo.svelte
index f1deac66..a3ef40e3 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.svelte
+++ b/src/components/ScrollyVideo/ScrollyVideo.svelte
@@ -4,6 +4,7 @@
   import ScrollyVideo from './js/ScrollyVideo.js';
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
+  import { dev } from '$app/environment';
 
   /**
    * Props for the ScrollyVideo Svelte component.
@@ -178,13 +179,18 @@
     style="height: {heightChange}; width: 100%; min-height: 100svh;"
   >
     <div bind:this={scrollyVideoContainer} data-scrolly-container>
-      {#if showDebugInfo && scrollyVideo}
-        <p class="debug-info text-xxs font-sans">
-          {@html JSON.stringify(flattenObject(scrollyVideo.componentState))
-            .replace(/[{}"]/g, '')
-            .split(',')
-            .join('<br>')}
-        </p>
+      {#if scrollyVideo}
+        {#if showDebugInfo && dev}
+          <div class="debug-info">
+            <p class="text-xxs font-sans font-bold title">FOR DEVS ONLY</p>
+            <p class="text-xxs font-sans">
+              {@html JSON.stringify(flattenObject(scrollyVideo.componentState))
+                .replace(/[{}"]/g, '')
+                .split(',')
+                .join('<br>')}
+            </p>
+          </div>
+        {/if}
 
         <!-- renders foregrounds -->
         {#if children}
@@ -200,11 +206,22 @@
     position: absolute;
     top: 0;
     left: 0;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgba(0, 0, 0, 0.6);
     z-index: 3;
-    padding: 8px;
     margin: 0;
     min-width: 25vmin;
+
+    .title {
+      width: 100%;
+      padding: 4px 0 0 8px;
+      margin: 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    p {
+      color: white;
+      margin: 0;
+      padding: 4px 8px 8px 8px;
+    }
   }
 </style>
diff --git a/src/components/ScrollyVideo/demo/BasicTextBoxes.svelte b/src/components/ScrollyVideo/demo/BasicTextBoxes.svelte
index 2f92105b..56b648ec 100644
--- a/src/components/ScrollyVideo/demo/BasicTextBoxes.svelte
+++ b/src/components/ScrollyVideo/demo/BasicTextBoxes.svelte
@@ -15,11 +15,12 @@
   <Foreground startTime={0} endTime={2}>
     <Headline
       class="custom-headline"
-      hed="ScrollyVideo inside ScrollerBase"
-      dek="This is a demo of ScrollyVideo inside ScrollerBase component."
+      hed="The Alps"
+      dek="Where better to start than with the Matterhorn?"
       section={'Reuters Graphics'}
       authors={['Jane Doe']}
       publishTime={new Date('2020-01-01').toISOString()}
+      hedSize="bigger"
     />
   </Foreground>
   <Foreground