sanity-plugin-mux-input 2.12.1 → 2.13.0

package/dist/index.mjs

@@ -1482,10 +1482,21 @@ function EditThumbnailDialog({ asset, currentTime = 0 }) {
     }
   );
 }
+function AudioIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      style: { opacity: "0.65" },
+      d: "M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
+    }
+  ) });
+}
 function VideoPlayer({
   asset,
   thumbnailWidth = 250,
   children,
+  hlsConfig,
   ...props
 }) {
   const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), {
@@ -1511,52 +1522,79 @@ function VideoPlayer({
     // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
     props.forceAspectRatio * 1.2
   ) : AUDIO_ASPECT_RATIO), /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
-      videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          MuxPlayer,
-          {
-            poster: thumbnailSrc,
-            ref: muxPlayer,
-            ...props,
-            playsInline: !0,
-            playbackId: asset.playbackId,
-            tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
-            preload: "metadata",
-            crossOrigin: "anonymous",
-            metadata: {
-              player_name: "Sanity Admin Dashboard",
-              player_version: "2.12.1",
-              page_type: "Preview Player"
-            },
-            audio: isAudio,
-            style: {
-              height: "100%",
-              width: "100%",
-              display: "block",
-              objectFit: "contain"
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        tone: "transparent",
+        style: {
+          aspectRatio,
+          position: "relative",
+          ...isAudio && { display: "flex", alignItems: "flex-end" }
+        },
+        children: [
+          videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
+            isAudio && /* @__PURE__ */ jsx(
+              AudioIcon,
+              {
+                style: {
+                  padding: "0.5em",
+                  width: "2.2em",
+                  height: "2.2em",
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  zIndex: 1
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MuxPlayer,
+              {
+                poster: isAudio ? void 0 : thumbnailSrc,
+                ref: muxPlayer,
+                ...props,
+                playsInline: !0,
+                playbackId: asset.playbackId,
+                tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
+                preload: "metadata",
+                crossOrigin: "anonymous",
+                metadata: {
+                  player_name: "Sanity Admin Dashboard",
+                  player_version: "2.13.0",
+                  page_type: "Preview Player"
+                },
+                audio: isAudio,
+                _hlsConfig: hlsConfig,
+                style: {
+                  ...!isAudio && { height: "100%" },
+                  width: "100%",
+                  display: "block",
+                  objectFit: "contain",
+                  ...isAudio && { alignSelf: "end" }
+                }
+              }
+            ),
+            children
+          ] }),
+          error ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)"
+              },
+              children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
+                /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
+                typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
+              ] })
             }
-          }
-        ),
-        children
-      ] }),
-      error ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)"
-          },
-          children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
-            /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
-            typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
-          ] })
-        }
-      ) : null,
-      children
-    ] }),
+          ) : null,
+          children
+        ]
+      }
+    ),
     dialogState === "edit-thumbnail" && /* @__PURE__ */ jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime })
   ] });
 }
@@ -2299,14 +2337,7 @@ function VideoInBrowser({
                       alignItems: "center",
                       justifyContent: "center"
                     },
-                    children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "3em", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        fill: "currentColor",
-                        style: { opacity: "0.65" },
-                        d: "M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
-                      }
-                    ) })
+                    children: /* @__PURE__ */ jsx(AudioIcon, { width: "3em", height: "3em" })
                   }
                 ) : /* @__PURE__ */ jsx(VideoThumbnail, { asset })
               ] }),
@@ -2931,7 +2962,7 @@ const TopControls = styled.div`
       }
     ) : null
   ] }) });
-}, Player = ({ asset, buttons, readOnly, onChange }) => {
+}, Player = ({ asset, buttons, readOnly, onChange, config }) => {
   const isLoading = 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 = useMemo(() => {
     if (asset?.data?.static_renditions?.status && asset?.data?.static_renditions?.status !== "disabled")
       return !1;
@@ -2952,7 +2983,7 @@ const TopControls = styled.div`
       text: isLoading !== !0 && isLoading || "Waiting for Mux to complete the upload",
       onCancel: readOnly ? void 0 : () => handleCancelUpload()
     }
