@webstudio-is/sdk-components-react 0.196.0 → 0.198.0

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

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

package/lib/vimeo.ws.js

@@ -1,22 +1,23 @@
 import { VimeoIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { defaultStates as t } from "@webstudio-is/sdk";
 import { div as r } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/vimeo.props.js";
-const i = {
+import { props as i } from "./__generated__/vimeo.props.js";
+const n = {
   div: r
 }, c = {
   type: "container",
   icon: o,
   states: t,
-  presetStyle: i,
+  presetStyle: n,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
   }
-}, s = [
+}, e = [
   "id",
   "className",
   "url",
+  "title",
   "quality",
   "loading",
   "showPreview",
@@ -30,8 +31,8 @@ const i = {
   "showControls",
   "controlsColor"
 ], m = {
-  props: n,
-  initialProps: s
+  props: i,
+  initialProps: e
 };
 export {
   c as meta,

package/lib/webhook-form.template.js

@@ -0,0 +1,49 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { Variable as s, $ as e, expression as o, ActionValue as i, PlaceholderValue as a } from "@webstudio-is/template";
+const n = new s("formState", "initial"), w = {
+  category: "data",
+  order: 1,
+  description: "Collect user data and send it to any webhook.",
+  template: /* @__PURE__ */ r(
+    e.Form,
+    {
+      state: o`${n}`,
+      onStateChange: new i(["state"], o`${n} = state`),
+      children: [
+        /* @__PURE__ */ r(
+          e.Box,
+          {
+            "ws:label": "Form Content",
+            "ws:show": o`${n} === 'initial' || ${n} === 'error'`,
+            children: [
+              /* @__PURE__ */ t(e.Label, { children: new a("Name") }),
+              /* @__PURE__ */ t(e.Input, { name: "name" }),
+              /* @__PURE__ */ t(e.Label, { children: new a("Email") }),
+              /* @__PURE__ */ t(e.Input, { name: "email" }),
+              /* @__PURE__ */ t(e.Button, { children: new a("Submit") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.Box,
+          {
+            "ws:label": "Success Message",
+            "ws:show": o`${n} === 'success'`,
+            children: new a("Thank you for getting in touch!")
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.Box,
+          {
+            "ws:label": "Error Message",
+            "ws:show": o`${n} === 'error'`,
+            children: new a("Sorry, something went wrong.")
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  w as meta
+};