@webstudio-is/sdk-components-react 0.210.0 → 0.213.0

package/lib/video.js

@@ -0,0 +1,46 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as m, useId as V, useEffect as _ } from "react";
+const a = "data-ws-video-id", H = {
+  HAVE_NOTHING: 0,
+  HAVE_METADATA: 1,
+  HAVE_CURRENT_DATA: 2,
+  HAVE_FUTURE_DATA: 3,
+  HAVE_ENOUGH_DATA: 4
+}, N = m(({ $progress: r, $visible: n, $timeline: f, children: d, ...c }, A) => {
+  const s = V(), l = {
+    [a]: s
+  };
+  return _(() => {
+    if (r === void 0 || n === void 0)
+      return;
+    const e = document.querySelector(`[${a}="${s}"]`);
+    if (e === null || !(e instanceof HTMLVideoElement))
+      return;
+    if (e.play().catch(() => {
+    }), e.pause(), f)
+      return r.subscribe((i) => {
+        if (e.readyState < H.HAVE_METADATA || (e.paused || e.pause(), e.seeking))
+          return;
+        let u = e.duration;
+        Number.isNaN(u) || (Number.isFinite(u) || (u = 60), e.currentTime = (i ?? 0) * u);
+      });
+    let t = !1, o = !1;
+    const T = n.subscribe((i) => {
+      o = i, o === !1 && t === !1 && !e.loop && (e.currentTime = 0);
+    }), E = r.subscribe((i) => {
+      if (t && (i === void 0 || i === 0 || i === 1)) {
+        t = !1, e.pause(), o === !1 && t === !1 && !e.loop && (e.currentTime = 0);
+        return;
+      }
+      t || (t = !0, e.ended || e.play().catch(() => {
+      }));
+    });
+    return () => {
+      E(), T();
+    };
+  }, [r, f, n, s]), /* @__PURE__ */ b("video", { ...c, ...l, ref: A, children: d });
+});
+N.displayName = "Video";
+export {
+  N as Video
+};

package/lib/video.ws.js

@@ -0,0 +1,34 @@
+import { VideoIcon as o } from "@webstudio-is/icons/svg";
+import "@webstudio-is/sdk";
+import { props as t } from "./__generated__/video.props.js";
+const r = {
+  type: "control",
+  icon: o,
+  presetStyle: {
+    video: [
+      {
+        property: "max-width",
+        value: { type: "unit", unit: "%", value: 100 }
+      }
+    ]
+  }
+}, a = {
+  props: t,
+  initialProps: [
+    "id",
+    "className",
+    "width",
+    "height",
+    "src",
+    "autoPlay",
+    "controls",
+    "loop",
+    "muted",
+    "preload",
+    "playsInline"
+  ]
+};
+export {
+  r as meta,
+  a as propsMeta
+};

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

@@ -2,30 +2,24 @@ 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: e
-}, p = {
+const s = {
   category: "hidden",
   type: "container",
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $in: ["Vimeo", "YouTube"] }
-    },
-    {
-      relation: "ancestor",
-      component: { $neq: "Button" }
-    }
-  ],
   label: "Play Button",
   icon: o,
-  presetStyle: r,
-  states: t
+  states: t,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    button: e
+  }
 }, c = {
   props: n,
   initialProps: ["id", "className"]
 };
 export {
-  p as meta,
+  s as meta,
   c as propsMeta
 };

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

@@ -1,14 +1,14 @@
 import { meta as e, propsMeta as o } from "./image.ws.js";
 import { props as r } from "./__generated__/vimeo-preview-image.props.js";
