@webstudio-is/sdk-components-react 0.0.0-021f2d4 → 0.0.0-4f7bf18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/lib/youtube.js +86 -92
  2. package/package.json +8 -8
package/lib/youtube.js CHANGED
@@ -1,140 +1,134 @@
1
- import { jsx as u, jsxs as R, Fragment as _ } from "react/jsx-runtime";
2
- import { forwardRef as L, useState as h, useContext as C, useEffect as y } from "react";
3
- import { ReactSdkContext as I } from "@webstudio-is/react-sdk/runtime";
1
+ import { jsx as u, jsxs as _, Fragment as R } from "react/jsx-runtime";
2
+ import { forwardRef as C, useState as f, useContext as I, useEffect as y } from "react";
3
+ import { ReactSdkContext as L } from "@webstudio-is/react-sdk/runtime";
4
4
  import { VimeoContext as E } from "./vimeo.js";
5
5
  const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w = "https://img.youtube.com", k = (e) => {
6
6
  if (e)
7
7
  try {
8
- const t = new URL(e);
9
- return t.pathname === "/embed" ? void 0 : t.hostname === "youtu.be" ? t.pathname.slice(1) : t.searchParams.get("v") || t.pathname.split("/").pop();
8
+ const a = new URL(e);
9
+ return a.hostname === "youtu.be" ? a.pathname.slice(1) : a.searchParams.get("v") || a.pathname.split("/").pop();
10
10
  } catch {
11
11
  return e;
12
12
  }
13
- }, S = (e, t) => {
14
- var n, i;
15
- const l = k(e.url), r = new URL(t);
16
- if (l)
17
- r.pathname = `/embed/${l}`;
18
- else if (e.url)
19
- try {
20
- const c = new URL(e.url);
21
- r.pathname = c.pathname, r.search = c.search;
22
- } catch {
23
- }
24
- const o = Object.keys(e), a = {};
25
- for (const c of o)
26
- switch (c) {
13
+ }, S = (e, a) => {
14
+ var r, s;
15
+ const o = k(e.url);
16
+ if (!o)
17
+ return;
18
+ const c = new URL(`${a}/embed/${o}`), l = Object.keys(e), t = {};
19
+ for (const n of l)
20
+ switch (n) {
27
21
  case "autoplay":
28
- a.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (a.mute = "1");
22
+ t.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (t.mute = "1");
29
23
  break;
30
24
  case "muted":
31
- a.mute = e.muted ? "1" : "0";
25
+ t.mute = e.muted ? "1" : "0";
32
26
  break;
33
27
  case "showControls":
34
- a.controls = e.showControls ? "1" : "0";
28
+ t.controls = e.showControls ? "1" : "0";
35
29
  break;
36
30
  case "showRelatedVideos":
37
- a.rel = e.showRelatedVideos ? "1" : "0";
31
+ t.rel = e.showRelatedVideos ? "1" : "0";
38
32
  break;
39
33
  case "keyboard":
40
- a.keyboard = e.keyboard ? "1" : "0";
34
+ t.keyboard = e.keyboard ? "1" : "0";
41
35
  break;
42
36
  case "loop":
43
- a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = l);
37
+ t.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (t.playlist = o);
44
38
  break;
45
39
  case "inline":
46
- a.playsinline = e.inline ? "1" : "0";
40
+ t.playsinline = e.inline ? "1" : "0";
47
41
  break;
48
42
  case "allowFullscreen":
49
- a.fs = e.allowFullscreen ? "1" : "0";
43
+ t.fs = e.allowFullscreen ? "1" : "0";
50
44
  break;
51
45
  case "captionLanguage":
52
- a.cc_lang_pref = e.captionLanguage;
46
+ t.cc_lang_pref = e.captionLanguage;
53
47
  break;
54
48
  case "showCaptions":
55
- a.cc_load_policy = e.showCaptions ? "1" : "0";
49
+ t.cc_load_policy = e.showCaptions ? "1" : "0";
56
50
  break;
57
51
  case "showAnnotations":
58
- a.iv_load_policy = e.showAnnotations ? "1" : "3";
52
+ t.iv_load_policy = e.showAnnotations ? "1" : "3";
59
53
  break;
60
54
  case "startTime":
61
- a.start = (n = e.startTime) == null ? void 0 : n.toString();
55
+ t.start = (r = e.startTime) == null ? void 0 : r.toString();
62
56
  break;
63
57
  case "endTime":
64
- a.end = (i = e.endTime) == null ? void 0 : i.toString();
58
+ t.end = (s = e.endTime) == null ? void 0 : s.toString();
65
59
  break;
66
60
  case "disableKeyboard":
67
- a.disablekb = e.disableKeyboard ? "1" : "0";
61
+ t.disablekb = e.disableKeyboard ? "1" : "0";
68
62
  break;
69
63
  case "language":
70
- a.hl = e.language;
64
+ t.hl = e.language;
71
65
  break;
72
66
  case "listId":
73
- a.list = e.listId;
67
+ t.list = e.listId;
74
68
  break;
75
69
  case "listType":
76
- a.listType = e.listType;
70
+ t.listType = e.listType;
77
71
  break;
78
72
  case "color":
79
- a.color = e.color;
73
+ t.color = e.color;
80
74
  break;
81
75
  case "origin":
82
- a.origin = e.origin;
76
+ t.origin = e.origin;
83
77
  break;
84
78
  case "referrer":
85
- a.widget_referrer = e.referrer;
79
+ t.widget_referrer = e.referrer;
86
80
  break;
87
81
  case "playlist":
88
- a.playlist = e.playlist;
82
+ t.playlist = e.playlist;
89
83
  break;
90
84
  }
91
- return Object.entries(a).forEach(([c, s]) => {
92
- s !== void 0 && r.searchParams.append(c, s.toString());
93
- }), r.toString();
94
- }, p = (e) => {
95
- const t = document.createElement("link");
96
- t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
85
+ return Object.entries(t).forEach(([n, i]) => {
86
+ i !== void 0 && c.searchParams.append(n, i.toString());
87
+ }), c.toString();
88
+ }, h = (e) => {
89
+ const a = document.createElement("link");
90
+ a.rel = "preconnect", a.href = e, a.crossOrigin = "true", document.head.appendChild(a);
97
91
  };
