sanity-plugin-mux-input 2.10.1 → 2.11.0
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.d.mts +5 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +57 -34
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +57 -34
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/_exports/index.ts +1 -0
- package/src/components/UploadConfiguration.tsx +1 -1
- package/src/components/UploadProgress.tsx +5 -0
- package/src/components/Uploader.tsx +38 -4
- package/src/components/VideoPlayer.tsx +9 -5
- package/src/util/types.ts +6 -0
package/dist/index.d.mts
CHANGED
|
@@ -117,6 +117,11 @@ declare interface MuxInputConfig {
|
|
|
117
117
|
* @defaultValue false
|
|
118
118
|
*/
|
|
119
119
|
defaultSigned?: boolean
|
|
120
|
+
/**
|
|
121
|
+
* Enables public URLs by default.
|
|
122
|
+
* @defaultValue true
|
|
123
|
+
*/
|
|
124
|
+
defaultPublic?: boolean
|
|
120
125
|
/**
|
|
121
126
|
* Auto-generate captions for these languages by default.
|
|
122
127
|
* Requires `"video_quality": "plus"`
|
package/dist/index.d.ts
CHANGED
|
@@ -117,6 +117,11 @@ declare interface MuxInputConfig {
|
|
|
117
117
|
* @defaultValue false
|
|
118
118
|
*/
|
|
119
119
|
defaultSigned?: boolean
|
|
120
|
+
/**
|
|
121
|
+
* Enables public URLs by default.
|
|
122
|
+
* @defaultValue true
|
|
123
|
+
*/
|
|
124
|
+
defaultPublic?: boolean
|
|
120
125
|
/**
|
|
121
126
|
* Auto-generate captions for these languages by default.
|
|
122
127
|
* Requires `"video_quality": "plus"`
|
package/dist/index.js
CHANGED
|
@@ -1489,14 +1489,18 @@ function VideoPlayer({
|
|
|
1489
1489
|
children,
|
|
1490
1490
|
...props
|
|
1491
1491
|
}) {
|
|
1492
|
-
const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = React.useRef(null),
|
|
1492
|
+
const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = React.useRef(null), {
|
|
1493
|
+
src: videoSrc,
|
|
1494
|
+
thumbnail: thumbnailSrc,
|
|
1495
|
+
error
|
|
1496
|
+
} = React.useMemo(() => {
|
|
1493
1497
|
try {
|
|
1494
|
-
const src = asset?.playbackId && getVideoSrc({ client, asset });
|
|
1495
|
-
return src ? { src } : { error: new TypeError("Asset has no playback ID") };
|
|
1498
|
+
const thumbnail = getPosterSrc({ asset, client, width: thumbnailWidth }), src = asset?.playbackId && getVideoSrc({ client, asset });
|
|
1499
|
+
return src ? { src, thumbnail } : { error: new TypeError("Asset has no playback ID") };
|
|
1496
1500
|
} catch (error2) {
|
|
1497
1501
|
return { error: error2 };
|
|
1498
1502
|
}
|
|
1499
|
-
}, [asset, client]), signedToken = React.useMemo(() => {
|
|
1503
|
+
}, [asset, client, thumbnailWidth]), signedToken = React.useMemo(() => {
|
|
1500
1504
|
try {
|
|
1501
1505
|
return new URL(videoSrc).searchParams.get("token");
|
|
1502
1506
|
} catch {
|
|
@@ -1513,7 +1517,7 @@ function VideoPlayer({
|
|
|
1513
1517
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1514
1518
|
MuxPlayer__default.default,
|
|
1515
1519
|
{
|
|
1516
|
-
poster:
|
|
1520
|
+
poster: thumbnailSrc,
|
|
1517
1521
|
ref: muxPlayer,
|
|
1518
1522
|
...props,
|
|
1519
1523
|
playsInline: !0,
|
|
@@ -1523,7 +1527,7 @@ function VideoPlayer({
|
|
|
1523
1527
|
crossOrigin: "anonymous",
|
|
1524
1528
|
metadata: {
|
|
1525
1529
|
player_name: "Sanity Admin Dashboard",
|
|
1526
|
-
player_version: "2.
|
|
1530
|
+
player_version: "2.11.0",
|
|
1527
1531
|
page_type: "Preview Player"
|
|
1528
1532
|
},
|
|
1529
1533
|
audio: isAudio,
|
|
@@ -2900,25 +2904,29 @@ const TopControls = styledComponents.styled.div`
|
|
|
2900
2904
|
onCancel,
|
|
2901
2905
|
filename,
|
|
2902
2906
|
text = "Uploading"
|
|
2903
|
-
}) =>
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2907
|
+
}) => {
|
|
2908
|
+
const isCancelDisabled = progress >= 90;
|
|
2909
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CardWrapper, { tone: "primary", padding: 4, border: !0, height: "fill", children: /* @__PURE__ */ jsxRuntime.jsxs(FlexWrapper, { align: "center", justify: "space-between", height: "fill", direction: "row", gap: 2, children: [
|
|
2910
|
+
/* @__PURE__ */ jsxRuntime.jsxs(LeftSection, { children: [
|
|
2911
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", gap: [3, 3, 2, 2], direction: ["column", "column", "row"], children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 2, children: [
|
|
2912
|
+
text,
|
|
2913
|
+
/* @__PURE__ */ jsxRuntime.jsx(CodeWrapper, { size: 1, children: filename || "..." })
|
|
2914
|
+
] }) }) }),
|
|
2915
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.Card, { marginTop: 3, radius: 5, shadow: 1, children: /* @__PURE__ */ jsxRuntime.jsx(sanity.LinearProgress, { value: progress }) })
|
|
2916
|
+
] }),
|
|
2917
|
+
onCancel ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2918
|
+
ui.Button,
|
|
2919
|
+
{
|
|
2920
|
+
fontSize: 2,
|
|
2921
|
+
text: "Cancel upload",
|
|
2922
|
+
mode: "ghost",
|
|
2923
|
+
tone: "critical",
|
|
2924
|
+
onClick: onCancel,
|
|
2925
|
+
disabled: isCancelDisabled
|
|
2926
|
+
}
|
|
2927
|
+
) : null
|
|
2928
|
+
] }) });
|
|
2929
|
+
}, Player = ({ asset, buttons, readOnly, onChange }) => {
|
|
2922
2930
|
const isLoading = React.useMemo(() => asset?.status === "preparing" ? "Preparing the video" : asset?.status === "waiting_for_upload" ? "Waiting for upload to start" : asset?.status === "waiting" ? "Processing upload" : !(asset?.status === "ready" || typeof asset?.status > "u"), [asset]), isPreparingStaticRenditions = React.useMemo(() => asset?.data?.static_renditions?.status === "preparing", [asset?.data?.static_renditions?.status]), playRef = React.useRef(null), muteRef = React.useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
|
|
2923
2931
|
return React.useEffect(() => {
|
|
2924
2932
|
const style = document.createElement("style");
|
|
@@ -3415,7 +3423,7 @@ function UploadConfiguration({
|
|
|
3415
3423
|
max_resolution_tier: pluginConfig.max_resolution_tier,
|
|
3416
3424
|
mp4_support: pluginConfig.mp4_support,
|
|
3417
3425
|
signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
|
|
3418
|
-
public_policy:
|
|
3426
|
+
public_policy: pluginConfig.defaultPublic,
|
|
3419
3427
|
normalize_audio: pluginConfig.normalize_audio,
|
|
3420
3428
|
text_tracks: autoTextTracks
|
|
3421
3429
|
}
|
|
@@ -3785,7 +3793,7 @@ function Uploader(props) {
|
|
|
3785
3793
|
handleClick: (event) => events$.next(event)
|
|
3786
3794
|
};
|
|
3787
3795
|
})()
|
|
3788
|
-
).current, uploadRef = React.useRef(null), [state, dispatch] = React.useReducer(
|
|
3796
|
+
).current, uploadRef = React.useRef(null), uploadingDocumentId = React.useRef(null), [state, dispatch] = React.useReducer(
|
|
3789
3797
|
(prev, action) => {
|
|
3790
3798
|
switch (action.action) {
|
|
3791
3799
|
case "stageUpload":
|
|
@@ -3811,9 +3819,9 @@ function Uploader(props) {
|
|
|
3811
3819
|
});
|
|
3812
3820
|
case "reset":
|
|
3813
3821
|
case "complete":
|
|
3814
|
-
return uploadRef.current?.unsubscribe(), uploadRef.current = null, INITIAL_STATE;
|
|
3822
|
+
return uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null, INITIAL_STATE;
|
|
3815
3823
|
case "error":
|
|
3816
|
-
return uploadRef.current?.unsubscribe(), uploadRef.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
|
|
3824
|
+
return uploadRef.current?.unsubscribe(), uploadRef.current = null, uploadingDocumentId.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
|
|
3817
3825
|
default:
|
|
3818
3826
|
return prev;
|
|
3819
3827
|
}
|
|
@@ -3824,9 +3832,21 @@ function Uploader(props) {
|
|
|
3824
3832
|
error: null
|
|
3825
3833
|
}
|
|
3826
3834
|
);
|
|
3827
|
-
React.useEffect(() =>
|
|
3828
|
-
|
|
3829
|
-
|
|
3835
|
+
React.useEffect(() => {
|
|
3836
|
+
const cleanup = () => {
|
|
3837
|
+
if (uploadRef.current && !uploadRef.current.closed && uploadRef.current.unsubscribe(), uploadingDocumentId.current && props.asset?._id !== uploadingDocumentId.current) {
|
|
3838
|
+
const docId = uploadingDocumentId.current;
|
|
3839
|
+
uploadingDocumentId.current = null, props.client.delete(docId).catch((err) => {
|
|
3840
|
+
console.warn("Failed to cleanup orphaned upload document:", err);
|
|
3841
|
+
});
|
|
3842
|
+
}
|
|
3843
|
+
}, handleBeforeUnload = () => {
|
|
3844
|
+
cleanup();
|
|
3845
|
+
};
|
|
3846
|
+
return window.addEventListener("beforeunload", handleBeforeUnload), window.addEventListener("pagehide", handleBeforeUnload), () => {
|
|
3847
|
+
window.removeEventListener("beforeunload", handleBeforeUnload), window.removeEventListener("pagehide", handleBeforeUnload), cleanup();
|
|
3848
|
+
};
|
|
3849
|
+
}, [props.client, props.asset?._id]);
|
|
3830
3850
|
const startUpload = (settings) => {
|
|
3831
3851
|
const { stagedUpload } = state;
|
|
3832
3852
|
if (!stagedUpload || uploadRef.current) return;
|
|
@@ -3849,7 +3869,7 @@ function Uploader(props) {
|
|
|
3849
3869
|
operators.takeUntil(
|
|
3850
3870
|
cancelUploadButton.observable.pipe(
|
|
3851
3871
|
operators.tap(() => {
|
|
3852
|
-
|
|
3872
|
+
uploadingDocumentId.current && (props.client.delete(uploadingDocumentId.current), uploadingDocumentId.current = null);
|
|
3853
3873
|
})
|
|
3854
3874
|
)
|
|
3855
3875
|
)
|
|
@@ -3860,6 +3880,8 @@ function Uploader(props) {
|
|
|
3860
3880
|
next: (event) => {
|
|
3861
3881
|
switch (event.type) {
|
|
3862
3882
|
case "uuid":
|
|
3883
|
+
uploadingDocumentId.current = event.uuid, dispatch({ action: "progressInfo", ...event });
|
|
3884
|
+
break;
|
|
3863
3885
|
case "file":
|
|
3864
3886
|
case "url":
|
|
3865
3887
|
dispatch({ action: "progressInfo", ...event });
|
|
@@ -3868,7 +3890,7 @@ function Uploader(props) {
|
|
|
3868
3890
|
dispatch({ action: "progress", percent: event.percent });
|
|
3869
3891
|
break;
|
|
3870
3892
|
case "success":
|
|
3871
|
-
dispatch({ action: "progress", percent: 100 }), props.onChange(
|
|
3893
|
+
dispatch({ action: "progress", percent: 100 }), uploadingDocumentId.current = null, props.onChange(
|
|
3872
3894
|
sanity.PatchEvent.from([
|
|
3873
3895
|
sanity.setIfMissing({ asset: {} }),
|
|
3874
3896
|
sanity.set({ _type: "reference", _weak: !0, _ref: event.asset._id }, ["asset"])
|
|
@@ -4233,6 +4255,7 @@ const muxVideoSchema = {
|
|
|
4233
4255
|
video_quality: "plus",
|
|
4234
4256
|
max_resolution_tier: "1080p",
|
|
4235
4257
|
normalize_audio: !1,
|
|
4258
|
+
defaultPublic: !0,
|
|
4236
4259
|
defaultSigned: !1,
|
|
4237
4260
|
tool: DEFAULT_TOOL_CONFIG,
|
|
4238
4261
|
allowedRolesForConfiguration: []
|