sanity-plugin-mux-input 2.3.4 → 2.3.6
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/README.md +36 -6
- package/{lib/index.d.cts → dist/index.d.mts} +9 -2
- package/{lib → dist}/index.d.ts +9 -2
- package/{lib/index.cjs → dist/index.js} +247 -143
- package/dist/index.js.map +1 -0
- package/{lib/index.esm.js → dist/index.mjs} +250 -146
- package/dist/index.mjs.map +1 -0
- package/package.json +50 -48
- package/src/_exports/index.ts +4 -3
- package/src/actions/upload.ts +1 -1
- package/src/components/FileInputArea.tsx +4 -3
- package/src/components/TextTracksEditor.tsx +76 -173
- package/src/components/UploadConfiguration.tsx +23 -23
- package/src/components/Uploader.tsx +1 -1
- package/src/components/VideoDetails/VideoDetails.tsx +1 -1
- package/src/components/VideoInBrowser.tsx +21 -2
- package/src/components/VideoPlayer.tsx +15 -2
- package/src/components/VideoThumbnail.tsx +1 -1
- package/src/components/documentPreview/PaneItemPreview.tsx +10 -7
- package/src/hooks/useImportMuxAssets.ts +7 -3
- package/src/schema.ts +181 -0
- package/src/util/constants.ts +2 -0
- package/src/util/generateJwt.ts +2 -2
- package/src/util/types.ts +10 -2
- package/lib/index.cjs.map +0 -1
- package/lib/index.esm.js.map +0 -1
- package/lib/index.js +0 -4314
- package/lib/index.js.map +0 -1
- package/src/schema.tsx +0 -42
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
|
|
2
2
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { ErrorOutlineIcon, RetrieveIcon, RetryIcon, CheckmarkCircleIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, CheckmarkIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, LockIcon, PlayIcon, PlugIcon, UploadIcon, ResetIcon, EllipsisHorizontalIcon,
|
|
4
|
-
import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, Tooltip, Inline, useToast, TabList, Tab, TabPanel, TextInput, Label as Label$1, Grid, useClickOutside, Popover, MenuDivider,
|
|
3
|
+
import { ErrorOutlineIcon, RetrieveIcon, RetryIcon, CheckmarkCircleIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, CheckmarkIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, LockIcon, PlayIcon, PlugIcon, UploadIcon, ResetIcon, EllipsisHorizontalIcon, TranslateIcon, DocumentVideoIcon } from "@sanity/icons";
|
|
4
|
+
import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, Tooltip, Inline, useToast, TabList, Tab, TabPanel, TextInput, Label as Label$1, Grid, useClickOutside, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
|
|
5
5
|
import React, { useState, useMemo, useEffect, useRef, useId, memo, isValidElement, useCallback, useReducer, PureComponent, createElement, forwardRef, Suspense } from "react";
|
|
6
6
|
import compact from "lodash/compact.js";
|
|
7
7
|
import toLower from "lodash/toLower.js";
|
|
@@ -18,7 +18,7 @@ import { usePaneRouter } from "sanity/desk";
|
|
|
18
18
|
import { IntentLink } from "sanity/router";
|
|
19
19
|
import isNumber from "lodash/isNumber.js";
|
|
20
20
|
import isString from "lodash/isString.js";
|
|
21
|
-
import {
|
|
21
|
+
import { useObservable } from "react-rx";
|
|
22
22
|
import useSWR from "swr";
|
|
23
23
|
import scrollIntoView from "scroll-into-view-if-needed";
|
|
24
24
|
import { UpChunk } from "@mux/upchunk";
|
|
@@ -160,8 +160,7 @@ function hasMorePages(pageResult) {
|
|
|
160
160
|
function useMuxAssets({ secrets, enabled }) {
|
|
161
161
|
const [state, setState] = useState({ loading: !0, pageNum: FIRST_PAGE });
|
|
162
162
|
return useEffect(() => {
|
|
163
|
-
if (!enabled)
|
|
164
|
-
return;
|
|
163
|
+
if (!enabled) return;
|
|
165
164
|
const subscription = defer(
|
|
166
165
|
() => fetchMuxAssetsPage(
|
|
167
166
|
secrets,
|
|
@@ -190,7 +189,7 @@ function useMuxAssets({ secrets, enabled }) {
|
|
|
190
189
|
return () => subscription.unsubscribe();
|
|
191
190
|
}, [enabled]), state;
|
|
192
191
|
}
|
|
193
|
-
const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumentId = "secrets.mux", DIALOGS_Z_INDEX = 6e4, THUMBNAIL_ASPECT_RATIO = 1.7777777777777777, MIN_ASPECT_RATIO = 5 / 4, path$1 = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"], useSecretsDocumentValues = () => {
|
|
192
|
+
const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumentId = "secrets.mux", DIALOGS_Z_INDEX = 6e4, THUMBNAIL_ASPECT_RATIO = 1.7777777777777777, MIN_ASPECT_RATIO = 5 / 4, AUDIO_ASPECT_RATIO = 5 / 1, path$1 = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"], useSecretsDocumentValues = () => {
|
|
194
193
|
const { error, isLoading, value } = useDocumentValues(
|
|
195
194
|
muxSecretsDocumentId,
|
|
196
195
|
path$1
|
|
@@ -224,7 +223,7 @@ function useImportMuxAssets() {
|
|
|
224
223
|
};
|
|
225
224
|
async function importAssets() {
|
|
226
225
|
setImportState("importing");
|
|
227
|
-
const documents = selectedAssets.
|
|
226
|
+
const documents = selectedAssets.flatMap((asset) => muxAssetToSanityDocument(asset) || []), tx = client.transaction();
|
|
228
227
|
documents.forEach((doc) => tx.create(doc));
|
|
229
228
|
try {
|
|
230
229
|
await tx.commit({ returnDocuments: !1 }), setSelectedAssets([]), setImportState("done");
|
|
@@ -249,17 +248,19 @@ function useImportMuxAssets() {
|
|
|
249
248
|
}
|
|
250
249
|
function muxAssetToSanityDocument(asset) {
|
|
251
250
|
var _a;
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
251
|
+
const playbackId = (_a = (asset.playback_ids || []).find((p) => p.id)) == null ? void 0 : _a.id;
|
|
252
|
+
if (playbackId)
|
|
253
|
+
return {
|
|
254
|
+
_id: uuid(),
|
|
255
|
+
_type: "mux.videoAsset",
|
|
256
|
+
_updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
257
|
+
_createdAt: parseMuxDate(asset.created_at).toISOString(),
|
|
258
|
+
assetId: asset.id,
|
|
259
|
+
playbackId,
|
|
260
|
+
filename: `Asset #${truncateString(asset.id, 15)}`,
|
|
261
|
+
status: asset.status,
|
|
262
|
+
data: asset
|
|
263
|
+
};
|
|
263
264
|
}
|
|
264
265
|
const useAssetsInSanity = createHookFromObservableFactory(
|
|
265
266
|
(documentStore) => documentStore.listenQuery(
|
|
@@ -282,8 +283,7 @@ function assetExistsInSanity(asset, existingAssets) {
|
|
|
282
283
|
function useInView(options = {}) {
|
|
283
284
|
const [inView, setInView] = useState(!1), ref = useRef(null);
|
|
284
285
|
return useEffect(() => {
|
|
285
|
-
if (!ref.current)
|
|
286
|
-
return;
|
|
286
|
+
if (!ref.current) return;
|
|
287
287
|
const observer = new IntersectionObserver(([entry], obs) => {
|
|
288
288
|
var _a;
|
|
289
289
|
const nowInView = entry.isIntersecting && obs.thresholds.some((threshold) => entry.intersectionRatio >= threshold);
|
|
@@ -321,9 +321,9 @@ function readSecrets(client) {
|
|
|
321
321
|
function generateJwt(client, playbackId, aud, payload) {
|
|
322
322
|
const { signingKeyId, signingKeyPrivate } = readSecrets(client);
|
|
323
323
|
if (!signingKeyId)
|
|
324
|
-
throw new TypeError("Missing signingKeyId");
|
|
324
|
+
throw new TypeError("Missing `signingKeyId`.\n Check your plugin's configuration");
|
|
325
325
|
if (!signingKeyPrivate)
|
|
326
|
-
throw new TypeError("Missing signingKeyPrivate");
|
|
326
|
+
throw new TypeError("Missing `signingKeyPrivate`.\n Check your plugin's configuration");
|
|
327
327
|
const { default: sign } = suspend(() => import("jsonwebtoken-esm/sign"), ["jsonwebtoken-esm/sign"]);
|
|
328
328
|
return sign(
|
|
329
329
|
payload ? JSON.parse(JSON.stringify(payload, (_, v) => v != null ? v : void 0)) : {},
|
|
@@ -774,7 +774,7 @@ function VideoPlayer({
|
|
|
774
774
|
...props
|
|
775
775
|
}) {
|
|
776
776
|
var _a, _b;
|
|
777
|
-
const client = useClient(), { src: videoSrc, error } = useMemo(() => {
|
|
777
|
+
const client = useClient(), isAudio = assetIsAudio(asset), { src: videoSrc, error } = useMemo(() => {
|
|
778
778
|
try {
|
|
779
779
|
const src = (asset == null ? void 0 : asset.playbackId) && getVideoSrc({ client, asset });
|
|
780
780
|
return src ? { src } : { error: new TypeError("Asset has no playback ID") };
|
|
@@ -787,8 +787,12 @@ function VideoPlayer({
|
|
|
787
787
|
} catch {
|
|
788
788
|
return !1;
|
|
789
789
|
}
|
|
790
|
-
}, [videoSrc]), [width, height] = ((_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.aspect_ratio) != null ? _b : "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height)
|
|
791
|
-
|
|
790
|
+
}, [videoSrc]), [width, height] = ((_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.aspect_ratio) != null ? _b : "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
|
|
791
|
+
let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
|
|
792
|
+
return isAudio && (aspectRatio = props.forceAspectRatio ? (
|
|
793
|
+
// Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
|
|
794
|
+
props.forceAspectRatio * 1.2
|
|
795
|
+
) : AUDIO_ASPECT_RATIO), /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
|
|
792
796
|
videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
793
797
|
/* @__PURE__ */ jsx(
|
|
794
798
|
MuxPlayer,
|
|
@@ -801,9 +805,10 @@ function VideoPlayer({
|
|
|
801
805
|
crossOrigin: "anonymous",
|
|
802
806
|
metadata: {
|
|
803
807
|
player_name: "Sanity Admin Dashboard",
|
|
804
|
-
player_version: "2.3.
|
|
808
|
+
player_version: "2.3.6",
|
|
805
809
|
page_type: "Preview Player"
|
|
806
810
|
},
|
|
811
|
+
audio: isAudio,
|
|
807
812
|
style: {
|
|
808
813
|
height: "100%",
|
|
809
814
|
width: "100%",
|
|
@@ -832,6 +837,10 @@ function VideoPlayer({
|
|
|
832
837
|
children
|
|
833
838
|
] });
|
|
834
839
|
}
|
|
840
|
+
function assetIsAudio(asset) {
|
|
841
|
+
var _a;
|
|
842
|
+
return ((_a = asset.data) == null ? void 0 : _a.max_stored_resolution) === "Audio only";
|
|
843
|
+
}
|
|
835
844
|
function deleteAssetOnMux(client, assetId) {
|
|
836
845
|
const { dataset } = client.config();
|
|
837
846
|
return client.request({
|
|
@@ -845,8 +854,7 @@ async function deleteAsset({
|
|
|
845
854
|
asset,
|
|
846
855
|
deleteOnMux
|
|
847
856
|
}) {
|
|
848
|
-
if (!(asset != null && asset._id))
|
|
849
|
-
return !0;
|
|
857
|
+
if (!(asset != null && asset._id)) return !0;
|
|
850
858
|
try {
|
|
851
859
|
await client.delete(asset._id);
|
|
852
860
|
} catch {
|
|
@@ -921,10 +929,14 @@ function PublishedStatus(props) {
|
|
|
921
929
|
);
|
|
922
930
|
}
|
|
923
931
|
function PaneItemPreview(props) {
|
|
924
|
-
const { icon, layout, presence, schemaType, value } = props, title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null,
|
|
932
|
+
const { icon, layout, presence, schemaType, value } = props, title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null, observable = useMemo(
|
|
925
933
|
() => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
|
|
926
|
-
[props.documentPreviewStore, schemaType, value._id
|
|
927
|
-
),
|
|
934
|
+
[props.documentPreviewStore, schemaType, title, value._id]
|
|
935
|
+
), { draft, published, isLoading } = useObservable(observable, {
|
|
936
|
+
draft: null,
|
|
937
|
+
published: null,
|
|
938
|
+
isLoading: !0
|
|
939
|
+
}), status = isLoading ? null : /* @__PURE__ */ jsxs(Inline, { space: 4, children: [
|
|
928
940
|
presence && presence.length > 0 && /* @__PURE__ */ jsx(DocumentPreviewPresence, { presence }),
|
|
929
941
|
/* @__PURE__ */ jsx(PublishedStatus, { document: published }),
|
|
930
942
|
/* @__PURE__ */ jsx(DraftStatus, { document: draft })
|
|
@@ -1037,8 +1049,7 @@ function DeleteDialog({
|
|
|
1037
1049
|
state !== "checkingReferences" || referencesLoading || setState(references != null && references.length ? "cantDelete" : "confirm");
|
|
1038
1050
|
}, [state, references, referencesLoading]);
|
|
1039
1051
|
async function confirmDelete() {
|
|
1040
|
-
if (state !== "confirm")
|
|
1041
|
-
return;
|
|
1052
|
+
if (state !== "confirm") return;
|
|
1042
1053
|
setState("processing_deletion");
|
|
1043
1054
|
const worked = await deleteAsset({ client, asset, deleteOnMux });
|
|
1044
1055
|
worked === !0 ? (toast.push({ title: "Successfully deleted video", status: "success" }), succeededDeleting()) : worked === "failed-mux" ? (toast.push({
|
|
@@ -1627,7 +1638,25 @@ function VideoInBrowser({
|
|
|
1627
1638
|
children: [
|
|
1628
1639
|
renderVideo ? /* @__PURE__ */ jsx(VideoPlayer, { asset, autoPlay: !0, forceAspectRatio: THUMBNAIL_ASPECT_RATIO }) : /* @__PURE__ */ jsxs(PlayButton, { onClick: () => setRenderVideo(!0), children: [
|
|
1629
1640
|
/* @__PURE__ */ jsx("div", { "data-play": !0, children: /* @__PURE__ */ jsx(PlayIcon, {}) }),
|
|
1630
|
-
/* @__PURE__ */ jsx(
|
|
1641
|
+
assetIsAudio(asset) ? /* @__PURE__ */ jsx(
|
|
1642
|
+
"div",
|
|
1643
|
+
{
|
|
1644
|
+
style: {
|
|
1645
|
+
aspectRatio: THUMBNAIL_ASPECT_RATIO,
|
|
1646
|
+
display: "flex",
|
|
1647
|
+
alignItems: "center",
|
|
1648
|
+
justifyContent: "center"
|
|
1649
|
+
},
|
|
1650
|
+
children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "3em", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
|
|
1651
|
+
"path",
|
|
1652
|
+
{
|
|
1653
|
+
fill: "currentColor",
|
|
1654
|
+
style: { opacity: "0.65" },
|
|
1655
|
+
d: "M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
|
|
1656
|
+
}
|
|
1657
|
+
) })
|
|
1658
|
+
}
|
|
1659
|
+
) : /* @__PURE__ */ jsx(VideoThumbnail, { asset })
|
|
1631
1660
|
] }),
|
|
1632
1661
|
/* @__PURE__ */ jsx(VideoMetadata, { asset }),
|
|
1633
1662
|
/* @__PURE__ */ jsxs(
|
|
@@ -3399,47 +3428,45 @@ const ALL_LANGUAGE_CODES = LanguagesList.getAllCodes().map((code) => ({
|
|
|
3399
3428
|
})),
|
|
3400
3429
|
subtitles: ALL_LANGUAGE_CODES,
|
|
3401
3430
|
captions: ALL_LANGUAGE_CODES
|
|
3402
|
-
}
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
function TrackEditor({
|
|
3408
|
-
canAutoGenerate,
|
|
3409
|
-
track,
|
|
3410
|
-
dispatch
|
|
3431
|
+
};
|
|
3432
|
+
function TextTracksEditor({
|
|
3433
|
+
tracks,
|
|
3434
|
+
dispatch,
|
|
3435
|
+
defaultLang
|
|
3411
3436
|
}) {
|
|
3412
|
-
const
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
{
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
subAction: "
|
|
3437
|
+
const track = tracks[0];
|
|
3438
|
+
return /* @__PURE__ */ jsx(FormField$2, { title: "Auto-generated subtitle or caption", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
|
|
3439
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", children: [
|
|
3440
|
+
/* @__PURE__ */ jsx(
|
|
3441
|
+
Checkbox,
|
|
3442
|
+
{
|
|
3443
|
+
id: "include-autogenerated-track",
|
|
3444
|
+
style: { display: "block" },
|
|
3445
|
+
checked: !!(track != null && track.language_code),
|
|
3446
|
+
onChange: () => {
|
|
3447
|
+
dispatch(track ? { action: "track", id: track._id, subAction: "delete" } : {
|
|
3448
|
+
action: "track",
|
|
3449
|
+
id: uuid(),
|
|
3450
|
+
subAction: "add",
|
|
3426
3451
|
value: {
|
|
3427
|
-
type:
|
|
3452
|
+
type: "autogenerated",
|
|
3453
|
+
name: defaultLang || void 0,
|
|
3454
|
+
language_code: defaultLang || void 0
|
|
3428
3455
|
}
|
|
3429
|
-
})
|
|
3430
|
-
value,
|
|
3431
|
-
id: inputId
|
|
3456
|
+
});
|
|
3432
3457
|
}
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
/* @__PURE__ */ jsx(
|
|
3458
|
+
}
|
|
3459
|
+
),
|
|
3460
|
+
/* @__PURE__ */ jsx(Box, { flex: 1, paddingLeft: 3, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: "checkbox", children: "Generate captions" }) }) })
|
|
3461
|
+
] }),
|
|
3462
|
+
track && /* @__PURE__ */ jsx(
|
|
3438
3463
|
Autocomplete,
|
|
3439
3464
|
{
|
|
3440
|
-
id:
|
|
3465
|
+
id: "text-tract-editor--language",
|
|
3441
3466
|
value: track.language_code,
|
|
3442
|
-
onChange: (newValue) =>
|
|
3467
|
+
onChange: (newValue) => dispatch({
|
|
3468
|
+
action: "track",
|
|
3469
|
+
id: track._id,
|
|
3443
3470
|
subAction: "update",
|
|
3444
3471
|
value: {
|
|
3445
3472
|
language_code: newValue,
|
|
@@ -3462,54 +3489,9 @@ function TrackEditor({
|
|
|
3462
3489
|
")"
|
|
3463
3490
|
] }) })
|
|
3464
3491
|
}
|
|
3465
|
-
)
|
|
3466
|
-
/* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
|
|
3467
|
-
Button,
|
|
3468
|
-
{
|
|
3469
|
-
icon: TrashIcon,
|
|
3470
|
-
tone: "critical",
|
|
3471
|
-
mode: "ghost",
|
|
3472
|
-
onClick: () => dispatchTrackAction({ subAction: "delete" }),
|
|
3473
|
-
text: "Delete"
|
|
3474
|
-
}
|
|
3475
|
-
) })
|
|
3492
|
+
)
|
|
3476
3493
|
] }) });
|
|
3477
3494
|
}
|
|
3478
|
-
function TextTracksEditor({
|
|
3479
|
-
canAutoGenerate,
|
|
3480
|
-
tracks,
|
|
3481
|
-
dispatch
|
|
3482
|
-
}) {
|
|
3483
|
-
return TRACK_TYPES.filter(
|
|
3484
|
-
({ value }) => !(value === "autogenerated" && !canAutoGenerate)
|
|
3485
|
-
).length === 0 ? null : /* @__PURE__ */ jsx(
|
|
3486
|
-
FormField$2,
|
|
3487
|
-
{
|
|
3488
|
-
title: "Captions & Subtitles",
|
|
3489
|
-
description: "Provide text tracks for video accessibility.",
|
|
3490
|
-
children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
|
|
3491
|
-
tracks.map((track) => /* @__PURE__ */ jsx(
|
|
3492
|
-
TrackEditor,
|
|
3493
|
-
{
|
|
3494
|
-
canAutoGenerate,
|
|
3495
|
-
track,
|
|
3496
|
-
dispatch
|
|
3497
|
-
},
|
|
3498
|
-
track._id
|
|
3499
|
-
)),
|
|
3500
|
-
/* @__PURE__ */ jsx(
|
|
3501
|
-
Button,
|
|
3502
|
-
{
|
|
3503
|
-
icon: AddIcon,
|
|
3504
|
-
onClick: () => dispatch({ action: "track", id: uuid(), subAction: "add" }),
|
|
3505
|
-
text: "New caption/subtitle",
|
|
3506
|
-
mode: "ghost"
|
|
3507
|
-
}
|
|
3508
|
-
)
|
|
3509
|
-
] })
|
|
3510
|
-
}
|
|
3511
|
-
);
|
|
3512
|
-
}
|
|
3513
3495
|
const ENCODING_OPTIONS = [
|
|
3514
3496
|
{ value: "smart", label: "Smart" },
|
|
3515
3497
|
{ value: "baseline", label: "Baseline" }
|
|
@@ -3525,26 +3507,25 @@ function UploadConfiguration({
|
|
|
3525
3507
|
startUpload,
|
|
3526
3508
|
onClose
|
|
3527
3509
|
}) {
|
|
3528
|
-
var _a;
|
|
3529
3510
|
const id = useId(), autoTextTracks = useRef(
|
|
3530
|
-
pluginConfig.encoding_tier === "smart" &&
|
|
3531
|
-
|
|
3511
|
+
pluginConfig.encoding_tier === "smart" && pluginConfig.defaultAutogeneratedSubtitleLang ? [
|
|
3512
|
+
{
|
|
3532
3513
|
_id: uuid(),
|
|
3533
3514
|
type: "autogenerated",
|
|
3534
|
-
language_code,
|
|
3535
|
-
name: LanguagesList.getNativeName(
|
|
3536
|
-
}
|
|
3537
|
-
|
|
3515
|
+
language_code: pluginConfig.defaultAutogeneratedSubtitleLang,
|
|
3516
|
+
name: LanguagesList.getNativeName(pluginConfig.defaultAutogeneratedSubtitleLang)
|
|
3517
|
+
}
|
|
3518
|
+
] : []
|
|
3538
3519
|
).current, [config, dispatch] = useReducer(
|
|
3539
3520
|
(prev, action) => {
|
|
3540
|
-
var
|
|
3521
|
+
var _a;
|
|
3541
3522
|
switch (action.action) {
|
|
3542
3523
|
case "encoding_tier":
|
|
3543
3524
|
return action.value === "baseline" ? Object.assign({}, prev, {
|
|
3544
3525
|
encoding_tier: action.value,
|
|
3545
3526
|
mp4_support: "none",
|
|
3546
3527
|
max_resolution_tier: "1080p",
|
|
3547
|
-
text_tracks: (
|
|
3528
|
+
text_tracks: (_a = prev.text_tracks) == null ? void 0 : _a.filter(({ type }) => type !== "autogenerated")
|
|
3548
3529
|
}) : Object.assign({}, prev, {
|
|
3549
3530
|
encoding_tier: action.value,
|
|
3550
3531
|
mp4_support: pluginConfig.mp4_support,
|
|
@@ -3560,23 +3541,21 @@ function UploadConfiguration({
|
|
|
3560
3541
|
const text_tracks = [...prev.text_tracks], target_track_i = text_tracks.findIndex(({ _id: _id2 }) => _id2 === action.id);
|
|
3561
3542
|
switch (action.subAction) {
|
|
3562
3543
|
case "add":
|
|
3563
|
-
if (target_track_i !== -1)
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
);
|
|
3544
|
+
if (target_track_i !== -1) break;
|
|
3545
|
+
text_tracks.push({
|
|
3546
|
+
_id: action.id,
|
|
3547
|
+
...action.value
|
|
3548
|
+
});
|
|
3568
3549
|
break;
|
|
3569
3550
|
case "update":
|
|
3570
|
-
if (target_track_i === -1)
|
|
3571
|
-
break;
|
|
3551
|
+
if (target_track_i === -1) break;
|
|
3572
3552
|
text_tracks[target_track_i] = {
|
|
3573
3553
|
...text_tracks[target_track_i],
|
|
3574
3554
|
...action.value
|
|
3575
3555
|
};
|
|
3576
3556
|
break;
|
|
3577
3557
|
case "delete":
|
|
3578
|
-
if (target_track_i === -1)
|
|
3579
|
-
break;
|
|
3558
|
+
if (target_track_i === -1) break;
|
|
3580
3559
|
text_tracks.splice(target_track_i, 1);
|
|
3581
3560
|
break;
|
|
3582
3561
|
}
|
|
@@ -3597,8 +3576,7 @@ function UploadConfiguration({
|
|
|
3597
3576
|
), { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
|
|
3598
3577
|
if (useEffect(() => {
|
|
3599
3578
|
skipConfig && startUpload(formatUploadConfig(config));
|
|
3600
|
-
}, []), skipConfig)
|
|
3601
|
-
return null;
|
|
3579
|
+
}, []), skipConfig) return null;
|
|
3602
3580
|
const maxSupportedResolution = RESOLUTION_TIERS.findIndex(
|
|
3603
3581
|
(rt) => rt.value === pluginConfig.max_resolution_tier
|
|
3604
3582
|
);
|
|
@@ -3747,15 +3725,15 @@ function UploadConfiguration({
|
|
|
3747
3725
|
] })
|
|
3748
3726
|
] }) })
|
|
3749
3727
|
] }),
|
|
3750
|
-
!disableTextTrackConfig && /* @__PURE__ */ jsx(
|
|
3728
|
+
!disableTextTrackConfig && config.encoding_tier === "smart" && /* @__PURE__ */ jsx(
|
|
3751
3729
|
TextTracksEditor,
|
|
3752
3730
|
{
|
|
3753
|
-
canAutoGenerate: config.encoding_tier === "smart",
|
|
3754
3731
|
tracks: config.text_tracks,
|
|
3755
|
-
dispatch
|
|
3732
|
+
dispatch,
|
|
3733
|
+
defaultLang: pluginConfig.defaultAutogeneratedSubtitleLang
|
|
3756
3734
|
}
|
|
3757
3735
|
),
|
|
3758
|
-
/* @__PURE__ */ jsx(
|
|
3736
|
+
/* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
|
|
3759
3737
|
Button,
|
|
3760
3738
|
{
|
|
3761
3739
|
icon: UploadIcon,
|
|
@@ -3763,7 +3741,7 @@ function UploadConfiguration({
|
|
|
3763
3741
|
tone: "positive",
|
|
3764
3742
|
onClick: () => startUpload(formatUploadConfig(config))
|
|
3765
3743
|
}
|
|
3766
|
-
)
|
|
3744
|
+
) })
|
|
3767
3745
|
] })
|
|
3768
3746
|
}
|
|
3769
3747
|
);
|
|
@@ -4021,8 +3999,7 @@ function Uploader(props) {
|
|
|
4021
3999
|
}, []);
|
|
4022
4000
|
const startUpload = (settings) => {
|
|
4023
4001
|
const { stagedUpload } = state;
|
|
4024
|
-
if (!stagedUpload || uploadRef.current)
|
|
4025
|
-
return;
|
|
4002
|
+
if (!stagedUpload || uploadRef.current) return;
|
|
4026
4003
|
dispatch({ action: "commitUpload" });
|
|
4027
4004
|
let uploadObservable;
|
|
4028
4005
|
switch (stagedUpload.type) {
|
|
@@ -4245,7 +4222,7 @@ function muxVideoCustomRendering(config) {
|
|
|
4245
4222
|
}
|
|
4246
4223
|
};
|
|
4247
4224
|
}
|
|
4248
|
-
const
|
|
4225
|
+
const muxVideoSchema = {
|
|
4249
4226
|
name: "mux.video",
|
|
4250
4227
|
type: "object",
|
|
4251
4228
|
title: "Video asset reference",
|
|
@@ -4258,6 +4235,122 @@ const muxVideo = {
|
|
|
4258
4235
|
to: [{ type: "mux.videoAsset" }]
|
|
4259
4236
|
}
|
|
4260
4237
|
]
|
|
4238
|
+
}, muxTrack = {
|
|
4239
|
+
name: "mux.track",
|
|
4240
|
+
type: "object",
|
|
4241
|
+
fields: [
|
|
4242
|
+
{ type: "string", name: "id" },
|
|
4243
|
+
{ type: "string", name: "type" },
|
|
4244
|
+
{ type: "number", name: "max_width" },
|
|
4245
|
+
{ type: "number", name: "max_frame_rate" },
|
|
4246
|
+
{ type: "number", name: "duration" },
|
|
4247
|
+
{ type: "number", name: "max_height" }
|
|
4248
|
+
]
|
|
4249
|
+
}, muxPlaybackId = {
|
|
4250
|
+
name: "mux.playbackId",
|
|
4251
|
+
type: "object",
|
|
4252
|
+
fields: [
|
|
4253
|
+
{ type: "string", name: "id" },
|
|
4254
|
+
{ type: "string", name: "policy" }
|
|
4255
|
+
]
|
|
4256
|
+
}, muxStaticRenditionFile = {
|
|
4257
|
+
name: "mux.staticRenditionFile",
|
|
4258
|
+
type: "object",
|
|
4259
|
+
fields: [
|
|
4260
|
+
{ type: "string", name: "ext" },
|
|
4261
|
+
{ type: "string", name: "name" },
|
|
4262
|
+
{ type: "number", name: "width" },
|
|
4263
|
+
{ type: "number", name: "bitrate" },
|
|
4264
|
+
{ type: "number", name: "filesize" },
|
|
4265
|
+
{ type: "number", name: "height" }
|
|
4266
|
+
]
|
|
4267
|
+
}, muxStaticRenditions = {
|
|
4268
|
+
name: "mux.staticRenditions",
|
|
4269
|
+
type: "object",
|
|
4270
|
+
fields: [
|
|
4271
|
+
{ type: "string", name: "status" },
|
|
4272
|
+
{
|
|
4273
|
+
name: "files",
|
|
4274
|
+
type: "array",
|
|
4275
|
+
of: [{ type: "mux.staticRenditionFile" }]
|
|
4276
|
+
}
|
|
4277
|
+
]
|
|
4278
|
+
}, muxAssetData = {
|
|
4279
|
+
name: "mux.assetData",
|
|
4280
|
+
title: "Mux asset data",
|
|
4281
|
+
type: "object",
|
|
4282
|
+
fields: [
|
|
4283
|
+
{
|
|
4284
|
+
type: "string",
|
|
4285
|
+
name: "resolution_tier"
|
|
4286
|
+
},
|
|
4287
|
+
{
|
|
4288
|
+
type: "string",
|
|
4289
|
+
name: "upload_id"
|
|
4290
|
+
},
|
|
4291
|
+
{
|
|
4292
|
+
type: "string",
|
|
4293
|
+
name: "created_at"
|
|
4294
|
+
},
|
|
4295
|
+
{
|
|
4296
|
+
type: "string",
|
|
4297
|
+
name: "id"
|
|
4298
|
+
},
|
|
4299
|
+
{
|
|
4300
|
+
type: "string",
|
|
4301
|
+
name: "status"
|
|
4302
|
+
},
|
|
4303
|
+
{
|
|
4304
|
+
type: "string",
|
|
4305
|
+
name: "max_stored_resolution"
|
|
4306
|
+
},
|
|
4307
|
+
{
|
|
4308
|
+
type: "string",
|
|
4309
|
+
name: "passthrough"
|
|
4310
|
+
},
|
|
4311
|
+
{
|
|
4312
|
+
type: "string",
|
|
4313
|
+
name: "encoding_tier"
|
|
4314
|
+
},
|
|
4315
|
+
{
|
|
4316
|
+
type: "string",
|
|
4317
|
+
name: "master_access"
|
|
4318
|
+
},
|
|
4319
|
+
{
|
|
4320
|
+
type: "string",
|
|
4321
|
+
name: "aspect_ratio"
|
|
4322
|
+
},
|
|
4323
|
+
{
|
|
4324
|
+
type: "number",
|
|
4325
|
+
name: "duration"
|
|
4326
|
+
},
|
|
4327
|
+
{
|
|
4328
|
+
type: "number",
|
|
4329
|
+
name: "max_stored_frame_rate"
|
|
4330
|
+
},
|
|
4331
|
+
{
|
|
4332
|
+
type: "string",
|
|
4333
|
+
name: "mp4_support"
|
|
4334
|
+
},
|
|
4335
|
+
{
|
|
4336
|
+
type: "string",
|
|
4337
|
+
name: "max_resolution_tier"
|
|
4338
|
+
},
|
|
4339
|
+
{
|
|
4340
|
+
name: "tracks",
|
|
4341
|
+
type: "array",
|
|
4342
|
+
of: [{ type: "mux.track" }]
|
|
4343
|
+
},
|
|
4344
|
+
{
|
|
4345
|
+
name: "playback_ids",
|
|
4346
|
+
type: "array",
|
|
4347
|
+
of: [{ type: "mux.playbackId" }]
|
|
4348
|
+
},
|
|
4349
|
+
{
|
|
4350
|
+
name: "static_renditions",
|
|
4351
|
+
type: "mux.staticRenditions"
|
|
4352
|
+
}
|
|
4353
|
+
]
|
|
4261
4354
|
}, muxVideoAsset = {
|
|
4262
4355
|
name: "mux.videoAsset",
|
|
4263
4356
|
type: "object",
|
|
@@ -4282,9 +4375,20 @@ const muxVideo = {
|
|
|
4282
4375
|
{
|
|
4283
4376
|
type: "number",
|
|
4284
4377
|
name: "thumbTime"
|
|
4378
|
+
},
|
|
4379
|
+
{
|
|
4380
|
+
type: "mux.assetData",
|
|
4381
|
+
name: "data"
|
|
4285
4382
|
}
|
|
4286
4383
|
]
|
|
4287
|
-
},
|
|
4384
|
+
}, schemaTypes = [
|
|
4385
|
+
muxTrack,
|
|
4386
|
+
muxPlaybackId,
|
|
4387
|
+
muxStaticRenditionFile,
|
|
4388
|
+
muxStaticRenditions,
|
|
4389
|
+
muxAssetData,
|
|
4390
|
+
muxVideoAsset
|
|
4391
|
+
], defaultConfig = {
|
|
4288
4392
|
mp4_support: "none",
|
|
4289
4393
|
encoding_tier: "smart",
|
|
4290
4394
|
max_resolution_tier: "1080p",
|
|
@@ -4297,9 +4401,9 @@ const muxVideo = {
|
|
|
4297
4401
|
name: "mux-input",
|
|
4298
4402
|
schema: {
|
|
4299
4403
|
types: [
|
|
4300
|
-
|
|
4404
|
+
...schemaTypes,
|
|
4301
4405
|
{
|
|
4302
|
-
...
|
|
4406
|
+
...muxVideoSchema,
|
|
4303
4407
|
...muxVideoCustomRendering(config)
|
|
4304
4408
|
}
|
|
4305
4409
|
]
|
|
@@ -4311,4 +4415,4 @@ export {
|
|
|
4311
4415
|
defaultConfig,
|
|
4312
4416
|
muxInput
|
|
4313
4417
|
};
|
|
4314
|
-
//# sourceMappingURL=index.
|
|
4418
|
+
//# sourceMappingURL=index.mjs.map
|