@cntrl-site/sdk 1.8.0 → 1.9.1

package/lib/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;
+        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/VideoDecoder/VideoDecoder.js

@@ -0,0 +1,175 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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) => {
+                console.log(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();
+};

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyframeType = exports.PositionType = exports.AnchorSide = exports.ScaleAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
+exports.KeyframeType = exports.PositionType = exports.AnchorSide = exports.ScaleAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.ScrollPlaybackVideoManager = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
 // logic
 var Client_1 = require("./Client/Client");
 Object.defineProperty(exports, "CntrlClient", { enumerable: true, get: function () { return Client_1.Client; } });
@@ -9,6 +9,8 @@ Object.defineProperty(exports, "FontFaceGenerator", { enumerable: true, get: fun
 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("./ScrollPlaybackVideoManager/ScrollPlaybackVideoManager");
+Object.defineProperty(exports, "ScrollPlaybackVideoManager", { enumerable: true, get: function () { return ScrollPlaybackVideoManager_1.ScrollPlaybackVideoManager; } });
 // enums
 var Section_1 = require("./types/article/Section");
 Object.defineProperty(exports, "SectionHeightMode", { enumerable: true, get: function () { return Section_1.SectionHeightMode; } });

package/lib/types/article/ArticleItemType.js

@@ -11,4 +11,4 @@ var ArticleItemType;
     ArticleItemType["YoutubeEmbed"] = "youtube-embed";
     ArticleItemType["Custom"] = "custom";
     ArticleItemType["Group"] = "group";
-})(ArticleItemType = exports.ArticleItemType || (exports.ArticleItemType = {}));
+})(ArticleItemType || (exports.ArticleItemType = ArticleItemType = {}));

package/lib/types/article/ItemArea.js

@@ -6,12 +6,12 @@ var AnchorSide;
     AnchorSide["Top"] = "top";
     AnchorSide["Bottom"] = "bottom";
     AnchorSide["Center"] = "center";
-})(AnchorSide = exports.AnchorSide || (exports.AnchorSide = {}));
+})(AnchorSide || (exports.AnchorSide = AnchorSide = {}));
 var PositionType;
 (function (PositionType) {
     PositionType["SectionBased"] = "section-based";
     PositionType["ScreenBased"] = "screen-based";
-})(PositionType = exports.PositionType || (exports.PositionType = {}));
+})(PositionType || (exports.PositionType = PositionType = {}));
 var ScaleAnchor;
 (function (ScaleAnchor) {
     ScaleAnchor["TopLeft"] = "top-left";
@@ -23,4 +23,4 @@ var ScaleAnchor;
     ScaleAnchor["BottomLeft"] = "bottom-left";
     ScaleAnchor["BottomCenter"] = "bottom-center";
     ScaleAnchor["BottomRight"] = "bottom-right";
-})(ScaleAnchor = exports.ScaleAnchor || (exports.ScaleAnchor = {}));
+})(ScaleAnchor || (exports.ScaleAnchor = ScaleAnchor = {}));

package/lib/types/article/RichText.js

@@ -7,21 +7,21 @@ var TextAlign;
     TextAlign["Right"] = "right";
     TextAlign["Center"] = "center";
     TextAlign["Justify"] = "justify";
-})(TextAlign = exports.TextAlign || (exports.TextAlign = {}));
+})(TextAlign || (exports.TextAlign = TextAlign = {}));
 var TextTransform;
 (function (TextTransform) {
     TextTransform["None"] = "none";
     TextTransform["Uppercase"] = "uppercase";
     TextTransform["Lowercase"] = "lowercase";
-})(TextTransform = exports.TextTransform || (exports.TextTransform = {}));
+})(TextTransform || (exports.TextTransform = TextTransform = {}));
 var VerticalAlign;
 (function (VerticalAlign) {
     VerticalAlign["Super"] = "super";
     VerticalAlign["Sub"] = "sub";
     VerticalAlign["Unset"] = "unset";
-})(VerticalAlign = exports.VerticalAlign || (exports.VerticalAlign = {}));
+})(VerticalAlign || (exports.VerticalAlign = VerticalAlign = {}));
 var TextDecoration;
 (function (TextDecoration) {
     TextDecoration["Underline"] = "underline";
     TextDecoration["None"] = "none";
-})(TextDecoration = exports.TextDecoration || (exports.TextDecoration = {}));
+})(TextDecoration || (exports.TextDecoration = TextDecoration = {}));

