@webstudio-is/sdk-components-react 0.0.0-021f2d4

package/lib/youtube.js

@@ -0,0 +1,206 @@
+import { jsx as u, jsxs as R, Fragment as _ } from "react/jsx-runtime";
+import { forwardRef as L, useState as h, useContext as C, useEffect as y } from "react";
+import { ReactSdkContext as I } from "@webstudio-is/react-sdk/runtime";
+import { VimeoContext as E } from "./vimeo.js";
+const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w = "https://img.youtube.com", k = (e) => {
+  if (e)
+    try {
+      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;
+    }
+}, S = (e, t) => {
+  var n, i;
+  const l = k(e.url), r = new URL(t);
+  if (l)
+    r.pathname = `/embed/${l}`;
+  else if (e.url)
+    try {
+      const c = new URL(e.url);
+      r.pathname = c.pathname, r.search = c.search;
+    } catch {
+    }
+  const o = Object.keys(e), a = {};
+  for (const c of o)
+    switch (c) {
+      case "autoplay":
+        a.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (a.mute = "1");
+        break;
+      case "muted":
+        a.mute = e.muted ? "1" : "0";
+        break;
+      case "showControls":
+        a.controls = e.showControls ? "1" : "0";
+        break;
+      case "showRelatedVideos":
+        a.rel = e.showRelatedVideos ? "1" : "0";
+        break;
+      case "keyboard":
+        a.keyboard = e.keyboard ? "1" : "0";
+        break;
+      case "loop":
+        a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = l);
+        break;
+      case "inline":
+        a.playsinline = e.inline ? "1" : "0";
+        break;
+      case "allowFullscreen":
+        a.fs = e.allowFullscreen ? "1" : "0";
+        break;
+      case "captionLanguage":
+        a.cc_lang_pref = e.captionLanguage;
+        break;
+      case "showCaptions":
+        a.cc_load_policy = e.showCaptions ? "1" : "0";
+        break;
+      case "showAnnotations":
+        a.iv_load_policy = e.showAnnotations ? "1" : "3";
+        break;
+      case "startTime":
+        a.start = (n = e.startTime) == null ? void 0 : n.toString();
+        break;
+      case "endTime":
+        a.end = (i = e.endTime) == null ? void 0 : i.toString();
+        break;
+      case "disableKeyboard":
+        a.disablekb = e.disableKeyboard ? "1" : "0";
+        break;
+      case "language":
+        a.hl = e.language;
+        break;
+      case "listId":
+        a.list = e.listId;
+        break;
+      case "listType":
+        a.listType = e.listType;
+        break;
+      case "color":
+        a.color = e.color;
+        break;
+      case "origin":
+        a.origin = e.origin;
+        break;
+      case "referrer":
+        a.widget_referrer = e.referrer;
+        break;
+      case "playlist":
+        a.playlist = e.playlist;
+        break;
+    }
+  return Object.entries(a).forEach(([c, s]) => {
+    s !== void 0 && r.searchParams.append(c, s.toString());
+  }), r.toString();
+}, p = (e) => {
+  const t = document.createElement("link");
+  t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
+};
+let g = !1;
+const T = (e) => {
+  if (!(g || window.matchMedia("(hover: none)").matches)) {
+    try {
+      const t = new URL(e);
+      p(t.origin);
+    } catch {
+    }
+    p(w), g = !0;
+  }
+}, j = (e) => new URL(`${w}/vi/${e}/maxresdefault.jpg`), A = () => /* @__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' }), N = ({
+  title: e,
+  status: t,
+  loading: l,
+  videoUrl: r,
+  previewImageUrl: o,
+  autoplay: a,
+  renderer: n,
+  showPreview: i,
+  onStatusChange: c,
+  onPreviewImageUrlChange: s
+}) => {
+  const [m, b] = h(0);
+  return y(() => {
+    a && n !== "canvas" && t === "initial" && c("loading");
+  }, [a, t, n, c]), y(() => {
+    n !== "canvas" && T(r);
+  }, [n, r]), y(() => {
+    const d = k(r);
+    if (!d || !i) {
+      s(void 0);
+      return;
+    }
+    o || s(j(d));
+  }, [s, i, r, o]), n === "canvas" || t === "initial" ? null : /* @__PURE__ */ u(
+    "iframe",
+    {
+      title: e,
+      src: r,
+      loading: l,
+      allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: !0,
+      style: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        opacity: m,
+        transition: "opacity 1s",
+        border: "none"
+      },
+      onLoad: () => {
+        c("ready"), b(1);
+      }
+    }
+  );
+}, P = L(
+  ({
+    url: e,
+    loading: t = "lazy",
+    autoplay: l,
+    showPreview: r,
+    children: o,
+    privacyEnhancedMode: a,
+    ...n
+  }, i) => {
+    const [c, s] = h("initial"), [m, b] = h(), { renderer: d } = C(I), v = a ?? !0 ? O : x, f = S(
+      {
+        ...n,
+        url: e,
+        autoplay: !0
+      },
+      v
+    );
+    return /* @__PURE__ */ u(
+      E.Provider,
+      {
+        value: {
+          status: c,
+          previewImageUrl: m,
+          onInitPlayer() {
+            d !== "canvas" && s("loading");
+          }
+        },
+        children: /* @__PURE__ */ u("div", { ...n, ref: i, children: f ? /* @__PURE__ */ R(_, { children: [
+          o,
+          /* @__PURE__ */ u(
+            N,
+            {
+              title: n.title,
+              autoplay: l,
+              videoUrl: f,
+              previewImageUrl: m,
+              loading: t,
+              showPreview: r,
+              renderer: d,
+              status: c,
+              onStatusChange: s,
+              onPreviewImageUrlChange: b
+            }
+          )
+        ] }) : /* @__PURE__ */ u(A, {}) })
+      }
+    );
+  }
+);
+P.displayName = "YouTube";
+export {
+  P as YouTube
+};

