@cntrl-site/sdk-nextjs 0.13.0 → 0.14.1

package/lib/components/items/VimeoEmbed.js

@@ -14,27 +14,19 @@ const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
-const useCurrentLayout_1 = require("../../common/useCurrentLayout");
 const VimeoEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const layout = (0, useCurrentLayout_1.useCurrentLayout)();
     const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
     const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
-    const isAutoPlayOnHover = (0, react_1.useMemo)(() => {
-        const layoutHoverStates = item.state.hover[layout];
-        if (!layoutHoverStates)
-            return false;
-        return layoutHoverStates.autoplay === true;
-    }, [layout, item]);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+    const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));
-        validURL.searchParams.append('autoplay', String(autoplay));
-        validURL.searchParams.append('muted', String(muted));
+        validURL.searchParams.append('autoplay', String(play === 'auto'));
+        validURL.searchParams.append('muted', String(play !== 'on-click' ? true : muted));
         validURL.searchParams.append('loop', String(loop));
         validURL.searchParams.append('pip', String(pictureInPicture));
         validURL.searchParams.append('title', '0');
@@ -48,11 +40,11 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
                     borderRadius: `${radius * 100}vw`,
                     transform: `rotate(${angle}deg)`
                 }, onMouseEnter: () => {
-                    if (!vimeoPlayer || !isAutoPlayOnHover)
+                    if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
                 }, onMouseLeave: () => {
-                    if (!vimeoPlayer || !isAutoPlayOnHover)
+                    if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
                 }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `

package/lib/components/items/YoutubeEmbed.js

@@ -14,33 +14,64 @@ const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
 const YoutubeEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { autoplay, controls, url } = item.commonParams;
+    const { play, controls, url } = item.commonParams;
     const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const getValidYoutubeUrl = (url) => {
+    const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
+    const [div, setDiv] = (0, react_1.useState)(null);
+    const [player, setPlayer] = (0, react_1.useState)(undefined);
+    (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
-        const id = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
-        const validUrl = new URL(`https://www.youtube.com/embed/${id}`);
-        validUrl.searchParams.append('controls', `${Number(controls)}`);
-        validUrl.searchParams.append('autoplay', `${Number(autoplay)}`);
-        validUrl.searchParams.append('mute', `${Number(autoplay)}`);
-        return validUrl.href;
-    };
-    const validUrl = getValidYoutubeUrl(url);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, style: {
+        const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
+        if (!YT || !videoId || !div)
+            return;
+        const divRect = div.getBoundingClientRect();
+        const placeholder = document.createElement('div');
+        div.appendChild(placeholder);
+        const player = new YT.Player(placeholder, {
+            videoId,
+            playerVars: {
+                autoplay: play === 'auto' ? '1' : '0',
+                controls: controls ? '1' : '0'
+            },
+            events: {
+                onReady: (event) => {
+                    setPlayer(event.target);
+                    if (play !== 'on-click') {
+                        player.mute();
+                    }
+                }
+            }
+        });
+        return () => {
+            setPlayer(undefined);
+            player.destroy();
+            placeholder.parentElement?.removeChild(placeholder);
+        };
+    }, [YT, div]);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
+                    if (!player || play !== 'on-hover')
+                        return;
+                    player.playVideo();
+                }, onMouseLeave: () => {
+                    if (!player || play !== 'on-hover')
+                        return;
+                    player.pauseVideo();
+                }, ref: setDiv, style: {
                     borderRadius: `${radius * 100}vw`,
                     transform: `rotate(${angle}deg)`
-                }, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedYoutubeVideo", src: validUrl || '', allow: "accelerometer; autoplay; allowfullscreen;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
           width: 100%;
           height: 100%;
         }
