@reuters-graphics/graphics-components 3.0.12 → 3.0.13

package/dist/components/ScrollerVideo/demo/graphic/ai2svelte/annotation4.svelte

@@ -0,0 +1,360 @@
+<script>
+  // @ts-ignore img
+  import chartXs from '../imgs/annotation4-xs.png';
+  // @ts-ignore img
+  import chartSm from '../imgs/annotation4-sm.png';
+  // @ts-ignore img
+  import chartMd from '../imgs/annotation4-md.png';
+  // @ts{width}mg
+  import chartLg from '../imgs/annotation4-md.png';
+  // @ts-ignore img
+  import chartXl from '../imgs/annotation4-xl.png';
+
+  let width = null;
+</script>
+
+<div id="g-annotation4-box" bind:clientWidth={width}>
+  <!-- Artboard: xs -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-annotation4-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 187.8788% 0;"></div>
+      <div
+        id="g-annotation4-xs-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXs});`}
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-text g-aiAbs"
+        style="top:9.5161%;left:16.1999%;width:61.5152%;"
+      >
+        <p>The wave path is a short one, only about 100 yards long</p>
+      </div>
+      <div
+        id="g-ai0-2"
+        class="g-text g-aiAbs"
+        style="top:73.871%;left:16.1999%;width:61.5152%;"
+      >
+        <p>
+          Fierro exits the barrel with a score of 9.33 out of 10, as she was
+          deep in the tube, had good speed and went over the foam ball on her
+          exit
+        </p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: sm -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-annotation4-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 56.2745% 0;"></div>
+      <div
+        id="g-annotation4-sm-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartSm});`}
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-text g-aiAbs"
+        style="top:8.3624%;left:8.9136%;width:39.8039%;"
+      >
+        <p>The wave path is a short one, only about 100 yards long</p>
+      </div>
+      <div
+        id="g-ai1-2"
+        class="g-text g-aiAbs"
+        style="top:34.8432%;left:62.1168%;width:32.3529%;"
+      >
+        <p>
+          Fierro exits the barrel with a score of 9.33 out of 10, as she was
+          deep in the tube, had good speed and went over the foam ball on her
+          exit
+        </p>
+      </div>
+      <div
+        id="g-ai1-3"
+        class="g-text g-aiAbs"
+        style="top:68.9895%;left:9.1341%;width:47.2549%;"
+      >
+        <p>
+          The wave heaves so quickly that as it forms, it pulls water off the
+          reef, creating a ride that is often below sea level - seen as the
+          surfer exits up and over the wave to higher water
+        </p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: md -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-annotation4-md" class="g-artboard" style="">
+      <div style="padding: 0 0 56.3636% 0;"></div>
+      <div
+        id="g-annotation4-md-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartMd});`}
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-text g-aiAbs"
+        style="top:9.6774%;left:17.6103%;width:30%;"
+      >
+        <p>The wave path is a short one, only about 100 yards long</p>
+      </div>
+      <div
+        id="g-ai2-2"
+        class="g-text g-aiAbs"
+        style="top:37.3656%;left:62.5253%;width:30.303%;"
+      >
+        <p>
+          Fierro exits the barrel with a score of 9.33 out of 10, as she was
+          deep in the tube, had good speed and went over the foam ball on her
+          exit
+        </p>
+      </div>
+      <div
+        id="g-ai2-3"
+        class="g-text g-aiAbs"
+        style="top:71.2366%;left:15.8065%;width:36.8182%;"
+      >
+        <p>
+          The wave heaves so quickly that as it forms, it pulls water off the
+          reef, creating a ride that is often below sea level - seen as the
+          surfer exits up and over the wave to higher water
+        </p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: lg -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-annotation4-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 56.0215% 0;"></div>
+      <div
+        id="g-annotation4-lg-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartLg});`}
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-text g-aiAbs"
+        style="top:15.3551%;left:24.4264%;width:23.2258%;"
+      >
+        <p>The wave path is a short one,</p>
+        <p>only about 100 yards long</p>
+      </div>
+      <div
+        id="g-ai3-2"
+        class="g-text g-aiAbs"
+        style="top:38.5797%;left:69.5876%;width:25.3763%;"
+      >
+        <p>
+          Fierro exits the barrel with a score of 9.33 out of 10, as she was
+          deep in the tube, had good speed and went over the foam ball on her
+          exit
+        </p>
+      </div>
+      <div
+        id="g-ai3-3"
+        class="g-text g-aiAbs"
+        style="top:77.1593%;left:30.5554%;width:26.0215%;"
+      >
+        <p>
+          The wave heaves so quickly that as it forms, it pulls water off the
+          reef, creating a ride that is often below sea level - seen as the
+          surfer exits up and over the wave to higher water
+        </p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl -->
+  {#if width && width >= 1200}
+    <div id="g-annotation4-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 51.6667% 0;"></div>
+      <div
+        id="g-annotation4-xl-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXl});`}
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:19.5123%;margin-top:-17px;left:27.8891%;width:218px;"
+      >
+        <p class="g-pstyle0">The wave path is a short one,</p>
+        <p class="g-pstyle0">only about 100 yards long</p>
+      </div>
+      <div
+        id="g-ai4-2"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:60.48%;margin-top:-33px;left:68.0232%;width:274px;"
+      >
+        <p class="g-pstyle0">Fierro exits the barrel with a score of</p>
+        <p class="g-pstyle0">9.33 out of 10, as she was deep in the</p>
+        <p class="g-pstyle0">tube, had good speed and went over</p>
+        <p class="g-pstyle0">the foam ball on her exit</p>
+      </div>
+      <div
+        id="g-ai4-3"
+        class="g-text g-aiAbs g-aiPointText"
+        style="top:82.5768%;margin-top:-33px;left:38.7732%;width:319px;"
+      >
+        <p class="g-pstyle0">The wave heaves so quickly that as it forms,</p>
+        <p class="g-pstyle0">
+          it pulls water off the reef, creating a rid e that
+        </p>
+        <p class="g-pstyle0">is often below sea level - seen as the surfer</p>
+        <p class="g-pstyle0">exits up and over the wave to higher water</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2024-07-19 13:16 -->
+
+<!-- Generated by ai2html v0.100.0 - 2024-07-19 13:16 -->
+<!-- ai file: annotation4.ai -->
+<style>#g-annotation4-box,
+#g-annotation4-box .g-artboard {
+  margin: 0 auto;
+}
+
+#g-annotation4-box p {
+  margin: 0;
+}
+
+#g-annotation4-box .g-aiAbs {
+  position: absolute;
+}
+
+#g-annotation4-box .g-aiImg {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 100% !important;
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+#g-annotation4-box .g-aiPointText p {
+  white-space: nowrap;
+}
+
+#g-annotation4-xs {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation4-xs p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  height: auto;
+  position: static;
+}
+
+#g-annotation4-sm {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation4-sm p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  height: auto;
+  position: static;
+}
+
+#g-annotation4-md {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation4-md p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  height: auto;
+  position: static;
+}
+
+#g-annotation4-lg {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation4-lg p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  height: auto;
+  position: static;
+}
+
+#g-annotation4-xl {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-annotation4-xl p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-annotation4-xl .g-pstyle0 {
+  height: 16px;
+}
+
+/* Custom CSS */</style>

