@gxpl/sdk 0.0.7 → 0.0.9

package/{dist → lib}/index.d.ts

@@ -1,6 +1,5 @@
 export { Client as CntrlClient } from './sdk/Client/Client';
 export { FontFaceGenerator } from './sdk/FontFaceGenerator/FontFaceGenerator';
-export { getLayoutStyles, getLayoutMediaQuery } from './utils';
 export { ScrollPlaybackVideoManager } from './sdk/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager';
 export { SectionHeightMode } from './sdk/types/article/Section';
 export { TextAlign, TextDecoration, TextTransform, VerticalAlign } from './sdk/types/article/RichText';
@@ -9,18 +8,15 @@ export { AreaAnchor, AnchorSide, DimensionMode, PositionType } from './sdk/types
 export { KeyframeType } from './sdk/types/keyframe/Keyframe';
 export type { Article } from './sdk/types/article/Article';
 export type { Section, SectionHeight } from './sdk/types/article/Section';
-export type { Item, ImageItem, ItemAny, CustomItem, ItemCommonParamsMap, ItemLayoutParamsMap, RectangleItem, StickyParams, VideoItem, RichTextItem, Link, VimeoEmbedItem, YoutubeEmbedItem, GroupItem, CodeEmbedItem, CompoundItem, ComponentItem, FillLayer } from './sdk/types/article/Item';
+export type { Item, ImageItem, ItemAny, CustomItem, ItemParamsMap, RectangleItem, StickyParams, VideoItem, RichTextItem, Link, VimeoEmbedItem, YoutubeEmbedItem, GroupItem, CodeEmbedItem, CompoundItem, ComponentItem, FillLayer } from './sdk/types/article/Item';
 export type { RichTextBlock, RichTextEntity, RichTextStyle } from './sdk/types/article/RichText';
 export type { ItemArea } from './sdk/types/article/ItemArea';
 export type { ItemState, ItemStateParams, StateParams, ItemStatesMap } from './sdk/types/article/ItemState';
 export type { Interaction, InteractionItemTrigger, InteractionScrollTrigger, InteractionState } from './sdk/types/article/Interaction';
-export type { Layout } from './sdk/types/project/Layout';
 export type { Project } from './sdk/types/project/Project';
 export type { Meta } from './sdk/types/project/Meta';
 export type { KeyframeValueMap, KeyframeAny } from './sdk/types/keyframe/Keyframe';
 export type { CompoundSettings } from './sdk/types/article/CompoundSettings';
-export type { Component } from './sdk/types/component/Component';
-export { components } from './sdk/Components/components';
 export { RichTextConverter } from './sdk-nextjs/utils/RichTextConverter/RichTextConverter';
 export { Page } from './sdk-nextjs/components/Page';
 export type { PageProps } from './sdk-nextjs/components/Page';
@@ -28,6 +24,6 @@ export { CNTRLHead as Head } from './sdk-nextjs/components/Head';
 export { CntrlProvider } from './sdk-nextjs/provider/CntrlProvider';
 export type { CustomItemComponent } from './sdk-nextjs/provider/CustomItemTypes';
 export { useCntrlContext } from './sdk-nextjs/provider/useCntrlContext';
-export declare const customItems: import('./sdk-nextjs/provider/CustomItemRegistry').CustomItemRegistry;
-export declare const customSections: import('./sdk-nextjs/provider/CustomSectionRegistry').CustomSectionRegistry;
-export declare const cntrlSdkContext: import('./sdk-nextjs/provider/CntrlSdkContext').CntrlSdkContext;
+export declare const customItems: import("./sdk-nextjs/provider/CustomItemRegistry").CustomItemRegistry;
+export declare const customSections: import("./sdk-nextjs/provider/CustomSectionRegistry").CustomSectionRegistry;
+export declare const cntrlSdkContext: import("./sdk-nextjs/provider/CntrlSdkContext").CntrlSdkContext;

package/lib/index.js

