@reuters-graphics/graphics-components 3.0.12 → 3.0.13

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

@@ -0,0 +1,137 @@
+declare module 'mp4box' {
+  export interface MP4MediaTrack {
+    id: number;
+    created: Date;
+    modified: Date;
+    movie_duration: number;
+    movie_timescale: number;
+    layer: number;
+    alternate_group: number;
+    volume: number;
+    track_width: number;
+    track_height: number;
+    timescale: number;
+    duration: number;
+    bitrate: number;
+    codec: string;
+    language: string;
+    nb_samples: number;
+  }
+
+  export interface MP4VideoData {
+    width: number;
+    height: number;
+  }
+
+  export interface MP4VideoTrack extends MP4MediaTrack {
+    video: MP4VideoData;
+  }
+
+  export interface MP4AudioData {
+    sample_rate: number;
+    channel_count: number;
+    sample_size: number;
+  }
+
+  export interface MP4AudioTrack extends MP4MediaTrack {
+    audio: MP4AudioData;
+  }
+
+  export type MP4Track = MP4VideoTrack | MP4AudioTrack;
+
+  export interface MP4Info {
+    duration: number;
+    timescale: number;
+    fragment_duration: number;
+    isFragmented: boolean;
+    isProgressive: boolean;
+    hasIOD: boolean;
+    brands: string[];
+    created: Date;
+    modified: Date;
+    tracks: MP4Track[];
+    audioTracks: MP4AudioTrack[];
+    videoTracks: MP4VideoTrack[];
+  }
+
+  export interface MP4Sample {
+    alreadyRead: number;
+    chunk_index: number;
+    chunk_run_index: number;
+    cts: number;
+    data: Uint8Array;
+    degradation_priority: number;
+    depends_on: number;
+    description: unknown;
+    description_index: number;
+    dts: number;
+    duration: number;
+    has_redundancy: number;
+    is_depended_on: number;
+    is_leading: number;
+    is_sync: boolean;
+    number: number;
+    offset: number;
+    size: number;
+    timescale: number;
+    track_id: number;
+  }
+
+  export type MP4ArrayBuffer = ArrayBuffer & { fileStart: number };
+
+  export class DataStream {
+    static BIG_ENDIAN: boolean;
+    static LITTLE_ENDIAN: boolean;
+    buffer: ArrayBuffer;
+    constructor(
+      arrayBuffer?: ArrayBuffer,
+      byteOffset: number,
+      endianness: boolean
+    ): void;
+    // TODO: Complete interface
+  }
+
+  export interface Trak {
+    mdia?: {
+      minf?: {
+        stbl?: {
+          stsd?: {
+            entries: {
+              avcC?: {
+                write: (stream: DataStream) => void;
+              };
+              hvcC?: {
+                write: (stream: DataStream) => void;
+              };
+            }[];
+          };
+        };
+      };
+    };
+    // TODO: Complete interface
+  }
+
+  export interface MP4File {
+    [x: string]: unknown;
+    onMoovStart?: () => void;
+    onReady?: (info: MP4Info) => void;
+    onError?: (e: string) => void;
+    onSamples?: (id: number, user: unknown, samples: MP4Sample[]) => unknown;
+
+    appendBuffer(data: MP4ArrayBuffer): number;
+    start(): void;
+    stop(): void;
+    flush(): void;
+    releaseUsedSamples(trackId: number, sampleNumber: number): void;
+    setExtractionOptions(
+      trackId: number,
+      user?: unknown,
+      options?: { nbSamples?: number; rapAlignment?: number }
+    ): void;
+    getTrackById(trackId: number): Trak;
+  }
+
+  export function createFile(): MP4File;
+
+  export {};
+}

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