98
92
  let g = !1;
99
93
  const T = (e) => {
100
94
  if (!(g || window.matchMedia("(hover: none)").matches)) {
101
95
  try {
102
- const t = new URL(e);
103
- p(t.origin);
96
+ const a = new URL(e);
97
+ h(a.origin);
104
98
  } catch {
105
99
  }
106
- p(w), g = !0;
100
+ h(w), g = !0;
107
101
  }
108
102
  }, 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 = ({
109
103
  title: e,
110
- status: t,
111
- loading: l,
112
- videoUrl: r,
113
- previewImageUrl: o,
114
- autoplay: a,
115
- renderer: n,
116
- showPreview: i,
117
- onStatusChange: c,
118
- onPreviewImageUrlChange: s
104
+ status: a,
105
+ loading: o,
106
+ videoUrl: c,
107
+ previewImageUrl: l,
108
+ autoplay: t,
109
+ renderer: r,
110
+ showPreview: s,
111
+ onStatusChange: n,
112
+ onPreviewImageUrlChange: i
119
113
  }) => {
120
- const [m, b] = h(0);
114
+ const [m, b] = f(0);
121
115
  return y(() => {
122
- a && n !== "canvas" && t === "initial" && c("loading");
123
- }, [a, t, n, c]), y(() => {
124
- n !== "canvas" && T(r);
125
- }, [n, r]), y(() => {
126
- const d = k(r);
127
- if (!d || !i) {
128
- s(void 0);
116
+ t && r !== "canvas" && a === "initial" && n("loading");
117
+ }, [t, a, r, n]), y(() => {
118
+ r !== "canvas" && T(c);
119
+ }, [r, c]), y(() => {
120
+ const d = k(c);
121
+ if (!d || !s) {
122
+ i(void 0);
129
123
  return;
130
124
  }
131
- o || s(j(d));
132
- }, [s, i, r, o]), n === "canvas" || t === "initial" ? null : /* @__PURE__ */ u(
125
+ l || i(j(d));
126
+ }, [i, s, c, l]), r === "canvas" || a === "initial" ? null : /* @__PURE__ */ u(
133
127
  "iframe",
134
128
  {
135
129
  title: e,
136
- src: r,
137
- loading: l,
130
+ src: c,
131
+ loading: o,
138
132
  allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
139
133
  allowFullScreen: !0,
140
134
  style: {
@@ -146,23 +140,23 @@ const T = (e) => {
146
140
  border: "none"
147
141
  },
148
142
  onLoad: () => {
149
- c("ready"), b(1);
143
+ n("ready"), b(1);
150
144
  }
151
145
  }
152
146
  );
153
- }, P = L(
147
+ }, P = C(
154
148
  ({
155
149
  url: e,
156
- loading: t = "lazy",
157
- autoplay: l,
158
- showPreview: r,
159
- children: o,
160
- privacyEnhancedMode: a,
161
- ...n
162
- }, i) => {
163
- const [c, s] = h("initial"), [m, b] = h(), { renderer: d } = C(I), v = a ?? !0 ? O : x, f = S(
150
+ loading: a = "lazy",
151
+ autoplay: o,
152
+ showPreview: c,
153
+ children: l,
154
+ privacyEnhancedMode: t,
155
+ ...r
156
+ }, s) => {
157
+ const [n, i] = f("initial"), [m, b] = f(), { renderer: d } = I(L), v = t ?? !0 ? O : x, p = S(
164
158
  {
165
- ...n,
159
+ ...r,
166
160
  url: e,
167
161
  autoplay: !0
168
162
  },
@@ -172,26 +166,26 @@ const T = (e) => {
172
166
  E.Provider,
173
167
  {
174
168
  value: {
175
- status: c,
169
+ status: n,
176
170
  previewImageUrl: m,
177
171
  onInitPlayer() {
178
- d !== "canvas" && s("loading");
172
+ d !== "canvas" && i("loading");
179
173
  }
180
174
  },
181
- children: /* @__PURE__ */ u("div", { ...n, ref: i, children: f ? /* @__PURE__ */ R(_, { children: [
182
- o,
175
+ children: /* @__PURE__ */ u("div", { ...r, ref: s, children: p ? /* @__PURE__ */ _(R, { children: [
176
+ l,
183
177
  /* @__PURE__ */ u(
184
178
  N,
185
179
  {
186
- title: n.title,
187
- autoplay: l,
188
- videoUrl: f,
180
+ title: r.title,
181
+ autoplay: o,
182
+ videoUrl: p,
189
183
  previewImageUrl: m,
190
- loading: t,
191
- showPreview: r,
184
+ loading: a,
185
+ showPreview: c,
192
186
  renderer: d,
193
- status: c,
194
- onStatusChange: s,
187
+ status: n,
188
+ onStatusChange: i,
195
189
  onPreviewImageUrlChange: b
196
190
  }
197
191
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webstudio-is/sdk-components-react",
3
- "version": "0.0.0-021f2d4",
3
+ "version": "0.0.0-4f7bf18",
4
4
  "description": "Webstudio default library for react",
5
5
  "author": "Webstudio <github@webstudio.is>",
6
6
  "homepage": "https://webstudio.is",
@@ -44,15 +44,15 @@
44
44
  "react-dom": "18.3.0-canary-14898b6a9-20240318"
45
45
  },
46
46
  "dependencies": {
47
- "@react-aria/utils": "^3.27.0",
47
+ "@react-aria/utils": "^3.26.0",
48
48
  "await-interaction-response": "^0.0.2",
49
49
  "colord": "^2.9.3",
50
50
  "micromark": "^4.0.1",
51
51
  "micromark-extension-gfm-table": "^2.1.0",
52
- "@webstudio-is/image": "0.0.0-021f2d4",
53
- "@webstudio-is/react-sdk": "0.0.0-021f2d4",
54
- "@webstudio-is/icons": "0.0.0-021f2d4",
55
- "@webstudio-is/sdk": "0.0.0-021f2d4"
52
+ "@webstudio-is/icons": "0.0.0-4f7bf18",
53
+ "@webstudio-is/image": "0.0.0-4f7bf18",
54
+ "@webstudio-is/sdk": "0.0.0-4f7bf18",
55
+ "@webstudio-is/react-sdk": "0.0.0-4f7bf18"
56
56
  },
57
57
  "devDependencies": {
58
58
  "@testing-library/react": "^14.2.2",
@@ -62,9 +62,9 @@
62
62
  "react-dom": "18.3.0-canary-14898b6a9-20240318",
63
63
  "vitest": "^3.0.2",
64
64
  "@webstudio-is/generate-arg-types": "0.0.0",
65
- "@webstudio-is/sdk-cli": "0.94.0",
65
+ "@webstudio-is/template": "0.0.0-4f7bf18",
66
66
  "@webstudio-is/tsconfig": "1.0.7",
67
- "@webstudio-is/template": "0.0.0-021f2d4"
67
+ "@webstudio-is/sdk-cli": "0.94.0"
68
68
  },
69
69
  "scripts": {
70
70
  "build": "vite build --config ../../vite.sdk-components.config.ts",