@cntrl-site/sdk-nextjs 0.25.0 → 0.26.0

package/lib/utils/PlaybackVideoConverter/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"));
+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

@@ -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/utils/RichTextConverter/RichTextConverter.js

@@ -31,7 +31,7 @@ class RichTextConverter {
             const content = text.slice(block.start, block.end);
             const entities = (_a = block.entities.sort((a, b) => a.start - b.start)) !== null && _a !== void 0 ? _a : [];
             if (content.length === 0) {
-                root.push((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `rt_${richText.id}_br_${blockIndex}` }, { children: (0, jsx_runtime_1.jsx)("br", {}) })));
+                root.push((0, jsx_runtime_1.jsx)("div", { className: `rt_${richText.id}_br_${blockIndex}`, children: (0, jsx_runtime_1.jsx)("br", {}) }));
                 layouts.forEach(l => {
                     const lhForLayout = currentLineHeight[l.id];
                     if (lhForLayout === undefined)
@@ -82,7 +82,7 @@ class RichTextConverter {
                         if (offset < style.start) {
                             entityKids.push(sliceSymbols(content, offset, style.start));
                         }
-                        entityKids.push((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `s-${style.start}-${style.end}` }, { children: sliceSymbols(content, style.start, style.end) }), style.start));
+                        entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: sliceSymbols(content, style.start, style.end) }, style.start));
                         offset = style.end;
                     }
                     if (offset < entity.end) {
@@ -90,7 +90,7 @@ class RichTextConverter {
                         offset = entity.end;
                     }
                     if (entity.link) {
-                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: entity.link, target: entity.target }, { children: entityKids }), entity.start));
+                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: entity.link, target: entity.target, children: entityKids }, entity.start));
                         continue;
                     }
                     kids.push(...entityKids);
@@ -127,7 +127,7 @@ class RichTextConverter {
                         }
                     }
                 }
