@webstudio-is/sdk-components-react 0.0.0-588fe22 → 0.0.0-73cd6ea

package/lib/vimeo-play-button.js

@@ -1,12 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as r, useContext as a, useCallback as m } from "react";
-import { VimeoContext as s } from "./vimeo.js";
+import s from "await-interaction-response";
 import { Button as l } from "./button.js";
-import c from "await-interaction-response";
+import { VideoContext as c } from "./shared/video.js";
 const f = r(
   (o, i) => {
-    const t = a(s), n = m(async () => {
-      await c(), t.onInitPlayer();
+    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 });

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

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

package/lib/vimeo-preview-image.js

@@ -1,10 +1,10 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as i, useContext as t } from "react";
+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 { VimeoContext as g } from "./vimeo.js";
-const n = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=", s = i(({ src: A, ...e }, o) => {
+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__ */ m(
+  return /* @__PURE__ */ i(
     a,
     {
       ...e,

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

@@ -1,14 +1,14 @@
-import { meta as e, propsMeta as o } from "./image.ws.js";
+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",
-  constraints: {
-    relation: "ancestor",
-    component: { $in: ["Vimeo", "YouTube"] }
-  }
-}, p = {
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  initialProps: e.initialProps,
   props: {
     ...r,
     // Automatically generated props don't have the right control.
@@ -18,10 +18,8 @@ const i = {
       label: "Source",
       required: !1
     }
-  },
-  initialProps: o.initialProps
+  }
 };
 export {
-  i as meta,
-  p as propsMeta
+  i as meta
 };

package/lib/vimeo-spinner.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as r, useContext as i } from "react";
-import { VimeoContext as n } from "./vimeo.js";
+import { VideoContext as n } from "./shared/video.js";
 const m = r(
   (o, t) => {
     if (i(n).status === "loading")

package/lib/vimeo-spinner.ws.js

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

package/lib/vimeo.js

@@ -1,17 +1,18 @@
-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 { 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";
-const Y = (e) => {
-  if (e.url === void 0)
+import { VideoContext as Y, requestFullscreen as J } from "./shared/video.js";
+const K = (t) => {
+  if (t.url === void 0)
     return;
-  let t;
+  let e;
   try {
-    const o = new URL(e.url);
-    t = new URL(R), t.pathname = `/video${o.pathname}`;
+    const o = new URL(t.url);
+    e = new URL(S), e.pathname = `/video${o.pathname}`;
   } catch {
   }
-  if (t === void 0)
+  if (e === void 0)
     return;
   const a = {
     showPortrait: "portrait",
@@ -24,35 +25,35 @@ const Y = (e) => {
     doNotTrack: "dnt"
   };
   let r;
-  for (r in e) {
-    const o = e[r];
+  for (r in t) {
+    const o = t[r];
     if (r === "url" || o === void 0)
       continue;
-    const i = a[r] ?? r;
-    t.searchParams.append(i, o.toString());
+    const s = a[r] ?? r;
+    e.searchParams.append(s, o.toString());
   }
-  if (t.searchParams.set("autoplay", "true"), typeof e.controlsColor == "string") {
-    const o = z(e.controlsColor).toHex().replace("#", "");
-    t.searchParams.set("color", o);
+  if (e.searchParams.set("autoplay", "true"), typeof t.controlsColor == "string") {
+    const o = q(t.controlsColor).toHex().replace("#", "");
+    e.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();
-}, h = (e) => {
-  const t = document.createElement("link");
-  t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
+  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 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) => {
+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(e).pathname.split("/")[2];
+    const a = new URL(t).pathname.split("/")[2];
     return a === "" || a == null ? void 0 : a;
   } catch {
   }
-}, 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(
+}, 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: {
@@ -65,38 +66,40 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
     },
     children: 'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
   }
-), Z = ({
-  title: e,
-  status: t,
+), te = ({
+  title: t,
+  status: e,
   loading: a,
   videoUrl: r,
   previewImageUrl: o,
-  autoplay: i,
+  autoplay: s,
   renderer: n,
-  showPreview: d,
+  showPreview: m,
+  playsinline: f,
   onStatusChange: c,
   onPreviewImageUrlChange: l
 }) => {
-  const [p, u] = v(0);
-  if (f(() => {
-    i && n !== "canvas" && t === "initial" && c("loading");
-  }, [i, t, n, c]), f(() => {
-    n !== "canvas" && K();
-  }, [n]), f(() => {
+  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 (d === !1) {
+      if (m === !1) {
         l(void 0);
         return;
       }
-      o === void 0 && W(r).then(l).catch(() => {
+      o === void 0 && Z(r).then(l).catch(() => {
         console.error(`Could not load preview image for ${r}`);
       });
     }
-  }, [l, d, r, o]), !(n === "canvas" || t === "initial"))
-    return /* @__PURE__ */ s(
+  }, [l, m, r, o]), !(n === "canvas" || e === "initial"))
+    return /* @__PURE__ */ i(
       "iframe",
       {
-        title: e,
+        ref: d,
+        title: t,
         src: r,
         loading: a,
         allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;",
@@ -105,35 +108,31 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
           position: "absolute",
           width: "100%",
           height: "100%",
-          opacity: p,
+          opacity: u,
           transition: "opacity 1s",
           border: "none"
         },
         onLoad: () => {
-          c("ready"), u(1);
+          c("ready"), h(1), d.current && !f && !s && J(d.current);
         }
       }
     );
-}, tt = T({
-  onInitPlayer: () => {
-  },
-  status: "initial"
-}), et = q(
+}, re = z(
   ({
-    url: e,
-    loading: t = "lazy",
+    url: t,
+    loading: e = "lazy",
     autoplay: a = !1,
     autopause: r = !0,
     showByline: o = !1,
-    showControls: i = !0,
+    showControls: s = !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",
+    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,
@@ -142,64 +141,65 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
     autopip: N,
     controlsColor: O,
     interactiveParams: V,
-    texttrack: $,
-    children: A,
-    ...y
-  }, m) => {
-    const [w, g] = v("initial"), [P, B] = v(), { renderer: C } = G(H), I = Y({
-      url: e,
+    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: i,
+      showControls: s,
       controlsColor: O,
       doNotTrack: n,
       interactiveParams: V,
-      keyboard: d,
-      loop: c,
-      muted: l,
-      pip: p,
+      keyboard: m,
+      loop: f,
+      muted: c,
+      pip: l,
       playsinline: u,
-      quality: L,
+      quality: d,
       responsive: k,
       speed: E,
-      texttrack: $,
+      texttrack: F,
       showTitle: _,
       transparent: j,
-      showPortrait: S,
+      showPortrait: h,
       autopip: N
     });
-    return /* @__PURE__ */ s(
-      tt.Provider,
+    return /* @__PURE__ */ i(
+      Y.Provider,
       {
         value: {
-          status: w,
-          previewImageUrl: P,
+          status: P,
+          previewImageUrl: I,
           onInitPlayer() {
-            C !== "canvas" && g("loading");
+            R !== "canvas" && C("loading");
           }
         },
-        children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ i(
           "div",
           {
-            ...y,
+            ...g,
             ref: (x) => {
-              m !== null && (typeof m == "function" ? m(x) : m.current = x);
+              p !== null && (typeof p == "function" ? p(x) : p.current = x);
             },
-            children: I === void 0 ? /* @__PURE__ */ s(X, {}) : /* @__PURE__ */ D(F, { children: [
-              A,
-              /* @__PURE__ */ s(
-                Z,
+            children: b === void 0 ? /* @__PURE__ */ i(ee, {}) : /* @__PURE__ */ B(D, { children: [
+              $,
+              /* @__PURE__ */ i(
+                te,
                 {
-                  title: y.title,
+                  title: g.title,
                   autoplay: a,
-                  videoUrl: I,
-                  previewImageUrl: P,
-                  loading: t,
+                  playsinline: u,
+                  videoUrl: b,
+                  previewImageUrl: I,
+                  loading: e,
                   showPreview: M,
-                  renderer: C,
-                  status: w,
-                  onStatusChange: g,
-                  onPreviewImageUrlChange: B
+                  renderer: R,
+                  status: P,
+                  onStatusChange: C,
+                  onPreviewImageUrlChange: A
                 }
               )
             ] })
@@ -209,8 +209,7 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
     );
   }
 );
-et.displayName = "Vimeo";
+re.displayName = "Vimeo";
 export {
-  et as Vimeo,
-  tt as VimeoContext
+  re as Vimeo
 };

package/lib/vimeo.template.js

@@ -1,23 +1,23 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+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 e, css as o } from "@webstudio-is/template";
-const p = {
+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__ */ i(
-    e.Vimeo,
+  template: /* @__PURE__ */ o(
+    t.Vimeo,
     {
-      "ws:style": o`
+      "ws:style": i`
         position: relative;
         aspect-ratio: 640/360;
         width: 100%;
       `,
       children: [
-        /* @__PURE__ */ t(
-          e.VimeoPreviewImage,
+        /* @__PURE__ */ e(
+          t.VimeoPreviewImage,
           {
-            "ws:style": o`
+            "ws:style": i`
           position: absolute;
           object-fit: cover;
           object-position: center;
@@ -30,11 +30,11 @@ const p = {
             optimize: !0
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoSpinner,
+        /* @__PURE__ */ e(
+          t.VimeoSpinner,
           {
             "ws:label": "Spinner",
-            "ws:style": o`
+            "ws:style": i`
           position: absolute;
           top: 50%;
           left: 50%;
@@ -43,13 +43,13 @@ const p = {
           margin-top: -35px;
           margin-left: -35px;
         `,
-            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+            children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoPlayButton,
+        /* @__PURE__ */ e(
+          t.VimeoPlayButton,
           {
-            "ws:style": o`
+            "ws:style": i`
           position: absolute;
           width: 140px;
           height: 80px;
@@ -70,16 +70,17 @@ const p = {
           }
         `,
             "aria-label": "Play button",
-            children: /* @__PURE__ */ t(
-              e.Box,
+            children: /* @__PURE__ */ e(
+              a.element,
               {
+                "ws:tag": "div",
                 "ws:label": "Play Icon",
-                "ws:style": o`
+                "ws:style": i`
             width: 60px;
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: n })
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Play SVG", code: n })
               }
             )
           }
@@ -89,5 +90,5 @@ const p = {
   )
 };
 export {
-  p as meta
+  d as meta
 };

package/lib/vimeo.ws.js

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