@@ -0,0 +1,51 @@
+/**
+ * General video data for ScrollerVideo state.
+ * @typedef {Object} GeneralData
+ * @property {string} src - Video source URL.
+ * @property {number} videoPercentage - Current video percentage (0-1).
+ * @property {number} frameRate - Video frame rate.
+ * @property {number} currentTime - Current video time in seconds.
+ * @property {number} totalTime - Total video duration in seconds.
+ */
+type GeneralData = {
+    src: string;
+    videoPercentage: number;
+    frameRate: number;
+    currentTime: number;
+    totalTime: number;
+};
+/**
+ * Frame-level data for ScrollerVideo state.
+ * @typedef {Object} FramesData
+ * @property {string} codec - Video codec string.
+ * @property {number} currentFrame - Current frame index.
+ * @property {number} totalFrames - Total number of frames.
+ */
+type FramesData = {
+    codec: string;
+    currentFrame: number;
+    totalFrames: number;
+};
+/**
+ * State object for ScrollerVideo component.
+ * @typedef {Object} ScrollerVideoState
+ * @property {GeneralData} generalData - General video data.
+ * @property {boolean} usingWebCodecs - Whether WebCodecs is used.
+ * @property {FramesData} framesData - Frame-level data.
+ * @property {boolean} isAutoPlaying - Whether video is autoplaying.
+ * @property {number} autoplayProgress - Progress of autoplay (0-1).
+ */
+export type ScrollerVideoState = {
+    generalData: GeneralData;
+    usingWebCodecs: boolean;
+    framesData: FramesData;
+    willAutoPlay: boolean;
+    isAutoPlaying: boolean;
+    autoplayProgress: number;
+};
+/**
+ * Creates a new ScrollerVideoState object with default values.
+ * @returns {ScrollerVideoState} The initialized state object.
+ */
+export declare function createComponentState(): ScrollerVideoState;
+export {};

package/dist/components/ScrollerVideo/ts/state.svelte.js

@@ -0,0 +1,25 @@
+/**
+ * Creates a new ScrollerVideoState object with default values.
+ * @returns {ScrollerVideoState} The initialized state object.
+ */
+export function createComponentState() {
+    const scrollerVideoState = $state({
+        generalData: {
+            src: '',
+            videoPercentage: 0,
+            frameRate: 0,
+            currentTime: 0,
+            totalTime: 0,
+        },
+        usingWebCodecs: false,
+        framesData: {
+            codec: '',
+            currentFrame: 0,
+            totalFrames: 0,
+        },
+        willAutoPlay: false,
+        isAutoPlaying: false,
+        autoplayProgress: 0,
+    });
+    return scrollerVideoState;
+}

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

@@ -0,0 +1,70 @@
+import type { ScrollerVideoState } from './state.svelte';
+/**
+ * Flattened version of ScrollerVideoState for easier access to all properties.
+ * @typedef {Object} FlattenedScrollerVideoState
+ * @property {string} src - Video source URL.
+ * @property {number} videoPercentage - Current video percentage (0-1).
+ * @property {number} frameRate - Video frame rate.
+ * @property {number} currentTime - Current video time in seconds.
+ * @property {number} totalTime - Total video duration in seconds.
+ * @property {boolean} usingWebCodecs - Whether WebCodecs is used.
+ * @property {string} codec - Video codec string.
+ * @property {number} currentFrame - Current frame index.
+ * @property {number} totalFrames - Total number of frames.
+ * @property {boolean} isAutoPlaying - Whether video is autoplaying.
+ * @property {number} autoplayProgress - Progress of autoplay (0-1).
+ */
+type FlattenedScrollerVideoState = {
+    src: string;
+    videoPercentage: number;
+    frameRate: number;
+    currentTime: number;
+    totalTime: number;
+    usingWebCodecs: boolean;
+    codec: string;
+    currentFrame: number;
+    totalFrames: number;
+    isAutoPlaying: boolean;
+    autoplayProgress: number;
+};
+/**
+ * Returns a debounced version of the given function.
+ * @template T
+ * @param {T} func - The function to debounce.
+ * @param {number} [delay=0] - The debounce delay in milliseconds.
+ * @returns {(...args: Parameters<T>) => void} The debounced function.
+ */
+export declare function debounce<T extends (...args: unknown[]) => void>(func: T, delay?: number): (...args: Parameters<T>) => void;
+/**
+ * Checks if the current scroll position is at the target position within a threshold.
+ * @param {number} targetScrollPosition - The target scroll position in pixels.
+ * @param {number} [threshold=1] - The allowed threshold in pixels.
+ * @returns {boolean} True if the current scroll position is within the threshold of the target.
+ */
+export declare const isScrollPositionAtTarget: (targetScrollPosition: number, threshold?: number) => boolean;
+/**
+ * Constrains a number between a lower and upper bound.
+ * @param {number} n - The number to constrain.
+ * @param {number} low - The lower bound.
+ * @param {number} high - The upper bound.
+ * @returns {number} The constrained value.
+ */
+export declare function constrain(n: number, low: number, high: number): number;
+/**
+ * Maps a number from one range to another.
+ * @param {number} n - The number to map.
+ * @param {number} start1 - Lower bound of the value's current range.
+ * @param {number} stop1 - Upper bound of the value's current range.
+ * @param {number} start2 - Lower bound of the value's target range.
+ * @param {number} stop2 - Upper bound of the value's target range.
+ * @param {boolean} [withinBounds=true] - Whether to constrain the result within the target range.
+ * @returns {number} The mapped value.
+ */
+export declare function map(n: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds?: boolean): number;
+/**
+ * Flattens a ScrollerVideoState object into a single-level object for easier access.
+ * @param {ScrollerVideoState} obj - The state object to flatten.
+ * @returns {FlattenedScrollerVideoState} The flattened state object.
+ */
+export declare function flattenObject(obj: ScrollerVideoState): FlattenedScrollerVideoState;
+export {};

