@cntrl-site/sdk 1.25.11 → 1.25.12

package/lib/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager.d.ts

@@ -1,6 +1,13 @@
 interface ScrollVideoOptions {
     src: string;
     videoContainer: HTMLElement | string;
+    frameData?: {
+        batchId: string;
+        frameCount: number;
+        frameRate: number;
+        frameFormat: string;
+    };
+    frameBaseUrl?: string;
 }
 export declare class ScrollPlaybackVideoManager {
     private container?;
@@ -18,7 +25,13 @@ export declare class ScrollPlaybackVideoManager {
     private transitionSpeed;
     private useWebCodecs;
     private resizeObserver;
+    private serverFrameData?;
+    private serverFrameBaseUrl?;
+    private serverFrameImages;
+    private currentServerFrameIdx;
     constructor(options: ScrollVideoOptions);
+    private loadServerFrames;
+    private paintServerFrame;
     private setCoverStyle;
     private resize;
     private decodeVideo;

package/lib/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,16 +28,21 @@ class ScrollPlaybackVideoManager {
         this.frameThreshold = 0.1;
         this.transitionSpeed = 10;
         this.useWebCodecs = true;
+        this.serverFrameImages = [];
+        this.currentServerFrameIdx = 0;
         this.resize = () => {
             if (this.debug)
                 console.info('ScrollVideo resizing...');
-            if (this.canvas) {
+            if (this.serverFrameData && this.serverFrameImages.length > 0) {
+                this.paintServerFrame(this.currentServerFrameIdx);
+            }
+            else if (this.canvas) {
                 this.setCoverStyle(this.canvas);
+                this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
             }
             else if (this.video) {
                 this.setCoverStyle(this.video);
             }
-            this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
         };
         this.decodeVideo = () => {
             if (!this.video)
@@ -63,7 +77,7 @@ class ScrollPlaybackVideoManager {
         this.resizeObserver = new ResizeObserver(() => {
             this.resize();
         });
-        const { src, videoContainer } = options;
+        const { src, videoContainer, frameData, frameBaseUrl } = options;
         if (typeof document !== 'object') {
             console.error('ScrollVideo must be initiated in a DOM context');
             return;
@@ -78,6 +92,12 @@ class ScrollPlaybackVideoManager {
         }
         this.container = typeof videoContainer === 'string' ? document.getElementById(videoContainer) : videoContainer;
         this.resizeObserver.observe(this.container);
+        if (frameData && frameBaseUrl) {
+            this.serverFrameData = frameData;
+            this.serverFrameBaseUrl = frameBaseUrl;
+            this.loadServerFrames();
+            return;
+        }
         this.video = document.createElement('video');
         this.video.src = src;
         this.video.preload = 'auto';
@@ -90,16 +110,58 @@ class ScrollPlaybackVideoManager {
         const ua = new ua_parser_js_1.default();
         const browserEngine = ua.getEngine();
         this.isSafari = browserEngine.name === 'WebKit';
-        const deviceType = ua.getDevice().type;
-        if (deviceType === 'mobile' || deviceType === 'tablet') {
-            this.useWebCodecs = false;
-        }
         if (this.debug && this.isSafari)
             console.info('Safari browser detected');
         this.video.addEventListener('loadedmetadata', () => this.setTargetTimePercent(0, true), { once: true });
         this.video.addEventListener('progress', this.resize);
         this.decodeVideo();
     }
+    loadServerFrames() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.serverFrameData || !this.serverFrameBaseUrl || !this.container)
+                return;
+            const { batchId, frameCount, frameRate } = this.serverFrameData;
+            const loadBatch = (start, end) => __awaiter(this, void 0, void 0, function* () {
+                const promises = [];
+                for (let i = start; i <= end; i++) {
+                    const idx = String(i).padStart(4, '0');
+                    const url = `${this.serverFrameBaseUrl}/${batchId}_${idx}.${this.serverFrameData.frameFormat}`;
+                    const img = new Image();
+                    this.serverFrameImages[i - 1] = img;
+                    promises.push(new Promise((resolve) => {
+                        img.onload = () => resolve();
+                        img.onerror = () => resolve();
+                        img.src = url;
+                    }));
+                }
+                yield Promise.all(promises);
+            });
+            const initialBatch = Math.min(10, frameCount);
+            yield loadBatch(1, initialBatch);
+            this.frameRate = frameRate;
+            this.canvas = document.createElement('canvas');
+            this.context = this.canvas.getContext('2d');
+            this.container.appendChild(this.canvas);
+            this.paintServerFrame(0);
+            if (initialBatch < frameCount) {
+                loadBatch(initialBatch + 1, frameCount);
+            }
+        });
+    }
+    paintServerFrame(frameIdx) {
+        if (!this.canvas || !this.context || !this.container)
+            return;
+        const clampedIdx = Math.max(0, Math.min(frameIdx, this.serverFrameImages.length - 1));
+        const img = this.serverFrameImages[clampedIdx];
+        if (!img || !img.naturalWidth)
+            return;
+        this.currentServerFrameIdx = clampedIdx;
+        this.canvas.width = img.naturalWidth;
+        this.canvas.height = img.naturalHeight;
+        const { width, height } = this.container.getBoundingClientRect();
+        this.resetCanvasDimensions(width, height, img.naturalWidth, img.naturalHeight);
+        this.context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
+    }
     setCoverStyle(el) {
         if (el && this.container) {
             el.style.position = 'absolute';
@@ -200,6 +262,11 @@ class ScrollPlaybackVideoManager {
         }
     }
     setTargetTimePercent(setPercentage, jump = true) {
+        if (this.serverFrameData && this.serverFrameImages.length > 0) {
+            const frameIdx = Math.round(Math.max(0, Math.min(setPercentage, 1)) * (this.serverFrameImages.length - 1));
+            this.paintServerFrame(frameIdx);
+            return;
+        }
         if (!this.video)
             return;
         this.targetTime = Math.max(Math.min(setPercentage, 1), 0)

package/lib/index.d.ts

@@ -10,7 +10,7 @@ export { AreaAnchor, AnchorSide, DimensionMode, PositionType, DimensionsType } f
 export { KeyframeType } from './types/keyframe/Keyframe';
 export type { Article } from './types/article/Article';
 export type { Section, SectionHeight } from './types/article/Section';
-export type { Item, ImageItem, ItemAny, CustomItem, ItemCommonParamsMap, ItemLayoutParamsMap, RectangleItem, StickyParams, VideoItem, RichTextItem, Link, VimeoEmbedItem, YoutubeEmbedItem, GroupItem, CodeEmbedItem, CompoundItem, ComponentItem, FillLayer } from './types/article/Item';
+export type { Item, ImageItem, ItemAny, CustomItem, ItemCommonParamsMap, ItemLayoutParamsMap, RectangleItem, StickyParams, VideoItem, RichTextItem, Link, VimeoEmbedItem, YoutubeEmbedItem, GroupItem, CodeEmbedItem, CompoundItem, ComponentItem, FillLayer, ScrollPlaybackFrameData } from './types/article/Item';
 export type { RichTextBlock, RichTextEntity, RichTextStyle } from './types/article/RichText';
 export type { ItemArea } from './types/article/ItemArea';
 export type { ItemState, ItemStateParams, StateParams, ItemStatesMap } from './types/article/ItemState';

package/lib/schemas/article/Item.schema.js

@@ -52,10 +52,19 @@ const ImageItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
     })),
     state: zod_1.z.record(ItemState_schema_1.MediaStateParamsSchema)
 });
