sanity-plugin-mux-input 2.1.0 → 2.2.0

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 (67) hide show
  1. package/lib/index.cjs +4037 -4
  2. package/lib/index.cjs.map +1 -1
  3. package/lib/index.d.ts +14 -1
  4. package/lib/index.js +4026 -2
  5. package/lib/index.js.map +1 -1
  6. package/package.json +27 -28
  7. package/src/actions/assets.ts +30 -2
  8. package/src/clients/upChunkObservable.ts +1 -1
  9. package/src/components/ConfigureApi.tsx +9 -1
  10. package/src/components/FormField.tsx +8 -10
  11. package/src/components/IconInfo.tsx +23 -0
  12. package/src/components/Input.styled.tsx +0 -8
  13. package/src/components/Input.tsx +4 -3
  14. package/src/components/InputBrowser.tsx +1 -8
  15. package/src/components/Player.styled.tsx +5 -144
  16. package/src/components/Player.tsx +23 -109
  17. package/src/components/PlayerActionsMenu.tsx +0 -4
  18. package/src/components/SelectAsset.tsx +18 -58
  19. package/src/components/SelectSortOptions.tsx +45 -0
  20. package/src/components/SpinnerBox.tsx +17 -0
  21. package/src/components/StudioTool.tsx +20 -0
  22. package/src/components/VideoDetails/DeleteDialog.tsx +156 -0
  23. package/src/components/VideoDetails/VideoDetails.tsx +298 -0
  24. package/src/components/VideoDetails/VideoReferences.tsx +70 -0
  25. package/src/components/VideoDetails/useVideoDetails.ts +85 -0
  26. package/src/components/VideoInBrowser.tsx +183 -0
  27. package/src/components/VideoMetadata.tsx +43 -0
  28. package/src/components/VideoPlayer.tsx +69 -0
  29. package/src/components/VideoThumbnail.tsx +106 -0
  30. package/src/components/VideosBrowser.tsx +83 -0
  31. package/src/components/__legacy__Uploader.tsx +2 -9
  32. package/src/components/documentPreview/DocumentPreview.tsx +107 -0
  33. package/src/components/documentPreview/DraftStatus.tsx +34 -0
  34. package/src/components/documentPreview/MissingSchemaType.tsx +33 -0
  35. package/src/components/documentPreview/PaneItemPreview.tsx +71 -0
  36. package/src/components/documentPreview/PublishedStatus.tsx +35 -0
  37. package/src/components/documentPreview/TimeAgo.tsx +13 -0
  38. package/src/components/documentPreview/paneItemTypes.ts +7 -0
  39. package/src/components/icons/Resolution.tsx +12 -0
  40. package/src/components/icons/StopWatch.tsx +20 -0
  41. package/src/components/icons/ToolIcon.tsx +21 -0
  42. package/src/hooks/useAssets.ts +61 -0
  43. package/src/hooks/useCancelUpload.ts +2 -2
  44. package/src/hooks/useClient.ts +3 -1
  45. package/src/hooks/useDocReferences.ts +21 -0
  46. package/src/hooks/useInView.ts +45 -0
  47. package/src/index.ts +2 -0
  48. package/src/plugin.tsx +1 -1
  49. package/src/util/constants.ts +7 -0
  50. package/src/util/createSearchFilter.ts +78 -0
  51. package/src/util/formatSeconds.ts +22 -0
  52. package/src/util/getAnimatedPosterSrc.ts +1 -1
  53. package/src/util/getPlaybackId.ts +1 -1
  54. package/src/util/getPlaybackPolicy.ts +1 -1
  55. package/src/util/getVideoMetadata.ts +18 -0
  56. package/src/util/types.ts +16 -1
  57. package/lib/_chunks/Player-d8f163ed.cjs +0 -474
  58. package/lib/_chunks/Player-d8f163ed.cjs.map +0 -1
  59. package/lib/_chunks/Player-fb9712c0.js +0 -465
  60. package/lib/_chunks/Player-fb9712c0.js.map +0 -1
  61. package/lib/_chunks/index-0656ede8.js +0 -3229
  62. package/lib/_chunks/index-0656ede8.js.map +0 -1
  63. package/lib/_chunks/index-9cd542f1.cjs +0 -3271
  64. package/lib/_chunks/index-9cd542f1.cjs.map +0 -1
  65. package/src/components/EditThumbnailDialog.tsx +0 -74
  66. package/src/components/VideoSource.styled.tsx +0 -235
  67. package/src/components/VideoSource.tsx +0 -318
