@webstudio-is/sdk-components-react 0.0.0-4f7bf18 → 0.0.0-588fe22

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 +92 -86
  2. package/package.json +8 -8
package/lib/youtube.js CHANGED
@@ -1,134 +1,140 @@
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";
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";
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 a = new URL(e);
9
- return a.hostname === "youtu.be" ? a.pathname.slice(1) : a.searchParams.get("v") || a.pathname.split("/").pop();
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();
10
10
  } catch {
11
11
  return e;
12
12
  }
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) {
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) {
21
27
  case "autoplay":
22
- t.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (t.mute = "1");
28
+ a.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (a.mute = "1");
23
29
  break;
24
30
  case "muted":
25
- t.mute = e.muted ? "1" : "0";
31
+ a.mute = e.muted ? "1" : "0";
26
32
  break;
27
33
  case "showControls":
28
- t.controls = e.showControls ? "1" : "0";
34
+ a.controls = e.showControls ? "1" : "0";
29
35
  break;
30
36
  case "showRelatedVideos":
31
- t.rel = e.showRelatedVideos ? "1" : "0";
37
+ a.rel = e.showRelatedVideos ? "1" : "0";
32
38
  break;
33
39
  case "keyboard":
34
- t.keyboard = e.keyboard ? "1" : "0";
40
+ a.keyboard = e.keyboard ? "1" : "0";
35
41
  break;
36
42
  case "loop":
37
- t.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (t.playlist = o);
43
+ a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = l);
38
44
  break;
39
45
  case "inline":
40
- t.playsinline = e.inline ? "1" : "0";
46
+ a.playsinline = e.inline ? "1" : "0";
41
47
  break;
42
48
  case "allowFullscreen":
43
- t.fs = e.allowFullscreen ? "1" : "0";
49
+ a.fs = e.allowFullscreen ? "1" : "0";
44
50
  break;
45
51
  case "captionLanguage":
46
- t.cc_lang_pref = e.captionLanguage;
52
+ a.cc_lang_pref = e.captionLanguage;
47
53
  break;
48
54
  case "showCaptions":
49
- t.cc_load_policy = e.showCaptions ? "1" : "0";
55
+ a.cc_load_policy = e.showCaptions ? "1" : "0";
50
56
  break;
51
57
  case "showAnnotations":
52
- t.iv_load_policy = e.showAnnotations ? "1" : "3";
58
+ a.iv_load_policy = e.showAnnotations ? "1" : "3";
53
59
  break;
54
60
  case "startTime":
55
- t.start = (r = e.startTime) == null ? void 0 : r.toString();
61
+ a.start = (n = e.startTime) == null ? void 0 : n.toString();
56
62
  break;
57
63
  case "endTime":
58
- t.end = (s = e.endTime) == null ? void 0 : s.toString();
64
+ a.end = (i = e.endTime) == null ? void 0 : i.toString();
59
65
  break;
60
66
  case "disableKeyboard":
61
- t.disablekb = e.disableKeyboard ? "1" : "0";
67
+ a.disablekb = e.disableKeyboard ? "1" : "0";
62
68
  break;
63
69
  case "language":
64
- t.hl = e.language;
70
+ a.hl = e.language;
65
71
  break;
66
72
  case "listId":
67
- t.list = e.listId;
73
+ a.list = e.listId;
68
74
  break;
69
75
  case "listType":
70
- t.listType = e.listType;
76
+ a.listType = e.listType;
71
77
  break;
72
78
  case "color":
73
- t.color = e.color;
79
+ a.color = e.color;
74
80
  break;
75
81
  case "origin":
76
- t.origin = e.origin;
82
+ a.origin = e.origin;
77
83
  break;
78
84
  case "referrer":
79
- t.widget_referrer = e.referrer;
85
+ a.widget_referrer = e.referrer;
80
86
  break;
81
87
  case "playlist":
82
- t.playlist = e.playlist;
88
+ a.playlist = e.playlist;
83
89
  break;
84
90
  }
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);
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);
91
97
  };
92
98
  let g = !1;