-  ) : /* @__PURE__ */ jsxs(VideoPlayer, { asset, children: [
+  ) : /* @__PURE__ */ jsxs(VideoPlayer, { asset, hlsConfig: config?.hlsConfig, children: [
     buttons && /* @__PURE__ */ jsx(TopControls, { slot: "top-chrome", children: buttons }),
     isPreparingStaticRenditions && /* @__PURE__ */ jsx(
       Card,
@@ -3064,7 +3095,7 @@ const FileButton = styled(MenuItem)(({ theme }) => {
   color: white;
 `, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 function PlayerActionsMenu(props) {
-  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
+  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), { hasConfigAccess } = useAccessControl(props.config), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
   return useEffect(() => {
     open && dialogState && setOpen(!1);
   }, [dialogState, open]), useClickOutsideEvent(
@@ -3090,7 +3121,7 @@ function PlayerActionsMenu(props) {
           /* @__PURE__ */ jsx(
             FileInputMenuItem,
             {
-              accept: "video/*",
+              accept,
               icon: UploadIcon,
               onSelect,
               text: "Upload",
@@ -3454,7 +3485,47 @@ function UploadConfiguration({
     (r) => r !== "highest" && r !== "audio-only"
   ).length > 0, [config.static_renditions]), [renditionMode, setRenditionMode] = useState(
     isAdvancedMode ? "advanced" : "standard"
-  ), toggleRendition = (rendition) => {
+  ), [videoDuration, setVideoDuration] = useState(null), [urlFileSize, setUrlFileSize] = useState(null), [isLoadingDuration, setIsLoadingDuration] = useState(!1), [isLoadingFileSize, setIsLoadingFileSize] = useState(!1), [validationError, setValidationError] = useState(null), [canSkipFileSizeValidation, setCanSkipFileSizeValidation] = useState(!1), MAX_FILE_SIZE = pluginConfig.maxAssetFileSize, MAX_DURATION_SECONDS = pluginConfig.maxAssetDuration;
+  useEffect(() => {
+    setVideoDuration(null), setUrlFileSize(null), setIsLoadingDuration(!1), setIsLoadingFileSize(!1), setValidationError(null), setCanSkipFileSizeValidation(!1);
+    let videoElement = null, currentVideoSrc = null;
+    const cleanupVideo = (shouldRevokeUrl) => {
+      videoElement && (videoElement.onloadedmetadata = null, videoElement.onerror = null, videoElement.src = "", videoElement.load(), videoElement = null), shouldRevokeUrl && currentVideoSrc?.startsWith("blob:") && URL.revokeObjectURL(currentVideoSrc), currentVideoSrc = null;
+    }, validateDuration = (videoSrc, shouldRevokeUrl = !1) => {
+      !MAX_DURATION_SECONDS || MAX_DURATION_SECONDS <= 0 || (setIsLoadingDuration(!0), videoElement = document.createElement("video"), videoElement.preload = "metadata", currentVideoSrc = videoSrc, videoElement.onloadedmetadata = () => {
+        const duration = videoElement.duration;
+        setVideoDuration(duration), setIsLoadingDuration(!1), duration > MAX_DURATION_SECONDS && setValidationError(
+          `Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`
+        ), cleanupVideo(shouldRevokeUrl);
+      }, videoElement.onerror = () => {
+        setIsLoadingDuration(!1), console.warn("Could not read video metadata for validation"), cleanupVideo(shouldRevokeUrl);
+      }, videoElement.src = videoSrc);
+    }, validateFileSize = (size) => MAX_FILE_SIZE === void 0 || size <= MAX_FILE_SIZE ? !0 : (setValidationError(
+      `File size (${formatBytes(size)}) exceeds maximum allowed size of ${formatBytes(MAX_FILE_SIZE)}`
+    ), !1);
+    if (stagedUpload.type === "file") {
+      const file = stagedUpload.files[0];
+      validateFileSize(file.size) && validateDuration(URL.createObjectURL(file), !0);
+    }
+    if (stagedUpload.type === "url") {
+      const url = stagedUpload.url;
+      (async () => {
+        setIsLoadingFileSize(!0);
+        try {
+          const contentLength = (await fetch(url, { method: "HEAD" })).headers.get("content-length"), fileSize = contentLength ? parseInt(contentLength, 10) : null;
+          setIsLoadingFileSize(!1), fileSize && setUrlFileSize(fileSize);
+          const shouldValidateDuration = MAX_FILE_SIZE === void 0 || fileSize === null || validateFileSize(fileSize);
+          fileSize === null && MAX_FILE_SIZE !== void 0 && setCanSkipFileSizeValidation(!0), shouldValidateDuration && validateDuration(url);
+        } catch {
+          setIsLoadingFileSize(!1), console.warn("Could not validate file size from URL"), setCanSkipFileSizeValidation(!0), validateDuration(url);
+        }
+      })();
+    }
+    return () => {
+      cleanupVideo(!0);
+    };
+  }, [stagedUpload, MAX_FILE_SIZE, MAX_DURATION_SECONDS]);
+  const toggleRendition = (rendition) => {
     const current = config.static_renditions, hasRendition = current.includes(rendition);
     dispatch(hasRendition ? {
       action: "static_renditions",
@@ -3489,6 +3560,13 @@ function UploadConfiguration({
       header: "Configure Mux Upload",
       onClose,
       children: /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 2, children: [
+        validationError && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", radius: 2, marginBottom: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "flex-start", children: [
+          /* @__PURE__ */ jsx(ErrorOutlineIcon, { width: 20, height: 20 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Validation Error" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: validationError })
+          ] })
+        ] }) }),
         /* @__PURE__ */ jsx(Label$1, { size: 3, children: "FILE TO UPLOAD" }),
         /* @__PURE__ */ jsx(
           Card,
@@ -3502,7 +3580,14 @@ function UploadConfiguration({
               /* @__PURE__ */ jsx(DocumentVideoIcon, { fontSize: "2em" }),
               /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
                 /* @__PURE__ */ jsx(Text, { textOverflow: "ellipsis", as: "h2", size: 3, children: stagedUpload.type === "file" ? stagedUpload.files[0].name : stagedUpload.url }),
-                /* @__PURE__ */ jsx(Text, { as: "p", size: 1, muted: !0, children: stagedUpload.type === "file" ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})` : "File From URL (Unknown size)" })
+                /* @__PURE__ */ jsx(Text, { as: "p", size: 1, muted: !0, children: stagedUpload.type === "file" ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})` : urlFileSize ? `File From URL (${formatBytes(urlFileSize)})` : isLoadingFileSize ? "File From URL (Loading size...)" : "File From URL (Unknown size)" }),
+                stagedUpload.type === "file" && /* @__PURE__ */ jsxs(Stack, { space: 1, children: [
+                  isLoadingDuration && /* @__PURE__ */ jsx(Text, { as: "p", size: 1, muted: !0, children: "Reading video metadata..." }),
+                  videoDuration !== null && !validationError && /* @__PURE__ */ jsxs(Text, { as: "p", size: 1, muted: !0, children: [
+                    "Duration: ",
+                    formatSeconds(videoDuration)
+                  ] })
+                ] })
               ] })
             ] })
           }
@@ -3694,11 +3779,13 @@ function UploadConfiguration({
         /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
           Button,
           {
-            disabled: !basicConfig && !config.public_policy && !config.signed_policy,
+            disabled: !basicConfig && !config.public_policy && !config.signed_policy || validationError !== null || isLoadingDuration || isLoadingFileSize && !canSkipFileSizeValidation,
             icon: UploadIcon,
             text: "Upload",
             tone: "positive",
-            onClick: () => startUpload(formatUploadConfig(config))
+            onClick: () => {
+              validationError || startUpload(formatUploadConfig(config));
+            }
           }
         ) })
       ] })
@@ -3821,7 +3908,7 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card),
     /* @__PURE__ */ jsx(
       HiddenInput,
       {
-        accept: accept || "video/*",
+        accept,
         ref: inputRef,
         tabIndex: 0,
         type: "file",
@@ -3842,8 +3929,11 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card),
     )
   ] });
 };
+function formatAcceptString(accept) {
+  return accept.split(",").map((type) => type.trim().replace("/*", "")).join(" or ");
+}
 function UploadPlaceholder(props) {
-  const { setDialogState, readOnly, onSelect, hovering, needsSetup } = props, handleBrowse = useCallback(() => setDialogState("select-video"), [setDialogState]), handleConfigureApi = useCallback(() => setDialogState("secrets"), [setDialogState]), { hasConfigAccess } = useAccessControl(props.config);
+  const { setDialogState, readOnly, onSelect, hovering, needsSetup, accept } = props, handleBrowse = useCallback(() => setDialogState("select-video"), [setDialogState]), handleConfigureApi = useCallback(() => setDialogState("secrets"), [setDialogState]), { hasConfigAccess } = useAccessControl(props.config);
   return /* @__PURE__ */ jsx(
     Card,
     {
@@ -3866,12 +3956,17 @@ function UploadPlaceholder(props) {
           children: [
             /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "flex-start", gap: 2, flex: 1, children: [
               /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Text, { muted: !0, children: /* @__PURE__ */ jsx(DocumentVideoIcon, {}) }) }),
-              /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "Drag video or paste URL here" }) })
+              /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+                "Drag ",
+                formatAcceptString(accept),
+                " file or paste URL here"
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
               /* @__PURE__ */ jsx(
                 FileInputButton,
                 {
+                  accept,
                   mode: "bleed",
                   tone: "default",
                   icon: UploadIcon,
@@ -4022,21 +4117,33 @@ function Uploader(props) {
       complete: () => dispatch({ action: "complete" }),
       error: (error) => dispatch({ action: "error", error })
     });
-  }, handleUpload = (files) => {
-    dispatch({
+  }, invalidFileToast = useCallback(() => {
+    toast.push({
+      status: "error",
+      title: `Invalid file type. Accepted types: ${props.config.acceptedMimeTypes?.join(", ")}`
+    });
+  }, [props.config.acceptedMimeTypes, toast]), isInvalidFile = (files) => Array.from(files).some((file) => !props.config.acceptedMimeTypes?.some((acceptedType) => {
+    const pattern = `^${acceptedType.replace("*", ".*")}$`;
+    return new RegExp(pattern).test(file.type);
+  })), handleUpload = (files) => {
+    isInvalidFile(files) || dispatch({
       action: "stageUpload",
       input: { type: "file", files }
     });
   }, handlePaste = (event) => {
     event.preventDefault(), event.stopPropagation();
-    const url = (event.clipboardData || window.clipboardData).getData("text")?.trim();
+    const url = (event.clipboardData || window.clipboardData)?.getData("text")?.trim();
     if (!isValidUrl(url)) {
       toast.push({ status: "error", title: "Invalid URL for Mux video input." });
       return;
     }
     dispatch({ action: "stageUpload", input: { type: "url", url } });
   }, handleDrop = (event) => {
-    setDragState(null), event.preventDefault(), event.stopPropagation(), extractDroppedFiles(event.nativeEvent.dataTransfer).then((files) => {
+    if (event.preventDefault(), event.stopPropagation(), dragState === "invalid") {
+      invalidFileToast(), setDragState(null);
+      return;
+    }
+    setDragState(null), extractDroppedFiles(event.nativeEvent.dataTransfer).then((files) => {
       dispatch({
         action: "stageUpload",
         input: { type: "file", files }
@@ -4046,8 +4153,11 @@ function Uploader(props) {
     event.preventDefault(), event.stopPropagation();
   }, handleDragEnter = (event) => {
     event.stopPropagation(), dragEnteredEls.current.push(event.target);
-    const type = event.dataTransfer.items?.[0]?.type;
-    setDragState(type?.startsWith("video/") ? "valid" : "invalid");
+    const type = event.dataTransfer.items?.[0]?.type, isValidType = props.config.acceptedMimeTypes?.some((acceptedType) => {
+      const pattern = `^${acceptedType.replace("*", ".*")}$`;
+      return new RegExp(pattern).test(type);
+    });
+    setDragState(isValidType ? "valid" : "invalid");
   }, handleDragLeave = (event) => {
     event.stopPropagation();
     const idx = dragEnteredEls.current.indexOf(event.target);
@@ -4085,7 +4195,9 @@ function Uploader(props) {
       }
     );
   let tone;
-  return dragState && (tone = dragState === "valid" ? "positive" : "critical"), /* @__PURE__ */ jsxs(Fragment, { children: [
+  dragState && (tone = dragState === "valid" ? "positive" : "critical");
+  const acceptMimeString = props.config?.acceptedMimeTypes?.length ? props.config.acceptedMimeTypes.join(",") : "video/*, audio/*";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       UploadCard,
       {
@@ -4107,9 +4219,11 @@ function Uploader(props) {
                 readOnly: props.readOnly,
                 asset: props.asset,
                 onChange: props.onChange,
+                config: props.config,
                 buttons: /* @__PURE__ */ jsx(
                   PlayerActionsMenu$1,
                   {
+                    accept: acceptMimeString,
                     asset: props.asset,
                     dialogState: props.dialogState,
                     setDialogState: props.setDialogState,
@@ -4125,6 +4239,7 @@ function Uploader(props) {
         ) : /* @__PURE__ */ jsx(
           UploadPlaceholder,
           {
+            accept: acceptMimeString,
             hovering: dragState !== null,
             onSelect: handleUpload,
             readOnly: !!props.readOnly,
@@ -4385,7 +4500,8 @@ const muxVideoSchema = {
   defaultPublic: !0,
   defaultSigned: !1,
   tool: DEFAULT_TOOL_CONFIG,
-  allowedRolesForConfiguration: []
+  allowedRolesForConfiguration: [],
+  acceptedMimeTypes: ["video/*", "audio/*"]
 };
 function convertLegacyConfig(config) {
   return config.static_renditions && config.static_renditions.length > 0 ? { static_renditions: config.static_renditions } : config.mp4_support === "standard" ? { static_renditions: ["highest"] } : { static_renditions: [] };