@cntrl-site/sdk 1.25.12 → 1.26.0

package/lib/Client/Client.d.ts

@@ -3,6 +3,7 @@ import { Project } from '../types/project/Project';
 import { Layout } from '../types/project/Layout';
 import { Article } from '../types/article/Article';
 import { KeyframeAny } from '../types/keyframe/Keyframe';
+import { CustomComponentMeta } from '../types/customComponent/CustomComponentMeta';
 export declare class Client {
     private fetchImpl;
     private url;
@@ -11,6 +12,8 @@ export declare class Client {
     getPageData(pageSlug: string, buildMode?: 'default' | 'self-hosted'): Promise<CntrlPageData>;
     getProjectPagesPaths(): Promise<string[]>;
     getLayouts(): Promise<Layout[]>;
+    fetchCustomComponents(buildMode?: 'default' | 'self-hosted'): Promise<CustomComponentMeta[]>;
+    fetchCustomComponentBundle(componentId: string, buildMode?: 'default' | 'self-hosted'): Promise<string>;
     private fetchProject;
     private fetchArticle;
     private findArticleIdByPageSlug;
@@ -18,6 +21,7 @@ export declare class Client {
 interface FetchImplResponse {
     ok: boolean;
     json(): Promise<any>;
+    text(): Promise<string>;
     statusText: string;
 }
 type FetchImpl = (url: string, init?: RequestInit) => Promise<FetchImplResponse>;

package/lib/Client/Client.js

@@ -81,6 +81,36 @@ class Client {
             }
         });
     }
+    fetchCustomComponents() {
+        return __awaiter(this, arguments, void 0, function* (buildMode = 'default') {
+            const { username: projectId, password: apiKey, origin } = this.url;
+            const url = new url_1.URL(`/projects/${projectId}/custom-components?buildMode=${buildMode}`, origin);
+            const response = yield this.fetchImpl(url.href, {
+                headers: {
+                    Authorization: `Bearer ${apiKey}`
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch custom components for project #${projectId}: ${response.statusText}`);
+            }
+            return response.json();
+        });
+    }
+    fetchCustomComponentBundle(componentId_1) {
+        return __awaiter(this, arguments, void 0, function* (componentId, buildMode = 'default') {
+            const { username: projectId, password: apiKey, origin } = this.url;
+            const url = new url_1.URL(`/projects/${projectId}/custom-components/${componentId}/bundle.js?buildMode=${buildMode}`, origin);
+            const response = yield this.fetchImpl(url.href, {
+                headers: {
+                    Authorization: `Bearer ${apiKey}`
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch bundle for custom component #${componentId}: ${response.statusText}`);
+            }
+            return response.text();
+        });
+    }
     fetchProject() {
         return __awaiter(this, arguments, void 0, function* (buildMode = 'default') {
             const { username: projectId, password: apiKey, origin } = this.url;

package/lib/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager.d.ts

@@ -1,13 +1,6 @@
 interface ScrollVideoOptions {
     src: string;
     videoContainer: HTMLElement | string;
-    frameData?: {
-        batchId: string;
-        frameCount: number;
-        frameRate: number;
-        frameFormat: string;
-    };
-    frameBaseUrl?: string;
 }
 export declare class ScrollPlaybackVideoManager {
     private container?;
@@ -25,13 +18,7 @@ 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,13 +1,4 @@
 "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 };
 };
@@ -28,21 +19,16 @@ 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.serverFrameData && this.serverFrameImages.length > 0) {
-                this.paintServerFrame(this.currentServerFrameIdx);
-            }
-            else if (this.canvas) {
+            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)
@@ -77,7 +63,7 @@ class ScrollPlaybackVideoManager {
         this.resizeObserver = new ResizeObserver(() => {
             this.resize();
         });
-        const { src, videoContainer, frameData, frameBaseUrl } = options;
+        const { src, videoContainer } = options;
         if (typeof document !== 'object') {
             console.error('ScrollVideo must be initiated in a DOM context');
             return;
@@ -92,12 +78,6 @@ 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';
@@ -107,8 +87,7 @@ class ScrollPlaybackVideoManager {
         this.video.pause();
         this.video.load();
         this.container.appendChild(this.video);
-        const ua = new ua_parser_js_1.default();
-        const browserEngine = ua.getEngine();
+        const browserEngine = new ua_parser_js_1.default().getEngine();
         this.isSafari = browserEngine.name === 'WebKit';
         if (this.debug && this.isSafari)
             console.info('Safari browser detected');
@@ -116,52 +95,6 @@ class ScrollPlaybackVideoManager {
         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';
@@ -262,11 +195,6 @@ 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, ScrollPlaybackFrameData } from './types/article/Item';
+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 { RichTextBlock, RichTextEntity, RichTextStyle } from './types/article/RichText';
 export type { ItemArea } from './types/article/ItemArea';
 export type { ItemState, ItemStateParams, StateParams, ItemStatesMap } from './types/article/ItemState';
@@ -21,3 +21,4 @@ export type { Meta } from './types/project/Meta';
 export type { KeyframeValueMap, KeyframeAny } from './types/keyframe/Keyframe';
 export type { CompoundSettings } from './types/article/CompoundSettings';
 export type { Dimensions, Left, Position, RectCoordinates, RectObject, ScaleOrigin, Sides, Top } from './types/article/Rect';
+export type { CustomComponentMeta } from './types/customComponent/CustomComponentMeta';

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

@@ -52,19 +52,10 @@ 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({
@@ -200,7 +191,8 @@ const ComponentItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
     type: zod_1.z.literal(ArticleItemType_1.ArticleItemType.Component),
     commonParams: zod_1.z.object({
         componentId: zod_1.z.string(),
-        content: zod_1.z.any().optional()
+        content: zod_1.z.any().optional(),
+        parameters: zod_1.z.record(zod_1.z.any()).optional()
     }),
     sticky: zod_1.z.record(zod_1.z.object({
         from: zod_1.z.number(),

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

@@ -55,7 +55,6 @@ interface MediaCommonParams extends CommonParamsBase {
 }
 interface VideoCommonParams extends MediaCommonParams {
     coverUrl: string | null;
-    scrollPlaybackFrameData?: ScrollPlaybackFrameData | null;
 }
 interface ImageCommonParams extends MediaCommonParams {
 }
@@ -90,6 +89,7 @@ interface YoutubeEmbedCommonParams extends CommonParamsBase {
 interface ComponentCommonParams extends CommonParamsBase {
     componentId: string;
     content?: any;
+    parameters?: Record<string, any>;
 }
 interface MediaLayoutParams {
     opacity: number;
@@ -227,14 +227,6 @@ 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/lib/types/customComponent/CustomComponentMeta.d.ts

@@ -0,0 +1,5 @@
+export type CustomComponentMeta = {
+    id: string;
+    name: string;
+    schema: Record<string, unknown>;
+};

package/lib/types/customComponent/CustomComponentMeta.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

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