@@ -1,14 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cntrlSdkContext = exports.customSections = exports.customItems = exports.useCntrlContext = exports.CntrlProvider = exports.Head = exports.Page = exports.RichTextConverter = exports.KeyframeType = exports.PositionType = exports.DimensionMode = exports.AnchorSide = exports.AreaAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.ScrollPlaybackVideoManager = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
+exports.cntrlSdkContext = exports.customSections = exports.customItems = exports.useCntrlContext = exports.CntrlProvider = exports.Head = exports.Page = exports.RichTextConverter = exports.KeyframeType = exports.PositionType = exports.DimensionMode = exports.AnchorSide = exports.AreaAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.ScrollPlaybackVideoManager = exports.FontFaceGenerator = exports.CntrlClient = void 0;
 // SDK
 var Client_1 = require("./sdk/Client/Client");
 Object.defineProperty(exports, "CntrlClient", { enumerable: true, get: function () { return Client_1.Client; } });
 var FontFaceGenerator_1 = require("./sdk/FontFaceGenerator/FontFaceGenerator");
 Object.defineProperty(exports, "FontFaceGenerator", { enumerable: true, get: function () { return FontFaceGenerator_1.FontFaceGenerator; } });
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "getLayoutStyles", { enumerable: true, get: function () { return utils_1.getLayoutStyles; } });
-Object.defineProperty(exports, "getLayoutMediaQuery", { enumerable: true, get: function () { return utils_1.getLayoutMediaQuery; } });
 var ScrollPlaybackVideoManager_1 = require("./sdk/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager");
 Object.defineProperty(exports, "ScrollPlaybackVideoManager", { enumerable: true, get: function () { return ScrollPlaybackVideoManager_1.ScrollPlaybackVideoManager; } });
 // enums

package/{dist → lib}/sdk/Client/Client.d.ts

@@ -1,6 +1,5 @@
 import { Meta } from '../types/project/Meta';
 import { Project } from '../types/project/Project';
-import { Layout } from '../types/project/Layout';
 import { Article } from '../types/article/Article';
 import { KeyframeAny } from '../types/keyframe/Keyframe';
 export declare class Client {
@@ -10,7 +9,6 @@ export declare class Client {
     private static getPageMeta;
     getPageData(pageSlug: string, buildMode?: 'default' | 'self-hosted'): Promise<CntrlPageData>;
     getProjectPagesPaths(): Promise<string[]>;
-    getLayouts(): Promise<Layout[]>;
     private fetchProject;
     private fetchArticle;
     private findArticleIdByPageSlug;

package/{dist → lib}/sdk/Client/Client.js

@@ -70,17 +70,6 @@ class Client {
             }
         });
     }
