@webstudio-is/sdk-components-react 0.0.0-017f1bd

package/lib/types/youtube.d.ts

@@ -0,0 +1,143 @@
+import { type ComponentProps } from "react";
+/**
+ * Options for configuring the YouTube player parameters.
+ * https://developers.google.com/youtube/player_parameters
+ */
+type YouTubePlayerParameters = {
+    /**
+     * Whether the video should autoplay.
+     * Some browsers require the `muted` parameter to be set to `true` for autoplay to work.
+     * @default false
+     */
+    autoplay?: boolean;
+    /**
+     * Whether the video should start muted.
+     * Useful for enabling autoplay in browsers that require videos to be muted.
+     * Original parameter: `mute`
+     *@default false
+     */
+    muted?: boolean;
+    /**
+     * Whether to show player controls.
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * Whether to show related videos at the end.
+     * Original parameter: `rel`
+     * @default true
+     */
+    showRelatedVideos?: boolean;
+    /**
+     * Whether to enable keyboard controls.
+     * @default true
+     */
+    keyboard?: boolean;
+    /**
+     * Whether the video should loop continuously.
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Whether to play inline on mobile (not fullscreen).
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Whether to allow fullscreen mode.
+     * Original parameter: `fs`
+     * @default true
+     */
+    allowFullscreen?: boolean;
+    /**
+     * Whether captions should be shown by default.
+     * Original parameter: `cc_load_policy`
+     * @default false
+     */
+    showCaptions?: boolean;
+    /**
+     * Whether to show annotations on the video.
+     * Original parameter: `iv_load_policy`
+     * @default true
+     */
+    showAnnotations?: boolean;
+    /**
+     * Start time of the video in seconds.
+     * Original parameter: `start`
+     */
+    startTime?: number;
+    /**
+     * End time of the video in seconds.
+     * Original parameter: `end`
+     */
+    endTime?: number;
+    /**
+     * Whether to disable keyboard controls.
+     * Original parameter: `disablekb`
+     * @default false
+     */
+    disableKeyboard?: boolean;
+    /**
+     * Referrer URL for tracking purposes.
+     * Original parameter: `widget_referrer`
+     */
+    referrer?: string;
+    /**
+     * Type of playlist to load.
+     */
+    listType?: "playlist" | "user_uploads";
+    /**
+     * ID of the playlist to load.
+     * Original parameter: `list`
+     */
+    listId?: string;
+    /**
+     * Your domain for API compliance (e.g., `https://yourdomain.com`).
+     */
+    origin?: string;
+    /**
+     * Specifies the default language that the player will use to display captions.
+     * The value is an ISO 639-1 two-letter language code.
+     * Original parameter: `cc_lang_pref`
+     */
+    captionLanguage?: string;
+    /**
+     * Sets the player's interface language. The value is an ISO 639-1 two-letter language code or a fully specified locale.
+     * Original parameter: `hl`
+     */
+    language?: string;
+    /**
+     * Specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen.
+     * Valid values are 'red' and 'white'.
+     */
+    color?: "red" | "white";
+    /**
+     * This parameter specifies a comma-separated list of video IDs to play
+     */
+    playlist?: string;
+};
+type YouTubePlayerOptions = {
+    /** The YouTube video URL or ID */
+    url?: string;
+    showPreview?: boolean;
+    /**
+     * The Privacy Enhanced Mode of the YouTube embedded player prevents the use of views of embedded YouTube content from influencing the viewer’s browsing experience on YouTube.
+     * https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode
+     * @default true
+     */
+    privacyEnhancedMode?: boolean;
+} & YouTubePlayerParameters & {
+    /** Loading strategy for iframe */
+    loading?: "eager" | "lazy";
+};
+declare const defaultTag = "div";
+type Props = Omit<ComponentProps<typeof defaultTag>, keyof YouTubePlayerOptions> & YouTubePlayerOptions & {
+    /**
+     * The `title` attribute for the iframe.
+     * Improves accessibility by providing a brief description of the video content for screen readers.
+     * Example: "Video about web development tips".
+     */
+    title?: string | undefined;
+};
+export declare const YouTube: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/types/youtube.template.d.ts

@@ -0,0 +1,2 @@
+import { type TemplateMeta } from "@webstudio-is/template";
+export declare const meta: TemplateMeta;

package/lib/types/youtube.ws.d.ts

@@ -0,0 +1,2 @@
+import type { WsComponentMeta } from "@webstudio-is/sdk";
+export declare const meta: WsComponentMeta;

package/lib/video.js