package/lib/youtube.template.js

@@ -0,0 +1,97 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { SpinnerIcon as r, PlayIcon as l } from "@webstudio-is/icons/svg";
+import { $ as e, css as o } from "@webstudio-is/template";
+const p = {
+  label: "YouTube",
+  category: "media",
+  order: 1,
+  description: "Add a video to your page that is hosted on YouTube. Paste a YouTube URL and configure the video in the Settings tab.",
+  template: /* @__PURE__ */ i(
+    e.YouTube,
+    {
+      "ws:label": "YouTube",
+      "ws:style": o`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `,
+      children: [
+        /* @__PURE__ */ t(
+          e.VimeoPreviewImage,
+          {
+            "ws:label": "Preview Image",
+            "ws:style": o`
+          position: absolute;
+          object-fit: cover;
+          object-position: center;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        `,
+            alt: "YouTube 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:label": "Play Button",
+            "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: l })
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  p as meta
+};

package/lib/youtube.ws.js

@@ -0,0 +1,51 @@
+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 = {
+  type: "container",
+  icon: o,
+  states: t,
+  presetStyle: i,
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link", "Heading"] }
+  }
+}, a = [
+  "id",
+  "className",
+  "url",
+  "privacyEnhancedMode",
+  "title",
+  "loading",
+  "showPreview",
+  "autoplay",
+  "showControls",
+  "showRelatedVideos",
+  "keyboard",
+  "loop",
+  "inline",
+  "allowFullscreen",
+  "showCaptions",
+  "showAnnotations",
+  "startTime",
+  "endTime",
+  "disableKeyboard",
+  "referrer",
+  "listType",
+  "listId",
+  "origin",
+  "captionLanguage",
+  "language",
+  "color",
+  "playlist"
+], d = {
+  props: n,
+  initialProps: a
+};
+export {
+  c as meta,
+  d as propsMeta
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@webstudio-is/sdk-components-react",
+  "version": "0.0.0-021f2d4",
+  "description": "Webstudio default library for react",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "license": "AGPL-3.0-or-later",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "lib/*",
+    "!*.{test,stories}.*"
+  ],
+  "exports": {
+    ".": {
+      "webstudio": "./src/components.ts",
+      "types": "./lib/types/components.d.ts",
+      "import": "./lib/components.js"
+    },
+    "./metas": {
+      "webstudio": "./src/metas.ts",
+      "types": "./lib/types/metas.d.ts",
+      "import": "./lib/metas.js"
+    },
+    "./props": {
+      "webstudio": "./src/props.ts",
+      "types": "./lib/types/props.d.ts",
+      "import": "./lib/props.js"
+    },
+    "./hooks": {
+      "webstudio": "./src/hooks.ts",
+      "types": "./lib/types/hooks.d.ts",
+      "import": "./lib/hooks.js"
+    },
+    "./templates": {
+      "webstudio": "./src/templates.ts",
+      "types": "./lib/types/templates.d.ts",
+      "import": "./lib/templates.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318"
+  },
+  "dependencies": {
+    "@react-aria/utils": "^3.27.0",
+    "await-interaction-response": "^0.0.2",
+    "colord": "^2.9.3",
+    "micromark": "^4.0.1",
+    "micromark-extension-gfm-table": "^2.1.0",
+    "@webstudio-is/image": "0.0.0-021f2d4",
+    "@webstudio-is/react-sdk": "0.0.0-021f2d4",
+    "@webstudio-is/icons": "0.0.0-021f2d4",
+    "@webstudio-is/sdk": "0.0.0-021f2d4"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.2.2",
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.25",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "vitest": "^3.0.2",
+    "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/sdk-cli": "0.94.0",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/template": "0.0.0-021f2d4"
+  },
+  "scripts": {
+    "build": "vite build --config ../../vite.sdk-components.config.ts",
+    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.test.{ts,tsx} !./src/*.ws.ts !./src/*.ws.ts !./src/*.template.tsx' && prettier --write \"**/*.props.ts\"",
+    "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
+    "dts": "tsc --project tsconfig.dts.json",
+    "test": "vitest run",
+    "typecheck": "tsc"
+  }
+}