@cntrl-site/sdk-nextjs 1.1.5-alpha.2 → 1.1.5

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import antfu from '@antfu/eslint-config';
+
+export default antfu(
+  {
+    ignores: [],
+  },
+  {
+    rules: {
+      'import/order': 'off',
+      'style/semi': 'off',
+      'antfu/if-newline': 'off',
+      'style/comma-dangle': 'off',
+      'style/member-delimiter-style': 'off',
+      'semi': ['error', 'always'],
+      'no-alert': 'off',
+    },
+  },
+);

package/lib/components/items/VimeoEmbed.js

@@ -14,16 +14,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VimeoEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const sdk_1 = require("@cntrl-site/sdk");
 const player_1 = __importDefault(require("@vimeo/player"));
+const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const LinkWrapper_1 = require("../LinkWrapper");
-const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
-const useItemAngle_1 = require("../useItemAngle");
-const sdk_1 = require("@cntrl-site/sdk");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const LinkWrapper_1 = require("../LinkWrapper");
+const useItemAngle_1 = require("../useItemAngle");
+const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
@@ -48,7 +48,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));
         validURL.searchParams.append('autoplay', String(play === 'auto'));
-        validURL.searchParams.append('muted', String(play !== 'on-click' ? true : muted));
+        validURL.searchParams.append('muted', String(muted));
         validURL.searchParams.append('loop', String(loop));
         validURL.searchParams.append('pip', String(pictureInPicture));
         validURL.searchParams.append('title', '0');
@@ -69,6 +69,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                 setIsCoverVisible(true);
             }
         });
+        vimeoPlayer.on('ended', () => {
+            setIsCoverVisible(true);
+        });
     }, [vimeoPlayer, imgRef]);
     const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!vimeoPlayer)
@@ -109,13 +112,13 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), (!item.commonParams.controls && play === 'on-click') && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
+                        }, alt: "Cover img" })), (!item.commonParams.controls && (play === 'on-click' || play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
                             position: 'absolute',
                             height: '100%',
                             width: '100%',
                             top: '0',
                             left: '0'
-                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: `embed-video`, src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;

package/lib/interactions/InteractionsRegistry.js

@@ -14,12 +14,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InteractionsRegistry = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const Item_1 = require("../components/Item");
-const AudioPlayer_1 = require("./AudioPlayer");
 class InteractionsRegistry {
     constructor(article, layoutId) {
         this.layoutId = layoutId;
         this.ctrls = new Map();
-        this.audioPlayer = new AudioPlayer_1.AudioPlayer();
         const { interactions } = article;
         this.items = this.unpackItems(article);
         const activeStatesIds = interactions.reduce((map, inter) => {
@@ -141,9 +139,6 @@ class InteractionsRegistry {
             for (const trigger of interaction.triggers) {
                 itemsToNotify.add(trigger.itemId);
             }
-            if (triggerType === 'click') {
-                this.playClickSound();
-            }
             this.notifyItemCtrlsChange(Array.from(itemsToNotify));
             this.notifyTransitionStartForItems(transitioningItems, activeStateId);
         }
@@ -240,8 +235,5 @@ class InteractionsRegistry {
         }
         return stages;
     }
-    playClickSound() {
-        this.audioPlayer.play();
-    }
 }
 exports.InteractionsRegistry = InteractionsRegistry;

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.1.5-alpha.2",
+  "version": "1.1.5",
   "description": "SDK for Next.js",
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
+  },
   "main": "lib/index.js",
   "types": "src/index.ts",
   "scripts": {
@@ -10,35 +20,24 @@
     "build": "tsc --project tsconfig.build.json",
     "prepublishOnly": "NODE_ENV=production npm run build"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
-  },
-  "author": "arsen@momdesign.nyc",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
+  "peerDependencies": {
+    "@types/lodash.isequal": "^4.5.6",
+    "lodash.isequal": "^4.5.0",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
-  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
+    "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
     "@cntrl-site/sdk": "^1.13.0",
-    "@types/howler": "^2.2.12",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
-    "howler": "^2.2.4",
     "html-react-parser": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "styled-jsx": "^5.0.2"
   },
-  "peerDependencies": {
-    "@types/lodash.isequal": "^4.5.6",
-    "lodash.isequal": "^4.5.0",
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",

package/src/components/items/VimeoEmbed.tsx

@@ -1,14 +1,16 @@
-import { FC, useEffect, useId, useMemo, useState } from 'react';
+import type { VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
+import type { FC } from 'react';
+import type { ItemProps } from '../Item';
+import { getLayoutStyles } from '@cntrl-site/sdk';
 import Player from '@vimeo/player';
+import { useEffect, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { ItemProps } from '../Item';
-import { LinkWrapper } from '../LinkWrapper';
-import { useEmbedVideoItem } from './useEmbedVideoItem';
-import { useItemAngle } from '../useItemAngle';
-import { getLayoutStyles, VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
+import { useRegisterResize } from '../../common/useRegisterResize';
 import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useRegisterResize } from "../../common/useRegisterResize";
 import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
+import { LinkWrapper } from '../LinkWrapper';
+import { useItemAngle } from '../useItemAngle';
+import { useEmbedVideoItem } from './useEmbedVideoItem';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -37,7 +39,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
     validURL.searchParams.append('autoplay', String(play === 'auto'));
-    validURL.searchParams.append('muted', String(play !== 'on-click' ? true : muted));
+    validURL.searchParams.append('muted', String(muted));
     validURL.searchParams.append('loop', String(loop));
     validURL.searchParams.append('pip', String(pictureInPicture));
     validURL.searchParams.append('title', '0');
@@ -46,7 +48,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     validURL.searchParams.append('autopause', 'false');
 
     return validURL.href;
-  }
+  };
   const validUrl = getValidVimeoUrl(url);
 
   useEffect(() => {
@@ -59,6 +61,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         setIsCoverVisible(true);
       }
     });
+    vimeoPlayer.on('ended', () => {
+      setIsCoverVisible(true);
+    });
   }, [vimeoPlayer, imgRef]);
 
   const handleClick = async () => {
@@ -67,7 +72,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     if (isPaused) {
       vimeoPlayer.play();
       setIsCoverVisible(false);
-    } else {
+    }
+    else {
       vimeoPlayer.pause();
     }
   };
@@ -98,7 +104,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
           if (!vimeoPlayer || play !== 'on-hover') return;
           vimeoPlayer.play();
         }}
