@webstudio-is/sdk-components-react 0.143.1 → 0.144.1-710b1d2.0

package/lib/components.js

@@ -65,13 +65,10 @@ var execute = async (container) => {
   const syncTasks = [];
   const asyncTasks = [];
   scripts.forEach((script) => {
-    const type = script.getAttribute("type");
-    if (type == null || type === "" || type === "text/javascript") {
-      const tasks = script.hasAttribute("async") ? asyncTasks : syncTasks;
-      tasks.push(() => {
-        return insertScript(script);
-      });
-    }
+    const tasks = script.hasAttribute("async") ? asyncTasks : syncTasks;
+    tasks.push(() => {
+      return insertScript(script);
+    });
   });
   for (const task of asyncTasks) {
     task();
@@ -437,17 +434,13 @@ import { colord } from "colord";
 import {
   forwardRef as forwardRef29,
   useState as useState2,
-  useRef as useRef2,
   useEffect as useEffect2,
   useContext as useContext3,
-  createContext,
-  useMemo,
-  useCallback
+  createContext
 } from "react";
 import { ReactSdkContext as ReactSdkContext3 } from "@webstudio-is/react-sdk";
-import { shallowEqual } from "shallow-equal";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var getUrl = (options) => {
+import { Fragment as Fragment2, jsx as jsx26, jsxs } from "react/jsx-runtime";
+var getVideoUrl = (options) => {
   if (options.url === void 0) {
     return;
   }
@@ -461,23 +454,34 @@ var getUrl = (options) => {
   if (url === void 0) {
     return;
   }
+  const optionsMap = {
+    showPortrait: "portrait",
+    showByline: "byline",
+    showTitle: "title",
+    controlsColor: "color",
+    showControls: "controls",
+    interactiveParams: "interactive_params",
+    backgroundMode: "background",
+    doNotTrack: "dnt"
+  };
   let option;
   for (option in options) {
     const value = options[option];
     if (option === "url" || value === void 0) {
       continue;
     }
-    url.searchParams.append(option, value.toString());
+    const mappedOption = optionsMap[option] ?? option;
+    url.searchParams.append(mappedOption, value.toString());
   }
   url.searchParams.set("autoplay", "true");
-  if (typeof options.color === "string") {
-    const color = colord(options.color).toHex().replace("#", "");
+  if (typeof options.controlsColor === "string") {
+    const color = colord(options.controlsColor).toHex().replace("#", "");
     url.searchParams.set("color", color);
   }
-  if (options.portrait) {
+  if (options.showPortrait) {
     url.searchParams.set("title", "true");
   }
-  if (options.byline) {
+  if (options.showByline) {
     url.searchParams.set("portrait", "true");
     url.searchParams.set("title", "true");
   }
@@ -488,7 +492,7 @@ var preconnect = (url) => {
   link.rel = "preconnect";
   link.href = url;
   link.crossOrigin = "true";
-  document.head.append(link);
+  document.head.appendChild(link);
 };
 var warmed = false;
 var PLAYER_CDN = "https://f.vimeocdn.com";
@@ -506,43 +510,10 @@ var warmConnections = () => {
   preconnect(IMAGE_CDN);
   warmed = true;
 };
-var createPlayer = (parent, vimeoOptions, extendedOptions, callback) => {
-  const url = getUrl(vimeoOptions);
-  if (url === void 0) {
-    return;
-  }
-  const iframe = document.createElement("iframe");
-  iframe.setAttribute(
-    "allow",
-    "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;"
-  );
-  iframe.setAttribute("frameborder", "0");
-  iframe.setAttribute("allowfullscreen", "true");
-  iframe.setAttribute("src", url);
-  iframe.setAttribute(
-    "style",
-    "position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1s;"
-  );
-  if (extendedOptions.loading) {
-    iframe.setAttribute("loading", extendedOptions.loading);
-  }
-  iframe.addEventListener(
-    "load",
-    () => {
-      iframe.style.opacity = "1";
-      callback();
-    },
-    { once: true }
-  );
-  parent.appendChild(iframe);
-  return () => {
-    iframe.parentElement?.removeChild(iframe);
-  };
-};
 var getVideoId = (url) => {
   try {
     const parsedUrl = new URL(url);
-    const id = parsedUrl.pathname.split("/")[1];
+    const id = parsedUrl.pathname.split("/")[2];
     if (id === "" || id == null) {
       return;
     }
@@ -550,7 +521,7 @@ var getVideoId = (url) => {
   } catch {
   }
 };
-var loadPreviewImage = async (element, videoUrl) => {
+var loadPreviewImageUrl = async (videoUrl) => {
   const videoId = getVideoId(videoUrl);
   const apiUrl = `https://vimeo.com/api/v2/video/${videoId}.json`;
   const response = (await (await fetch(apiUrl)).json())[0];
@@ -563,69 +534,89 @@ var loadPreviewImage = async (element, videoUrl) => {
   imageUrl.searchParams.append("q", "70");
   return imageUrl;
 };
-var useVimeo = ({
-  options,
+var EmptyState = () => {
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      style: {
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "1.2em"
+      },
+      children: 'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
+    }
+  );
+};
+var Player = ({
+  status,
+  loading,
+  videoUrl,
+  previewImageUrl,
+  autoplay,
   renderer,
   showPreview,
-  loading
+  onStatusChange,
+  onPreviewImageUrlChange
 }) => {
-  const [playerStatus, setPlayerStatus] = useState2("initial");
-  const elementRef = useRef2(null);
-  const [previewImageUrl, setPreviewImageUrl] = useState2();
-  const [isPending, setIsPending] = useState2(false);
-  const loadPreviewOnceRef = useRef2(false);
-  useEffect2(() => {
-    setPlayerStatus(
-      options.autoplay && renderer !== "canvas" ? "initialized" : "initial"
-    );
-  }, [options.autoplay, renderer]);
+  const [opacity, setOpacity] = useState2(0);
   useEffect2(() => {
-    if (elementRef.current === null || playerStatus === "ready" || options.url === void 0) {
-      return;
-    }
-    if (showPreview) {
-      if (loadPreviewOnceRef.current) {
-        return;
-      }
-      loadPreviewOnceRef.current = true;
-      loadPreviewImage(elementRef.current, options.url).then(setPreviewImageUrl).catch(() => {
-      });
-      return;
+    if (autoplay && renderer !== "canvas" && status === "initial") {
+      onStatusChange("loading");
     }
-    setPreviewImageUrl(void 0);
-  }, [renderer, showPreview, options.url, playerStatus]);
-  const optionsRef = useRef2(options);
-  const stableOptions = useMemo(() => {
-    if (shallowEqual(options, optionsRef.current) === false) {
-      optionsRef.current = options;
-    }
-    return optionsRef.current;
-  }, [options]);
+  }, [autoplay, status, renderer, onStatusChange]);
   useEffect2(() => {
-    if (isPending) {
-      setPlayerStatus(
-        (status2) => status2 === "initial" ? "initialized" : status2
-      );
+    if (renderer !== "canvas") {
+      warmConnections();
     }
-  }, [isPending]);
-  const toggleCreatePlayer = playerStatus !== "initial";
+  }, [renderer]);
   useEffect2(() => {
-    if (elementRef.current === null) {
+    if (videoUrl === void 0) {
       return;
     }
-    if (toggleCreatePlayer === false) {
+    if (showPreview === false) {
+      onPreviewImageUrlChange(void 0);
       return;
     }
-    return createPlayer(elementRef.current, stableOptions, { loading }, () => {
-      setPlayerStatus("ready");
-    });
-  }, [stableOptions, toggleCreatePlayer, loading]);
-  const start = useCallback(() => {
-    setIsPending(true);
-  }, []);
-  const status = isPending ? "initialized" : playerStatus;
-  return { previewImageUrl, status, start, elementRef };
+    if (previewImageUrl === void 0) {
+      loadPreviewImageUrl(videoUrl).then(onPreviewImageUrlChange).catch(() => {
+        console.error(`Could not load preview image for ${videoUrl}`);
+      });
+    }
+  }, [onPreviewImageUrlChange, showPreview, videoUrl, previewImageUrl]);
+  if (renderer === "canvas" || status === "initial") {
+    return;
+  }
+  return /* @__PURE__ */ jsx26(
+    "iframe",
+    {
+      src: videoUrl,
+      loading,
+      allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;",
+      allowFullScreen: true,
+      style: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        opacity,
+        transition: "opacity 1s",
+        border: "none"
+      },
+      onLoad: () => {
+        onStatusChange("ready");
+        setOpacity(1);
+      }
+    }
+  );
 };
+var VimeoContext = createContext({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onInitPlayer: () => {
+  },
+  status: "initial"
+});
 var Vimeo = forwardRef29(
   ({
     url,
@@ -655,33 +646,31 @@ var Vimeo = forwardRef29(
     children,
     ...rest
   }, ref) => {
+    const [status, setStatus] = useState2("initial");
+    const [previewImageUrl, setPreviewImageUrl] = useState2();
     const { renderer } = useContext3(ReactSdkContext3);
-    const { previewImageUrl, status, start, elementRef } = useVimeo({
-      renderer,
-      showPreview,
-      loading,
-      options: {
-        url,
-        autoplay,
-        autopause,
-        keyboard,
-        loop,
-        muted,
-        pip,
-        playsinline,
-        quality,
-        responsive,
-        speed,
-        transparent,
-        portrait: showPortrait,
-        byline: showByline,
-        title: showTitle,
-        color: controlsColor,
-        controls: showControls,
-        interactive_params: interactiveParams,
-        background: backgroundMode,
-        dnt: doNotTrack
-      }
+    const videoUrl = getVideoUrl({
+      url,
+      autoplay,
+      autopause,
+      backgroundMode,
+      showControls,
+      controlsColor,
+      doNotTrack,
+      interactiveParams,
+      keyboard,
+      loop,
+      muted,
+      pip,
+      playsinline,
+      quality,
+      responsive,
+      speed,
+      texttrack,
+      showTitle,
+      transparent,
+      showPortrait,
+      autopip
     });
     return /* @__PURE__ */ jsx26(
       VimeoContext.Provider,
@@ -691,7 +680,7 @@ var Vimeo = forwardRef29(
           previewImageUrl,
           onInitPlayer() {
             if (renderer !== "canvas") {
-              start();
+              setStatus("loading");
             }
           }
         },
@@ -700,17 +689,27 @@ var Vimeo = forwardRef29(
           {
             ...rest,
             ref: (value) => {
-              elementRef.current = value;
               if (ref !== null) {
                 typeof ref === "function" ? ref(value) : ref.current = value;
               }
             },
-            onPointerOver: () => {
-              if (renderer !== "canvas") {
-                warmConnections();
-              }
-            },
-            children: url === void 0 ? /* @__PURE__ */ jsx26(EmptyState, {}) : children
+            children: videoUrl === void 0 ? /* @__PURE__ */ jsx26(EmptyState, {}) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+              children,
+              /* @__PURE__ */ jsx26(
+                Player,
+                {
+                  autoplay,
+                  videoUrl,
+                  previewImageUrl,
+                  loading,
+                  showPreview,
+                  renderer,
+                  status,
+                  onStatusChange: setStatus,
+                  onPreviewImageUrlChange: setPreviewImageUrl
+                }
+              )
+            ] })
           }
         )
       }
@@ -718,28 +717,6 @@ var Vimeo = forwardRef29(
   }
 );
 Vimeo.displayName = "Vimeo";
-var EmptyState = () => {
-  return /* @__PURE__ */ jsx26(
-    "div",
-    {
-      style: {
-        display: "flex",
-        width: "100%",
-        height: "100%",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: "1.2em"
-      },
-      children: 'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
-    }
-  );
-};
-var VimeoContext = createContext({
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onInitPlayer: () => {
-  },
-  status: "initial"
-});
 
 // src/vimeo-preview-image.tsx
 import {
@@ -771,7 +748,7 @@ var VimeoPlayButton = forwardRef31(
   (props, ref) => {
     const vimeoContext = useContext5(VimeoContext);
     if (vimeoContext.status !== "initial") {
-      return null;
+      return;
     }
     return /* @__PURE__ */ jsx28(Button, { ...props, onClick: vimeoContext.onInitPlayer, ref });
   }
@@ -787,8 +764,8 @@ import { jsx as jsx29 } from "react/jsx-runtime";
 var VimeoSpinner = forwardRef32(
   (props, ref) => {
     const vimeoContext = useContext6(VimeoContext);
-    if (vimeoContext.status !== "initialized") {
-      return null;
+    if (vimeoContext.status !== "loading") {
+      return;
     }
     return /* @__PURE__ */ jsx29("div", { ...props, ref });
   }

package/lib/metas.js

@@ -57,8 +57,7 @@ var propsMeta = {
     code: {
       required: true,
       control: "code",
-      type: "string",
-      rows: 10
+      type: "string"
     }
   },
   initialProps: ["clientOnly", "executeScriptOnCanvas"]

package/lib/props.js

@@ -39,8 +39,7 @@ var propsMeta3 = {
     code: {
       required: true,
       control: "code",
-      type: "string",
-      rows: 10
+      type: "string"
     }
   },
   initialProps: ["clientOnly", "executeScriptOnCanvas"]

package/lib/types/vimeo.d.ts

@@ -1,5 +1,4 @@
 import { type ComponentProps } from "react";
-declare const defaultTag = "div";
 type VimeoPlayerOptions = {
     background?: boolean;
     color?: string;
@@ -42,7 +41,6 @@ type VimeoPlayerOptions = {
     /** Whether the responsive player and transparent background are enabled. */
     transparent?: boolean;
 };
-type PlayerStatus = "initial" | "initialized" | "ready";
 export type VimeoOptions = Omit<VimeoPlayerOptions, "dnt" | "interactive_params" | "background" | "controls" | "color" | "byline" | "title" | "portrait"> & {
     /** Not a Vimeo attribute: Whether the preview image should be loaded from Vimeo API. Ideally don't use it, because it will show up with some delay and will make your project feel slower. */
     showPreview?: boolean;
@@ -65,11 +63,13 @@ export type VimeoOptions = Omit<VimeoPlayerOptions, "dnt" | "interactive_params"
     /** Whether to display the video owner's portrait. Only works if either title or byline are also enabled */
     showPortrait?: VimeoPlayerOptions["portrait"];
 };
-type Props = Omit<ComponentProps<typeof defaultTag>, keyof VimeoOptions> & VimeoOptions;
-export declare const Vimeo: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type PlayerStatus = "initial" | "loading" | "ready";
 export declare const VimeoContext: import("react").Context<{
     previewImageUrl?: URL | undefined;
     onInitPlayer: () => void;
     status: PlayerStatus;
 }>;
+declare const defaultTag = "div";
+type Props = Omit<ComponentProps<typeof defaultTag>, keyof VimeoOptions> & VimeoOptions;
+export declare const Vimeo: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.143.1",
+  "version": "0.144.1-710b1d2.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -39,13 +39,14 @@
   "dependencies": {
     "@react-aria/utils": "^3.21.0",
     "colord": "^2.9.3",
-    "shallow-equal": "^3.1.0",
-    "@webstudio-is/react-sdk": "0.143.1",
-    "@webstudio-is/icons": "0.143.1",
-    "@webstudio-is/image": "0.143.1"
+    "@webstudio-is/icons": "0.144.1-710b1d2.0",
+    "@webstudio-is/image": "0.144.1-710b1d2.0",
+    "@webstudio-is/react-sdk": "0.144.1-710b1d2.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
     "@storybook/react": "^7.4.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
@@ -55,10 +56,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
-    "@webstudio-is/storybook-config": "0.0.0",
-    "@webstudio-is/jest-config": "1.0.7",
-    "@webstudio-is/generate-arg-types": "0.143.1",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/generate-arg-types": "0.144.1-710b1d2.0",
+    "@webstudio-is/jest-config": "1.0.8-710b1d2.0",
+    "@webstudio-is/storybook-config": "0.0.1-710b1d2.0",
+    "@webstudio-is/tsconfig": "1.0.8-710b1d2.0"
   },
   "scripts": {
     "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",