-    getLayouts() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const { layouts } = yield this.fetchProject();
-                return layouts;
-            }
-            catch (e) {
-                throw e;
-            }
-        });
-    }
     fetchProject() {
         return __awaiter(this, arguments, void 0, function* (buildMode = 'default') {
             const { username: projectId, password: apiKey, origin } = this.url;

package/lib/sdk/FontFaceGenerator/FontFaceGenerator.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontFaceGenerator = void 0;
+const FILE_TYPES_MAP = {
+    ttf: 'truetype',
+    otf: 'opentype'
+};
+class FontFaceGenerator {
+    constructor(fonts) {
+        this.fonts = fonts;
+    }
+    generate() {
+        return this.fonts.map(font => {
+            const eotFile = font.files.find(file => file.type === 'eot');
+            const otherFiles = font.files
+                .filter(file => file.type !== 'eot')
+                .map(file => `url('${file.url}') format('${FILE_TYPES_MAP[file.type] || file.type}')`);
+            return `
+@font-face {
+  font-family: "${font.name}";
+  font-weight: ${font.weight};
+  font-style: ${font.style};
+  ${eotFile ? `src: url('${eotFile.url}');\n  ` : ''}src: ${otherFiles.join(', ')};
+}`;
+        }).join('\n');
+    }
+}
+exports.FontFaceGenerator = FontFaceGenerator;

package/lib/sdk/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager.js

@@ -0,0 +1,221 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollPlaybackVideoManager = void 0;
+const ua_parser_js_1 = __importDefault(require("ua-parser-js"));
+const VideoDecoder_1 = __importDefault(require("../VideoDecoder/VideoDecoder"));
+class ScrollPlaybackVideoManager {
+    constructor(options) {
+        this.currentTime = 0;
+        this.targetTime = 0;
+        this.canvas = null;
+        this.context = null;
+        this.frames = [];
+        this.frameRate = 0;
+        this.transitioning = false;
+        this.debug = false;
+        this.frameThreshold = 0.1;
+        this.transitionSpeed = 10;
+        this.useWebCodecs = true;
+        this.resize = () => {
+            if (this.debug)
+                console.info('ScrollVideo resizing...');
+            if (this.canvas) {
+                this.setCoverStyle(this.canvas);
+            }
+            else if (this.video) {
+                this.setCoverStyle(this.video);
+            }
+            this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
+        };
+        this.decodeVideo = () => {
+            if (!this.video)
+                return;
+            if (this.useWebCodecs && this.video.src) {
+                (0, VideoDecoder_1.default)(this.video.src, (frame) => {
+                    this.frames.push(frame);
+                }, this.debug).then(() => {
+                    if (!this.video || !this.container)
+                        return;
+                    if (this.frames.length === 0) {
+                        if (this.debug)
+                            console.error('No frames were received from webCodecs');
+                        return;
+                    }
+                    this.frameRate = this.frames.length / this.video.duration;
+                    if (this.debug)
+                        console.info('Received', this.frames.length, 'frames');
+                    this.canvas = document.createElement('canvas');
+                    this.context = this.canvas.getContext('2d');
+                    this.video.style.display = 'none';
+                    this.container.appendChild(this.canvas);
+                    this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
+                }).catch(() => {
+                    if (this.debug)
+                        console.error('Error encountered while decoding video');
+                    this.frames = [];
+                    this.video.load();
+                });
+            }
+        };
+        this.resizeObserver = new ResizeObserver(() => {
+            this.resize();
+        });
+        const { src, videoContainer } = options;
+        if (typeof document !== 'object') {
+            console.error('ScrollVideo must be initiated in a DOM context');
+            return;
+        }
+        if (!videoContainer) {
+            console.error('scrollVideoContainer must be a valid DOM object');
+            return;
+        }
+        if (!src) {
+            console.error('Must provide valid video src to ScrollVideo');
+            return;
+        }
+        this.container = typeof videoContainer === 'string' ? document.getElementById(videoContainer) : videoContainer;
+        this.resizeObserver.observe(this.container);
+        this.video = document.createElement('video');
+        this.video.src = src;
+        this.video.preload = 'auto';
+        this.video.tabIndex = 0;
+        this.video.playsInline = true;
+        this.video.muted = true;
+        this.video.pause();
+        this.video.load();
+        this.container.appendChild(this.video);
+        const browserEngine = new ua_parser_js_1.default().getEngine();
+        this.isSafari = browserEngine.name === 'WebKit';
+        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();
+    }
+    setCoverStyle(el) {
+        if (el && this.container) {
+            el.style.position = 'absolute';
+            el.style.top = '50%';
+            el.style.left = '50%';
+            el.style.transform = 'translate(-50%, -50%)';
+            const { width: containerWidth, height: containerHeight } = this.container.getBoundingClientRect();
+            const width = el.videoWidth || el.width;
+            const height = el.videoHeight || el.height;
+            if (containerWidth / containerHeight > width / height) {
+                el.style.width = '100%';
+                el.style.height = 'auto';
+            }
+            else {
+                el.style.height = '100%';
+                el.style.width = 'auto';
+            }
+        }
+    }
+    paintCanvasFrame(frameNum) {
+        if (this.canvas) {
+            const frameIdx = Math.min(frameNum, this.frames.length - 1);
+            const currFrame = this.frames[frameIdx];
+            if (currFrame && this.container) {
+                if (this.debug)
+                    console.info('Painting frame', frameIdx);
+                this.canvas.width = currFrame.width;
+                this.canvas.height = currFrame.height;
+                const { width, height } = this.container.getBoundingClientRect();
+                this.resetCanvasDimensions(width, height, currFrame.width, currFrame.height);
+                this.context.drawImage(currFrame, 0, 0, currFrame.width, currFrame.height);
+            }
+        }
+    }
+    transitionToTargetTime(jump) {
+        if (!this.video)
+            return;
+        if (this.debug)
+            console.info('Transitioning targetTime:', this.targetTime, 'currentTime:', this.currentTime);
+        if (isNaN(this.targetTime) || Math.abs(this.currentTime - this.targetTime) < this.frameThreshold) {
+            this.video.pause();
+            this.transitioning = false;
+            return;
+        }
+        // Make sure we don't go out of time bounds
+        if (this.targetTime > this.video.duration) {
+            this.targetTime = this.video.duration;
+        }
+        if (this.targetTime < 0) {
+            this.targetTime = 0;
+        }
+        // How far forward we need to transition
+        const transitionForward = this.targetTime - this.currentTime;
+        if (this.canvas) {
+            // Update currentTime and paint the closest frame
+            this.currentTime += transitionForward / (256 / this.transitionSpeed);
+            // If jump, we go directly to the frame
+            if (jump) {
+                this.currentTime = this.targetTime;
+            }
+            this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
+        }
+        else if (jump || this.isSafari || this.targetTime - this.currentTime < 0) {
+            this.video.pause();
+            this.currentTime += transitionForward / (64 / this.transitionSpeed);
+            // If jump, we go directly to the frame
+            if (jump) {
+                this.currentTime = this.targetTime;
+            }
+            this.video.currentTime = this.currentTime;
+        }
+        else {
+            // Otherwise, we play the video and adjust the playbackRate to get a smoother
+            // animation effect.
+            const playbackRate = Math.max(Math.min(transitionForward * 4, this.transitionSpeed, 16), 1);
+            if (this.debug)
+                console.info('ScrollVideo playbackRate:', playbackRate);
+            if (!isNaN(playbackRate)) {
+                this.video.playbackRate = playbackRate;
+                this.video.play();
+            }
+            this.currentTime = this.video.currentTime;
+        }
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(() => this.transitionToTargetTime(jump));
+        }
+    }
+    resetCanvasDimensions(w, h, frameW, frameH) {
+        if (!this.canvas)
+            return;
+        if (w / h > frameW / frameH) {
+            this.canvas.style.width = '100%';
+            this.canvas.style.height = 'auto';
+        }
+        else {
+            this.canvas.style.height = '100%';
+            this.canvas.style.width = 'auto';
+        }
+    }
+    setTargetTimePercent(setPercentage, jump = true) {
+        if (!this.video)
+            return;
+        this.targetTime = Math.max(Math.min(setPercentage, 1), 0)
+            * (this.frames.length && this.frameRate ? this.frames.length / this.frameRate : this.video.duration);
+        if (!jump && Math.abs(this.currentTime - this.targetTime) < this.frameThreshold)
+            return;
+        if (!jump && this.transitioning)
+            return;
+        if (!this.canvas && !this.video.paused)
+            this.video.play();
+        this.transitioning = true;
+        this.transitionToTargetTime(jump);
+    }
+    destroy() {
+        var _a;
+        this.resizeObserver.unobserve(this.container);
+        (_a = this.video) === null || _a === void 0 ? void 0 : _a.removeEventListener('progress', this.resize);
+        if (this.debug)
+            console.info('Destroying ScrollVideo');
+        if (this.container)
+            this.container.innerHTML = '';
+    }
+}
+exports.ScrollPlaybackVideoManager = ScrollPlaybackVideoManager;

package/lib/sdk/VideoDecoder/VideoDecoder.js

@@ -0,0 +1,184 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Writer = void 0;
+// @ts-ignore
+const MP4Box = __importStar(require("mp4box"));
+class Writer {
+    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;
+    }
+}
+exports.Writer = Writer;
+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();
+};
+const decodeVideo = (src, emitFrame, { VideoDecoder, EncodedVideoChunk, debug }) => new Promise((resolve, reject) => {
+    if (debug)
+        console.info('Decoding video from', src);
+    try {
+        const mp4boxfile = MP4Box.createFile();
+        let codec;
+        const decoder = new VideoDecoder({
+            output: (frame) => {
+                createImageBitmap(frame, { resizeQuality: 'low' }).then((bitmap) => {
+                    emitFrame(bitmap);
+                    frame.close();
+                    if (decoder.decodeQueueSize <= 0) {
+                        setTimeout(() => {
+                            if (decoder.state !== 'closed') {
+                                decoder.close();
+                                resolve();
+                            }
+                        }, 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);
+                const avccBox = mp4boxfile.moov.traks[0].mdia.minf.stbl.stsd.entries[0].avcC;
+                const extradata = getExtradata(avccBox);
+                decoder.configure({ codec, description: extradata });
+                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);
+            }
+        };
+        fetch(src).then((res) => {
+            const reader = res.body.getReader();
+            let offset = 0;
+            //@ts-ignore
+            function appendBuffers({ done, value }) {
+                if (done) {
+                    mp4boxfile.flush();
+                    return null;
+                }
+                const buf = 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);
+    }
+});
+exports.default = (src, emitFrame, debug) => {
+    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,
+        });
+    }
+    if (debug)
+        console.info('WebCodecs is not available in this browser.');
+    return Promise.resolve();
+};