improvements

src/components/ScrollyVideo/Debug.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+  const { componentState } = $props();
+
+  let isMoving = $state(false);
+  let preventDetails = $state(false);
+  let position = $state({ x: 8, y: 8 });
+
+  function onMouseDown(e: MouseEvent) {
+    isMoving = true;
+    e.preventDefault();
+  }
+
+  function onMouseMove(e: MouseEvent) {
+    if (isMoving) {
+      position = {
+        x: position.x + e.movementX,
+        y: position.y + e.movementY,
+      };
+      preventDetails = true;
+    }
+    e.preventDefault();
+  }
+
+  function onMouseUp(e: MouseEvent) {
+    if (isMoving) {
+      isMoving = false;
+      setTimeout(() => {
+        preventDetails = false;
+      }, 5);
+      e.stopImmediatePropagation();
+    }
+    e.preventDefault();
+  }
+
+  function onClick(e: MouseEvent) {
+    if (preventDetails) {
+      e.preventDefault();
+    }
+    isMoving = false;
+  }
+</script>
+
+<svelte:window onmousemove={onMouseMove} />
+
+<div
+  style="position: absolute; top: {position.y}px; left: {position.x}px; z-index: 5; user-select: none;"
+  role="region"
+>
+  <details class="debug-info" open>
+    <summary
+      class="text-xxs font-sans font-bold title"
+      style="grid-column: span 2;"
+      onmousedown={onMouseDown}
+      onmouseup={onMouseUp}
+      onclick={onClick}
+    >
+      CONSOLE
+    </summary>
+    <div class="state-debug">
+      <p>Source:</p>
+      <p class="state-value">{componentState.generalData.src}</p>
+      <!--  -->
+      <p>Progress:</p>
+      <div style="display: flex; flex-direction: column; gap: 4px;">
+        <p class="state-value">{componentState.generalData.videoPercentage}</p>
+        <div id="video-progress-bar">
+          <div
+            style="width: {componentState.generalData.videoPercentage *
+              100}%; height: 100%;"
+          ></div>
+        </div>
+      </div>
+      <!--  -->
+      <p>Framerate:</p>
+      <p class="state-value">{componentState.generalData.frameRate}</p>
+      <!--  -->
+      <p>Current time:</p>
+      <p class="state-value">
+        {componentState.generalData.currentTime}/{componentState.generalData
+          .totalTime}
+      </p>
+      <!--  -->
+      {#if componentState.usingWebCodecs}
+        <p>Codec:</p>
+        <p class="state-value">
+          <span class="tag">{componentState.framesData.codec}</span>
+        </p>
+
+        <!--  -->
+        <p>Current frame:</p>
+        <p class="state-value">
+          {componentState.framesData.currentFrame}/{componentState.framesData
+            .totalFrames}
+        </p>
+      {/if}
+      <!--  -->
+      <p>Will Autoplay?:</p>
+      <p class="state-value">
+        <span class="tag">{componentState.willAutoPlay}</span>
+      </p>
+      <!--  -->
+      {#if componentState.willAutoPlay}
+        <p>Autoplaying:</p>
+        <p class="state-value">
+          <span class="tag">{componentState.isAutoPlaying}</span>
+        </p>
+        <p>Autoplay progress:</p>
+        <div style="display: flex; flex-direction: column; gap: 4px;">
+          <p class="state-value">{componentState.autoplayProgress}</p>
+          <div id="video-progress-bar">
+            <div
+              style="width: {componentState.autoplayProgress *
+                100}%; height: 100%;"
+            ></div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </details>
+</div>
+
+<style lang="scss">
+  @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
+
+  .debug-info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 1);
+    z-index: 3;
+    margin: 0;
+    width: 50vmin;
+    min-width: 30vmin;
+    padding: 8px;
+    border-radius: 8px;
+    overflow: auto;
+    resize: horizontal;
+    opacity: 0.6;
+    transition: opacity 0.3s ease;
+    filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.5));
+
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      opacity: 0;
+      block-size: 0;
+      overflow-y: clip;
+      transition:
+        content-visibility 0.4s allow-discrete,
+        opacity 0.4s,
+        block-size 0.4s;
+    }
+
+    &[open]::details-content {
+      opacity: 1;
+      block-size: auto;
+    }
+
+    .title {
+      width: 100%;
+      font-family: 'Geist Mono', monospace;
+      color: white;
+      margin: 0;
+    }
+
+    * {
+      user-select: none;
+    }
+  }
+
+  .debug-info[open] {
+    opacity: 1;
+  }
+
+  div.state-debug {
+    display: grid;
+    width: 100%;
+    padding: 8px 8px 16px 8px;
+    grid-template-columns: 10vmin 1fr;
+    align-items: center;
+    gap: 0.75rem 0.25rem;
+    background-color: #1e1e1e;
+    border-radius: 4px;
+    margin-top: 8px;
+  }
+
+  p {
+    font-size: var(--theme-font-size-xxs);
+    font-family: 'Geist Mono', monospace;
+    padding: 0;
+    margin: 0;
+    color: rgba(255, 255, 255, 0.7);
+    overflow-wrap: anywhere;
+    line-height: 100%;
+    font-variant: tabular-nums;
+  }
+
+  .state-value {
+    color: white;
+  }
+
+  #video-progress-bar {
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.2);
+    height: 2px;
+    border-radius: 50px;
+    // margin: auto;
+
+    div {
+      background-color: white;
+      border-radius: 50px;
+    }
+  }
+
+  .tag {
+    padding: 0.1rem 0.2rem;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.2);
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+</style>