-        onMouseLeave={() =>{
+        onMouseLeave={() => {
           if (!vimeoPlayer || play !== 'on-hover') return;
           vimeoPlayer.pause();
         }}
@@ -122,7 +128,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
           />
         )}
         {/* ↓ This is necessary to track clicks on an iframe. */}
-        {(!item.commonParams.controls && play === 'on-click') && (
+        {(!item.commonParams.controls && (play === 'on-click' || play === 'auto')) && (
           <div
             onClick={handleClick}
             style={{
@@ -136,17 +142,18 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         )}
         <iframe
           ref={setIframeRef}
-          className={`embed-video`}
+          className="embed-video"
           src={validUrl || ''}
           allow="autoplay; fullscreen; picture-in-picture;"
           allowFullScreen
           style={{
-            ...(radius !== undefined  ? { borderRadius: `${radius * 100}vw` } : {}),
+            ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
             transition: frameStateParams?.transition ?? 'none'
           }}
         />
       </div>
-      <JSXStyle id={id}>{`
+      <JSXStyle id={id}>
+        {`
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;
@@ -160,7 +167,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         overflow: hidden;
       }
       ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-        return (`
+      return (`
           .embed-video-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
@@ -170,8 +177,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
             border-radius: ${layoutParams.radius * 100}vw;
           }
         `);
-      })}
-    `}</JSXStyle>
+    })}
+    `}
+      </JSXStyle>
     </LinkWrapper>
   );
 };

package/src/interactions/InteractionsRegistry.ts

@@ -7,7 +7,6 @@ import {
   ItemAny,
 } from '@cntrl-site/sdk';
 import { isItemType } from '../components/Item';
-import { AudioPlayer } from './AudioPlayer';
 
 export class InteractionsRegistry implements InteractionsRegistryPort {
   private ctrls: Map<ItemId, ItemInteractionCtrl> = new Map();
@@ -17,7 +16,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
   private interactionStateMap: InteractionStateMap;
   private itemsStages: ItemStages;
   private activeStateIdInteractionIdMap: Record<StateId, InteractionId>;
-  private audioPlayer = new AudioPlayer();
+
   constructor(article: Article, private layoutId: string) {
     const { interactions } = article;
     this.items = this.unpackItems(article);
@@ -138,9 +137,6 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       for (const trigger of interaction.triggers) {
         itemsToNotify.add(trigger.itemId);
       }
-      if (triggerType === 'click') {
-        this.playClickSound();
-      }
       this.notifyItemCtrlsChange(Array.from(itemsToNotify));
       this.notifyTransitionStartForItems(transitioningItems, activeStateId);
     }
@@ -238,10 +234,6 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     }
     return stages;
   }
-
-  private playClickSound() {
-    this.audioPlayer.play();
-  }
 }
 
 type ItemStages = (TransitioningStage | ActiveStage)[];

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>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/sdk-nextjs.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/lib/interactions/AudioPlayer.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioPlayer = void 0;
-const howler_1 = require("howler");
-class AudioPlayer {
-    constructor() {
-        this.audio = new howler_1.Howl({
-            src: ['https://cdn.cntrl.site/client-app-files/hover.b226066e.mp3'],
-            volume: 1,
-        });
-    }
-    play() {
-        this.audio.play();
-    }
-}
-exports.AudioPlayer = AudioPlayer;

package/src/interactions/AudioPlayer.ts

@@ -1,16 +0,0 @@
-import { Howl } from 'howler';
-
-export class AudioPlayer {
-  private audio: Howl;
-
-  constructor() {
-    this.audio = new Howl({
-      src: ['https://cdn.cntrl.site/client-app-files/hover.b226066e.mp3'],
-      volume: 1,
-    });  
-  }
-
-  play() {
-    this.audio.play();
-  }
-}