@webstudio-is/sdk-components-react 0.71.0 → 0.72.0

package/lib/cjs/metas.js

@@ -50,7 +50,11 @@ __export(metas_exports, {
   SuccessMessage: () => import_success_message.meta,
   Superscript: () => import_superscript.meta,
   TextBlock: () => import_text_block.meta,
-  Textarea: () => import_textarea.meta
+  Textarea: () => import_textarea.meta,
+  Vimeo: () => import_vimeo.meta,
+  VimeoPlayButton: () => import_vimeo_play_button.meta,
+  VimeoPreviewImage: () => import_vimeo_preview_image.meta,
+  VimeoSpinner: () => import_vimeo_spinner.meta
 });
 module.exports = __toCommonJS(metas_exports);
 var import_slot = require("./slot.ws");
@@ -86,3 +90,7 @@ var import_radio_button_field = require("./radio-button-field.ws");
 var import_radio_button = require("./radio-button.ws");
 var import_checkbox_field = require("./checkbox-field.ws");
 var import_checkbox = require("./checkbox.ws");
+var import_vimeo = require("./vimeo.ws");
+var import_vimeo_preview_image = require("./vimeo-preview-image.ws");
+var import_vimeo_play_button = require("./vimeo-play-button.ws");
+var import_vimeo_spinner = require("./vimeo-spinner.ws");

package/lib/cjs/props.js

@@ -50,7 +50,11 @@ __export(props_exports, {
   SuccessMessage: () => import_success_message.propsMeta,
   Superscript: () => import_superscript.propsMeta,
   TextBlock: () => import_text_block.propsMeta,
-  Textarea: () => import_textarea.propsMeta
+  Textarea: () => import_textarea.propsMeta,
+  Vimeo: () => import_vimeo.propsMeta,
+  VimeoPlayButton: () => import_vimeo_play_button.propsMeta,
+  VimeoPreviewImage: () => import_vimeo_preview_image.propsMeta,
+  VimeoSpinner: () => import_vimeo_spinner.propsMeta
 });
 module.exports = __toCommonJS(props_exports);
 var import_slot = require("./slot.ws");
@@ -86,3 +90,7 @@ var import_radio_button_field = require("./radio-button-field.ws");
 var import_radio_button = require("./radio-button.ws");
 var import_checkbox_field = require("./checkbox-field.ws");
 var import_checkbox = require("./checkbox.ws");
+var import_vimeo = require("./vimeo.ws");
+var import_vimeo_preview_image = require("./vimeo-preview-image.ws");
+var import_vimeo_play_button = require("./vimeo-play-button.ws");
+var import_vimeo_spinner = require("./vimeo-spinner.ws");

package/lib/cjs/rich-text-link.ws.js

@@ -22,18 +22,11 @@ __export(rich_text_link_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(rich_text_link_ws_exports);
-var import_rich_text_link = require("./__generated__/rich-text-link.props");
 var import_link = require("./link.ws");
-const { category, ...linkMetaRest } = import_link.meta;
 const meta = {
-  ...linkMetaRest,
+  ...import_link.meta,
+  category: "hidden",
   type: "rich-text-child",
   template: []
 };
-const propsMeta = {
-  initialProps: import_link.propsMeta.initialProps,
-  props: {
-    ...import_rich_text_link.props,
-    href: import_link.propsMeta.props.href
-  }
-};
+const propsMeta = import_link.propsMeta;

package/lib/cjs/vimeo-play-button.js

@@ -0,0 +1,38 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vimeo_play_button_exports = {};
+__export(vimeo_play_button_exports, {
+  VimeoPlayButton: () => VimeoPlayButton,
+  defaultTag: () => import_button.defaultTag
+});
+module.exports = __toCommonJS(vimeo_play_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_vimeo = require("./vimeo");
+var import_button = require("./button");
+const VimeoPlayButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const vimeoContext = (0, import_react.useContext)(import_vimeo.VimeoContext);
+    if (vimeoContext.status !== "initial") {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { ...props, onClick: vimeoContext.onInitPlayer, ref });
+  }
+);
+VimeoPlayButton.displayName = "VimeoPlayButton";

