@cntrl-site/sdk-nextjs 1.4.4 → 1.5.1

package/lib/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -98,6 +98,20 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
             vimeoPlayer.pause();
         }
     }, [isInteractive, onVisibilityChange, vimeoPlayer]);
+    (0, react_1.useEffect)(() => {
+        if (!vimeoPlayer || !interactionCtrl)
+            return;
+        interactionCtrl.setActionReceiver((type) => {
+            switch (type) {
+                case 'play':
+                    vimeoPlayer.play();
+                    break;
+                case 'pause':
+                    vimeoPlayer.pause();
+                    break;
+            }
+        });
+    }, [interactionCtrl, vimeoPlayer]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-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)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;

package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -96,6 +96,20 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
             player.pauseVideo();
         }
     }, [isInteractive, onVisibilityChange, player]);
+    (0, react_1.useEffect)(() => {
+        if (!player || !interactionCtrl)
+            return;
+        interactionCtrl.setActionReceiver((type) => {
+            switch (type) {
+                case 'play':
+                    player.playVideo();
+                    break;
+                case 'pause':
+                    player.pauseVideo();
+                    break;
+            }
+        });
+    }, [interactionCtrl, player]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
                     if (!player || play !== 'on-hover')
                         return;

package/lib/interactions/InteractionsRegistry.js

@@ -109,7 +109,7 @@ class InteractionsRegistry {
         return available;
     }
     notifyTrigger(itemId, triggerType) {
-        var _a;
+        var _a, _b;
         const timestamp = Date.now();
         for (const interaction of this.interactions) {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
@@ -122,6 +122,14 @@ class InteractionsRegistry {
             const isNewStateActive = matchingTrigger.to === activeStateId;
             this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
             const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
+            const state = interaction.states.find((state) => state.id === matchingTrigger.to);
+            const actions = (_b = state === null || state === void 0 ? void 0 : state.actions) !== null && _b !== void 0 ? _b : [];
+            for (const action of actions) {
+                const ctrl = this.ctrls.get(action.itemId);
+                if (!ctrl)
+                    continue;
+                ctrl.receiveAction(action.type);
+            }
             this.itemsStages = this.itemsStages.map((stage) => {
                 if (stage.interactionId !== interaction.id)
                     return stage;

package/lib/interactions/ItemInteractionCtrl.js

@@ -58,6 +58,13 @@ class ItemInteractionController {
     sendTrigger(type) {
         this.registry.notifyTrigger(this.itemId, type);
     }
+    receiveAction(type) {
+        var _a;
+        (_a = this.actionReceiver) === null || _a === void 0 ? void 0 : _a.call(this, type);
+    }
+    setActionReceiver(action) {
+        this.actionReceiver = action;
+    }
     receiveChange() {
         this.onChange();
     }

package/lib/utils/getValidYoutubeUrl.js

@@ -8,18 +8,27 @@ var Allowed;
 })(Allowed || (Allowed = {}));
 function getYoutubeId({ hostname, pathname, search }) {
     if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
-        throw new Error(`Cannot get valid youtube ID from "${hostname}" - address is not whitelisted`);
+        throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
     }
     switch (hostname) {
         case Allowed.Tiny:
             return pathname.replace('/', '');
         case Allowed.Full:
-            const searchParams = new URLSearchParams(search);
-            const id = searchParams.get('v');
-            if (!id) {
-                throw new Error("Cannot get valid youtube ID from search params.");
+            if (pathname.startsWith('/shorts/')) {
+                const shortsId = pathname.split('/shorts/')[1];
+                if (!shortsId) {
+                    throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
+                }
+                return shortsId;
+            }
+            else {
+                const searchParams = new URLSearchParams(search);
+                const id = searchParams.get('v');
+                if (!id) {
+                    throw new Error('Cannot get valid YouTube ID from search params.');
+                }
+                return id;
             }
-            return id;
     }
 }
 exports.getYoutubeId = getYoutubeId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.4.4",
+  "version": "1.5.1",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.16.1",
+    "@cntrl-site/sdk": "^1.17.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx

@@ -92,6 +92,20 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     }
   }, [isInteractive, onVisibilityChange, vimeoPlayer]);
 
+  useEffect(() => {
+    if (!vimeoPlayer || !interactionCtrl) return;
+    interactionCtrl.setActionReceiver((type) => {
+      switch(type) {
+        case 'play':
+          vimeoPlayer.play();
+          break;
+        case 'pause':
+          vimeoPlayer.pause();
+          break;
+      }
+    });
+  }, [interactionCtrl, vimeoPlayer]);
+
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div

package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx

@@ -91,6 +91,20 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
     }
   }, [isInteractive, onVisibilityChange, player]);
 
