@cntrl-site/sdk-nextjs 0.27.0 → 0.27.2

package/lib/components/ScrollPlaybackVideo.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollPlaybackVideo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ScrollPlaybackVideoManager_1 = require("../utils/PlaybackVideoConverter/ScrollPlaybackVideoManager");
 const rangeMap_1 = require("../utils/rangeMap");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+const sdk_1 = require("@cntrl-site/sdk");
 const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className }) => {
     const [containerElement, setContainerElement] = (0, react_1.useState)(null);
     const [time, setTime] = (0, react_1.useState)(0);
@@ -22,7 +22,7 @@ const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className
     const scrollVideoManager = (0, react_1.useMemo)(() => {
         if (!containerElement)
             return null;
-        const manager = new ScrollPlaybackVideoManager_1.ScrollPlaybackVideoManager({
+        const manager = new sdk_1.ScrollPlaybackVideoManager({
             src,
             videoContainer: containerElement
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.27.0",
+  "version": "0.27.2",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,15 +23,12 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.1.0",
-    "@cntrl-site/sdk": "^1.8.0",
-    "@types/ua-parser-js": "^0.7.39",
+    "@cntrl-site/sdk": "^1.9.1",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
-    "mp4box": "^0.5.2",
     "resize-observer-polyfill": "^1.5.1",
-    "styled-jsx": "^5.0.2",
-    "ua-parser-js": "^1.0.37"
+    "styled-jsx": "^5.0.2"
   },
   "peerDependencies": {
     "@types/lodash.isequal": "^4.5.6",

package/src/components/ScrollPlaybackVideo.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
-import { ScrollPlaybackVideoManager } from '../utils/PlaybackVideoConverter/ScrollPlaybackVideoManager';
 import { rangeMap } from '../utils/rangeMap';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { ScrollPlaybackVideoManager } from '@cntrl-site/sdk';
 
 type PlaybackParams = { from: number, to: number };
 

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>

package/lib/utils/PlaybackVideoConverter/ScrollPlaybackVideoManager.js

@@ -1,221 +0,0 @@
-"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"));
-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/utils/PlaybackVideoConverter/VideoDecoder.js

@@ -1,175 +0,0 @@
-"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/src/utils/PlaybackVideoConverter/ScrollPlaybackVideoManager.ts

@@ -1,211 +0,0 @@
-import UAParser from 'ua-parser-js';
-import videoDecoder from './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/utils/PlaybackVideoConverter/VideoDecoder.ts

@@ -1,174 +0,0 @@
-// @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();
-};