@cntrl-site/sdk-nextjs 1.9.51 → 1.9.53-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/components/ScrollPlaybackVideo.js +17 -6
  2. package/lib/components/items/FileItem/VideoItem.js +3 -3
  3. package/package.json +4 -3
  4. package/src/components/ScrollPlaybackVideo.tsx +21 -4
  5. package/src/components/items/FileItem/VideoItem.tsx +2 -0
  6. package/cntrl-site-sdk-nextjs-1.9.88.tgz +0 -0
package/lib/components/ScrollPlaybackVideo.js CHANGED
@@ -6,10 +6,16 @@ const react_1 = require("react");
6
6
  const rangeMap_1 = require("../utils/rangeMap");
7
7
  const ArticleRectContext_1 = require("../provider/ArticleRectContext");
8
8
  const sdk_1 = require("@cntrl-site/sdk");
9
- const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className }) => {
9
+ const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className, scrollPlaybackFrameData, frameBaseUrl }) => {
10
10
  const [containerElement, setContainerElement] = (0, react_1.useState)(null);
11
11
  const [time, setTime] = (0, react_1.useState)(0);
12
12
  const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
13
+ const hasServerFrames = (scrollPlaybackFrameData === null || scrollPlaybackFrameData === void 0 ? void 0 : scrollPlaybackFrameData.status) === 'ready'
14
+ && scrollPlaybackFrameData.batchId
15
+ && scrollPlaybackFrameData.frameCount
16
+ && scrollPlaybackFrameData.frameRate
17
+ && scrollPlaybackFrameData.frameFormat
18
+ && frameBaseUrl;
13
19
  (0, react_1.useEffect)(() => {
14
20
  if (!playbackParams || !articleRectObserver)
15
21
  return;
@@ -22,12 +28,17 @@ const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className
22
28
  const scrollVideoManager = (0, react_1.useMemo)(() => {
23
29
  if (!containerElement)
24
30
  return null;
25
- const manager = new sdk_1.ScrollPlaybackVideoManager({
26
- src,
27
- videoContainer: containerElement
28
- });
31
+ const manager = new sdk_1.ScrollPlaybackVideoManager(Object.assign({ src, videoContainer: containerElement }, (hasServerFrames ? {
32
+ frameData: {
33
+ batchId: scrollPlaybackFrameData.batchId,
34
+ frameCount: scrollPlaybackFrameData.frameCount,
35
+ frameRate: scrollPlaybackFrameData.frameRate,
36
+ frameFormat: scrollPlaybackFrameData.frameFormat
37
+ },
38
+ frameBaseUrl
39
+ } : {})));
29
40
  return manager;
30
- }, [containerElement, src]);
41
+ }, [containerElement, src, hasServerFrames, frameBaseUrl]);
31
42
  (0, react_1.useEffect)(() => {
32
43
  return () => {
33
44
  scrollVideoManager === null || scrollVideoManager === void 0 ? void 0 : scrollVideoManager.destroy();
package/lib/components/items/FileItem/VideoItem.js CHANGED
@@ -22,7 +22,7 @@ const useItemFXData_1 = require("../../../common/useItemFXData");
22
22
  const getFill_1 = require("../../../utils/getFill");
23
23
  const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
24
24
  const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
25
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
25
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
26
26
  const id = (0, react_1.useId)();
27
27
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
28
28
  const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -98,7 +98,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
98
98
  observer.observe(ref);
99
99
  return () => observer.disconnect();
100
100
  }, [layoutParams, videoRef, ref, userPaused, isVideoInteracted]);
101
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_p = item.link) === null || _p === void 0 ? void 0 : _p.url, target: (_q = item.link) === null || _q === void 0 ? void 0 : _q.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_r = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _r !== void 0 ? _r : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_s = item.commonParams.coverUrl) !== null && _s !== void 0 ? _s : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
101
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_p = item.link) === null || _p === void 0 ? void 0 : _p.url, target: (_q = item.link) === null || _q === void 0 ? void 0 : _q.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_r = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _r !== void 0 ? _r : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}`, scrollPlaybackFrameData: item.commonParams.scrollPlaybackFrameData, frameBaseUrl: (_s = item.commonParams.scrollPlaybackFrameData) === null || _s === void 0 ? void 0 : _s.framesUrl })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_t = item.commonParams.coverUrl) !== null && _t !== void 0 ? _t : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
102
102
  setIsVideoInteracted(true);
103
103
  }, muted: layoutParams.muted, onPlay: () => {
104
104
  setIsVideoPlaying(true);
@@ -121,7 +121,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
121
121
  return;
122
122
  setIsVideoInteracted(true);
123
123
  videoRef.play();
124
- }, src: (_t = item.commonParams.coverUrl) !== null && _t !== void 0 ? _t : '', className: `video-cover-${item.id}`, onClick: () => {
124
+ }, src: (_u = item.commonParams.coverUrl) !== null && _u !== void 0 ? _u : '', className: `video-cover-${item.id}`, onClick: () => {
125
125
  if (!videoRef)
126
126
  return;
127
127
  setIsVideoInteracted(true);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.51",
3
+ "version": "1.9.53-0",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -18,6 +18,7 @@
18
18
  "test": "jest",
19
19
  "prebuild": "rimraf ./lib",
20
20
  "build": "tsc --project tsconfig.build.json",
21
+ "build:watch": "tsc --watch --project tsconfig.build.json",
21
22
  "prepublishOnly": "cross-env NODE_ENV=production npm run build"
22
23
  },
23
24
  "peerDependencies": {
@@ -30,9 +31,9 @@
30
31
  "dependencies": {
31
32
  "@antfu/eslint-config": "^3.8.0",
32
33
  "@cntrl-site/color": "^1.0.0",
33
- "@cntrl-site/components": "^0.1.33",
34
+ "@cntrl-site/components": "^0.1.34",
34
35
  "@cntrl-site/effects": "^1.4.0",
35
- "@cntrl-site/sdk": "^1.25.10",
36
+ "@cntrl-site/sdk": "^1.25.12",
36
37
  "@types/vimeo__player": "^2.18.0",
37
38
  "@vimeo/player": "^2.25.0",
38
39
  "html-react-parser": "^3.0.1",
package/src/components/ScrollPlaybackVideo.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
2
2
  import { rangeMap } from '../utils/rangeMap';
3
3
  import { ArticleRectContext } from '../provider/ArticleRectContext';
4
- import { ScrollPlaybackVideoManager } from '@cntrl-site/sdk';
4
+ import { ScrollPlaybackVideoManager, ScrollPlaybackFrameData } from '@cntrl-site/sdk';
5
5
 
6
6
  type PlaybackParams = { from: number, to: number };
7
7
 
@@ -11,12 +11,20 @@ interface Props {
11
11
  playbackParams: PlaybackParams | null;
12
12
  style?: React.CSSProperties;
13
13
  className: string;
14
+ scrollPlaybackFrameData?: ScrollPlaybackFrameData | null;
15
+ frameBaseUrl?: string;
14
16
  }
15
17
 
16
- export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams, style, className }) => {
18
+ export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams, style, className, scrollPlaybackFrameData, frameBaseUrl }) => {
17
19
  const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
18
20
  const [time, setTime] = useState(0);
19
21
  const articleRectObserver = useContext(ArticleRectContext);
22
+ const hasServerFrames = scrollPlaybackFrameData?.status === 'ready'
23
+ && scrollPlaybackFrameData.batchId
24
+ && scrollPlaybackFrameData.frameCount
25
+ && scrollPlaybackFrameData.frameRate
26
+ && scrollPlaybackFrameData.frameFormat
27
+ && frameBaseUrl;
20
28
 
21
29
  useEffect(() => {
22
30
  if (!playbackParams || !articleRectObserver) return;
@@ -31,10 +39,19 @@ export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams,
31
39
  if (!containerElement) return null;
32
40
  const manager = new ScrollPlaybackVideoManager({
33
41
  src,
34
- videoContainer: containerElement
42
+ videoContainer: containerElement,
43
+ ...(hasServerFrames ? {
44
+ frameData: {
45
+ batchId: scrollPlaybackFrameData.batchId!,
46
+ frameCount: scrollPlaybackFrameData.frameCount!,
47
+ frameRate: scrollPlaybackFrameData.frameRate!,
48
+ frameFormat: scrollPlaybackFrameData.frameFormat!
49
+ },
50
+ frameBaseUrl
51
+ } : {})
35
52
  });
36
53
  return manager;
37
- }, [containerElement, src]);
54
+ }, [containerElement, src, hasServerFrames, frameBaseUrl]);
38
55
 
39
56
  useEffect(() => {
40
57
  return () => {
package/src/components/items/FileItem/VideoItem.tsx CHANGED
@@ -129,6 +129,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
129
129
  playbackParams={scrollPlayback}
130
130
  style={inlineStyles}
131
131
  className={`video video-playback-wrapper video-${item.id}`}
132
+ scrollPlaybackFrameData={item.commonParams.scrollPlaybackFrameData}
133
+ frameBaseUrl={item.commonParams.scrollPlaybackFrameData?.framesUrl}
132
134
  />
133
135
  )}
134
136
  {hasGLEffect && isFXAllowed && (
package/cntrl-site-sdk-nextjs-1.9.88.tgz DELETED
Binary file