-                root.push((0, jsx_runtime_1.jsx)("div", Object.assign({ className: blockClass }, { children: kids }), blockClass));
+                root.push((0, jsx_runtime_1.jsx)("div", { className: blockClass, children: kids }, blockClass));
             }
         }
         const styles = layouts.map(l => `

package/lib/utils/Youtube/YoutubeIframeApi.js

@@ -9,4 +9,4 @@ var YTPlayerState;
     YTPlayerState[YTPlayerState["Paused"] = 2] = "Paused";
     YTPlayerState[YTPlayerState["Buffering"] = 3] = "Buffering";
     YTPlayerState[YTPlayerState["VideoCued"] = 5] = "VideoCued";
-})(YTPlayerState = exports.YTPlayerState || (exports.YTPlayerState = {}));
+})(YTPlayerState || (exports.YTPlayerState = YTPlayerState = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -24,11 +24,14 @@
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.0.5",
     "@cntrl-site/sdk": "^1.8.0",
+    "@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"
+    "styled-jsx": "^5.0.2",
+    "ua-parser-js": "^1.0.37"
   },
   "peerDependencies": {
     "@types/lodash.isequal": "^4.5.6",
@@ -45,7 +48,7 @@
     "@types/react": "^18.0.15",
     "jest": "^29.3.1",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2"
   },
   "directories": {
     "lib": "lib"

package/src/components/ScrollPlaybackVideo.tsx

@@ -0,0 +1,56 @@
+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';
+
+type PlaybackParams = { from: number, to: number };
+
+interface Props {
+  sectionId: string;
+  src: string;
+  playbackParams: PlaybackParams | null;
+  style?: React.CSSProperties;
+  className: string;
+}
+
+export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams, style, className}) => {
+  const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
+  const [time, setTime] = useState(0);
+  const articleRectObserver = useContext(ArticleRectContext);
+
+  useEffect(() => {
+    if (!playbackParams || !articleRectObserver) return;
+    return articleRectObserver.on('scroll', () => {
+      const scrollPos = articleRectObserver.getSectionScroll(sectionId);
+      const time = rangeMap(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
+      setTime(toFixed(time));
+    })
+  }, [playbackParams?.from, playbackParams?.to, time]);
+
+  const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {
+    if (!containerElement) return null;
+    const manager = new ScrollPlaybackVideoManager({
+      src,
+      videoContainer: containerElement
+    });
+    return manager;
+  }, [containerElement, src]);
+
+  useEffect(() => {
+    return () => {
+      scrollVideoManager?.destroy();
+    };
+  }, [scrollVideoManager]);
+
+  useEffect(() => {
+    if (scrollVideoManager && time >= 0 && time <= 1) {
+      scrollVideoManager.setTargetTimePercent(time);
+    }
+  }, [time, scrollVideoManager]);
+
+  return <div className={className} style={style} ref={setContainerElement} />;
+};
+
+function toFixed(num: number) {
+  return Number(num.toFixed(3));
+}

package/src/components/items/VideoItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { FC, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
 import { ArticleItemType, getLayoutStyles, VideoItem as TVideoItem } from '@cntrl-site/sdk';
@@ -9,13 +9,8 @@ import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";
-import { rangeMap } from '../../utils/rangeMap';
-import { ArticleRectContext } from '../../provider/ArticleRectContext';
 import { useLayoutContext } from '../useLayoutContext';
-
-// To prevent video behaviour that drops to the first frame
-// when close to the end
-const SCROLL_TIME_SHIFT = 0.1;
+import { ScrollPlaybackVideo } from '../ScrollPlaybackVideo';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -25,40 +20,12 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const videoRef = useRef<HTMLVideoElement | null>(null);
-  const articleRectObserver = useContext(ArticleRectContext);
-  const rafId = useRef<number | undefined>();
   const layoutId = useLayoutContext();
-  const scrollPlayback = item.layoutParams[layoutId!].scrollPlayback
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video || !scrollPlayback) {
-      video?.play();
-      return;
-    }
-    video?.pause();
-    const scrollVideo = () => {
-      rafId.current = window.requestAnimationFrame(scrollVideo);
-      if (!articleRectObserver) return;
-      const scrollPos = articleRectObserver.getSectionScroll(sectionId);
-      if (!video.duration) return;
-      const time = rangeMap(scrollPos, scrollPlayback.from, scrollPlayback.to, 0, video.duration, true);
-      if (scrollPos > scrollPlayback.from && scrollPos < scrollPlayback.to) {
-        if (toFixed(video.currentTime) === toFixed(time - SCROLL_TIME_SHIFT)) return;
-        video.currentTime = Math.max(0, time - SCROLL_TIME_SHIFT);
-      }
-    };
-    rafId.current = window.requestAnimationFrame(scrollVideo);
-
-    return () => {
-      if (rafId.current) {
-        window.cancelAnimationFrame(rafId.current);
-        rafId.current = undefined;
-      }
-    }
-  }, [scrollPlayback]);
+  const scrollPlayback = item.layoutParams[layoutId!].scrollPlayback;
+  const hasScrollPlayback = scrollPlayback !== null;
 
   useRegisterResize(ref, onResize);
+
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
@@ -67,24 +34,39 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
         style={{
           opacity: `${opacity}`,
           transform: `rotate(${angle}deg)`,
-          filter: `blur(${blur * 100}vw)`
+          filter: `blur(${blur * 100}vw)`,
+          overflow: hasScrollPlayback ? 'hidden' : 'auto'
         }}
       >
-        <video
-          ref={videoRef}
-          autoPlay
-          muted
-          loop
-          playsInline
-          className={`video video-${item.id}`}
-          style={{
+        {hasScrollPlayback ? (
+          <ScrollPlaybackVideo
+            sectionId={sectionId}
+            src={item.commonParams.url}
+            playbackParams={scrollPlayback}
+            style={{
+              borderRadius: `${radius * 100}vw`,
+              borderWidth: `${strokeWidth * 100}vw`,
+              borderColor: `${borderColor.toCss()}`
+            }}
+            className={`video video-playback-wrapper video-${item.id}`}
+          />
+        ) : (
+          <video
+            ref={videoRef}
+            autoPlay
+            muted
+            loop
+            playsInline
+            className={`video video-${item.id}`}
+            style={{
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
             borderColor: `${borderColor.toCss()}`
-          }}
-        >
-          <source src={item.commonParams.url} />
-        </video>
+        }}
+      >
+        <source src={item.commonParams.url} />
+      </video>
+        )}
       </div>
       <JSXStyle id={id}>{`
         @supports not (color: oklch(42% 0.3 90 / 1)) {
@@ -111,6 +93,10 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
         .video-${item.id} {
           border-color: ${strokeColor};
         }
+        .video-playback-wrapper {
+          display: flex;
+          justify-content: center;
+        }
         ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
           return (`
             .video-wrapper-${item.id} {
@@ -131,7 +117,3 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
     </LinkWrapper>
   );
 };
-
-function toFixed(num: number) {
-  return Number(num.toFixed(5));
-}