-        .embedYoutubeVideo {
+        .embed-youtube-video-wrapper-${item.id} iframe {
           width: 100%;
           height: 100%;
           z-index: 1;

package/lib/utils/Youtube/YouTubeIframeApiLoader.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.captureStackTrace = exports.YouTubeIframeApiLoader = void 0;
+const YT_IFRAME_API_URL = 'https://www.youtube.com/iframe_api';
+class YouTubeIframeApiLoader {
+    static create() {
+        if (!YouTubeIframeApiLoader.instance) {
+            YouTubeIframeApiLoader.instance = new YouTubeIframeApiLoader();
+        }
+        return YouTubeIframeApiLoader.instance;
+    }
+    constructor() {
+        this.loadingPromise = this.loadApi();
+    }
+    async getApi() {
+        await this.loadingPromise;
+        if (!window.YT) {
+            throw new Error('YouTube IFrame API is not loaded');
+        }
+        return window.YT;
+    }
+    loadApi() {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = YT_IFRAME_API_URL;
+            const loadError = new Error('YouTube IFrame API loading failed');
+            captureStackTrace(loadError);
+            script.addEventListener('abort', () => {
+                reject(loadError);
+            });
+            script.addEventListener('error', () => {
+                reject(loadError);
+            });
+            window.onYouTubeIframeAPIReady = () => {
+                window.onYouTubeIframeAPIReady = undefined;
+                resolve();
+            };
+            document.head.appendChild(script);
+        });
+    }
+}
+exports.YouTubeIframeApiLoader = YouTubeIframeApiLoader;
+function captureStackTrace(error) {
+    if (typeof Error.captureStackTrace === 'function') {
+        Error.captureStackTrace(error);
+        return;
+    }
+    try {
+        throw error;
+    }
+    catch (errWithStack) { }
+}
+exports.captureStackTrace = captureStackTrace;

package/lib/utils/Youtube/YoutubeIframeApi.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YTPlayerState = void 0;
+var YTPlayerState;
+(function (YTPlayerState) {
+    YTPlayerState[YTPlayerState["Unstarted"] = -1] = "Unstarted";
+    YTPlayerState[YTPlayerState["Ended"] = 0] = "Ended";
+    YTPlayerState[YTPlayerState["Playing"] = 1] = "Playing";
+    YTPlayerState[YTPlayerState["Paused"] = 2] = "Paused";
+    YTPlayerState[YTPlayerState["Buffering"] = 3] = "Buffering";
+    YTPlayerState[YTPlayerState["VideoCued"] = 5] = "VideoCued";
+})(YTPlayerState = exports.YTPlayerState || (exports.YTPlayerState = {}));

package/lib/utils/Youtube/useYouTubeIframeApi.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useYouTubeIframeApi = void 0;
+const react_1 = require("react");
+const YouTubeIframeApiLoader_1 = require("./YouTubeIframeApiLoader");
+function useYouTubeIframeApi() {
+    const [YT, setYT] = (0, react_1.useState)(undefined);
+    (0, react_1.useEffect)(() => {
+        const loader = YouTubeIframeApiLoader_1.YouTubeIframeApiLoader.create();
+        loader.getApi().then((YT) => setYT(YT));
+    }, []);
+    return YT;
+}
+exports.useYouTubeIframeApi = useYouTubeIframeApi;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,7 +21,8 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^1.1.6",
+    "@types/vimeo__player": "^2.18.0",
+    "@cntrl-site/sdk": "^1.1.8",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
@@ -39,7 +40,6 @@
     "@types/jest": "^29.2.5",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
-    "@types/vimeo__player": "^2.18.0",
     "jest": "^29.3.1",
     "ts-jest": "^29.0.3",
     "typescript": "^4.9.5"

package/src/components/items/VimeoEmbed.tsx

@@ -14,22 +14,16 @@ import { useCurrentLayout } from '../../common/useCurrentLayout';
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const layout = useCurrentLayout()
   const { radius } = useEmbedVideoItem(item, sectionId);
   const [iframeRef, setIframeRef] = useState<HTMLIFrameElement | null>(null);
   const vimeoPlayer = useMemo(() => iframeRef ? new Player(iframeRef) : undefined, [iframeRef]);
-  const isAutoPlayOnHover = useMemo(() => {
-    const layoutHoverStates = item.state.hover[layout];
-    if (!layoutHoverStates) return false;
-    return layoutHoverStates.autoplay === true;
-  }, [layout, item]);
   const angle = useItemAngle(item, sectionId);
-  const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+  const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
-    validURL.searchParams.append('autoplay', String(autoplay));
-    validURL.searchParams.append('muted', String(muted));
+    validURL.searchParams.append('autoplay', String(play === 'auto'));
+    validURL.searchParams.append('muted', String(play !== 'on-click' ? true : muted));
     validURL.searchParams.append('loop', String(loop));
     validURL.searchParams.append('pip', String(pictureInPicture));
     validURL.searchParams.append('title', '0');