package/lib/cjs/vimeo-play-button.ws.js

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vimeo_play_button_ws_exports = {};
+__export(vimeo_play_button_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(vimeo_play_button_ws_exports);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_vimeo_play_button = require("./__generated__/vimeo-play-button.props");
+var import_svg = require("@webstudio-is/icons/svg");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+const presetStyle = {
+  button: import_css_normalize.button
+};
+const meta = {
+  category: "hidden",
+  type: "container",
+  invalidAncestors: ["Button"],
+  requiredAncestors: ["Vimeo"],
+  label: "Play Button",
+  icon: import_svg.ButtonElementIcon,
+  presetStyle,
+  states: import_react_sdk.defaultStates
+};
+const propsMeta = {
+  props: import_vimeo_play_button.props
+};

package/lib/cjs/vimeo-preview-image.js

@@ -0,0 +1,40 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vimeo_preview_image_exports = {};
+__export(vimeo_preview_image_exports, {
+  VimeoPreviewImage: () => VimeoPreviewImage
+});
+module.exports = __toCommonJS(vimeo_preview_image_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_image = require("./image");
+var import_vimeo = require("./vimeo");
+const base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
+const VimeoPreviewImage = (0, import_react.forwardRef)(({ src, ...rest }, ref) => {
+  const vimeoContext = (0, import_react.useContext)(import_vimeo.VimeoContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_image.Image,
+    {
+      ...rest,
+      src: String(vimeoContext.previewImageUrl ?? src ?? base64Preview),
+      ref
+    }
+  );
+});
+VimeoPreviewImage.displayName = "VimeoPreviewImage";

package/lib/cjs/vimeo-preview-image.ws.js

@@ -0,0 +1,36 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vimeo_preview_image_ws_exports = {};
+__export(vimeo_preview_image_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(vimeo_preview_image_ws_exports);
+var import_image = require("./image.ws");
+var import_vimeo_preview_image = require("./__generated__/vimeo-preview-image.props");
+const meta = {
+  ...import_image.meta,
+  category: "hidden",
+  label: "Preview Image",
+  requiredAncestors: ["Vimeo"]
+};
+const propsMeta = {
+  props: { ...import_vimeo_preview_image.props, ...import_image.propsOverrides },
+  initialProps: import_image.propsMeta.initialProps
+};

package/lib/cjs/vimeo-spinner.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vimeo_spinner_exports = {};
+__export(vimeo_spinner_exports, {
+  VimeoSpinner: () => VimeoSpinner
+});
+module.exports = __toCommonJS(vimeo_spinner_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_vimeo = require("./vimeo");
+const defaultTag = "div";
+const VimeoSpinner = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const vimeoContext = (0, import_react.useContext)(import_vimeo.VimeoContext);
+    if (vimeoContext.status !== "initialized") {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref });
+  }
+);
+VimeoSpinner.displayName = "VimeoSpinner";

package/lib/cjs/vimeo-spinner.ws.js

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vimeo_spinner_ws_exports = {};
+__export(vimeo_spinner_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(vimeo_spinner_ws_exports);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_vimeo_spinner = require("./__generated__/vimeo-spinner.props");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_svg = require("@webstudio-is/icons/svg");
+const presetStyle = {
+  div: import_css_normalize.div
+};
+const meta = {
+  type: "container",
+  icon: import_svg.BoxIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle,
+  category: "hidden",
+  label: "Spinner",
+  requiredAncestors: ["Vimeo"]
+};
+const propsMeta = {
+  props: import_vimeo_spinner.props
+};

package/lib/cjs/vimeo.js

@@ -0,0 +1,294 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vimeo_exports = {};
+__export(vimeo_exports, {
+  Vimeo: () => Vimeo,
+  VimeoContext: () => VimeoContext
+});
+module.exports = __toCommonJS(vimeo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_colord = require("colord");
+var import_react = require("react");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_shallow_equal = require("shallow-equal");
+const defaultTag = "div";
+const getUrl = (options) => {
+  if (options.url === void 0) {
+    return;
+  }
+  let url;
+  try {
+    const userUrl = new URL(options.url);
+    url = new URL(IFRAME_CDN);
+    url.pathname = `/video${userUrl.pathname}`;
+  } catch {
+  }
+  if (url === void 0) {
+    return;
+  }
+  let option;
+  for (option in options) {
+    const value = options[option];
+    if (option === "url" || value === void 0) {
+      continue;
+    }
+    url.searchParams.append(option, value.toString());
+  }
+  url.searchParams.set("autoplay", "true");
+  if (typeof options.color === "string") {
+    const color = (0, import_colord.colord)(options.color).toHex().replace("#", "");
+    url.searchParams.set("color", color);
+  }
+  if (options.portrait) {
+    url.searchParams.set("title", "true");
+  }
+  if (options.byline) {
+    url.searchParams.set("portrait", "true");
+    url.searchParams.set("title", "true");
+  }
+  return url.toString();
+};
+const preconnect = (url) => {
+  const link = document.createElement("link");
+  link.rel = "preconnect";
+  link.href = url;
+  link.crossOrigin = "true";
+  document.head.append(link);
+};
+let warmed = false;
+const PLAYER_CDN = "https://f.vimeocdn.com";
+const IFRAME_CDN = "https://player.vimeo.com";
+const IMAGE_CDN = "https://i.vimeocdn.com";
+const warmConnections = () => {
+  if (warmed) {
+    return;
+  }
+  preconnect(PLAYER_CDN);
+  preconnect(IFRAME_CDN);
+  preconnect(IMAGE_CDN);
+  warmed = true;
+};
+const createPlayer = (parent, options, callback) => {
+  const url = getUrl(options);
+  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;"
+  );
+  iframe.addEventListener(
+    "load",
+    () => {
+      iframe.style.opacity = "1";
+      callback();
+    },
+    { once: true }
+  );
+  parent.appendChild(iframe);
+  return () => {
+    iframe.parentElement?.removeChild(iframe);
+  };
+};
+const getVideoId = (url) => {
+  try {
+    const parsedUrl = new URL(url);
+    const id = parsedUrl.pathname.split("/")[1];
+    if (id === "" || id == null) {
+      return;
+    }
+    return id;
+  } catch {
+  }
+};
+const loadPreviewImage = async (element, videoUrl) => {
+  const videoId = getVideoId(videoUrl);
+  const apiUrl = `https://vimeo.com/api/v2/video/${videoId}.json`;
+  const response = (await (await fetch(apiUrl)).json())[0];
+  const thumbnail = response.thumbnail_large;
+  const imgId = thumbnail.substr(thumbnail.lastIndexOf("/") + 1).split("_")[0];
+  const imageUrl = new URL(IMAGE_CDN);
+  imageUrl.pathname = `/video/${imgId}.webp`;
+  imageUrl.searchParams.append("mw", "1100");
+  imageUrl.searchParams.append("mh", "619");
+  imageUrl.searchParams.append("q", "70");
+  return imageUrl;
+};
+const useVimeo = ({
+  options,
+  renderer,
+  showPreview
+}) => {
+  const [playerStatus, setPlayerStatus] = (0, import_react.useState)("initial");
+  const elementRef = (0, import_react.useRef)(null);
+  const [previewImageUrl, setPreviewImageUrl] = (0, import_react.useState)();
+  (0, import_react.useEffect)(() => {
+    setPlayerStatus(
+      options.autoplay && renderer !== "canvas" ? "initialized" : "initial"
+    );
+  }, [options.autoplay, renderer]);
+  (0, import_react.useEffect)(() => {
+    if (elementRef.current === null || playerStatus === "ready" || options.url === void 0) {
+      return;
+    }
+    if (showPreview) {
+      loadPreviewImage(elementRef.current, options.url).then(
+        setPreviewImageUrl
+      );
+      return;
+    }
+    setPreviewImageUrl(void 0);
+  }, [renderer, showPreview, options.url, playerStatus]);
+  const optionsRef = (0, import_react.useRef)(options);
+  const stableOptions = (0, import_react.useMemo)(() => {
+    if ((0, import_shallow_equal.shallowEqual)(options, optionsRef.current) === false) {
+      optionsRef.current = options;
+    }
+    return optionsRef.current;
+  }, [options]);
+  (0, import_react.useEffect)(() => {
+    if (elementRef.current === null || playerStatus === "initial") {
+      return;
+    }
+    return createPlayer(elementRef.current, stableOptions, () => {
+      setPlayerStatus("ready");
+    });
+  }, [stableOptions, playerStatus]);
+  return { previewImageUrl, playerStatus, setPlayerStatus, elementRef };
+};
+const Vimeo = (0, import_react.forwardRef)(
+  ({
+    url,
+    autoplay = false,
+    autopause = true,
+    backgroundMode = false,
+    showByline = false,
+    showControls = true,
+    doNotTrack = false,
+    keyboard = true,
+    loop = false,
+    muted = false,
+    pip = false,
+    playsinline = true,
+    showPortrait = true,
+    quality = "auto",
+    responsive = true,
+    speed = false,
+    showTitle = false,
+    transparent = true,
+    showPreview = false,
+    autopip,
+    controlsColor,
+    interactiveParams,
+    texttrack,
+    children,
+    ...rest
+  }, ref) => {
+    const { renderer } = (0, import_react.useContext)(import_react_sdk.ReactSdkContext);
+    const { previewImageUrl, playerStatus, setPlayerStatus, elementRef } = useVimeo({
+      renderer,
+      showPreview,
+      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
+      }
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      VimeoContext.Provider,
+      {
+        value: {
+          status: playerStatus,
+          previewImageUrl,
+          onInitPlayer() {
+            if (renderer !== "canvas") {
+              setPlayerStatus("initialized");
+            }
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...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__ */ (0, import_jsx_runtime.jsx)(EmptyState, {}) : children
+          }
+        )
+      }
+    );
+  }
+);
+Vimeo.displayName = "Vimeo";
+const EmptyState = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "1.2em"
+      },
+      children: "Open the Properties panel and paste a video URL, e.g. https://vimeo.com/831343124."
+    }
+  );
+};
+const VimeoContext = (0, import_react.createContext)({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onInitPlayer: () => {
+  },
+  status: "initial"
+});