+  useEffect(() => {
+    if (!player || !interactionCtrl) return;
+    interactionCtrl.setActionReceiver((type) => {
+      switch(type) {
+        case 'play':
+          player.playVideo();
+          break;
+        case 'pause':
+          player.pauseVideo();
+          break;
+      }
+    });
+  }, [interactionCtrl, player]);
+
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div

package/src/interactions/InteractionsRegistry.ts

@@ -121,6 +121,13 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       const isNewStateActive = matchingTrigger.to === activeStateId;
       this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
       const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
+      const state = interaction.states.find((state) => state.id === matchingTrigger.to);
+      const actions = state?.actions ?? [];
+      for (const action of actions) {
+        const ctrl = this.ctrls.get(action.itemId);
+        if (!ctrl) continue;
+        ctrl.receiveAction(action.type);
+      }
       this.itemsStages = this.itemsStages.map((stage) => {
         if (stage.interactionId !== interaction.id) return stage;
         return {
@@ -166,8 +173,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     });
     this.ctrls.get(itemId)?.receiveChange();
   }
-
-
+  
   private getCurrentStateByInteractionId(id: InteractionId): string {
     let state;
     for (const interactionId of Object.keys(this.interactionStateMap)) {

package/src/interactions/ItemInteractionCtrl.ts

@@ -5,10 +5,11 @@ import { InteractionTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
   private transitionsInProgress: Set<string> = new Set();
+  private actionReceiver: ((type: 'play' | 'pause') => void) | undefined;
   constructor(
     private itemId: string,
     private registry: InteractionsRegistryPort,
-    private onChange: () => void
+    private onChange: () => void,
   ) {
     this.registry.register(itemId, this);
   }
@@ -37,6 +38,14 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     this.registry.notifyTrigger(this.itemId, type);
   }
 
+  receiveAction(type: 'play' | 'pause') {
+    this.actionReceiver?.(type);
+  }
+
+  setActionReceiver(action: (type: 'play' | 'pause') => void) {
+    this.actionReceiver = action;
+  }
+
   handleTransitionStart = (types: string[]) => {
     this.transitionsInProgress.clear();
     for (const type of types) {

package/src/interactions/types.ts

@@ -7,6 +7,8 @@ export interface ItemInteractionCtrl {
   handleTransitionEnd?: (styleKey: string) => void;
   handleTransitionStart?: (styleKeys: string[]) => void;
   receiveChange: () => void;
+  receiveAction: (type: 'play' | 'pause') => void;
+  setActionReceiver: (action: (type: 'play' | 'pause') => void) => void;
 }
 
 export interface InteractionsRegistryPort {

package/src/utils/getValidYoutubeUrl.ts

@@ -5,17 +5,25 @@ enum Allowed {
 
 export function getYoutubeId({ hostname, pathname, search }: URL): string {
   if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
-    throw new Error(`Cannot get valid youtube ID from "${hostname}" - address is not whitelisted`);
+    throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
   }
   switch (hostname) {
     case Allowed.Tiny:
       return pathname.replace('/', '');
     case Allowed.Full:
-      const searchParams = new URLSearchParams(search);
-      const id = searchParams.get('v');
-      if (!id) {
-        throw new Error("Cannot get valid youtube ID from search params.");
+      if (pathname.startsWith('/shorts/')) {
+        const shortsId = pathname.split('/shorts/')[1];
+        if (!shortsId) {
+          throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
+        }
+        return shortsId;
+      } else {
+        const searchParams = new URLSearchParams(search);
+        const id = searchParams.get('v');
+        if (!id) {
+          throw new Error('Cannot get valid YouTube ID from search params.');
+        }
+        return id;
       }
-      return id;
   }
 }

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>