package/dist/components/ScrollerVideo/ts/utils.js

@@ -0,0 +1,92 @@
+/**
+ * Returns a debounced version of the given function.
+ * @template T
+ * @param {T} func - The function to debounce.
+ * @param {number} [delay=0] - The debounce delay in milliseconds.
+ * @returns {(...args: Parameters<T>) => void} The debounced function.
+ */
+export function debounce(func, delay = 0) {
+    let timeoutId;
+    return (...args) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+}
+/**
+ * Checks if the current scroll position is at the target position within a threshold.
+ * @param {number} targetScrollPosition - The target scroll position in pixels.
+ * @param {number} [threshold=1] - The allowed threshold in pixels.
+ * @returns {boolean} True if the current scroll position is within the threshold of the target.
+ */
+export const isScrollPositionAtTarget = (targetScrollPosition, threshold = 1) => {
+    const currentScrollPosition = window.pageYOffset;
+    const difference = Math.abs(currentScrollPosition - targetScrollPosition);
+    return difference < threshold;
+};
+/**
+ * Constrains a number between a lower and upper bound.
+ * @param {number} n - The number to constrain.
+ * @param {number} low - The lower bound.
+ * @param {number} high - The upper bound.
+ * @returns {number} The constrained value.
+ */
+export function constrain(n, low, high) {
+    return Math.max(Math.min(n, high), low);
+}
+/**
+ * Maps a number from one range to another.
+ * @param {number} n - The number to map.
+ * @param {number} start1 - Lower bound of the value's current range.
+ * @param {number} stop1 - Upper bound of the value's current range.
+ * @param {number} start2 - Lower bound of the value's target range.
+ * @param {number} stop2 - Upper bound of the value's target range.
+ * @param {boolean} [withinBounds=true] - Whether to constrain the result within the target range.
+ * @returns {number} The mapped value.
+ */
+export function map(n, start1, stop1, start2, stop2, withinBounds = true) {
+    const newval = ((n - start1) / (stop1 - start1)) * (stop2 - start2) + start2;
+    if (!withinBounds) {
+        return newval;
+    }
+    if (start2 < stop2) {
+        return constrain(newval, start2, stop2);
+    }
+    else {
+        return constrain(newval, stop2, start2);
+    }
+}
+/**
+ * Flattens a ScrollerVideoState object into a single-level object for easier access.
+ * @param {ScrollerVideoState} obj - The state object to flatten.
+ * @returns {FlattenedScrollerVideoState} The flattened state object.
+ */
+export function flattenObject(obj) {
+    const result = {};
+    function flatten(current, property) {
+        if (Object(current) !== current) {
+            result[property] = current;
+        }
+        else if (Array.isArray(current)) {
+            for (let i = 0, l = current.length; i < l; i++) {
+                flatten(current[i], property + '[' + i + ']');
+                if (l === 0) {
+                    result[property] = [];
+                }
+            }
+        }
+        else if (typeof current === 'object') {
+            let isEmpty = true;
+            for (const p in current) {
+                isEmpty = false;
+                flatten(current[p], p);
+            }
+            if (isEmpty && property) {
+                result[property] = {};
+            }
+        }
+    }
+    flatten(obj, '');
+    return result;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * The main function for decoding video. Deals with the polyfill cases first,
+ * then calls our decodeVideo.
+ *
+ * @param src
+ * @param emitFrame
+ * @param debug
+ * @returns {Promise<never>|Promise<void>}
+ */
+declare const _default: (src: string, emitFrame: (frame: ImageBitmap) => void, debug?: boolean) => Promise<unknown>;
+export default _default;

package/dist/components/ScrollerVideo/ts/videoDecoder.js

@@ -0,0 +1,193 @@
+import * as MP4Box from 'mp4box';
+/**
+ * Taken from https://github.com/w3c/webcodecs/blob/main/samples/mp4-decode/mp4_demuxer.js
+ */
+class Writer {
+    data;
+    idx;
+    size;
+    constructor(size) {
+        this.data = new Uint8Array(size);
+        this.idx = 0;
+        this.size = size;
+    }
+    getData() {
+        if (this.idx !== this.size)
+            throw new Error('Mismatch between size reserved and sized used');
+        return this.data.slice(0, this.idx);
+    }
+    writeUint8(value) {
+        this.data.set([value], this.idx);
+        this.idx += 1;
+    }
+    writeUint16(value) {
+        const arr = new Uint16Array(1);
+        arr[0] = value;
+        const buffer = new Uint8Array(arr.buffer);
+        this.data.set([buffer[1], buffer[0]], this.idx);
+        this.idx += 2;
+    }
+    writeUint8Array(value) {
+        this.data.set(value, this.idx);
+        this.idx += value.length;
+    }
+}
+const getExtradata = (avccBox) => {
+    let i;
+    let size = 7;
+    for (i = 0; i < avccBox.SPS.length; i += 1) {
+        // nalu length is encoded as a uint16.
+        size += 2 + avccBox.SPS[i].length;
+    }
+    for (i = 0; i < avccBox.PPS.length; i += 1) {
+        // nalu length is encoded as a uint16.
+        size += 2 + avccBox.PPS[i].length;
+    }
+    const writer = new Writer(size);
+    writer.writeUint8(avccBox.configurationVersion);
+    writer.writeUint8(avccBox.AVCProfileIndication);
+    writer.writeUint8(avccBox.profile_compatibility);
+    writer.writeUint8(avccBox.AVCLevelIndication);
+    writer.writeUint8(avccBox.lengthSizeMinusOne + (63 << 2));
+    writer.writeUint8(avccBox.nb_SPS_nalus + (7 << 5));
+    for (i = 0; i < avccBox.SPS.length; i += 1) {
+        writer.writeUint16(avccBox.SPS[i].length);
+        writer.writeUint8Array(avccBox.SPS[i].nalu);
+    }
+    writer.writeUint8(avccBox.nb_PPS_nalus);
+    for (i = 0; i < avccBox.PPS.length; i += 1) {
+        writer.writeUint16(avccBox.PPS[i].length);
+        writer.writeUint8Array(avccBox.PPS[i].nalu);
+    }
+    return writer.getData();
+};
+/**
+ * decodeVideo takes an url to a mp4 file and converts it into frames.
+ *
+ * The steps for this are:
+ *  1. Determine the codec for this video file and demux it into chunks.
+ *  2. Read the chunks with VideoDecoder as fast as possible.
+ *  3. Return an array of frames that we can efficiently draw to a canvas.
+ *
+ * @param src
+ * @param VideoDecoder
+ * @param EncodedVideoChunk
+ * @param emitFrame
+ * @param debug
+ * @returns {Promise<unknown>}
+ */
+const decodeVideo = (src, emitFrame, { VideoDecoder, EncodedVideoChunk, debug, }) => new Promise((resolve, reject) => {
+    if (debug)
+        console.info('Decoding video from', src);
+    try {
+        // Uses mp4box for demuxing
+        const mp4boxfile = MP4Box.createFile();
+        // Holds the codec value
+        let codec = 'N/A';
+        // Creates a VideoDecoder instance
+        const decoder = new VideoDecoder({
+            output: (frame) => {
+                createImageBitmap(frame, { resizeQuality: 'high' }).then((bitmap) => {
+                    emitFrame(bitmap);
+                    frame.close();
+                    if (decoder.decodeQueueSize <= 0) {
+                        // Give it an extra half second to finish everything
+                        setTimeout(() => {
+                            if (decoder.state !== 'closed') {
+                                decoder.close();
+                                resolve(codec);
+                            }
+                        }, 500);
+                    }
+                });
+            },
+            error: (e) => {
+                console.error(e);
+                reject(e);
+            },
+        });
+        mp4boxfile.onReady = (info) => {
+            if (info && info.videoTracks && info.videoTracks[0]) {
+                [{ codec }] = info.videoTracks;
+                if (debug)
+                    console.info('Video with codec:', codec);
+                // Gets the avccbox used for reading extradata
+                const moov = mp4boxfile.moov;
+                const avccBox = moov?.traks[0].mdia.minf.stbl.stsd.entries[0].avcC;
+                if (!avccBox) {
+                    reject(new Error('Could not find avcC box for extradata.'));
+                    return;
+                }
+                const extradata = getExtradata(avccBox);
+                // configure decoder
+                decoder.configure({ codec, description: extradata });
+                // Setup mp4box file for breaking it into chunks
+                mp4boxfile.setExtractionOptions(info.videoTracks[0].id);
+                mp4boxfile.start();
+            }
+            else
+                reject(new Error('URL provided is not a valid mp4 video file.'));
+        };
+        mp4boxfile.onSamples = (_track_id, _ref, samples) => {
+            for (let i = 0; i < samples.length; i += 1) {
+                const sample = samples[i];
+                const type = sample.is_sync ? 'key' : 'delta';
+                const chunk = new EncodedVideoChunk({
+                    type,
+                    timestamp: sample.cts,
+                    duration: sample.duration,
+                    data: sample.data,
+                });
+                decoder.decode(chunk);
+            }
+        };
+        // Fetches the file into arraybuffers
+        fetch(src).then((res) => {
+            if (!res.body)
+                throw new Error('Response body is null');
+            const reader = res.body.getReader();
+            let offset = 0;
+            function appendBuffers(result) {
+                if (result.done) {
+                    mp4boxfile.flush();
+                    return Promise.resolve();
+                }
+                const buf = result.value.buffer;
+                buf.fileStart = offset;
+                offset += buf.byteLength;
+                mp4boxfile.appendBuffer(buf);
+                return reader.read().then(appendBuffers);
+            }
+            return reader.read().then(appendBuffers);
+        });
+    }
+    catch (e) {
+        reject(e);
+    }
+});
+/**
+ * The main function for decoding video. Deals with the polyfill cases first,
+ * then calls our decodeVideo.
+ *
+ * @param src
+ * @param emitFrame
+ * @param debug
+ * @returns {Promise<never>|Promise<void>}
+ */
+export default (src, emitFrame, debug = false) => {
+    // If our browser supports WebCodecs natively
+    if (typeof VideoDecoder === 'function' &&
+        typeof EncodedVideoChunk === 'function') {
+        if (debug)
+            console.info('WebCodecs is natively supported, using native version...');
+        return decodeVideo(src, emitFrame, {
+            VideoDecoder,
+            EncodedVideoChunk,
+            debug,
+        });
+    }
+    // Otherwise, resolve nothing
+    if (debug)
+        console.info('WebCodecs is not available in this browser.');
+    return Promise.resolve('N/A');
+};

package/dist/components/SiteHeadline/SiteHeadline.mdx

@@ -39,7 +39,10 @@ With the graphics kit, you'll likely get your text value from an ArchieML doc...
 section: Global News # Optional
 sectionUrl: https://www.reuters.com/graphics/ # Optional
 hed: A beautiful page
-authors: Samuel Granados, Dea Bankova
+[authors]
+* Samuel Granados
+* Dea Bankova
+[]
 published: 2022-09-12T08:30:00.000Z
 updated:
 ```

package/dist/index.d.ts

@@ -36,10 +36,12 @@ export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte
 export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
 export { default as ScrollerBase } from './components/ScrollerBase/ScrollerBase.svelte';
+export { default as ScrollerVideo } from './components/ScrollerVideo/ScrollerVideo.svelte';
+export { default as ScrollerVideoForeground } from './components/ScrollerVideo/ScrollerVideoForeground.svelte';
 export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte';
 export { default as Table } from './components/Table/Table.svelte';
 export { default as Theme, themes } from './components/Theme/Theme.svelte';
 export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
-export type { ContainerWidth, HeadlineSize } from './components/@types/global';
+export type { ContainerWidth, HeadlineSize, ScrollerVideoInstance, } from './components/@types/global';

package/dist/index.js

@@ -38,6 +38,8 @@ export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte
 export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
 export { default as ScrollerBase } from './components/ScrollerBase/ScrollerBase.svelte';
+export { default as ScrollerVideo } from './components/ScrollerVideo/ScrollerVideo.svelte';
+export { default as ScrollerVideoForeground } from './components/ScrollerVideo/ScrollerVideoForeground.svelte';
 export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte';
 export { default as Table } from './components/Table/Table.svelte';
 export { default as Theme, themes } from './components/Theme/Theme.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -63,6 +63,7 @@
     "eslint-plugin-storybook": "^0.12.0",
     "knip": "^5.50.5",
     "mermaid": "^10.9.3",
+    "mp4box": "^0.5.4",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
@@ -79,6 +80,7 @@
     "svelte": "^5.28.1",
     "svelte-check": "^4.1.6",
     "typescript": "^5.8.3",
+    "ua-parser-js": "^2.0.3",
     "vite": "^6.3.2"
   },
   "dependencies": {