package/lib/types/article/Section.js

@@ -5,4 +5,4 @@ var SectionHeightMode;
 (function (SectionHeightMode) {
     SectionHeightMode["ControlUnits"] = "control-units";
     SectionHeightMode["ViewportHeightUnits"] = "viewport-height-units";
-})(SectionHeightMode = exports.SectionHeightMode || (exports.SectionHeightMode = {}));
+})(SectionHeightMode || (exports.SectionHeightMode = SectionHeightMode = {}));

package/lib/types/keyframe/Keyframe.js

@@ -17,4 +17,4 @@ var KeyframeType;
     KeyframeType["WordSpacing"] = "word-spacing";
     KeyframeType["Blur"] = "blur";
     KeyframeType["BackdropBlur"] = "backdrop-blur";
-})(KeyframeType = exports.KeyframeType || (exports.KeyframeType = {}));
+})(KeyframeType || (exports.KeyframeType = KeyframeType = {}));

package/lib/types/project/Fonts.js

@@ -8,4 +8,4 @@ var FontFileTypes;
     FontFileTypes["WOFF"] = "woff";
     FontFileTypes["WOFF2"] = "woff2";
     FontFileTypes["EOT"] = "eot";
-})(FontFileTypes = exports.FontFileTypes || (exports.FontFileTypes = {}));
+})(FontFileTypes || (exports.FontFileTypes = FontFileTypes = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -29,11 +29,14 @@
   "dependencies": {
     "@types/ejs": "^3.1.2",
     "@types/isomorphic-fetch": "^0.0.36",
+    "@types/ua-parser-js": "^0.7.39",
     "commander": "^10.0.1",
     "dotenv": "^16.1.3",
     "ejs": "^3.1.9",
     "isomorphic-fetch": "^3.0.0",
+    "mp4box": "^0.5.2",
     "ts-node": "^10.9.1",
+    "ua-parser-js": "^1.0.37",
     "url": "^0.11.0",
     "zod": "^3.22.4"
   },
@@ -44,6 +47,6 @@
     "@types/node": "^18.11.7",
     "jest": "^28.1.3",
     "ts-jest": "^28.0.8",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2"
   }
 }

package/src/Client/Client.test.ts

