@webstudio-is/sdk-components-react 0.94.0 → 0.96.0

package/lib/vimeo.js

@@ -1,279 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import { colord } from "colord";
-import {
-  forwardRef,
-  useState,
-  useRef,
-  useEffect,
-  useContext,
-  createContext,
-  useMemo
-} from "react";
-import { ReactSdkContext } from "@webstudio-is/react-sdk";
-import { shallowEqual } from "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 = 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] = useState("initial");
-  const elementRef = useRef(null);
-  const [previewImageUrl, setPreviewImageUrl] = useState();
-  useEffect(() => {
-    setPlayerStatus(
-      options.autoplay && renderer !== "canvas" ? "initialized" : "initial"
-    );
-  }, [options.autoplay, renderer]);
-  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 = useRef(options);
-  const stableOptions = useMemo(() => {
-    if (shallowEqual(options, optionsRef.current) === false) {
-      optionsRef.current = options;
-    }
-    return optionsRef.current;
-  }, [options]);
-  useEffect(() => {
-    if (elementRef.current === null || playerStatus === "initial") {
-      return;
-    }
-    return createPlayer(elementRef.current, stableOptions, () => {
-      setPlayerStatus("ready");
-    });
-  }, [stableOptions, playerStatus]);
-  return { previewImageUrl, playerStatus, setPlayerStatus, elementRef };
-};
-export const Vimeo = 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 } = useContext(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__ */ jsx(
-      VimeoContext.Provider,
-      {
-        value: {
-          status: playerStatus,
-          previewImageUrl,
-          onInitPlayer() {
-            if (renderer !== "canvas") {
-              setPlayerStatus("initialized");
-            }
-          }
-        },
-        children: /* @__PURE__ */ 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__ */ jsx(EmptyState, {}) : children
-          }
-        )
-      }
-    );
-  }
-);
-Vimeo.displayName = "Vimeo";
-const EmptyState = () => {
-  return /* @__PURE__ */ 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.'
-    }
-  );
-};
-export const VimeoContext = createContext({
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onInitPlayer: () => {
-  },
-  status: "initial"
-});

package/lib/vimeo.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { Vimeo as VimeoPrimitive } from "./vimeo";
-export default {
-  title: "Components/Vimeo",
-  component: VimeoPrimitive
-};
-export const Vimeo = {
-  args: {
-    style: { minHeight: 20, outline: "1px solid black" }
-  }
-};

package/lib/vimeo.ws.js

@@ -1,327 +0,0 @@
-"use strict";
-import { PlayIcon, SpinnerIcon, VimeoIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/vimeo.props";
-import { Vimeo } from "./vimeo";
-const presetStyle = {
-  div
-};
-export 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: VimeoIcon,
-  states: 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: 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: PlayIcon
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-const initialProps = [
-  "id",
-  "url",
-  "quality",
-  "showPreview",
-  "autoplay",
-  "backgroundMode",
-  "doNotTrack",
-  "loop",
-  "muted",
-  "showPortrait",
-  "showByline",
-  "showTitle",
-  "showControls",
-  "controlsColor"
-];
-export const propsMeta = {
-  props,
-  initialProps
-};