93
99
  const T = (e) => {
94
100
  if (!(g || window.matchMedia("(hover: none)").matches)) {
95
101
  try {
96
- const a = new URL(e);
97
- h(a.origin);
102
+ const t = new URL(e);
103
+ p(t.origin);
98
104
  } catch {
99
105
  }
100
- h(w), g = !0;
106
+ p(w), g = !0;
101
107
  }
102
108
  }, 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 = ({
103
109
  title: e,
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
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
113
119
  }) => {
114
- const [m, b] = f(0);
120
+ const [m, b] = h(0);
115
121
  return y(() => {
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);
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);
123
129
  return;
124
130
  }
125
- l || i(j(d));
126
- }, [i, s, c, l]), r === "canvas" || a === "initial" ? null : /* @__PURE__ */ u(
131
+ o || s(j(d));
132
+ }, [s, i, r, o]), n === "canvas" || t === "initial" ? null : /* @__PURE__ */ u(
127
133
  "iframe",
128
134
  {
129
135
  title: e,
130
- src: c,
131
- loading: o,
136
+ src: r,
137
+ loading: l,
132
138
  allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
133
139
  allowFullScreen: !0,
134
140
  style: {
@@ -140,23 +146,23 @@ const T = (e) => {
140
146
  border: "none"
141
147
  },
142
148
  onLoad: () => {
143
- n("ready"), b(1);
149
+ c("ready"), b(1);
144
150
  }
145
151
  }
146
152
  );
147
- }, P = C(
153
+ }, P = L(
148
154
  ({
149
155
  url: e,
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(
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(
158
164
  {
159
- ...r,
165
+ ...n,
160
166
  url: e,
161
167
  autoplay: !0
162
168
  },
@@ -166,26 +172,26 @@ const T = (e) => {
166
172
  E.Provider,
167
173
  {
168
174
  value: {
169
- status: n,
175
+ status: c,
170
176
  previewImageUrl: m,
171
177
  onInitPlayer() {
172
- d !== "canvas" && i("loading");
178
+ d !== "canvas" && s("loading");
173
179
  }
174
180
  },
175
- children: /* @__PURE__ */ u("div", { ...r, ref: s, children: p ? /* @__PURE__ */ _(R, { children: [
176
- l,
181
+ children: /* @__PURE__ */ u("div", { ...n, ref: i, children: f ? /* @__PURE__ */ R(_, { children: [
182
+ o,
177
183
  /* @__PURE__ */ u(
178
184
  N,
179
185
  {
180
- title: r.title,
181
- autoplay: o,
182
- videoUrl: p,
186
+ title: n.title,
187
+ autoplay: l,
188
+ videoUrl: f,
183
189
  previewImageUrl: m,
184
- loading: a,
185
- showPreview: c,
190
+ loading: t,
191
+ showPreview: r,
186
192
  renderer: d,
187
- status: n,
188
- onStatusChange: i,
193
+ status: c,
194
+ onStatusChange: s,
189
195
  onPreviewImageUrlChange: b
190
196
  }
191
197
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webstudio-is/sdk-components-react",
3
- "version": "0.0.0-4f7bf18",
3
+ "version": "0.0.0-588fe22",
4
4
  "description": "Webstudio default library for react",
5
5
  "author": "Webstudio <github@webstudio.is>",
6
6
  "homepage": "https://webstudio.is",
@@ -49,10 +49,10 @@
49
49
  "colord": "^2.9.3",
50
50
  "micromark": "^4.0.1",
51
51
  "micromark-extension-gfm-table": "^2.1.0",
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"
52
+ "@webstudio-is/icons": "0.0.0-588fe22",
53
+ "@webstudio-is/sdk": "0.0.0-588fe22",
54
+ "@webstudio-is/image": "0.0.0-588fe22",
55
+ "@webstudio-is/react-sdk": "0.0.0-588fe22"
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/template": "0.0.0-4f7bf18",
66
- "@webstudio-is/tsconfig": "1.0.7",
67
- "@webstudio-is/sdk-cli": "0.94.0"
65
+ "@webstudio-is/template": "0.0.0-588fe22",
66
+ "@webstudio-is/sdk-cli": "0.94.0",
67
+ "@webstudio-is/tsconfig": "1.0.7"
68
68
  },
69
69
  "scripts": {
70
70
  "build": "vite build --config ../../vite.sdk-components.config.ts",