sanity-plugin-mux-input 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -49
- package/dist/index.d.mts +160 -159
- package/dist/index.d.ts +160 -159
- package/dist/index.js +19 -27
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +19 -26
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -37
package/dist/index.mjs
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 React, { createContext,
|
|
5
|
+
import React, { createContext, useState, useContext, useMemo, useCallback, useReducer, useId, memo, useRef, useEffect, Suspense, isValidElement, PureComponent, createElement, 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";
|
|
@@ -15,6 +15,7 @@ import { uuid } from "@sanity/uuid";
|
|
|
15
15
|
import { expand, concatMap, tap, switchMap, mergeMap, catchError, mergeMapTo, takeUntil } from "rxjs/operators";
|
|
16
16
|
import LanguagesList from "iso-639-1";
|
|
17
17
|
import MuxPlayer from "@mux/mux-player-react/lazy";
|
|
18
|
+
import { getDevicePixelRatio } from "use-device-pixel-ratio";
|
|
18
19
|
import { IntentLink } from "sanity/router";
|
|
19
20
|
import isNumber from "lodash/isNumber.js";
|
|
20
21
|
import isString from "lodash/isString.js";
|
|
@@ -146,7 +147,7 @@ function useAssets() {
|
|
|
146
147
|
function useDialogState() {
|
|
147
148
|
return useState(!1);
|
|
148
149
|
}
|
|
149
|
-
const PLUGIN_VERSION_QUERY = { sanityVersion: "3.0.
|
|
150
|
+
const PLUGIN_VERSION_QUERY = { sanityVersion: "3.0.1" };
|
|
150
151
|
function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate, drmConfigId) {
|
|
151
152
|
const doc = {
|
|
152
153
|
_id: "secrets.mux",
|
|
@@ -390,7 +391,7 @@ const Logo = styled.span`
|
|
|
390
391
|
/* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(MuxLogo, { height: 13 }) }),
|
|
391
392
|
"API Credentials"
|
|
392
393
|
] });
|
|
393
|
-
function FormField(props) {
|
|
394
|
+
function FormField$1(props) {
|
|
394
395
|
const { children, title, description, inputId } = props;
|
|
395
396
|
return /* @__PURE__ */ jsxs(Stack, { space: 1, children: [
|
|
396
397
|
/* @__PURE__ */ jsx(Flex, { align: "flex-end", children: /* @__PURE__ */ jsx(Box, { flex: 1, paddingY: 2, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
|
|
@@ -400,7 +401,7 @@ function FormField(props) {
|
|
|
400
401
|
/* @__PURE__ */ jsx("div", { children })
|
|
401
402
|
] });
|
|
402
403
|
}
|
|
403
|
-
var FormField
|
|
404
|
+
var FormField = memo(FormField$1);
|
|
404
405
|
const fieldNames = ["token", "secretKey", "enableSignedUrls", "drmConfigId"];
|
|
405
406
|
function ConfigureApiDialog({ secrets, setDialogState }) {
|
|
406
407
|
const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = useCallback(() => setDialogState(!1), [setDialogState]), dirty = useMemo(
|
|
@@ -497,7 +498,7 @@ function ConfigureApiDialog({ secrets, setDialogState }) {
|
|
|
497
498
|
"The credentials will be stored safely in a hidden document only available to editors."
|
|
498
499
|
] })
|
|
499
500
|
] }) }),
|
|
500
|
-
/* @__PURE__ */ jsx(FormField
|
|
501
|
+
/* @__PURE__ */ jsx(FormField, { title: "Access Token", inputId: tokenId, children: /* @__PURE__ */ jsx(
|
|
501
502
|
TextInput,
|
|
502
503
|
{
|
|
503
504
|
id: tokenId,
|
|
@@ -508,7 +509,7 @@ function ConfigureApiDialog({ secrets, setDialogState }) {
|
|
|
508
509
|
required: !!state.secretKey || state.enableSignedUrls
|
|
509
510
|
}
|
|
510
511
|
) }),
|
|
511
|
-
/* @__PURE__ */ jsx(FormField
|
|
512
|
+
/* @__PURE__ */ jsx(FormField, { title: "Secret Key", inputId: secretKeyId, children: /* @__PURE__ */ jsx(
|
|
512
513
|
TextInput,
|
|
513
514
|
{
|
|
514
515
|
id: secretKeyId,
|
|
@@ -541,7 +542,7 @@ function ConfigureApiDialog({ secrets, setDialogState }) {
|
|
|
541
542
|
] })
|
|
542
543
|
] }) }) : null
|
|
543
544
|
] }),
|
|
544
|
-
/* @__PURE__ */ jsx(FormField
|
|
545
|
+
/* @__PURE__ */ jsx(FormField, { title: "DRM Configuration ID", inputId: drmConfigIdId, children: /* @__PURE__ */ jsx(
|
|
545
546
|
TextInput,
|
|
546
547
|
{
|
|
547
548
|
id: drmConfigIdId,
|
|
@@ -2973,14 +2974,6 @@ function CaptionsDialog({ asset }) {
|
|
|
2973
2974
|
const { setDialogState } = useDialogStateContext(), dialogId = `CaptionsDialog${useId()}`;
|
|
2974
2975
|
return /* @__PURE__ */ jsx(Dialog, { id: dialogId, header: "Edit Captions", onClose: () => setDialogState(!1), width: 1, children: /* @__PURE__ */ jsx(Stack, { padding: 4, children: /* @__PURE__ */ jsx(TextTracksManager, { asset }) }) });
|
|
2975
2976
|
}
|
|
2976
|
-
function getDevicePixelRatio(options) {
|
|
2977
|
-
const {
|
|
2978
|
-
defaultDpr = 1,
|
|
2979
|
-
maxDpr = 3,
|
|
2980
|
-
round = !0
|
|
2981
|
-
} = options || {}, dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : defaultDpr;
|
|
2982
|
-
return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
|
|
2983
|
-
}
|
|
2984
2977
|
function formatSeconds(seconds) {
|
|
2985
2978
|
if (typeof seconds != "number" || Number.isNaN(seconds))
|
|
2986
2979
|
return "";
|
|
@@ -3172,7 +3165,7 @@ function VideoPlayer({
|
|
|
3172
3165
|
crossOrigin: "anonymous",
|
|
3173
3166
|
metadata: {
|
|
3174
3167
|
player_name: "Sanity Admin Dashboard",
|
|
3175
|
-
player_version: "3.0.
|
|
3168
|
+
player_version: "3.0.1",
|
|
3176
3169
|
page_type: "Preview Player"
|
|
3177
3170
|
},
|
|
3178
3171
|
audio: isAudio,
|
|
@@ -3540,7 +3533,7 @@ function useVideoDetails(props) {
|
|
|
3540
3533
|
isResyncing
|
|
3541
3534
|
};
|
|
3542
3535
|
}
|
|
3543
|
-
const AssetInput = (props) => /* @__PURE__ */ jsx(FormField
|
|
3536
|
+
const AssetInput = (props) => /* @__PURE__ */ jsx(FormField, { title: props.label, description: props.description, inputId: props.label, children: /* @__PURE__ */ jsx(
|
|
3544
3537
|
TextInput,
|
|
3545
3538
|
{
|
|
3546
3539
|
id: props.label,
|
|
@@ -4232,7 +4225,7 @@ function a(t) {
|
|
|
4232
4225
|
}, []);
|
|
4233
4226
|
return { ErrorBoundary: (p = h.current, p !== null ? p : (h.current = l(), h.current)), didCatch: i.didCatch, error: i.error, reset: s };
|
|
4234
4227
|
}
|
|
4235
|
-
function ErrorBoundaryCard(props) {
|
|
4228
|
+
function ErrorBoundaryCard$1(props) {
|
|
4236
4229
|
const { children, schemaType } = props, { push: pushToast } = useToast(), errorRef = useRef(null), { ErrorBoundary, didCatch, error, reset } = a({
|
|
4237
4230
|
onDidCatch: (err, errorInfo) => {
|
|
4238
4231
|
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({
|
|
@@ -4273,7 +4266,7 @@ function ErrorBoundaryCard(props) {
|
|
|
4273
4266
|
/* @__PURE__ */ jsx(Inline, { children: /* @__PURE__ */ jsx(Button, { onClick: handleRetry, text: "Retry" }) })
|
|
4274
4267
|
] }) }) }) : /* @__PURE__ */ jsx(ErrorBoundary, { children });
|
|
4275
4268
|
}
|
|
4276
|
-
var ErrorBoundaryCard
|
|
4269
|
+
var ErrorBoundaryCard = memo(ErrorBoundaryCard$1);
|
|
4277
4270
|
const InputFallback = () => /* @__PURE__ */ jsx("div", { style: { padding: 1 }, children: /* @__PURE__ */ jsx(
|
|
4278
4271
|
Card,
|
|
4279
4272
|
{
|
|
@@ -4869,7 +4862,7 @@ const FileButton = styled(MenuItem)(({ theme }) => {
|
|
|
4869
4862
|
background: transparent;
|
|
4870
4863
|
color: white;
|
|
4871
4864
|
`, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
|
|
4872
|
-
function PlayerActionsMenu(props) {
|
|
4865
|
+
function PlayerActionsMenu$1(props) {
|
|
4873
4866
|
const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset)?.policy === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), { resyncAsset, isResyncing } = useResyncAsset({ showToast: !0 }), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]), handleResync = useCallback(async () => {
|
|
4874
4867
|
setOpen(!1), await resyncAsset(asset);
|
|
4875
4868
|
}, [resyncAsset, asset]);
|
|
@@ -4981,7 +4974,7 @@ function PlayerActionsMenu(props) {
|
|
|
4981
4974
|
)
|
|
4982
4975
|
] });
|
|
4983
4976
|
}
|
|
4984
|
-
var PlayerActionsMenu
|
|
4977
|
+
var PlayerActionsMenu = memo(PlayerActionsMenu$1);
|
|
4985
4978
|
function useFetchFileSize(stagedUpload, maxFileSize) {
|
|
4986
4979
|
const [fileSize, setFileSize] = useState(null), [isLoadingFileSize, setIsLoadingFileSize] = useState(!1), [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = useState(!1);
|
|
4987
4980
|
return useEffect(() => {
|
|
@@ -6952,7 +6945,7 @@ function Uploader(props) {
|
|
|
6952
6945
|
onChange: props.onChange,
|
|
6953
6946
|
config: props.config,
|
|
6954
6947
|
buttons: /* @__PURE__ */ jsx(
|
|
6955
|
-
PlayerActionsMenu
|
|
6948
|
+
PlayerActionsMenu,
|
|
6956
6949
|
{
|
|
6957
6950
|
accept: acceptMimeString,
|
|
6958
6951
|
asset: props.asset,
|
|
@@ -6992,12 +6985,12 @@ function Uploader(props) {
|
|
|
6992
6985
|
)
|
|
6993
6986
|
] });
|
|
6994
6987
|
}
|
|
6995
|
-
const Input = (props) => {
|
|
6988
|
+
const Input$1 = (props) => {
|
|
6996
6989
|
const client = useClient(), secretDocumentValues = useSecretsDocumentValues(), assetDocumentValues = useAssetDocumentValues(props.value?.asset), poll = useMuxPolling(props.readOnly ? void 0 : assetDocumentValues?.value || void 0), [dialogState, setDialogState] = useDialogState(), { hasConfigAccess } = useAccessControl(props.config), error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
|
|
6997
6990
|
if (error)
|
|
6998
6991
|
throw error;
|
|
6999
6992
|
const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
|
|
7000
|
-
return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(ErrorBoundaryCard
|
|
6993
|
+
return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(ErrorBoundaryCard, { schemaType: props.schemaType, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(InputFallback, {}), children: isLoading ? /* @__PURE__ */ jsx(InputFallback, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
7001
6994
|
secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */ jsx(Onboard, { setDialogState, config: props.config }) : /* @__PURE__ */ jsx(
|
|
7002
6995
|
Uploader,
|
|
7003
6996
|
{
|
|
@@ -7021,11 +7014,11 @@ const Input = (props) => {
|
|
|
7021
7014
|
)
|
|
7022
7015
|
] }) }) }) });
|
|
7023
7016
|
};
|
|
7024
|
-
var Input
|
|
7017
|
+
var Input = memo(Input$1);
|
|
7025
7018
|
function muxVideoCustomRendering(config) {
|
|
7026
7019
|
return {
|
|
7027
7020
|
components: {
|
|
7028
|
-
input: (props) => /* @__PURE__ */ jsx(Input
|
|
7021
|
+
input: (props) => /* @__PURE__ */ jsx(Input, { config: { ...config, ...props.schemaType.options }, ...props })
|
|
7029
7022
|
},
|
|
7030
7023
|
preview: {
|
|
7031
7024
|
select: {
|