@@ -23,7 +23,7 @@ describe('Client', () => {
   it('returns page data', async () => {
     const projectId = 'projectId';
     const API_BASE_URL = 'api-test.cntrl.site';
-    const fetchesMap = {
+    const fetchesMap: Record<string, unknown> = {
       [`https://${API_BASE_URL}/projects/${projectId}`]: projectMock,
       [`https://${API_BASE_URL}/projects/${projectId}/articles/articleId`]: {
         article: articleMock,
@@ -59,7 +59,7 @@ describe('Client', () => {
   it('ignores page meta if it is not enabled and uses project meta instead', async () => {
     const projectId = 'projectId';
     const API_BASE_URL = 'api-test.cntrl.site';
-    const fetchesMap = {
+    const fetchesMap: Record<string, unknown> = {
       [`https://${API_BASE_URL}/projects/${projectId}`]: projectMock,
       [`https://${API_BASE_URL}/projects/${projectId}/articles/articleId2`]: {
         article: articleMock,

package/src/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager.ts

@@ -0,0 +1,212 @@
+import UAParser from 'ua-parser-js';
+import videoDecoder from '../VideoDecoder/VideoDecoder';
+
+
+interface ScrollVideoOptions {
+  src: string;
+  videoContainer: HTMLElement | string;
+}
+
+export class ScrollPlaybackVideoManager {
+  private container?: HTMLElement;
+  private video?: HTMLVideoElement;
+  private isSafari?: boolean;
+  private currentTime = 0;
+  private targetTime = 0;
+  private canvas: HTMLCanvasElement | null = null;
+  private context: CanvasRenderingContext2D | null = null;
+  private frames: ImageBitmap[] = [];
+  private frameRate = 0;
+  private transitioning = false;
+  private debug: boolean = false;
+  private frameThreshold: number = 0;
+  private transitionSpeed: number = 10;
+  private useWebCodecs: boolean = true;
+  private resizeObserver: ResizeObserver;
+
+  constructor(options: ScrollVideoOptions) {
+    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 UAParser().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();
+  }
+
+  private setCoverStyle(el: any) {
+    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';
+      }
+    }
+  }
+
+  private 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));
+  };
+
+  private decodeVideo = () => {
+    if (!this.video) return;
+    if (this.useWebCodecs && this.video.src) {
+      videoDecoder(this.video.src, (frame: ImageBitmap) => {
+          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();
+      });
+    }
+  }
+
+  private paintCanvasFrame(frameNum: number) {
+    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);
+      }
+    }
+  }
+
+  private transitionToTargetTime(jump: boolean) {
+    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));
+    }
+  }
+
+  private resetCanvasDimensions(w: number, h: number, frameW: number, frameH: number) {
+    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: number, jump: boolean = true): void {
+    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(): void {
+    this.resizeObserver.unobserve(this.container!);
+    this.video?.removeEventListener('progress', this.resize);
+    if (this.debug) console.info('Destroying ScrollVideo');
+    if (this.container) this.container.innerHTML = '';
+  }
+}

package/src/VideoDecoder/VideoDecoder.ts

@@ -0,0 +1,174 @@
+// @ts-ignore
+import * as MP4Box from 'mp4box';
+
+export class Writer {
+  private data: Uint8Array;
+  private idx: number;
+  private size: number;
+
+  constructor(size: number) {
+    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: number) {
+    this.data.set([value], this.idx);
+    this.idx += 1;
+  }
+
+  writeUint16(value: number) {
+    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: Uint8Array) {
+    this.data.set(value, this.idx);
+    this.idx += value.length;
+  }
+}
+
+interface AVCCBox {
+  configurationVersion: number;
+  AVCProfileIndication: number;
+  profile_compatibility: number;
+  AVCLevelIndication: number;
+  lengthSizeMinusOne: number;
+  nb_SPS_nalus: number;
+  SPS: { length: number; nalu: Uint8Array }[];
+  nb_PPS_nalus: number;
+  PPS: { length: number; nalu: Uint8Array }[];
+}
+
+const getExtradata = (avccBox: 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: string,
+  emitFrame: (bitmap: ImageBitmap) => void,
+  { VideoDecoder, EncodedVideoChunk, debug }: any
+): Promise<void> =>
+  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: VideoFrame) => {
+          console.log(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: any) => {
+          console.error(e);
+          reject(e);
+        },
+      });
+
+      mp4boxfile.onReady = (info: any) => {
+        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: number, ref: any, samples: any[]) => {
+        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 }: any) {
+          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);
+    }
+  });
+
+
+export default ( src: string, emitFrame: (bitmap: ImageBitmap) => void, debug: boolean): Promise<void> => {
+  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();
+};

package/src/index.ts

@@ -2,6 +2,7 @@
 export { Client as CntrlClient } from './Client/Client';
 export { FontFaceGenerator } from './FontFaceGenerator/FontFaceGenerator';
 export { getLayoutStyles, getLayoutMediaQuery } from './utils';
+export {ScrollPlaybackVideoManager} from './ScrollPlaybackVideoManager/ScrollPlaybackVideoManager';
 
 // enums
 export { SectionHeightMode } from './types/article/Section';