src/components/ScrollyVideo/ScrollyVideo.mdx

@@ -432,6 +432,8 @@ Then add the following code to your App.svelte or the component where you want t
         startTime={parseFloat(caption.startTime)}
         endTime={parseFloat(caption.endTime)}
         text={caption.text}
+        backgroundColor="rgba(0, 0, 0, 0.8)"
+        position="bottom center"
       />
     {/each}
   </ScrollyVideo>

src/components/ScrollyVideo/ScrollyVideo.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  import { flattenObject } from './js/utils.js';
   import ScrollyVideo from './js/ScrollyVideo.js';
+  import Debug from './Debug.svelte';
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
   import { dev } from '$app/environment';
@@ -182,13 +182,13 @@
       {#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))
+            <Debug componentState={scrollyVideo.componentState} />
+            <!-- <p class="text-xxs font-sans"> -->
+            <!-- {@html JSON.stringify(flattenObject(scrollyVideo.componentState))
                 .replace(/[{}"]/g, '')
                 .split(',')
-                .join('<br>')}
-            </p>
+                .join('<br>')} -->
+            <!-- </p> -->
           </div>
         {/if}
 
@@ -202,26 +202,4 @@
 {/if}
 
 <style lang="scss">
-  .debug-info {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    z-index: 3;
-    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>

src/components/ScrollyVideo/demo/BasicTextBoxes.svelte

@@ -49,7 +49,7 @@
 <style lang="scss">
   :global(.custom-headline *) {
     color: white;
-    text-shadow: 0 0 10px black;
+    text-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
   }
 
   :global {

src/components/ScrollyVideo/js/ScrollyVideo.ts

@@ -236,6 +236,8 @@ class ScrollyVideo {
     this.transitioningRaf = null;
     this.componentState = createComponentState();
 
+    this.componentState.willAutoPlay = autoplay;
+
     // Make sure that we have a DOM
     if (typeof document !== 'object') {
       console.error('ScrollyVideo must be initiated in a DOM context');
@@ -737,8 +739,9 @@ class ScrollyVideo {
         : this.currentTime <= this.targetTime;
 
       if (this.componentState.isAutoPlaying) {
-        this.componentState.autoplayProgress =
-          this.currentTime / this.totalTime;
+        this.componentState.autoplayProgress = parseFloat(
+          (this.currentTime / this.totalTime).toFixed(4)
+        );
       }
 
       // If we are already close enough to our target, pause the video and return.

src/components/ScrollyVideo/js/state.svelte.ts

@@ -41,6 +41,7 @@ export type ScrollyVideoState = {
   generalData: GeneralData;
   usingWebCodecs: boolean;
   framesData: FramesData;
+  willAutoPlay: boolean;
   isAutoPlaying: boolean;
   autoplayProgress: number;
 };
@@ -64,6 +65,7 @@ export function createComponentState(): ScrollyVideoState {
       currentFrame: 0,
       totalFrames: 0,
     },
+    willAutoPlay: false,
     isAutoPlaying: false,
     autoplayProgress: 0,
   });