sanity-plugin-mux-input 4.0.0 → 4.0.2

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/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import { useClient as useClient$1, createHookFromObservableFactory, useDocumentS
2
2
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
3
  import { ErrorOutlineIcon, InfoOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, ChevronLeftIcon, ChevronRightIcon, SyncIcon, SortIcon, UploadIcon, TranslateIcon, DownloadIcon, AddIcon, ChevronUpIcon, ChevronDownIcon, TrashIcon, EditIcon, WarningOutlineIcon, PublishIcon, DocumentIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, ImageIcon, ResetIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
4
4
  import { Dialog, Stack, Card, Text, Button, useTheme_v2, Flex, Box, TextInput, Checkbox, Code, Inline, Spinner, Heading, Label as Label$1, Radio, MenuButton, Menu, MenuItem, useToast, Autocomplete, Tooltip, TabList, Tab, TabPanel, Grid, useClickOutsideEvent, Popover, MenuDivider, rem } from "@sanity/ui";
5
- import r, { createContext, useState, useCallback, useMemo, useContext, useReducer, useId, memo, useRef, useEffect, Suspense, isValidElement, PureComponent, forwardRef } from "react";
5
+ import { createContext, useState, useCallback, useMemo, useContext, useReducer, useId, memo, useRef, useEffect, Suspense, isValidElement, forwardRef } from "react";
6
6
  import compact from "lodash/compact.js";
7
7
  import toLower from "lodash/toLower.js";
8
8
  import trim from "lodash/trim.js";
@@ -22,6 +22,7 @@ import isString from "lodash/isString.js";
22
22
  import { useObservable } from "react-rx";
23
23
  import useSWR from "swr";
24
24
  import scrollIntoView from "scroll-into-view-if-needed";
25
+ import { useErrorBoundary } from "use-error-boundary";
25
26
  import { UpChunk } from "@mux/upchunk";
26
27
  import { isValidElementType } from "react-is";
27
28
  const ToolIcon = () => /* @__PURE__ */ jsx("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: "1em", 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" }) }), LOCAL_STORAGE_HAS_SHOWN_WARNING_KEY = "mux-plugin-has-shown-drm-playback-warning", DrmPlaybackWarningContext = createContext({
@@ -141,7 +142,7 @@ function useDialogState() {
141
142
  const PLUGIN_VERSION_QUERY = {
142
143
  sanityVersion: (
143
144
  // @ts-expect-error - this constant is search/replaced so must be exact, not accessed with an index signature
144
- "4.0.0"
145
+ "4.0.2"
145
146
  )
146
147
  };
147
148
  function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate, drmConfigId) {
@@ -663,7 +664,7 @@ function accumulateIntermediateState(currentState, pageResult) {
663
664
  validAssets,
664
665
  skippedInThisPage
665
666
  } = newAssets.reduce((acc, asset) => {
666
- const hasPlaybackIds = asset.playback_ids && asset.playback_ids.length > 0, isDuplicate = currentData.some((a2) => a2.id === asset.id);
667
+ const hasPlaybackIds = asset.playback_ids && asset.playback_ids.length > 0, isDuplicate = currentData.some((a) => a.id === asset.id);
667
668
  return hasPlaybackIds || (acc.skippedInThisPage = !0), hasPlaybackIds && !isDuplicate && acc.validAssets.push(asset), acc;
668
669
  }, {
669
670
  validAssets: [],
@@ -721,7 +722,7 @@ function useImportMuxAssets() {
721
722
  }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), hasSecrets = !!useSecretsDocumentValues().value.secrets?.secretKey, [importError, setImportError] = useState(), [importState, setImportState] = useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
722
723
  client,
723
724
  enabled: hasSecrets && dialogOpen
724
- }), missingAssets = useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a2) => !assetExistsInSanity(a2, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
725
+ }), missingAssets = useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a) => !assetExistsInSanity(a, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
725
726
  importState !== "importing" && setImportState("closed");
726
727
  }, openDialog = () => {
727
728
  importState === "closed" && setImportState("idle");
@@ -1097,8 +1098,8 @@ function ImportVideosDialog(props) {
1097
1098
  /* @__PURE__ */ jsx(Box, { flex: 1, paddingLeft: 3, as: "label", htmlFor: "import-all", children: /* @__PURE__ */ jsx(Text, { children: "Import all" }) })
1098
1099
  ] }),
