sanity-plugin-mux-input
5.0.115.0.12
dist/index.js~
dist/index.jsModified+437−419
Index: package/dist/index.js
===================================================================
--- package/dist/index.js
+++ package/dist/index.js
@@ -21,9 +21,8 @@
import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
import { SyncIcon } from "@sanity/icons/Sync";
import { SortIcon } from "@sanity/icons/Sort";
import { Menu, MenuButton, MenuDivider, MenuItem } from "@sanity/ui/menu";
-import { Popover } from "@sanity/ui/popover";
import { CalendarIcon } from "@sanity/icons/Calendar";
import { CheckmarkIcon } from "@sanity/icons/Checkmark";
import { ClockIcon } from "@sanity/icons/Clock";
import { CropIcon } from "@sanity/icons/Crop";
@@ -39,9 +38,8 @@
import { TranslateIcon } from "@sanity/icons/Translate";
import { UploadIcon } from "@sanity/icons/Upload";
import { Autocomplete } from "@sanity/ui/autocomplete";
import LanguagesList from "iso-639-1";
-import "@mux/mux-player-react";
import MuxPlayer from "@mux/mux-player-react/lazy";
import { getDevicePixelRatio } from "use-device-pixel-ratio";
import { DocumentIcon } from "@sanity/icons/Document";
import { IntentLink } from "sanity/router";
@@ -58,8 +56,9 @@
import { UpChunk } from "@mux/upchunk";
import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
import { ImageIcon } from "@sanity/icons/Image";
import { ResetIcon } from "@sanity/icons/Reset";
+import { Popover } from "@sanity/ui/popover";
import { isValidElementType } from "react-is";
import { DocumentVideoIcon } from "@sanity/icons/DocumentVideo";
import { WarningFilledIcon } from "@sanity/icons/WarningFilled";
/**
@@ -77,128 +76,9 @@
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx("path", { d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z" })
}), $[0] = t0) : t0 = $[0], t0;
-}, SUPPORTED_MUX_LANGUAGES = [
- {
- label: "English",
- code: "en",
- state: "Stable"
- },
- {
- label: "Spanish",
- code: "es",
- state: "Stable"
- },
- {
- label: "Italian",
- code: "it",
- state: "Stable"
- },
- {
- label: "Portuguese",
- code: "pt",
- state: "Stable"
- },
- {
- label: "German",
- code: "de",
- state: "Stable"
- },
- {
- label: "French",
- code: "fr",
- state: "Stable"
- },
- {
- label: "Polish",
- code: "pl",
- state: "Beta"
- },
- {
- label: "Russian",
- code: "ru",
- state: "Beta"
- },
- {
- label: "Dutch",
- code: "nl",
- state: "Beta"
- },
- {
- label: "Catalan",
- code: "ca",
- state: "Beta"
- },
- {
- label: "Turkish",
- code: "tr",
- state: "Beta"
- },
- {
- label: "Swedish",
- code: "sv",
- state: "Beta"
- },
- {
- label: "Ukrainian",
- code: "uk",
- state: "Beta"
- },
- {
- label: "Norwegian",
- code: "no",
- state: "Beta"
- },
- {
- label: "Finnish",
- code: "fi",
- state: "Beta"
- },
- {
- label: "Slovak",
- code: "sk",
- state: "Beta"
- },
- {
- label: "Greek",
- code: "el",
- state: "Beta"
- },
- {
- label: "Czech",
- code: "cs",
- state: "Beta"
- },
- {
- label: "Croatian",
- code: "hr",
- state: "Beta"
- },
- {
- label: "Danish",
- code: "da",
- state: "Beta"
- },
- {
- label: "Romanian",
- code: "ro",
- state: "Beta"
- },
- {
- label: "Bulgarian",
- code: "bg",
- state: "Beta"
- }
-];
-SUPPORTED_MUX_LANGUAGES.map((l) => l.code);
-function isCustomTextTrack(track) {
- return track.type !== "autogenerated";
-}
-function isAutogeneratedTrack(track) {
- return track.type === "autogenerated";
-}
-const LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY = "mux-plugin-has-shown-drm-playback-warning", DrmPlaybackWarningContext = createContext({
+}, LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY = "mux-plugin-has-shown-drm-playback-warning", DrmPlaybackWarningContext = createContext({
hasShownWarning: !1,
setHasWarnedAboutDrmPlayback: () => null
}), DrmPlaybackWarningContextProvider = (t0) => {
let $ = c(8), { config, children } = t0, warningDisabled = config?.disableDrmPlaybackWarning ?? !1, t1;
@@ -356,9 +236,9 @@
}, $[0] = documentStore, $[1] = searchQuery, $[2] = sort, $[3] = t0) : t0 = $[3];
let [t1, isLoading] = useAssetDocuments(t0), t2;
$[4] === t1 ? t2 = $[5] : (t2 = t1 === void 0 ? [] : t1, $[4] = t1, $[5] = t2);
let assetDocuments = t2, t3;
- $[6] === assetDocuments ? t3 = $[7] : (t3 = collate(assetDocuments).map(_temp$9), $[6] = assetDocuments, $[7] = t3);
+ $[6] === assetDocuments ? t3 = $[7] : (t3 = collate(assetDocuments).map(_temp$10), $[6] = assetDocuments, $[7] = t3);
let assets = t3, t4;
return $[8] !== assets || $[9] !== isLoading || $[10] !== searchQuery || $[11] !== sort ? (t4 = {
assets,
isLoading,
@@ -367,18 +247,18 @@
setSort,
setSearchQuery
}, $[8] = assets, $[9] = isLoading, $[10] = searchQuery, $[11] = sort, $[12] = t4) : t4 = $[12], t4;
}
-function _temp$9(collated) {
+function _temp$10(collated) {
return {
...collated.draft || collated.published,
_id: collated.id
};
}
function useDialogState() {
return useState(!1);
}
-const PLUGIN_VERSION_QUERY = { sanityVersion: "5.0.11" };
+const PLUGIN_VERSION_QUERY = { sanityVersion: "5.0.12" };
function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate, drmConfigId) {
let doc = {
_id: "secrets.mux",
_type: "mux.apiKey",
@@ -448,10 +328,10 @@
}
if (enableSignedUrls && !await haveValidSigningKeys(client, signingKeyId, signingKeyPrivate)) try {
let { data } = await createSigningKeys(client);
signingKeyId = data.id, signingKeyPrivate = data.private_key, await saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate, drmConfigId ?? "");
- } catch (err_0) {
- throw console.log("Error while creating and saving signing key:", err_0?.message), err_0;
+ } catch (err) {
+ throw console.log("Error while creating and saving signing key:", err?.message), err;
}
return {
token,
secretKey,
@@ -578,9 +458,9 @@
}), $[8] = t4, $[9] = t8, $[10] = titleId, $[11] = t9) : t9 = $[11], t9;
}
const Logo = styled.span.withConfig({
displayName: "Logo",
- componentId: "sc-1qgvus-0"
+ componentId: "sc-gt5pfz-0"
})`display:inline-block;height:0.8em;margin-right:1em;transform:translate(0.3em,-0.2em);`, Header = () => {
let $ = c(1), t0;
return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(MuxLogo, { height: 13 }) }), "API Credentials"] }), $[0] = t0) : t0 = $[0], t0;
};
@@ -1175,16 +1055,16 @@
let [state, setState] = useState(t1), t2;
$[1] !== client || $[2] !== enabled || $[3] !== state ? (t2 = () => {
if (!enabled) return;
let subscription = defer(() => fetchMuxAssetsPage(client, "data" in state && state.data && state.data.length > 0 && !state.error ? state.cursor : null)).pipe(expand((pageResult) => hasMorePages(pageResult) ? timer(2e3).pipe(concatMap(() => defer(() => fetchMuxAssetsPage(client, "next_cursor" in pageResult ? pageResult.next_cursor : null)))) : of()), tap((pageResult_0) => setState((prevState) => accumulateIntermediateState(prevState, pageResult_0)))).subscribe({ complete: () => {
- setState(_temp$8);
+ setState(_temp$9);
} });
return () => subscription.unsubscribe();
}, $[1] = client, $[2] = enabled, $[3] = state, $[4] = t2) : t2 = $[4];
let t3;
return $[5] === enabled ? t3 = $[6] : (t3 = [enabled], $[5] = enabled, $[6] = t3), useEffect(t2, t3), state;
}
-function _temp$8(prev) {
+function _temp$9(prev) {
return {
...prev,
loading: !1
};
@@ -1211,9 +1091,9 @@
}, $[10] = importState, $[11] = t6);
let openDialog = t6, t7;
$[12] !== client || $[13] !== selectedAssets ? (t7 = async function importAssets() {
setImportState("importing");
- let documents = selectedAssets.flatMap(_temp$7), tx = client.transaction();
+ let documents = selectedAssets.flatMap(_temp$8), tx = client.transaction();
documents.forEach((doc) => tx.create(doc));
try {
await tx.commit({ returnDocuments: !1 }), setSelectedAssets([]), setImportState("done");
} catch (t8) {
@@ -1236,9 +1116,9 @@
selectedAssets,
setSelectedAssets
}, $[15] = assetsInSanityLoading, $[16] = closeDialog, $[17] = dialogOpen, $[18] = hasSecrets, $[19] = importAssets, $[20] = importError, $[21] = importState, $[22] = missingAssets, $[23] = muxAssets, $[24] = openDialog, $[25] = selectedAssets, $[26] = t8) : t8 = $[26], t8;
}
-function _temp$7(asset) {
+function _temp$8(asset) {
return muxAssetToSanityDocument(asset) || [];
}
function muxAssetToSanityDocument(asset) {
let playbackId = (asset.playback_ids || []).find((p) => p.id)?.id;
@@ -1377,9 +1257,9 @@
}
}
const Image$1 = styled.img.withConfig({
displayName: "Image",
- componentId: "sc-82on0p-0"
+ componentId: "sc-yzrck7-0"
})`transition:opacity 0.175s ease-out 0s;display:block;width:100%;height:100%;object-fit:contain;object-position:center center;`, STATUS_TO_TONE = {
loading: "transparent",
error: "critical",
loaded: "default"
@@ -1406,10 +1286,10 @@
]);
function handleLoad() {
setStatus("loaded");
}
- function handleError(err_0) {
- setStatus("error"), setError(err_0 || "Failed loading thumbnail");
+ function handleError(err) {
+ setStatus("error"), setError(err || "Failed loading thumbnail");
}
return /* @__PURE__ */ jsx(Suspense, {
fallback: /* @__PURE__ */ jsx("span", { children: "Preparing thumbnail" }),
children: /* @__PURE__ */ jsx(Card, {
@@ -1466,9 +1346,9 @@
});
}
const MissingAssetCheckbox = styled(Checkbox).withConfig({
displayName: "MissingAssetCheckbox",
- componentId: "sc-oxsyb-0"
+ componentId: "sc-4gymow-0"
})`position:static !important;input::after{content:'';position:absolute;inset:0;display:block;cursor:pointer;z-index:1000;}`;
function MissingAsset(t0) {
let $ = c(36), { asset, selectAsset, selected } = t0, duration = useFormattedDuration(asset.duration * 1e3), t1 = asset.id, t2 = selected ? "positive" : void 0, t3;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t3 = { position: "relative" }, $[0] = t3) : t3 = $[0];
@@ -1482,9 +1362,9 @@
onChange: t4,
"aria-label": t5
}), $[3] = selected, $[4] = t4, $[5] = t5, $[6] = t6) : t6 = $[6];
let t7;
- $[7] === asset.playback_ids ? t7 = $[8] : (t7 = asset.playback_ids.find(_temp$6)?.id, $[7] = asset.playback_ids, $[8] = t7);
+ $[7] === asset.playback_ids ? t7 = $[8] : (t7 = asset.playback_ids.find(_temp$7)?.id, $[7] = asset.playback_ids, $[8] = t7);
let t8;
$[9] !== asset || $[10] !== t7 ? (t8 = /* @__PURE__ */ jsx(VideoThumbnail, {
asset: {
assetId: asset.id,
@@ -1561,9 +1441,9 @@
radius: 1,
children: t16
}, t1), $[32] = asset.id, $[33] = t16, $[34] = t2, $[35] = t17) : t17 = $[35], t17;
}
-function _temp$6(p) {
+function _temp$7(p) {
return p.id;
}
function ImportVideosDialog(props) {
let $ = c(43), { importState } = props, canTriggerImport = (importState === "idle" || importState === "error") && props.selectedAssets.length > 0, isImporting = importState === "importing", noAssetsToImport = props.missingAssets?.length === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading, t0;
@@ -2067,9 +1947,9 @@
}), $[21] = t1, $[22] = t10, $[23] = t4, $[24] = t11) : t11 = $[24], t11;
}
function ResyncMetadataDialog(props) {
let $ = c(45), { resyncState } = props, t0;
- $[0] === props.matchedAssets ? t0 = $[1] : (t0 = props.matchedAssets?.filter(_temp$5).length || 0, $[0] = props.matchedAssets, $[1] = t0);
+ $[0] === props.matchedAssets ? t0 = $[1] : (t0 = props.matchedAssets?.filter(_temp$6).length || 0, $[0] = props.matchedAssets, $[1] = t0);
let videosToUpdate = t0, t1;
$[2] === props.matchedAssets ? t1 = $[3] : (t1 = props.matchedAssets?.filter(_temp2$4).length || 0, $[2] = props.matchedAssets, $[3] = t1);
let videosWithEmptyOrPlaceholder = t1, hasEmptyTitles = videosWithEmptyOrPlaceholder > 0, [selectedOption, setSelectedOption] = useState(hasEmptyTitles ? "fillEmpty" : "syncTitles"), canTriggerResync = resyncState === "idle" || resyncState === "error", isResyncing = resyncState === "syncing", isDone = resyncState === "done", isLoading = props.muxAssets.loading || props.sanityAssetsLoading, t2;
$[4] !== props || $[5] !== selectedOption ? (t2 = () => {
@@ -2303,9 +2183,9 @@
}
function _temp2$4(m_0) {
return m_0.muxAsset && m_0.muxTitle && isEmptyOrPlaceholderTitle(m_0.currentTitle, m_0.muxAsset.id);
}
-function _temp$5(m) {
+function _temp$6(m) {
return m.muxAsset;
}
function ResyncMetadata() {
let $ = c(4), resyncMetadata = useResyncMuxMetadata();
@@ -2462,10 +2342,10 @@
data: addKeysToMuxData(data)
}).commit({ returnDocuments: !1 });
}, [asset._id, client]), refresh = useCallback(async () => {
if (!asset.assetId || !asset._id) return;
- let { data: data_0 } = await getAsset(client, asset.assetId);
- return await persist(data_0), data_0;
+ let { data } = await getAsset(client, asset.assetId);
+ return await persist(data), data;
}, [
asset.assetId,
asset._id,
client,
@@ -2476,11 +2356,11 @@
let cancelled = !1, running = !1, interval = setInterval(async () => {
if (!running) {
running = !0;
try {
- let data_1 = await refresh();
+ let data = await refresh();
if (cancelled) return;
- (!data_1 || data_1.master?.status !== "preparing") && clearInterval(interval);
+ (!data || data.master?.status !== "preparing") && clearInterval(interval);
} catch (error) {
console.error("Failed to poll mezzanine status:", error);
} finally {
running = !1;
@@ -2503,15 +2383,15 @@
enable: useCallback(async () => {
if (!(!asset.assetId || !asset._id)) {
setBusy(!0), setExpired(!1);
try {
- let { data: data_2 } = await updateMasterAccess(client, asset.assetId, "temporary");
- await persist(data_2);
- } catch (error_0) {
+ let { data } = await updateMasterAccess(client, asset.assetId, "temporary");
+ await persist(data);
+ } catch (error) {
toast.push({
status: "error",
title: "Could not enable the mezzanine file",
- description: error_0 instanceof Error ? error_0.message : "Please try again"
+ description: error instanceof Error ? error.message : "Please try again"
});
} finally {
setBusy(!1);
}
@@ -2526,15 +2406,15 @@
download: useCallback(async () => {
if (asset.assetId) {
setBusy(!0);
try {
- let data_3 = await refresh(), url = data_3?.master?.status === "ready" ? data_3.master.url : void 0;
+ let data = await refresh(), url = data?.master?.status === "ready" ? data.master.url : void 0;
url ? (setExpired(!1), triggerMezzanineDownload(url)) : setExpired(!0);
- } catch (error_1) {
+ } catch (error) {
toast.push({
status: "error",
title: "Could not download the mezzanine file",
- description: error_1 instanceof Error ? error_1.message : "Please try again"
+ description: error instanceof Error ? error.message : "Please try again"
});
} finally {
setBusy(!1);
}
@@ -2696,57 +2576,55 @@
})
}), $[28] = t10, $[29] = t11, $[30] = t12, $[31] = t7, $[32] = t8, $[33] = t9, $[34] = t13) : t13 = $[34], t13;
}
function useResyncAsset(options) {
- let client = useClient$1(), toast = useToast(), [resyncState, setResyncState] = useState("idle"), [resyncError, setResyncError] = useState(null), showToast = options?.showToast ?? !1;
- return {
+ let $ = c(10), client = useClient$1(), toast = useToast(), [resyncState, setResyncState] = useState("idle"), [resyncError, setResyncError] = useState(null), showToast = options?.showToast ?? !1, t0;
+ $[0] !== client || $[1] !== options || $[2] !== showToast || $[3] !== toast ? (t0 = async (asset) => {
+ if (!asset.assetId) {
+ showToast && toast.push({
+ title: "Cannot resync",
+ description: "Asset has no Mux ID",
+ status: "error"
+ }), options?.onError?.(/* @__PURE__ */ Error("Asset has no Mux ID"));
+ return;
+ }
+ if (!asset._id) {
+ showToast && toast.push({
+ title: "Cannot resync",
+ description: "Asset has no document ID",
+ status: "error"
+ }), options?.onError?.(/* @__PURE__ */ Error("Asset has no document ID"));
+ return;
+ }
+ setResyncState("syncing"), setResyncError(null);
+ try {
+ let muxData = (await getAsset(client, asset.assetId)).data, dataWithKeys = addKeysToMuxData(muxData);
+ return await client.patch(asset._id).set({
+ status: muxData.status,
+ data: dataWithKeys,
+ ...muxData.meta?.title && { filename: muxData.meta.title }
+ }).commit({ returnDocuments: !1 }), setResyncState("success"), showToast && toast.push({
+ title: "Asset synced",
+ description: "Data has been updated from Mux",
+ status: "success"
+ }), options?.onSuccess?.(muxData), muxData;
+ } catch (t1) {
+ let error = t1;
+ setResyncState("error"), setResyncError(error), console.error("Failed to refresh asset data:", error), showToast && toast.push({
+ title: "Sync failed",
+ description: "Could not sync asset from Mux",
+ status: "error"
+ }), options?.onError?.(error);
+ return;
+ }
+ }, $[0] = client, $[1] = options, $[2] = showToast, $[3] = toast, $[4] = t0) : t0 = $[4];
+ let resyncAsset = t0, t1 = resyncState === "syncing", t2;
+ return $[5] !== resyncAsset || $[6] !== resyncError || $[7] !== resyncState || $[8] !== t1 ? (t2 = {
resyncState,
resyncError,
- resyncAsset: useCallback(async (asset) => {
- if (!asset.assetId) {
- showToast && toast.push({
- title: "Cannot resync",
- description: "Asset has no Mux ID",
- status: "error"
- }), options?.onError?.(/* @__PURE__ */ Error("Asset has no Mux ID"));
- return;
- }
- if (!asset._id) {
- showToast && toast.push({
- title: "Cannot resync",
- description: "Asset has no document ID",
- status: "error"
- }), options?.onError?.(/* @__PURE__ */ Error("Asset has no document ID"));
- return;
- }
- setResyncState("syncing"), setResyncError(null);
- try {
- let muxData = (await getAsset(client, asset.assetId)).data, dataWithKeys = addKeysToMuxData(muxData);
- return await client.patch(asset._id).set({
- status: muxData.status,
- data: dataWithKeys,
- ...muxData.meta?.title && { filename: muxData.meta.title }
- }).commit({ returnDocuments: !1 }), setResyncState("success"), showToast && toast.push({
- title: "Asset synced",
- description: "Data has been updated from Mux",
- status: "success"
- }), options?.onSuccess?.(muxData), muxData;
- } catch (error) {
- setResyncState("error"), setResyncError(error), console.error("Failed to refresh asset data:", error), showToast && toast.push({
- title: "Sync failed",
- description: "Could not sync asset from Mux",
- status: "error"
- }), options?.onError?.(error);
- return;
- }
- }, [
- client,
- toast,
- options,
- showToast
- ]),
- isResyncing: resyncState === "syncing"
- };
+ resyncAsset,
+ isResyncing: t1
+ }, $[5] = resyncAsset, $[6] = resyncError, $[7] = resyncState, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
}
function extractErrorMessage(error, defaultMessage = "Failed to process request") {
let message = "";
if (error && typeof error == "object") {
@@ -2828,8 +2706,127 @@
if (!response.ok) throw Error(`Failed to download file: ${response.statusText}`);
let blob = await response.blob(), blobUrl = URL.createObjectURL(blob), link = document.createElement("a");
link.href = blobUrl, link.download = `${asset.filename || "captions"}-${track.language_code || "en"}.vtt`, document.body.appendChild(link), link.click(), document.body.removeChild(link), URL.revokeObjectURL(blobUrl);
}
+const SUPPORTED_MUX_LANGUAGES = [
+ {
+ label: "English",
+ code: "en",
+ state: "Stable"
+ },
+ {
+ label: "Spanish",
+ code: "es",
+ state: "Stable"
+ },
+ {
+ label: "Italian",
+ code: "it",
+ state: "Stable"
+ },
+ {
+ label: "Portuguese",
+ code: "pt",
+ state: "Stable"
+ },
+ {
+ label: "German",
+ code: "de",
+ state: "Stable"
+ },
+ {
+ label: "French",
+ code: "fr",
+ state: "Stable"
+ },
+ {
+ label: "Polish",
+ code: "pl",
+ state: "Beta"
+ },
+ {
+ label: "Russian",
+ code: "ru",
+ state: "Beta"
+ },
+ {
+ label: "Dutch",
+ code: "nl",
+ state: "Beta"
+ },
+ {
+ label: "Catalan",
+ code: "ca",
+ state: "Beta"
+ },
+ {
+ label: "Turkish",
+ code: "tr",
+ state: "Beta"
+ },
+ {
+ label: "Swedish",
+ code: "sv",
+ state: "Beta"
+ },
+ {
+ label: "Ukrainian",
+ code: "uk",
+ state: "Beta"
+ },
+ {
+ label: "Norwegian",
+ code: "no",
+ state: "Beta"
+ },
+ {
+ label: "Finnish",
+ code: "fi",
+ state: "Beta"
+ },
+ {
+ label: "Slovak",
+ code: "sk",
+ state: "Beta"
+ },
+ {
+ label: "Greek",
+ code: "el",
+ state: "Beta"
+ },
+ {
+ label: "Czech",
+ code: "cs",
+ state: "Beta"
+ },
+ {
+ label: "Croatian",
+ code: "hr",
+ state: "Beta"
+ },
+ {
+ label: "Danish",
+ code: "da",
+ state: "Beta"
+ },
+ {
+ label: "Romanian",
+ code: "ro",
+ state: "Beta"
+ },
+ {
+ label: "Bulgarian",
+ code: "bg",
+ state: "Beta"
+ }
+];
+SUPPORTED_MUX_LANGUAGES.map((l) => l.code);
+function isCustomTextTrack(track) {
+ return track.type !== "autogenerated";
+}
+function isAutogeneratedTrack(track) {
+ return track.type === "autogenerated";
+}
const LANGUAGE_OPTIONS$1 = LanguagesList.getAllCodes().map((code) => ({
value: code,
label: LanguagesList.getNativeName(code)
})), MUX_LANGUAGE_OPTIONS = SUPPORTED_MUX_LANGUAGES.map((lang) => ({
@@ -2902,9 +2899,9 @@
}), onAdd(result.track), onClose();
}
}, handleGenerateSubtitles = async () => {
if (!asset.assetId) throw Error("Asset ID is required");
- let audioTrack = (await getAsset(client, asset.assetId)).data.tracks?.find((track_0) => track_0.type === "audio");
+ let audioTrack = (await getAsset(client, asset.assetId)).data.tracks?.find((track) => track.type === "audio");
if (!audioTrack || !audioTrack.id) throw toast.push({
title: "No audio track found",
status: "error",
description: "The asset does not have an audio track. Auto-generated subtitles require an audio track."
@@ -3038,10 +3035,10 @@
ref: fileInputRef,
type: "file",
accept: ".vtt,text/vtt,.srt,application/x-subrip",
style: { display: "none" },
- onChange: (e_0) => {
- e_0.target.files && e_0.target.files.length > 0 && !isSubmitting && (setSelectedFile(e_0.target.files[0]), setVttUrl(""));
+ onChange: (e) => {
+ e.target.files && e.target.files.length > 0 && !isSubmitting && (setSelectedFile(e.target.files[0]), setVttUrl(""));
}
})]
}),
/* @__PURE__ */ jsx(Text, {
@@ -3059,10 +3056,10 @@
}), /* @__PURE__ */ jsx(TextInput, {
id: "vtt-url",
placeholder: "https://example.com/subtitles.vtt",
value: vttUrl,
- onChange: (e_1) => {
- setVttUrl(e_1.currentTarget.value), setSelectedFile(null);
+ onChange: (e) => {
+ setVttUrl(e.currentTarget.value), setSelectedFile(null);
},
disabled: isSubmitting
})]
})
@@ -3087,20 +3084,20 @@
placeholder: "Select language",
filterOption: (query, option) => option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 || option.value.toLowerCase().indexOf(query.toLowerCase()) > -1,
openButton: !0,
renderValue: (value) => (isAutogenerated ? MUX_LANGUAGE_OPTIONS : LANGUAGE_OPTIONS$1).find((l) => l.value === value)?.label || value,
- renderOption: (option_0) => /* @__PURE__ */ jsx(Card, {
+ renderOption: (option) => /* @__PURE__ */ jsx(Card, {
"data-as": "button",
padding: 3,
radius: 2,
tone: "inherit",
children: /* @__PURE__ */ jsxs(Text, {
size: 2,
textOverflow: "ellipsis",
children: [
- option_0.label,
+ option.label,
" (",
- option_0.value,
+ option.value,
")"
]
})
}),
@@ -3116,10 +3113,10 @@
}), /* @__PURE__ */ jsx(TextInput, {
id: "caption-language",
placeholder: "en-US",
value: languageCode,
- onChange: (e_2) => {
- setLanguageCode(e_2.currentTarget.value), selectedLanguage && selectedLanguage.value !== e_2.currentTarget.value && (setSelectedLanguage(null), (!name || name === selectedLanguage.label) && setName(""));
+ onChange: (e) => {
+ setLanguageCode(e.currentTarget.value), selectedLanguage && selectedLanguage.value !== e.currentTarget.value && (setSelectedLanguage(null), (!name || name === selectedLanguage.label) && setName(""));
},
disabled: isSubmitting
})]
}),
@@ -3159,17 +3156,17 @@
let client = useClient$1(), toast = useToast(), dialogId = `EditCaptionDialog${useId()}`, isAutogenerated = track.text_source === "generated_live" || track.text_source === "generated_live_final" || track.text_source === "generated_vod", [vttUrl, setVttUrl] = useState(""), [languageCode, setLanguageCode] = useState(track.language_code || ""), [selectedLanguage, setSelectedLanguage] = useState(() => {
let baseCode = track.language_code?.split("-")[0], found = LANGUAGE_OPTIONS.find((opt) => opt.value === track.language_code || opt.value === baseCode);
if (found) return found;
if (track.name) {
- let foundByName = LANGUAGE_OPTIONS.find((opt_0) => opt_0.label === track.name);
+ let foundByName = LANGUAGE_OPTIONS.find((opt) => opt.label === track.name);
if (foundByName) return foundByName;
}
return null;
}), [name, setName] = useState(track.name || ""), [isSubmitting, setIsSubmitting] = useState(!1), [downloading, setDownloading] = useState(!1), [selectedFile, setSelectedFile] = useState(null), fileInputRef = useRef(null);
useEffect(() => {
setLanguageCode(track.language_code || ""), setName(track.name || ""), setVttUrl("");
- let baseCode_0 = track.language_code?.split("-")[0], foundByCode = LANGUAGE_OPTIONS.find((opt_1) => opt_1.value === track.language_code || opt_1.value === baseCode_0), foundByName_0 = track.name ? LANGUAGE_OPTIONS.find((opt_2) => opt_2.label === track.name) : null;
- setSelectedLanguage(foundByCode || foundByName_0 || null);
+ let baseCode = track.language_code?.split("-")[0], foundByCode = LANGUAGE_OPTIONS.find((opt) => opt.value === track.language_code || opt.value === baseCode), foundByName = track.name ? LANGUAGE_OPTIONS.find((opt) => opt.label === track.name) : null;
+ setSelectedLanguage(foundByCode || foundByName || null);
}, [
track,
asset,
client
@@ -3225,26 +3222,26 @@
language_code: trimmedLanguageCode,
name: trimmedName,
text_type: "subtitles"
});
- } catch (error_0) {
+ } catch (error) {
throw toast.push({
title: "Failed to update caption track",
status: "error",
- description: extractErrorMessage(error_0, "Failed to update caption track")
- }), setIsSubmitting(!1), error_0;
+ description: extractErrorMessage(error, "Failed to update caption track")
+ }), setIsSubmitting(!1), error;
}
let result = await pollTrackStatus({
client,
assetId: asset.assetId,
trackName: trimmedName,
trackLanguageCode: trimmedLanguageCode,
onTrackErrored: async (erroredTrack) => {
- let errorMessage_0 = erroredTrack.error?.messages?.[0] || erroredTrack.error?.type || "The track failed to download from the provided URL";
+ let errorMessage = erroredTrack.error?.messages?.[0] || erroredTrack.error?.type || "The track failed to download from the provided URL";
toast.push({
title: "Caption track failed",
status: "error",
- description: errorMessage_0
+ description: errorMessage
}), await refreshAssetData(), onUpdate(erroredTrack, oldTrackId), setIsSubmitting(!1);
}
});
if (!result.found || !result.track) {
@@ -3324,13 +3321,13 @@
}
await handleUpdateTrackWithNewUrl();
}
onClose();
- } catch (error_1) {
+ } catch (error) {
toast.push({
title: "Failed to update caption track",
status: "error",
- description: error_1 instanceof Error ? error_1.message : "Please try again"
+ description: error instanceof Error ? error.message : "Please try again"
});
} finally {
setIsSubmitting(!1);
}
@@ -3413,10 +3410,10 @@
/* @__PURE__ */ jsx(TextInput, {
id: "vtt-url",
placeholder: "https://example.com/subtitles.vtt",
value: vttUrl,
- onChange: (e_0) => {
- setVttUrl(e_0.currentTarget.value), setSelectedFile(null);
+ onChange: (e) => {
+ setVttUrl(e.currentTarget.value), setSelectedFile(null);
},
disabled: isSubmitting
}),
/* @__PURE__ */ jsx(Text, {
@@ -3436,29 +3433,29 @@
}), /* @__PURE__ */ jsx(Autocomplete, {
id: "caption-name",
value: selectedLanguage?.value || "",
onChange: (newValue) => {
- let selected = LANGUAGE_OPTIONS.find((opt_3) => opt_3.value === newValue);
+ let selected = LANGUAGE_OPTIONS.find((opt) => opt.value === newValue);
selected && (setSelectedLanguage(selected), setLanguageCode(selected.value), setName(selected.label));
},
options: LANGUAGE_OPTIONS,
icon: TranslateIcon,
placeholder: "Select language",
filterOption: (query, option) => option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 || option.value.toLowerCase().indexOf(query.toLowerCase()) > -1,
openButton: !0,
renderValue: (value) => LANGUAGE_OPTIONS.find((l) => l.value === value)?.label || value,
- renderOption: (option_0) => /* @__PURE__ */ jsx(Card, {
+ renderOption: (option) => /* @__PURE__ */ jsx(Card, {
"data-as": "button",
padding: 3,
radius: 2,
tone: "inherit",
children: /* @__PURE__ */ jsxs(Text, {
size: 2,
textOverflow: "ellipsis",
children: [
- option_0.label,
+ option.label,
" (",
- option_0.value,
+ option.value,
")"
]
})
}),
@@ -3474,10 +3471,10 @@
}), /* @__PURE__ */ jsx(TextInput, {
id: "caption-language",
placeholder: "en-US",
value: languageCode,
- onChange: (e_1) => {
- setLanguageCode(e_1.currentTarget.value), selectedLanguage && selectedLanguage.value !== e_1.currentTarget.value && (setSelectedLanguage(null), (!name || name === selectedLanguage.label) && setName(""));
+ onChange: (e) => {
+ setLanguageCode(e.currentTarget.value), selectedLanguage && selectedLanguage.value !== e.currentTarget.value && (setSelectedLanguage(null), (!name || name === selectedLanguage.label) && setName(""));
},
disabled: isSubmitting
})]
}),
@@ -3653,74 +3650,74 @@
children: t14
}), $[41] = t14, $[42] = t3, $[43] = t15) : t15 = $[43], t15;
}
function TextTracksManager({ asset, iconOnly = !1, tracks: propTracks, collapseTracks = !1 }) {
- let client = useClient$1(), toast = useToast(), dialogId = `DeleteCaptionDialog${useId()}`, { resyncAsset } = useResyncAsset(), [downloadingTrackId, setDownloadingTrackId] = useState(null), [deletingTrackId, setDeletingTrackId] = useState(null), [addedTracks, setAddedTracks] = useState([]), [updatedTracks, setUpdatedTracks] = useState(/* @__PURE__ */ new Map()), [trackActivityOrder, setTrackActivityOrder] = useState(/* @__PURE__ */ new Map()), [autogeneratedTrackIds, setAutogeneratedTrackIds] = useState(/* @__PURE__ */ new Set()), [trackToDelete, setTrackToDelete] = useState(null), [trackToEdit, setTrackToEdit] = useState(null), [showAddDialog, setShowAddDialog] = useState(!1), [isExpanded, setIsExpanded] = useState(!1), activeTracks = (propTracks || asset.data?.tracks?.filter((track) => track.type === "text") || []).filter((track_0) => track_0.id && (track_0.status === "ready" || track_0.status === "preparing" || track_0.status === "errored")), allTracks = useMemo(() => {
- let tracksWithUpdates = activeTracks.map((track_1) => updatedTracks.get(track_1.id) || track_1), isMockTrackReplaced = (mockTrack, realTracksList) => !mockTrack.id || !mockTrack.id.startsWith("generating-") ? !1 : realTracksList.some((realTrack) => {
+ let client = useClient$1(), toast = useToast(), dialogId = `DeleteCaptionDialog${useId()}`, { resyncAsset } = useResyncAsset(), [downloadingTrackId, setDownloadingTrackId] = useState(null), [deletingTrackId, setDeletingTrackId] = useState(null), [addedTracks, setAddedTracks] = useState([]), [updatedTracks, setUpdatedTracks] = useState(/* @__PURE__ */ new Map()), [trackActivityOrder, setTrackActivityOrder] = useState(/* @__PURE__ */ new Map()), [autogeneratedTrackIds, setAutogeneratedTrackIds] = useState(/* @__PURE__ */ new Set()), [trackToDelete, setTrackToDelete] = useState(null), [trackToEdit, setTrackToEdit] = useState(null), [showAddDialog, setShowAddDialog] = useState(!1), [isExpanded, setIsExpanded] = useState(!1), activeTracks = (propTracks || asset.data?.tracks?.filter((track) => track.type === "text") || []).filter((track) => track.id && (track.status === "ready" || track.status === "preparing" || track.status === "errored")), allTracks = useMemo(() => {
+ let tracksWithUpdates = activeTracks.map((track) => updatedTracks.get(track.id) || track), isMockTrackReplaced = (mockTrack, realTracksList) => !mockTrack.id || !mockTrack.id.startsWith("generating-") ? !1 : realTracksList.some((realTrack) => {
let nameMatches = realTrack.name === mockTrack.name, languageMatches = realTrack.language_code === mockTrack.language_code;
return !nameMatches || !languageMatches ? !1 : realTrack.status === "ready" ? realTrack.text_source === "generated_live" || realTrack.text_source === "generated_live_final" || realTrack.text_source === "generated_vod" : realTrack.status === "preparing";
- }), isTrackAlreadyInRealTracks = (addedTrack, realTracksList_0) => addedTrack.id ? addedTrack.id.startsWith("generating-") ? isMockTrackReplaced(addedTrack, realTracksList_0) : realTracksList_0.some((realTrack_0) => realTrack_0.id === addedTrack.id) : !1, tracksToKeep = addedTracks.filter((addedTrack_0) => addedTrack_0.id && addedTrack_0.id.startsWith("generating-") ? !isMockTrackReplaced(addedTrack_0, tracksWithUpdates) : !isTrackAlreadyInRealTracks(addedTrack_0, tracksWithUpdates));
+ }), isTrackAlreadyInRealTracks = (addedTrack, realTracksList) => addedTrack.id ? addedTrack.id.startsWith("generating-") ? isMockTrackReplaced(addedTrack, realTracksList) : realTracksList.some((realTrack) => realTrack.id === addedTrack.id) : !1, tracksToKeep = addedTracks.filter((addedTrack) => addedTrack.id && addedTrack.id.startsWith("generating-") ? !isMockTrackReplaced(addedTrack, tracksWithUpdates) : !isTrackAlreadyInRealTracks(addedTrack, tracksWithUpdates));
return [...tracksWithUpdates, ...tracksToKeep];
}, [
activeTracks,
addedTracks,
updatedTracks
]);
useEffect(() => {
let newAutogeneratedIds = /* @__PURE__ */ new Set();
- activeTracks.forEach((track_2) => {
- track_2.id && (track_2.text_source === "generated_live" || track_2.text_source === "generated_live_final" || track_2.text_source === "generated_vod") && newAutogeneratedIds.add(track_2.id);
- }), addedTracks.forEach((mockTrack_0) => {
- if (mockTrack_0.id && mockTrack_0.id.startsWith("generating-")) {
- let realTrack_1 = activeTracks.find((rt) => {
- let nameMatches_0 = rt.name === mockTrack_0.name, languageMatches_0 = rt.language_code === mockTrack_0.language_code;
- return nameMatches_0 && languageMatches_0;
+ activeTracks.forEach((track) => {
+ track.id && (track.text_source === "generated_live" || track.text_source === "generated_live_final" || track.text_source === "generated_vod") && newAutogeneratedIds.add(track.id);
+ }), addedTracks.forEach((mockTrack) => {
+ if (mockTrack.id && mockTrack.id.startsWith("generating-")) {
+ let realTrack = activeTracks.find((rt) => {
+ let nameMatches = rt.name === mockTrack.name, languageMatches = rt.language_code === mockTrack.language_code;
+ return nameMatches && languageMatches;
});
- realTrack_1?.id && newAutogeneratedIds.add(realTrack_1.id);
+ realTrack?.id && newAutogeneratedIds.add(realTrack.id);
}
}), setAutogeneratedTrackIds((prev) => {
- let hasNew = !1, updated_0 = new Set(prev);
+ let hasNew = !1, updated = new Set(prev);
return newAutogeneratedIds.forEach((id) => {
- prev.has(id) || (updated_0.add(id), hasNew = !0);
- }), hasNew ? updated_0 : prev;
+ prev.has(id) || (updated.add(id), hasNew = !0);
+ }), hasNew ? updated : prev;
});
}, [activeTracks, addedTracks]), useEffect(() => {
- if (allTracks.filter((track_3) => track_3.status === "preparing").length === 0 || !asset.assetId || !asset._id) return;
+ if (allTracks.filter((track) => track.status === "preparing").length === 0 || !asset.assetId || !asset._id) return;
let interval = setInterval(async () => {
try {
let muxData = await resyncAsset(asset);
if (!muxData) return;
- let fetchedTracks = muxData.tracks?.filter((track_4) => track_4.type === "text") || [], isMockTrackReplaced_0 = (mockTrack_1, fetchedTracksList) => !mockTrack_1.id || !mockTrack_1.id.startsWith("generating-") ? !1 : fetchedTracksList.some((realTrack_2) => {
- let nameMatches_1 = realTrack_2.name === mockTrack_1.name, languageMatches_1 = realTrack_2.language_code === mockTrack_1.language_code;
- return !nameMatches_1 || !languageMatches_1 ? !1 : realTrack_2.status === "ready" ? realTrack_2.text_source === "generated_live" || realTrack_2.text_source === "generated_live_final" || realTrack_2.text_source === "generated_vod" : realTrack_2.status === "preparing";
- }), newAutogeneratedIds_0 = /* @__PURE__ */ new Set();
- fetchedTracks.forEach((track_5) => {
- track_5.id && (track_5.text_source === "generated_live" || track_5.text_source === "generated_live_final" || track_5.text_source === "generated_vod") && newAutogeneratedIds_0.add(track_5.id);
+ let fetchedTracks = muxData.tracks?.filter((track) => track.type === "text") || [], isMockTrackReplaced = (mockTrack, fetchedTracksList) => !mockTrack.id || !mockTrack.id.startsWith("generating-") ? !1 : fetchedTracksList.some((realTrack) => {
+ let nameMatches = realTrack.name === mockTrack.name, languageMatches = realTrack.language_code === mockTrack.language_code;
+ return !nameMatches || !languageMatches ? !1 : realTrack.status === "ready" ? realTrack.text_source === "generated_live" || realTrack.text_source === "generated_live_final" || realTrack.text_source === "generated_vod" : realTrack.status === "preparing";
+ }), newAutogeneratedIds = /* @__PURE__ */ new Set();
+ fetchedTracks.forEach((track) => {
+ track.id && (track.text_source === "generated_live" || track.text_source === "generated_live_final" || track.text_source === "generated_vod") && newAutogeneratedIds.add(track.id);
});
- let findMatchingRealTrack = (mockTrack_2, tracksList) => tracksList.find((rt_0) => {
- let nameMatches_2 = rt_0.name === mockTrack_2.name, languageMatches_2 = rt_0.language_code === mockTrack_2.language_code;
- return nameMatches_2 && languageMatches_2;
+ let findMatchingRealTrack = (mockTrack, tracksList) => tracksList.find((rt) => {
+ let nameMatches = rt.name === mockTrack.name, languageMatches = rt.language_code === mockTrack.language_code;
+ return nameMatches && languageMatches;
});
- setAddedTracks((prev_0) => prev_0.filter((mockTrack_3) => {
- if (mockTrack_3.id && mockTrack_3.id.startsWith("generating-")) {
- let replaced = isMockTrackReplaced_0(mockTrack_3, fetchedTracks);
+ setAddedTracks((prev) => prev.filter((mockTrack) => {
+ if (mockTrack.id && mockTrack.id.startsWith("generating-")) {
+ let replaced = isMockTrackReplaced(mockTrack, fetchedTracks);
if (replaced) {
- let realTrack_3 = findMatchingRealTrack(mockTrack_3, fetchedTracks);
- realTrack_3?.id && (newAutogeneratedIds_0.add(realTrack_3.id), setTrackActivityOrder((prevOrder) => {
- let mockOrder = prevOrder.get(mockTrack_3.id);
+ let realTrack = findMatchingRealTrack(mockTrack, fetchedTracks);
+ realTrack?.id && (newAutogeneratedIds.add(realTrack.id), setTrackActivityOrder((prevOrder) => {
+ let mockOrder = prevOrder.get(mockTrack.id);
if (mockOrder) {
let newMap = new Map(prevOrder);
- return newMap.set(realTrack_3.id, mockOrder), newMap;
+ return newMap.set(realTrack.id, mockOrder), newMap;
}
return prevOrder;
}));
}
return !replaced;
}
return !0;
- })), newAutogeneratedIds_0.size > 0 && setAutogeneratedTrackIds((prevIds) => {
- let updated_1 = new Set(prevIds);
- return newAutogeneratedIds_0.forEach((id_0) => updated_1.add(id_0)), updated_1;
+ })), newAutogeneratedIds.size > 0 && setAutogeneratedTrackIds((prevIds) => {
+ let updated = new Set(prevIds);
+ return newAutogeneratedIds.forEach((id) => updated.add(id)), updated;
});
} catch (error) {
console.error("Failed to refresh asset data:", error);
}
@@ -3730,9 +3727,9 @@
allTracks,
asset,
resyncAsset
]);
- let visibleTracks = allTracks.filter((track_6) => track_6.status === "ready" || track_6.status === "preparing" || track_6.status === "errored").sort((a, b) => {
+ let visibleTracks = allTracks.filter((track) => track.status === "ready" || track.status === "preparing" || track.status === "errored").sort((a, b) => {
let orderA = trackActivityOrder.get(a.id) || 0, orderB = trackActivityOrder.get(b.id) || 0;
if (orderA > 0 && orderB > 0) return orderB - orderA;
if (orderA > 0) return -1;
if (orderB > 0) return 1;
@@ -3740,74 +3737,74 @@
if (aIsPreparing && !bIsPreparing) return -1;
if (!aIsPreparing && bIsPreparing) return 1;
let aIsAutogenerated = a.id && a.id.startsWith("generating-") || a.id && autogeneratedTrackIds.has(a.id), bIsAutogenerated = b.id && b.id.startsWith("generating-") || b.id && autogeneratedTrackIds.has(b.id);
return aIsAutogenerated && !bIsAutogenerated ? -1 : !aIsAutogenerated && bIsAutogenerated ? 1 : 0;
- }), handleDownload = async (track_7) => {
- if (track_7.id) {
- setDownloadingTrackId(track_7.id);
+ }), handleDownload = async (track) => {
+ if (track.id) {
+ setDownloadingTrackId(track.id);
try {
- await downloadVttFile(client, asset, track_7);
- } catch (error_0) {
+ await downloadVttFile(client, asset, track);
+ } catch (error) {
toast.push({
title: "Failed to download VTT file",
status: "error",
- description: error_0 instanceof Error ? error_0.message : "Please try again"
+ description: error instanceof Error ? error.message : "Please try again"
});
} finally {
setDownloadingTrackId(null);
}
}
}, confirmDelete = async () => {
if (!trackToDelete || !trackToDelete.id) return;
- let track_8 = trackToDelete;
- setTrackToDelete(null), setDeletingTrackId(track_8.id);
+ let track = trackToDelete;
+ setTrackToDelete(null), setDeletingTrackId(track.id);
try {
if (!asset.assetId) throw Error("Asset ID is required");
- await deleteTextTrack(client, asset.assetId, track_8.id), await resyncAsset(asset), toast.push({
+ await deleteTextTrack(client, asset.assetId, track.id), await resyncAsset(asset), toast.push({
title: "Successfully deleted caption track",
status: "success"
- }), setAddedTracks((prev_1) => prev_1.filter((t) => t.id !== track_8.id)), setUpdatedTracks((prev_2) => {
- let newMap_0 = new Map(prev_2);
- return newMap_0.delete(track_8.id), newMap_0;
- }), setTrackActivityOrder((prev_3) => {
- let newMap_1 = new Map(prev_3);
- return newMap_1.delete(track_8.id), newMap_1;
- }), setAutogeneratedTrackIds((prev_4) => {
- let updated_2 = new Set(prev_4);
- return updated_2.delete(track_8.id), updated_2;
+ }), setAddedTracks((prev) => prev.filter((t) => t.id !== track.id)), setUpdatedTracks((prev) => {
+ let newMap = new Map(prev);
+ return newMap.delete(track.id), newMap;
+ }), setTrackActivityOrder((prev) => {
+ let newMap = new Map(prev);
+ return newMap.delete(track.id), newMap;
+ }), setAutogeneratedTrackIds((prev) => {
+ let updated = new Set(prev);
+ return updated.delete(track.id), updated;
});
- } catch (error_1) {
+ } catch (error) {
toast.push({
title: "Failed to delete caption track",
status: "error",
- description: error_1 instanceof Error ? error_1.message : "Please try again"
+ description: error instanceof Error ? error.message : "Please try again"
});
} finally {
setDeletingTrackId(null);
}
- }, handleAddTrack = (track_9) => {
- setAddedTracks((prev_5) => [...prev_5, track_9]), setTrackActivityOrder((prev_6) => {
- let newMap_2 = new Map(prev_6);
- return newMap_2.set(track_9.id, prev_6.size + 1), newMap_2;
+ }, handleAddTrack = (track) => {
+ setAddedTracks((prev) => [...prev, track]), setTrackActivityOrder((prev) => {
+ let newMap = new Map(prev);
+ return newMap.set(track.id, prev.size + 1), newMap;
}), setShowAddDialog(!1);
}, handleUpdateTrack = async (updatedTrack, oldTrackId) => {
- oldTrackId && (setAddedTracks((prev_7) => prev_7.filter((t_0) => t_0.id !== oldTrackId)), setUpdatedTracks((prev_8) => {
- let newMap_3 = new Map(prev_8);
- return newMap_3.delete(oldTrackId), newMap_3;
- }), setTrackActivityOrder((prev_9) => {
- let newMap_4 = new Map(prev_9);
- return newMap_4.delete(oldTrackId), newMap_4;
- }), setAutogeneratedTrackIds((prev_10) => {
- let updated_3 = new Set(prev_10);
- return updated_3.delete(oldTrackId), updated_3;
- })), addedTracks.some((t_1) => t_1.id === updatedTrack.id) ? setAddedTracks((prev_11) => prev_11.map((t_2) => t_2.id === updatedTrack.id ? updatedTrack : t_2)) : setUpdatedTracks((prev_12) => {
- let newMap_5 = new Map(prev_12);
- return newMap_5.set(updatedTrack.id, updatedTrack), newMap_5;
- }), setTrackActivityOrder((prev_13) => {
- let newMap_6 = new Map(prev_13);
- return newMap_6.set(updatedTrack.id, prev_13.size + 1), newMap_6;
+ oldTrackId && (setAddedTracks((prev) => prev.filter((t) => t.id !== oldTrackId)), setUpdatedTracks((prev) => {
+ let newMap = new Map(prev);
+ return newMap.delete(oldTrackId), newMap;
+ }), setTrackActivityOrder((prev) => {
+ let newMap = new Map(prev);
+ return newMap.delete(oldTrackId), newMap;
+ }), setAutogeneratedTrackIds((prev) => {
+ let updated = new Set(prev);
+ return updated.delete(oldTrackId), updated;
+ })), addedTracks.some((t) => t.id === updatedTrack.id) ? setAddedTracks((prev) => prev.map((t) => t.id === updatedTrack.id ? updatedTrack : t)) : setUpdatedTracks((prev) => {
+ let newMap = new Map(prev);
+ return newMap.set(updatedTrack.id, updatedTrack), newMap;
+ }), setTrackActivityOrder((prev) => {
+ let newMap = new Map(prev);
+ return newMap.set(updatedTrack.id, prev.size + 1), newMap;
}), setTrackToEdit(null), await resyncAsset(asset);
- }, getTrackSourceLabel = (track_10) => track_10.id && track_10.id.startsWith("generating-") || track_10.id && autogeneratedTrackIds.has(track_10.id) || track_10.text_source === "generated_live_final" || track_10.text_source === "generated_live" || track_10.text_source === "generated_vod" ? "Auto-generated" : track_10.text_source === "uploaded" ? "Uploaded" : "Custom";
+ }, getTrackSourceLabel = (track) => track.id && track.id.startsWith("generating-") || track.id && autogeneratedTrackIds.has(track.id) || track.text_source === "generated_live_final" || track.text_source === "generated_live" || track.text_source === "generated_vod" ? "Auto-generated" : track.text_source === "uploaded" ? "Uploaded" : "Custom";
if (visibleTracks.length === 0 && !showAddDialog) return /* @__PURE__ */ jsxs(Stack, {
gap: 3,
children: [
/* @__PURE__ */ jsx(Flex, {
@@ -3849,19 +3846,19 @@
tone: "primary",
onClick: () => setShowAddDialog(!0)
})
}),
- displayedTracks.map((track_11) => /* @__PURE__ */ jsx(TrackCard, {
- track: track_11,
+ displayedTracks.map((track) => /* @__PURE__ */ jsx(TrackCard, {
+ track,
iconOnly,
downloadingTrackId,
deletingTrackId,
trackToEdit,
getTrackSourceLabel,
handleDownload,
setTrackToEdit,
setTrackToDelete
- }, track_11.id)),
+ }, track.id)),
hasMoreTracks && /* @__PURE__ */ jsx(Flex, {
justify: "center",
children: /* @__PURE__ */ jsx(Button, {
icon: isExpanded ? ChevronUpIcon : ChevronDownIcon,
@@ -4185,10 +4182,10 @@
}, [asset, playbackId]), src = useMemo(() => {
if (playbackId && muxPlaybackId) return tryWithSuspend(() => getVideoSrc({
muxPlaybackId,
client
- }), (e_0) => {
- setError(e_0);
+ }), (e) => {
+ setError(e);
});
}, [
muxPlaybackId,
playbackId,
@@ -4196,10 +4193,10 @@
]), poster = useMemo(() => tryWithSuspend(() => getPosterSrc({
asset,
client,
width: thumbnailWidth
- }), (e_1) => {
- setError(e_1);
+ }), (e) => {
+ setError(e);
}), [
asset,
client,
thumbnailWidth
@@ -4209,10 +4206,10 @@
} catch {
return;
}
}, [src]), drmToken = useMemo(() => {
- if (playbackId && muxPlaybackId?.policy === "drm") return tryWithSuspend(() => generateJwt(client, playbackId, "d"), (e_2) => {
- setError(e_2);
+ if (playbackId && muxPlaybackId?.policy === "drm") return tryWithSuspend(() => generateJwt(client, playbackId, "d"), (e) => {
+ setError(e);
});
}, [
client,
muxPlaybackId?.policy,
@@ -4263,9 +4260,9 @@
preload: "metadata",
crossOrigin: "anonymous",
metadata: {
player_name: "Sanity Admin Dashboard",
- player_version: "5.0.11",
+ player_version: "5.0.12",
page_type: "Preview Player"
},
audio: isAudio,
_hlsConfig: hlsConfig,
@@ -4462,11 +4459,11 @@
}), $[12] = children, $[13] = t1, $[14] = t2) : t2 = $[14], t2;
}
const Container = styled(Box).withConfig({
displayName: "Container",
- componentId: "sc-4a66e2-0"
+ componentId: "sc-sa7ue7-0"
})`*{color:${(props) => props.theme.sanity.color.base.fg};}a{text-decoration:none;}h2{font-size:${(props) => props.theme.sanity.fonts.text.sizes[1]};}`, VideoReferences = (props) => {
- let $ = c(9), schema = useSchema();
+ let $ = c(11), schema = useSchema();
if (!props.isLoaded) {
let t0;
return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(SpinnerBox, {}), $[0] = t0) : t0 = $[0], t0;
}
@@ -4483,9 +4480,11 @@
}), $[1] = t0) : t0 = $[1], t0;
}
let T0, t0;
if ($[2] !== props.references || $[3] !== schema) {
- let documentPairs = collate(props.references || []);
+ let t1;
+ $[6] === props.references ? t1 = $[7] : (t1 = props.references || [], $[6] = props.references, $[7] = t1);
+ let documentPairs = collate(t1);
T0 = Container, t0 = documentPairs?.map((documentPair) => {
let schemaType = schema.get(documentPair.type);
return /* @__PURE__ */ jsx(Card, {
marginBottom: 2,
@@ -4500,9 +4499,9 @@
}, documentPair.id);
}), $[2] = props.references, $[3] = schema, $[4] = T0, $[5] = t0;
} else T0 = $[4], t0 = $[5];
let t1;
- return $[6] !== T0 || $[7] !== t0 ? (t1 = /* @__PURE__ */ jsx(T0, { children: t0 }), $[6] = T0, $[7] = t0, $[8] = t1) : t1 = $[8], t1;
+ return $[8] !== T0 || $[9] !== t0 ? (t1 = /* @__PURE__ */ jsx(T0, { children: t0 }), $[8] = T0, $[9] = t0, $[10] = t1) : t1 = $[10], t1;
};
function DeleteDialog(t0) {
let $ = c(39), { asset, references, referencesLoading, cancelDelete, succeededDeleting } = t0, client = useClient$1(), [state, setState] = useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = useState(!0), toast = useToast(), t1;
$[0] !== references?.length || $[1] !== referencesLoading || $[2] !== state ? (t1 = () => {
@@ -4588,9 +4587,9 @@
align: "center",
as: "label",
children: [/* @__PURE__ */ jsx(Checkbox, {
checked: deleteOnMux,
- onChange: () => setDeleteOnMux(_temp$4)
+ onChange: () => setDeleteOnMux(_temp$5)
}), /* @__PURE__ */ jsx(Text, {
style: { margin: "0 10px" },
children: "Delete asset on Mux"
})]
@@ -4662,9 +4661,9 @@
position: "fixed",
children: t10
}), $[36] = cancelDelete, $[37] = t10, $[38] = t11) : t11 = $[38], t11;
}
-function _temp$4(prev) {
+function _temp$5(prev) {
return !prev;
}
const useDocReferences = createHookFromObservableFactory(({ documentStore, id }) => documentStore.listenQuery("*[references($id)]{_id, _type, _rev, _updatedAt, _createdAt}", { id }, { apiVersion: SANITY_API_VERSION }));
function getVideoMetadata(doc) {
@@ -4905,9 +4904,9 @@
$[39] !== displayInfo.text_tracks || $[40] !== props.asset || $[41] !== tab ? (t19 = tab === "details" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TextTracksManager, {
asset: props.asset,
iconOnly: !0,
collapseTracks: !0,
- tracks: displayInfo?.text_tracks || props.asset.data?.tracks?.filter(_temp$3) || []
+ tracks: displayInfo?.text_tracks || props.asset.data?.tracks?.filter(_temp$4) || []
}), /* @__PURE__ */ jsx(Mezzanine, { asset: props.asset })] }), $[39] = displayInfo.text_tracks, $[40] = props.asset, $[41] = tab, $[42] = t19) : t19 = $[42];
let t20;
$[43] !== t18 || $[44] !== t19 ? (t20 = /* @__PURE__ */ jsxs(Stack, {
gap: 4,
@@ -5101,9 +5100,9 @@
case "public": return "Public";
default: return policy;
}
};
-function _temp$3(track) {
+function _temp$4(track) {
return track.type === "text";
}
function _temp2$3(entry) {
return /* @__PURE__ */ jsx(IconInfo, {
@@ -5155,9 +5154,9 @@
children: [t5, t6]
}), $[15] = T1, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
}, PlayButton = styled.button.withConfig({
displayName: "PlayButton",
- componentId: "sc-7mtgdn-0"
+ componentId: "sc-w3whs4-0"
})`display:block;padding:0;margin:0;border:none;border-radius:0.1875rem;position:relative;cursor:pointer;&::after{content:'';background:var(--card-fg-color);opacity:0;display:block;position:absolute;inset:0;z-index:10;transition:0.15s ease-out;border-radius:inherit;}> div[data-play]{z-index:11;opacity:0;transition:0.15s 0.05s ease-out;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--card-fg-color);background:var(--card-bg-color);width:auto;height:30%;aspect-ratio:1;border-radius:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;> svg{display:block;width:70%;height:auto;transform:translateX(5%);}}&:hover,&:focus{&::after{opacity:0.3;}> div[data-play]{opacity:1;}}`;
function VideoInBrowser(t0) {
let $ = c(44), { onSelect, onEdit, asset } = t0, [renderVideo, setRenderVideo] = useState(!1), t1;
$[0] !== asset || $[1] !== onSelect ? (t1 = () => onSelect?.(asset), $[0] = asset, $[1] = onSelect, $[2] = t1) : t1 = $[2];
@@ -5488,18 +5487,27 @@
"status",
"thumbTime",
"filename"
], useAssetDocumentValues = (asset) => useDocumentValues(isReference(asset) ? asset._ref : "", path), useMuxPolling = (asset) => {
- let client = useClient$1(), projectId = useProjectId(), dataset = useDataset(), isPreparingStaticRenditions = useMemo(() => {
- if (asset?.data?.static_renditions?.status && asset?.data?.static_renditions?.status !== "disabled") return !1;
+ let $ = c(5), client = useClient$1(), projectId = useProjectId(), dataset = useDataset();
+ asset?.data?.static_renditions?.status, asset?.data?.static_renditions?.files;
+ let t0;
+ bb0: {
+ if (asset?.data?.static_renditions?.status && asset?.data?.static_renditions?.status !== "disabled") {
+ t0 = !1;
+ break bb0;
+ }
let files = asset?.data?.static_renditions?.files;
- return !files || files.length === 0 ? !1 : files.some((file) => file.status === "preparing");
- }, [asset?.data?.static_renditions?.status, asset?.data?.static_renditions?.files]), shouldFetch = useMemo(() => !!asset?.assetId && (asset?.status === "preparing" || isPreparingStaticRenditions), [
- asset?.assetId,
- asset?.status,
- isPreparingStaticRenditions
- ]), errorLoggedRef = useRef(!1);
- return useSWR(shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset?.assetId}` : null, async () => {
+ if (!files || files.length === 0) {
+ t0 = !1;
+ break bb0;
+ }
+ t0 = files.some(_temp$3);
+ }
+ let isPreparingStaticRenditions = t0;
+ asset?.assetId, asset?.status;
+ let shouldFetch = !!asset?.assetId && (asset?.status === "preparing" || isPreparingStaticRenditions), errorLoggedRef = useRef(!1), t1;
+ $[0] !== asset || $[1] !== client || $[2] !== dataset ? (t1 = async () => {
try {
let { data } = await client.request({
url: `/addons/mux/assets/${dataset}/data/${asset.assetId}`,
withCredentials: !0,
@@ -5510,21 +5518,27 @@
await client.patch(asset._id).set({
status: data.status,
data: addKeysToMuxData(data)
}).commit({ returnDocuments: !1 }), errorLoggedRef.current = !1;
- } catch (error) {
+ } catch (t2) {
+ let error = t2;
errorLoggedRef.current || (errorLoggedRef.current = !0, console.error("[sanity-plugin-mux-input] Mux polling failed", {
assetId: asset?.assetId,
documentId: asset?._id,
error
}));
}
- }, {
+ }, $[0] = asset, $[1] = client, $[2] = dataset, $[3] = t1) : t1 = $[3];
+ let t2;
+ return $[4] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
refreshInterval: 2e3,
refreshWhenHidden: !0,
dedupingInterval: 1e3
- });
+ }, $[4] = t2) : t2 = $[4], useSWR(shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset?.assetId}` : null, t1, t2);
};
+function _temp$3(file) {
+ return file.status === "preparing";
+}
function ErrorBoundaryCard(props) {
let $ = c(18), { children, schemaType } = props, { push: pushToast } = useToast(), errorRef = useRef(null), t0;
$[0] !== pushToast || $[1] !== schemaType ? (t0 = { onDidCatch: (err, errorInfo) => {
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?.componentStack && (console.groupCollapsed("errorInfo.componentStack"), console.log(errorInfo.componentStack), console.groupEnd()), console.groupEnd(), pushToast({
@@ -6051,9 +6065,9 @@
}
/** To prevent Content Layout Shift (CLS), ensure that the dialog always occupies the entire available height. */
const StyledDialog = styled(Dialog).withConfig({
displayName: "StyledDialog",
- componentId: "sc-6a1hl4-0"
+ componentId: "sc-4nckxm-0"
})`> div[data-ui='DialogCard'] > div[data-ui='Card']{height:100%;}`;
function InputBrowser(t0) {
let $ = c(11), { setDialogState, asset, onChange, config } = t0, id = `InputBrowser${useId()}`, t1;
$[0] === setDialogState ? t1 = $[1] : (t1 = () => setDialogState(!1), $[0] = setDialogState, $[1] = t1);
@@ -6080,21 +6094,21 @@
asset && (onChange(PatchEvent.from(unset())), asset.assetId && deleteAssetOnMux(client, asset.assetId), asset._id && client.delete(asset._id));
}, $[0] = asset, $[1] = client, $[2] = onChange, $[3] = t0) : t0 = $[3], t0;
}, TopControls = styled.div.withConfig({
displayName: "TopControls",
- componentId: "sc-ix0w8t-0"
+ componentId: "sc-plhubf-0"
})`position:absolute;top:0;right:0;justify-content:flex-end;button{height:auto;}`, CardWrapper = styled(Card).withConfig({
displayName: "CardWrapper",
- componentId: "sc-0u5d20-0"
+ componentId: "sc-i2lk64-0"
})`min-height:82px;box-sizing:border-box;`, FlexWrapper = styled(Flex).withConfig({
displayName: "FlexWrapper",
- componentId: "sc-0u5d20-1"
+ componentId: "sc-i2lk64-1"
})`text-overflow:ellipsis;overflow:hidden;`, LeftSection = styled(Stack).withConfig({
displayName: "LeftSection",
- componentId: "sc-0u5d20-2"
+ componentId: "sc-i2lk64-2"
})`position:relative;width:60%;`, CodeWrapper = styled(Code).withConfig({
displayName: "CodeWrapper",
- componentId: "sc-0u5d20-3"
+ componentId: "sc-i2lk64-3"
})`position:relative;width:100%;code{overflow:hidden;text-overflow:ellipsis;position:relative;max-width:200px;}`, UploadProgress = (t0) => {
let $ = c(18), { progress: t1, onCancel, filename, text: t2 } = t0, progress = t1 === void 0 ? 100 : t1, text = t2 === void 0 ? "Uploading" : t2, isCancelDisabled = progress >= 90, t3, t4;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [
3,
@@ -6213,9 +6227,9 @@
].filter(Boolean).join(",");
}
const FileButton = /* @__PURE__ */ styled(MenuItem).withConfig({
displayName: "FileButton",
- componentId: "sc-qw604b-0"
+ componentId: "sc-2fqg17-0"
})(({ theme }) => {
let { focusRing } = theme.sanity, base = theme.sanity.color.base;
return css`position:relative;&:not([data-disabled='true']){&:focus-within{box-shadow:${focusRingStyle({
base,
@@ -6276,12 +6290,12 @@
}), $[35] = content, $[36] = disabled, $[37] = id, $[38] = ref, $[39] = rest, $[40] = t5, $[41] = t6) : t6 = $[41], t6;
}
const LockCard = styled(Card).withConfig({
displayName: "LockCard",
- componentId: "sc-27tgc9-0"
+ componentId: "sc-m6gaov-0"
})`position:absolute;top:0;left:0;opacity:0.6;mix-blend-mode:screen;background:transparent;`, LockButton = styled(Button).withConfig({
displayName: "LockButton",
- componentId: "sc-27tgc9-1"
+ componentId: "sc-m6gaov-1"
})`background:transparent;color:white;`, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
function PlayerActionsMenu(props) {
let $ = c(54), { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = getPlaybackPolicy(asset)?.policy === "signed", { hasConfigAccess } = useAccessControl(props.config), t0;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = { showToast: !0 }, $[0] = t0) : t0 = $[0];
@@ -6431,10 +6445,10 @@
}), $[51] = t19, $[52] = t7, $[53] = t20) : t20 = $[53], t20;
}
var PlayerActionsMenu_default = memo(PlayerActionsMenu);
function useFetchFileSize(stagedUpload, maxFileSize) {
- let [fileSize, setFileSize] = useState(null), [isLoadingFileSize, setIsLoadingFileSize] = useState(!1), [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = useState(!1);
- return useEffect(() => {
+ let $ = c(12), [fileSize, setFileSize] = useState(null), [isLoadingFileSize, setIsLoadingFileSize] = useState(!1), [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = useState(!1), t0;
+ $[0] !== maxFileSize || $[1] !== stagedUpload.files || $[2] !== stagedUpload.type || $[3] !== stagedUpload.url ? (t0 = () => {
if (stagedUpload.type === "url") {
setIsLoadingFileSize(!1), setCanSkipFileSizeValidation(!1), setFileSize(null);
let url = stagedUpload.url, fetchFileSize = async () => {
setIsLoadingFileSize(!0);
@@ -6447,17 +6461,21 @@
};
fetchFileSize();
}
stagedUpload.type === "file" && setFileSize(stagedUpload.files[0].size);
- }, [
+ }, $[0] = maxFileSize, $[1] = stagedUpload.files, $[2] = stagedUpload.type, $[3] = stagedUpload.url, $[4] = t0) : t0 = $[4];
+ let t1;
+ $[5] !== maxFileSize || $[6] !== stagedUpload ? (t1 = [
maxFileSize,
stagedUpload,
stagedUpload.type
- ]), {
+ ], $[5] = maxFileSize, $[6] = stagedUpload, $[7] = t1) : t1 = $[7], useEffect(t0, t1);
+ let t2;
+ return $[8] !== canSkipFileSizeValidation || $[9] !== fileSize || $[10] !== isLoadingFileSize ? (t2 = {
fileSize,
isLoadingFileSize,
canSkipFileSizeValidation
- };
+ }, $[8] = canSkipFileSizeValidation, $[9] = fileSize, $[10] = isLoadingFileSize, $[11] = t2) : t2 = $[11], t2;
}
function useMediaMetadata(stagedUpload) {
let $ = c(9), [videoAssetMetadata, setVideoAssetMetadata] = useState(null), [isLoadingMetadata, setIsLoadingMetadata] = useState(!1), t0;
$[0] !== stagedUpload.files || $[1] !== stagedUpload.type || $[2] !== stagedUpload.url ? (t0 = () => {
@@ -6595,12 +6613,12 @@
return bytes.toFixed(dp) + " " + units[u];
}
const RangeInput = styled.input.withConfig({
displayName: "RangeInput",
- componentId: "sc-1f7yi2-0"
+ componentId: "sc-kl0au4-0"
})`width:100%;height:4px;border-radius:2px;background:var(--card-border-color);outline:none;-webkit-appearance:none;appearance:none;&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--card-focus-ring-color,#2276fc);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);}&::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--card-focus-ring-color,#2276fc);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);}&:hover::-webkit-slider-thumb{background:var(--card-focus-ring-color,#1a5fc7);}&:hover::-moz-range-thumb{background:var(--card-focus-ring-color,#1a5fc7);}`, WatermarkOverlay = styled.div.withConfig({
displayName: "WatermarkOverlay",
- componentId: "sc-1f7yi2-1"
+ componentId: "sc-kl0au4-1"
})`position:absolute;max-width:200px;opacity:${(props) => props.$opacity};cursor:move;user-select:none;z-index:10;pointer-events:auto;img{width:100%;height:auto;display:block;pointer-events:none;}&:hover{outline:2px dashed rgba(255,255,255,0.8);outline-offset:4px;}`;
function DraggableWatermark({ watermark, onChange, containerRef, videoElementRef }) {
let [isDragging, setIsDragging] = useState(!1), [dragStart, setDragStart] = useState({
x: 0,
@@ -6638,20 +6656,20 @@
y: (containerH - contentH) / 2,
width: contentW,
height: contentH
};
- }, [containerRef, videoElementRef]), parseOverlayValue = (value_0) => {
- if (!value_0) return null;
- let trimmed_0 = value_0.trim(), px = trimmed_0.endsWith("px"), pct = trimmed_0.endsWith("%"), num_0 = Number(trimmed_0.replace(/px|%/g, ""));
- return Number.isFinite(num_0) ? px ? {
- n: num_0,
+ }, [containerRef, videoElementRef]), parseOverlayValue = (value) => {
+ if (!value) return null;
+ let trimmed = value.trim(), px = trimmed.endsWith("px"), pct = trimmed.endsWith("%"), num = Number(trimmed.replace(/px|%/g, ""));
+ return Number.isFinite(num) ? px ? {
+ n: num,
unit: "px"
} : pct ? {
- n: num_0,
+ n: num,
unit: "%"
} : null : null;
}, computeManualStyle = (overlay) => {
- let rect_0 = containerRef?.current?.getBoundingClientRect(), w = rect_0?.width ?? 0, h = rect_0?.height ?? 0, isVertical = h > w, baseW = isVertical ? 1080 : 1920, baseH = isVertical ? 1920 : 1080, hm = parseOverlayValue(overlay.horizontal_margin), vm = parseOverlayValue(overlay.vertical_margin), ww = parseOverlayValue(overlay.width), manualOpacity = parseOpacityPercent(overlay.opacity), toCss = (v, axis) => {
+ let rect = containerRef?.current?.getBoundingClientRect(), w = rect?.width ?? 0, h = rect?.height ?? 0, isVertical = h > w, baseW = isVertical ? 1080 : 1920, baseH = isVertical ? 1920 : 1080, hm = parseOverlayValue(overlay.horizontal_margin), vm = parseOverlayValue(overlay.vertical_margin), ww = parseOverlayValue(overlay.width), manualOpacity = parseOpacityPercent(overlay.opacity), toCss = (v, axis) => {
if (v) return v.unit === "%" ? `${v.n}%` : axis === "x" ? `${v.n * w / baseW}px` : `${v.n * h / baseH}px`;
}, computeHorizontalStyle = () => overlay.horizontal_align === "left" ? {
left: toCss(hm, "x"),
right: void 0,
@@ -6700,11 +6718,11 @@
}), setStartPosition({
x: position.x,
y: position.y
});
- }, [position]), handleMouseMove = useCallback((e_0) => {
+ }, [position]), handleMouseMove = useCallback((e) => {
if (!isDragging || !containerRef?.current) return;
- let rect_1 = containerRef.current.getBoundingClientRect(), content = getVideoContentBox(), contentW_0 = content.width || rect_1.width, contentH_0 = content.height || rect_1.height, dx = e_0.clientX - dragStart.x, dy = e_0.clientY - dragStart.y, deltaXPercent = dx / contentW_0 * 100, deltaYPercent = dy / contentH_0 * 100, newX = startPosition.x + deltaXPercent, newY = startPosition.y + deltaYPercent;
+ let rect = containerRef.current.getBoundingClientRect(), content = getVideoContentBox(), contentW = content.width || rect.width, contentH = content.height || rect.height, dx = e.clientX - dragStart.x, dy = e.clientY - dragStart.y, deltaXPercent = dx / contentW * 100, deltaYPercent = dy / contentH * 100, newX = startPosition.x + deltaXPercent, newY = startPosition.y + deltaYPercent;
newX = Math.max(0, Math.min(100, newX)), newY = Math.max(0, Math.min(100, newY)), setLocalPosition({
x: newX,
y: newY
}), debouncedOnChange({
@@ -6799,10 +6817,10 @@
imageAspectRatio: watermark.imageAspectRatio
});
}, img.src = url;
} else {
- let errorMsg_0 = "Mux only supports PNG and JPG watermark images. Please use a .png or .jpg file.";
- setIsValid(!1), setUrlError(errorMsg_0), onValidationChange?.(errorMsg_0), isUpdatingRef.current = !0, onChange({
+ let errorMsg = "Mux only supports PNG and JPG watermark images. Please use a .png or .jpg file.";
+ setIsValid(!1), setUrlError(errorMsg), onValidationChange?.(errorMsg), isUpdatingRef.current = !0, onChange({
...watermark,
enabled: !1,
imageUrl: void 0,
imageAspectRatio: void 0,
@@ -6834,16 +6852,16 @@
}, []), useEffect(() => {
setMode(watermark.overlay_settings ? "manual" : "canvas");
}, [watermark.overlay_settings]);
let handleUrlChange = (e) => {
- let url_0 = e.target.value;
- setUrlInput(url_0), watermark.imageUrl && url_0 !== watermark.imageUrl && (isUpdatingRef.current = !0, onChange({
+ let url = e.target.value;
+ setUrlInput(url), watermark.imageUrl && url !== watermark.imageUrl && (isUpdatingRef.current = !0, onChange({
...watermark,
enabled: !1,
imageUrl: void 0,
imageAspectRatio: void 0,
overlay_settings: void 0
- })), validateUrl(url_0);
+ })), validateUrl(url);
}, normalizeZeroPercent = (value) => {
if (!value) return value;
let trimmed = value.trim();
if (!trimmed.endsWith("%")) return value;
@@ -7084,9 +7102,9 @@
muted: !0,
children: "horizontal_align"
}), /* @__PURE__ */ jsxs("select", {
value: watermark.overlay_settings?.horizontal_align || "right",
- onChange: (e_0) => updateOverlaySettings({ horizontal_align: e_0.target.value || "right" }),
+ onChange: (e) => updateOverlaySettings({ horizontal_align: e.target.value || "right" }),
style: {
width: "100%",
padding: "8px 10px",
border: "1px solid #ccc",
@@ -7116,9 +7134,9 @@
muted: !0,
children: "horizontal_margin (e.g. 2% or 40px)"
}), /* @__PURE__ */ jsx(TextInput, {
value: watermark.overlay_settings?.horizontal_margin || "2%",
- onChange: (e_1) => updateOverlaySettings({ horizontal_margin: e_1.currentTarget.value })
+ onChange: (e) => updateOverlaySettings({ horizontal_margin: e.currentTarget.value })
})]
}),
/* @__PURE__ */ jsxs(Stack, {
gap: 2,
@@ -7128,9 +7146,9 @@
muted: !0,
children: "vertical_align"
}), /* @__PURE__ */ jsxs("select", {
value: watermark.overlay_settings?.vertical_align || "bottom",
- onChange: (e_2) => updateOverlaySettings({ vertical_align: e_2.target.value || "bottom" }),
+ onChange: (e) => updateOverlaySettings({ vertical_align: e.target.value || "bottom" }),
style: {
width: "100%",
padding: "8px 10px",
border: "1px solid #ccc",
@@ -7160,9 +7178,9 @@
muted: !0,
children: "vertical_margin (e.g. 2% or 40px)"
}), /* @__PURE__ */ jsx(TextInput, {
value: watermark.overlay_settings?.vertical_margin || "2%",
- onChange: (e_3) => updateOverlaySettings({ vertical_margin: e_3.currentTarget.value })
+ onChange: (e) => updateOverlaySettings({ vertical_margin: e.currentTarget.value })
})]
}),
/* @__PURE__ */ jsxs(Stack, {
gap: 2,
@@ -7172,9 +7190,9 @@
muted: !0,
children: "width (e.g. 25% or 80px)"
}), /* @__PURE__ */ jsx(TextInput, {
value: watermark.overlay_settings?.width || `${watermark.size ?? 20}%`,
- onChange: (e_4) => updateOverlaySettings({ width: e_4.currentTarget.value })
+ onChange: (e) => updateOverlaySettings({ width: e.currentTarget.value })
})]
}),
/* @__PURE__ */ jsxs(Stack, {
gap: 2,
@@ -7184,9 +7202,9 @@
muted: !0,
children: "opacity (e.g. 90%)"
}), /* @__PURE__ */ jsx(TextInput, {
value: watermark.overlay_settings?.opacity || `${Math.round((watermark.opacity ?? .7) * 100)}%`,
- onChange: (e_5) => updateOverlaySettings({ opacity: e_5.currentTarget.value })
+ onChange: (e) => updateOverlaySettings({ opacity: e.currentTarget.value })
})]
})
]
}),
@@ -7201,28 +7219,28 @@
mode === "canvas" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
size: 1,
weight: "medium",
children: (() => {
- let sizePct = watermark.size || 20, contentW_0 = getVideoContentBox().width;
- return contentW_0 ? `Size: ${Math.max(1, Math.round(sizePct / 100 * contentW_0))}px` : `Size: ${sizePct}%`;
+ let sizePct = watermark.size || 20, contentW = getVideoContentBox().width;
+ return contentW ? `Size: ${Math.max(1, Math.round(sizePct / 100 * contentW))}px` : `Size: ${sizePct}%`;
})()
}), /* @__PURE__ */ jsx(RangeInput, {
type: "range",
value: (() => {
- let sizePct_0 = watermark.size || 20, contentW_1 = getVideoContentBox().width;
- return contentW_1 ? Math.max(1, Math.round(sizePct_0 / 100 * contentW_1)) : sizePct_0;
+ let sizePct = watermark.size || 20, contentW = getVideoContentBox().width;
+ return contentW ? Math.max(1, Math.round(sizePct / 100 * contentW)) : sizePct;
})(),
min: (() => {
- let contentW_2 = getVideoContentBox().width;
- return contentW_2 ? Math.max(1, Math.round(contentW_2 * .05)) : 5;
+ let contentW = getVideoContentBox().width;
+ return contentW ? Math.max(1, Math.round(contentW * .05)) : 5;
})(),
max: (() => {
- let contentW_3 = getVideoContentBox().width;
- return contentW_3 ? Math.max(1, Math.round(contentW_3 * .5)) : 50;
+ let contentW = getVideoContentBox().width;
+ return contentW ? Math.max(1, Math.round(contentW * .5)) : 50;
})(),
step: 1,
- onChange: (e_6) => {
- let raw = Number(e_6.target.value), contentW_4 = getVideoContentBox().width, nextPct = contentW_4 ? raw / contentW_4 * 100 : raw, clampedPct = Math.max(5, Math.min(50, nextPct));
+ onChange: (e) => {
+ let raw = Number(e.target.value), contentW = getVideoContentBox().width, nextPct = contentW ? raw / contentW * 100 : raw, clampedPct = Math.max(5, Math.min(50, nextPct));
onChange({
...watermark,
size: clampedPct
});
@@ -7240,11 +7258,11 @@
value: watermark.opacity ?? .7,
min: 0,
max: 1,
step: .05,
- onChange: (e_7) => onChange({
+ onChange: (e) => onChange({
...watermark,
- opacity: Number(e_7.target.value)
+ opacity: Number(e.target.value)
})
})] })] }),
/* @__PURE__ */ jsx(Card, {
padding: 2,
@@ -8151,10 +8169,10 @@
text: "Upload",
tone: "positive",
onClick: () => {
if (!validationError) {
- let { settings: settings_0, watermark: watermark_0 } = formatUploadConfig(config, secrets, { videoAspectRatio: videoAssetMetadata?.aspectRatio });
- startUpload(settings_0, watermark_0);
+ let { settings, watermark } = formatUploadConfig(config, secrets, { videoAspectRatio: videoAssetMetadata?.aspectRatio });
+ startUpload(settings, watermark);
}
}
})
})
@@ -8335,9 +8353,9 @@
});
function withFocusRing(component) {
return styled(component).withConfig({
displayName: "",
- componentId: "sc-i0cth4-0"
+ componentId: "sc-pnosg9-0"
})(({ $border, theme }) => {
let border = {
width: +!!$border,
color: "var(--card-border-color)"
@@ -8375,15 +8393,15 @@
}), $[2] = children, $[3] = onDragEnter, $[4] = onDragLeave, $[5] = onDragOver, $[6] = onDrop, $[7] = onPaste, $[8] = ref, $[9] = tone, $[10] = t3) : t3 = $[10], t3;
}
const HiddenInput$1 = styled.input.attrs({ type: "text" }).withConfig({
displayName: "HiddenInput",
- componentId: "sc-cukdbq-0"
+ componentId: "sc-krn2by-0"
})`position:absolute;border:0;color:white;opacity:0;&:focus{outline:none;}`, HiddenInput = styled.input.withConfig({
displayName: "HiddenInput",
- componentId: "sc-csv7pk-0"
+ componentId: "sc-12dr06-0"
})`overflow:hidden;width:0.1px;height:0.1px;opacity:0;position:absolute;z-index:-1;`, Label$1 = styled.label.withConfig({
displayName: "Label",
- componentId: "sc-csv7pk-1"
+ componentId: "sc-12dr06-1"
})`position:relative;`, FileInputButton = (t0) => {
let $ = c(18), accept, onSelect, props;
$[0] === t0 ? (accept = $[1], onSelect = $[2], props = $[3]) : ({onSelect, accept, ...props} = t0, $[0] = t0, $[1] = accept, $[2] = onSelect, $[3] = props);
let inputId = `FileSelect${useId()}`, inputRef = useRef(null), t1;
@@ -8615,43 +8633,43 @@
uploadingDocumentId.current &&= (props.client.delete(uploadingDocumentId.current), null);
}))));
}
uploadRef.current = uploadObservable.subscribe({
- next: (event_0) => {
- switch (event_0.type) {
+ next: (event) => {
+ switch (event.type) {
case "uuid":
- uploadingDocumentId.current = event_0.uuid, dispatch({
+ uploadingDocumentId.current = event.uuid, dispatch({
action: "progressInfo",
- ...event_0
+ ...event
});
break;
case "file":
case "url":
dispatch({
action: "progressInfo",
- ...event_0
+ ...event
});
break;
case "progress":
dispatch({
action: "progress",
- percent: event_0.percent
+ percent: event.percent
});
break;
case "success": dispatch({
action: "progress",
percent: 100
}), uploadingDocumentId.current = null, props.onChange(PatchEvent.from([setIfMissing({ asset: {} }), set({
_type: "reference",
_weak: !0,
- _ref: event_0.asset._id
+ _ref: event.asset._id
}, ["asset"])]));
}
},
complete: () => dispatch({ action: "complete" }),
- error: (error_0) => dispatch({
+ error: (error) => dispatch({
action: "error",
- error: error_0,
+ error,
settings
})
});
}, invalidFileToast = useCallback(() => {
@@ -8661,20 +8679,20 @@
});
}, [props.config.acceptedMimeTypes, toast]), isInvalidFile = (files) => Array.from(files).some((file) => !props.config.acceptedMimeTypes?.some((acceptedType) => {
let pattern = `^${acceptedType.replace("*", ".*")}$`;
return new RegExp(pattern).test(file.type);
- })), handleUpload = (files_0) => {
- isInvalidFile(files_0) || dispatch({
+ })), handleUpload = (files) => {
+ isInvalidFile(files) || dispatch({
action: "stageUpload",
input: {
type: "file",
- files: files_0
+ files
}
});
- }, handlePaste = (event_1) => {
- if (event_1.target.closest("#vtt-url")) return;
- event_1.preventDefault(), event_1.stopPropagation();
- let url = (event_1.clipboardData || window.clipboardData)?.getData("text")?.trim();
+ }, handlePaste = (event) => {
+ if (event.target.closest("#vtt-url")) return;
+ event.preventDefault(), event.stopPropagation();
+ let url = (event.clipboardData || window.clipboardData)?.getData("text")?.trim();
if (!isValidUrl(url)) {
toast.push({
status: "error",
title: "Invalid URL for Mux video input."
@@ -8687,38 +8705,38 @@
type: "url",
url
}
});
- }, handleDrop = (event_2) => {
- if (event_2.preventDefault(), event_2.stopPropagation(), dragState === "invalid") {
+ }, handleDrop = (event) => {
+ if (event.preventDefault(), event.stopPropagation(), dragState === "invalid") {
invalidFileToast(), setDragState(null);
return;
}
- setDragState(null), extractDroppedFiles(event_2.nativeEvent.dataTransfer).then((files_1) => {
+ setDragState(null), extractDroppedFiles(event.nativeEvent.dataTransfer).then((files) => {
dispatch({
action: "stageUpload",
input: {
type: "file",
- files: files_1
+ files
}
});
});
- }, handleDragOver = (event_3) => {
- event_3.preventDefault(), event_3.stopPropagation();
- }, handleDragEnter = (event_4) => {
- event_4.stopPropagation(), dragEnteredEls.current.push(event_4.target);
- let type_0 = event_4.dataTransfer.items?.[0]?.type, isValidType = props.config.acceptedMimeTypes?.some((acceptedType_0) => {
- let pattern_0 = `^${acceptedType_0.replace("*", ".*")}$`;
- return new RegExp(pattern_0).test(type_0);
+ }, handleDragOver = (event) => {
+ event.preventDefault(), event.stopPropagation();
+ }, handleDragEnter = (event) => {
+ event.stopPropagation(), dragEnteredEls.current.push(event.target);
+ let type = event.dataTransfer.items?.[0]?.type, isValidType = props.config.acceptedMimeTypes?.some((acceptedType) => {
+ let pattern = `^${acceptedType.replace("*", ".*")}$`;
+ return new RegExp(pattern).test(type);
});
setDragState(isValidType ? "valid" : "invalid");
- }, handleDragLeave = (event_5) => {
- event_5.stopPropagation();
- let idx = dragEnteredEls.current.indexOf(event_5.target);
+ }, handleDragLeave = (event) => {
+ event.stopPropagation();
+ let idx = dragEnteredEls.current.indexOf(event.target);
idx > -1 && dragEnteredEls.current.splice(idx, 1), dragEnteredEls.current.length === 0 && setDragState(null);
};
if (state.error !== null) {
- let error_1 = state.error;
+ let error = state.error;
return /* @__PURE__ */ jsxs(Flex, {
gap: 3,
direction: "column",
justify: "center",
@@ -8729,14 +8747,14 @@
muted: !0,
children: /* @__PURE__ */ jsx(ErrorOutlineIcon, {})
}),
/* @__PURE__ */ jsx(Text, { children: "Something went wrong" }),
- error_1 instanceof Error && error_1.message && /* @__PURE__ */ jsx(Text, {
+ error instanceof Error && error.message && /* @__PURE__ */ jsx(Text, {
size: 1,
muted: !0,
weight: "semibold",
style: { textAlign: "center" },
- children: error_1.message
+ children: error.message
}),
/* @__PURE__ */ jsx(Button, {
text: "Upload another file",
onClick: () => dispatch({ action: "reset" })