-const i = {
+const a = {
   ...e,
   category: "hidden",
   label: "Preview Image",
-  constraints: {
-    relation: "ancestor",
-    component: { $in: ["Vimeo", "YouTube"] }
+  contentModel: {
+    category: "none",
+    children: ["empty"]
   }
-}, p = {
+}, i = {
   props: {
     ...r,
     // Automatically generated props don't have the right control.
@@ -22,6 +22,6 @@ const i = {
   initialProps: o.initialProps
 };
 export {
-  i as meta,
-  p as propsMeta
+  a as meta,
+  i as propsMeta
 };

package/lib/vimeo-spinner.ws.js

@@ -1,25 +1,25 @@
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { div as o } 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: t
-}, m = {
+const s = {
   type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $in: ["Vimeo", "YouTube"] }
-  },
   icon: e,
-  states: o,
-  presetStyle: n,
+  states: t,
   category: "hidden",
-  label: "Spinner"
+  label: "Spinner",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    div: o
+  }
 }, c = {
   props: r,
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
+  s as meta,
   c as propsMeta
 };

package/lib/vimeo.ws.js

@@ -1,19 +1,24 @@
 import { VimeoIcon as o } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/sdk";
-import { div as i } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/vimeo.props.js";
-const r = {
-  div: i
-}, c = {
+import { div as e } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/vimeo.props.js";
+const m = {
   type: "container",
   icon: o,
   states: t,
-  presetStyle: r,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link", "Heading"] }
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      "VimeoSpinner",
+      "VimeoPlayButton",
+      "VimeoPreviewImage"
+    ]
+  },
+  presetStyle: {
+    div: e
   }
-}, e = [
+}, r = [
   "id",
   "className",
   "url",
@@ -31,11 +36,11 @@ const r = {
   "showControls",
   "controlsColor",
   "playsinline"
-], m = {
-  props: n,
-  initialProps: e
+], p = {
+  props: i,
+  initialProps: r
 };
 export {
-  c as meta,
-  m as propsMeta
+  m as meta,
+  p as propsMeta
 };

package/lib/youtube.js

@@ -1,139 +1,142 @@
-import { jsx as m, jsxs as _, Fragment as L } from "react/jsx-runtime";
-import { forwardRef as C, useState as p, useContext as I, useRef as E, useEffect as h } from "react";
-import { ReactSdkContext as O } from "@webstudio-is/react-sdk/runtime";
-import { VimeoContext as x, requestFullscreen as S } from "./vimeo.js";
-const T = "https://www.youtube-nocookie.com", j = "https://www.youtube.com", v = "https://img.youtube.com", R = (e) => {
+import { jsx as u, jsxs as E, Fragment as O } from "react/jsx-runtime";
+import { forwardRef as x, useState as p, useContext as S, useRef as T, useEffect as h } from "react";
+import { ReactSdkContext as A } from "@webstudio-is/react-sdk/runtime";
+import { VimeoContext as N, requestFullscreen as P } from "./vimeo.js";
+const U = "https://www.youtube-nocookie.com", V = "https://www.youtube.com", j = "https://img.youtube.com", L = (e) => {
   if (e)
     try {
-      const a = new URL(e);
-      return a.pathname === "/embed" ? void 0 : a.hostname === "youtu.be" ? a.pathname.slice(1) : a.searchParams.get("v") || a.pathname.split("/").pop();
+      const t = new URL(e);
+      return t.pathname === "/embed" ? void 0 : t.hostname === "youtu.be" ? t.pathname.slice(1) : t.searchParams.get("v") || t.pathname.split("/").pop();
     } catch {
       return e;
     }
-}, A = (e, a) => {
-  var i, c;
-  const l = R(e.url), r = new URL(a);
+}, D = (e, t) => {
+  var o, n;
+  const l = L(e.url), r = new URL(t);
   if (l)
     r.pathname = `/embed/${l}`;
   else if (e.url)
     try {
-      const n = new URL(e.url);
-      r.pathname = n.pathname, r.search = n.search;
+      const c = new URL(e.url);
+      r.pathname = c.pathname, r.search = c.search;
     } catch {
     }
-  const o = Object.keys(e), t = {};
-  for (const n of o)
-    switch (n) {
+  const i = Object.keys(e), a = {};
+  for (const c of i)
+    switch (c) {
       case "autoplay":
-        t.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (t.mute = "1");
+        a.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (a.mute = "1");
         break;
       case "muted":
-        t.mute = e.muted ? "1" : "0";
+        a.mute = e.muted ? "1" : "0";
         break;
       case "showControls":
-        t.controls = e.showControls ? "1" : "0";
+        a.controls = e.showControls ? "1" : "0";
         break;
       case "showRelatedVideos":
-        t.rel = e.showRelatedVideos ? "1" : "0";
+        a.rel = e.showRelatedVideos ? "1" : "0";
         break;
       case "keyboard":
-        t.keyboard = e.keyboard ? "1" : "0";
+        a.keyboard = e.keyboard ? "1" : "0";
         break;
       case "loop":
-        t.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (t.playlist = l);
+        a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = l);
         break;
       case "inline":
-        t.playsinline = e.inline ? "1" : "0";
+        a.playsinline = e.inline ? "1" : "0";
         break;
       case "allowFullscreen":
-        t.fs = e.allowFullscreen ? "1" : "0";
+        a.fs = e.allowFullscreen ? "1" : "0";
         break;
       case "captionLanguage":
-        t.cc_lang_pref = e.captionLanguage;
+        a.cc_lang_pref = e.captionLanguage;
         break;
       case "showCaptions":
-        t.cc_load_policy = e.showCaptions ? "1" : "0";
+        a.cc_load_policy = e.showCaptions ? "1" : "0";
         break;
       case "showAnnotations":
-        t.iv_load_policy = e.showAnnotations ? "1" : "3";
+        a.iv_load_policy = e.showAnnotations ? "1" : "3";
         break;
       case "startTime":
-        t.start = (i = e.startTime) == null ? void 0 : i.toString();
+        a.start = (o = e.startTime) == null ? void 0 : o.toString();
         break;
       case "endTime":
-        t.end = (c = e.endTime) == null ? void 0 : c.toString();
+        a.end = (n = e.endTime) == null ? void 0 : n.toString();
         break;
       case "disableKeyboard":
-        t.disablekb = e.disableKeyboard ? "1" : "0";
+        a.disablekb = e.disableKeyboard ? "1" : "0";
         break;
       case "language":
-        t.hl = e.language;
+        a.hl = e.language;
         break;
       case "listId":
-        t.list = e.listId;
+        a.list = e.listId;
         break;
       case "listType":
-        t.listType = e.listType;
+        a.listType = e.listType;
         break;
       case "color":
-        t.color = e.color;
+        a.color = e.color;
         break;
       case "origin":
-        t.origin = e.origin;
+        a.origin = e.origin;
         break;
       case "referrer":
-        t.widget_referrer = e.referrer;
+        a.widget_referrer = e.referrer;
         break;
       case "playlist":
-        t.playlist = e.playlist;
+        a.playlist = e.playlist;
+        break;
+      case "enablejsapi":
+        a.enablejsapi = e.enablejsapi ? "1" : "0";
         break;
     }
-  return Object.entries(t).forEach(([n, s]) => {
-    s !== void 0 && r.searchParams.append(n, s.toString());
+  return Object.entries(a).forEach(([c, s]) => {
+    s !== void 0 && r.searchParams.append(c, s.toString());
   }), r.toString();
-}, w = (e) => {
-  const a = document.createElement("link");
-  a.rel = "preconnect", a.href = e, a.crossOrigin = "true", document.head.appendChild(a);
+}, R = (e) => {
+  const t = document.createElement("link");
+  t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
 };
-let k = !1;
-const N = (e) => {
-  if (!(k || window.matchMedia("(hover: none)").matches)) {
+let _ = !1;
+const F = (e) => {
+  if (!(_ || window.matchMedia("(hover: none)").matches)) {
     try {
-      const a = new URL(e);
-      w(a.origin);
+      const t = new URL(e);
+      R(t.origin);
     } catch {
     }
-    w(v), k = !0;
+    R(j), _ = !0;
   }
-}, P = (e) => new URL(`${v}/vi/${e}/maxresdefault.jpg`), U = () => /* @__PURE__ */ m("div", { className: "flex w-full h-full items-center justify-center text-lg", children: 'Open the "Settings" panel and paste a video URL, e.g. https://youtube.com/watch?v=dQw4w9WgXcQ' }), V = ({
+}, Y = (e) => new URL(`${j}/vi/${e}/maxresdefault.jpg`), K = () => /* @__PURE__ */ u("div", { className: "flex w-full h-full items-center justify-center text-lg", children: 'Open the "Settings" panel and paste a video URL, e.g. https://youtube.com/watch?v=dQw4w9WgXcQ' }), M = ({
   title: e,
-  status: a,
+  status: t,
   loading: l,
   videoUrl: r,
-  previewImageUrl: o,
-  autoplay: t,
-  inline: i,
-  renderer: c,
-  showPreview: n,
+  previewImageUrl: i,
+  autoplay: a,
+  inline: o,
+  renderer: n,
+  showPreview: c,
   onStatusChange: s,
-  onPreviewImageUrlChange: u
+  onPreviewImageUrlChange: d
 }) => {
-  const [b, f] = p(0), d = E(null);
+  const [y, m] = p(0), b = T(null);
   return h(() => {
-    t && c !== "canvas" && a === "initial" && s("loading");
-  }, [t, a, c, s]), h(() => {
-    c !== "canvas" && N(r);
-  }, [c, r]), h(() => {
-    const y = R(r);
-    if (!y || !n) {
-      u(void 0);
+    a && n !== "canvas" && t === "initial" && s("loading");
+  }, [a, t, n, s]), h(() => {
+    n !== "canvas" && F(r);
+  }, [n, r]), h(() => {
+    const f = L(r);
+    if (!f || !c) {
+      d(void 0);
       return;
     }
-    o || u(P(y));
-  }, [u, n, r, o]), c === "canvas" || a === "initial" ? null : /* @__PURE__ */ m(
+    i || d(Y(f));
+  }, [d, c, r, i]), n === "canvas" || t === "initial" ? null : /* @__PURE__ */ u(
     "iframe",
     {
-      ref: d,
+      ref: b,
       title: e,
       src: r,
       loading: l,
@@ -143,69 +146,80 @@ const N = (e) => {
         position: "absolute",
         width: "100%",
         height: "100%",
-        opacity: b,
+        opacity: y,
         transition: "opacity 1s",
         border: "none"
       },
       onLoad: () => {
-        s("ready"), f(1), !i && !t && d.current && S(d.current);
+        s("ready"), m(1), !o && !a && b.current && P(b.current);
       }
     }
   );
-}, D = C(
+}, $ = x(
   ({
     url: e,
-    loading: a = "lazy",
+    loading: t = "lazy",
     autoplay: l,
     showPreview: r,
-    children: o,
-    privacyEnhancedMode: t,
-    inline: i = !1,
-    ...c
-  }, n) => {
-    const [s, u] = p("initial"), [b, f] = p(), { renderer: d } = I(O), y = t ?? !0 ? T : j, g = A(
+    showAnnotations: i,
+    showCaptions: a,
+    showControls: o,
+    allowFullscreen: n,
+    keyboard: c,
+    children: s,
+    privacyEnhancedMode: d,
+    inline: y = !1,
+    ...m
+  }, b) => {
+    const [f, g] = p("initial"), [w, C] = p(), { renderer: k } = S(A), I = d ?? !0 ? U : V, v = D(
       {
-        ...c,
-        inline: i,
+        ...m,
+        inline: y,
         url: e,
-        autoplay: !0
+        keyboard: c,
+        showAnnotations: i,
+        showCaptions: a,
+        allowFullscreen: n,
+        showControls: o,
+        autoplay: !0,
+        enablejsapi: !1
       },
-      y
+      I
     );
-    return /* @__PURE__ */ m(
-      x.Provider,
+    return /* @__PURE__ */ u(
+      N.Provider,
       {
         value: {
-          status: s,
-          previewImageUrl: b,
+          status: f,
+          previewImageUrl: w,
           onInitPlayer() {
-            d !== "canvas" && u("loading");
+            k !== "canvas" && g("loading");
           }
         },
-        children: /* @__PURE__ */ m("div", { ...c, ref: n, children: g ? /* @__PURE__ */ _(L, { children: [
-          o,
-          /* @__PURE__ */ m(
-            V,
+        children: /* @__PURE__ */ u("div", { ...m, ref: b, children: v ? /* @__PURE__ */ E(O, { children: [
+          s,
+          /* @__PURE__ */ u(
+            M,
             {
-              title: c.title,
+              title: m.title,
               autoplay: l,
-              videoUrl: g,
-              previewImageUrl: b,
-              loading: a,
-              inline: i,
+              videoUrl: v,
+              previewImageUrl: w,
+              loading: t,
+              inline: y,
               showPreview: r,
-              renderer: d,
-              status: s,
-              onStatusChange: u,
-              onPreviewImageUrlChange: f
+              renderer: k,
+              status: f,
+              onStatusChange: g,
+              onPreviewImageUrlChange: C
             }
           )
-        ] }) : /* @__PURE__ */ m(U, {}) })
+        ] }) : /* @__PURE__ */ u(K, {}) })
       }
     );
   }
 );
-D.displayName = "YouTube";
+$.displayName = "YouTube";
 export {
-  D as YouTube
+  $ as YouTube
 };

package/lib/youtube.ws.js

@@ -1,19 +1,24 @@
-import { YoutubeIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { div as e } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/youtube.props.js";
-const i = {
-  div: e
-}, c = {
+import { YoutubeIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/youtube.props.js";
+const p = {
   type: "container",
-  icon: o,
-  states: t,
-  presetStyle: i,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link", "Heading"] }
+  icon: e,
+  states: o,
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      "VimeoSpinner",
+      "VimeoPlayButton",
+      "VimeoPreviewImage"
+    ]
+  },
+  presetStyle: {
+    div: t
   }
-}, a = [
+}, n = [
   "id",
   "className",
   "url",
@@ -41,11 +46,11 @@ const i = {
   "language",
   "color",
   "playlist"
-], d = {
-  props: n,
-  initialProps: a
+], c = {
+  props: i,
+  initialProps: n
 };
 export {
-  c as meta,
-  d as propsMeta
+  p as meta,
+  c as propsMeta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.210.0",
+  "version": "0.213.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -49,23 +49,24 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.2",
     "micromark-extension-gfm-table": "^2.1.1",
-    "@webstudio-is/icons": "0.210.0",
-    "@webstudio-is/react-sdk": "0.210.0",
-    "@webstudio-is/image": "0.210.0",
-    "@webstudio-is/sdk": "0.210.0"
+    "@webstudio-is/icons": "0.213.0",
+    "@webstudio-is/image": "0.213.0",
+    "@webstudio-is/react-sdk": "0.213.0",
+    "@webstudio-is/sdk": "0.213.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
+    "nanostores": "^0.11.3",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^3.0.8",
-    "@webstudio-is/sdk-cli": "0.94.0",
-    "@webstudio-is/tsconfig": "1.0.7",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/template": "0.210.0"
+    "@webstudio-is/sdk-cli": "0.94.0",
+    "@webstudio-is/template": "0.213.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",