@cntrl-site/sdk-nextjs 0.27.0 → 0.27.1

package/lib/components/Item.js

@@ -55,7 +55,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
-    const { top, left, bottom } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
+    const { top, left } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
     const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
@@ -99,7 +99,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
         top: `${stickyTop * 100}vw`,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left, bottom }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
                             width: `${sizingAxis.x === 'manual'
                                 ? isRichText
                                     ? `${width * exemplary}px`
@@ -111,12 +111,12 @@ const Item = ({ item, sectionId, articleHeight }) => {
                         }, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
-                    const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
               top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               pointer-events: auto;
+              cursor: ${hoverParams ? 'pointer' : 'default'};
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
             }
@@ -134,8 +134,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
               pointer-events: none;
-              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
-              top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
+              top: ${(0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
             }

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/lib/components/useItemPosition.js

@@ -13,12 +13,8 @@ const useItemPosition = (item, sectionId) => {
         return item.area[layoutId];
     }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
     const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
-    const positionType = layoutId ? item.area[layoutId].positionType : sdk_1.PositionType.ScreenBased;
-    // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
-    const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
     return {
-        bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
-        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
+        top: (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
         left: `${left * 100}vw`
     };
 };

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -167,19 +167,17 @@ class RichTextConverter {
         }
         return styleGroups;
     }
-    groupEntities(entities, styleGroups) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+    groupEntities(entitiesList, styleGroups) {
+        var _a, _b, _c, _d;
         const entitiesGroups = [];
+        // some entities may have no data, need to filter them out (case with deleting a section/page that was linked to)
+        const entities = entitiesList.filter(e => e.hasOwnProperty('data'));
         if (!entities.length && !styleGroups)
             return;
         if (!styleGroups || styleGroups.length === 0) {
-            const dividersSet = entities.reduce((ds, e) => {
-                // some entities may have no data, need to filter them out
-                // (case with deleting a section/page that was linked to)
-                if (!e.hasOwnProperty('data'))
-                    return ds;
-                ds.add(e.start);
-                ds.add(e.end);
+            const dividersSet = entities.reduce((ds, s) => {
+                ds.add(s.start);
+                ds.add(s.end);
                 return ds;
             }, new Set([entities[0].start, entities[entities.length - 1].end]));
             const dividers = Array.from(dividersSet).sort((a, b) => a - b);
@@ -202,11 +200,9 @@ class RichTextConverter {
         }
         const start = entities[0].start < styleGroups[0].start ? entities[0].start : styleGroups[0].start;
         const end = entities[entities.length - 1].end > styleGroups[styleGroups.length - 1].end ? entities[entities.length - 1].end : styleGroups[styleGroups.length - 1].end;
-        const entitiesDividers = entities.reduce((ds, e) => {
-            if (!e.hasOwnProperty('data'))
-                return ds;
-            ds.add(e.start);
-            ds.add(e.end);
+        const entitiesDividers = entities.reduce((ds, s) => {
+            ds.add(s.start);
+            ds.add(s.end);
             return ds;
         }, new Set([start, end]));
         const entityDividers = Array.from(entitiesDividers).sort((a, b) => a - b);
@@ -215,7 +211,7 @@ class RichTextConverter {
             const end = entityDividers[i + 1];
             const entity = entities.find(e => e.start === start);
             entitiesGroups.push(Object.assign({ stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end), start,
-                end }, (entity && { link: (_f = (_e = entity.data) === null || _e === void 0 ? void 0 : _e.url) !== null && _f !== void 0 ? _f : '', target: (_h = (_g = entity.data) === null || _g === void 0 ? void 0 : _g.target) !== null && _h !== void 0 ? _h : '_self' })));
+                end }, (entity && { link: entity.data.url, target: entity.data.target })));
         }
         return entitiesGroups;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -22,16 +22,14 @@
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/effects": "^1.1.0",
-    "@cntrl-site/sdk": "^1.8.0",
+    "@cntrl-site/effects": "^1.0.5",
+    "@cntrl-site/sdk": "^1.9.1",
     "@types/ua-parser-js": "^0.7.39",
     "@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/Item.tsx

@@ -1,7 +1,6 @@
 import { ComponentType, FC, PropsWithChildren, useContext, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
-  AnchorSide,
   ArticleItemType,
   getLayoutStyles,
   Item as TItem,
@@ -77,7 +76,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
-  const { top, left, bottom } = useItemPosition(item, sectionId);
+  const { top, left } = useItemPosition(item, sectionId);
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
   const { width, height } = useItemDimensions(item, sectionId);
@@ -129,7 +128,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
     <div
       className={`item-wrapper-${item.id}`}
       ref={itemWrapperRef}
-      style={isInitialRef.current ? {} : { top, left, bottom, ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}) }}
+      style={isInitialRef.current ? {} : { top, left, ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}) }}
     >
       <div
         suppressHydrationWarning={true}
@@ -157,12 +156,12 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
-        const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
           return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
               top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               pointer-events: auto;
+              cursor: ${hoverParams ? 'pointer' : 'default'};
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
             }
@@ -180,8 +179,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
               pointer-events: none;
-              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
-              top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
+              top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               transition: ${getTransitions(['left', 'top'], hoverParams)};
             }

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/src/components/useItemPosition.ts

@@ -1,4 +1,4 @@
-import { AnchorSide, ItemAny, PositionType } from '@cntrl-site/sdk';
+import { AnchorSide, ItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useLayoutContext } from './useLayoutContext';
@@ -16,12 +16,8 @@ export const useItemPosition = (item: ItemAny, sectionId: string) => {
     [layoutId]
   );
   const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
-  const positionType = layoutId ? item.area[layoutId].positionType : PositionType.ScreenBased;
-  // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
-  const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
   return {
-    bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
-    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide),
+    top:  getItemTopStyle(top, anchorSide),
     left: `${left * 100}vw`
   };
 };

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -199,16 +199,15 @@ export class RichTextConverter {
     return styleGroups;
   }
 
-  private groupEntities(entities: RichTextEntity[], styleGroups?: StyleGroup[]): EntitiesGroup[] | undefined {
+  private groupEntities(entitiesList: RichTextEntity[], styleGroups?: StyleGroup[]): EntitiesGroup[] | undefined {
     const entitiesGroups: EntitiesGroup[] = [];
+    // some entities may have no data, need to filter them out (case with deleting a section/page that was linked to)
+    const entities = entitiesList.filter(e => e.hasOwnProperty('data'));
     if (!entities.length && !styleGroups) return;
     if (!styleGroups || styleGroups.length === 0) {
-      const dividersSet = entities.reduce((ds, e) => {
-        // some entities may have no data, need to filter them out
-        // (case with deleting a section/page that was linked to)
-        if (!e.hasOwnProperty('data')) return ds;
-        ds.add(e.start);
-        ds.add(e.end);
+      const dividersSet = entities.reduce((ds, s) => {
+        ds.add(s.start);
+        ds.add(s.end);
         return ds;
       }, new Set<number>([entities[0].start, entities[entities.length - 1].end]));
       const dividers = Array.from(dividersSet).sort((a, b) => a - b);
@@ -235,10 +234,9 @@ export class RichTextConverter {
     }
     const start = entities[0].start < styleGroups[0].start ? entities[0].start : styleGroups[0].start;
     const end = entities[entities.length - 1].end > styleGroups[styleGroups.length - 1].end ? entities[entities.length - 1].end : styleGroups[styleGroups.length - 1].end;
-    const entitiesDividers = entities.reduce((ds, e) => {
-      if (!e.hasOwnProperty('data')) return ds;
-      ds.add(e.start);
-      ds.add(e.end);
+    const entitiesDividers = entities.reduce((ds, s) => {
+      ds.add(s.start);
+      ds.add(s.end);
       return ds;
     }, new Set<number>([start, end]));
     const entityDividers = Array.from(entitiesDividers).sort((a, b) => a - b);
@@ -251,7 +249,7 @@ export class RichTextConverter {
         stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end),
         start,
         end,
-        ...(entity && { link: entity.data?.url ?? '', target: entity.data?.target ?? '_self' })
+        ...(entity && { link: entity.data.url, target: entity.data.target })
       });
     }
 

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();
-};