@webstudio-is/sdk-components-react 0.91.0 → 0.92.0

package/lib/cjs/vimeo.js

@@ -1,294 +0,0 @@
-"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 "Settings" 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"
-});

package/lib/cjs/vimeo.ws.js

@@ -1,348 +0,0 @@
-"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_ws_exports = {};
-__export(vimeo_ws_exports, {
-  meta: () => meta,
-  propsMeta: () => propsMeta
-});
-module.exports = __toCommonJS(vimeo_ws_exports);
-var import_svg = require("@webstudio-is/icons/svg");
-var import_react_sdk = require("@webstudio-is/react-sdk");
-var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
-var import_vimeo = require("./__generated__/vimeo.props");
-var import_vimeo2 = require("./vimeo");
-const presetStyle = {
-  div: import_css_normalize.div
-};
-const meta = {
-  category: "media",
-  type: "container",
-  label: "Vimeo",
-  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
-  order: 1,
-  icon: import_svg.VimeoIcon,
-  states: import_react_sdk.defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Vimeo",
-      styles: [
-        {
-          property: "position",
-          value: { type: "keyword", value: "relative" }
-        },
-        {
-          property: "aspectRatio",
-          value: { type: "keyword", value: "640/360" }
-        },
-        {
-          property: "width",
-          value: { type: "unit", value: 100, unit: "%" }
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "VimeoPreviewImage",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "objectFit",
-              value: { type: "keyword", value: "cover" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "objectPosition",
-              value: { type: "keyword", value: "cover" }
-            }
-          ],
-          children: [],
-          props: [
-            {
-              type: "string",
-              name: "alt",
-              value: "Vimeo video preview image"
-            },
-            {
-              type: "string",
-              name: "sizes",
-              value: "100vw"
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "Box",
-          label: "Spinner",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -35, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -35, unit: "px" }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Spinner SVG",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: import_svg.SpinnerIcon
-                }
-              ],
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoPlayButton",
-          props: [
-            {
-              type: "string",
-              name: "aria-label",
-              value: "Play button"
-            }
-          ],
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 140, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 80, unit: "px" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -40, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -70, unit: "px" }
-            },
-            {
-              property: "display",
-              value: { type: "keyword", value: "flex" }
-            },
-            {
-              property: "alignItems",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "justifyContent",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "borderTopStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderRightStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderBottomStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderLeftStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "cursor",
-              value: { type: "keyword", value: "pointer" }
-            },
-            {
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 18,
-                g: 18,
-                b: 18,
-                alpha: 1
-              }
-            },
-            {
-              property: "color",
-              value: {
-                type: "rgb",
-                r: 255,
-                g: 255,
-                b: 255,
-                alpha: 1
-              }
-            },
-            {
-              state: ":hover",
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 0,
-                g: 173,
-                b: 239,
-                alpha: 1
-              }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "Box",
-              label: "Play Icon",
-              styles: [
-                {
-                  property: "width",
-                  value: { type: "unit", value: 60, unit: "px" }
-                },
-                {
-                  property: "height",
-                  value: { type: "unit", value: 60, unit: "px" }
-                }
-              ],
-              props: [
-                {
-                  type: "string",
-                  name: "aria-hidden",
-                  value: "true"
-                }
-              ],
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Play SVG",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: import_svg.PlayIcon
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-const initialProps = [
-  "id",
-  "url",
-  "quality",
-  "showPreview",
-  "autoplay",
-  "backgroundMode",
-  "doNotTrack",
-  "loop",
-  "muted",
-  "showPortrait",
-  "showByline",
-  "showTitle",
-  "showControls",
-  "controlsColor"
-];
-const propsMeta = {
-  props: import_vimeo.props,
-  initialProps
-};