package/dist/components/ScrollerVideo/demo/graphic/ai2svelte/annotation4.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Annotation4;
+type Annotation4 = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Annotation4: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,248 @@
+import { type ScrollerVideoState } from './state.svelte';
+interface ScrollerVideoArgs {
+    src: string;
+    scrollerVideoContainer: HTMLElement | string;
+    objectFit?: string;
+    sticky?: boolean;
+    full?: boolean;
+    trackScroll?: boolean;
+    lockScroll?: boolean;
+    transitionSpeed?: number;
+    frameThreshold?: number;
+    useWebCodecs?: boolean;
+    onReady?: () => void;
+    onChange?: (percentage?: number) => void;
+    debug?: boolean;
+    autoplay?: boolean;
+    setVideoPercentage?: (percentage: number, options?: TransitionOptions) => void;
+    resize?: () => void;
+}
+export interface TransitionOptions {
+    jump: boolean;
+    transitionSpeed?: number;
+    easing?: ((progress: number) => number) | null;
+    autoplay?: boolean;
+}
+/**
+ * ScrollerVideo class for scroll-driven or programmatic video playback with Svelte integration.
+ */
+declare class ScrollerVideo {
+    /**
+     * The container element for the video or canvas.
+     * @type {HTMLElement | null}
+     */
+    container: HTMLElement | null;
+    /**
+     * The original container argument (element or string ID).
+     * @type {Element | string | undefined}
+     */
+    scrollerVideoContainer: Element | string | undefined;
+    /**
+     * Video source URL.
+     * @type {string}
+     */
+    src: string;
+    /**
+     * Speed of transitions.
+     * @type {number}
+     */
+    transitionSpeed: number;
+    /**
+     * Threshold for frame transitions.
+     * @type {number}
+     */
+    frameThreshold: number;
+    /**
+     * Whether to use WebCodecs for decoding.
+     * @type {boolean}
+     */
+    useWebCodecs: boolean;
+    /**
+     * CSS object-fit property for video/canvas.
+     * @type {string}
+     */
+    objectFit: string;
+    /**
+     * Whether to use sticky positioning.
+     * @type {boolean}
+     */
+    sticky: boolean;
+    /**
+     * Whether to track scroll position.
+     * @type {boolean}
+     */
+    trackScroll: boolean;
+    /**
+     * Callback when ready.
+     * @type {() => void}
+     */
+    onReady: () => void;
+    /**
+     * Callback on scroll percentage change.
+     * @type {(percentage?: number) => void}
+     */
+    onChange: (percentage?: number) => void;
+    /**
+     * Enable debug logging.
+     * @type {boolean}
+     */
+    debug: boolean;
+    /**
+     * Enable autoplay.
+     * @type {boolean}
+     */
+    autoplay: boolean;
+    /**
+     * The HTML video element.
+     * @type {HTMLVideoElement | undefined}
+     */
+    video: HTMLVideoElement | undefined;
+    /**
+     * Current scroll/video percentage (0-1).
+     * @type {number}
+     */
+    videoPercentage: number;
+    /**
+     * True if browser is Safari.
+     * @type {boolean}
+     */
+    isSafari: boolean;
+    /**
+     * Current video time in seconds.
+     * @type {number}
+     */
+    currentTime: number;
+    /**
+     * Target video time in seconds.
+     * @type {number}
+     */
+    targetTime: number;
+    /**
+     * Canvas for rendering frames (if using WebCodecs).
+     * @type {HTMLCanvasElement | null}
+     */
+    canvas: HTMLCanvasElement | null;
+    /**
+     * 2D context for the canvas.
+     * @type {CanvasRenderingContext2D | null}
+     */
+    context: CanvasRenderingContext2D | null;
+    /**
+     * Decoded video frames (if using WebCodecs).
+     * @type {ImageBitmap[] | null}
+     */
+    frames: ImageBitmap[] | null;
+    /**
+     * Video frame rate.
+     * @type {number}
+     */
+    frameRate: number;
+    /**
+     * Target scroll position in pixels, if set.
+     * @type {number | null}
+     */
+    targetScrollPosition: number | null;
+    /**
+     * Current frame index (if using WebCodecs).
+     * @type {number}
+     */
+    currentFrame: number;
+    /**
+     * True if using WebCodecs for decoding.
+     * @type {boolean}
+     */
+    usingWebCodecs: boolean;
+    /**
+     * Total video duration in seconds.
+     * @type {number}
+     */
+    totalTime: number;
+    /**
+     * RequestAnimationFrame ID for transitions.
+     * @type {number | null}
+     */
+    transitioningRaf: number | null;
+    /**
+     * State object for component-level state.
+     * @type {ScrollerVideoState}
+     */
+    componentState: ScrollerVideoState;
+    /**
+     * Function to update scroll percentage (set in constructor).
+     * @type {((jump: boolean) => void) | undefined}
+     */
+    updateScrollPercentage: ((jump: boolean) => void) | undefined;
+    /**
+     * Function to handle resize events (set in constructor).
+     * @type {(() => void) | undefined}
+     */
+    resize: (() => void) | undefined;
+    /**
+     * Creates a new ScrollerVideo instance.
+     * @param {ScrollerVideoArgs} args - The arguments for initialization.
+     */
+    constructor({ src, scrollerVideoContainer, objectFit, sticky, full, trackScroll, lockScroll, transitionSpeed, frameThreshold, useWebCodecs, onReady, onChange, debug, autoplay, }: ScrollerVideoArgs);
+    /**
+     * Sets the currentTime of the video as a specified percentage of its total duration.
+     *
+     * @param percentage - The percentage of the video duration to set as the current time.
+     * @param options - Configuration options for adjusting the video playback.
+     *    - autoplay: boolean - If true, the video will start playing immediately after setting the percentage. Default is false.
+     *    - jump: boolean - If true, the video currentTime will jump directly to the specified percentage. If false, the change will be animated over time.
+     *    - transitionSpeed: number - Defines the speed of the transition when `jump` is false. Represents the duration of the transition in milliseconds. Default is 8.
+     *    - easing: (progress: number) => number - A function that defines the easing curve for the transition. It takes the progress ratio (a number between 0 and 1) as an argument and returns the eased value, affecting the playback speed during the transition.
+     */
+    setVideoPercentage(percentage: number, options?: TransitionOptions): void;
+    /**
+     * Sets the style of the video or canvas to "cover" its container.
+     * @param {HTMLElement | HTMLCanvasElement | undefined} el - The element to style.
+     */
+    setCoverStyle(el: HTMLElement | HTMLCanvasElement | undefined): void;
+    /**
+     * Uses webCodecs to decode the video into frames.
+     * @returns {Promise<void>} Resolves when decoding is complete.
+     */
+    decodeVideo(): Promise<void>;
+    /**
+     * Paints the frame to the canvas.
+     * @param {number} frameNum - The frame index to paint.
+     */
+    paintCanvasFrame(frameNum: number): void;
+    /**
+     * Transitions the video or the canvas to the proper frame.
+     *
+     * @param options - Configuration options for adjusting the video playback.
+     *    - jump: boolean - If true, the video currentTime will jump directly to the specified percentage. If false, the change will be animated over time.
+     *    - transitionSpeed: number - Defines the speed of the transition when `jump` is false. Represents the duration of the transition in milliseconds. Default is 8.
+     *    - easing: (progress: number) => number - A function that defines the easing curve for the transition. It takes the progress ratio (a number between 0 and 1) as an argument and returns the eased value, affecting the playback speed during the transition.
+     */
+    transitionToTargetTime({ jump, transitionSpeed, easing, }: TransitionOptions): void;
+    /**
+     * Sets the currentTime of the video as a specified percentage of its total duration.
+     *
+     * @param percentage - The percentage of the video duration to set as the current time.
+     * @param options - Configuration options for adjusting the video playback.
+     *    - jump: boolean - If true, the video currentTime will jump directly to the specified percentage. If false, the change will be animated over time.
+     *    - transitionSpeed: number - Defines the speed of the transition when `jump` is false. Represents the duration of the transition in milliseconds. Default is 8.
+     *    - easing: (progress: number) => number - A function that defines the easing curve for the transition. It takes the progress ratio (a number between 0 and 1) as an argument and returns the eased value, affecting the playback speed during the transition.
+     */
+    setTargetTimePercent(percentage: number, options?: TransitionOptions): void;
+    /**
+     * Simulate trackScroll programmatically (scrolls on page by percentage of video).
+     * @param {number} percentage - The percentage of the video to scroll to.
+     */
+    setScrollPercent(percentage: number): void;
+    /**
+     * Call to destroy this ScrollerVideo object.
+     */
+    destroy(): void;
+    /**
+     * Autoplay the video by scrolling to the end.
+     */
+    autoplayScroll(): void;
+    /**
+     * Updates debug information in the component state.
+     */
+    updateDebugInfo(): void;
+}
+export default ScrollerVideo;