@cntrl-site/sdk-nextjs 1.1.3 → 1.1.5-alpha.0

package/lib/components/items/VimeoEmbed.js

@@ -61,7 +61,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     (0, react_1.useEffect)(() => {
         if (!vimeoPlayer || !imgRef)
             return;
-        if (play === 'on-click' && !controls) {
+        if (play === 'on-click') {
             setIsCoverVisible(true);
         }
         vimeoPlayer.on('pause', (e) => {

package/lib/interactions/AudioPlayer.js

@@ -0,0 +1,16 @@
+"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/lib/interactions/InteractionsRegistry.js

@@ -14,10 +14,12 @@ 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) => {
@@ -139,6 +141,9 @@ 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);
         }
@@ -235,5 +240,8 @@ class InteractionsRegistry {
         }
         return stages;
     }
+    playClickSound() {
+        this.audioPlayer.play();
+    }
 }
 exports.InteractionsRegistry = InteractionsRegistry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.1.3",
+  "version": "1.1.5-alpha.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/items/VimeoEmbed.tsx

@@ -51,7 +51,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
 
   useEffect(() => {
     if (!vimeoPlayer || !imgRef) return;
-    if (play === 'on-click' && !controls) {
+    if (play === 'on-click') {
       setIsCoverVisible(true);
     }
     vimeoPlayer.on('pause', (e) => {
@@ -77,6 +77,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     vimeoPlayer!.play();
     setIsCoverVisible(false);
   };
+
   const isInteractive = opacity !== 0;
   useEffect(() => {
     onVisibilityChange?.(isInteractive);

package/src/interactions/AudioPlayer.ts

@@ -0,0 +1,16 @@
+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();
+  }
+}

package/src/interactions/InteractionsRegistry.ts

@@ -7,6 +7,7 @@ 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();
@@ -16,7 +17,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);
@@ -137,6 +138,9 @@ 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);
     }
@@ -234,6 +238,10 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     }
     return stages;
   }
+
+  private playClickSound() {
+    this.audioPlayer.play();
+  }
 }
 
 type ItemStages = (TransitioningStage | ActiveStage)[];