@@ -49,11 +43,11 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
           transform: `rotate(${angle}deg)`
         }}
         onMouseEnter={() => {
-          if (!vimeoPlayer || !isAutoPlayOnHover) return;
+          if (!vimeoPlayer || play !== 'on-hover') return;
           vimeoPlayer.play();
         }}
         onMouseLeave={() =>{
-          if (!vimeoPlayer || !isAutoPlayOnHover) return;
+          if (!vimeoPlayer || play !== 'on-hover') return;
           vimeoPlayer.pause();
         }}
       >

package/src/components/items/YoutubeEmbed.tsx

@@ -1,4 +1,4 @@
-import { FC, useId } from 'react';
+import { FC, useEffect, useId, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { TYoutubeEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
@@ -9,41 +9,65 @@ import { useItemAngle } from '../useItemAngle';
 import { ArticleItemType, getLayoutStyles } from '@cntrl-site/sdk';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useYouTubeIframeApi } from '../../utils/Youtube/useYouTubeIframeApi';
+import { YTPlayer } from '../../utils/Youtube/YoutubeIframeApi';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { autoplay, controls, url } = item.commonParams;
+  const { play, controls, url } = item.commonParams;
   const { radius } = useEmbedVideoItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
+  const YT = useYouTubeIframeApi();
+  const [div, setDiv] = useState<HTMLDivElement | null>(null);
+  const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
 
-  const getValidYoutubeUrl = (url: string): string => {
+  useEffect(() => {
     const newUrl = new URL(url);
-    const id = getYoutubeId(newUrl);
-    const validUrl = new URL(`https://www.youtube.com/embed/${id}`);
-    validUrl.searchParams.append('controls', `${ Number(controls) }`);
-    validUrl.searchParams.append('autoplay', `${ Number(autoplay) }`);
-    validUrl.searchParams.append('mute', `${ Number(autoplay) }`);
-
-    return validUrl.href;
-  }
-  const validUrl = getValidYoutubeUrl(url);
+    const videoId = getYoutubeId(newUrl);
+    if (!YT || !videoId || !div) return;
+    const divRect = div.getBoundingClientRect();
+    const placeholder = document.createElement('div');
+    div.appendChild(placeholder);
+    const player = new YT.Player(placeholder, {
+      videoId,
+      playerVars: {
+        autoplay: play === 'auto' ? '1' : '0',
+        controls: controls ? '1' : '0'
+      },
+      events: {
+        onReady: (event) => {
+          setPlayer(event.target);
+          if (play !== 'on-click') {
+            player.mute();
+          }
+        }
+      }
+    });
+    return () => {
+      setPlayer(undefined);
+      player.destroy();
+      placeholder.parentElement?.removeChild(placeholder);
+    };
+  }, [YT, div]);
 
   return (
     <LinkWrapper url={item.link?.url}>
       <div className={`embed-youtube-video-wrapper-${item.id}`}
+         onMouseEnter={() => {
+           if (!player || play !== 'on-hover') return;
+           player.playVideo();
+         }}
+         onMouseLeave={() => {
+           if (!player || play !== 'on-hover') return;
+           player.pauseVideo();
+         }}
+         ref={setDiv}
          style={{
            borderRadius: `${radius * 100}vw`,
            transform: `rotate(${angle}deg)`
          }}
-      >
-        <iframe
-          className="embedYoutubeVideo"
-          src={validUrl || ''}
-          allow="accelerometer; autoplay; allowfullscreen;"
-          allowFullScreen
-        />
-      </div>
+      ></div>
       <JSXStyle id={id}>{`
         .embed-youtube-video-wrapper-${item.id} {
           position: absolute;
@@ -51,7 +75,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           width: 100%;
           height: 100%;
         }
-        .embedYoutubeVideo {
+        .embed-youtube-video-wrapper-${item.id} iframe {
           width: 100%;
           height: 100%;
           z-index: 1;

package/src/utils/Youtube/YouTubeIframeApiLoader.ts

@@ -0,0 +1,58 @@
+import { YT } from './YoutubeIframeApi';
+
+const YT_IFRAME_API_URL = 'https://www.youtube.com/iframe_api';
+
+export class YouTubeIframeApiLoader {
+  private static instance: YouTubeIframeApiLoader | undefined;
+
+  public static create(): YouTubeIframeApiLoader {
+    if (!YouTubeIframeApiLoader.instance) {
+      YouTubeIframeApiLoader.instance = new YouTubeIframeApiLoader();
+    }
+    return YouTubeIframeApiLoader.instance;
+  }
+
+  private loadingPromise: Promise<void>;
+
+  private constructor() {
+    this.loadingPromise = this.loadApi();
+  }
+
+  async getApi(): Promise<YT> {
+    await this.loadingPromise;
+    if (!window.YT) {
+      throw new Error('YouTube IFrame API is not loaded');
+    }
+    return window.YT;
+  }
+
+  private loadApi(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = YT_IFRAME_API_URL;
+      const loadError = new Error('YouTube IFrame API loading failed');
+      captureStackTrace(loadError);
+      script.addEventListener('abort', () => {
+        reject(loadError);
+      });
+      script.addEventListener('error', () => {
+        reject(loadError);
+      });
+      window.onYouTubeIframeAPIReady = () => {
+        window.onYouTubeIframeAPIReady = undefined;
+        resolve();
+      };
+      document.head.appendChild(script);
+    });
+  }
+}
+
+export function captureStackTrace(error: Error): void {
+  if (typeof Error.captureStackTrace === 'function') {
+    Error.captureStackTrace(error);
+    return;
+  }
+  try {
+    throw error;
+  } catch (errWithStack) {}
+}

package/src/utils/Youtube/YoutubeIframeApi.ts

@@ -0,0 +1,101 @@
+export interface YT {
+  Player: YTPlayerConstructor;
+}
+
+export interface YTPlayerConstructor {
+  new(container: string | Element, params: YTPlayerParams): YTPlayer;
+}
+
+export interface YTEvent<Data> {
+  target: YTPlayer;
+  data: Data;
+}
+
+type YTBool = 0 | 1 | '0' | '1';
+
+export interface YTPlayerParams {
+  width?: string | number;
+  height?: string | number;
+  videoId?: string;
+  playerVars?: Partial<{
+    autoplay: YTBool;
+    cc_lang_pref: string;
+    cc_load_policy: YTBool;
+    color: string;
+    controls: YTBool;
+    disablekb: YTBool;
+    enablejsapi: YTBool;
+    end: number | string;
+    fs: YTBool;
+    hl: string;
+    iv_load_policy: 1 | 3 | '1' | '3';
+    list: string;
+    listType: 'playlist' | 'user_uploads';
+    loop: YTBool;
+    origin: string;
+    playlist: string;
+    playsinline: YTBool;
+    rel: YTBool;
+    start: number | string;
+    widget_referrer: string;
+  }>;
+  events?: Partial<{
+    onReady: (event: YTEvent<void>) => void;
+    onStateChange: (event: YTEvent<YTPlayerState>) => void;
+  }>
+}
+
+export enum YTPlayerState {
+  Unstarted = -1,
+  Ended = 0,
+  Playing = 1,
+  Paused = 2,
+  Buffering = 3,
+  VideoCued = 5
+}
+
+export interface YTPlayer {
+  loadVideoById(videoId: string, startSeconds?: number): void;
+  loadVideoById(params: {
+    videoId: string;
+    startSeconds?: number;
+    endSeconds?: number;
+  }): void;
+
+  loadVideoByUrl(mediaContentUrl: string, startSeconds?: number): void;
+  loadVideoByUrl(params: {
+    mediaContentUrl: string;
+    startSeconds?: number;
+    endSeconds?: number;
+  }): void;
+
+  playVideo(): void;
+  pauseVideo(): void;
+  stopVideo(): void;
+  seekTo(seconds: number, allowSeekAhead: boolean): void;
+
+  mute(): void;
+  unMute(): void;
+  isMuted(): void;
+  setVolume(volume: number): void;
+  getVolume(): void;
+  setSize(width: number, height: number): void;
+  setLoop(loopPlaylists: boolean): void;
+
+  getVideoLoadedFraction(): number;
+  getPlayerState(): YTPlayerState;
+
+  getDuration(): number; // in seconds
+  getVideoUrl(): string;
+  getVideoEmbedCode(): string;
+
+  getIframe(): HTMLIFrameElement | undefined;
+  destroy(): void;
+}
+
+declare global {
+  interface Window {
+    YT?: YT;
+    onYouTubeIframeAPIReady?: () => void;
+  }
+}

package/src/utils/Youtube/useYouTubeIframeApi.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import { YT } from './YoutubeIframeApi';
+import { YouTubeIframeApiLoader } from './YouTubeIframeApiLoader';
+
+export function useYouTubeIframeApi(): YT | undefined {
+  const [YT, setYT] = useState<YT | undefined>(undefined);
+  useEffect(() => {
+    const loader = YouTubeIframeApiLoader.create();
+    loader.getApi().then((YT) => setYT(YT));
+  }, []);
+  return YT;
+}