1099
1100
  props.missingAssets.map((asset) => /* @__PURE__ */ jsx(MissingAsset, { asset, selectAsset: (selected) => {
1100
- selected ? props.setSelectedAssets([...props.selectedAssets, asset]) : props.setSelectedAssets(props.selectedAssets.filter((a2) => a2.id !== asset.id));
1101
- }, selected: props.selectedAssets.some((a2) => a2.id === asset.id) }, asset.id))
1101
+ selected ? props.setSelectedAssets([...props.selectedAssets, asset]) : props.setSelectedAssets(props.selectedAssets.filter((a) => a.id !== asset.id));
1102
+ }, selected: props.selectedAssets.some((a) => a.id === asset.id) }, asset.id))
1102
1103
  ] })
1103
1104
  ] }) });
1104
1105
  }
@@ -2258,16 +2259,16 @@ function TextTracksManager({
2258
2259
  }, 3e3);
2259
2260
  return () => clearInterval(interval);
2260
2261
  }, [allTracks, asset, resyncAsset]);
2261
- const visibleTracks = allTracks.filter((track) => track.status === "ready" || track.status === "preparing" || track.status === "errored").sort((a2, b) => {
2262
- const orderA = trackActivityOrder.get(a2.id) || 0, orderB = trackActivityOrder.get(b.id) || 0;
2262
+ const visibleTracks = allTracks.filter((track) => track.status === "ready" || track.status === "preparing" || track.status === "errored").sort((a, b) => {
2263
+ const orderA = trackActivityOrder.get(a.id) || 0, orderB = trackActivityOrder.get(b.id) || 0;
2263
2264
  if (orderA > 0 && orderB > 0)
2264
2265
  return orderB - orderA;
2265
2266
  if (orderA > 0) return -1;
2266
2267
  if (orderB > 0) return 1;
2267
- const aIsPreparing = a2.status === "preparing", bIsPreparing = b.status === "preparing";
2268
+ const aIsPreparing = a.status === "preparing", bIsPreparing = b.status === "preparing";
2268
2269
  if (aIsPreparing && !bIsPreparing) return -1;
2269
2270
  if (!aIsPreparing && bIsPreparing) return 1;
2270
- const aIsAutogenerated = a2.id && a2.id.startsWith("generating-") || a2.id && autogeneratedTrackIds.has(a2.id), bIsAutogenerated = b.id && b.id.startsWith("generating-") || b.id && autogeneratedTrackIds.has(b.id);
2271
+ const 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);
2271
2272
  return aIsAutogenerated && !bIsAutogenerated ? -1 : !aIsAutogenerated && bIsAutogenerated ? 1 : 0;
2272
2273
  }), handleDownload = async (track) => {
2273
2274
  if (track.id) {
@@ -2559,7 +2560,7 @@ function VideoPlayer({
2559
2560
  /* @__PURE__ */ jsx(MuxPlayer, { poster: isAudio ? void 0 : poster, ref: muxPlayer, ...props, playsInline: !0, playbackId, tokens, preload: "metadata", crossOrigin: "anonymous", metadata: {
2560
2561
  player_name: "Sanity Admin Dashboard",
2561
2562
  // @ts-expect-error - this constant is search/replaced so must be exact, not accessed with an index signature
2562
- player_version: "4.0.0",
2563
+ player_version: "4.0.2",
2563
2564
  page_type: "Preview Player"
2564
2565
  }, audio: isAudio, _hlsConfig: hlsConfig, style: {
2565
2566
  ...!isAudio && {
@@ -3082,7 +3083,7 @@ function VideosBrowser({
3082
3083
  setSearchQuery,
3083
3084
  setSort,
3084
3085
  sort
3085
- } = useAssets(), [page, setPage] = useState(0), pageLimit = 20, pageTotal = Math.floor(assets.length / pageLimit) + 1, [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(() => assets.find((a2) => a2._id === editedAsset?._id) || editedAsset, [editedAsset, assets]), pageStart = page * pageLimit, pageEnd = pageStart + pageLimit;
3086
+ } = useAssets(), [page, setPage] = useState(0), pageLimit = 20, pageTotal = Math.floor(assets.length / pageLimit) + 1, [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(() => assets.find((a) => a._id === editedAsset?._id) || editedAsset, [editedAsset, assets]), pageStart = page * pageLimit, pageEnd = pageStart + pageLimit;
3086
3087
  return /* @__PURE__ */ jsxs(DrmPlaybackWarningContextProvider, { config, children: [
3087
3088
  /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 4, style: {
3088
3089
  minHeight: "50vh"
@@ -3163,79 +3164,6 @@ const useAccessControl = (config) => {
3163
3164
  dedupingInterval: 1e3
3164
3165
  });
3165
3166
  };
3166
- var c = (function(r2) {
3167
- var t, e;
3168
- function n(t2) {
3169
- var e2;
3170
- return (e2 = r2.call(this, t2) || this).state = {
3171
- hasError: !1,
3172
- error: null
3173
- }, e2;
3174
- }
3175
- e = r2, (t = n).prototype = Object.create(e.prototype), t.prototype.constructor = t, t.__proto__ = e, n.getDerivedStateFromError = function(r3) {
3176
- return {
3177
- hasError: !0,
3178
- error: r3
3179
- };
3180
- };
3181
- var o = n.prototype;
3182
- return o.componentDidCatch = function(r3, t2) {
3183
- return this.props.onDidCatch(r3, t2);
3184
- }, o.render = function() {
3185
- var r3 = this.state, t2 = this.props, e2 = t2.render, n2 = t2.children, o2 = t2.renderError;
3186
- return r3.hasError ? o2 ? o2({
3187
- error: r3.error
3188
- }) : null : e2 ? e2() : n2 || null;
3189
- }, n;
3190
- })(PureComponent), u = function(r2, t) {
3191
- switch (t.type) {
3192
- case "catch":
3193
- return {
3194
- didCatch: !0,
3195
- error: t.error
3196
- };
3197
- case "reset":
3198
- return {
3199
- didCatch: !1,
3200
- error: null
3201
- };
3202
- default:
3203
- return r2;
3204
- }
3205
- };
3206
- function a(t) {
3207
- var a2 = useReducer(u, {
3208
- didCatch: !1,
3209
- error: null
3210
- }), i = a2[0], d = a2[1], h = useRef(null);
3211
- function l() {
3212
- return e = function(r2, e2) {
3213
- d({
3214
- type: "catch",
3215
- error: r2
3216
- }), t && t.onDidCatch && t.onDidCatch(r2, e2);
3217
- }, function(t2) {
3218
- return r.createElement(c, {
3219
- onDidCatch: e,
3220
- children: t2.children,
3221
- render: t2.render,
3222
- renderError: t2.renderError
3223
- });
3224
- };
3225
- var e;
3226
- }
3227
- var p, s = useCallback(function() {
3228
- h.current = l(), d({
3229
- type: "reset"
3230
- });
3231
- }, []);
3232
- return {
3233
- ErrorBoundary: (p = h.current, p !== null ? p : (h.current = l(), h.current)),
3234
- didCatch: i.didCatch,
3235
- error: i.error,
3236
- reset: s
3237
- };
3238
- }
3239
3167
  function ErrorBoundaryCard$1(props) {
3240
3168
  const {
3241
3169
  children,
@@ -3247,7 +3175,7 @@ function ErrorBoundaryCard$1(props) {
3247
3175
  didCatch,
3248
3176
  error,
3249
3177
  reset
3250
- } = a({
3178
+ } = useErrorBoundary({
3251
3179
  // oxlint-disable-next-line no-unstable-nested-components
3252
3180
  onDidCatch: (err, errorInfo) => {
3253
3181
  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({
@@ -3946,12 +3874,12 @@ function formatBytes(bytes, si = !1, dp = 1) {
3946
3874
  if (Math.abs(bytes) < thresh)
3947
3875
  return bytes + " B";
3948
3876
  const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
3949
- let u2 = -1;
3950
- const r2 = 10 ** dp;
3877
+ let u = -1;
3878
+ const r = 10 ** dp;
3951
3879
  do
3952
- bytes /= thresh, ++u2;
3953
- while (Math.round(Math.abs(bytes) * r2) / r2 >= thresh && u2 < units.length - 1);
3954
- return bytes.toFixed(dp) + " " + units[u2];
3880
+ bytes /= thresh, ++u;
3881
+ while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
3882
+ return bytes.toFixed(dp) + " " + units[u];
3955
3883
  }
3956
3884
  const RangeInput = styled.input.withConfig({
3957
3885
  displayName: "RangeInput",
@@ -4687,11 +4615,11 @@ const RESOLUTION_TIERS = [{
4687
4615
  config,
4688
4616
  dispatch
4689
4617
  }) => {
4690
- const isAdvancedMode = useMemo(() => config.static_renditions.filter((r2) => r2 !== "highest" && r2 !== "audio-only").length > 0, [config.static_renditions]), [renditionMode, setRenditionMode] = useState(isAdvancedMode ? "advanced" : "standard"), toggleRendition = (rendition) => {
4618
+ const isAdvancedMode = useMemo(() => config.static_renditions.filter((r) => r !== "highest" && r !== "audio-only").length > 0, [config.static_renditions]), [renditionMode, setRenditionMode] = useState(isAdvancedMode ? "advanced" : "standard"), toggleRendition = (rendition) => {
4691
4619
  const current = config.static_renditions, hasRendition = current.includes(rendition);
4692
4620
  dispatch(hasRendition ? {
4693
4621
  action: "static_renditions",
4694
- value: current.filter((r2) => r2 !== rendition)
4622
+ value: current.filter((r) => r !== rendition)
4695
4623
  } : {
4696
4624
  action: "static_renditions",
4697
4625
  value: [...current, rendition]
@@ -4699,10 +4627,10 @@ const RESOLUTION_TIERS = [{
4699
4627
  }, handleModeChange = (mode) => {
4700
4628
  setRenditionMode(mode), dispatch(mode === "standard" ? {
4701
4629
  action: "static_renditions",
4702
- value: config.static_renditions.filter((r2) => r2 === "highest" || r2 === "audio-only")
4630
+ value: config.static_renditions.filter((r) => r === "highest" || r === "audio-only")
4703
4631
  } : {
4704
4632
  action: "static_renditions",
4705
- value: config.static_renditions.filter((r2) => r2 !== "highest")
4633
+ value: config.static_renditions.filter((r) => r !== "highest")
4706
4634
  });
4707
4635
  };
4708
4636
  return /* @__PURE__ */ jsx(Stack, { space: 3, children: /* @__PURE__ */ jsx(FormField$2, { path: [], title: "Static Renditions", description: "Generate downloadable MP4 or M4A files. Note: Mux will not upscale to produce MP4 renditions - renditions that would cause upscaling are skipped.", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
@@ -4763,8 +4691,8 @@ const RESOLUTION_TIERS = [{
4763
4691
  label: "Premium"
4764
4692
  }];
4765
4693
  function sanitizeStaticRenditions(renditions) {
4766
- const hasHighest = renditions.includes("highest"), hasSpecificResolutions = renditions.some((r2) => r2 !== "highest" && r2 !== "audio-only");
4767
- return hasHighest && hasSpecificResolutions ? renditions.filter((r2) => r2 === "highest" || r2 === "audio-only") : renditions;
4694
+ const hasHighest = renditions.includes("highest"), hasSpecificResolutions = renditions.some((r) => r !== "highest" && r !== "audio-only");
4695
+ return hasHighest && hasSpecificResolutions ? renditions.filter((r) => r === "highest" || r === "audio-only") : renditions;
4768
4696
  }
4769
4697
  function UploadConfiguration({
4770
4698
  stagedUpload,