@@ -0,0 +1,53 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as y, useId as V, useContext as N, useEffect as x } from "react";
+import { ReactSdkContext as I } from "@webstudio-is/react-sdk/runtime";
+const c = "data-ws-video-id", S = {
+  HAVE_METADATA: 1
+}, _ = y(
+  ({
+    $progress: r,
+    $visible: n,
+    $timeline: d,
+    $webstudio$canvasOnly$assetId: w,
+    children: l,
+    src: o,
+    ...b
+  }, m) => {
+    const u = V(), A = {
+      [c]: u
+    }, { videoLoader: f } = N(I), T = o && f ? f({ src: o }) : o;
+    return x(() => {
+      if (r === void 0 || n === void 0)
+        return;
+      const e = document.querySelector(`[${c}="${u}"]`);
+      if (e === null || !(e instanceof HTMLVideoElement))
+        return;
+      if (e.play().catch(() => {
+      }), e.pause(), d)
+        return r.subscribe((t) => {
+          if (e.readyState < S.HAVE_METADATA || (e.paused || e.pause(), e.seeking))
+            return;
+          let s = e.duration;
+          Number.isNaN(s) || (Number.isFinite(s) || (s = 60), e.currentTime = (t ?? 0) * s);
+        });
+      let i = !1, a = !1;
+      const v = n.subscribe((t) => {
+        a = t, a === !1 && i === !1 && !e.loop && (e.currentTime = 0);
+      }), E = r.subscribe((t) => {
+        if (i && (t === void 0 || t === 0 || t === 1)) {
+          i = !1, e.pause(), a === !1 && i === !1 && !e.loop && (e.currentTime = 0);
+          return;
+        }
+        i || (i = !0, e.ended || e.play().catch(() => {
+        }));
+      });
+      return () => {
+        E(), v();
+      };
+    }, [r, d, n, u]), /* @__PURE__ */ p("video", { src: T, ...b, ...A, ref: m, children: l });
+  }
+);
+_.displayName = "Video";
+export {
+  _ as Video
+};

package/lib/video.ws.js

@@ -0,0 +1,44 @@
+import { VideoIcon as e } from "@webstudio-is/icons/svg";
+import { props as o } from "./__generated__/video.props.js";
+const i = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
+  presetStyle: {
+    video: [
+      {
+        property: "max-width",
+        value: { type: "unit", unit: "%", value: 100 }
+      }
+    ]
+  },
+  initialProps: [
+    "id",
+    "class",
+    "width",
+    "height",
+    "src",
+    "autoPlay",
+    "controls",
+    "loop",
+    "muted",
+    "preload",
+    "playsInline"
+  ],
+  props: {
+    ...o,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1,
+      accept: ".mp4,.webm,.mpg,.mpeg,.mov"
+    }
+  }
+};
+export {
+  i as meta
+};

package/lib/vimeo-play-button.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as r, useContext as a, useCallback as m } from "react";
+import s from "await-interaction-response";
+import { Button as l } from "./button.js";
+import { VideoContext as c } from "./shared/video.js";
+const f = r(
+  (o, i) => {
+    const t = a(c), n = m(async () => {
+      await s(), t.onInitPlayer();
+    }, [t]);
+    if (t.status === "initial")
+      return /* @__PURE__ */ e(l, { ...o, onClick: n, ref: i });
+  }
+);
+f.displayName = "VimeoPlayButton";
+export {
+  f as VimeoPlayButton
+};

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

@@ -0,0 +1,18 @@
+import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
+import { button as o } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/vimeo-play-button.props.js";
+const c = {
+  category: "hidden",
+  label: "Play Button",
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { button: o },
+  initialProps: ["id", "class"],
+  props: e
+};
+export {
+  c as meta
+};

package/lib/vimeo-preview-image.js

@@ -0,0 +1,19 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m, useContext as t } from "react";
+import { Image as a } from "./image.js";
+import { VideoContext as g } from "./shared/video.js";
+const n = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=", s = m(({ src: A, ...e }, o) => {
+  const r = t(g);
+  return /* @__PURE__ */ i(
+    a,
+    {
+      ...e,
+      src: String(r.previewImageUrl ?? A ?? n),
+      ref: o
+    }
+  );
+});
+s.displayName = "VimeoPreviewImage";
+export {
+  s as VimeoPreviewImage
+};

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

@@ -0,0 +1,25 @@
+import { meta as e } from "./image.ws.js";
+import { props as r } from "./__generated__/vimeo-preview-image.props.js";
+const i = {
+  ...e,
+  category: "hidden",
+  label: "Preview Image",
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  initialProps: e.initialProps,
+  props: {
+    ...r,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1
+    }
+  }
+};
+export {
+  i as meta
+};