+const ScrollPlaybackFrameDataSchema = zod_1.z.object({
+    status: zod_1.z.enum(['processing', 'ready', 'error']),
+    batchId: zod_1.z.string().optional(),
+    frameCount: zod_1.z.number().optional(),
+    frameRate: zod_1.z.number().optional(),
+    framesUrl: zod_1.z.string().optional(),
+    frameFormat: zod_1.z.string().optional()
+});
 const VideoItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
     type: zod_1.z.literal(ArticleItemType_1.ArticleItemType.Video),
     commonParams: zod_1.z.object({
         coverUrl: zod_1.z.string().nullable(),
+        scrollPlaybackFrameData: ScrollPlaybackFrameDataSchema.nullable().optional(),
         pointerEvents
     }).merge(FXParams),
     sticky: zod_1.z.record(zod_1.z.object({

package/lib/types/article/Item.d.ts

@@ -55,6 +55,7 @@ interface MediaCommonParams extends CommonParamsBase {
 }
 interface VideoCommonParams extends MediaCommonParams {
     coverUrl: string | null;
+    scrollPlaybackFrameData?: ScrollPlaybackFrameData | null;
 }
 interface ImageCommonParams extends MediaCommonParams {
 }
@@ -226,6 +227,14 @@ export interface ScrollPlaybackParams {
     from: number;
     to: number;
 }
+export interface ScrollPlaybackFrameData {
+    status: 'processing' | 'ready' | 'error';
+    batchId?: string;
+    frameCount?: number;
+    frameRate?: number;
+    framesUrl?: string;
+    frameFormat?: string;
+}
 export interface StickyParams {
     from: number;
     to?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk",
-  "version": "1.25.11",
+  "version": "1.25.12",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",