@reuters-graphics/graphics-components 3.0.12 → 3.0.13

package/dist/components/ScrollerVideo/ScrollerVideo.svelte

@@ -0,0 +1,292 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import ScrollerVideo from './ts/ScrollerVideo';
+  import Debug from './Debug.svelte';
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+  import { dev } from '$app/environment';
+  import { Tween } from 'svelte/motion';
+
+  interface Props {
+    /** CSS class for scroller container */
+    class?: string;
+    /** ID of the scroller container */
+    id?: string;
+    /** Bindable instance of ScrollerVideo */
+    scrollerVideo?: ScrollerVideo;
+    /** Video source URL */
+    src: string;
+    /** Bindable percentage value to control video playback. **Ranges from 0 to 1** */
+    videoPercentage?: number;
+    /** Sets the maximum playbackRate for this video */
+    transitionSpeed?: number;
+    /** When to stop the video animation, in seconds	 */
+    frameThreshold?: number;
+    /** How the video should be resized to fit its container */
+    objectFit?: string;
+    /** Whether the video should have position: sticky	 */
+    sticky?: boolean;
+    /** Whether the video should take up the entire viewport	 */
+    full?: boolean;
+    /** Whether this object should automatically respond to scroll. Set this to **false** while manually controlling `videoPercentage` prop. */
+    trackScroll?: boolean;
+    /** Whether it ignores human scroll while it runs setVideoPercentage with enabled trackScroll	 */
+    lockScroll?: boolean;
+    /** Whether the library should use the webcodecs method. For more info, visit https://scrollyvideo.js.org/  */
+    useWebCodecs?: boolean;
+    /** The callback when it's ready to scroll	 */
+    onReady?: () => void;
+    /** The callback for video percentage change	 */
+    onChange?: () => void;
+    /** Whether to log debug information. Internal library logs. */
+    debug?: boolean;
+    /** Shows debug information on page */
+    showDebugInfo?: boolean;
+    /** Height of the video container. Set it to 100lvh when using inside `ScrollerBase` */
+    height?: string;
+    /** Whether the video should autoplay */
+    autoplay?: boolean;
+    /** Variable to control component rendering on embed page */
+    embedded?: boolean;
+    /** Additional properties for embedded videos */
+    embeddedProps?: {
+      /** When to start the playback in terms of the component's position */
+      threshold?: number;
+      /** Duration of ScrollerVideo experience as a video */
+      duration?: number;
+      /** Delay before the playback */
+      delay?: number;
+    };
+    /** Children render function */
+    children?: Snippet;
+  }
+
+  /** Default properties for embedded videos */
+  const defaultEmbedProps = {
+    threshold: 0.5,
+    delay: 200,
+  };
+
+  /**
+   * Main logic for ScrollerVideo Svelte component.
+   * Handles instantiation, prop changes, and cleanup.
+   */
+  let {
+    class: cls = '',
+    id = '',
+    src,
+    scrollerVideo = $bindable(),
+    videoPercentage,
+    onReady = $bindable(() => {}),
+    onChange = $bindable(() => {}),
+    height = '200lvh',
+    showDebugInfo = false,
+    embedded = false,
+    embeddedProps,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  // variable to hold the DOM element
+  /**
+   * Reference to the scroller video container DOM element.
+   * @type {HTMLDivElement | undefined}
+   */
+  let scrollerVideoContainer = $state<HTMLDivElement | undefined>(undefined);
+
+  // Store the props so we know when things change
+  let lastPropsString = '';
+
+  // Concatenate default and passed embedded props
+  let allEmbedProps = {
+    ...defaultEmbedProps,
+    ...embeddedProps,
+  };
+
+  // Holds regular scroller video component
+  // and scrolls automatically for embedded version
+  let embeddedContainer = $state<HTMLDivElement | undefined>(undefined);
+  let embeddedContainerHeight = $state<number | undefined>(undefined);
+  let embeddedContainerScrollHeight: number = $derived.by(() => {
+    let scrollHeight = 1;
+    if (embeddedContainer && embeddedContainerHeight) {
+      scrollHeight = embeddedContainer.scrollHeight - embeddedContainerHeight;
+    }
+    return scrollHeight;
+  });
+
+  const embeddedContainerScrollY = new Tween(0, {
+    duration: 1000,
+    delay: allEmbedProps.delay,
+    easing: (t) => +t,
+  });
+
+  $effect(() => {
+    if (embeddedContainer) {
+      embeddedContainer.scrollTop = embeddedContainerScrollY.current;
+    }
+  });
+
+  $effect(() => {
+    if (scrollerVideoContainer) {
+      if (JSON.stringify(restProps) !== lastPropsString) {
+        // if scrollervideo already exists and any parameter is updated, destroy and recreate.
+        if (scrollerVideo && scrollerVideo.destroy) scrollerVideo.destroy();
+
+        scrollerVideo = new ScrollerVideo({
+          src,
+          scrollerVideoContainer,
+          onReady,
+          onChange,
+          ...restProps,
+          trackScroll: embedded ? false : restProps.trackScroll, // trackScroll disabled for embedded version
+          autoplay: embedded ? false : restProps.autoplay, // autoplay disabled for embedded version
+        });
+
+        // if embedded prop is set,
+        // play the video when it crosses the threshold
+        // and reset it to zero when it crosses the threshold in opposite direction
+        if (embedded) {
+          const updatedOnReady = () => {
+            // add user defined onReady
+            onReady();
+
+            window?.addEventListener('scroll', () => {
+              if (
+                embeddedContainer &&
+                embeddedContainer.getBoundingClientRect().top <
+                  window.innerHeight * allEmbedProps.threshold
+              ) {
+                if (
+                  embeddedContainerScrollY.current == 0 &&
+                  embeddedContainerHeight &&
+                  scrollerVideo?.componentState
+                ) {
+                  const scrollDuration =
+                    allEmbedProps.duration ||
+                    scrollerVideo.componentState.generalData.totalTime * 1000;
+                  embeddedContainerScrollY.set(embeddedContainerScrollHeight, {
+                    duration: scrollDuration,
+                    delay: allEmbedProps.delay,
+                  });
+                }
+              } else if (
+                embeddedContainer &&
+                embeddedContainer.getBoundingClientRect().top >
+                  window.innerHeight * allEmbedProps.threshold
+              ) {
+                if (embeddedContainerScrollY.current > 0) {
+                  embeddedContainerScrollY.set(0, { duration: 0 });
+                }
+              }
+            });
+          };
+
+          scrollerVideo.onReady = updatedOnReady;
+        }
+
+        // pass on component state to child components
+        // this controls fade in and out of foregrounds
+        setContext('scrollerVideoState', scrollerVideo.componentState);
+
+        // Save the new props
+        lastPropsString = JSON.stringify(restProps);
+      }
+
+      // If we need to update the target time percent
+      if (
+        scrollerVideo &&
+        videoPercentage &&
+        videoPercentage >= 0 &&
+        videoPercentage <= 1
+      ) {
+        scrollerVideo.setVideoPercentage(videoPercentage);
+      }
+    }
+  });
+
+  /**
+   * Cleanup the component on destroy.
+   */
+  onDestroy(() => {
+    if (scrollerVideo && scrollerVideo.destroy) scrollerVideo.destroy();
+  });
+
+  /**
+   * heightChange drives the height of the component when autoplay is set to true.
+   * @type {string}
+   */
+  let heightChange = $derived.by(() => {
+    if (scrollerVideo) {
+      return `calc(${height} * ${1 - scrollerVideo?.componentState.autoplayProgress})`;
+    } else {
+      return height;
+    }
+  });
+</script>
+
+<!-- snippet to avoid redundancy between regular and embedded versions -->
+<!-- renders Debug component and children foregrounds -->
+{#snippet supportingElements()}
+  {#if scrollerVideo}
+    {#if showDebugInfo && dev}
+      <div class="debug-info">
+        <Debug componentState={scrollerVideo.componentState} />
+      </div>
+    {/if}
+
+    <!-- renders foregrounds -->
+    {#if children}
+      {@render children()}
+    {/if}
+  {/if}
+{/snippet}
+
+{#if embedded}
+  <div
+    class="embedded-scroller-video-container"
+    bind:this={embeddedContainer}
+    bind:clientHeight={embeddedContainerHeight}
+    onscroll={() => {
+      if (scrollerVideo && embeddedContainer) {
+        let scrollProgress =
+          embeddedContainer.scrollTop / embeddedContainerScrollHeight;
+        scrollerVideo.setVideoPercentage(scrollProgress, {
+          jump: scrollProgress == 0,
+          easing: (t) => t,
+        });
+      }
+    }}
+  >
+    <div {id} class="scroller-video-container embedded {cls}">
+      <div bind:this={scrollerVideoContainer} data-scroller-container>
+        {@render supportingElements()}
+      </div>
+    </div>
+  </div>
+{:else}
+  <div
+    {id}
+    class="scroller-video-container {cls}"
+    style="height: {heightChange}"
+  >
+    <div bind:this={scrollerVideoContainer} data-scroller-container>
+      {@render supportingElements()}
+    </div>
+  </div>
+{/if}
+
+<style>.scroller-video-container {
+  width: 100%;
+}
+.scroller-video-container.embedded {
+  height: 200lvh;
+}
+.scroller-video-container:not(.embedded) {
+  min-height: 100lvh;
+}
+
+.embedded-scroller-video-container {
+  max-height: 100lvh;
+  overflow: hidden;
+}</style>

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

@@ -0,0 +1,58 @@
+import ScrollerVideo from './ts/ScrollerVideo';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** CSS class for scroller container */
+    class?: string;
+    /** ID of the scroller container */
+    id?: string;
+    /** Bindable instance of ScrollerVideo */
+    scrollerVideo?: ScrollerVideo;
+    /** Video source URL */
+    src: string;
+    /** Bindable percentage value to control video playback. **Ranges from 0 to 1** */
+    videoPercentage?: number;
+    /** Sets the maximum playbackRate for this video */
+    transitionSpeed?: number;
+    /** When to stop the video animation, in seconds	 */
+    frameThreshold?: number;
+    /** How the video should be resized to fit its container */
+    objectFit?: string;
+    /** Whether the video should have position: sticky	 */
+    sticky?: boolean;
+    /** Whether the video should take up the entire viewport	 */
+    full?: boolean;
+    /** Whether this object should automatically respond to scroll. Set this to **false** while manually controlling `videoPercentage` prop. */
+    trackScroll?: boolean;
+    /** Whether it ignores human scroll while it runs setVideoPercentage with enabled trackScroll	 */
+    lockScroll?: boolean;
+    /** Whether the library should use the webcodecs method. For more info, visit https://scrollyvideo.js.org/  */
+    useWebCodecs?: boolean;
+    /** The callback when it's ready to scroll	 */
+    onReady?: () => void;
+    /** The callback for video percentage change	 */
+    onChange?: () => void;
+    /** Whether to log debug information. Internal library logs. */
+    debug?: boolean;
+    /** Shows debug information on page */
+    showDebugInfo?: boolean;
+    /** Height of the video container. Set it to 100lvh when using inside `ScrollerBase` */
+    height?: string;
+    /** Whether the video should autoplay */
+    autoplay?: boolean;
+    /** Variable to control component rendering on embed page */
+    embedded?: boolean;
+    /** Additional properties for embedded videos */
+    embeddedProps?: {
+        /** When to start the playback in terms of the component's position */
+        threshold?: number;
+        /** Duration of ScrollerVideo experience as a video */
+        duration?: number;
+        /** Delay before the playback */
+        delay?: number;
+    };
+    /** Children render function */
+    children?: Snippet;
+}
+declare const ScrollerVideo: import("svelte").Component<Props, {}, "onReady" | "onChange" | "scrollerVideo">;
+type ScrollerVideo = ReturnType<typeof ScrollerVideo>;
+export default ScrollerVideo;

package/dist/components/ScrollerVideo/ScrollerVideoForeground.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import { fade } from 'svelte/transition';
+  import { getContext } from 'svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
+  // Types
+  import type { Component, Snippet } from 'svelte';
+  import type { ScrollerVideoState } from './ts/state.svelte';
+  import type {
+    ContainerWidth,
+    ScrollerVideoForegroundPosition,
+  } from '../@types/global';
+
+  interface ForegroundProps {
+    id?: string;
+    class?: string;
+    startTime?: number;
+    endTime?: number;
+    children?: Snippet;
+    backgroundColour?: string;
+    width?: ContainerWidth;
+    position?: ScrollerVideoForegroundPosition | string;
+    text?: string;
+    Foreground?: Component;
+  }
+
+  let {
+    id = '',
+    class: cls = '',
+    startTime = 0,
+    endTime = 1,
+    children,
+    backgroundColour = '#000',
+    width = 'normal',
+    position = 'center center',
+    text,
+    Foreground,
+  }: ForegroundProps = $props();
+
+  let componentState: ScrollerVideoState = getContext('scrollerVideoState');
+</script>
+
+<Block class={`scroller-video-foreground ${cls}`} {id}>
+  {#if componentState.generalData.currentTime >= startTime && componentState.generalData.currentTime <= endTime}
+    <div
+      class="scroller-foreground"
+      in:fade={{ delay: 100, duration: 200 }}
+      out:fade={{ delay: 0, duration: 100 }}
+    >
+      <!-- Text blurb foreground -->
+      {#if text}
+        <Block
+          class="scroller-video-foreground-text {position.split(' ')[1]}"
+          {width}
+        >
+          <div
+            style="background-color: {backgroundColour};"
+            class="foreground-text {position.split(' ')[0]}"
+          >
+            <Markdown source={text} />
+          </div>
+        </Block>
+        <!-- Render children snippet -->
+      {:else if children}
+        <div class="scroller-video-foreground-item">
+          {@render children()}
+        </div>
+        <!-- Render Foreground component -->
+      {:else if Foreground}
+        <div class="scroller-video-foreground-item">
+          <Block width="fluid">
+            <Foreground />
+          </Block>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</Block>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.scroller-foreground {
+  width: 100%;
+  height: 100%;
+}
+
+:global(.scroller-video-foreground) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.scroller-video-foreground-item {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:global .scroller-video-foreground-text {
+  position: absolute;
+  width: 100%;
+  max-width: 594px;
+  height: 100%;
+}
+@media (max-width: 1200px) {
+  :global .scroller-video-foreground-text {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+:global .scroller-video-foreground-text.left {
+  left: 0;
+}
+:global .scroller-video-foreground-text.right {
+  right: 0;
+}
+:global .scroller-video-foreground-text.center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+:global .foreground-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 0.25rem;
+  background-color: white;
+  width: 100%;
+  padding-block: clamp(1.69rem, 1.58rem + 0.52vw, 2rem);
+  padding-inline: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
+  margin: 0;
+}
+:global .foreground-text :global(*) {
+  margin: 0;
+  padding: 0;
+}
+:global .foreground-text.center {
+  top: 50%;
+}
+:global .foreground-text.top {
+  top: 0;
+  transform: translate(-50%, 50%);
+}
+:global .foreground-text.bottom {
+  top: 100%;
+  transform: translate(-50%, -150%);
+}</style>

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

@@ -0,0 +1,17 @@
+import type { Component, Snippet } from 'svelte';
+import type { ContainerWidth, ScrollerVideoForegroundPosition } from '../@types/global';
+interface ForegroundProps {
+    id?: string;
+    class?: string;
+    startTime?: number;
+    endTime?: number;
+    children?: Snippet;
+    backgroundColour?: string;
+    width?: ContainerWidth;
+    position?: ScrollerVideoForegroundPosition | string;
+    text?: string;
+    Foreground?: Component;
+}
+declare const ScrollerVideoForeground: Component<ForegroundProps, {}, "">;
+type ScrollerVideoForeground = ReturnType<typeof ScrollerVideoForeground>;
+export default ScrollerVideoForeground;

package/dist/components/ScrollerVideo/demo/AdvancedUsecases.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import ScrollerVideo from '../ScrollerVideo.svelte';
+  import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
+  import Tennis from '../videos/tennis.mp4';
+  import { onDestroy } from 'svelte';
+
+  // Types
+  import type { ScrollerVideoInstance } from '../../@types/global.ts';
+
+  let scrollerVideo: ScrollerVideoInstance | undefined = $state(undefined);
+  let animationFrame = $state(0);
+  let index = $state(0); // index for the current step in ScrollerBase
+
+  /**
+   *    If ScrollerBase is on index 0, jump to the start of the video.
+   *    Otherwise, jump to 1, or 100% (the end), of the video.
+   */
+  function jumpVideo() {
+    if (index === 0) {
+      scrollerVideo?.setVideoPercentage(0, {
+        jump: false, // Eases the jump
+      });
+    } else {
+      scrollerVideo?.setVideoPercentage(1, {
+        jump: false,
+      });
+    }
+
+    animationFrame = requestAnimationFrame(jumpVideo);
+  }
+
+  // cancel requestAnimationFrame on destroy
+  onDestroy(() => {
+    cancelAnimationFrame(animationFrame);
+  });
+</script>
+
+<ScrollerBase bind:index query="div.step-foreground-container">
+  <!-- ScrollerVideo as background -->
+  {#snippet backgroundSnippet()}
+    <!-- Pass `jumpVideo` to `onReady` and set `trackScroll` to `false` -->
+    <ScrollerVideo
+      bind:scrollerVideo
+      src={Tennis}
+      height="100lvh"
+      trackScroll={false}
+      showDebugInfo
+      onReady={jumpVideo}
+    />
+  {/snippet}
+
+  <!-- Simple text foregrounds -->
+  {#snippet foregroundSnippet()}
+    <div class="step-foreground-container">
+      <h3 class="text-center">Index {index}</h3>
+    </div>
+    <div class="step-foreground-container">
+      <h3 class="text-center">Index {index}</h3>
+    </div>
+  {/snippet}
+</ScrollerBase>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+#progress-bar {
+  background-color: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  z-index: 4;
+  right: 0;
+  padding: 1rem;
+  top: 0;
+}
+#progress-bar progress {
+  height: 6px;
+  background-color: rgba(255, 0, 0, 0.2666666667); /* Background color of the entire bar */
+  margin: 0;
+}
+#progress-bar progress::-webkit-progress-value {
+  background-color: white;
+  border-radius: 10px;
+}
+#progress-bar progress::-webkit-progress-bar {
+  background-color: #444444;
+  border-radius: 10px;
+}
+#progress-bar p {
+  font-family: var(--theme-font-family-sans-serif);
+  color: white;
+  font-size: var(--theme-font-size-xs);
+  padding: 0;
+  margin: 0;
+}
+
+.step-foreground-container {
+  height: 100lvh;
+  width: 50%;
+  padding: 1em;
+  margin: auto;
+}
+.step-foreground-container h3 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 70% auto 0 auto;
+  height: 60px;
+  max-width: 400px;
+  color: white;
+  background: steelblue;
+}</style>

package/dist/components/ScrollerVideo/demo/AdvancedUsecases.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AdvancedUsecases: import("svelte").Component<Record<string, never>, {}, "">;
+type AdvancedUsecases = ReturnType<typeof AdvancedUsecases>;
+export default AdvancedUsecases;