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

package/lib/cjs/{checkbox-field.js → vimeo-spinner.js}

@@ -16,14 +16,22 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var checkbox_field_exports = {};
-__export(checkbox_field_exports, {
-  CheckboxField: () => CheckboxField,
-  defaultTag: () => defaultTag
+var vimeo_spinner_exports = {};
+__export(vimeo_spinner_exports, {
+  VimeoSpinner: () => VimeoSpinner
 });
-module.exports = __toCommonJS(checkbox_field_exports);
+module.exports = __toCommonJS(vimeo_spinner_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-const defaultTag = "label";
-const CheckboxField = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...props, ref }));
-CheckboxField.displayName = "CheckboxField";
+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/{checkbox-field.ws.js → vimeo-spinner.ws.js}

@@ -16,47 +16,28 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var checkbox_field_ws_exports = {};
-__export(checkbox_field_ws_exports, {
+var vimeo_spinner_ws_exports = {};
+__export(vimeo_spinner_ws_exports, {
   meta: () => meta,
   propsMeta: () => propsMeta
 });
-module.exports = __toCommonJS(checkbox_field_ws_exports);
-var import_svg = require("@webstudio-is/icons/svg");
+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_checkbox_field = require("./__generated__/checkbox-field.props");
+var import_svg = require("@webstudio-is/icons/svg");
 const presetStyle = {
-  label: [
-    ...import_css_normalize.label,
-    { property: "display", value: { type: "keyword", value: "flex" } }
-  ]
+  div: import_css_normalize.div
 };
 const meta = {
-  category: "forms",
   type: "container",
-  label: "Checkbox",
-  icon: import_svg.CheckboxCheckedIcon,
+  icon: import_svg.BoxIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "CheckboxField",
-      children: [
-        { type: "instance", component: "Checkbox", children: [] },
-        {
-          type: "instance",
-          component: "TextBlock",
-          label: "Checkbox Label",
-          props: [],
-          children: [{ type: "text", value: "Checkbox" }]
-        }
-      ]
-    }
-  ]
+  category: "hidden",
+  label: "Spinner",
+  requiredAncestors: ["Vimeo"]
 };
 const propsMeta = {
-  props: import_checkbox_field.props,
-  initialProps: []
+  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"
+});