@cntrl-site/sdk-nextjs 0.21.7 → 0.23.0

package/lib/components/Item.js

@@ -28,6 +28,7 @@ const getAnchoredItemTop_1 = require("../utils/getAnchoredItemTop");
 const useLayoutContext_1 = require("./useLayoutContext");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
 const useExemplary_1 = require("../common/useExemplary");
+const GroupItem_1 = require("./items/GroupItem");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -36,7 +37,7 @@ const itemsMap = {
     [sdk_1.ArticleItemType.YoutubeEmbed]: YoutubeEmbed_1.YoutubeEmbedItem,
     [sdk_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbedItem,
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem,
-    [sdk_1.ArticleItemType.Group]: () => null
+    [sdk_1.ArticleItemType.Group]: GroupItem_1.GroupItem
 };
 const RichTextWrapper = ({ isRichText, children }) => {
     if (!isRichText)
@@ -107,7 +108,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
                             height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`,
                             transform: `scale(${scale})`,
                             transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]
-                        } }, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) })) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                        } }, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) })) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`

package/lib/components/items/GroupItem.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Item_1 = require("../Item");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const sdk_1 = require("@cntrl-site/sdk");
+const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
+const LinkWrapper_1 = require("../LinkWrapper");
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useItemAngle_1 = require("../useItemAngle");
+const useGroupItem_1 = require("./useGroupItem");
+const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
+    var _a, _b;
+    const id = (0, react_1.useId)();
+    const { items } = item;
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { opacity } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `group-${item.id}`, ref: setRef, style: {
+                        opacity,
+                        transform: `rotate(${angle}deg)`,
+                    } }, { children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight }, item.id))) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+        .group-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
+        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                        return (`
+            .group-${item.id} {
+              transition: ${(0, HoverStyles_1.getTransitions)(['opacity'], hoverParams)};
+            }
+            .group-${item.id}:hover {
+              ${(0, HoverStyles_1.getHoverStyles)(['opacity'], hoverParams)}
+            }
+          `);
+                    })}
+      ` }))] }) })));
+};
+exports.GroupItem = GroupItem;

package/lib/components/items/VideoItem.js

@@ -15,6 +15,12 @@ const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
+const rangeMap_1 = require("../../utils/rangeMap");
+const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
+const useLayoutContext_1 = require("../useLayoutContext");
+// To prevent video behaviour that drops to the first frame
+// when close to the end
+const SCROLL_TIME_SHIFT = 0.1;
 const VideoItem = ({ item, sectionId, onResize }) => {
     var _a, _b;
     const id = (0, react_1.useId)();
@@ -23,12 +29,46 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
+    const videoRef = (0, react_1.useRef)(null);
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const rafId = (0, react_1.useRef)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const scrollPlayback = item.layoutParams[layoutId].scrollPlayback;
+    (0, react_1.useEffect)(() => {
+        const video = videoRef.current;
+        if (!video || !scrollPlayback) {
+            video === null || video === void 0 ? void 0 : video.play();
+            return;
+        }
+        video === null || video === void 0 ? void 0 : video.pause();
+        const scrollVideo = () => {
+            rafId.current = window.requestAnimationFrame(scrollVideo);
+            if (!articleRectObserver)
+                return;
+            const scrollPos = articleRectObserver.getSectionScroll(sectionId);
+            if (!video.duration)
+                return;
+            const time = (0, rangeMap_1.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]);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, ref: setRef, style: {
                     opacity: `${opacity}`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
-                } }, { children: (0, jsx_runtime_1.jsx)("video", Object.assign({ autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: {
+                } }, { children: (0, jsx_runtime_1.jsx)("video", Object.assign({ ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor.toCss()}`
@@ -76,3 +116,6 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     ` }))] })));
 };
 exports.VideoItem = VideoItem;
+function toFixed(num) {
+    return Number(num.toFixed(5));
+}

package/lib/components/items/useGroupItem.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGroupItem = void 0;
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../useLayoutContext");
+function useGroupItem(item, sectionId) {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 0;
+    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
+    return { opacity };
+}
+exports.useGroupItem = useGroupItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.21.7",
+  "version": "0.23.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.0.5-1",
-    "@cntrl-site/sdk": "^1.5.5",
+    "@cntrl-site/sdk": "^1.6.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/Item.tsx

@@ -27,11 +27,13 @@ import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
 import { useLayoutContext } from './useLayoutContext';
 import { ArticleRectContext } from "../provider/ArticleRectContext";
 import { useExemplary } from "../common/useExemplary";
+import { GroupItem } from './items/GroupItem';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
   sectionId: string;
   onResize?: (height: number) => void;
+  articleHeight: number;
 }
 
 export interface ItemWrapperProps extends ItemProps<ItemAny> {
@@ -46,7 +48,7 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
   [ArticleItemType.YoutubeEmbed]: YoutubeEmbedItem,
   [ArticleItemType.VimeoEmbed]: VimeoEmbedItem,
   [ArticleItemType.Custom]: CustomItem,
-  [ArticleItemType.Group]: () => null
+  [ArticleItemType.Group]: GroupItem
 };
 
 interface RTWrapperProps {
@@ -147,7 +149,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
               transformOrigin: ScaleAnchorMap[scaleAnchor]
             }}
           >
-            <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
+            <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} articleHeight={articleHeight} />
           </div>
         </RichTextWrapper>
       </div>

package/src/components/items/GroupItem.tsx

@@ -0,0 +1,62 @@
+import React, { FC, useId, useState } from 'react';
+import { Item, ItemProps } from '../Item';
+import JSXStyle from 'styled-jsx/style';
+import { ArticleItemType, getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { LinkWrapper } from '../LinkWrapper';
+import { useRegisterResize } from '../../common/useRegisterResize';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useItemAngle } from '../useItemAngle';
+import { useGroupItem } from './useGroupItem';
+
+export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight }) => {
+  const id = useId();
+  const { items } = item;
+  const angle = useItemAngle(item, sectionId);
+  const { layouts } = useCntrlContext();
+  const { opacity } = useGroupItem(item, sectionId);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+
+  return (
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+      <>
+        <div
+          className={`group-${item.id}`}
+          ref={setRef}
+          style={{
+            opacity,
+            transform: `rotate(${angle}deg)`,
+          }}
+        >
+          {items && items.map(item => (
+            <Item
+              item={item}
+              key={item.id}
+              sectionId={sectionId}
+              articleHeight={articleHeight}
+            />
+          ))}
+        </div>
+        <JSXStyle id={id}>{`
+        .group-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
+        ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+          return (`
+            .group-${item.id} {
+              transition: ${getTransitions<ArticleItemType.Group>(['opacity'], hoverParams)};
+            }
+            .group-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.Group>(['opacity'], hoverParams)}
+            }
+          `);
+        })}
+      `}</JSXStyle>
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/VideoItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo, useState } from 'react';
+import { FC, useContext, useEffect, 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,6 +9,13 @@ 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;
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -17,6 +24,40 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const angle = useItemAngle(item, sectionId);
   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]);
+
   useRegisterResize(ref, onResize);
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
@@ -30,6 +71,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
         }}
       >
         <video
+          ref={videoRef}
           autoPlay
           muted
           loop
@@ -89,3 +131,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
     </LinkWrapper>
   );
 };
+
+function toFixed(num: number) {
+  return Number(num.toFixed(5));
+}

package/src/components/items/useGroupItem.ts

@@ -0,0 +1,20 @@
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { GroupItem } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../useLayoutContext';
+
+export function useGroupItem(item: GroupItem, sectionId: string) {
+  const layoutId = useLayoutContext();
+  const opacity = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 0;
+    },
+    (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    sectionId,
+    [layoutId]
+  );
+
+  return { opacity };
+}

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>