@webstudio-is/sdk-components-react 0.195.0 → 0.197.0

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,3 @@
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

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

@@ -1,16 +1,16 @@
-import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { props as o } from "./__generated__/vimeo-play-button.props.js";
-import { ButtonElementIcon as e } from "@webstudio-is/icons/svg";
-import { button as n } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { ButtonElementIcon as o } from "@webstudio-is/icons/svg";
+import { button as e } from "@webstudio-is/sdk/normalize.css";
+import { props as n } from "./__generated__/vimeo-play-button.props.js";
 const r = {
-  button: n
+  button: e
 }, p = {
   category: "hidden",
   type: "container",
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "Vimeo" }
+      component: { $in: ["Vimeo", "YouTube"] }
     },
     {
       relation: "ancestor",
@@ -18,11 +18,11 @@ const r = {
     }
   ],
   label: "Play Button",
-  icon: e,
+  icon: o,
   presetStyle: r,
   states: t
 }, c = {
-  props: o,
+  props: n,
   initialProps: ["id", "className"]
 };
 export {

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

@@ -1,19 +1,27 @@
-import "@webstudio-is/react-sdk";
-import { meta as o, propsOverrides as r, propsMeta as e } from "./image.ws.js";
-import { props as t } from "./__generated__/vimeo-preview-image.props.js";
+import { meta as e, propsMeta as o } from "./image.ws.js";
+import { props as r } from "./__generated__/vimeo-preview-image.props.js";
 const i = {
-  ...o,
+  ...e,
   category: "hidden",
   label: "Preview Image",
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Vimeo" }
+    component: { $in: ["Vimeo", "YouTube"] }
   }
-}, m = {
-  props: { ...t, ...r },
-  initialProps: e.initialProps
+}, p = {
+  props: {
+    ...r,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1
+    }
+  },
+  initialProps: o.initialProps
 };
 export {
   i as meta,
-  m as propsMeta
+  p as propsMeta
 };

package/lib/vimeo-spinner.ws.js

@@ -1,22 +1,22 @@
-import { defaultStates as o } from "@webstudio-is/react-sdk";
-import { props as t } from "./__generated__/vimeo-spinner.props.js";
-import { div as e } from "@webstudio-is/sdk/normalize.css";
-import { BoxIcon as r } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { BoxIcon as e } from "@webstudio-is/icons/svg";
+import { props as r } from "./__generated__/vimeo-spinner.props.js";
 const n = {
-  div: e
+  div: t
 }, m = {
   type: "container",
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Vimeo" }
+    component: { $in: ["Vimeo", "YouTube"] }
   },
-  icon: r,
+  icon: e,
   states: o,
   presetStyle: n,
   category: "hidden",
   label: "Spinner"
 }, c = {
-  props: t,
+  props: r,
   initialProps: ["id", "className"]
 };
 export {

package/lib/vimeo.js

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

package/lib/vimeo.template.js

@@ -0,0 +1,93 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { SpinnerIcon as r, PlayIcon as a } from "@webstudio-is/icons/svg";
+import { $ as e, css as o } from "@webstudio-is/template";
+const p = {
+  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__ */ i(
+    e.Vimeo,
+    {
+      "ws:style": o`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `,
+      children: [
+        /* @__PURE__ */ t(
+          e.VimeoPreviewImage,
+          {
+            "ws:style": o`
+          position: absolute;
+          object-fit: cover;
+          object-position: cover;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        `,
+            alt: "Vimeo video preview image",
+            sizes: "100vw",
+            optimize: !0
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.VimeoSpinner,
+          {
+            "ws:label": "Spinner",
+            "ws:style": o`
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 70px;
+          height: 70px;
+          margin-top: -35px;
+          margin-left: -35px;
+        `,
+            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.VimeoPlayButton,
+          {
+            "ws:style": o`
+          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__ */ t(
+              e.Box,
+              {
+                "ws:label": "Play Icon",
+                "ws:style": o`
+            width: 60px;
+            height: 60px;
+          `,
+                "aria-hidden": !0,
+                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: a })
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  p as meta
+};