sanity-plugin-mux-input 2.4.0 → 2.4.1
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.
- package/LICENSE +1 -1
- package/dist/index.js +412 -181
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +413 -182
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -12
- package/src/hooks/useAssets.ts +29 -23
package/dist/index.js
CHANGED
|
@@ -19,7 +19,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
19
19
|
mod
|
|
20
20
|
));
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: !0 });
|
|
22
|
-
var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), rxjs = require("rxjs"), operators = require("rxjs/operators"), suspendReact = require("suspend-react"), MuxPlayer = require("@mux/mux-player-react"), desk = require("sanity/desk"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"),
|
|
22
|
+
var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), reactRx = require("react-rx"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), rxjs = require("rxjs"), operators = require("rxjs/operators"), suspendReact = require("suspend-react"), MuxPlayer = require("@mux/mux-player-react"), desk = require("sanity/desk"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"), useSWR = require("swr"), scrollIntoView = require("scroll-into-view-if-needed"), upchunk = require("@mux/upchunk"), reactIs = require("react-is"), LanguagesList = require("iso-639-1");
|
|
23
23
|
function _interopDefaultCompat(e) {
|
|
24
24
|
return e && typeof e == "object" && "default" in e ? e : { default: e };
|
|
25
25
|
}
|
|
@@ -40,6 +40,14 @@ const ToolIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
|
|
|
40
40
|
function useClient() {
|
|
41
41
|
return sanity.useClient({ apiVersion: SANITY_API_VERSION });
|
|
42
42
|
}
|
|
43
|
+
var __defProp$j = Object.defineProperty, __getOwnPropSymbols$j = Object.getOwnPropertySymbols, __hasOwnProp$j = Object.prototype.hasOwnProperty, __propIsEnum$j = Object.prototype.propertyIsEnumerable, __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$j = (a2, b) => {
|
|
44
|
+
for (var prop in b || (b = {}))
|
|
45
|
+
__hasOwnProp$j.call(b, prop) && __defNormalProp$j(a2, prop, b[prop]);
|
|
46
|
+
if (__getOwnPropSymbols$j)
|
|
47
|
+
for (var prop of __getOwnPropSymbols$j(b))
|
|
48
|
+
__propIsEnum$j.call(b, prop) && __defNormalProp$j(a2, prop, b[prop]);
|
|
49
|
+
return a2;
|
|
50
|
+
};
|
|
43
51
|
const SPECIAL_CHARS = /([^!@#$%^&*(),\\/?";:{}|[\]+<>\s-])+/g, STRIP_EDGE_CHARS = /(^[.]+)|([.]+$)/;
|
|
44
52
|
function tokenize(string) {
|
|
45
53
|
return (string.match(SPECIAL_CHARS) || []).map((token) => token.replace(STRIP_EDGE_CHARS, ""));
|
|
@@ -61,41 +69,53 @@ function createSearchFilter(query) {
|
|
|
61
69
|
return {
|
|
62
70
|
filter: createConstraints(terms, query.length >= 8),
|
|
63
71
|
// if the search is big enough, include the assetId (mux id) in the results
|
|
64
|
-
params: {
|
|
65
|
-
...toGroqParams(terms)
|
|
66
|
-
}
|
|
72
|
+
params: __spreadValues$j({}, toGroqParams(terms))
|
|
67
73
|
};
|
|
68
74
|
}
|
|
75
|
+
var __defProp$i = Object.defineProperty, __defProps$c = Object.defineProperties, __getOwnPropDescs$c = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$i = Object.getOwnPropertySymbols, __hasOwnProp$i = Object.prototype.hasOwnProperty, __propIsEnum$i = Object.prototype.propertyIsEnumerable, __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$i = (a2, b) => {
|
|
76
|
+
for (var prop in b || (b = {}))
|
|
77
|
+
__hasOwnProp$i.call(b, prop) && __defNormalProp$i(a2, prop, b[prop]);
|
|
78
|
+
if (__getOwnPropSymbols$i)
|
|
79
|
+
for (var prop of __getOwnPropSymbols$i(b))
|
|
80
|
+
__propIsEnum$i.call(b, prop) && __defNormalProp$i(a2, prop, b[prop]);
|
|
81
|
+
return a2;
|
|
82
|
+
}, __spreadProps$c = (a2, b) => __defProps$c(a2, __getOwnPropDescs$c(b));
|
|
69
83
|
const ASSET_SORT_OPTIONS = {
|
|
70
84
|
createdDesc: { groq: "_createdAt desc", label: "Newest first" },
|
|
71
85
|
createdAsc: { groq: "_createdAt asc", label: "First created (oldest)" },
|
|
72
86
|
filenameAsc: { groq: "filename asc", label: "By filename (A-Z)" },
|
|
73
87
|
filenameDesc: { groq: "filename desc", label: "By filename (Z-A)" }
|
|
74
|
-
}, useAssetDocuments =
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
88
|
+
}, useAssetDocuments = ({
|
|
89
|
+
documentStore,
|
|
90
|
+
sort,
|
|
91
|
+
searchQuery
|
|
92
|
+
}) => {
|
|
93
|
+
const memoizedObservable = React.useMemo(() => {
|
|
94
|
+
const search = createSearchFilter(searchQuery), filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && "), sortFragment = ASSET_SORT_OPTIONS[sort].groq;
|
|
95
|
+
return documentStore.listenQuery(
|
|
96
|
+
/* groq */
|
|
97
|
+
`*[${filter}] | order(${sortFragment})`,
|
|
98
|
+
search.params,
|
|
99
|
+
{
|
|
100
|
+
apiVersion: SANITY_API_VERSION
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
}, [documentStore, sort, searchQuery]);
|
|
104
|
+
return reactRx.useObservable(memoizedObservable, void 0);
|
|
105
|
+
};
|
|
85
106
|
function useAssets() {
|
|
86
|
-
const documentStore = sanity.useDocumentStore(), [sort, setSort] = React.useState("createdDesc"), [searchQuery, setSearchQuery] = React.useState(""),
|
|
107
|
+
const documentStore = sanity.useDocumentStore(), [sort, setSort] = React.useState("createdDesc"), [searchQuery, setSearchQuery] = React.useState(""), assetDocumentsObservable = useAssetDocuments({ documentStore, sort, searchQuery }), isLoading = assetDocumentsObservable === void 0;
|
|
87
108
|
return {
|
|
88
109
|
assets: React.useMemo(
|
|
89
110
|
() => (
|
|
90
111
|
// Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
|
|
91
|
-
sanity.collate(
|
|
92
|
-
(collated) => ({
|
|
93
|
-
...collated.draft || collated.published || {},
|
|
112
|
+
sanity.collate(assetDocumentsObservable != null ? assetDocumentsObservable : []).map(
|
|
113
|
+
(collated) => __spreadProps$c(__spreadValues$i({}, collated.draft || collated.published || {}), {
|
|
94
114
|
_id: collated.id
|
|
95
115
|
})
|
|
96
116
|
)
|
|
97
117
|
),
|
|
98
|
-
[
|
|
118
|
+
[assetDocumentsObservable]
|
|
99
119
|
),
|
|
100
120
|
isLoading,
|
|
101
121
|
sort,
|
|
@@ -107,6 +127,14 @@ function useAssets() {
|
|
|
107
127
|
function parseMuxDate(date) {
|
|
108
128
|
return new Date(Number(date) * 1e3);
|
|
109
129
|
}
|
|
130
|
+
var __defProp$h = Object.defineProperty, __defProps$b = Object.defineProperties, __getOwnPropDescs$b = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$h = Object.getOwnPropertySymbols, __hasOwnProp$h = Object.prototype.hasOwnProperty, __propIsEnum$h = Object.prototype.propertyIsEnumerable, __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$h = (a2, b) => {
|
|
131
|
+
for (var prop in b || (b = {}))
|
|
132
|
+
__hasOwnProp$h.call(b, prop) && __defNormalProp$h(a2, prop, b[prop]);
|
|
133
|
+
if (__getOwnPropSymbols$h)
|
|
134
|
+
for (var prop of __getOwnPropSymbols$h(b))
|
|
135
|
+
__propIsEnum$h.call(b, prop) && __defNormalProp$h(a2, prop, b[prop]);
|
|
136
|
+
return a2;
|
|
137
|
+
}, __spreadProps$b = (a2, b) => __defProps$b(a2, __getOwnPropDescs$b(b));
|
|
110
138
|
const FIRST_PAGE = 1, ASSETS_PER_PAGE = 100;
|
|
111
139
|
async function fetchMuxAssetsPage({ secretKey, token }, pageNum) {
|
|
112
140
|
try {
|
|
@@ -128,7 +156,7 @@ async function fetchMuxAssetsPage({ secretKey, token }, pageNum) {
|
|
|
128
156
|
pageNum,
|
|
129
157
|
data: json.data
|
|
130
158
|
};
|
|
131
|
-
} catch {
|
|
159
|
+
} catch (error) {
|
|
132
160
|
return {
|
|
133
161
|
pageNum,
|
|
134
162
|
error: { _tag: "FetchError" }
|
|
@@ -137,8 +165,7 @@ async function fetchMuxAssetsPage({ secretKey, token }, pageNum) {
|
|
|
137
165
|
}
|
|
138
166
|
function accumulateIntermediateState(currentState, pageResult) {
|
|
139
167
|
const currentData = "data" in currentState && currentState.data || [];
|
|
140
|
-
return {
|
|
141
|
-
...currentState,
|
|
168
|
+
return __spreadProps$b(__spreadValues$h({}, currentState), {
|
|
142
169
|
data: [
|
|
143
170
|
...currentData,
|
|
144
171
|
...("data" in pageResult && pageResult.data || []).filter(
|
|
@@ -152,7 +179,7 @@ function accumulateIntermediateState(currentState, pageResult) {
|
|
|
152
179
|
),
|
|
153
180
|
pageNum: pageResult.pageNum,
|
|
154
181
|
loading: !0
|
|
155
|
-
};
|
|
182
|
+
});
|
|
156
183
|
}
|
|
157
184
|
function hasMorePages(pageResult) {
|
|
158
185
|
return typeof pageResult == "object" && "data" in pageResult && Array.isArray(pageResult.data) && pageResult.data.length > 0;
|
|
@@ -180,8 +207,7 @@ function useMuxAssets({ secrets, enabled }) {
|
|
|
180
207
|
).subscribe({
|
|
181
208
|
// Once done, let the user know we've stopped loading
|
|
182
209
|
complete: () => {
|
|
183
|
-
setState((prev) => ({
|
|
184
|
-
...prev,
|
|
210
|
+
setState((prev) => __spreadProps$b(__spreadValues$h({}, prev), {
|
|
185
211
|
loading: !1
|
|
186
212
|
}));
|
|
187
213
|
}
|
|
@@ -195,24 +221,25 @@ const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumen
|
|
|
195
221
|
path$1
|
|
196
222
|
), cache = React.useMemo(() => {
|
|
197
223
|
const exists = !!value, secrets = {
|
|
198
|
-
token: value
|
|
199
|
-
secretKey: value
|
|
200
|
-
enableSignedUrls: value
|
|
201
|
-
signingKeyId: value
|
|
202
|
-
signingKeyPrivate: value
|
|
224
|
+
token: (value == null ? void 0 : value.token) || null,
|
|
225
|
+
secretKey: (value == null ? void 0 : value.secretKey) || null,
|
|
226
|
+
enableSignedUrls: (value == null ? void 0 : value.enableSignedUrls) || !1,
|
|
227
|
+
signingKeyId: (value == null ? void 0 : value.signingKeyId) || null,
|
|
228
|
+
signingKeyPrivate: (value == null ? void 0 : value.signingKeyPrivate) || null
|
|
203
229
|
};
|
|
204
230
|
return {
|
|
205
231
|
isInitialSetup: !exists,
|
|
206
|
-
needsSetup: !secrets
|
|
232
|
+
needsSetup: !(secrets != null && secrets.token) || !(secrets != null && secrets.secretKey),
|
|
207
233
|
secrets
|
|
208
234
|
};
|
|
209
235
|
}, [value]);
|
|
210
236
|
return { error, isLoading, value: cache };
|
|
211
237
|
};
|
|
212
238
|
function useImportMuxAssets() {
|
|
239
|
+
var _a;
|
|
213
240
|
const documentStore = sanity.useDocumentStore(), client = sanity.useClient({
|
|
214
241
|
apiVersion: SANITY_API_VERSION
|
|
215
|
-
}), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!secretDocumentValues.value.secrets
|
|
242
|
+
}), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!((_a = secretDocumentValues.value.secrets) != null && _a.secretKey), [importError, setImportError] = React.useState(), [importState, setImportState] = React.useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
|
|
216
243
|
secrets: secretDocumentValues.value.secrets,
|
|
217
244
|
enabled: hasSecrets && dialogOpen
|
|
218
245
|
}), missingAssets = React.useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a2) => !assetExistsInSanity(a2, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = React.useState([]), closeDialog = () => {
|
|
@@ -246,7 +273,8 @@ function useImportMuxAssets() {
|
|
|
246
273
|
};
|
|
247
274
|
}
|
|
248
275
|
function muxAssetToSanityDocument(asset) {
|
|
249
|
-
|
|
276
|
+
var _a;
|
|
277
|
+
const playbackId = (_a = (asset.playback_ids || []).find((p) => p.id)) == null ? void 0 : _a.id;
|
|
250
278
|
if (playbackId)
|
|
251
279
|
return {
|
|
252
280
|
_id: uuid.uuid(),
|
|
@@ -283,8 +311,9 @@ function useInView(options = {}) {
|
|
|
283
311
|
return React.useEffect(() => {
|
|
284
312
|
if (!ref.current) return;
|
|
285
313
|
const observer = new IntersectionObserver(([entry], obs) => {
|
|
314
|
+
var _a;
|
|
286
315
|
const nowInView = entry.isIntersecting && obs.thresholds.some((threshold) => entry.intersectionRatio >= threshold);
|
|
287
|
-
setInView(nowInView), options
|
|
316
|
+
setInView(nowInView), (_a = options == null ? void 0 : options.onChange) == null || _a.call(options, nowInView);
|
|
288
317
|
}, options), toObserve = ref.current;
|
|
289
318
|
return observer.observe(toObserve), () => {
|
|
290
319
|
toObserve && observer.unobserve(toObserve);
|
|
@@ -307,11 +336,11 @@ function readSecrets(client) {
|
|
|
307
336
|
{ _id }
|
|
308
337
|
);
|
|
309
338
|
return {
|
|
310
|
-
token: data
|
|
311
|
-
secretKey: data
|
|
312
|
-
enableSignedUrls: !!data
|
|
313
|
-
signingKeyId: data
|
|
314
|
-
signingKeyPrivate: data
|
|
339
|
+
token: (data == null ? void 0 : data.token) || null,
|
|
340
|
+
secretKey: (data == null ? void 0 : data.secretKey) || null,
|
|
341
|
+
enableSignedUrls: !!(data != null && data.enableSignedUrls) || !1,
|
|
342
|
+
signingKeyId: (data == null ? void 0 : data.signingKeyId) || null,
|
|
343
|
+
signingKeyPrivate: (data == null ? void 0 : data.signingKeyPrivate) || null
|
|
315
344
|
};
|
|
316
345
|
}, [cacheNs, _id, projectId, dataset]);
|
|
317
346
|
}
|
|
@@ -323,7 +352,7 @@ function generateJwt(client, playbackId, aud, payload) {
|
|
|
323
352
|
throw new TypeError("Missing `signingKeyPrivate`.\n Check your plugin's configuration");
|
|
324
353
|
const { default: sign } = suspendReact.suspend(() => import("jsonwebtoken-esm/sign"), ["jsonwebtoken-esm/sign"]);
|
|
325
354
|
return sign(
|
|
326
|
-
payload ? JSON.parse(JSON.stringify(payload, (_, v) => v
|
|
355
|
+
payload ? JSON.parse(JSON.stringify(payload, (_, v) => v != null ? v : void 0)) : {},
|
|
327
356
|
atob(signingKeyPrivate),
|
|
328
357
|
{
|
|
329
358
|
algorithm: "RS256",
|
|
@@ -336,12 +365,13 @@ function generateJwt(client, playbackId, aud, payload) {
|
|
|
336
365
|
);
|
|
337
366
|
}
|
|
338
367
|
function getPlaybackId(asset) {
|
|
339
|
-
if (!asset
|
|
368
|
+
if (!(asset != null && asset.playbackId))
|
|
340
369
|
throw console.error("Asset is missing a playbackId", { asset }), new TypeError("Missing playbackId");
|
|
341
370
|
return asset.playbackId;
|
|
342
371
|
}
|
|
343
372
|
function getPlaybackPolicy(asset) {
|
|
344
|
-
|
|
373
|
+
var _a, _b, _c, _d;
|
|
374
|
+
return (_d = (_c = (_b = (_a = asset.data) == null ? void 0 : _a.playback_ids) == null ? void 0 : _b.find((playbackId) => asset.playbackId === playbackId.id)) == null ? void 0 : _c.policy) != null ? _d : "public";
|
|
345
375
|
}
|
|
346
376
|
function getAnimatedPosterSrc({
|
|
347
377
|
asset,
|
|
@@ -354,7 +384,7 @@ function getAnimatedPosterSrc({
|
|
|
354
384
|
}) {
|
|
355
385
|
const params = { height, width, start, end, fps }, playbackId = getPlaybackId(asset);
|
|
356
386
|
let searchParams = new URLSearchParams(
|
|
357
|
-
JSON.parse(JSON.stringify(params, (_, v) => v
|
|
387
|
+
JSON.parse(JSON.stringify(params, (_, v) => v != null ? v : void 0))
|
|
358
388
|
);
|
|
359
389
|
if (getPlaybackPolicy(asset) === "signed") {
|
|
360
390
|
const token = generateJwt(client, playbackId, "g", params);
|
|
@@ -381,7 +411,7 @@ function VideoThumbnail({
|
|
|
381
411
|
const { inView, ref } = useInView(), posterWidth = width || 250, [status, setStatus] = React.useState("loading"), client = useClient(), animatedSrc = React.useMemo(() => {
|
|
382
412
|
try {
|
|
383
413
|
return getAnimatedPosterSrc({ asset, client, width: posterWidth });
|
|
384
|
-
} catch {
|
|
414
|
+
} catch (e) {
|
|
385
415
|
status !== "error" && setStatus("error");
|
|
386
416
|
return;
|
|
387
417
|
}
|
|
@@ -453,6 +483,14 @@ function VideoThumbnail({
|
|
|
453
483
|
}
|
|
454
484
|
);
|
|
455
485
|
}
|
|
486
|
+
var __defProp$g = Object.defineProperty, __getOwnPropSymbols$g = Object.getOwnPropertySymbols, __hasOwnProp$g = Object.prototype.hasOwnProperty, __propIsEnum$g = Object.prototype.propertyIsEnumerable, __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$g = (a2, b) => {
|
|
487
|
+
for (var prop in b || (b = {}))
|
|
488
|
+
__hasOwnProp$g.call(b, prop) && __defNormalProp$g(a2, prop, b[prop]);
|
|
489
|
+
if (__getOwnPropSymbols$g)
|
|
490
|
+
for (var prop of __getOwnPropSymbols$g(b))
|
|
491
|
+
__propIsEnum$g.call(b, prop) && __defNormalProp$g(a2, prop, b[prop]);
|
|
492
|
+
return a2;
|
|
493
|
+
};
|
|
456
494
|
const MissingAssetCheckbox = styledComponents.styled(ui.Checkbox)`
|
|
457
495
|
position: static !important;
|
|
458
496
|
|
|
@@ -470,6 +508,7 @@ function MissingAsset({
|
|
|
470
508
|
selectAsset,
|
|
471
509
|
selected
|
|
472
510
|
}) {
|
|
511
|
+
var _a;
|
|
473
512
|
const duration = sanity.useFormattedDuration(asset.duration * 1e3);
|
|
474
513
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
475
514
|
ui.Card,
|
|
@@ -498,7 +537,7 @@ function MissingAsset({
|
|
|
498
537
|
assetId: asset.id,
|
|
499
538
|
data: asset,
|
|
500
539
|
filename: asset.id,
|
|
501
|
-
playbackId: asset.playback_ids.find((p) => p.id)
|
|
540
|
+
playbackId: (_a = asset.playback_ids.find((p) => p.id)) == null ? void 0 : _a.id
|
|
502
541
|
},
|
|
503
542
|
width: 150
|
|
504
543
|
}
|
|
@@ -529,7 +568,8 @@ function MissingAsset({
|
|
|
529
568
|
);
|
|
530
569
|
}
|
|
531
570
|
function ImportVideosDialog(props) {
|
|
532
|
-
|
|
571
|
+
var _a, _b;
|
|
572
|
+
const { importState } = props, canTriggerImport = (importState === "idle" || importState === "error") && props.selectedAssets.length > 0, isImporting = importState === "importing", noAssetsToImport = ((_a = props.missingAssets) == null ? void 0 : _a.length) === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading;
|
|
533
573
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
534
574
|
ui.Dialog,
|
|
535
575
|
{
|
|
@@ -561,7 +601,7 @@ function ImportVideosDialog(props) {
|
|
|
561
601
|
fontSize: 2,
|
|
562
602
|
padding: 3,
|
|
563
603
|
mode: "ghost",
|
|
564
|
-
text: props.selectedAssets
|
|
604
|
+
text: ((_b = props.selectedAssets) == null ? void 0 : _b.length) > 0 ? `Import ${props.selectedAssets.length} video(s)` : "No video(s) selected",
|
|
565
605
|
tone: "positive",
|
|
566
606
|
onClick: props.importAssets,
|
|
567
607
|
iconRight: isImporting && ui.Spinner,
|
|
@@ -661,7 +701,7 @@ function ImportVideosDialog(props) {
|
|
|
661
701
|
function ImportVideosFromMux() {
|
|
662
702
|
const importAssets = useImportMuxAssets();
|
|
663
703
|
if (importAssets.hasSecrets)
|
|
664
|
-
return importAssets.dialogOpen ? /* @__PURE__ */ jsxRuntime.jsx(ImportVideosDialog, {
|
|
704
|
+
return importAssets.dialogOpen ? /* @__PURE__ */ jsxRuntime.jsx(ImportVideosDialog, __spreadValues$g({}, importAssets)) : /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { mode: "bleed", text: "Import from Mux", onClick: importAssets.openDialog });
|
|
665
705
|
}
|
|
666
706
|
const CONTEXT_MENU_POPOVER_PROPS = {
|
|
667
707
|
constrainSize: !0,
|
|
@@ -722,24 +762,40 @@ const IconInfo = (props) => {
|
|
|
722
762
|
/* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: props.size || 1, muted: props.muted, children: props.text })
|
|
723
763
|
] });
|
|
724
764
|
};
|
|
765
|
+
var __defProp$f = Object.defineProperty, __defProps$a = Object.defineProperties, __getOwnPropDescs$a = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$f = Object.getOwnPropertySymbols, __hasOwnProp$f = Object.prototype.hasOwnProperty, __propIsEnum$f = Object.prototype.propertyIsEnumerable, __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$f = (a2, b) => {
|
|
766
|
+
for (var prop in b || (b = {}))
|
|
767
|
+
__hasOwnProp$f.call(b, prop) && __defNormalProp$f(a2, prop, b[prop]);
|
|
768
|
+
if (__getOwnPropSymbols$f)
|
|
769
|
+
for (var prop of __getOwnPropSymbols$f(b))
|
|
770
|
+
__propIsEnum$f.call(b, prop) && __defNormalProp$f(a2, prop, b[prop]);
|
|
771
|
+
return a2;
|
|
772
|
+
}, __spreadProps$a = (a2, b) => __defProps$a(a2, __getOwnPropDescs$a(b));
|
|
725
773
|
function ResolutionIcon(props) {
|
|
726
|
-
return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24",
|
|
774
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps$a(__spreadValues$f({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
727
775
|
"path",
|
|
728
776
|
{
|
|
729
777
|
fill: "currentColor",
|
|
730
778
|
d: "M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
|
|
731
779
|
}
|
|
732
|
-
) });
|
|
780
|
+
) }));
|
|
733
781
|
}
|
|
782
|
+
var __defProp$e = Object.defineProperty, __defProps$9 = Object.defineProperties, __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$e = Object.getOwnPropertySymbols, __hasOwnProp$e = Object.prototype.hasOwnProperty, __propIsEnum$e = Object.prototype.propertyIsEnumerable, __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$e = (a2, b) => {
|
|
783
|
+
for (var prop in b || (b = {}))
|
|
784
|
+
__hasOwnProp$e.call(b, prop) && __defNormalProp$e(a2, prop, b[prop]);
|
|
785
|
+
if (__getOwnPropSymbols$e)
|
|
786
|
+
for (var prop of __getOwnPropSymbols$e(b))
|
|
787
|
+
__propIsEnum$e.call(b, prop) && __defNormalProp$e(a2, prop, b[prop]);
|
|
788
|
+
return a2;
|
|
789
|
+
}, __spreadProps$9 = (a2, b) => __defProps$9(a2, __getOwnPropDescs$9(b));
|
|
734
790
|
function StopWatchIcon(props) {
|
|
735
791
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
736
792
|
"svg",
|
|
737
|
-
{
|
|
793
|
+
__spreadProps$9(__spreadValues$e({
|
|
738
794
|
xmlns: "http://www.w3.org/2000/svg",
|
|
739
795
|
width: "1em",
|
|
740
796
|
height: "1em",
|
|
741
|
-
viewBox: "0 0 512 512"
|
|
742
|
-
|
|
797
|
+
viewBox: "0 0 512 512"
|
|
798
|
+
}, props), {
|
|
743
799
|
children: [
|
|
744
800
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M232 306.667h48V176h-48v130.667z", fill: "currentColor" }),
|
|
745
801
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -751,7 +807,7 @@ function StopWatchIcon(props) {
|
|
|
751
807
|
),
|
|
752
808
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M192 32h128v48H192z", fill: "currentColor" })
|
|
753
809
|
]
|
|
754
|
-
}
|
|
810
|
+
})
|
|
755
811
|
);
|
|
756
812
|
}
|
|
757
813
|
function getVideoSrc({ asset, client }) {
|
|
@@ -762,14 +818,33 @@ function getVideoSrc({ asset, client }) {
|
|
|
762
818
|
}
|
|
763
819
|
return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
|
|
764
820
|
}
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
821
|
+
var __defProp$d = Object.defineProperty, __defProps$8 = Object.defineProperties, __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$d = Object.getOwnPropertySymbols, __hasOwnProp$d = Object.prototype.hasOwnProperty, __propIsEnum$d = Object.prototype.propertyIsEnumerable, __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$d = (a2, b) => {
|
|
822
|
+
for (var prop in b || (b = {}))
|
|
823
|
+
__hasOwnProp$d.call(b, prop) && __defNormalProp$d(a2, prop, b[prop]);
|
|
824
|
+
if (__getOwnPropSymbols$d)
|
|
825
|
+
for (var prop of __getOwnPropSymbols$d(b))
|
|
826
|
+
__propIsEnum$d.call(b, prop) && __defNormalProp$d(a2, prop, b[prop]);
|
|
827
|
+
return a2;
|
|
828
|
+
}, __spreadProps$8 = (a2, b) => __defProps$8(a2, __getOwnPropDescs$8(b)), __objRest$3 = (source, exclude) => {
|
|
829
|
+
var target = {};
|
|
830
|
+
for (var prop in source)
|
|
831
|
+
__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
|
|
832
|
+
if (source != null && __getOwnPropSymbols$d)
|
|
833
|
+
for (var prop of __getOwnPropSymbols$d(source))
|
|
834
|
+
exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop) && (target[prop] = source[prop]);
|
|
835
|
+
return target;
|
|
836
|
+
};
|
|
837
|
+
function VideoPlayer(_a) {
|
|
838
|
+
var _b = _a, {
|
|
839
|
+
asset,
|
|
840
|
+
children
|
|
841
|
+
} = _b, props = __objRest$3(_b, [
|
|
842
|
+
"asset",
|
|
843
|
+
"children"
|
|
844
|
+
]), _a2, _b2;
|
|
770
845
|
const client = useClient(), isAudio = assetIsAudio(asset), { src: videoSrc, error } = React.useMemo(() => {
|
|
771
846
|
try {
|
|
772
|
-
const src = asset
|
|
847
|
+
const src = (asset == null ? void 0 : asset.playbackId) && getVideoSrc({ client, asset });
|
|
773
848
|
return src ? { src } : { error: new TypeError("Asset has no playback ID") };
|
|
774
849
|
} catch (error2) {
|
|
775
850
|
return { error: error2 };
|
|
@@ -777,10 +852,10 @@ function VideoPlayer({
|
|
|
777
852
|
}, [asset, client]), signedToken = React.useMemo(() => {
|
|
778
853
|
try {
|
|
779
854
|
return new URL(videoSrc).searchParams.get("token");
|
|
780
|
-
} catch {
|
|
855
|
+
} catch (e) {
|
|
781
856
|
return !1;
|
|
782
857
|
}
|
|
783
|
-
}, [videoSrc]), [width, height] = (asset
|
|
858
|
+
}, [videoSrc]), [width, height] = ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.aspect_ratio) != null ? _b2 : "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
|
|
784
859
|
let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
|
|
785
860
|
return isAudio && (aspectRatio = props.forceAspectRatio ? (
|
|
786
861
|
// Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
|
|
@@ -789,8 +864,7 @@ function VideoPlayer({
|
|
|
789
864
|
videoSrc && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
790
865
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
791
866
|
MuxPlayer__default.default,
|
|
792
|
-
{
|
|
793
|
-
...props,
|
|
867
|
+
__spreadProps$8(__spreadValues$d({}, props), {
|
|
794
868
|
playsInline: !0,
|
|
795
869
|
playbackId: asset.playbackId,
|
|
796
870
|
tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
|
|
@@ -798,7 +872,7 @@ function VideoPlayer({
|
|
|
798
872
|
crossOrigin: "anonymous",
|
|
799
873
|
metadata: {
|
|
800
874
|
player_name: "Sanity Admin Dashboard",
|
|
801
|
-
player_version: "2.4.
|
|
875
|
+
player_version: "2.4.1",
|
|
802
876
|
page_type: "Preview Player"
|
|
803
877
|
},
|
|
804
878
|
audio: isAudio,
|
|
@@ -808,7 +882,7 @@ function VideoPlayer({
|
|
|
808
882
|
display: "block",
|
|
809
883
|
objectFit: "contain"
|
|
810
884
|
}
|
|
811
|
-
}
|
|
885
|
+
})
|
|
812
886
|
),
|
|
813
887
|
children
|
|
814
888
|
] }),
|
|
@@ -831,7 +905,8 @@ function VideoPlayer({
|
|
|
831
905
|
] });
|
|
832
906
|
}
|
|
833
907
|
function assetIsAudio(asset) {
|
|
834
|
-
|
|
908
|
+
var _a;
|
|
909
|
+
return ((_a = asset.data) == null ? void 0 : _a.max_stored_resolution) === "Audio only";
|
|
835
910
|
}
|
|
836
911
|
function deleteAssetOnMux(client, assetId) {
|
|
837
912
|
const { dataset } = client.config();
|
|
@@ -846,16 +921,16 @@ async function deleteAsset({
|
|
|
846
921
|
asset,
|
|
847
922
|
deleteOnMux
|
|
848
923
|
}) {
|
|
849
|
-
if (!asset
|
|
924
|
+
if (!(asset != null && asset._id)) return !0;
|
|
850
925
|
try {
|
|
851
926
|
await client.delete(asset._id);
|
|
852
|
-
} catch {
|
|
927
|
+
} catch (error) {
|
|
853
928
|
return "failed-sanity";
|
|
854
929
|
}
|
|
855
|
-
if (deleteOnMux && asset
|
|
930
|
+
if (deleteOnMux && asset != null && asset.assetId)
|
|
856
931
|
try {
|
|
857
932
|
await deleteAssetOnMux(client, asset.assetId);
|
|
858
|
-
} catch {
|
|
933
|
+
} catch (error) {
|
|
859
934
|
return "failed-mux";
|
|
860
935
|
}
|
|
861
936
|
return !0;
|
|
@@ -868,6 +943,14 @@ function getAsset(client, assetId) {
|
|
|
868
943
|
method: "GET"
|
|
869
944
|
});
|
|
870
945
|
}
|
|
946
|
+
var __defProp$c = Object.defineProperty, __defProps$7 = Object.defineProperties, __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$c = Object.getOwnPropertySymbols, __hasOwnProp$c = Object.prototype.hasOwnProperty, __propIsEnum$c = Object.prototype.propertyIsEnumerable, __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$c = (a2, b) => {
|
|
947
|
+
for (var prop in b || (b = {}))
|
|
948
|
+
__hasOwnProp$c.call(b, prop) && __defNormalProp$c(a2, prop, b[prop]);
|
|
949
|
+
if (__getOwnPropSymbols$c)
|
|
950
|
+
for (var prop of __getOwnPropSymbols$c(b))
|
|
951
|
+
__propIsEnum$c.call(b, prop) && __defNormalProp$c(a2, prop, b[prop]);
|
|
952
|
+
return a2;
|
|
953
|
+
}, __spreadProps$7 = (a2, b) => __defProps$7(a2, __getOwnPropDescs$7(b));
|
|
871
954
|
const getUnknownTypeFallback = (id, typeName) => ({
|
|
872
955
|
title: /* @__PURE__ */ jsxRuntime.jsxs("em", { children: [
|
|
873
956
|
"No schema found for type ",
|
|
@@ -881,7 +964,7 @@ const getUnknownTypeFallback = (id, typeName) => ({
|
|
|
881
964
|
});
|
|
882
965
|
function MissingSchemaType(props) {
|
|
883
966
|
const { layout, value } = props;
|
|
884
|
-
return /* @__PURE__ */ jsxRuntime.jsx(sanity.SanityDefaultPreview, {
|
|
967
|
+
return /* @__PURE__ */ jsxRuntime.jsx(sanity.SanityDefaultPreview, __spreadProps$7(__spreadValues$c({}, getUnknownTypeFallback(value._id, value._type)), { layout }));
|
|
885
968
|
}
|
|
886
969
|
function TimeAgo({ time }) {
|
|
887
970
|
const timeAgo = sanity.useTimeAgo(time);
|
|
@@ -920,6 +1003,14 @@ function PublishedStatus(props) {
|
|
|
920
1003
|
}
|
|
921
1004
|
);
|
|
922
1005
|
}
|
|
1006
|
+
var __defProp$b = Object.defineProperty, __defProps$6 = Object.defineProperties, __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$b = Object.getOwnPropertySymbols, __hasOwnProp$b = Object.prototype.hasOwnProperty, __propIsEnum$b = Object.prototype.propertyIsEnumerable, __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$b = (a2, b) => {
|
|
1007
|
+
for (var prop in b || (b = {}))
|
|
1008
|
+
__hasOwnProp$b.call(b, prop) && __defNormalProp$b(a2, prop, b[prop]);
|
|
1009
|
+
if (__getOwnPropSymbols$b)
|
|
1010
|
+
for (var prop of __getOwnPropSymbols$b(b))
|
|
1011
|
+
__propIsEnum$b.call(b, prop) && __defNormalProp$b(a2, prop, b[prop]);
|
|
1012
|
+
return a2;
|
|
1013
|
+
}, __spreadProps$6 = (a2, b) => __defProps$6(a2, __getOwnPropDescs$6(b));
|
|
923
1014
|
function PaneItemPreview(props) {
|
|
924
1015
|
const { icon, layout, presence, schemaType, value } = props, title = sanity.isRecord(value.title) && React.isValidElement(value.title) || isString__default.default(value.title) || isNumber__default.default(value.title) ? value.title : null, observable = React.useMemo(
|
|
925
1016
|
() => sanity.getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
|
|
@@ -935,13 +1026,12 @@ function PaneItemPreview(props) {
|
|
|
935
1026
|
] });
|
|
936
1027
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
937
1028
|
sanity.SanityDefaultPreview,
|
|
938
|
-
{
|
|
939
|
-
...sanity.getPreviewValueWithFallback({ value, draft, published }),
|
|
1029
|
+
__spreadProps$6(__spreadValues$b({}, sanity.getPreviewValueWithFallback({ value, draft, published })), {
|
|
940
1030
|
isPlaceholder: isLoading,
|
|
941
1031
|
icon,
|
|
942
1032
|
layout,
|
|
943
1033
|
status
|
|
944
|
-
}
|
|
1034
|
+
})
|
|
945
1035
|
);
|
|
946
1036
|
}
|
|
947
1037
|
function getIconWithFallback(icon, schemaType, defaultIcon) {
|
|
@@ -962,7 +1052,7 @@ function DocumentPreviewInRool(props) {
|
|
|
962
1052
|
return (linkProps) => /* @__PURE__ */ jsxRuntime.jsx(router.IntentLink, { intent: "edit", params: { id: props.documentPair.id }, children: linkProps.children });
|
|
963
1053
|
}
|
|
964
1054
|
function DocumentPreview(props) {
|
|
965
|
-
const { schemaType, documentPair } = props, doc = documentPair
|
|
1055
|
+
const { schemaType, documentPair } = props, doc = (documentPair == null ? void 0 : documentPair.draft) || (documentPair == null ? void 0 : documentPair.published), id = documentPair.id || "", documentPreviewStore = sanity.useDocumentPreviewStore(), schema = sanity.useSchema(), documentPresence = sanity.useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = React.useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsxRuntime.jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
966
1056
|
PaneItemPreview,
|
|
967
1057
|
{
|
|
968
1058
|
documentPreviewStore,
|
|
@@ -998,13 +1088,14 @@ const Container = styledComponents.styled(ui.Box)`
|
|
|
998
1088
|
font-size: ${(props) => props.theme.sanity.fonts.text.sizes[1]};
|
|
999
1089
|
}
|
|
1000
1090
|
`, VideoReferences = (props) => {
|
|
1091
|
+
var _a;
|
|
1001
1092
|
const schema = sanity.useSchema();
|
|
1002
1093
|
if (!props.isLoaded)
|
|
1003
1094
|
return /* @__PURE__ */ jsxRuntime.jsx(SpinnerBox, {});
|
|
1004
|
-
if (!props.references
|
|
1095
|
+
if (!((_a = props.references) != null && _a.length))
|
|
1005
1096
|
return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { border: !0, radius: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: "No documents are using this video" }) });
|
|
1006
1097
|
const documentPairs = sanity.collate(props.references || []);
|
|
1007
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: documentPairs
|
|
1098
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Container, { children: documentPairs == null ? void 0 : documentPairs.map((documentPair) => {
|
|
1008
1099
|
const schemaType = schema.get(documentPair.type);
|
|
1009
1100
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1010
1101
|
ui.Card,
|
|
@@ -1037,7 +1128,7 @@ function DeleteDialog({
|
|
|
1037
1128
|
}) {
|
|
1038
1129
|
const client = useClient(), [state, setState] = React.useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = React.useState(!0), toast = ui.useToast();
|
|
1039
1130
|
React.useEffect(() => {
|
|
1040
|
-
state !== "checkingReferences" || referencesLoading || setState(references
|
|
1131
|
+
state !== "checkingReferences" || referencesLoading || setState(references != null && references.length ? "cantDelete" : "confirm");
|
|
1041
1132
|
}, [state, references, referencesLoading]);
|
|
1042
1133
|
async function confirmDelete() {
|
|
1043
1134
|
if (state !== "confirm") return;
|
|
@@ -1079,7 +1170,7 @@ function DeleteDialog({
|
|
|
1079
1170
|
/* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { size: 2, children: "Video can't be deleted" }),
|
|
1080
1171
|
/* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, style: { marginBottom: "2rem" }, children: [
|
|
1081
1172
|
"There are ",
|
|
1082
|
-
references
|
|
1173
|
+
references == null ? void 0 : references.length,
|
|
1083
1174
|
" document",
|
|
1084
1175
|
references && references.length > 0 && "s",
|
|
1085
1176
|
" ",
|
|
@@ -1158,23 +1249,32 @@ function formatSeconds(seconds) {
|
|
|
1158
1249
|
return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
|
|
1159
1250
|
}
|
|
1160
1251
|
function getVideoMetadata(doc) {
|
|
1161
|
-
|
|
1252
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1253
|
+
const id = doc.assetId || doc._id || "", date = (_a = doc.data) != null && _a.created_at ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
|
|
1162
1254
|
return {
|
|
1163
1255
|
title: doc.filename || id.slice(0, 12),
|
|
1164
1256
|
id,
|
|
1165
1257
|
playbackId: doc.playbackId,
|
|
1166
1258
|
createdAt: date,
|
|
1167
|
-
duration: doc.data
|
|
1168
|
-
aspect_ratio: doc.data
|
|
1169
|
-
max_stored_resolution: doc.data
|
|
1170
|
-
max_stored_frame_rate: doc.data
|
|
1259
|
+
duration: (_b = doc.data) != null && _b.duration ? formatSeconds((_c = doc.data) == null ? void 0 : _c.duration) : void 0,
|
|
1260
|
+
aspect_ratio: (_d = doc.data) == null ? void 0 : _d.aspect_ratio,
|
|
1261
|
+
max_stored_resolution: (_e = doc.data) == null ? void 0 : _e.max_stored_resolution,
|
|
1262
|
+
max_stored_frame_rate: (_f = doc.data) == null ? void 0 : _f.max_stored_frame_rate
|
|
1171
1263
|
};
|
|
1172
1264
|
}
|
|
1265
|
+
var __defProp$a = Object.defineProperty, __defProps$5 = Object.defineProperties, __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$a = Object.getOwnPropertySymbols, __hasOwnProp$a = Object.prototype.hasOwnProperty, __propIsEnum$a = Object.prototype.propertyIsEnumerable, __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$a = (a2, b) => {
|
|
1266
|
+
for (var prop in b || (b = {}))
|
|
1267
|
+
__hasOwnProp$a.call(b, prop) && __defNormalProp$a(a2, prop, b[prop]);
|
|
1268
|
+
if (__getOwnPropSymbols$a)
|
|
1269
|
+
for (var prop of __getOwnPropSymbols$a(b))
|
|
1270
|
+
__propIsEnum$a.call(b, prop) && __defNormalProp$a(a2, prop, b[prop]);
|
|
1271
|
+
return a2;
|
|
1272
|
+
}, __spreadProps$5 = (a2, b) => __defProps$5(a2, __getOwnPropDescs$5(b));
|
|
1173
1273
|
function useVideoDetails(props) {
|
|
1174
1274
|
const documentStore = sanity.useDocumentStore(), toast = ui.useToast(), client = useClient(), [references, referencesLoading] = useDocReferences({
|
|
1175
1275
|
documentStore,
|
|
1176
1276
|
id: props.asset._id
|
|
1177
|
-
}), [originalAsset, setOriginalAsset] = React.useState(() => props.asset), [filename, setFilename] = React.useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({
|
|
1277
|
+
}), [originalAsset, setOriginalAsset] = React.useState(() => props.asset), [filename, setFilename] = React.useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata(__spreadProps$5(__spreadValues$a({}, props.asset), { filename })), [state, setState] = React.useState("idle");
|
|
1178
1278
|
function handleClose() {
|
|
1179
1279
|
if (state === "idle") {
|
|
1180
1280
|
if (modified) {
|
|
@@ -1191,7 +1291,7 @@ function useVideoDetails(props) {
|
|
|
1191
1291
|
if (state === "idle") {
|
|
1192
1292
|
setState("saving");
|
|
1193
1293
|
try {
|
|
1194
|
-
await client.patch(props.asset._id).set({ filename }).commit(), setOriginalAsset((prev) => ({
|
|
1294
|
+
await client.patch(props.asset._id).set({ filename }).commit(), setOriginalAsset((prev) => __spreadProps$5(__spreadValues$a({}, prev), { filename })), toast.push({
|
|
1195
1295
|
title: "Video title updated",
|
|
1196
1296
|
description: `New title: ${filename}`,
|
|
1197
1297
|
status: "success"
|
|
@@ -1406,7 +1506,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
|
|
|
1406
1506
|
}
|
|
1407
1507
|
),
|
|
1408
1508
|
/* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
|
|
1409
|
-
displayInfo
|
|
1509
|
+
(displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1410
1510
|
IconInfo,
|
|
1411
1511
|
{
|
|
1412
1512
|
text: `Duration: ${displayInfo.duration}`,
|
|
@@ -1414,7 +1514,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
|
|
|
1414
1514
|
size: 2
|
|
1415
1515
|
}
|
|
1416
1516
|
),
|
|
1417
|
-
displayInfo
|
|
1517
|
+
(displayInfo == null ? void 0 : displayInfo.max_stored_resolution) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1418
1518
|
IconInfo,
|
|
1419
1519
|
{
|
|
1420
1520
|
text: `Max Resolution: ${displayInfo.max_stored_resolution}`,
|
|
@@ -1422,7 +1522,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
|
|
|
1422
1522
|
size: 2
|
|
1423
1523
|
}
|
|
1424
1524
|
),
|
|
1425
|
-
displayInfo
|
|
1525
|
+
(displayInfo == null ? void 0 : displayInfo.max_stored_frame_rate) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1426
1526
|
IconInfo,
|
|
1427
1527
|
{
|
|
1428
1528
|
text: `Frame rate: ${displayInfo.max_stored_frame_rate}`,
|
|
@@ -1430,7 +1530,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
|
|
|
1430
1530
|
size: 2
|
|
1431
1531
|
}
|
|
1432
1532
|
),
|
|
1433
|
-
displayInfo
|
|
1533
|
+
(displayInfo == null ? void 0 : displayInfo.aspect_ratio) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1434
1534
|
IconInfo,
|
|
1435
1535
|
{
|
|
1436
1536
|
text: `Aspect Ratio: ${displayInfo.aspect_ratio}`,
|
|
@@ -1455,7 +1555,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormField$1, { titl
|
|
|
1455
1555
|
),
|
|
1456
1556
|
/* @__PURE__ */ jsxRuntime.jsx(IconInfo, { text: `Mux ID:
|
|
1457
1557
|
${displayInfo.id}`, icon: icons.TagIcon, size: 2 }),
|
|
1458
|
-
displayInfo
|
|
1558
|
+
(displayInfo == null ? void 0 : displayInfo.playbackId) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1459
1559
|
IconInfo,
|
|
1460
1560
|
{
|
|
1461
1561
|
text: `Playback ID: ${displayInfo.playbackId}`,
|
|
@@ -1509,7 +1609,7 @@ ${displayInfo.id}`, icon: icons.TagIcon, size: 2 }),
|
|
|
1509
1609
|
}
|
|
1510
1610
|
),
|
|
1511
1611
|
/* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 3, children: [
|
|
1512
|
-
displayInfo
|
|
1612
|
+
(displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { text: displayInfo.duration, icon: icons.ClockIcon, size: 1, muted: !0 }),
|
|
1513
1613
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1514
1614
|
IconInfo,
|
|
1515
1615
|
{
|
|
@@ -1585,7 +1685,7 @@ function VideoInBrowser({
|
|
|
1585
1685
|
onEdit,
|
|
1586
1686
|
asset
|
|
1587
1687
|
}) {
|
|
1588
|
-
const [renderVideo, setRenderVideo] = React.useState(!1), select = React__default.default.useCallback(() => onSelect
|
|
1688
|
+
const [renderVideo, setRenderVideo] = React.useState(!1), select = React__default.default.useCallback(() => onSelect == null ? void 0 : onSelect(asset), [onSelect, asset]), edit = React__default.default.useCallback(() => onEdit == null ? void 0 : onEdit(asset), [onEdit, asset]);
|
|
1589
1689
|
if (!asset)
|
|
1590
1690
|
return null;
|
|
1591
1691
|
const playbackPolicy = getPlaybackPolicy(asset);
|
|
@@ -1706,7 +1806,7 @@ function VideoInBrowser({
|
|
|
1706
1806
|
}
|
|
1707
1807
|
function VideosBrowser({ onSelect }) {
|
|
1708
1808
|
const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = React.useState(null), freshEditedAsset = React.useMemo(
|
|
1709
|
-
() => assets.find((a2) => a2._id === editedAsset
|
|
1809
|
+
() => assets.find((a2) => a2._id === (editedAsset == null ? void 0 : editedAsset._id)) || editedAsset,
|
|
1710
1810
|
[editedAsset, assets]
|
|
1711
1811
|
), placement = onSelect ? "input" : "tool";
|
|
1712
1812
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -1727,7 +1827,7 @@ function VideosBrowser({ onSelect }) {
|
|
|
1727
1827
|
placement === "tool" && /* @__PURE__ */ jsxRuntime.jsx(ImportVideosFromMux, {})
|
|
1728
1828
|
] }),
|
|
1729
1829
|
/* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
|
|
1730
|
-
assets
|
|
1830
|
+
(assets == null ? void 0 : assets.length) > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Label, { muted: !0, children: [
|
|
1731
1831
|
assets.length,
|
|
1732
1832
|
" video",
|
|
1733
1833
|
assets.length > 1 ? "s" : null,
|
|
@@ -1766,6 +1866,14 @@ function VideosBrowser({ onSelect }) {
|
|
|
1766
1866
|
)
|
|
1767
1867
|
] });
|
|
1768
1868
|
}
|
|
1869
|
+
var __defProp$9 = Object.defineProperty, __getOwnPropSymbols$9 = Object.getOwnPropertySymbols, __hasOwnProp$9 = Object.prototype.hasOwnProperty, __propIsEnum$9 = Object.prototype.propertyIsEnumerable, __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$9 = (a2, b) => {
|
|
1870
|
+
for (var prop in b || (b = {}))
|
|
1871
|
+
__hasOwnProp$9.call(b, prop) && __defNormalProp$9(a2, prop, b[prop]);
|
|
1872
|
+
if (__getOwnPropSymbols$9)
|
|
1873
|
+
for (var prop of __getOwnPropSymbols$9(b))
|
|
1874
|
+
__propIsEnum$9.call(b, prop) && __defNormalProp$9(a2, prop, b[prop]);
|
|
1875
|
+
return a2;
|
|
1876
|
+
};
|
|
1769
1877
|
const StudioTool = () => /* @__PURE__ */ jsxRuntime.jsx(VideosBrowser, {}), DEFAULT_TOOL_CONFIG = {
|
|
1770
1878
|
icon: ToolIcon,
|
|
1771
1879
|
title: "Videos"
|
|
@@ -1776,7 +1884,7 @@ function createStudioTool(config) {
|
|
|
1776
1884
|
name: "mux",
|
|
1777
1885
|
icon: toolConfig.icon || DEFAULT_TOOL_CONFIG.icon,
|
|
1778
1886
|
title: toolConfig.title || DEFAULT_TOOL_CONFIG.title,
|
|
1779
|
-
component: (props) => /* @__PURE__ */ jsxRuntime.jsx(StudioTool, {
|
|
1887
|
+
component: (props) => /* @__PURE__ */ jsxRuntime.jsx(StudioTool, __spreadValues$9(__spreadValues$9({}, config), props))
|
|
1780
1888
|
};
|
|
1781
1889
|
}
|
|
1782
1890
|
const path = ["assetId", "data", "playbackId", "status", "thumbTime", "filename"], useAssetDocumentValues = (asset) => sanity.useDocumentValues(
|
|
@@ -1787,12 +1895,16 @@ function useDialogState() {
|
|
|
1787
1895
|
return React.useState(!1);
|
|
1788
1896
|
}
|
|
1789
1897
|
const useMuxPolling = (asset) => {
|
|
1898
|
+
var _a, _b;
|
|
1790
1899
|
const client = useClient(), projectId = sanity.useProjectId(), dataset = sanity.useDataset(), shouldFetch = React.useMemo(
|
|
1791
|
-
() =>
|
|
1792
|
-
|
|
1900
|
+
() => {
|
|
1901
|
+
var _a2, _b2;
|
|
1902
|
+
return !!(asset != null && 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");
|
|
1903
|
+
},
|
|
1904
|
+
[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]
|
|
1793
1905
|
);
|
|
1794
1906
|
return useSWR__default.default(
|
|
1795
|
-
shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset
|
|
1907
|
+
shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset == null ? void 0 : asset.assetId}` : null,
|
|
1796
1908
|
async () => {
|
|
1797
1909
|
const { data } = await client.request({
|
|
1798
1910
|
url: `/addons/mux/assets/${dataset}/data/${asset.assetId}`,
|
|
@@ -1843,7 +1955,7 @@ async function haveValidSigningKeys(client, signingKeyId, signingKeyPrivate) {
|
|
|
1843
1955
|
method: "GET"
|
|
1844
1956
|
});
|
|
1845
1957
|
return !!(res.data && res.data.id);
|
|
1846
|
-
} catch {
|
|
1958
|
+
} catch (e) {
|
|
1847
1959
|
return console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid"), !1;
|
|
1848
1960
|
}
|
|
1849
1961
|
}
|
|
@@ -1865,14 +1977,16 @@ const useSaveSecrets = (client, secrets) => React.useCallback(
|
|
|
1865
1977
|
}) => {
|
|
1866
1978
|
let { signingKeyId, signingKeyPrivate } = secrets;
|
|
1867
1979
|
try {
|
|
1868
|
-
|
|
1980
|
+
await saveSecrets(
|
|
1869
1981
|
client,
|
|
1870
1982
|
token,
|
|
1871
1983
|
secretKey,
|
|
1872
1984
|
enableSignedUrls,
|
|
1873
1985
|
signingKeyId,
|
|
1874
1986
|
signingKeyPrivate
|
|
1875
|
-
)
|
|
1987
|
+
);
|
|
1988
|
+
const valid = await testSecrets(client);
|
|
1989
|
+
if (!(valid != null && valid.status) && token && secretKey)
|
|
1876
1990
|
throw new Error("Invalid secrets");
|
|
1877
1991
|
} catch (err) {
|
|
1878
1992
|
throw console.error("Error while trying to save secrets:", err), err;
|
|
@@ -1893,7 +2007,7 @@ const useSaveSecrets = (client, secrets) => React.useCallback(
|
|
|
1893
2007
|
signingKeyPrivate
|
|
1894
2008
|
);
|
|
1895
2009
|
} catch (err) {
|
|
1896
|
-
throw console.log("Error while creating and saving signing key:", err
|
|
2010
|
+
throw console.log("Error while creating and saving signing key:", err == null ? void 0 : err.message), err;
|
|
1897
2011
|
}
|
|
1898
2012
|
return {
|
|
1899
2013
|
token,
|
|
@@ -1905,29 +2019,37 @@ const useSaveSecrets = (client, secrets) => React.useCallback(
|
|
|
1905
2019
|
},
|
|
1906
2020
|
[client, secrets]
|
|
1907
2021
|
);
|
|
2022
|
+
var __defProp$8 = Object.defineProperty, __defProps$4 = Object.defineProperties, __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$8 = Object.getOwnPropertySymbols, __hasOwnProp$8 = Object.prototype.hasOwnProperty, __propIsEnum$8 = Object.prototype.propertyIsEnumerable, __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$8 = (a2, b) => {
|
|
2023
|
+
for (var prop in b || (b = {}))
|
|
2024
|
+
__hasOwnProp$8.call(b, prop) && __defNormalProp$8(a2, prop, b[prop]);
|
|
2025
|
+
if (__getOwnPropSymbols$8)
|
|
2026
|
+
for (var prop of __getOwnPropSymbols$8(b))
|
|
2027
|
+
__propIsEnum$8.call(b, prop) && __defNormalProp$8(a2, prop, b[prop]);
|
|
2028
|
+
return a2;
|
|
2029
|
+
}, __spreadProps$4 = (a2, b) => __defProps$4(a2, __getOwnPropDescs$4(b));
|
|
1908
2030
|
function init({ token, secretKey, enableSignedUrls }) {
|
|
1909
2031
|
return {
|
|
1910
2032
|
submitting: !1,
|
|
1911
2033
|
error: null,
|
|
1912
2034
|
// Form inputs don't set the state back to null when clearing a field, but uses empty strings
|
|
1913
2035
|
// This ensures the `dirty` check works correctly
|
|
1914
|
-
token: token
|
|
1915
|
-
secretKey: secretKey
|
|
1916
|
-
enableSignedUrls: enableSignedUrls
|
|
2036
|
+
token: token != null ? token : "",
|
|
2037
|
+
secretKey: secretKey != null ? secretKey : "",
|
|
2038
|
+
enableSignedUrls: enableSignedUrls != null ? enableSignedUrls : !1
|
|
1917
2039
|
};
|
|
1918
2040
|
}
|
|
1919
2041
|
function reducer(state, action) {
|
|
1920
|
-
switch (action
|
|
2042
|
+
switch (action == null ? void 0 : action.type) {
|
|
1921
2043
|
case "submit":
|
|
1922
|
-
return {
|
|
2044
|
+
return __spreadProps$4(__spreadValues$8({}, state), { submitting: !0, error: null });
|
|
1923
2045
|
case "error":
|
|
1924
|
-
return {
|
|
2046
|
+
return __spreadProps$4(__spreadValues$8({}, state), { submitting: !1, error: action.payload });
|
|
1925
2047
|
case "reset":
|
|
1926
2048
|
return init(action.payload);
|
|
1927
2049
|
case "change":
|
|
1928
|
-
return {
|
|
2050
|
+
return __spreadProps$4(__spreadValues$8({}, state), { [action.payload.name]: action.payload.value });
|
|
1929
2051
|
default:
|
|
1930
|
-
throw new Error(`Unknown action type: ${action
|
|
2052
|
+
throw new Error(`Unknown action type: ${action == null ? void 0 : action.type}`);
|
|
1931
2053
|
}
|
|
1932
2054
|
}
|
|
1933
2055
|
const useSecretsFormState = (secrets) => React.useReducer(reducer, secrets, init), ids = [
|
|
@@ -2530,6 +2652,7 @@ const Logo = styledComponents.styled.span`
|
|
|
2530
2652
|
"API Credentials"
|
|
2531
2653
|
] }), fieldNames = ["token", "secretKey", "enableSignedUrls"];
|
|
2532
2654
|
function ConfigureApi({ secrets, setDialogState }) {
|
|
2655
|
+
var _a, _b;
|
|
2533
2656
|
const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = React.useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = React.useCallback(() => setDialogState(!1), [setDialogState]), dirty = React.useMemo(
|
|
2534
2657
|
() => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls,
|
|
2535
2658
|
[secrets, state]
|
|
@@ -2621,7 +2744,7 @@ function ConfigureApi({ secrets, setDialogState }) {
|
|
|
2621
2744
|
ref: firstField,
|
|
2622
2745
|
onChange: handleChangeToken,
|
|
2623
2746
|
type: "text",
|
|
2624
|
-
value: state.token
|
|
2747
|
+
value: (_a = state.token) != null ? _a : "",
|
|
2625
2748
|
required: !!state.secretKey || state.enableSignedUrls
|
|
2626
2749
|
}
|
|
2627
2750
|
) }),
|
|
@@ -2631,7 +2754,7 @@ function ConfigureApi({ secrets, setDialogState }) {
|
|
|
2631
2754
|
id: secretKeyId,
|
|
2632
2755
|
onChange: handleChangeSecretKey,
|
|
2633
2756
|
type: "text",
|
|
2634
|
-
value: state.secretKey
|
|
2757
|
+
value: (_b = state.secretKey) != null ? _b : "",
|
|
2635
2758
|
required: !!state.token || state.enableSignedUrls
|
|
2636
2759
|
}
|
|
2637
2760
|
) }),
|
|
@@ -2729,7 +2852,7 @@ function a(t) {
|
|
|
2729
2852
|
function ErrorBoundaryCard(props) {
|
|
2730
2853
|
const { children, schemaType } = props, { push: pushToast } = ui.useToast(), errorRef = React.useRef(null), { ErrorBoundary, didCatch, error, reset } = a({
|
|
2731
2854
|
onDidCatch: (err, errorInfo) => {
|
|
2732
|
-
console.group(err.toString()), console.groupCollapsed("console.error"), console.error(err), console.groupEnd(), err.stack && (console.groupCollapsed("error.stack"), console.log(err.stack), console.groupEnd()), errorInfo
|
|
2855
|
+
console.group(err.toString()), console.groupCollapsed("console.error"), console.error(err), console.groupEnd(), err.stack && (console.groupCollapsed("error.stack"), console.log(err.stack), console.groupEnd()), errorInfo != null && errorInfo.componentStack && (console.groupCollapsed("errorInfo.componentStack"), console.log(errorInfo.componentStack), console.groupEnd()), console.groupEnd(), pushToast({
|
|
2733
2856
|
status: "error",
|
|
2734
2857
|
title: "Plugin crashed",
|
|
2735
2858
|
description: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 1, children: [
|
|
@@ -2763,7 +2886,7 @@ function ErrorBoundaryCard(props) {
|
|
|
2763
2886
|
/* @__PURE__ */ jsxRuntime.jsx("code", { children: name }),
|
|
2764
2887
|
" plugin crashed"
|
|
2765
2888
|
] }),
|
|
2766
|
-
error
|
|
2889
|
+
(error == null ? void 0 : error.message) && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 3, tone: "critical", shadow: 1, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: error.message }) }),
|
|
2767
2890
|
/* @__PURE__ */ jsxRuntime.jsx(ui.Inline, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleRetry, text: "Retry" }) })
|
|
2768
2891
|
] }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children });
|
|
2769
2892
|
}
|
|
@@ -2829,6 +2952,14 @@ function createUpChunkObservable(uuid2, uploadUrl2, source) {
|
|
|
2829
2952
|
return upchunk$1.on("success", successHandler), upchunk$1.on("error", errorHandler), upchunk$1.on("progress", progressHandler), upchunk$1.on("offline", offlineHandler), upchunk$1.on("online", onlineHandler), () => upchunk$1.abort();
|
|
2830
2953
|
});
|
|
2831
2954
|
}
|
|
2955
|
+
var __defProp$7 = Object.defineProperty, __defProps$3 = Object.defineProperties, __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$7 = Object.getOwnPropertySymbols, __hasOwnProp$7 = Object.prototype.hasOwnProperty, __propIsEnum$7 = Object.prototype.propertyIsEnumerable, __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$7 = (a2, b) => {
|
|
2956
|
+
for (var prop in b || (b = {}))
|
|
2957
|
+
__hasOwnProp$7.call(b, prop) && __defNormalProp$7(a2, prop, b[prop]);
|
|
2958
|
+
if (__getOwnPropSymbols$7)
|
|
2959
|
+
for (var prop of __getOwnPropSymbols$7(b))
|
|
2960
|
+
__propIsEnum$7.call(b, prop) && __defNormalProp$7(a2, prop, b[prop]);
|
|
2961
|
+
return a2;
|
|
2962
|
+
}, __spreadProps$3 = (a2, b) => __defProps$3(a2, __getOwnPropDescs$3(b));
|
|
2832
2963
|
function cancelUpload(client, uuid2) {
|
|
2833
2964
|
return client.observable.request({
|
|
2834
2965
|
url: `/addons/mux/uploads/${client.config().dataset}/${uuid2}`,
|
|
@@ -2909,7 +3040,7 @@ function uploadFile({
|
|
|
2909
3040
|
// eslint-disable-next-line max-nested-callbacks
|
|
2910
3041
|
operators.mergeMap((event) => event.type !== "success" ? rxjs.of(event) : rxjs.from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(
|
|
2911
3042
|
// eslint-disable-next-line max-nested-callbacks
|
|
2912
|
-
operators.mergeMap((doc) => rxjs.of({
|
|
3043
|
+
operators.mergeMap((doc) => rxjs.of(__spreadProps$3(__spreadValues$7({}, event), { asset: doc })))
|
|
2913
3044
|
)),
|
|
2914
3045
|
// eslint-disable-next-line max-nested-callbacks
|
|
2915
3046
|
operators.catchError((err) => cancelUpload(client, uuid$1).pipe(operators.mergeMapTo(rxjs.throwError(err))))
|
|
@@ -2980,7 +3111,7 @@ function testUrl(url) {
|
|
|
2980
3111
|
let parsed;
|
|
2981
3112
|
try {
|
|
2982
3113
|
parsed = new URL(url);
|
|
2983
|
-
} catch {
|
|
3114
|
+
} catch (err) {
|
|
2984
3115
|
return rxjs.throwError(error);
|
|
2985
3116
|
}
|
|
2986
3117
|
return parsed && !parsed.protocol.match(/http:|https:/) ? rxjs.throwError(error) : rxjs.of(url);
|
|
@@ -2996,7 +3127,7 @@ function isValidUrl(url) {
|
|
|
2996
3127
|
try {
|
|
2997
3128
|
const parsed = new URL(url);
|
|
2998
3129
|
return parsed && !!parsed.protocol.match(/http:|https:/);
|
|
2999
|
-
} catch {
|
|
3130
|
+
} catch (e) {
|
|
3000
3131
|
return !1;
|
|
3001
3132
|
}
|
|
3002
3133
|
}
|
|
@@ -3011,7 +3142,7 @@ function normalizeItems(items) {
|
|
|
3011
3142
|
let entry;
|
|
3012
3143
|
try {
|
|
3013
3144
|
entry = item.webkitGetAsEntry();
|
|
3014
|
-
} catch {
|
|
3145
|
+
} catch (err) {
|
|
3015
3146
|
return [item.getAsFile()];
|
|
3016
3147
|
}
|
|
3017
3148
|
return entry ? entry.isDirectory ? walk(entry) : [item.getAsFile()] : [];
|
|
@@ -3044,7 +3175,7 @@ function walk(entry) {
|
|
|
3044
3175
|
function SelectAssets({ asset: selectedAsset, onChange, setDialogState }) {
|
|
3045
3176
|
const handleSelect = React.useCallback(
|
|
3046
3177
|
(chosenAsset) => {
|
|
3047
|
-
chosenAsset
|
|
3178
|
+
chosenAsset != null && chosenAsset._id || onChange(sanity.PatchEvent.from([sanity.unset(["asset"])])), chosenAsset._id !== (selectedAsset == null ? void 0 : selectedAsset._id) && onChange(
|
|
3048
3179
|
sanity.PatchEvent.from([
|
|
3049
3180
|
sanity.setIfMissing({ asset: {}, _type: "mux.video" }),
|
|
3050
3181
|
sanity.set({ _type: "reference", _weak: !0, _ref: chosenAsset._id }, ["asset"])
|
|
@@ -3154,18 +3285,24 @@ const TopControls = styledComponents.styled.div`
|
|
|
3154
3285
|
}
|
|
3155
3286
|
) : null
|
|
3156
3287
|
] }) }), Player = ({ asset, buttons, readOnly, onChange }) => {
|
|
3157
|
-
|
|
3288
|
+
var _a, _b, _c, _d;
|
|
3289
|
+
const isLoading = React.useMemo(() => (asset == null ? void 0 : asset.status) === "preparing" ? "Preparing the video" : (asset == null ? void 0 : asset.status) === "waiting_for_upload" ? "Waiting for upload to start" : (asset == null ? void 0 : asset.status) === "waiting" ? "Processing upload" : !((asset == null ? void 0 : asset.status) === "ready" || typeof (asset == null ? void 0 : asset.status) > "u"), [asset]), isPreparingStaticRenditions = React.useMemo(() => {
|
|
3290
|
+
var _a2, _b2;
|
|
3291
|
+
return ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing";
|
|
3292
|
+
}, [(_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status]), playRef = React.useRef(null), muteRef = React.useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
|
|
3158
3293
|
return React.useEffect(() => {
|
|
3294
|
+
var _a2, _b2;
|
|
3159
3295
|
const style = document.createElement("style");
|
|
3160
|
-
style.innerHTML = "button svg { vertical-align: middle; }", playRef.current
|
|
3296
|
+
style.innerHTML = "button svg { vertical-align: middle; }", (_a2 = playRef.current) != null && _a2.shadowRoot && playRef.current.shadowRoot.appendChild(style), (_b2 = muteRef == null ? void 0 : muteRef.current) != null && _b2.shadowRoot && muteRef.current.shadowRoot.appendChild(style.cloneNode(!0));
|
|
3161
3297
|
}, []), React.useEffect(() => {
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
|
|
3298
|
+
var _a2, _b2, _c2;
|
|
3299
|
+
if ((asset == null ? void 0 : asset.status) === "errored")
|
|
3300
|
+
throw handleCancelUpload(), new Error((_c2 = (_b2 = (_a2 = asset.data) == null ? void 0 : _a2.errors) == null ? void 0 : _b2.messages) == null ? void 0 : _c2.join(" "));
|
|
3301
|
+
}, [(_d = (_c = asset.data) == null ? void 0 : _c.errors) == null ? void 0 : _d.messages, asset == null ? void 0 : asset.status, handleCancelUpload]), !asset || !asset.status ? null : isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3165
3302
|
UploadProgress,
|
|
3166
3303
|
{
|
|
3167
3304
|
progress: 100,
|
|
3168
|
-
filename: asset
|
|
3305
|
+
filename: asset == null ? void 0 : asset.filename,
|
|
3169
3306
|
text: isLoading !== !0 && isLoading || "Waiting for Mux to complete the upload",
|
|
3170
3307
|
onCancel: readOnly ? void 0 : () => handleCancelUpload()
|
|
3171
3308
|
}
|
|
@@ -3226,8 +3363,25 @@ const FileButton = styledComponents.styled(ui.MenuItem)(({ theme }) => {
|
|
|
3226
3363
|
opacity: 0;
|
|
3227
3364
|
}
|
|
3228
3365
|
`;
|
|
3229
|
-
})
|
|
3230
|
-
|
|
3366
|
+
});
|
|
3367
|
+
var __defProp$6 = Object.defineProperty, __defProps$2 = Object.defineProperties, __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$6 = Object.getOwnPropertySymbols, __hasOwnProp$6 = Object.prototype.hasOwnProperty, __propIsEnum$6 = Object.prototype.propertyIsEnumerable, __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$6 = (a2, b) => {
|
|
3368
|
+
for (var prop in b || (b = {}))
|
|
3369
|
+
__hasOwnProp$6.call(b, prop) && __defNormalProp$6(a2, prop, b[prop]);
|
|
3370
|
+
if (__getOwnPropSymbols$6)
|
|
3371
|
+
for (var prop of __getOwnPropSymbols$6(b))
|
|
3372
|
+
__propIsEnum$6.call(b, prop) && __defNormalProp$6(a2, prop, b[prop]);
|
|
3373
|
+
return a2;
|
|
3374
|
+
}, __spreadProps$2 = (a2, b) => __defProps$2(a2, __getOwnPropDescs$2(b)), __objRest$2 = (source, exclude) => {
|
|
3375
|
+
var target = {};
|
|
3376
|
+
for (var prop in source)
|
|
3377
|
+
__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
|
|
3378
|
+
if (source != null && __getOwnPropSymbols$6)
|
|
3379
|
+
for (var prop of __getOwnPropSymbols$6(source))
|
|
3380
|
+
exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop) && (target[prop] = source[prop]);
|
|
3381
|
+
return target;
|
|
3382
|
+
};
|
|
3383
|
+
const FileInputMenuItem = React__default.default.forwardRef(function(props, forwardedRef) {
|
|
3384
|
+
const _a = props, {
|
|
3231
3385
|
icon,
|
|
3232
3386
|
id: idProp,
|
|
3233
3387
|
accept,
|
|
@@ -3238,9 +3392,20 @@ const FileButton = styledComponents.styled(ui.MenuItem)(({ theme }) => {
|
|
|
3238
3392
|
space = 3,
|
|
3239
3393
|
textAlign,
|
|
3240
3394
|
text,
|
|
3241
|
-
disabled
|
|
3242
|
-
|
|
3243
|
-
|
|
3395
|
+
disabled
|
|
3396
|
+
} = _a, rest = __objRest$2(_a, [
|
|
3397
|
+
"icon",
|
|
3398
|
+
"id",
|
|
3399
|
+
"accept",
|
|
3400
|
+
"capture",
|
|
3401
|
+
"fontSize",
|
|
3402
|
+
"multiple",
|
|
3403
|
+
"onSelect",
|
|
3404
|
+
"space",
|
|
3405
|
+
"textAlign",
|
|
3406
|
+
"text",
|
|
3407
|
+
"disabled"
|
|
3408
|
+
]), idHook = React.useId(), id = idProp || idHook, handleChange = React__default.default.useCallback(
|
|
3244
3409
|
(event) => {
|
|
3245
3410
|
onSelect && event.target.files && onSelect(Array.from(event.target.files));
|
|
3246
3411
|
},
|
|
@@ -3252,7 +3417,7 @@ const FileButton = styledComponents.styled(ui.MenuItem)(({ theme }) => {
|
|
|
3252
3417
|
] }) }),
|
|
3253
3418
|
text && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { align: textAlign, size: fontSize, textOverflow: "ellipsis", children: text })
|
|
3254
3419
|
] });
|
|
3255
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(FileButton, {
|
|
3420
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(FileButton, __spreadProps$2(__spreadValues$6({}, rest), { htmlFor: id, disabled, ref: forwardedRef, children: [
|
|
3256
3421
|
content,
|
|
3257
3422
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3258
3423
|
"input",
|
|
@@ -3268,7 +3433,7 @@ const FileButton = styledComponents.styled(ui.MenuItem)(({ theme }) => {
|
|
|
3268
3433
|
disabled
|
|
3269
3434
|
}
|
|
3270
3435
|
)
|
|
3271
|
-
] });
|
|
3436
|
+
] }));
|
|
3272
3437
|
}), LockCard = styledComponents.styled(ui.Card)`
|
|
3273
3438
|
position: absolute;
|
|
3274
3439
|
top: 0;
|
|
@@ -3428,7 +3593,7 @@ function TextTracksEditor({
|
|
|
3428
3593
|
{
|
|
3429
3594
|
id: "include-autogenerated-track",
|
|
3430
3595
|
style: { display: "block" },
|
|
3431
|
-
checked: !!track
|
|
3596
|
+
checked: !!(track != null && track.language_code),
|
|
3432
3597
|
onChange: () => {
|
|
3433
3598
|
dispatch(track ? { action: "track", id: track._id, subAction: "delete" } : {
|
|
3434
3599
|
action: "track",
|
|
@@ -3464,7 +3629,10 @@ function TextTracksEditor({
|
|
|
3464
3629
|
placeholder: "Select language",
|
|
3465
3630
|
filterOption: (query, option) => option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 || option.value.toLowerCase().indexOf(query.toLowerCase()) > -1,
|
|
3466
3631
|
openButton: !0,
|
|
3467
|
-
renderValue: (value) =>
|
|
3632
|
+
renderValue: (value) => {
|
|
3633
|
+
var _a;
|
|
3634
|
+
return ((_a = SUBTITLE_LANGUAGES[track.type].find((l) => l.value === value)) == null ? void 0 : _a.label) || value;
|
|
3635
|
+
},
|
|
3468
3636
|
renderOption: (option) => /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { "data-as": "button", padding: 3, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 2, textOverflow: "ellipsis", children: [
|
|
3469
3637
|
option.label,
|
|
3470
3638
|
" (",
|
|
@@ -3475,6 +3643,14 @@ function TextTracksEditor({
|
|
|
3475
3643
|
)
|
|
3476
3644
|
] }) });
|
|
3477
3645
|
}
|
|
3646
|
+
var __defProp$5 = Object.defineProperty, __getOwnPropSymbols$5 = Object.getOwnPropertySymbols, __hasOwnProp$5 = Object.prototype.hasOwnProperty, __propIsEnum$5 = Object.prototype.propertyIsEnumerable, __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$5 = (a2, b) => {
|
|
3647
|
+
for (var prop in b || (b = {}))
|
|
3648
|
+
__hasOwnProp$5.call(b, prop) && __defNormalProp$5(a2, prop, b[prop]);
|
|
3649
|
+
if (__getOwnPropSymbols$5)
|
|
3650
|
+
for (var prop of __getOwnPropSymbols$5(b))
|
|
3651
|
+
__propIsEnum$5.call(b, prop) && __defNormalProp$5(a2, prop, b[prop]);
|
|
3652
|
+
return a2;
|
|
3653
|
+
};
|
|
3478
3654
|
const ENCODING_OPTIONS = [
|
|
3479
3655
|
{ value: "smart", label: "Smart" },
|
|
3480
3656
|
{ value: "baseline", label: "Baseline" }
|
|
@@ -3501,13 +3677,14 @@ function UploadConfiguration({
|
|
|
3501
3677
|
] : []
|
|
3502
3678
|
).current, [config, dispatch] = React.useReducer(
|
|
3503
3679
|
(prev, action) => {
|
|
3680
|
+
var _a;
|
|
3504
3681
|
switch (action.action) {
|
|
3505
3682
|
case "encoding_tier":
|
|
3506
3683
|
return action.value === "baseline" ? Object.assign({}, prev, {
|
|
3507
3684
|
encoding_tier: action.value,
|
|
3508
3685
|
mp4_support: "none",
|
|
3509
3686
|
max_resolution_tier: "1080p",
|
|
3510
|
-
text_tracks: prev.text_tracks
|
|
3687
|
+
text_tracks: (_a = prev.text_tracks) == null ? void 0 : _a.filter(({ type }) => type !== "autogenerated")
|
|
3511
3688
|
}) : Object.assign({}, prev, {
|
|
3512
3689
|
encoding_tier: action.value,
|
|
3513
3690
|
mp4_support: pluginConfig.mp4_support,
|
|
@@ -3525,17 +3702,13 @@ function UploadConfiguration({
|
|
|
3525
3702
|
switch (action.subAction) {
|
|
3526
3703
|
case "add":
|
|
3527
3704
|
if (target_track_i !== -1) break;
|
|
3528
|
-
text_tracks.push({
|
|
3529
|
-
_id: action.id
|
|
3530
|
-
|
|
3531
|
-
});
|
|
3705
|
+
text_tracks.push(__spreadValues$5({
|
|
3706
|
+
_id: action.id
|
|
3707
|
+
}, action.value));
|
|
3532
3708
|
break;
|
|
3533
3709
|
case "update":
|
|
3534
3710
|
if (target_track_i === -1) break;
|
|
3535
|
-
text_tracks[target_track_i] = {
|
|
3536
|
-
...text_tracks[target_track_i],
|
|
3537
|
-
...action.value
|
|
3538
|
-
};
|
|
3711
|
+
text_tracks[target_track_i] = __spreadValues$5(__spreadValues$5({}, text_tracks[target_track_i]), action.value);
|
|
3539
3712
|
break;
|
|
3540
3713
|
case "delete":
|
|
3541
3714
|
if (target_track_i === -1) break;
|
|
@@ -3821,7 +3994,24 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(ui.Card
|
|
|
3821
3994
|
&:focus {
|
|
3822
3995
|
outline: none;
|
|
3823
3996
|
}
|
|
3824
|
-
|
|
3997
|
+
`;
|
|
3998
|
+
var __defProp$4 = Object.defineProperty, __getOwnPropSymbols$4 = Object.getOwnPropertySymbols, __hasOwnProp$4 = Object.prototype.hasOwnProperty, __propIsEnum$4 = Object.prototype.propertyIsEnumerable, __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$4 = (a2, b) => {
|
|
3999
|
+
for (var prop in b || (b = {}))
|
|
4000
|
+
__hasOwnProp$4.call(b, prop) && __defNormalProp$4(a2, prop, b[prop]);
|
|
4001
|
+
if (__getOwnPropSymbols$4)
|
|
4002
|
+
for (var prop of __getOwnPropSymbols$4(b))
|
|
4003
|
+
__propIsEnum$4.call(b, prop) && __defNormalProp$4(a2, prop, b[prop]);
|
|
4004
|
+
return a2;
|
|
4005
|
+
}, __objRest$1 = (source, exclude) => {
|
|
4006
|
+
var target = {};
|
|
4007
|
+
for (var prop in source)
|
|
4008
|
+
__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
|
|
4009
|
+
if (source != null && __getOwnPropSymbols$4)
|
|
4010
|
+
for (var prop of __getOwnPropSymbols$4(source))
|
|
4011
|
+
exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop) && (target[prop] = source[prop]);
|
|
4012
|
+
return target;
|
|
4013
|
+
};
|
|
4014
|
+
const HiddenInput = styledComponents.styled.input`
|
|
3825
4015
|
overflow: hidden;
|
|
3826
4016
|
width: 0.1px;
|
|
3827
4017
|
height: 0.1px;
|
|
@@ -3830,13 +4020,17 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(ui.Card
|
|
|
3830
4020
|
z-index: -1;
|
|
3831
4021
|
`, Label = styledComponents.styled.label`
|
|
3832
4022
|
position: relative;
|
|
3833
|
-
`, FileInputButton = (
|
|
4023
|
+
`, FileInputButton = (_a) => {
|
|
4024
|
+
var _b = _a, { onSelect, accept } = _b, props = __objRest$1(_b, ["onSelect", "accept"]);
|
|
3834
4025
|
const inputId = `FileSelect${React.useId()}`, inputRef = React.useRef(null), handleSelect = React.useCallback(
|
|
3835
4026
|
(event) => {
|
|
3836
4027
|
onSelect && onSelect(event.target.files);
|
|
3837
4028
|
},
|
|
3838
4029
|
[onSelect]
|
|
3839
|
-
), handleButtonClick = React.useCallback(() =>
|
|
4030
|
+
), handleButtonClick = React.useCallback(() => {
|
|
4031
|
+
var _a2;
|
|
4032
|
+
return (_a2 = inputRef.current) == null ? void 0 : _a2.click();
|
|
4033
|
+
}, []);
|
|
3840
4034
|
return /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: inputId, children: [
|
|
3841
4035
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3842
4036
|
HiddenInput,
|
|
@@ -3852,13 +4046,12 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(ui.Card
|
|
|
3852
4046
|
),
|
|
3853
4047
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3854
4048
|
ui.Button,
|
|
3855
|
-
{
|
|
4049
|
+
__spreadValues$4({
|
|
3856
4050
|
onClick: handleButtonClick,
|
|
3857
4051
|
mode: "default",
|
|
3858
4052
|
tone: "primary",
|
|
3859
|
-
style: { width: "100%" }
|
|
3860
|
-
|
|
3861
|
-
}
|
|
4053
|
+
style: { width: "100%" }
|
|
4054
|
+
}, props)
|
|
3862
4055
|
)
|
|
3863
4056
|
] });
|
|
3864
4057
|
};
|
|
@@ -3919,12 +4112,29 @@ function UploadPlaceholder(props) {
|
|
|
3919
4112
|
}
|
|
3920
4113
|
);
|
|
3921
4114
|
}
|
|
4115
|
+
var __defProp$3 = Object.defineProperty, __defProps$1 = Object.defineProperties, __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$3 = Object.getOwnPropertySymbols, __hasOwnProp$3 = Object.prototype.hasOwnProperty, __propIsEnum$3 = Object.prototype.propertyIsEnumerable, __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$3 = (a2, b) => {
|
|
4116
|
+
for (var prop in b || (b = {}))
|
|
4117
|
+
__hasOwnProp$3.call(b, prop) && __defNormalProp$3(a2, prop, b[prop]);
|
|
4118
|
+
if (__getOwnPropSymbols$3)
|
|
4119
|
+
for (var prop of __getOwnPropSymbols$3(b))
|
|
4120
|
+
__propIsEnum$3.call(b, prop) && __defNormalProp$3(a2, prop, b[prop]);
|
|
4121
|
+
return a2;
|
|
4122
|
+
}, __spreadProps$1 = (a2, b) => __defProps$1(a2, __getOwnPropDescs$1(b)), __objRest = (source, exclude) => {
|
|
4123
|
+
var target = {};
|
|
4124
|
+
for (var prop in source)
|
|
4125
|
+
__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
|
|
4126
|
+
if (source != null && __getOwnPropSymbols$3)
|
|
4127
|
+
for (var prop of __getOwnPropSymbols$3(source))
|
|
4128
|
+
exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop) && (target[prop] = source[prop]);
|
|
4129
|
+
return target;
|
|
4130
|
+
};
|
|
3922
4131
|
const INITIAL_STATE = {
|
|
3923
4132
|
stagedUpload: null,
|
|
3924
4133
|
uploadStatus: null,
|
|
3925
4134
|
error: null
|
|
3926
4135
|
};
|
|
3927
4136
|
function Uploader(props) {
|
|
4137
|
+
var _a;
|
|
3928
4138
|
const toast = ui.useToast(), containerRef = React.useRef(null), dragEnteredEls = React.useRef([]), [dragState, setDragState] = React.useState(null), cancelUploadButton = React.useRef(
|
|
3929
4139
|
(() => {
|
|
3930
4140
|
const events$ = new rxjs.Subject();
|
|
@@ -3935,33 +4145,31 @@ function Uploader(props) {
|
|
|
3935
4145
|
})()
|
|
3936
4146
|
).current, uploadRef = React.useRef(null), [state, dispatch] = React.useReducer(
|
|
3937
4147
|
(prev, action) => {
|
|
4148
|
+
var _b, _c;
|
|
3938
4149
|
switch (action.action) {
|
|
3939
4150
|
case "stageUpload":
|
|
3940
4151
|
return Object.assign({}, INITIAL_STATE, { stagedUpload: action.input });
|
|
3941
4152
|
case "commitUpload":
|
|
3942
4153
|
return Object.assign({}, prev, { uploadStatus: { progress: 0 } });
|
|
3943
4154
|
case "progressInfo": {
|
|
3944
|
-
const
|
|
4155
|
+
const _a2 = action, payload = __objRest(_a2, ["type", "action"]);
|
|
3945
4156
|
return Object.assign({}, prev, {
|
|
3946
|
-
uploadStatus: {
|
|
3947
|
-
|
|
3948
|
-
|
|
3949
|
-
...payload
|
|
3950
|
-
}
|
|
4157
|
+
uploadStatus: __spreadValues$3(__spreadProps$1(__spreadValues$3({}, prev.uploadStatus), {
|
|
4158
|
+
progress: prev.uploadStatus.progress
|
|
4159
|
+
}), payload)
|
|
3951
4160
|
});
|
|
3952
4161
|
}
|
|
3953
4162
|
case "progress":
|
|
3954
4163
|
return Object.assign({}, prev, {
|
|
3955
|
-
uploadStatus: {
|
|
3956
|
-
...prev.uploadStatus,
|
|
4164
|
+
uploadStatus: __spreadProps$1(__spreadValues$3({}, prev.uploadStatus), {
|
|
3957
4165
|
progress: action.percent
|
|
3958
|
-
}
|
|
4166
|
+
})
|
|
3959
4167
|
});
|
|
3960
4168
|
case "reset":
|
|
3961
4169
|
case "complete":
|
|
3962
|
-
return uploadRef.current
|
|
4170
|
+
return (_b = uploadRef.current) == null || _b.unsubscribe(), uploadRef.current = null, INITIAL_STATE;
|
|
3963
4171
|
case "error":
|
|
3964
|
-
return uploadRef.current
|
|
4172
|
+
return (_c = uploadRef.current) == null || _c.unsubscribe(), uploadRef.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
|
|
3965
4173
|
default:
|
|
3966
4174
|
return prev;
|
|
3967
4175
|
}
|
|
@@ -3997,7 +4205,8 @@ function Uploader(props) {
|
|
|
3997
4205
|
operators.takeUntil(
|
|
3998
4206
|
cancelUploadButton.observable.pipe(
|
|
3999
4207
|
operators.tap(() => {
|
|
4000
|
-
|
|
4208
|
+
var _a2;
|
|
4209
|
+
(_a2 = state.uploadStatus) != null && _a2.uuid && props.client.delete(state.uploadStatus.uuid);
|
|
4001
4210
|
})
|
|
4002
4211
|
)
|
|
4003
4212
|
)
|
|
@@ -4010,7 +4219,7 @@ function Uploader(props) {
|
|
|
4010
4219
|
case "uuid":
|
|
4011
4220
|
case "file":
|
|
4012
4221
|
case "url":
|
|
4013
|
-
dispatch({ action: "progressInfo",
|
|
4222
|
+
dispatch(__spreadValues$3({ action: "progressInfo" }, event));
|
|
4014
4223
|
break;
|
|
4015
4224
|
case "progress":
|
|
4016
4225
|
dispatch({ action: "progress", percent: event.percent });
|
|
@@ -4051,9 +4260,10 @@ function Uploader(props) {
|
|
|
4051
4260
|
}, handleDragOver = (event) => {
|
|
4052
4261
|
event.preventDefault(), event.stopPropagation();
|
|
4053
4262
|
}, handleDragEnter = (event) => {
|
|
4263
|
+
var _a2, _b;
|
|
4054
4264
|
event.stopPropagation(), dragEnteredEls.current.push(event.target);
|
|
4055
|
-
const type = event.dataTransfer.items
|
|
4056
|
-
setDragState(type
|
|
4265
|
+
const type = (_b = (_a2 = event.dataTransfer.items) == null ? void 0 : _a2[0]) == null ? void 0 : _b.type;
|
|
4266
|
+
setDragState(type != null && type.startsWith("video/") ? "valid" : "invalid");
|
|
4057
4267
|
}, handleDragLeave = (event) => {
|
|
4058
4268
|
event.stopPropagation();
|
|
4059
4269
|
const idx = dragEnteredEls.current.indexOf(event.target);
|
|
@@ -4075,7 +4285,7 @@ function Uploader(props) {
|
|
|
4075
4285
|
{
|
|
4076
4286
|
onCancel: cancelUploadButton.handleClick,
|
|
4077
4287
|
progress: uploadStatus.progress,
|
|
4078
|
-
filename: uploadStatus.file
|
|
4288
|
+
filename: ((_a = uploadStatus.file) == null ? void 0 : _a.name) || uploadStatus.url
|
|
4079
4289
|
}
|
|
4080
4290
|
);
|
|
4081
4291
|
}
|
|
@@ -4142,16 +4352,24 @@ function Uploader(props) {
|
|
|
4142
4352
|
)
|
|
4143
4353
|
] });
|
|
4144
4354
|
}
|
|
4355
|
+
var __defProp$2 = Object.defineProperty, __defProps = Object.defineProperties, __getOwnPropDescs = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$2 = Object.getOwnPropertySymbols, __hasOwnProp$2 = Object.prototype.hasOwnProperty, __propIsEnum$2 = Object.prototype.propertyIsEnumerable, __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$2 = (a2, b) => {
|
|
4356
|
+
for (var prop in b || (b = {}))
|
|
4357
|
+
__hasOwnProp$2.call(b, prop) && __defNormalProp$2(a2, prop, b[prop]);
|
|
4358
|
+
if (__getOwnPropSymbols$2)
|
|
4359
|
+
for (var prop of __getOwnPropSymbols$2(b))
|
|
4360
|
+
__propIsEnum$2.call(b, prop) && __defNormalProp$2(a2, prop, b[prop]);
|
|
4361
|
+
return a2;
|
|
4362
|
+
}, __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
|
|
4145
4363
|
const Input = (props) => {
|
|
4146
|
-
|
|
4364
|
+
var _a;
|
|
4365
|
+
const client = useClient(), secretDocumentValues = useSecretsDocumentValues(), assetDocumentValues = useAssetDocumentValues((_a = props.value) == null ? void 0 : _a.asset), poll = useMuxPolling(props.readOnly ? void 0 : (assetDocumentValues == null ? void 0 : assetDocumentValues.value) || void 0), [dialogState, setDialogState] = useDialogState(), error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
|
|
4147
4366
|
if (error)
|
|
4148
4367
|
throw error;
|
|
4149
4368
|
const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
|
|
4150
4369
|
return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundaryCard$1, { schemaType: props.schemaType, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(InputFallback, {}), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(InputFallback, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4151
4370
|
secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */ jsxRuntime.jsx(Onboard, { setDialogState }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4152
4371
|
Uploader,
|
|
4153
|
-
{
|
|
4154
|
-
...props,
|
|
4372
|
+
__spreadProps(__spreadValues$2({}, props), {
|
|
4155
4373
|
config: props.config,
|
|
4156
4374
|
onChange: props.onChange,
|
|
4157
4375
|
client,
|
|
@@ -4160,7 +4378,7 @@ const Input = (props) => {
|
|
|
4160
4378
|
dialogState,
|
|
4161
4379
|
setDialogState,
|
|
4162
4380
|
needsSetup: secretDocumentValues.value.needsSetup
|
|
4163
|
-
}
|
|
4381
|
+
})
|
|
4164
4382
|
),
|
|
4165
4383
|
dialogState === "secrets" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4166
4384
|
ConfigureApi$1,
|
|
@@ -4171,11 +4389,18 @@ const Input = (props) => {
|
|
|
4171
4389
|
)
|
|
4172
4390
|
] }) }) }) });
|
|
4173
4391
|
};
|
|
4174
|
-
var Input$1 = React.memo(Input)
|
|
4392
|
+
var Input$1 = React.memo(Input), __defProp$1 = Object.defineProperty, __getOwnPropSymbols$1 = Object.getOwnPropertySymbols, __hasOwnProp$1 = Object.prototype.hasOwnProperty, __propIsEnum$1 = Object.prototype.propertyIsEnumerable, __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$1 = (a2, b) => {
|
|
4393
|
+
for (var prop in b || (b = {}))
|
|
4394
|
+
__hasOwnProp$1.call(b, prop) && __defNormalProp$1(a2, prop, b[prop]);
|
|
4395
|
+
if (__getOwnPropSymbols$1)
|
|
4396
|
+
for (var prop of __getOwnPropSymbols$1(b))
|
|
4397
|
+
__propIsEnum$1.call(b, prop) && __defNormalProp$1(a2, prop, b[prop]);
|
|
4398
|
+
return a2;
|
|
4399
|
+
};
|
|
4175
4400
|
function muxVideoCustomRendering(config) {
|
|
4176
4401
|
return {
|
|
4177
4402
|
components: {
|
|
4178
|
-
input: (props) => /* @__PURE__ */ jsxRuntime.jsx(Input$1, { config: {
|
|
4403
|
+
input: (props) => /* @__PURE__ */ jsxRuntime.jsx(Input$1, __spreadValues$1({ config: __spreadValues$1(__spreadValues$1({}, config), props.schemaType.options) }, props))
|
|
4179
4404
|
},
|
|
4180
4405
|
preview: {
|
|
4181
4406
|
select: {
|
|
@@ -4363,7 +4588,16 @@ const muxVideoSchema = {
|
|
|
4363
4588
|
muxStaticRenditions,
|
|
4364
4589
|
muxAssetData,
|
|
4365
4590
|
muxVideoAsset
|
|
4366
|
-
]
|
|
4591
|
+
];
|
|
4592
|
+
var __defProp2 = Object.defineProperty, __getOwnPropSymbols = Object.getOwnPropertySymbols, __hasOwnProp2 = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable, __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a2, b) => {
|
|
4593
|
+
for (var prop in b || (b = {}))
|
|
4594
|
+
__hasOwnProp2.call(b, prop) && __defNormalProp(a2, prop, b[prop]);
|
|
4595
|
+
if (__getOwnPropSymbols)
|
|
4596
|
+
for (var prop of __getOwnPropSymbols(b))
|
|
4597
|
+
__propIsEnum.call(b, prop) && __defNormalProp(a2, prop, b[prop]);
|
|
4598
|
+
return a2;
|
|
4599
|
+
};
|
|
4600
|
+
const defaultConfig = {
|
|
4367
4601
|
mp4_support: "none",
|
|
4368
4602
|
encoding_tier: "smart",
|
|
4369
4603
|
max_resolution_tier: "1080p",
|
|
@@ -4371,16 +4605,13 @@ const muxVideoSchema = {
|
|
|
4371
4605
|
defaultSigned: !1,
|
|
4372
4606
|
tool: DEFAULT_TOOL_CONFIG
|
|
4373
4607
|
}, muxInput = sanity.definePlugin((userConfig) => {
|
|
4374
|
-
const config = {
|
|
4608
|
+
const config = __spreadValues(__spreadValues({}, defaultConfig), userConfig || {});
|
|
4375
4609
|
return {
|
|
4376
4610
|
name: "mux-input",
|
|
4377
4611
|
schema: {
|
|
4378
4612
|
types: [
|
|
4379
4613
|
...schemaTypes,
|
|
4380
|
-
{
|
|
4381
|
-
...muxVideoSchema,
|
|
4382
|
-
...muxVideoCustomRendering(config)
|
|
4383
|
-
}
|
|
4614
|
+
__spreadValues(__spreadValues({}, muxVideoSchema), muxVideoCustomRendering(config))
|
|
4384
4615
|
]
|
|
4385
4616
|
},
|
|
4386
4617
|
tools: config.tool === !1 ? void 0 : [createStudioTool(config)]
|