@@ -1,3271 +0,0 @@
1
- 'use strict';
2
-
3
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
4
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
5
- var sanity = require('sanity');
6
- var jsxRuntime = require('react/jsx-runtime');
7
- var React = require('react');
8
- var useSWR = require('swr');
9
- var rxjs = require('rxjs');
10
- var operators = require('rxjs/operators');
11
- var uuid = require('@sanity/uuid');
12
- var UpChunk = require('@mux/upchunk');
13
- var ui = require('@sanity/ui');
14
- var icons = require('@sanity/icons');
15
- var motion = require('motion');
16
- var styled = require('styled-components');
17
- var useDevicePixelRatio = require('use-device-pixel-ratio');
18
- var suspendReact = require('suspend-react');
19
- var useErrorBoundary = require('use-error-boundary');
20
- var scrollIntoView = require('scroll-into-view-if-needed');
21
- function _interopDefaultCompat(e) {
22
- return e && typeof e === 'object' && 'default' in e ? e : {
23
- default: e
24
- };
25
- }
26
- function _interopNamespaceCompat(e) {
27
- if (e && typeof e === 'object' && 'default' in e) return e;
28
- var n = Object.create(null);
29
- if (e) {
30
- Object.keys(e).forEach(function (k) {
31
- if (k !== 'default') {
32
- var d = Object.getOwnPropertyDescriptor(e, k);
33
- Object.defineProperty(n, k, d.get ? d : {
34
- enumerable: true,
35
- get: function () {
36
- return e[k];
37
- }
38
- });
39
- }
40
- });
41
- }
42
- n.default = e;
43
- return Object.freeze(n);
44
- }
45
- var React__default = /*#__PURE__*/_interopDefaultCompat(React);
46
- var useSWR__default = /*#__PURE__*/_interopDefaultCompat(useSWR);
47
- var UpChunk__namespace = /*#__PURE__*/_interopNamespaceCompat(UpChunk);
48
- var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
49
- var scrollIntoView__default = /*#__PURE__*/_interopDefaultCompat(scrollIntoView);
50
- const path$1 = ["assetId", "data", "playbackId", "status", "thumbTime", "filename"];
51
- const useAssetDocumentValues = asset => sanity.useDocumentValues(sanity.isReference(asset) ? asset._ref : "", path$1);
52
- function useClient() {
53
- return sanity.useClient({
54
- apiVersion: "2022-09-14"
55
- });
56
- }
57
- function useDialogState() {
58
- return React.useState(false);
59
- }
60
- const useMuxPolling = asset => {
61
- var _a, _b;
62
- const client = useClient();
63
- const projectId = sanity.useProjectId();
64
- const dataset = sanity.useDataset();
65
- const shouldFetch = React.useMemo(() => {
66
- var _a2, _b2;
67
- return !!(asset == null ? void 0 : asset.assetId) && ((asset == null ? void 0 : asset.status) === "preparing" || ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing");
68
- }, [asset == null ? void 0 : asset.assetId, (_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status, asset == null ? void 0 : asset.status]);
69
- return useSWR__default.default(shouldFetch ? "/".concat(projectId, "/addons/mux/assets/").concat(dataset, "/data/").concat(asset == null ? void 0 : asset.assetId) : null, async () => {
70
- const {
71
- data
72
- } = await client.request({
73
- url: "/addons/mux/assets/".concat(dataset, "/data/").concat(asset.assetId),
74
- withCredentials: true,
75
- method: "GET"
76
- });
77
- client.patch(asset._id).set({
78
- status: data.status,
79
- data
80
- }).commit({
81
- returnDocuments: false
82
- });
83
- }, {
84
- refreshInterval: 2e3,
85
- refreshWhenHidden: true,
86
- dedupingInterval: 1e3
87
- });
88
- };
89
- const name = "mux-input";
90
- const cacheNs = "sanity-plugin-mux-input";
91
- const muxSecretsDocumentId = "secrets.mux";
92
- const path = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"];
93
- const useSecretsDocumentValues = () => {
94
- const {
95
- error,
96
- isLoading,
97
- value
98
- } = sanity.useDocumentValues(muxSecretsDocumentId, path);
99
- const cache = React.useMemo(() => {
100
- const exists = Boolean(value);
101
- const secrets = {
102
- token: (value == null ? void 0 : value.token) || null,
103
- secretKey: (value == null ? void 0 : value.secretKey) || null,
104
- enableSignedUrls: (value == null ? void 0 : value.enableSignedUrls) || false,
105
- signingKeyId: (value == null ? void 0 : value.signingKeyId) || null,
106
- signingKeyPrivate: (value == null ? void 0 : value.signingKeyPrivate) || null
107
- };
108
- return {
109
- isInitialSetup: !exists,
110
- needsSetup: !(secrets == null ? void 0 : secrets.token) || !(secrets == null ? void 0 : secrets.secretKey),
111
- secrets
112
- };
113
- }, [value]);
114
- return {
115
- error,
116
- isLoading,
117
- value: cache
118
- };
119
- };
120
- function createUpChunkObservable(uuid, uploadUrl, source) {
121
- return new rxjs.Observable(subscriber => {
122
- const upchunk = UpChunk__namespace.createUpload({
123
- endpoint: uploadUrl,
124
- file: source,
125
- dynamicChunkSize: true
126
- // changes the chunk size based on network speeds
127
- });
128
-
129
- const successHandler = () => {
130
- subscriber.next({
131
- type: "success",
132
- id: uuid
133
- });
134
- subscriber.complete();
135
- };
136
- const errorHandler = data => subscriber.error(new Error(data.detail.message));
137
- const progressHandler = data => {
138
- return subscriber.next({
139
- type: "progress",
140
- percent: data.detail
141
- });
142
- };
143
- const offlineHandler = () => {
144
- upchunk.pause();
145
- subscriber.next({
146
- type: "pause",
147
- id: uuid
148
- });
149
- };
150
- const onlineHandler = () => {
151
- upchunk.resume();
152
- subscriber.next({
153
- type: "resume",
154
- id: uuid
155
- });
156
- };
157
- upchunk.on("success", successHandler);
158
- upchunk.on("error", errorHandler);
159
- upchunk.on("progress", progressHandler);
160
- upchunk.on("offline", offlineHandler);
161
- upchunk.on("online", onlineHandler);
162
- return () => upchunk.abort();
163
- });
164
- }
165
- function deleteAsset(client, assetId) {
166
- const {
167
- dataset
168
- } = client.config();
169
- return client.request({
170
- url: "/addons/mux/assets/".concat(dataset, "/").concat(assetId),
171
- withCredentials: true,
172
- method: "DELETE"
173
- });
174
- }
175
- function getAsset(client, assetId) {
176
- const {
177
- dataset
178
- } = client.config();
179
- return client.request({
180
- url: "/addons/mux/assets/".concat(dataset, "/data/").concat(assetId),
181
- withCredentials: true,
182
- method: "GET"
183
- });
184
- }
185
- function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate) {
186
- const doc = {
187
- _id: "secrets.mux",
188
- _type: "mux.apiKey",
189
- token,
190
- secretKey,
191
- enableSignedUrls,
192
- signingKeyId,
193
- signingKeyPrivate
194
- };
195
- return client.createOrReplace(doc);
196
- }
197
- function createSigningKeys(client) {
198
- const {
199
- dataset
200
- } = client.config();
201
- return client.request({
202
- url: "/addons/mux/signing-keys/".concat(dataset),
203
- withCredentials: true,
204
- method: "POST"
205
- });
206
- }
207
- function testSecrets(client) {
208
- const {
209
- dataset
210
- } = client.config();
211
- return client.request({
212
- url: "/addons/mux/secrets/".concat(dataset, "/test"),
213
- withCredentials: true,
214
- method: "GET"
215
- });
216
- }
217
- async function haveValidSigningKeys(client, signingKeyId, signingKeyPrivate) {
218
- if (!(signingKeyId && signingKeyPrivate)) {
219
- return false;
220
- }
221
- const {
222
- dataset
223
- } = client.config();
224
- try {
225
- const res = await client.request({
226
- url: "/addons/mux/signing-keys/".concat(dataset, "/").concat(signingKeyId),
227
- withCredentials: true,
228
- method: "GET"
229
- });
230
- return !!(res.data && res.data.id);
231
- } catch (e) {
232
- console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid");
233
- return false;
234
- }
235
- }
236
- function testSecretsObservable(client) {
237
- const {
238
- dataset
239
- } = client.config();
240
- return rxjs.defer(() => client.observable.request({
241
- url: "/addons/mux/secrets/".concat(dataset, "/test"),
242
- withCredentials: true,
243
- method: "GET"
244
- }));
245
- }
246
- function cancelUpload(client, uuid) {
247
- return client.observable.request({
248
- url: "/addons/mux/uploads/".concat(client.config().dataset, "/").concat(uuid),
249
- withCredentials: true,
250
- method: "DELETE"
251
- });
252
- }
253
- function uploadUrl(config, client, url) {
254
- let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
255
- return testUrl(url).pipe(operators.switchMap(validUrl => {
256
- return rxjs.concat(rxjs.of({
257
- type: "url",
258
- url: validUrl
259
- }), testSecretsObservable(client).pipe(operators.switchMap(json => {
260
- if (!json || !json.status) {
261
- return rxjs.throwError(new Error("Invalid credentials"));
262
- }
263
- const uuid$1 = uuid.uuid();
264
- const {
265
- enableSignedUrls
266
- } = options;
267
- const muxBody = {
268
- input: validUrl,
269
- playback_policy: [enableSignedUrls ? "signed" : "public"],
270
- mp4_support: config.mp4_support
271
- };
272
- const query = {
273
- muxBody: JSON.stringify(muxBody),
274
- filename: validUrl.split("/").slice(-1)[0]
275
- };
276
- const dataset = client.config().dataset;
277
- return rxjs.defer(() => client.observable.request({
278
- url: "/addons/mux/assets/".concat(dataset),
279
- withCredentials: true,
280
- method: "POST",
281
- headers: {
282
- "MUX-Proxy-UUID": uuid$1,
283
- "Content-Type": "application/json"
284
- },
285
- query
286
- })).pipe(operators.mergeMap(result => {
287
- const asset = result && result.results && result.results[0] && result.results[0].document || null;
288
- if (!asset) {
289
- return rxjs.throwError(new Error("No asset document returned"));
290
- }
291
- return rxjs.of({
292
- type: "success",
293
- id: uuid$1,
294
- asset
295
- });
296
- }));
297
- })));
298
- }));
299
- }
300
- function uploadFile(config, client, file) {
301
- let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
302
- return testFile(file).pipe(operators.switchMap(fileOptions => {
303
- return rxjs.concat(rxjs.of({
304
- type: "file",
305
- file: fileOptions
306
- }), testSecretsObservable(client).pipe(operators.switchMap(json => {
307
- if (!json || !json.status) {
308
- return rxjs.throwError(new Error("Invalid credentials"));
309
- }
310
- const uuid$1 = uuid.uuid();
311
- const {
312
- enableSignedUrls
313
- } = options;
314
- const body = {
315
- mp4_support: config.mp4_support,
316
- playback_policy: [enableSignedUrls ? "signed" : "public"]
317
- };
318
- return rxjs.concat(rxjs.of({
319
- type: "uuid",
320
- uuid: uuid$1
321
- }), rxjs.defer(() => client.observable.request({
322
- url: "/addons/mux/uploads/".concat(client.config().dataset),
323
- withCredentials: true,
324
- method: "POST",
325
- headers: {
326
- "MUX-Proxy-UUID": uuid$1,
327
- "Content-Type": "application/json"
328
- },
329
- body
330
- })).pipe(operators.mergeMap(result => {
331
- return createUpChunkObservable(uuid$1, result.upload.url, file).pipe(
332
- // eslint-disable-next-line no-warning-comments
333
- // @TODO type the observable events
334
- // eslint-disable-next-line max-nested-callbacks
335
- operators.mergeMap(event => {
336
- if (event.type !== "success") {
337
- return rxjs.of(event);
338
- }
339
- return rxjs.from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(
340
- // eslint-disable-next-line max-nested-callbacks
341
- operators.mergeMap(doc => rxjs.of({
342
- ...event,
343
- asset: doc
344
- })));
345
- }),
346
- // eslint-disable-next-line max-nested-callbacks
347
- operators.catchError(err => {
348
- return cancelUpload(client, uuid$1).pipe(operators.mergeMapTo(rxjs.throwError(err)));
349
- }));
350
- })));
351
- })));
352
- }));
353
- }
354
- function getUpload(client, assetId) {
355
- const {
356
- dataset
357
- } = client.config();
358
- return client.request({
359
- url: "/addons/mux/uploads/".concat(dataset, "/").concat(assetId),
360
- withCredentials: true,
361
- method: "GET"
362
- });
363
- }
364
- function pollUpload(client, uuid) {
365
- const maxTries = 10;
366
- let pollInterval;
367
- let tries = 0;
368
- let assetId;
369
- let upload;
370
- return new Promise((resolve, reject) => {
371
- pollInterval = setInterval(async () => {
372
- try {
373
- upload = await getUpload(client, uuid);
374
- } catch (err) {
375
- reject(err);
376
- return;
377
- }
378
- assetId = upload && upload.data && upload.data.asset_id;
379
- if (assetId) {
380
- clearInterval(pollInterval);
381
- resolve(upload);
382
- }
383
- if (tries > maxTries) {
384
- clearInterval(pollInterval);
385
- reject(new Error("Upload did not finish"));
386
- }
387
- tries++;
388
- }, 2e3);
389
- });
390
- }
391
- async function updateAssetDocumentFromUpload(client, uuid) {
392
- let upload;
393
- let asset;
394
- try {
395
- upload = await pollUpload(client, uuid);
396
- } catch (err) {
397
- return Promise.reject(err);
398
- }
399
- try {
400
- asset = await getAsset(client, upload.data.asset_id);
401
- } catch (err) {
402
- return Promise.reject(err);
403
- }
404
- const doc = {
405
- _id: uuid,
406
- _type: "mux.videoAsset",
407
- status: asset.data.status,
408
- data: asset.data,
409
- assetId: asset.data.id,
410
- playbackId: asset.data.playback_ids[0].id,
411
- uploadId: upload.data.id
412
- };
413
- return client.createOrReplace(doc).then(() => {
414
- return doc;
415
- });
416
- }
417
- function testFile(file) {
418
- if (typeof window !== "undefined" && file instanceof window.File) {
419
- const fileOptions = optionsFromFile({}, file);
420
- return rxjs.of(fileOptions);
421
- }
422
- return rxjs.throwError(new Error("Invalid file"));
423
- }
424
- function testUrl(url) {
425
- const error = new Error("Invalid URL");
426
- if (typeof url !== "string") {
427
- return rxjs.throwError(error);
428
- }
429
- let parsed;
430
- try {
431
- parsed = new URL(url);
432
- } catch (err) {
433
- return rxjs.throwError(error);
434
- }
435
- if (parsed && !parsed.protocol.match(/http:|https:/)) {
436
- return rxjs.throwError(error);
437
- }
438
- return rxjs.of(url);
439
- }
440
- function optionsFromFile(opts, file) {
441
- if (typeof window === "undefined" || !(file instanceof window.File)) {
442
- return opts;
443
- }
444
- return {
445
- name: opts.preserveFilename === false ? void 0 : file.name,
446
- type: file.type
447
- };
448
- }
449
- function extractDroppedFiles(dataTransfer) {
450
- const files = Array.from(dataTransfer.files || []);
451
- const items = Array.from(dataTransfer.items || []);
452
- if (files && files.length > 0) {
453
- return Promise.resolve(files);
454
- }
455
- return normalizeItems(items).then(arr => arr.flat());
456
- }
457
- function normalizeItems(items) {
458
- return Promise.all(items.map(item => {
459
- if (item.kind === "file" && item.webkitGetAsEntry) {
460
- let entry;
461
- try {
462
- entry = item.webkitGetAsEntry();
463
- } catch (err) {
464
- return [item.getAsFile()];
465
- }
466
- if (!entry) {
467
- return [];
468
- }
469
- return entry.isDirectory ? walk(entry) : [item.getAsFile()];
470
- }
471
- if (item.kind === "file") {
472
- const file = item.getAsFile();
473
- return Promise.resolve(file ? [file] : []);
474
- }
475
- return new Promise(resolve => item.getAsString(resolve)).then(str => str ? [new File([str], "unknown.txt", {
476
- type: item.type
477
- })] : []);
478
- }));
479
- }
480
- function isFile(entry) {
481
- return entry.isFile;
482
- }
483
- function isDirectory(entry) {
484
- return entry.isDirectory;
485
- }
486
- function walk(entry) {
487
- if (isFile(entry)) {
488
- return new Promise(resolve => entry.file(resolve)).then(file => [file]);
489
- }
490
- if (isDirectory(entry)) {
491
- const dir = entry.createReader();
492
- return new Promise(resolve => dir.readEntries(resolve)).then(entries => entries.filter(entr => !entr.name.startsWith("."))).then(entries => Promise.all(entries.map(walk)).then(arr => arr.flat()));
493
- }
494
- return Promise.resolve([]);
495
- }
496
- const _id = "secrets.mux";
497
- function readSecrets(client) {
498
- const {
499
- projectId,
500
- dataset
501
- } = client.config();
502
- return suspendReact.suspend(async () => {
503
- const data = await client.fetch( /* groq */"*[_id == $_id][0]{\n token,\n secretKey,\n enableSignedUrls,\n signingKeyId,\n signingKeyPrivate\n }", {
504
- _id
505
- });
506
- return {
507
- token: (data == null ? void 0 : data.token) || null,
508
- secretKey: (data == null ? void 0 : data.secretKey) || null,
509
- enableSignedUrls: Boolean(data == null ? void 0 : data.enableSignedUrls) || false,
510
- signingKeyId: (data == null ? void 0 : data.signingKeyId) || null,
511
- signingKeyPrivate: (data == null ? void 0 : data.signingKeyPrivate) || null
512
- };
513
- }, [cacheNs, _id, projectId, dataset]);
514
- }
515
- function generateJwt(client, playbackId, aud, payload) {
516
- const {
517
- signingKeyId,
518
- signingKeyPrivate
519
- } = readSecrets(client);
520
- if (!signingKeyId) {
521
- throw new TypeError("Missing signingKeyId");
522
- }
523
- if (!signingKeyPrivate) {
524
- throw new TypeError("Missing signingKeyPrivate");
525
- }
526
- const {
527
- default: sign
528
- } = suspendReact.suspend(() => import('jsonwebtoken-esm/sign'), ["jsonwebtoken-esm/sign"]);
529
- return sign(payload ? JSON.parse(JSON.stringify(payload, (_, v) => v != null ? v : void 0)) : {}, atob(signingKeyPrivate), {
530
- algorithm: "RS256",
531
- keyid: signingKeyId,
532
- audience: aud,
533
- subject: playbackId,
534
- noTimestamp: true,
535
- expiresIn: "12h"
536
- });
537
- }
538
- function getPlaybackId(asset) {
539
- if (!(asset == null ? void 0 : asset.playbackId)) {
540
- console.error("Asset is missing a playbackId", {
541
- asset
542
- });
543
- throw new TypeError("Missing playbackId");
544
- }
545
- return asset.playbackId;
546
- }
547
- function getPlaybackPolicy(asset) {
548
- var _a, _b, _c, _d;
549
- return (_d = (_c = (_b = (_a = asset.data) == null ? void 0 : _a.playback_ids) == null ? void 0 : _b[0]) == null ? void 0 : _c.policy) != null ? _d : "public";
550
- }
551
- function getAnimatedPosterSrc(_ref) {
552
- let {
553
- asset,
554
- client,
555
- height,
556
- width,
557
- start = asset.thumbTime ? Math.max(0, asset.thumbTime - 2.5) : 0,
558
- end = start + 5,
559
- fps = 15
560
- } = _ref;
561
- const params = {
562
- height,
563
- width,
564
- start,
565
- end,
566
- fps
567
- };
568
- const playbackId = getPlaybackId(asset);
569
- let searchParams = new URLSearchParams(JSON.parse(JSON.stringify(params, (_, v) => v != null ? v : void 0)));
570
- if (getPlaybackPolicy(asset) === "signed") {
571
- const token = generateJwt(client, playbackId, "g", params);
572
- searchParams = new URLSearchParams({
573
- token
574
- });
575
- }
576
- return "https://image.mux.com/".concat(playbackId, "/animated.gif?").concat(searchParams);
577
- }
578
- function getPosterSrc(_ref2) {
579
- let {
580
- asset,
581
- client,
582
- fit_mode,
583
- height,
584
- time = asset.thumbTime,
585
- width
586
- } = _ref2;
587
- const params = {
588
- fit_mode,
589
- height,
590
- time,
591
- width
592
- };
593
- const playbackId = getPlaybackId(asset);
594
- let searchParams = new URLSearchParams(JSON.parse(JSON.stringify(params, (_, v) => v != null ? v : void 0)));
595
- if (getPlaybackPolicy(asset) === "signed") {
596
- const token = generateJwt(client, playbackId, "t", params);
597
- searchParams = new URLSearchParams({
598
- token
599
- });
600
- }
601
- return "https://image.mux.com/".concat(playbackId, "/thumbnail.png?").concat(searchParams);
602
- }
603
- const mediaDimensions = {
604
- aspect: 16 / 9
605
- };
606
- const ImageLoader = React.memo(function ImageLoader2(_ref3) {
607
- let {
608
- alt,
609
- src,
610
- height,
611
- width,
612
- aspectRatio
613
- } = _ref3;
614
- suspendReact.suspend(async () => {
615
- const img = new Image(width, height);
616
- img.decoding = "async";
617
- img.src = src;
618
- await img.decode();
619
- }, ["sanity-plugin-mux-input", "image", src]);
620
- return /* @__PURE__ */jsxRuntime.jsx("img", {
621
- alt,
622
- src,
623
- height,
624
- width,
625
- style: {
626
- aspectRatio
627
- }
628
- });
629
- });
630
- const VideoMediaPreview = styled__default.default(sanity.MediaPreview)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n img {\n object-fit: cover;\n }\n"])));
631
- const VideoMediaPreviewSignedSubtitle = _ref4 => {
632
- let {
633
- solo
634
- } = _ref4;
635
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
636
- space: 1,
637
- style: {
638
- marginTop: solo ? "-1.35em" : void 0,
639
- marginBottom: solo ? void 0 : "0.35rem"
640
- },
641
- children: [/* @__PURE__ */jsxRuntime.jsx(icons.LockIcon, {}), "Signed playback policy"]
642
- });
643
- };
644
- const PosterImage = _ref5 => {
645
- let {
646
- asset,
647
- height,
648
- width,
649
- showTip
650
- } = _ref5;
651
- const client = useClient();
652
- const src = getPosterSrc({
653
- asset,
654
- client,
655
- height,
656
- width,
657
- fit_mode: "smartcrop"
658
- });
659
- const subtitle = React.useMemo(() => showTip && getPlaybackPolicy(asset) === "signed" ? /* @__PURE__ */jsxRuntime.jsx(VideoMediaPreviewSignedSubtitle, {
660
- solo: true
661
- }) : void 0, [asset, showTip]);
662
- return /* @__PURE__ */jsxRuntime.jsx(VideoMediaPreview, {
663
- mediaDimensions,
664
- subtitle,
665
- title: /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
666
- children: null
667
- }),
668
- media: /* @__PURE__ */jsxRuntime.jsx(ImageLoader, {
669
- alt: "",
670
- src,
671
- height,
672
- width
673
- })
674
- });
675
- };
676
- const VideoThumbnail = React.memo(function VideoThumbnail2(_ref6) {
677
- let {
678
- asset,
679
- width,
680
- showTip
681
- } = _ref6;
682
- const {
683
- ErrorBoundary,
684
- didCatch,
685
- error
686
- } = useErrorBoundary.useErrorBoundary();
687
- const height = Math.round(width * 9 / 16);
688
- const subtitle = React.useMemo(() => showTip && getPlaybackPolicy(asset) === "signed" ? /* @__PURE__ */jsxRuntime.jsx(VideoMediaPreviewSignedSubtitle, {}) : void 0, [showTip, asset]);
689
- if (didCatch) {
690
- return /* @__PURE__ */jsxRuntime.jsx(VideoMediaPreview, {
691
- subtitle: error.message,
692
- mediaDimensions,
693
- title: "Error when loading thumbnail",
694
- media: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
695
- radius: 2,
696
- height: "fill",
697
- style: {
698
- position: "relative",
699
- width: "100%"
700
- },
701
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
702
- style: {
703
- display: "flex",
704
- justifyContent: "center",
705
- alignItems: "center",
706
- position: "absolute",
707
- top: 0,
708
- left: 0,
709
- right: 0,
710
- bottom: 0
711
- },
712
- children: /* @__PURE__ */jsxRuntime.jsx(icons.UnknownIcon, {})
713
- })
714
- })
715
- });
716
- }
717
- return /* @__PURE__ */jsxRuntime.jsx(ErrorBoundary, {
718
- children: /* @__PURE__ */jsxRuntime.jsx(React.Suspense, {
719
- fallback: /* @__PURE__ */jsxRuntime.jsx(VideoMediaPreview, {
720
- isPlaceholder: true,
721
- title: "Loading thumbnail...",
722
- subtitle,
723
- mediaDimensions
724
- }),
725
- children: /* @__PURE__ */jsxRuntime.jsx(PosterImage, {
726
- showTip,
727
- asset,
728
- height,
729
- width
730
- })
731
- })
732
- });
733
- });
734
- const AnimatedVideoMediaPreview = styled__default.default(sanity.MediaPreview)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n img {\n object-fit: contain;\n }\n"])));
735
- const AnimatedPosterImage = _ref7 => {
736
- let {
737
- asset,
738
- width
739
- } = _ref7;
740
- const client = useClient();
741
- const src = getAnimatedPosterSrc({
742
- asset,
743
- client,
744
- width
745
- });
746
- return /* @__PURE__ */jsxRuntime.jsx(AnimatedVideoMediaPreview, {
747
- withBorder: false,
748
- mediaDimensions,
749
- media: /* @__PURE__ */jsxRuntime.jsx(ImageLoader, {
750
- alt: "",
751
- src,
752
- width,
753
- aspectRatio: "16:9"
754
- })
755
- });
756
- };
757
- const AnimatedVideoThumbnail = React.memo(function AnimatedVideoThumbnail2(_ref8) {
758
- let {
759
- asset,
760
- width
761
- } = _ref8;
762
- const {
763
- ErrorBoundary,
764
- didCatch
765
- } = useErrorBoundary.useErrorBoundary();
766
- if (didCatch) {
767
- return null;
768
- }
769
- return /* @__PURE__ */jsxRuntime.jsx(ErrorBoundary, {
770
- children: /* @__PURE__ */jsxRuntime.jsx(React.Suspense, {
771
- fallback: /* @__PURE__ */jsxRuntime.jsx(FancyBackdrop, {
772
- children: /* @__PURE__ */jsxRuntime.jsx(VideoMediaPreview, {
773
- mediaDimensions,
774
- withBorder: false,
775
- media: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
776
- muted: true
777
- })
778
- })
779
- }),
780
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
781
- height: "fill",
782
- tone: "transparent",
783
- children: /* @__PURE__ */jsxRuntime.jsx(AnimatedPosterImage, {
784
- asset,
785
- width
786
- })
787
- })
788
- })
789
- });
790
- });
791
- const FancyBackdrop = styled__default.default(ui.Box)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n backdrop-filter: blur(8px) brightness(0.5) saturate(2);\n mix-blend-mode: color-dodge;\n"])));
792
- const ThumbGrid = styled__default.default(ui.Grid)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n"])));
793
- const CardLoadMore = styled__default.default(ui.Card)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-top: 1px solid var(--card-border-color);\n position: sticky;\n bottom: 0;\n z-index: 200;\n"])));
794
- function AssetActionsMenu(props) {
795
- const {
796
- asset
797
- } = props;
798
- const id = React.useId();
799
- const [dialogState, setDialogState] = React.useState();
800
- const [open, setOpen] = React.useState(false);
801
- const [menuElement, setMenuRef] = React.useState(null);
802
- const handleDelete = React.useCallback(() => setDialogState("confirm-delete"), []);
803
- const handleClick = React.useCallback(() => {
804
- setDialogState(false);
805
- setOpen(true);
806
- }, [setDialogState]);
807
- const handleClose = React.useCallback(() => {
808
- setDialogState(false);
809
- setOpen(false);
810
- }, [setDialogState]);
811
- React.useEffect(() => {
812
- if (open && dialogState) {
813
- setOpen(false);
814
- }
815
- }, [dialogState, open]);
816
- ui.useClickOutside(React.useCallback(() => setOpen(false), []), [menuElement]);
817
- return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
818
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.MenuButton, {
819
- id: "".concat(id, "-asset-menu"),
820
- button: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
821
- icon: icons.EllipsisVerticalIcon,
822
- mode: "ghost",
823
- onClick: handleClick,
824
- padding: 2
825
- }),
826
- menu: /* @__PURE__ */jsxRuntime.jsx(ui.Menu, {
827
- ref: setMenuRef,
828
- children: /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
829
- tone: "critical",
830
- icon: icons.TrashIcon,
831
- text: "Delete",
832
- onClick: handleDelete
833
- })
834
- }),
835
- portal: true,
836
- placement: "right"
837
- }), dialogState === "confirm-delete" && /* @__PURE__ */jsxRuntime.jsx(DeleteDialog, {
838
- asset,
839
- onClose: handleClose
840
- })]
841
- });
842
- }
843
- function DeleteDialog(props) {
844
- const {
845
- asset,
846
- onClose
847
- } = props;
848
- const client = useClient();
849
- const {
850
- push: pushToast
851
- } = ui.useToast();
852
- const [deleting, setDeleting] = React.useState(false);
853
- const [deleteOnMux, setDeleteOnMux] = React.useState(false);
854
- const id = React.useId();
855
- const width = 200 * useDevicePixelRatio.getDevicePixelRatio({
856
- maxDpr: 2
857
- });
858
- const handleDelete = React.useCallback(async () => {
859
- var _a, _b, _c;
860
- setDeleting(true);
861
- try {
862
- if (asset == null ? void 0 : asset._id) {
863
- await client.delete(asset._id);
864
- }
865
- if (deleteOnMux && (asset == null ? void 0 : asset.assetId)) {
866
- await deleteAsset(client, asset.assetId);
867
- }
868
- (_c = (_b = (_a = document.querySelector("[data-id=\"".concat(asset._id, "\"]"))) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.setAttribute) == null ? void 0 : _c.call(_b, "hidden", "true");
869
- } catch (err) {
870
- console.error("Failed during delete", err);
871
- pushToast({
872
- closable: true,
873
- description: err == null ? void 0 : err.message,
874
- duration: 5e3,
875
- title: "Uncaught error",
876
- status: "error"
877
- });
878
- } finally {
879
- setDeleting(false);
880
- onClose();
881
- }
882
- }, [asset._id, asset.assetId, client, deleteOnMux, onClose, pushToast]);
883
- return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
884
- onClose,
885
- id: "".concat(id, "-confirm-delete"),
886
- header: "Delete video",
887
- footer: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
888
- padding: 2,
889
- gap: 2,
890
- columns: 2,
891
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Button, {
892
- mode: "bleed",
893
- text: "Cancel",
894
- onClick: onClose
895
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
896
- text: "Delete",
897
- tone: "critical",
898
- icon: icons.TrashIcon,
899
- onClick: handleDelete,
900
- loading: deleting
901
- })]
902
- }),
903
- width: 1,
904
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
905
- paddingX: 0,
906
- paddingY: 0,
907
- space: 1,
908
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
909
- paddingX: [2, 3, 4],
910
- paddingY: [3, 3, 3, 4],
911
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
912
- columns: 3,
913
- gap: 3,
914
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
915
- style: {
916
- gridColumn: "span 2"
917
- },
918
- align: "center",
919
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
920
- padding: 4,
921
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
922
- space: 4,
923
- children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
924
- align: "center",
925
- as: "label",
926
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Checkbox, {
927
- checked: deleteOnMux,
928
- onChange: () => setDeleteOnMux(prev => !prev)
929
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
930
- style: {
931
- margin: "0 10px"
932
- },
933
- children: "Delete asset on Mux"
934
- })]
935
- }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
936
- align: "center",
937
- as: "label",
938
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Checkbox, {
939
- disabled: true,
940
- checked: true
941
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
942
- style: {
943
- margin: "0 10px"
944
- },
945
- children: "Delete video from dataset"
946
- })]
947
- })]
948
- })
949
- })
950
- }), /* @__PURE__ */jsxRuntime.jsx(VideoThumbnail, {
951
- asset,
952
- width,
953
- showTip: true
954
- })]
955
- })
956
- })
957
- })
958
- });
959
- }
960
- function VideoSource(_ref9) {
961
- let {
962
- assets,
963
- isLoading,
964
- isLastPage,
965
- onSelect,
966
- onLoadMore
967
- } = _ref9;
968
- const handleClick = React.useCallback(event => onSelect(event.currentTarget.dataset.id), [onSelect]);
969
- const handleKeyPress = React.useCallback(event => {
970
- if (event.key === "Enter") {
971
- onSelect(event.currentTarget.dataset.id);
972
- }
973
- }, [onSelect]);
974
- const width = 200 * useDevicePixelRatio.getDevicePixelRatio({
975
- maxDpr: 2
976
- });
977
- return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
978
- children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Box, {
979
- padding: 4,
980
- children: [/* @__PURE__ */jsxRuntime.jsx(ThumbGrid, {
981
- gap: 2,
982
- children: assets.map(asset => /* @__PURE__ */jsxRuntime.jsx(VideoSourceItem, {
983
- asset,
984
- onClick: handleClick,
985
- onKeyPress: handleKeyPress,
986
- width
987
- }, asset._id))
988
- }), isLoading && assets.length === 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
989
- justify: "center",
990
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
991
- muted: true
992
- })
993
- }), !isLoading && assets.length === 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
994
- align: "center",
995
- muted: true,
996
- children: "No videos"
997
- })]
998
- }), assets.length > 0 && !isLastPage && /* @__PURE__ */jsxRuntime.jsx(CardLoadMore, {
999
- tone: "default",
1000
- padding: 4,
1001
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
1002
- direction: "column",
1003
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
1004
- type: "button",
1005
- icon: icons.DownloadIcon,
1006
- loading: isLoading,
1007
- onClick: onLoadMore,
1008
- text: "Load more",
1009
- tone: "primary"
1010
- })
1011
- })
1012
- })]
1013
- });
1014
- }
1015
- const _VideoSourceItem = _ref10 => {
1016
- let {
1017
- asset,
1018
- onClick,
1019
- onKeyPress,
1020
- width
1021
- } = _ref10;
1022
- const [hover, setHover] = React.useState(null);
1023
- const ref = React.useRef(null);
1024
- React.useLayoutEffect(() => {
1025
- if (!ref.current || hover === null) {
1026
- return;
1027
- }
1028
- if (hover) {
1029
- motion.animate(ref.current, {
1030
- opacity: 1
1031
- });
1032
- } else {
1033
- motion.animate(ref.current, {
1034
- opacity: 0
1035
- });
1036
- }
1037
- }, [hover]);
1038
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Box, {
1039
- height: "fill",
1040
- style: {
1041
- position: "relative"
1042
- },
1043
- children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Card, {
1044
- as: "button",
1045
- "data-id": asset._id,
1046
- onClick,
1047
- onKeyPress,
1048
- tabIndex: 0,
1049
- radius: 2,
1050
- padding: 1,
1051
- style: {
1052
- lineHeight: 0,
1053
- position: "relative"
1054
- },
1055
- __unstable_focusRing: true,
1056
- onMouseEnter: () => setHover(true),
1057
- onMouseLeave: () => setHover(false),
1058
- children: [/* @__PURE__ */jsxRuntime.jsx(VideoThumbnail, {
1059
- asset,
1060
- width,
1061
- showTip: true
1062
- }), (asset == null ? void 0 : asset.playbackId) && /* @__PURE__ */jsxRuntime.jsx(AnimateWrapper, {
1063
- tone: "transparent",
1064
- ref,
1065
- margin: 1,
1066
- radius: 1,
1067
- children: hover !== null && /* @__PURE__ */jsxRuntime.jsx(AnimatedVideoThumbnail, {
1068
- asset,
1069
- width
1070
- })
1071
- })]
1072
- }), /* @__PURE__ */jsxRuntime.jsx(ActionsAssetsContainer, {
1073
- children: /* @__PURE__ */jsxRuntime.jsx(AssetActionsMenu, {
1074
- asset
1075
- })
1076
- })]
1077
- });
1078
- };
1079
- const VideoSourceItem = React.memo(_VideoSourceItem);
1080
- const AnimateWrapper = styled__default.default(ui.Card)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n will-change: opacity;\n background: transparent;\n background-color: hsl(0deg 0% 0% / 33%);\n opacity: 0;\n pointer-events: none;\n"])));
1081
- const ActionsAssetsContainer = styled__default.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n position: absolute;\n z-index: 300;\n opacity: 0;\n top: 7px;\n right: 7px;\n\n button:hover + &,\n button:focus-visible + &,\n &:hover,\n &:focus-visible {\n opacity: 1;\n }\n"])));
1082
- const PER_PAGE = 200;
1083
- function createQuery() {
1084
- let start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
1085
- let end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : PER_PAGE;
1086
- return (/* groq */"*[_type == \"mux.videoAsset\"] | order(_updatedAt desc) [".concat(start, "...").concat(end, "]")
1087
- );
1088
- }
1089
- function SelectAssets(_ref11) {
1090
- let {
1091
- asset,
1092
- onChange,
1093
- setDialogState
1094
- } = _ref11;
1095
- const client = useClient();
1096
- const pageNoRef = React.useRef(0);
1097
- const [isLastPage, setLastPage] = React.useState(false);
1098
- const [isLoading, setLoading] = React.useState(false);
1099
- const [assets, setAssets] = React.useState([]);
1100
- const fetchPage = React.useCallback(pageNo => {
1101
- const start = pageNo * PER_PAGE;
1102
- const end = start + PER_PAGE;
1103
- setLoading(true);
1104
- return client.fetch(createQuery(start, end)).then(result => {
1105
- setLastPage(result.length < PER_PAGE);
1106
- setAssets(prev => prev.concat(result));
1107
- }).finally(() => setLoading(false));
1108
- }, [client]);
1109
- const handleSelect = React.useCallback(id => {
1110
- const selected = assets.find(doc => doc._id === id);
1111
- if (!selected) {
1112
- throw new TypeError("Failed to find video asset with id: ".concat(id));
1113
- }
1114
- onChange(sanity.PatchEvent.from([sanity.setIfMissing({
1115
- asset: {}
1116
- }), sanity.set({
1117
- _type: "reference",
1118
- _weak: true,
1119
- _ref: selected._id
1120
- }, ["asset"])]));
1121
- setDialogState(false);
1122
- }, [assets, onChange, setDialogState]);
1123
- const handleLoadMore = React.useCallback(() => {
1124
- fetchPage(++pageNoRef.current);
1125
- }, [fetchPage]);
1126
- React.useEffect(() => void fetchPage(pageNoRef.current), [fetchPage]);
1127
- return /* @__PURE__ */jsxRuntime.jsx(VideoSource, {
1128
- onSelect: handleSelect,
1129
- assets,
1130
- isLastPage,
1131
- isLoading,
1132
- onLoadMore: handleLoadMore
1133
- });
1134
- }
1135
- function InputBrowser(_ref12) {
1136
- let {
1137
- setDialogState,
1138
- asset,
1139
- onChange
1140
- } = _ref12;
1141
- const id = "InputBrowser".concat(React.useId());
1142
- const handleClose = React.useCallback(() => setDialogState(false), [setDialogState]);
1143
- return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
1144
- scheme: "dark",
1145
- __unstable_autoFocus: true,
1146
- header: "Select video",
1147
- id,
1148
- onClose: handleClose,
1149
- width: 2,
1150
- children: /* @__PURE__ */jsxRuntime.jsx(SelectAssets, {
1151
- asset,
1152
- onChange,
1153
- setDialogState
1154
- })
1155
- });
1156
- }
1157
- var reactIsExports = {};
1158
- var reactIs = {
1159
- get exports() {
1160
- return reactIsExports;
1161
- },
1162
- set exports(v) {
1163
- reactIsExports = v;
1164
- }
1165
- };
1166
- var reactIs_production_min = {};
1167
-
1168
- /**
1169
- * @license React
1170
- * react-is.production.min.js
1171
- *
1172
- * Copyright (c) Facebook, Inc. and its affiliates.
1173
- *
1174
- * This source code is licensed under the MIT license found in the
1175
- * LICENSE file in the root directory of this source tree.
1176
- */
1177
-
1178
- var hasRequiredReactIs_production_min;
1179
- function requireReactIs_production_min() {
1180
- if (hasRequiredReactIs_production_min) return reactIs_production_min;
1181
- hasRequiredReactIs_production_min = 1;
1182
- var b = Symbol.for("react.element"),
1183
- c = Symbol.for("react.portal"),
1184
- d = Symbol.for("react.fragment"),
1185
- e = Symbol.for("react.strict_mode"),
1186
- f = Symbol.for("react.profiler"),
1187
- g = Symbol.for("react.provider"),
1188
- h = Symbol.for("react.context"),
1189
- k = Symbol.for("react.server_context"),
1190
- l = Symbol.for("react.forward_ref"),
1191
- m = Symbol.for("react.suspense"),
1192
- n = Symbol.for("react.suspense_list"),
1193
- p = Symbol.for("react.memo"),
1194
- q = Symbol.for("react.lazy"),
1195
- t = Symbol.for("react.offscreen"),
1196
- u;
1197
- u = Symbol.for("react.module.reference");
1198
- function v(a) {
1199
- if ("object" === typeof a && null !== a) {
1200
- var r = a.$$typeof;
1201
- switch (r) {
1202
- case b:
1203
- switch (a = a.type, a) {
1204
- case d:
1205
- case f:
1206
- case e:
1207
- case m:
1208
- case n:
1209
- return a;
1210
- default:
1211
- switch (a = a && a.$$typeof, a) {
1212
- case k:
1213
- case h:
1214
- case l:
1215
- case q:
1216
- case p:
1217
- case g:
1218
- return a;
1219
- default:
1220
- return r;
1221
- }
1222
- }
1223
- case c:
1224
- return r;
1225
- }
1226
- }
1227
- }
1228
- reactIs_production_min.ContextConsumer = h;
1229
- reactIs_production_min.ContextProvider = g;
1230
- reactIs_production_min.Element = b;
1231
- reactIs_production_min.ForwardRef = l;
1232
- reactIs_production_min.Fragment = d;
1233
- reactIs_production_min.Lazy = q;
1234
- reactIs_production_min.Memo = p;
1235
- reactIs_production_min.Portal = c;
1236
- reactIs_production_min.Profiler = f;
1237
- reactIs_production_min.StrictMode = e;
1238
- reactIs_production_min.Suspense = m;
1239
- reactIs_production_min.SuspenseList = n;
1240
- reactIs_production_min.isAsyncMode = function () {
1241
- return !1;
1242
- };
1243
- reactIs_production_min.isConcurrentMode = function () {
1244
- return !1;
1245
- };
1246
- reactIs_production_min.isContextConsumer = function (a) {
1247
- return v(a) === h;
1248
- };
1249
- reactIs_production_min.isContextProvider = function (a) {
1250
- return v(a) === g;
1251
- };
1252
- reactIs_production_min.isElement = function (a) {
1253
- return "object" === typeof a && null !== a && a.$$typeof === b;
1254
- };
1255
- reactIs_production_min.isForwardRef = function (a) {
1256
- return v(a) === l;
1257
- };
1258
- reactIs_production_min.isFragment = function (a) {
1259
- return v(a) === d;
1260
- };
1261
- reactIs_production_min.isLazy = function (a) {
1262
- return v(a) === q;
1263
- };
1264
- reactIs_production_min.isMemo = function (a) {
1265
- return v(a) === p;
1266
- };
1267
- reactIs_production_min.isPortal = function (a) {
1268
- return v(a) === c;
1269
- };
1270
- reactIs_production_min.isProfiler = function (a) {
1271
- return v(a) === f;
1272
- };
1273
- reactIs_production_min.isStrictMode = function (a) {
1274
- return v(a) === e;
1275
- };
1276
- reactIs_production_min.isSuspense = function (a) {
1277
- return v(a) === m;
1278
- };
1279
- reactIs_production_min.isSuspenseList = function (a) {
1280
- return v(a) === n;
1281
- };
1282
- reactIs_production_min.isValidElementType = function (a) {
1283
- return "string" === typeof a || "function" === typeof a || a === d || a === f || a === e || a === m || a === n || a === t || "object" === typeof a && null !== a && (a.$$typeof === q || a.$$typeof === p || a.$$typeof === g || a.$$typeof === h || a.$$typeof === l || a.$$typeof === u || void 0 !== a.getModuleId) ? !0 : !1;
1284
- };
1285
- reactIs_production_min.typeOf = v;
1286
- return reactIs_production_min;
1287
- }
1288
- var reactIs_development = {};
1289
-
1290
- /**
1291
- * @license React
1292
- * react-is.development.js
1293
- *
1294
- * Copyright (c) Facebook, Inc. and its affiliates.
1295
- *
1296
- * This source code is licensed under the MIT license found in the
1297
- * LICENSE file in the root directory of this source tree.
1298
- */
1299
-
1300
- var hasRequiredReactIs_development;
1301
- function requireReactIs_development() {
1302
- if (hasRequiredReactIs_development) return reactIs_development;
1303
- hasRequiredReactIs_development = 1;
1304
- if (process.env.NODE_ENV !== "production") {
1305
- (function () {
1306
- // ATTENTION
1307
- // When adding new symbols to this file,
1308
- // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
1309
- // The Symbol used to tag the ReactElement-like types.
1310
- var REACT_ELEMENT_TYPE = Symbol.for('react.element');
1311
- var REACT_PORTAL_TYPE = Symbol.for('react.portal');
1312
- var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
1313
- var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
1314
- var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
1315
- var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
1316
- var REACT_CONTEXT_TYPE = Symbol.for('react.context');
1317
- var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
1318
- var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
1319
- var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
1320
- var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
1321
- var REACT_MEMO_TYPE = Symbol.for('react.memo');
1322
- var REACT_LAZY_TYPE = Symbol.for('react.lazy');
1323
- var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
1324
-
1325
- // -----------------------------------------------------------------------------
1326
-
1327
- var enableScopeAPI = false; // Experimental Create Event Handle API.
1328
- var enableCacheElement = false;
1329
- var enableTransitionTracing = false; // No known bugs, but needs performance testing
1330
-
1331
- var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
1332
- // stuff. Intended to enable React core members to more easily debug scheduling
1333
- // issues in DEV builds.
1334
-
1335
- var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
1336
-
1337
- var REACT_MODULE_REFERENCE;
1338
- {
1339
- REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
1340
- }
1341
- function isValidElementType(type) {
1342
- if (typeof type === 'string' || typeof type === 'function') {
1343
- return true;
1344
- } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
1345
-
1346
- if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
1347
- return true;
1348
- }
1349
- if (typeof type === 'object' && type !== null) {
1350
- if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE ||
1351
- // This needs to include all possible module reference object
1352
- // types supported by any Flight configuration anywhere since
1353
- // we don't know which Flight build this will end up being used
1354
- // with.
1355
- type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
1356
- return true;
1357
- }
1358
- }
1359
- return false;
1360
- }
1361
- function typeOf(object) {
1362
- if (typeof object === 'object' && object !== null) {
1363
- var $$typeof = object.$$typeof;
1364
- switch ($$typeof) {
1365
- case REACT_ELEMENT_TYPE:
1366
- var type = object.type;
1367
- switch (type) {
1368
- case REACT_FRAGMENT_TYPE:
1369
- case REACT_PROFILER_TYPE:
1370
- case REACT_STRICT_MODE_TYPE:
1371
- case REACT_SUSPENSE_TYPE:
1372
- case REACT_SUSPENSE_LIST_TYPE:
1373
- return type;
1374
- default:
1375
- var $$typeofType = type && type.$$typeof;
1376
- switch ($$typeofType) {
1377
- case REACT_SERVER_CONTEXT_TYPE:
1378
- case REACT_CONTEXT_TYPE:
1379
- case REACT_FORWARD_REF_TYPE:
1380
- case REACT_LAZY_TYPE:
1381
- case REACT_MEMO_TYPE:
1382
- case REACT_PROVIDER_TYPE:
1383
- return $$typeofType;
1384
- default:
1385
- return $$typeof;
1386
- }
1387
- }
1388
- case REACT_PORTAL_TYPE:
1389
- return $$typeof;
1390
- }
1391
- }
1392
- return undefined;
1393
- }
1394
- var ContextConsumer = REACT_CONTEXT_TYPE;
1395
- var ContextProvider = REACT_PROVIDER_TYPE;
1396
- var Element = REACT_ELEMENT_TYPE;
1397
- var ForwardRef = REACT_FORWARD_REF_TYPE;
1398
- var Fragment = REACT_FRAGMENT_TYPE;
1399
- var Lazy = REACT_LAZY_TYPE;
1400
- var Memo = REACT_MEMO_TYPE;
1401
- var Portal = REACT_PORTAL_TYPE;
1402
- var Profiler = REACT_PROFILER_TYPE;
1403
- var StrictMode = REACT_STRICT_MODE_TYPE;
1404
- var Suspense = REACT_SUSPENSE_TYPE;
1405
- var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
1406
- var hasWarnedAboutDeprecatedIsAsyncMode = false;
1407
- var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
1408
-
1409
- function isAsyncMode(object) {
1410
- {
1411
- if (!hasWarnedAboutDeprecatedIsAsyncMode) {
1412
- hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
1413
-
1414
- console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
1415
- }
1416
- }
1417
- return false;
1418
- }
1419
- function isConcurrentMode(object) {
1420
- {
1421
- if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
1422
- hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
1423
-
1424
- console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
1425
- }
1426
- }
1427
- return false;
1428
- }
1429
- function isContextConsumer(object) {
1430
- return typeOf(object) === REACT_CONTEXT_TYPE;
1431
- }
1432
- function isContextProvider(object) {
1433
- return typeOf(object) === REACT_PROVIDER_TYPE;
1434
- }
1435
- function isElement(object) {
1436
- return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
1437
- }
1438
- function isForwardRef(object) {
1439
- return typeOf(object) === REACT_FORWARD_REF_TYPE;
1440
- }
1441
- function isFragment(object) {
1442
- return typeOf(object) === REACT_FRAGMENT_TYPE;
1443
- }
1444
- function isLazy(object) {
1445
- return typeOf(object) === REACT_LAZY_TYPE;
1446
- }
1447
- function isMemo(object) {
1448
- return typeOf(object) === REACT_MEMO_TYPE;
1449
- }
1450
- function isPortal(object) {
1451
- return typeOf(object) === REACT_PORTAL_TYPE;
1452
- }
1453
- function isProfiler(object) {
1454
- return typeOf(object) === REACT_PROFILER_TYPE;
1455
- }
1456
- function isStrictMode(object) {
1457
- return typeOf(object) === REACT_STRICT_MODE_TYPE;
1458
- }
1459
- function isSuspense(object) {
1460
- return typeOf(object) === REACT_SUSPENSE_TYPE;
1461
- }
1462
- function isSuspenseList(object) {
1463
- return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
1464
- }
1465
- reactIs_development.ContextConsumer = ContextConsumer;
1466
- reactIs_development.ContextProvider = ContextProvider;
1467
- reactIs_development.Element = Element;
1468
- reactIs_development.ForwardRef = ForwardRef;
1469
- reactIs_development.Fragment = Fragment;
1470
- reactIs_development.Lazy = Lazy;
1471
- reactIs_development.Memo = Memo;
1472
- reactIs_development.Portal = Portal;
1473
- reactIs_development.Profiler = Profiler;
1474
- reactIs_development.StrictMode = StrictMode;
1475
- reactIs_development.Suspense = Suspense;
1476
- reactIs_development.SuspenseList = SuspenseList;
1477
- reactIs_development.isAsyncMode = isAsyncMode;
1478
- reactIs_development.isConcurrentMode = isConcurrentMode;
1479
- reactIs_development.isContextConsumer = isContextConsumer;
1480
- reactIs_development.isContextProvider = isContextProvider;
1481
- reactIs_development.isElement = isElement;
1482
- reactIs_development.isForwardRef = isForwardRef;
1483
- reactIs_development.isFragment = isFragment;
1484
- reactIs_development.isLazy = isLazy;
1485
- reactIs_development.isMemo = isMemo;
1486
- reactIs_development.isPortal = isPortal;
1487
- reactIs_development.isProfiler = isProfiler;
1488
- reactIs_development.isStrictMode = isStrictMode;
1489
- reactIs_development.isSuspense = isSuspense;
1490
- reactIs_development.isSuspenseList = isSuspenseList;
1491
- reactIs_development.isValidElementType = isValidElementType;
1492
- reactIs_development.typeOf = typeOf;
1493
- })();
1494
- }
1495
- return reactIs_development;
1496
- }
1497
- (function (module) {
1498
- if (process.env.NODE_ENV === 'production') {
1499
- module.exports = requireReactIs_production_min();
1500
- } else {
1501
- module.exports = requireReactIs_development();
1502
- }
1503
- })(reactIs);
1504
- function focusRingBorderStyle(border) {
1505
- return "inset 0 0 0 ".concat(border.width, "px ").concat(border.color);
1506
- }
1507
- function focusRingStyle(opts) {
1508
- const {
1509
- base,
1510
- border,
1511
- focusRing
1512
- } = opts;
1513
- const focusRingOutsetWidth = focusRing.offset + focusRing.width;
1514
- const focusRingInsetWidth = 0 - focusRing.offset;
1515
- const bgColor = base ? base.bg : "var(--card-bg-color)";
1516
- return [focusRingInsetWidth > 0 && "inset 0 0 0 ".concat(focusRingInsetWidth, "px var(--card-focus-ring-color)"), border && focusRingBorderStyle(border), focusRingInsetWidth < 0 && "0 0 0 ".concat(0 - focusRingInsetWidth, "px ").concat(bgColor), focusRingOutsetWidth > 0 && "0 0 0 ".concat(focusRingOutsetWidth, "px var(--card-focus-ring-color)")].filter(Boolean).join(",");
1517
- }
1518
- const FileButton = styled__default.default(ui.MenuItem)(_ref13 => {
1519
- let {
1520
- theme
1521
- } = _ref13;
1522
- const {
1523
- focusRing
1524
- } = theme.sanity;
1525
- const base = theme.sanity.color.base;
1526
- const border = {
1527
- width: 1,
1528
- color: "var(--card-border-color)"
1529
- };
1530
- return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: relative;\n\n &:not([data-disabled='true']) {\n &:focus-within {\n box-shadow: ", ";\n }\n }\n\n & input {\n overflow: hidden;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n position: absolute;\n min-width: 0;\n display: block;\n appearance: none;\n padding: 0;\n margin: 0;\n border: 0;\n opacity: 0;\n }\n "])), focusRingStyle({
1531
- base,
1532
- border,
1533
- focusRing
1534
- }));
1535
- });
1536
- const FileInputMenuItem = React__default.default.forwardRef(function FileInputMenuItem2(props, forwardedRef) {
1537
- const {
1538
- icon,
1539
- id: idProp,
1540
- accept,
1541
- capture,
1542
- fontSize,
1543
- multiple,
1544
- onSelect,
1545
- padding = 3,
1546
- space = 3,
1547
- textAlign,
1548
- text,
1549
- disabled,
1550
- ...rest
1551
- } = props;
1552
- const idHook = React.useId();
1553
- const id = idProp || idHook;
1554
- const handleChange = React__default.default.useCallback(event => {
1555
- if (onSelect && event.target.files) {
1556
- onSelect(Array.from(event.target.files));
1557
- }
1558
- }, [onSelect]);
1559
- const content = /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
1560
- align: "center",
1561
- justify: "flex-start",
1562
- padding,
1563
- children: [icon && /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
1564
- marginRight: text ? space : void 0,
1565
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
1566
- size: fontSize,
1567
- children: [React.isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && React.createElement(icon)]
1568
- })
1569
- }), text && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
1570
- align: textAlign,
1571
- size: fontSize,
1572
- textOverflow: "ellipsis",
1573
- children: text
1574
- })]
1575
- });
1576
- return /* @__PURE__ */jsxRuntime.jsxs(FileButton, {
1577
- ...rest,
1578
- htmlFor: id,
1579
- padding: 0,
1580
- fontSize: 2,
1581
- disabled,
1582
- ref: forwardedRef,
1583
- children: [content, /* @__PURE__ */jsxRuntime.jsx("input", {
1584
- "data-testid": "file-button-input",
1585
- accept,
1586
- capture,
1587
- id,
1588
- multiple,
1589
- onChange: handleChange,
1590
- type: "file",
1591
- value: "",
1592
- disabled
1593
- })]
1594
- });
1595
- });
1596
- const LockCard = styled__default.default(ui.Card)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0.6;\n mix-blend-mode: screen;\n background: transparent;\n"])));
1597
- const LockButton = styled__default.default(ui.Button)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n background: transparent;\n color: white;\n"])));
1598
- function PlayerActionsMenu(props) {
1599
- const {
1600
- asset,
1601
- readOnly,
1602
- dialogState,
1603
- setDialogState,
1604
- onChange,
1605
- onUpload
1606
- } = props;
1607
- const [open, setOpen] = React.useState(false);
1608
- const [menuElement, setMenuRef] = React.useState(null);
1609
- const isSigned = React.useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]);
1610
- const onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
1611
- React.useEffect(() => {
1612
- if (open && dialogState) {
1613
- setOpen(false);
1614
- }
1615
- }, [dialogState, open]);
1616
- ui.useClickOutside(React.useCallback(() => setOpen(false), []), [menuElement]);
1617
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
1618
- space: 1,
1619
- padding: 2,
1620
- children: [isSigned && /* @__PURE__ */jsxRuntime.jsx(ui.Tooltip, {
1621
- content: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
1622
- padding: 2,
1623
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
1624
- muted: true,
1625
- size: 1,
1626
- children: "Signed playback policy"
1627
- })
1628
- }),
1629
- placement: "right",
1630
- portal: true,
1631
- children: /* @__PURE__ */jsxRuntime.jsx(LockCard, {
1632
- radius: 2,
1633
- margin: 2,
1634
- scheme: "dark",
1635
- tone: "positive",
1636
- children: /* @__PURE__ */jsxRuntime.jsx(LockButton, {
1637
- icon: icons.LockIcon,
1638
- mode: "bleed",
1639
- tone: "positive"
1640
- })
1641
- })
1642
- }), !readOnly && /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
1643
- icon: icons.EditIcon,
1644
- mode: "ghost",
1645
- onClick: () => setDialogState("edit-thumbnail")
1646
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Popover, {
1647
- content: /* @__PURE__ */jsxRuntime.jsxs(ui.Menu, {
1648
- ref: setMenuRef,
1649
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
1650
- padding: 2,
1651
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Label, {
1652
- muted: true,
1653
- size: 1,
1654
- children: "Replace"
1655
- })
1656
- }), /* @__PURE__ */jsxRuntime.jsx(FileInputMenuItem, {
1657
- accept: "video/*",
1658
- icon: icons.UploadIcon,
1659
- mode: "bleed",
1660
- onSelect: onUpload,
1661
- text: "Upload",
1662
- disabled: readOnly,
1663
- fontSize: 2
1664
- }), /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
1665
- icon: icons.SearchIcon,
1666
- text: "Browse",
1667
- onClick: () => setDialogState("select-video")
1668
- }), /* @__PURE__ */jsxRuntime.jsx(ui.MenuDivider, {}), /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
1669
- icon: icons.PlugIcon,
1670
- text: "Configure API",
1671
- onClick: () => setDialogState("secrets")
1672
- }), /* @__PURE__ */jsxRuntime.jsx(ui.MenuDivider, {}), /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
1673
- tone: "critical",
1674
- icon: icons.ResetIcon,
1675
- text: "Clear field",
1676
- onClick: onReset,
1677
- disabled: readOnly
1678
- })]
1679
- }),
1680
- portal: true,
1681
- open,
1682
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
1683
- icon: icons.EllipsisVerticalIcon,
1684
- mode: "ghost",
1685
- onClick: () => {
1686
- setDialogState(false);
1687
- setOpen(true);
1688
- }
1689
- })
1690
- })]
1691
- });
1692
- }
1693
- var PlayerActionsMenu$1 = React.memo(PlayerActionsMenu);
1694
- function withFocusRing(component) {
1695
- return styled__default.default(component)(props => {
1696
- const border = {
1697
- width: props.$border ? 1 : 0,
1698
- color: "var(--card-border-color)"
1699
- };
1700
- return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n --card-focus-box-shadow: ", ";\n\n border-radius: ", ";\n outline: none;\n box-shadow: var(--card-focus-box-shadow);\n\n &:focus {\n --card-focus-box-shadow: ", ";\n }\n "])), focusRingBorderStyle(border), ui.rem(props.theme.sanity.radius[1]), focusRingStyle({
1701
- base: props.theme.sanity.color.base,
1702
- border,
1703
- focusRing: props.theme.sanity.focusRing
1704
- }));
1705
- });
1706
- }
1707
- const ctrlKey = 17;
1708
- const cmdKey = 91;
1709
- const UploadCardWithFocusRing = withFocusRing(ui.Card);
1710
- const UploadCard$1 = React.forwardRef((_ref14, forwardedRef) => {
1711
- let {
1712
- children,
1713
- tone,
1714
- onPaste,
1715
- onDrop,
1716
- onDragEnter,
1717
- onDragLeave,
1718
- onDragOver
1719
- } = _ref14;
1720
- const ctrlDown = React.useRef(false);
1721
- const inputRef = React.useRef(null);
1722
- const handleKeyDown = React.useCallback(event => {
1723
- if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
1724
- ctrlDown.current = true;
1725
- }
1726
- const vKey = 86;
1727
- if (ctrlDown.current && event.keyCode == vKey) {
1728
- inputRef.current.focus();
1729
- }
1730
- }, []);
1731
- const handleKeyUp = React.useCallback(event => {
1732
- if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
1733
- ctrlDown.current = false;
1734
- }
1735
- }, []);
1736
- return /* @__PURE__ */jsxRuntime.jsxs(UploadCardWithFocusRing, {
1737
- tone,
1738
- height: "fill",
1739
- ref: forwardedRef,
1740
- padding: 0,
1741
- radius: 2,
1742
- shadow: 0,
1743
- tabIndex: 0,
1744
- onKeyDown: handleKeyDown,
1745
- onKeyUp: handleKeyUp,
1746
- onPaste,
1747
- onDrop,
1748
- onDragEnter,
1749
- onDragLeave,
1750
- onDragOver,
1751
- children: [/* @__PURE__ */jsxRuntime.jsx(HiddenInput$1, {
1752
- ref: inputRef,
1753
- onPaste
1754
- }), children]
1755
- });
1756
- });
1757
- const HiddenInput$1 = styled__default.default.input.attrs({
1758
- type: "text"
1759
- })(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n position: absolute;\n border: 0;\n color: white;\n opacity: 0;\n\n &:focus {\n outline: none;\n }\n"])));
1760
- const HiddenInput = styled__default.default.input(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n overflow: hidden;\n width: 0.1px;\n height: 0.1px;\n opacity: 0;\n position: absolute;\n z-index: -1;\n"])));
1761
- const Label = styled__default.default.label(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n position: relative;\n"])));
1762
- const FileInputButton = _ref15 => {
1763
- let {
1764
- onSelect,
1765
- ...props
1766
- } = _ref15;
1767
- const inputId = "FileSelect".concat(React.useId());
1768
- const inputRef = React.useRef(null);
1769
- const handleSelect = React.useCallback(event => {
1770
- if (onSelect) {
1771
- onSelect(event.target.files);
1772
- }
1773
- }, [onSelect]);
1774
- const handleButtonClick = React.useCallback(() => {
1775
- var _a;
1776
- return (_a = inputRef.current) == null ? void 0 : _a.click();
1777
- }, []);
1778
- return /* @__PURE__ */jsxRuntime.jsxs(Label, {
1779
- htmlFor: inputId,
1780
- children: [/* @__PURE__ */jsxRuntime.jsx(HiddenInput, {
1781
- accept: "video/*",
1782
- ref: inputRef,
1783
- tabIndex: 0,
1784
- type: "file",
1785
- id: inputId,
1786
- onChange: handleSelect,
1787
- value: ""
1788
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
1789
- onClick: handleButtonClick,
1790
- mode: "default",
1791
- tone: "primary",
1792
- style: {
1793
- width: "100%"
1794
- },
1795
- ...props
1796
- })]
1797
- });
1798
- };
1799
- const UploadCard = styled__default.default(ui.Card)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n && {\n border-style: dashed;\n }\n"])));
1800
- const ConfigureApiBox = styled__default.default(ui.Box)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n"])));
1801
- function UploadPlaceholder(props) {
1802
- const {
1803
- setDialogState,
1804
- readOnly,
1805
- onSelect,
1806
- hovering,
1807
- needsSetup
1808
- } = props;
1809
- const handleBrowse = React.useCallback(() => setDialogState("select-video"), [setDialogState]);
1810
- const handleConfigureApi = React.useCallback(() => setDialogState("secrets"), [setDialogState]);
1811
- return /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
1812
- style: {
1813
- padding: 1,
1814
- position: "relative"
1815
- },
1816
- height: "stretch",
1817
- children: /* @__PURE__ */jsxRuntime.jsxs(UploadCard, {
1818
- sizing: "border",
1819
- height: "fill",
1820
- tone: readOnly ? "transparent" : "inherit",
1821
- border: true,
1822
- padding: 3,
1823
- style: hovering ? {
1824
- borderColor: "transparent"
1825
- } : void 0,
1826
- children: [/* @__PURE__ */jsxRuntime.jsx(ConfigureApiBox, {
1827
- padding: 3,
1828
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
1829
- padding: 3,
1830
- radius: 3,
1831
- tone: needsSetup ? "critical" : void 0,
1832
- onClick: handleConfigureApi,
1833
- icon: icons.PlugIcon,
1834
- mode: "bleed"
1835
- })
1836
- }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
1837
- align: "center",
1838
- justify: "space-between",
1839
- gap: 4,
1840
- direction: ["column", "column", "row"],
1841
- paddingY: [2, 2, 0],
1842
- sizing: "border",
1843
- height: "fill",
1844
- children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
1845
- align: "center",
1846
- justify: "center",
1847
- gap: 2,
1848
- flex: 1,
1849
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
1850
- justify: "center",
1851
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
1852
- muted: true,
1853
- children: /* @__PURE__ */jsxRuntime.jsx(icons.DocumentVideoIcon, {})
1854
- })
1855
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
1856
- justify: "center",
1857
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
1858
- size: 1,
1859
- muted: true,
1860
- children: "Drag video or paste URL here"
1861
- })
1862
- })]
1863
- }), /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
1864
- space: 2,
1865
- children: [/* @__PURE__ */jsxRuntime.jsx(FileInputButton, {
1866
- mode: "ghost",
1867
- tone: "default",
1868
- icon: icons.UploadIcon,
1869
- text: "Upload",
1870
- onSelect
1871
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
1872
- mode: "ghost",
1873
- icon: icons.SearchIcon,
1874
- text: "Select",
1875
- onClick: handleBrowse
1876
- })]
1877
- })]
1878
- })]
1879
- })
1880
- });
1881
- }
1882
- const CardWrapper = styled__default.default(ui.Card)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n min-height: 82px;\n box-sizing: border-box;\n"])));
1883
- const FlexWrapper = styled__default.default(ui.Flex)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
1884
- const LeftSection = styled__default.default(ui.Stack)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n position: relative;\n width: 60%;\n"])));
1885
- const CodeWrapper = styled__default.default(ui.Code)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n\n code {\n overflow: hidden;\n text-overflow: ellipsis;\n position: relative;\n max-width: 200px;\n }\n"])));
1886
- const UploadProgress = _ref16 => {
1887
- let {
1888
- progress = 100,
1889
- onCancel,
1890
- filename,
1891
- text = "Uploading"
1892
- } = _ref16;
1893
- return /* @__PURE__ */jsxRuntime.jsx(CardWrapper, {
1894
- tone: "primary",
1895
- padding: 4,
1896
- border: true,
1897
- height: "fill",
1898
- children: /* @__PURE__ */jsxRuntime.jsxs(FlexWrapper, {
1899
- align: "center",
1900
- justify: "space-between",
1901
- height: "fill",
1902
- direction: "row",
1903
- gap: 2,
1904
- children: [/* @__PURE__ */jsxRuntime.jsxs(LeftSection, {
1905
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
1906
- justify: "center",
1907
- gap: [3, 3, 2, 2],
1908
- direction: ["column", "column", "row"],
1909
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
1910
- size: 1,
1911
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
1912
- space: 2,
1913
- children: [text, /* @__PURE__ */jsxRuntime.jsx(CodeWrapper, {
1914
- size: 1,
1915
- children: filename ? filename : "..."
1916
- })]
1917
- })
1918
- })
1919
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
1920
- marginTop: 3,
1921
- radius: 5,
1922
- shadow: 1,
1923
- children: /* @__PURE__ */jsxRuntime.jsx(sanity.LinearProgress, {
1924
- value: progress
1925
- })
1926
- })]
1927
- }), onCancel ? /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
1928
- fontSize: 2,
1929
- text: "Cancel upload",
1930
- mode: "ghost",
1931
- tone: "critical",
1932
- onClick: onCancel
1933
- }) : null]
1934
- })
1935
- });
1936
- };
1937
- const Player = React.lazy(() => Promise.resolve().then(function () {
1938
- return require('./Player-d8f163ed.cjs');
1939
- }));
1940
- class MuxVideoInputUploader extends React.Component {
1941
- constructor() {
1942
- super(...arguments);
1943
- this.state = {
1944
- isDraggingOver: false,
1945
- invalidPaste: false,
1946
- invalidFile: false,
1947
- uploadProgress: null,
1948
- fileInfo: null,
1949
- uuid: null,
1950
- error: null,
1951
- url: null
1952
- };
1953
- this.dragEnteredEls = [];
1954
- this.ctrlDown = false;
1955
- // eslint-disable-next-line no-warning-comments
1956
- // @TODO add proper typings for the return values of uploadFile and uploadUrl
1957
- this.upload = null;
1958
- this.container = React__default.default.createRef();
1959
- this.handleProgress = evt => {
1960
- this.setState({
1961
- uploadProgress: evt.percent
1962
- });
1963
- };
1964
- this.onUpload = files => {
1965
- this.setState({
1966
- uploadProgress: 0,
1967
- fileInfo: null,
1968
- uuid: null
1969
- });
1970
- this.upload = uploadFile(this.props.config, this.props.client, files[0], {
1971
- enableSignedUrls: this.props.secrets.enableSignedUrls
1972
- }).pipe(operators.takeUntil(this.onCancelUploadButtonClick$.pipe(operators.tap(() => {
1973
- if (this.state.uuid) {
1974
- this.props.client.delete(this.state.uuid);
1975
- }
1976
- })))).subscribe({
1977
- complete: () => {
1978
- this.setState({
1979
- error: null,
1980
- uploadProgress: null,
1981
- uuid: null
1982
- });
1983
- },
1984
- next: event => {
1985
- this.handleUploadEvent(event);
1986
- },
1987
- error: err => {
1988
- this.setState({
1989
- error: err,
1990
- uploadProgress: null,
1991
- uuid: null
1992
- });
1993
- }
1994
- });
1995
- };
1996
- // eslint-disable-next-line no-warning-comments
1997
- // @TODO add proper typings for the Observable events
1998
- this.handleUploadEvent = event => {
1999
- switch (event.type) {
2000
- case "success":
2001
- return this.handleUploadSuccess(event.asset);
2002
- case "progress":
2003
- return this.handleProgress(event);
2004
- case "file":
2005
- return this.setState({
2006
- fileInfo: event.file
2007
- });
2008
- case "uuid":
2009
- return this.setState({
2010
- uuid: event.uuid
2011
- });
2012
- case "url":
2013
- return this.setState({
2014
- url: event.url,
2015
- uploadProgress: 100
2016
- });
2017
- default:
2018
- return null;
2019
- }
2020
- };
2021
- this.handleUploadSuccess = asset => {
2022
- this.setState({
2023
- uploadProgress: 100
2024
- });
2025
- this.props.onChange(sanity.PatchEvent.from([sanity.setIfMissing({
2026
- asset: {}
2027
- }), sanity.set({
2028
- _type: "reference",
2029
- _weak: true,
2030
- _ref: asset._id
2031
- }, ["asset"])]));
2032
- };
2033
- this.handlePaste = event => {
2034
- const clipboardData = event.clipboardData || window.clipboardData;
2035
- const url = clipboardData.getData("text");
2036
- const options = {
2037
- enableSignedUrls: this.props.secrets.enableSignedUrls
2038
- };
2039
- this.upload = uploadUrl(this.props.config, this.props.client, url, options).subscribe({
2040
- complete: () => {
2041
- this.setState({
2042
- error: null,
2043
- uploadProgress: null,
2044
- url: null
2045
- });
2046
- },
2047
- next: sEvent => {
2048
- this.handleUploadEvent(sEvent);
2049
- },
2050
- error: err => {
2051
- let error;
2052
- if (!err.message.toLowerCase().match("invalid url")) {
2053
- error = err;
2054
- }
2055
- this.setState({
2056
- invalidPaste: true,
2057
- error
2058
- }, () => {
2059
- setTimeout(() => {
2060
- this.setState({
2061
- invalidPaste: false,
2062
- uploadProgress: null
2063
- });
2064
- }, 2e3);
2065
- });
2066
- }
2067
- });
2068
- };
2069
- this.handleDrop = event => {
2070
- this.setState({
2071
- isDraggingOver: false
2072
- });
2073
- event.preventDefault();
2074
- event.stopPropagation();
2075
- extractDroppedFiles(event.nativeEvent.dataTransfer).then(files => {
2076
- if (files) {
2077
- this.onUpload(files);
2078
- }
2079
- });
2080
- };
2081
- this.handleDragOver = event => {
2082
- event.preventDefault();
2083
- event.stopPropagation();
2084
- };
2085
- this.handleDragEnter = event => {
2086
- var _a, _b;
2087
- event.stopPropagation();
2088
- this.dragEnteredEls.push(event.target);
2089
- this.setState({
2090
- isDraggingOver: true
2091
- });
2092
- const type = (_b = (_a = event.dataTransfer.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.type;
2093
- this.setState({
2094
- invalidFile: !type.startsWith("video/")
2095
- });
2096
- };
2097
- this.handleDragLeave = event => {
2098
- event.stopPropagation();
2099
- const idx = this.dragEnteredEls.indexOf(event.target);
2100
- if (idx > -1) {
2101
- this.dragEnteredEls.splice(idx, 1);
2102
- }
2103
- if (this.dragEnteredEls.length === 0) {
2104
- this.setState({
2105
- isDraggingOver: false
2106
- });
2107
- }
2108
- };
2109
- }
2110
- componentWillUnmount() {
2111
- this.unSubscribeToUpload();
2112
- }
2113
- componentDidMount() {
2114
- const events$ = new rxjs.Subject();
2115
- this.onCancelUploadButtonClick$ = events$.asObservable();
2116
- this.handleCancelUploadButtonClick = event => events$.next(event);
2117
- }
2118
- unSubscribeToUpload() {
2119
- if (this.upload && !this.upload.closed) {
2120
- this.upload.unsubscribe();
2121
- }
2122
- }
2123
- render() {
2124
- var _a;
2125
- if (this.state.uploadProgress !== null) {
2126
- return /* @__PURE__ */jsxRuntime.jsx(UploadProgress, {
2127
- onCancel: this.handleCancelUploadButtonClick,
2128
- progress: this.state.uploadProgress,
2129
- filename: ((_a = this.state.fileInfo) == null ? void 0 : _a.name) || this.state.url
2130
- });
2131
- }
2132
- if (this.state.error) {
2133
- throw this.state.error;
2134
- }
2135
- return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
2136
- children: [/* @__PURE__ */jsxRuntime.jsx(UploadCard$1, {
2137
- tone: this.state.isDraggingOver && (this.state.invalidPaste || this.state.invalidFile) ? "critical" : this.state.isDraggingOver ? "positive" : void 0,
2138
- onDrop: this.handleDrop,
2139
- onDragOver: this.handleDragOver,
2140
- onDragLeave: this.handleDragLeave,
2141
- onDragEnter: this.handleDragEnter,
2142
- onPaste: this.handlePaste,
2143
- ref: this.container,
2144
- children: this.props.asset ? /* @__PURE__ */jsxRuntime.jsx(Player, {
2145
- readOnly: this.props.readOnly,
2146
- asset: this.props.asset,
2147
- onChange: this.props.onChange,
2148
- dialogState: this.props.dialogState,
2149
- setDialogState: this.props.setDialogState,
2150
- buttons: /* @__PURE__ */jsxRuntime.jsx(PlayerActionsMenu$1, {
2151
- asset: this.props.asset,
2152
- dialogState: this.props.dialogState,
2153
- setDialogState: this.props.setDialogState,
2154
- onChange: this.props.onChange,
2155
- onUpload: this.onUpload,
2156
- readOnly: this.props.readOnly
2157
- })
2158
- }) : /* @__PURE__ */jsxRuntime.jsx(UploadPlaceholder, {
2159
- hovering: this.state.isDraggingOver,
2160
- onSelect: this.onUpload,
2161
- readOnly: this.props.readOnly,
2162
- setDialogState: this.props.setDialogState,
2163
- needsSetup: this.props.needsSetup
2164
- })
2165
- }), this.props.dialogState === "select-video" && /* @__PURE__ */jsxRuntime.jsx(InputBrowser, {
2166
- asset: this.props.asset,
2167
- onChange: this.props.onChange,
2168
- setDialogState: this.props.setDialogState
2169
- })]
2170
- });
2171
- }
2172
- }
2173
- const useSaveSecrets = (client, secrets) => {
2174
- return React.useCallback(async _ref17 => {
2175
- let {
2176
- token,
2177
- secretKey,
2178
- enableSignedUrls
2179
- } = _ref17;
2180
- let {
2181
- signingKeyId,
2182
- signingKeyPrivate
2183
- } = secrets;
2184
- try {
2185
- await saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
2186
- const valid = await testSecrets(client);
2187
- if (!(valid == null ? void 0 : valid.status) && token && secretKey) {
2188
- throw new Error("Invalid secrets");
2189
- }
2190
- } catch (err) {
2191
- console.error("Error while trying to save secrets:", err);
2192
- throw err;
2193
- }
2194
- if (enableSignedUrls) {
2195
- const hasValidSigningKeys = await haveValidSigningKeys(client, signingKeyId, signingKeyPrivate);
2196
- if (!hasValidSigningKeys) {
2197
- try {
2198
- const {
2199
- data
2200
- } = await createSigningKeys(client);
2201
- signingKeyId = data.id;
2202
- signingKeyPrivate = data.private_key;
2203
- await saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
2204
- } catch (err) {
2205
- console.log("Error while creating and saving signing key:", err == null ? void 0 : err.message);
2206
- throw err;
2207
- }
2208
- }
2209
- }
2210
- return {
2211
- token,
2212
- secretKey,
2213
- enableSignedUrls,
2214
- signingKeyId,
2215
- signingKeyPrivate
2216
- };
2217
- }, [client, secrets]);
2218
- };
2219
- function init(_ref18) {
2220
- let {
2221
- token,
2222
- secretKey,
2223
- enableSignedUrls
2224
- } = _ref18;
2225
- return {
2226
- submitting: false,
2227
- error: null,
2228
- // Form inputs don't set the state back to null when clearing a field, but uses empty strings
2229
- // This ensures the `dirty` check works correctly
2230
- token: token != null ? token : "",
2231
- secretKey: secretKey != null ? secretKey : "",
2232
- enableSignedUrls: enableSignedUrls != null ? enableSignedUrls : false
2233
- };
2234
- }
2235
- function reducer(state, action) {
2236
- switch (action == null ? void 0 : action.type) {
2237
- case "submit":
2238
- return {
2239
- ...state,
2240
- submitting: true,
2241
- error: null
2242
- };
2243
- case "error":
2244
- return {
2245
- ...state,
2246
- submitting: false,
2247
- error: action.payload
2248
- };
2249
- case "reset":
2250
- return init(action.payload);
2251
- case "change":
2252
- return {
2253
- ...state,
2254
- [action.payload.name]: action.payload.value
2255
- };
2256
- default:
2257
- throw new Error("Unknown action type: ".concat(action == null ? void 0 : action.type));
2258
- }
2259
- }
2260
- const useSecretsFormState = secrets => React.useReducer(reducer, secrets, init);
2261
- const ids = ["title", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r"];
2262
- function MuxLogo(_ref19) {
2263
- let {
2264
- height = 26
2265
- } = _ref19;
2266
- const id = React.useId();
2267
- const [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = React.useMemo(() => ids.map(field => "".concat(id, "-").concat(field)), [id]);
2268
- return /* @__PURE__ */jsxRuntime.jsxs("svg", {
2269
- "aria-labelledby": titleId,
2270
- role: "img",
2271
- xmlns: "http://www.w3.org/2000/svg",
2272
- xmlSpace: "preserve",
2273
- viewBox: "92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188",
2274
- style: {
2275
- height: "".concat(height, "px")
2276
- },
2277
- children: [/* @__PURE__ */jsxRuntime.jsx("title", {
2278
- id: titleId,
2279
- children: "Mux Logo"
2280
- }), /* @__PURE__ */jsxRuntime.jsxs("defs", {
2281
- children: [/* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2282
- id: c,
2283
- spreadMethod: "pad",
2284
- gradientTransform: "matrix(528.38055 0 0 -528.38055 63.801 159.5)",
2285
- gradientUnits: "userSpaceOnUse",
2286
- y2: 0,
2287
- x2: 1,
2288
- y1: 0,
2289
- x1: 0,
2290
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2291
- offset: 0,
2292
- style: {
2293
- stopOpacity: 1,
2294
- stopColor: "#ff4e00"
2295
- }
2296
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2297
- offset: 1,
2298
- style: {
2299
- stopOpacity: 1,
2300
- stopColor: "#ff1791"
2301
- }
2302
- })]
2303
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2304
- id: d,
2305
- spreadMethod: "pad",
2306
- gradientTransform: "matrix(523.66766 0 0 -523.66766 67.897 159.5)",
2307
- gradientUnits: "userSpaceOnUse",
2308
- y2: 0,
2309
- x2: 1,
2310
- y1: 0,
2311
- x1: 0,
2312
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2313
- offset: 0,
2314
- style: {
2315
- stopOpacity: 1,
2316
- stopColor: "#ff4e00"
2317
- }
2318
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2319
- offset: 1,
2320
- style: {
2321
- stopOpacity: 1,
2322
- stopColor: "#ff1791"
2323
- }
2324
- })]
2325
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2326
- id: g,
2327
- spreadMethod: "pad",
2328
- gradientTransform: "rotate(180 296.075 79.75) scale(524.84045)",
2329
- gradientUnits: "userSpaceOnUse",
2330
- y2: 0,
2331
- x2: 1,
2332
- y1: 0,
2333
- x1: 0,
2334
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2335
- offset: 0,
2336
- style: {
2337
- stopOpacity: 1,
2338
- stopColor: "#ff4e00"
2339
- }
2340
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2341
- offset: 1,
2342
- style: {
2343
- stopOpacity: 1,
2344
- stopColor: "#ff1791"
2345
- }
2346
- })]
2347
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2348
- id: i,
2349
- spreadMethod: "pad",
2350
- gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
2351
- gradientUnits: "userSpaceOnUse",
2352
- y2: 0,
2353
- x2: 1,
2354
- y1: 0,
2355
- x1: 0,
2356
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2357
- offset: 0,
2358
- style: {
2359
- stopOpacity: 1,
2360
- stopColor: "#ff4e00"
2361
- }
2362
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2363
- offset: 1,
2364
- style: {
2365
- stopOpacity: 1,
2366
- stopColor: "#ff1791"
2367
- }
2368
- })]
2369
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2370
- id: j,
2371
- spreadMethod: "pad",
2372
- gradientTransform: "matrix(523.08514 0 0 -523.08514 67.897 224.446)",
2373
- gradientUnits: "userSpaceOnUse",
2374
- y2: 0,
2375
- x2: 1,
2376
- y1: 0,
2377
- x1: 0,
2378
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2379
- offset: 0,
2380
- style: {
2381
- stopOpacity: 1,
2382
- stopColor: "#ff4e00"
2383
- }
2384
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2385
- offset: 1,
2386
- style: {
2387
- stopOpacity: 1,
2388
- stopColor: "#ff1791"
2389
- }
2390
- })]
2391
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2392
- id: k,
2393
- spreadMethod: "pad",
2394
- gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.553)",
2395
- gradientUnits: "userSpaceOnUse",
2396
- y2: 0,
2397
- x2: 1,
2398
- y1: 0,
2399
- x1: 0,
2400
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2401
- offset: 0,
2402
- style: {
2403
- stopOpacity: 1,
2404
- stopColor: "#ff4e00"
2405
- }
2406
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2407
- offset: 1,
2408
- style: {
2409
- stopOpacity: 1,
2410
- stopColor: "#ff1791"
2411
- }
2412
- })]
2413
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2414
- id: l,
2415
- spreadMethod: "pad",
2416
- gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
2417
- gradientUnits: "userSpaceOnUse",
2418
- y2: 0,
2419
- x2: 1,
2420
- y1: 0,
2421
- x1: 0,
2422
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2423
- offset: 0,
2424
- style: {
2425
- stopOpacity: 1,
2426
- stopColor: "#ff4e00"
2427
- }
2428
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2429
- offset: 1,
2430
- style: {
2431
- stopOpacity: 1,
2432
- stopColor: "#ff1791"
2433
- }
2434
- })]
2435
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2436
- id: m,
2437
- spreadMethod: "pad",
2438
- gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.554)",
2439
- gradientUnits: "userSpaceOnUse",
2440
- y2: 0,
2441
- x2: 1,
2442
- y1: 0,
2443
- x1: 0,
2444
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2445
- offset: 0,
2446
- style: {
2447
- stopOpacity: 1,
2448
- stopColor: "#ff4e00"
2449
- }
2450
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2451
- offset: 1,
2452
- style: {
2453
- stopOpacity: 1,
2454
- stopColor: "#ff1791"
2455
- }
2456
- })]
2457
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2458
- id: p,
2459
- spreadMethod: "pad",
2460
- gradientTransform: "matrix(521.97632 0 0 -521.97632 69.067 191.973)",
2461
- gradientUnits: "userSpaceOnUse",
2462
- y2: 0,
2463
- x2: 1,
2464
- y1: 0,
2465
- x1: 0,
2466
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2467
- offset: 0,
2468
- style: {
2469
- stopOpacity: 1,
2470
- stopColor: "#ff4e00"
2471
- }
2472
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2473
- offset: 1,
2474
- style: {
2475
- stopOpacity: 1,
2476
- stopColor: "#ff1791"
2477
- }
2478
- })]
2479
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2480
- id: q,
2481
- spreadMethod: "pad",
2482
- gradientTransform: "matrix(523.09039 0 0 -523.09039 67.312 191.973)",
2483
- gradientUnits: "userSpaceOnUse",
2484
- y2: 0,
2485
- x2: 1,
2486
- y1: 0,
2487
- x1: 0,
2488
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2489
- offset: 0,
2490
- style: {
2491
- stopOpacity: 1,
2492
- stopColor: "#ff4e00"
2493
- }
2494
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2495
- offset: 1,
2496
- style: {
2497
- stopOpacity: 1,
2498
- stopColor: "#ff1791"
2499
- }
2500
- })]
2501
- }), /* @__PURE__ */jsxRuntime.jsxs("linearGradient", {
2502
- id: r,
2503
- spreadMethod: "pad",
2504
- gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
2505
- gradientUnits: "userSpaceOnUse",
2506
- y2: 0,
2507
- x2: 1,
2508
- y1: 0,
2509
- x1: 0,
2510
- children: [/* @__PURE__ */jsxRuntime.jsx("stop", {
2511
- offset: 0,
2512
- style: {
2513
- stopOpacity: 1,
2514
- stopColor: "#ff4e00"
2515
- }
2516
- }), /* @__PURE__ */jsxRuntime.jsx("stop", {
2517
- offset: 1,
2518
- style: {
2519
- stopOpacity: 1,
2520
- stopColor: "#ff1791"
2521
- }
2522
- })]
2523
- }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
2524
- id: a,
2525
- clipPathUnits: "userSpaceOnUse",
2526
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2527
- d: "M0 319h657.706V0H0Z"
2528
- })
2529
- }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
2530
- id: b,
2531
- clipPathUnits: "userSpaceOnUse",
2532
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2533
- d: "M423.64 242h164.999V77H423.64Z"
2534
- })
2535
- }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
2536
- id: e,
2537
- clipPathUnits: "userSpaceOnUse",
2538
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2539
- d: "M0 319h657.706V0H0Z"
2540
- })
2541
- }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
2542
- id: f,
2543
- clipPathUnits: "userSpaceOnUse",
2544
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2545
- d: "M311.3 242h93.031V77H311.3Z"
2546
- })
2547
- }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
2548
- id: h,
2549
- clipPathUnits: "userSpaceOnUse",
2550
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2551
- d: "M198.96 242h35.106V77H198.96Z"
2552
- })
2553
- }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
2554
- id: n,
2555
- clipPathUnits: "userSpaceOnUse",
2556
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2557
- d: "M0 319h657.706V0H0Z"
2558
- })
2559
- }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
2560
- id: o,
2561
- clipPathUnits: "userSpaceOnUse",
2562
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2563
- d: "M69.067 242H169.12V141.947H69.067Z"
2564
- })
2565
- })]
2566
- }), /* @__PURE__ */jsxRuntime.jsx("g", {
2567
- clipPath: "url(#".concat(a, ")"),
2568
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
2569
- children: /* @__PURE__ */jsxRuntime.jsx("g", {
2570
- style: {
2571
- opacity: 0.69999701
2572
- },
2573
- clipPath: "url(#".concat(b, ")"),
2574
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2575
- style: {
2576
- fill: "url(#".concat(c, ")"),
2577
- stroke: "none"
2578
- },
2579
- d: "M558.674 82.142c6.855-6.855 17.969-6.855 24.824 0 6.854 6.855 6.854 17.969 0 24.823L453.605 236.858c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
2580
- })
2581
- })
2582
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
2583
- style: {
2584
- fill: "url(#".concat(d, ")"),
2585
- stroke: "none"
2586
- },
2587
- d: "M558.674 236.858 428.781 106.966c-6.855-6.855-6.855-17.969 0-24.825 6.855-6.854 17.969-6.854 24.823 0l129.894 129.894c6.854 6.855 6.854 17.968 0 24.823A17.498 17.498 0 0 1 571.086 242a17.495 17.495 0 0 1-12.412-5.142",
2588
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
2589
- }), /* @__PURE__ */jsxRuntime.jsxs("g", {
2590
- clipPath: "url(#".concat(e, ")"),
2591
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
2592
- children: [/* @__PURE__ */jsxRuntime.jsx("g", {
2593
- style: {
2594
- opacity: 0.69999701
2595
- },
2596
- clipPath: "url(#".concat(f, ")"),
2597
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2598
- style: {
2599
- fill: "url(#".concat(g, ")"),
2600
- stroke: "none"
2601
- },
2602
- d: "M328.853 112.107c22.297 0 40.372 18.075 40.372 40.372v71.315c0 10.054 7.505 18.206 17.554 18.206 10.048 0 17.552-8.152 17.552-18.206v-71.315c0-41.686-33.793-75.479-75.478-75.479-9.694 0-17.553 7.859-17.553 17.554 0 9.694 7.859 17.553 17.553 17.553"
2603
- })
2604
- }), /* @__PURE__ */jsxRuntime.jsx("g", {
2605
- style: {
2606
- opacity: 0.69999701
2607
- },
2608
- clipPath: "url(#".concat(h, ")"),
2609
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2610
- style: {
2611
- fill: "url(#".concat(i, ")"),
2612
- stroke: "none"
2613
- },
2614
- d: "M216.513 242c-10.049 0-17.553-8.152-17.553-18.206V95.206c0-10.054 7.504-18.206 17.553-18.206 10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.054-7.505 18.206-17.553 18.206"
2615
- })
2616
- })]
2617
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
2618
- style: {
2619
- fill: "url(#".concat(j, ")"),
2620
- stroke: "none"
2621
- },
2622
- d: "M369.225 224.447c0-9.694 7.859-17.553 17.553-17.553 9.695 0 17.553 7.859 17.553 17.553s-7.858 17.552-17.553 17.552c-9.694 0-17.553-7.858-17.553-17.552",
2623
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
2624
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
2625
- style: {
2626
- fill: "url(#".concat(k, ")"),
2627
- stroke: "none"
2628
- },
2629
- d: "M553.532 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.552-17.554 17.552-9.694 0-17.553-7.858-17.553-17.552",
2630
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
2631
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
2632
- style: {
2633
- fill: "url(#".concat(l, ")"),
2634
- stroke: "none"
2635
- },
2636
- d: "M69.067 223.794V95.206C69.067 85.152 76.571 77 86.62 77c10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.055-7.505 18.205-17.553 18.205-10.049 0-17.553-8.15-17.553-18.205",
2637
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
2638
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
2639
- style: {
2640
- fill: "url(#".concat(m, ")"),
2641
- stroke: "none"
2642
- },
2643
- d: "M198.96 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.553-17.554 17.553-9.694 0-17.553-7.859-17.553-17.553",
2644
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
2645
- }), /* @__PURE__ */jsxRuntime.jsx("g", {
2646
- clipPath: "url(#".concat(n, ")"),
2647
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
2648
- children: /* @__PURE__ */jsxRuntime.jsx("g", {
2649
- style: {
2650
- opacity: 0.69999701
2651
- },
2652
- clipPath: "url(#".concat(o, ")"),
2653
- children: /* @__PURE__ */jsxRuntime.jsx("path", {
2654
- style: {
2655
- fill: "url(#".concat(p, ")"),
2656
- stroke: "none"
2657
- },
2658
- d: "M139.155 147.088c6.855-6.855 17.969-6.855 24.824 0s6.855 17.969 0 24.824l-64.947 64.946c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
2659
- })
2660
- })
2661
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
2662
- style: {
2663
- fill: "url(#".concat(q, ")"),
2664
- stroke: "none"
2665
- },
2666
- d: "m204.101 236.858-64.947-64.946c-6.854-6.855-6.854-17.969 0-24.824 6.856-6.855 17.97-6.855 24.824 0l64.947 64.947c6.855 6.855 6.855 17.968 0 24.823A17.495 17.495 0 0 1 216.513 242a17.498 17.498 0 0 1-12.412-5.142",
2667
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
2668
- }), /* @__PURE__ */jsxRuntime.jsx("path", {
2669
- style: {
2670
- fill: "url(#".concat(r, ")"),
2671
- stroke: "none"
2672
- },
2673
- d: "M253.374 223.794v-71.315c0-41.685 33.793-75.479 75.479-75.479 9.695 0 17.553 7.859 17.553 17.554 0 9.694-7.858 17.553-17.553 17.553-22.297 0-40.372 18.075-40.372 40.372v71.315c0 10.055-7.505 18.205-17.554 18.205s-17.553-8.15-17.553-18.205",
2674
- transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
2675
- })]
2676
- });
2677
- }
2678
- const Logo = styled__default.default.span(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n display: inline-block;\n height: 0.8em;\n margin-right: 1em;\n transform: translate(0.3em, -0.2em);\n"])));
2679
- const Header = () => /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
2680
- children: [/* @__PURE__ */jsxRuntime.jsx(Logo, {
2681
- children: /* @__PURE__ */jsxRuntime.jsx(MuxLogo, {
2682
- height: 13
2683
- })
2684
- }), "API Credentials"]
2685
- });
2686
- function FormField(props) {
2687
- const {
2688
- children,
2689
- title,
2690
- description,
2691
- inputId
2692
- } = props;
2693
- return /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
2694
- space: 1,
2695
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
2696
- align: "flex-end",
2697
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
2698
- flex: 1,
2699
- paddingY: 2,
2700
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
2701
- space: 2,
2702
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
2703
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
2704
- as: "label",
2705
- htmlFor: inputId,
2706
- weight: "semibold",
2707
- size: 1,
2708
- children: title || /* @__PURE__ */jsxRuntime.jsx("em", {
2709
- children: "Untitled"
2710
- })
2711
- }), description && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
2712
- muted: true,
2713
- size: 1,
2714
- children: description
2715
- })]
2716
- })
2717
- })
2718
- })
2719
- }), /* @__PURE__ */jsxRuntime.jsx("div", {
2720
- children
2721
- })]
2722
- });
2723
- }
2724
- var FormField$1 = React.memo(FormField);
2725
- const fieldNames = ["token", "secretKey", "enableSignedUrls"];
2726
- function ConfigureApi(_ref20) {
2727
- let {
2728
- secrets,
2729
- setDialogState
2730
- } = _ref20;
2731
- var _a, _b;
2732
- const client = useClient();
2733
- const [state, dispatch] = useSecretsFormState(secrets);
2734
- const hasSecretsInitially = React.useMemo(() => secrets.token && secrets.secretKey, [secrets]);
2735
- const handleClose = React.useCallback(() => setDialogState(false), [setDialogState]);
2736
- const dirty = React.useMemo(() => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls, [secrets, state]);
2737
- const id = "ConfigureApi".concat(React.useId());
2738
- const [tokenId, secretKeyId, enableSignedUrlsId] = React.useMemo(() => fieldNames.map(field => "".concat(id, "-").concat(field)), [id]);
2739
- const firstField = React.useRef(null);
2740
- const handleSaveSecrets = useSaveSecrets(client, secrets);
2741
- const saving = React.useRef(false);
2742
- const handleSubmit = React.useCallback(event => {
2743
- event.preventDefault();
2744
- if (!saving.current && event.currentTarget.reportValidity()) {
2745
- saving.current = true;
2746
- dispatch({
2747
- type: "submit"
2748
- });
2749
- const {
2750
- token,
2751
- secretKey,
2752
- enableSignedUrls
2753
- } = state;
2754
- handleSaveSecrets({
2755
- token,
2756
- secretKey,
2757
- enableSignedUrls
2758
- }).then(savedSecrets => {
2759
- const {
2760
- projectId,
2761
- dataset
2762
- } = client.config();
2763
- suspendReact.clear([cacheNs, _id, projectId, dataset]);
2764
- suspendReact.preload(() => Promise.resolve(savedSecrets), [cacheNs, _id, projectId, dataset]);
2765
- setDialogState(false);
2766
- }).catch(err => dispatch({
2767
- type: "error",
2768
- payload: err.message
2769
- })).finally(() => {
2770
- saving.current = false;
2771
- });
2772
- }
2773
- }, [client, dispatch, handleSaveSecrets, setDialogState, state]);
2774
- const handleChangeToken = React.useCallback(event => {
2775
- dispatch({
2776
- type: "change",
2777
- payload: {
2778
- name: "token",
2779
- value: event.currentTarget.value
2780
- }
2781
- });
2782
- }, [dispatch]);
2783
- const handleChangeSecretKey = React.useCallback(event => {
2784
- dispatch({
2785
- type: "change",
2786
- payload: {
2787
- name: "secretKey",
2788
- value: event.currentTarget.value
2789
- }
2790
- });
2791
- }, [dispatch]);
2792
- const handleChangeEnableSignedUrls = React.useCallback(event => {
2793
- dispatch({
2794
- type: "change",
2795
- payload: {
2796
- name: "enableSignedUrls",
2797
- value: event.currentTarget.checked
2798
- }
2799
- });
2800
- }, [dispatch]);
2801
- React.useEffect(() => {
2802
- if (firstField.current) {
2803
- firstField.current.focus();
2804
- }
2805
- }, [firstField]);
2806
- return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
2807
- id,
2808
- onClose: handleClose,
2809
- header: /* @__PURE__ */jsxRuntime.jsx(Header, {}),
2810
- width: 0,
2811
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
2812
- padding: 4,
2813
- style: {
2814
- position: "relative"
2815
- },
2816
- children: /* @__PURE__ */jsxRuntime.jsx("form", {
2817
- onSubmit: handleSubmit,
2818
- noValidate: true,
2819
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
2820
- space: 4,
2821
- children: [!hasSecretsInitially && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
2822
- padding: [3, 3, 3],
2823
- radius: 2,
2824
- shadow: 1,
2825
- tone: "primary",
2826
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
2827
- space: 3,
2828
- children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
2829
- size: 1,
2830
- children: ["To set up a new access token, go to your", " ", /* @__PURE__ */jsxRuntime.jsx("a", {
2831
- href: "https://dashboard.mux.com/settings/access-tokens",
2832
- target: "_blank",
2833
- rel: "noreferrer noopener",
2834
- children: "account on mux.com"
2835
- }), "."]
2836
- }), /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
2837
- size: 1,
2838
- children: ["The access token needs permissions: ", /* @__PURE__ */jsxRuntime.jsx("strong", {
2839
- children: "Mux Video "
2840
- }), "(Full Access) and ", /* @__PURE__ */jsxRuntime.jsx("strong", {
2841
- children: "Mux Data"
2842
- }), " (Read)", /* @__PURE__ */jsxRuntime.jsx("br", {}), "The credentials will be stored safely in a hidden document only available to editors."]
2843
- })]
2844
- })
2845
- }), /* @__PURE__ */jsxRuntime.jsx(FormField$1, {
2846
- title: "Access Token",
2847
- inputId: tokenId,
2848
- children: /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
2849
- id: tokenId,
2850
- ref: firstField,
2851
- onChange: handleChangeToken,
2852
- type: "text",
2853
- value: (_a = state.token) != null ? _a : "",
2854
- required: !!state.secretKey || state.enableSignedUrls
2855
- })
2856
- }), /* @__PURE__ */jsxRuntime.jsx(FormField$1, {
2857
- title: "Secret Key",
2858
- inputId: secretKeyId,
2859
- children: /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
2860
- id: secretKeyId,
2861
- onChange: handleChangeSecretKey,
2862
- type: "text",
2863
- value: (_b = state.secretKey) != null ? _b : "",
2864
- required: !!state.token || state.enableSignedUrls
2865
- })
2866
- }), /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
2867
- space: 4,
2868
- children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
2869
- align: "center",
2870
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Checkbox, {
2871
- id: enableSignedUrlsId,
2872
- onChange: handleChangeEnableSignedUrls,
2873
- checked: state.enableSignedUrls,
2874
- style: {
2875
- display: "block"
2876
- }
2877
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
2878
- flex: 1,
2879
- paddingLeft: 3,
2880
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
2881
- children: /* @__PURE__ */jsxRuntime.jsx("label", {
2882
- htmlFor: enableSignedUrlsId,
2883
- children: "Enable Signed Urls"
2884
- })
2885
- })
2886
- })]
2887
- }), secrets.signingKeyId && state.enableSignedUrls ? /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
2888
- padding: [3, 3, 3],
2889
- radius: 2,
2890
- shadow: 1,
2891
- tone: "caution",
2892
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
2893
- space: 3,
2894
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
2895
- size: 1,
2896
- children: "The signing key ID that Sanity will use is:"
2897
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Code, {
2898
- size: 1,
2899
- children: secrets.signingKeyId
2900
- }), /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
2901
- size: 1,
2902
- children: ["This key is only used for previewing content in the Sanity UI.", /* @__PURE__ */jsxRuntime.jsx("br", {}), "You should generate a different key to use in your application server."]
2903
- })]
2904
- })
2905
- }) : null]
2906
- }), /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
2907
- space: 2,
2908
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Button, {
2909
- text: "Save",
2910
- disabled: !dirty,
2911
- loading: state.submitting,
2912
- tone: "primary",
2913
- mode: "default",
2914
- type: "submit"
2915
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
2916
- disabled: state.submitting,
2917
- text: "Cancel",
2918
- mode: "bleed",
2919
- onClick: handleClose
2920
- })]
2921
- }), state.error && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
2922
- padding: [3, 3, 3],
2923
- radius: 2,
2924
- shadow: 1,
2925
- tone: "critical",
2926
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
2927
- children: state.error
2928
- })
2929
- })]
2930
- })
2931
- })
2932
- })
2933
- });
2934
- }
2935
- var ConfigureApi$1 = React.memo(ConfigureApi);
2936
- function ErrorBoundaryCard(props) {
2937
- const {
2938
- children,
2939
- schemaType
2940
- } = props;
2941
- const {
2942
- push: pushToast
2943
- } = ui.useToast();
2944
- const errorRef = React.useRef(null);
2945
- const {
2946
- ErrorBoundary,
2947
- didCatch,
2948
- error,
2949
- reset
2950
- } = useErrorBoundary.useErrorBoundary({
2951
- onDidCatch: (err, errorInfo) => {
2952
- console.group(err.toString());
2953
- console.groupCollapsed("console.error");
2954
- console.error(err);
2955
- console.groupEnd();
2956
- if (err.stack) {
2957
- console.groupCollapsed("error.stack");
2958
- console.log(err.stack);
2959
- console.groupEnd();
2960
- }
2961
- if (errorInfo == null ? void 0 : errorInfo.componentStack) {
2962
- console.groupCollapsed("errorInfo.componentStack");
2963
- console.log(errorInfo.componentStack);
2964
- console.groupEnd();
2965
- }
2966
- console.groupEnd();
2967
- pushToast({
2968
- status: "error",
2969
- title: "Plugin crashed",
2970
- description: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
2971
- align: "center",
2972
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
2973
- space: 1,
2974
- children: ["An error happened while rendering", /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
2975
- padding: 1,
2976
- fontSize: 1,
2977
- style: {
2978
- transform: "translateY(1px)"
2979
- },
2980
- mode: "ghost",
2981
- text: schemaType.title,
2982
- onClick: () => {
2983
- if (errorRef.current) {
2984
- scrollIntoView__default.default(errorRef.current, {
2985
- behavior: "smooth",
2986
- scrollMode: "if-needed",
2987
- block: "center"
2988
- });
2989
- }
2990
- }
2991
- })]
2992
- })
2993
- })
2994
- });
2995
- }
2996
- });
2997
- const handleRetry = React.useCallback(() => {
2998
- suspendReact.clear([name]);
2999
- reset();
3000
- }, [reset]);
3001
- if (didCatch) {
3002
- return /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
3003
- ref: errorRef,
3004
- paddingX: [2, 3, 4, 4],
3005
- height: "fill",
3006
- shadow: 1,
3007
- overflow: "auto",
3008
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
3009
- justify: "flex-start",
3010
- align: "center",
3011
- height: "fill",
3012
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
3013
- columns: 1,
3014
- gap: [2, 3, 4, 4],
3015
- children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Heading, {
3016
- as: "h1",
3017
- children: ["The ", /* @__PURE__ */jsxRuntime.jsx("code", {
3018
- children: name
3019
- }), " plugin crashed"]
3020
- }), (error == null ? void 0 : error.message) && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
3021
- padding: 3,
3022
- tone: "critical",
3023
- shadow: 1,
3024
- radius: 2,
3025
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
3026
- children: error.message
3027
- })
3028
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
3029
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
3030
- onClick: handleRetry,
3031
- text: "Retry"
3032
- })
3033
- })]
3034
- })
3035
- })
3036
- });
3037
- }
3038
- return /* @__PURE__ */jsxRuntime.jsx(ErrorBoundary, {
3039
- children
3040
- });
3041
- }
3042
- var ErrorBoundaryCard$1 = React.memo(ErrorBoundaryCard);
3043
- const AspectRatioCard = styled__default.default(ui.Card)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n aspect-ratio: 16 / 9;\n position: relative;\n width: 100%;\n"])));
3044
- const InputFallback = () => {
3045
- return /* @__PURE__ */jsxRuntime.jsx("div", {
3046
- style: {
3047
- padding: 1
3048
- },
3049
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
3050
- shadow: 1,
3051
- sizing: "border",
3052
- style: {
3053
- aspectRatio: "16/9",
3054
- width: "100%",
3055
- borderRadius: "1px"
3056
- },
3057
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
3058
- align: "center",
3059
- direction: "column",
3060
- height: "fill",
3061
- justify: "center",
3062
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
3063
- muted: true
3064
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
3065
- marginTop: 3,
3066
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
3067
- align: "center",
3068
- muted: true,
3069
- size: 1,
3070
- children: "Loading\u2026"
3071
- })
3072
- })]
3073
- })
3074
- })
3075
- });
3076
- };
3077
- function Onboard(props) {
3078
- const {
3079
- setDialogState
3080
- } = props;
3081
- const handleOpen = React.useCallback(() => setDialogState("secrets"), [setDialogState]);
3082
- return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
3083
- children: /* @__PURE__ */jsxRuntime.jsx("div", {
3084
- style: {
3085
- padding: 2
3086
- },
3087
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
3088
- display: "flex",
3089
- sizing: "border",
3090
- style: {
3091
- aspectRatio: "16/9",
3092
- width: "100%",
3093
- boxShadow: "var(--card-bg-color) 0 0 0 2px"
3094
- },
3095
- paddingX: [2, 3, 4, 4],
3096
- radius: 1,
3097
- tone: "transparent",
3098
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
3099
- justify: "flex-start",
3100
- align: "center",
3101
- children: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
3102
- columns: 1,
3103
- gap: [2, 3, 4, 4],
3104
- children: [/* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
3105
- paddingY: 1,
3106
- children: /* @__PURE__ */jsxRuntime.jsx("div", {
3107
- style: {
3108
- height: "32px"
3109
- },
3110
- children: /* @__PURE__ */jsxRuntime.jsx(MuxLogo, {})
3111
- })
3112
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
3113
- paddingY: 1,
3114
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
3115
- size: [0, 1, 2, 2],
3116
- children: "Upload and preview videos directly from your studio."
3117
- })
3118
- }), /* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
3119
- paddingY: 1,
3120
- children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
3121
- mode: "ghost",
3122
- icon: icons.PlugIcon,
3123
- text: "Configure API",
3124
- onClick: handleOpen
3125
- })
3126
- })]
3127
- })
3128
- })
3129
- })
3130
- })
3131
- });
3132
- }
3133
- const Input = props => {
3134
- var _a;
3135
- const client = useClient();
3136
- const secretDocumentValues = useSecretsDocumentValues();
3137
- const assetDocumentValues = useAssetDocumentValues((_a = props.value) == null ? void 0 : _a.asset);
3138
- const poll = useMuxPolling(props.readOnly ? void 0 : (assetDocumentValues == null ? void 0 : assetDocumentValues.value) || void 0);
3139
- const [dialogState, setDialogState] = useDialogState();
3140
- const error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
3141
- if (error) {
3142
- throw error;
3143
- }
3144
- const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
3145
- return /* @__PURE__ */jsxRuntime.jsx(AspectRatioCard, {
3146
- children: /* @__PURE__ */jsxRuntime.jsx(ErrorBoundaryCard$1, {
3147
- schemaType: props.schemaType,
3148
- children: /* @__PURE__ */jsxRuntime.jsx(React.Suspense, {
3149
- fallback: /* @__PURE__ */jsxRuntime.jsx(InputFallback, {}),
3150
- children: isLoading ? /* @__PURE__ */jsxRuntime.jsx(InputFallback, {}) : /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
3151
- children: [secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */jsxRuntime.jsx(Onboard, {
3152
- setDialogState
3153
- }) : /* @__PURE__ */jsxRuntime.jsx(MuxVideoInputUploader, {
3154
- ...props,
3155
- config: props.config,
3156
- onChange: props.onChange,
3157
- client,
3158
- secrets: secretDocumentValues.value.secrets,
3159
- asset: assetDocumentValues.value,
3160
- dialogState,
3161
- setDialogState,
3162
- needsSetup: secretDocumentValues.value.needsSetup
3163
- }), dialogState === "secrets" && /* @__PURE__ */jsxRuntime.jsx(ConfigureApi$1, {
3164
- setDialogState,
3165
- secrets: secretDocumentValues.value.secrets
3166
- })]
3167
- })
3168
- })
3169
- })
3170
- });
3171
- };
3172
- var Input$1 = React.memo(Input);
3173
- function muxVideoCustomRendering(config) {
3174
- return {
3175
- components: {
3176
- input: props => /* @__PURE__ */jsxRuntime.jsx(Input$1, {
3177
- config,
3178
- ...props
3179
- })
3180
- },
3181
- preview: {
3182
- select: {
3183
- filename: "asset.filename",
3184
- playbackId: "asset.playbackId",
3185
- status: "asset.status",
3186
- assetId: "asset.assetId",
3187
- thumbTime: "asset.thumbTime",
3188
- data: "asset.data"
3189
- },
3190
- prepare: asset => {
3191
- const {
3192
- filename,
3193
- playbackId,
3194
- status
3195
- } = asset;
3196
- return {
3197
- title: filename || playbackId || "",
3198
- subtitle: status ? "status: ".concat(status) : null,
3199
- media: asset.playbackId ? /* @__PURE__ */jsxRuntime.jsx(VideoThumbnail, {
3200
- asset,
3201
- width: 64
3202
- }) : null
3203
- };
3204
- }
3205
- }
3206
- };
3207
- }
3208
- const muxVideo = {
3209
- name: "mux.video",
3210
- type: "object",
3211
- title: "Video asset reference",
3212
- fields: [{
3213
- title: "Video",
3214
- name: "asset",
3215
- type: "reference",
3216
- weak: true,
3217
- to: [{
3218
- type: "mux.videoAsset"
3219
- }]
3220
- }]
3221
- };
3222
- const muxVideoAsset = {
3223
- name: "mux.videoAsset",
3224
- type: "object",
3225
- title: "Video asset",
3226
- fields: [{
3227
- type: "string",
3228
- name: "status"
3229
- }, {
3230
- type: "string",
3231
- name: "assetId"
3232
- }, {
3233
- type: "string",
3234
- name: "playbackId"
3235
- }, {
3236
- type: "string",
3237
- name: "filename"
3238
- }, {
3239
- type: "number",
3240
- name: "thumbTime"
3241
- }]
3242
- };
3243
- const defaultConfig = {
3244
- mp4_support: "none"
3245
- };
3246
- const muxInput = sanity.definePlugin(userConfig => {
3247
- const config = {
3248
- ...defaultConfig,
3249
- ...userConfig
3250
- };
3251
- return {
3252
- name: "mux-input",
3253
- schema: {
3254
- types: [muxVideoAsset, {
3255
- ...muxVideo,
3256
- ...muxVideoCustomRendering(config)
3257
- }]
3258
- }
3259
- };
3260
- });
3261
- exports.UploadProgress = UploadProgress;
3262
- exports.VideoThumbnail = VideoThumbnail;
3263
- exports.defaultConfig = defaultConfig;
3264
- exports.deleteAsset = deleteAsset;
3265
- exports.generateJwt = generateJwt;
3266
- exports.getPlaybackId = getPlaybackId;
3267
- exports.getPlaybackPolicy = getPlaybackPolicy;
3268
- exports.getPosterSrc = getPosterSrc;
3269
- exports.muxInput = muxInput;
3270
- exports.useClient = useClient;
3271
- //# sourceMappingURL=index-9cd542f1.cjs.map