package/lib/vimeo-spinner.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as r, useContext as i } from "react";
+import { VideoContext as n } from "./shared/video.js";
+const m = r(
+  (o, t) => {
+    if (i(n).status === "loading")
+      return /* @__PURE__ */ e("div", { ...o, ref: t });
+  }
+);
+m.displayName = "VimeoSpinner";
+export {
+  m as VimeoSpinner
+};

package/lib/vimeo-spinner.ws.js

@@ -0,0 +1,18 @@
+import { div as o } from "@webstudio-is/sdk/normalize.css";
+import { BoxIcon as e } from "@webstudio-is/icons/svg";
+import { props as n } from "./__generated__/vimeo-spinner.props.js";
+const c = {
+  icon: e,
+  category: "hidden",
+  label: "Spinner",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div: o },
+  initialProps: ["id", "class"],
+  props: n
+};
+export {
+  c as meta
+};

package/lib/vimeo.js

@@ -0,0 +1,215 @@
+import { jsx as i, jsxs as B, Fragment as D } from "react/jsx-runtime";
+import { colord as q } from "colord";
+import { forwardRef as z, useState as y, useContext as T, useRef as G, useEffect as v } from "react";
+import { ReactSdkContext as H } from "@webstudio-is/react-sdk/runtime";
+import { VideoContext as Y, requestFullscreen as J } from "./shared/video.js";
+const K = (t) => {
+  if (t.url === void 0)
+    return;
+  let e;
+  try {
+    const o = new URL(t.url);
+    e = new URL(S), e.pathname = `/video${o.pathname}`;
+  } catch {
+  }
+  if (e === void 0)
+    return;
+  const a = {
+    showPortrait: "portrait",
+    showByline: "byline",
+    showTitle: "title",
+    controlsColor: "color",
+    showControls: "controls",
+    interactiveParams: "interactive_params",
+    backgroundMode: "background",
+    doNotTrack: "dnt"
+  };
+  let r;
+  for (r in t) {
+    const o = t[r];
+    if (r === "url" || o === void 0)
+      continue;
+    const s = a[r] ?? r;
+    e.searchParams.append(s, o.toString());
+  }
+  if (e.searchParams.set("autoplay", "true"), typeof t.controlsColor == "string") {
+    const o = q(t.controlsColor).toHex().replace("#", "");
+    e.searchParams.set("color", o);
+  }
+  return t.showPortrait && e.searchParams.set("title", "true"), t.showByline && (e.searchParams.set("portrait", "true"), e.searchParams.set("title", "true")), e.toString();
+}, w = (t) => {
+  const e = document.createElement("link");
+  e.rel = "preconnect", e.href = t, e.crossOrigin = "true", document.head.appendChild(e);
+};
+let U = !1;
+const Q = "https://f.vimeocdn.com", S = "https://player.vimeo.com", L = "https://i.vimeocdn.com", W = () => {
+  U || window.matchMedia("(hover: none)").matches || (w(Q), w(S), w(L), U = !0);
+}, X = (t) => {
+  try {
+    const a = new URL(t).pathname.split("/")[2];
+    return a === "" || a == null ? void 0 : a;
+  } catch {
+  }
+}, Z = async (t) => {
+  const a = `https://vimeo.com/api/v2/video/${X(t)}.json`, o = (await (await fetch(a)).json())[0].thumbnail_large, s = o.substr(o.lastIndexOf("/") + 1).split("_")[0], n = new URL(L);
+  return n.pathname = `/video/${s}.webp`, n.searchParams.append("mw", "1100"), n.searchParams.append("mh", "619"), n.searchParams.append("q", "70"), n;
+}, ee = () => /* @__PURE__ */ i(
+  "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.'
+  }
+), te = ({
+  title: t,
+  status: e,
+  loading: a,
+  videoUrl: r,
+  previewImageUrl: o,
+  autoplay: s,
+  renderer: n,
+  showPreview: m,
+  playsinline: f,
+  onStatusChange: c,
+  onPreviewImageUrlChange: l
+}) => {
+  const [u, h] = y(0), d = G(null);
+  if (v(() => {
+    s && n !== "canvas" && e === "initial" && c("loading");
+  }, [s, e, n, c]), v(() => {
+    n !== "canvas" && W();
+  }, [n]), v(() => {
+    if (r !== void 0) {
+      if (m === !1) {
+        l(void 0);
+        return;
+      }
+      o === void 0 && Z(r).then(l).catch(() => {
+        console.error(`Could not load preview image for ${r}`);
+      });
+    }
+  }, [l, m, r, o]), !(n === "canvas" || e === "initial"))
+    return /* @__PURE__ */ i(
+      "iframe",
+      {
+        ref: d,
+        title: t,
+        src: r,
+        loading: a,
+        allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;",
+        allowFullScreen: !0,
+        style: {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          opacity: u,
+          transition: "opacity 1s",
+          border: "none"
+        },
+        onLoad: () => {
+          c("ready"), h(1), d.current && !f && !s && J(d.current);
+        }
+      }
+    );
+}, re = z(
+  ({
+    url: t,
+    loading: e = "lazy",
+    autoplay: a = !1,
+    autopause: r = !0,
+    showByline: o = !1,
+    showControls: s = !0,
+    doNotTrack: n = !1,
+    keyboard: m = !0,
+    loop: f = !1,
+    muted: c = !1,
+    pip: l = !1,
+    playsinline: u = !1,
+    showPortrait: h = !0,
+    quality: d = "auto",
+    responsive: k = !0,
+    speed: E = !1,
+    showTitle: _ = !1,
+    transparent: j = !0,
+    showPreview: M = !1,
+    autopip: N,
+    controlsColor: O,
+    interactiveParams: V,
+    texttrack: F,
+    children: $,
+    ...g
+  }, p) => {
+    const [P, C] = y("initial"), [I, A] = y(), { renderer: R } = T(H), b = K({
+      url: t,
+      autoplay: a,
+      autopause: r,
+      showControls: s,
+      controlsColor: O,
+      doNotTrack: n,
+      interactiveParams: V,
+      keyboard: m,
+      loop: f,
+      muted: c,
+      pip: l,
+      playsinline: u,
+      quality: d,
+      responsive: k,
+      speed: E,
+      texttrack: F,
+      showTitle: _,
+      transparent: j,
+      showPortrait: h,
+      autopip: N
+    });
+    return /* @__PURE__ */ i(
+      Y.Provider,
+      {
+        value: {
+          status: P,
+          previewImageUrl: I,
+          onInitPlayer() {
+            R !== "canvas" && C("loading");
+          }
+        },
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            ...g,
+            ref: (x) => {
+              p !== null && (typeof p == "function" ? p(x) : p.current = x);
+            },
+            children: b === void 0 ? /* @__PURE__ */ i(ee, {}) : /* @__PURE__ */ B(D, { children: [
+              $,
+              /* @__PURE__ */ i(
+                te,
+                {
+                  title: g.title,
+                  autoplay: a,
+                  playsinline: u,
+                  videoUrl: b,
+                  previewImageUrl: I,
+                  loading: e,
+                  showPreview: M,
+                  renderer: R,
+                  status: P,
+                  onStatusChange: C,
+                  onPreviewImageUrlChange: A
+                }
+              )
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+re.displayName = "Vimeo";
+export {
+  re as Vimeo
+};

package/lib/vimeo.template.js

@@ -0,0 +1,94 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { SpinnerIcon as r, PlayIcon as n } from "@webstudio-is/icons/svg";
+import { $ as t, css as i, ws as a } from "@webstudio-is/template";
+const d = {
+  category: "media",
+  order: 1,
+  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
+  template: /* @__PURE__ */ o(
+    t.Vimeo,
+    {
+      "ws:style": i`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `,
+      children: [
+        /* @__PURE__ */ e(
+          t.VimeoPreviewImage,
+          {
+            "ws:style": i`
+          position: absolute;
+          object-fit: cover;
+          object-position: center;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        `,
+            alt: "Vimeo video preview image",
+            sizes: "100vw",
+            optimize: !0
+          }
+        ),
+        /* @__PURE__ */ e(
+          t.VimeoSpinner,
+          {
+            "ws:label": "Spinner",
+            "ws:style": i`
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 70px;
+          height: 70px;
+          margin-top: -35px;
+          margin-left: -35px;
+        `,
+            children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+          }
+        ),
+        /* @__PURE__ */ e(
+          t.VimeoPlayButton,
+          {
+            "ws:style": i`
+          position: absolute;
+          width: 140px;
+          height: 80px;
+          top: 50%;
+          left: 50%;
+          margin-top: -40px;
+          margin-left: -70px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-style: none;
+          border-radius: 5px;
+          cursor: pointer;
+          background-color: rgb(18, 18, 18);
+          color: rgb(255, 255, 255);
+          &:hover {
+            background-color: rgb(0, 173, 239);
+          }
+        `,
+            "aria-label": "Play button",
+            children: /* @__PURE__ */ e(
+              a.element,
+              {
+                "ws:tag": "div",
+                "ws:label": "Play Icon",
+                "ws:style": i`
+            width: 60px;
+            height: 60px;
+          `,
+                "aria-hidden": !0,
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Play SVG", code: n })
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  d as meta
+};