@cntrl-site/sdk-nextjs 0.25.0 → 0.26.1

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

package/src/components/useItemPosition.ts

@@ -1,4 +1,4 @@
-import { AnchorSide, ItemAny } from '@cntrl-site/sdk';
+import { AnchorSide, ItemAny, PositionType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useLayoutContext } from './useLayoutContext';
@@ -16,8 +16,12 @@ 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 {
-    top:  getItemTopStyle(top, anchorSide),
+    bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
+    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide),
     left: `${left * 100}vw`
   };
 };

package/src/utils/PlaybackVideoConverter/ScrollPlaybackVideoManager.ts

@@ -0,0 +1,211 @@
+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

@@ -0,0 +1,174 @@
+// @ts-ignore
+import * as MP4Box from 'mp4box';
+
+export class Writer {
+  private data: Uint8Array;
+  private idx: number;
+  private size: number;
+
+  constructor(size: number) {
+    this.data = new Uint8Array(size);
+    this.idx = 0;
+    this.size = size;
+  }
+
+  getData() {
+    if (this.idx !== this.size) throw new Error('Mismatch between size reserved and sized used');
+    return this.data.slice(0, this.idx);
+  }
+
+  writeUint8(value: number) {
+    this.data.set([value], this.idx);
+    this.idx += 1;
+  }
+
+  writeUint16(value: number) {
+    const arr = new Uint16Array(1);
+    arr[0] = value;
+    const buffer = new Uint8Array(arr.buffer);
+    this.data.set([buffer[1], buffer[0]], this.idx);
+    this.idx += 2;
+  }
+
+  writeUint8Array(value: Uint8Array) {
+    this.data.set(value, this.idx);
+    this.idx += value.length;
+  }
+}
+
+interface AVCCBox {
+  configurationVersion: number;
+  AVCProfileIndication: number;
+  profile_compatibility: number;
+  AVCLevelIndication: number;
+  lengthSizeMinusOne: number;
+  nb_SPS_nalus: number;
+  SPS: { length: number; nalu: Uint8Array }[];
+  nb_PPS_nalus: number;
+  PPS: { length: number; nalu: Uint8Array }[];
+}
+
+const getExtradata = (avccBox: AVCCBox) => {
+  let i;
+  let size = 7;
+  for (i = 0; i < avccBox.SPS.length; i += 1) {
+    // nalu length is encoded as a uint16.
+    size += 2 + avccBox.SPS[i].length;
+  }
+  for (i = 0; i < avccBox.PPS.length; i += 1) {
+    // nalu length is encoded as a uint16.
+    size += 2 + avccBox.PPS[i].length;
+  }
+  const writer = new Writer(size);
+  writer.writeUint8(avccBox.configurationVersion);
+  writer.writeUint8(avccBox.AVCProfileIndication);
+  writer.writeUint8(avccBox.profile_compatibility);
+  writer.writeUint8(avccBox.AVCLevelIndication);
+  writer.writeUint8(avccBox.lengthSizeMinusOne + (63 << 2));
+  writer.writeUint8(avccBox.nb_SPS_nalus + (7 << 5));
+  for (i = 0; i < avccBox.SPS.length; i += 1) {
+    writer.writeUint16(avccBox.SPS[i].length);
+    writer.writeUint8Array(avccBox.SPS[i].nalu);
+  }
+  writer.writeUint8(avccBox.nb_PPS_nalus);
+  for (i = 0; i < avccBox.PPS.length; i += 1) {
+    writer.writeUint16(avccBox.PPS[i].length);
+    writer.writeUint8Array(avccBox.PPS[i].nalu);
+  }
+  return writer.getData();
+};
+
+const decodeVideo = (
+  src: string,
+  emitFrame: (bitmap: ImageBitmap) => void,
+  { VideoDecoder, EncodedVideoChunk, debug }: any
+): Promise<void> =>
+  new Promise((resolve, reject) => {
+    if (debug) console.info('Decoding video from', src);
+    try {
+      const mp4boxfile = MP4Box.createFile();
+      let codec;
+      const decoder = new VideoDecoder({
+        output: (frame: VideoFrame) => {
+          console.log(frame);
+          createImageBitmap(frame, { resizeQuality: 'low' }).then((bitmap) => {
+            emitFrame(bitmap);
+            frame.close();
+            if (decoder.decodeQueueSize <= 0) {
+              setTimeout(() => {
+                if (decoder.state !== 'closed') {
+                  decoder.close();
+                  resolve();
+                }
+              }, 500);
+            }
+          });
+        },
+        error: (e: any) => {
+          console.error(e);
+          reject(e);
+        },
+      });
+
+      mp4boxfile.onReady = (info: any) => {
+        if (info && info.videoTracks && info.videoTracks[0]) {
+          [{ codec }] = info.videoTracks;
+          if (debug) console.info('Video with codec:', codec);
+          const avccBox = mp4boxfile.moov.traks[0].mdia.minf.stbl.stsd.entries[0].avcC;
+          const extradata = getExtradata(avccBox);
+          decoder.configure({ codec, description: extradata });
+          mp4boxfile.setExtractionOptions(info.videoTracks[0].id);
+          mp4boxfile.start();
+        } else reject(new Error('URL provided is not a valid mp4 video file.'));
+      };
+
+      mp4boxfile.onSamples = (track_id: number, ref: any, samples: any[]) => {
+        for (let i = 0; i < samples.length; i += 1) {
+          const sample = samples[i];
+          const type = sample.is_sync ? 'key' : 'delta';
+          const chunk = new EncodedVideoChunk({
+            type,
+            timestamp: sample.cts,
+            duration: sample.duration,
+            data: sample.data,
+          });
+          decoder.decode(chunk);
+        }
+      };
+
+      fetch(src).then((res) => {
+        const reader = res.body!.getReader();
+        let offset = 0;
+        //@ts-ignore
+        function appendBuffers({ done, value }: any) {
+          if (done) {
+            mp4boxfile.flush();
+            return null;
+          }
+          const buf = value.buffer;
+          buf.fileStart = offset;
+          offset += buf.byteLength;
+          mp4boxfile.appendBuffer(buf);
+          return reader.read().then(appendBuffers);
+        }
+        return reader.read().then(appendBuffers);
+      });
+    } catch (e) {
+      reject(e);
+    }
+  });
+
+
+export default ( src: string, emitFrame: (bitmap: ImageBitmap) => void, debug: boolean): Promise<void> => {
+  if (typeof VideoDecoder === 'function' && typeof EncodedVideoChunk === 'function') {
+    if (debug)
+      console.info('WebCodecs is natively supported, using native version...');
+    return decodeVideo(src, emitFrame, {
+      VideoDecoder,
+      EncodedVideoChunk,
+      debug,
+    });
+  }
+  if (debug) console.info('WebCodecs is not available in this browser.');
+  return Promise.resolve();
+};

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>

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>