@reuters-graphics/graphics-components 3.0.11 → 3.0.13

package/dist/components/@types/global.d.ts

@@ -1,4 +1,6 @@
 import type { Component } from 'svelte';
+import type { TransitionOptions } from '../ScrollerVideo/ts/ScrollerVideo.js';
+import type { ScrollerVideoState } from '../ScrollerVideo/ts/state.svelte.js';
 /**
  * Used for the list of <option> tags nested in a <select> input.
  */
@@ -40,3 +42,46 @@ export interface ScrollerStep {
     altText?: string;
 }
 export type ForegroundPosition = 'middle' | 'left' | 'right' | 'left opposite' | 'right opposite';
+export type ScrollerVideoForegroundPosition = 'top center' | 'top left' | 'top right' | 'bottom center' | 'bottom left' | 'bottom right' | 'center center' | 'center left' | 'center right';
+export interface ScrollerVideoInstance {
+    container: HTMLElement | null;
+    scrollerVideoContainer: Element | string | undefined;
+    src: string;
+    transitionSpeed: number;
+    frameThreshold: number;
+    useWebCodecs: boolean;
+    objectFit: string;
+    sticky: boolean;
+    trackScroll: boolean;
+    onReady: () => void;
+    onChange: (percentage?: number) => void;
+    debug: boolean;
+    autoplay: boolean;
+    video: HTMLVideoElement | undefined;
+    videoPercentage: number;
+    isSafari: boolean;
+    currentTime: number;
+    targetTime: number;
+    canvas: HTMLCanvasElement | null;
+    context: CanvasRenderingContext2D | null;
+    frames: ImageBitmap[] | null;
+    frameRate: number;
+    targetScrollPosition: number | null;
+    currentFrame: number;
+    usingWebCodecs: boolean;
+    totalTime: number;
+    transitioningRaf: number | null;
+    componentState: ScrollerVideoState;
+    updateScrollPercentage: ((jump: boolean) => void) | undefined;
+    resize: (() => void) | undefined;
+    setVideoPercentage(percentage: number, options?: TransitionOptions): void;
+    setCoverStyle(el: HTMLElement | HTMLCanvasElement | undefined): void;
+    decodeVideo(): Promise<void>;
+    paintCanvasFrame(frameNum: number): void;
+    transitionToTargetTime(options: TransitionOptions): void;
+    setTargetTimePercent(percentage: number, options?: TransitionOptions): void;
+    setScrollPercent(percentage: number): void;
+    destroy(): void;
+    autoplayScroll(): void;
+    updateDebugInfo(): void;
+}

package/dist/components/Framer/Framer.svelte

@@ -209,6 +209,7 @@ div#preview-label p {
 }
 
 #frame-parent {
+  box-sizing: content-box;
   border: 1px solid #ddd;
   margin: 0 auto;
   width: var(--width);

package/dist/components/Scroller/Scroller.mdx

@@ -72,7 +72,7 @@ In your graphics kit project, import your ai2svelte graphics in `App.svelte` and
 </script>
 ```
 
-Then add the following structure to your ArchieML Doc, making sure that the names of your charts in the `aiCharts` object match the names of each step's `background` in the ArchieML doc:
+Then add the following structure to your ArchieML doc, making sure that the names of your charts in the `aiCharts` object match the names of each step's `background` in the ArchieML doc:
 
 ```yaml
 # ArchieML doc
@@ -217,7 +217,7 @@ In your graphics kit project's `App.svelte`, import your custom foregroud compon
 </script>
 ```
 
-Then add the following structure to your ArchieML Doc, making sure that the names of your charts in the `aiCharts` and `foregroundComponents` objects match the names of each step's `background` and `foreground` in the ArchieML doc:
+Then add the following structure to your ArchieML doc, making sure that the names of your charts in the `aiCharts` and `foregroundComponents` objects match the names of each step's `background` and `foreground` in the ArchieML doc:
 
 ```yaml
 # ArchieML doc

package/dist/components/ScrollerBase/ScrollerBase.mdx

@@ -64,11 +64,6 @@ The `ScrollerBase` component powers the [`Scroller` component](?path=/story/comp
 <style lang="scss">
   @use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;
 
-  .scroller-demo-container {
-    width: mixins.$column-width-normal;
-    margin: auto;
-  }
-
   .step-foreground-container {
     height: 100vh;
     width: 50%;

package/dist/components/ScrollerVideo/Debug.svelte

@@ -0,0 +1,207 @@
+<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>@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: rgb(0, 0, 0);
+  z-index: 3;
+  margin: 0;
+  width: 50vmin;
+  min-width: 50vmin;
+  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) {
+  .debug-info {
+    interpolate-size: allow-keywords;
+  }
+}
+.debug-info::details-content {
+  opacity: 0;
+  block-size: 0;
+  overflow-y: clip;
+  transition: content-visibility 0.4s allow-discrete, opacity 0.4s, block-size 0.4s cubic-bezier(0.87, 0, 0.13, 1);
+}
+.debug-info[open]::details-content {
+  opacity: 1;
+  block-size: auto;
+}
+.debug-info .title {
+  width: 100%;
+  font-family: "Geist Mono", monospace;
+  color: white;
+  margin: 0;
+}
+.debug-info * {
+  user-select: none;
+}
+.debug-info[open] {
+  opacity: 1;
+}
+div.state-debug {
+  display: grid;
+  width: 100%;
+  padding: 8px 8px 16px 8px;
+  grid-template-columns: 20vmin 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;
+}
+#video-progress-bar 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>

package/dist/components/ScrollerVideo/Debug.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Debug: import("svelte").Component<{
+    componentState: any;
+}, {}, "">;
+type Debug = ReturnType<typeof Debug>;
+export default Debug;