sanity-plugin-mux-input 2.4.0 → 2.5.0

package/dist/index.mjs

@@ -1,8 +1,9 @@
-import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
+import { useClient as useClient$1, useDocumentStore, collate, useDocumentValues, createHookFromObservableFactory, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ErrorOutlineIcon, RetrieveIcon, RetryIcon, CheckmarkCircleIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, CheckmarkIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, LockIcon, PlayIcon, PlugIcon, UploadIcon, ResetIcon, EllipsisHorizontalIcon, TranslateIcon, DocumentVideoIcon } from "@sanity/icons";
-import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, Tooltip, Inline, useToast, TabList, Tab, TabPanel, TextInput, Label as Label$1, Grid, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
-import React, { useState, useMemo, useEffect, useRef, useId, memo, isValidElement, useCallback, useReducer, PureComponent, createElement, forwardRef, Suspense } from "react";
+import { ErrorOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, UploadIcon, ImageIcon, ResetIcon, TranslateIcon, DocumentVideoIcon } from "@sanity/icons";
+import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, TextInput, Tooltip, Inline, useToast, TabList, Tab, TabPanel, Label as Label$1, Grid, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
+import React, { useState, useMemo, useEffect, useRef, useId, memo, createContext, useContext, isValidElement, useCallback, useReducer, PureComponent, createElement, forwardRef, Suspense } from "react";
+import { useObservable } from "react-rx";
 import compact from "lodash/compact.js";
 import toLower from "lodash/toLower.js";
 import trim from "lodash/trim.js";
@@ -18,7 +19,6 @@ import { usePaneRouter } from "sanity/desk";
 import { IntentLink } from "sanity/router";
 import isNumber from "lodash/isNumber.js";
 import isString from "lodash/isString.js";
-import { useObservable } from "react-rx";
 import useSWR from "swr";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { UpChunk } from "@mux/upchunk";
@@ -71,31 +71,38 @@ const ASSET_SORT_OPTIONS = {
   createdAsc: { groq: "_createdAt asc", label: "First created (oldest)" },
   filenameAsc: { groq: "filename asc", label: "By filename (A-Z)" },
   filenameDesc: { groq: "filename desc", label: "By filename (Z-A)" }
-}, useAssetDocuments = createHookFromObservableFactory(({ documentStore, sort, searchQuery }) => {
-  const search = createSearchFilter(searchQuery), filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && "), sortFragment = ASSET_SORT_OPTIONS[sort].groq;
-  return documentStore.listenQuery(
-    /* groq */
-    `*[${filter}] | order(${sortFragment})`,
-    search.params,
-    {
-      apiVersion: SANITY_API_VERSION
-    }
-  );
-});
+}, useAssetDocuments = ({
+  documentStore,
+  sort,
+  searchQuery
+}) => {
+  const memoizedObservable = useMemo(() => {
+    const search = createSearchFilter(searchQuery), filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && "), sortFragment = ASSET_SORT_OPTIONS[sort].groq;
+    return documentStore.listenQuery(
+      /* groq */
+      `*[${filter}] | order(${sortFragment})`,
+      search.params,
+      {
+        apiVersion: SANITY_API_VERSION
+      }
+    );
+  }, [documentStore, sort, searchQuery]);
+  return useObservable(memoizedObservable, void 0);
+};
 function useAssets() {
-  const documentStore = useDocumentStore(), [sort, setSort] = useState("createdDesc"), [searchQuery, setSearchQuery] = useState(""), [assetDocuments = [], isLoading] = useAssetDocuments({ documentStore, sort, searchQuery });
+  const documentStore = useDocumentStore(), [sort, setSort] = useState("createdDesc"), [searchQuery, setSearchQuery] = useState(""), assetDocumentsObservable = useAssetDocuments({ documentStore, sort, searchQuery }), isLoading = assetDocumentsObservable === void 0;
   return {
     assets: useMemo(
       () => (
         // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-        collate(assetDocuments).map(
+        collate(assetDocumentsObservable ?? []).map(
           (collated) => ({
             ...collated.draft || collated.published || {},
             _id: collated.id
           })
         )
       ),
-      [assetDocuments]
+      [assetDocumentsObservable]
     ),
     isLoading,
     sort,
@@ -343,6 +350,17 @@ function getPlaybackId(asset) {
 function getPlaybackPolicy(asset) {
   return asset.data?.playback_ids?.find((playbackId) => asset.playbackId === playbackId.id)?.policy ?? "public";
 }
+function createUrlParamsObject(client, asset, params, audience) {
+  const playbackId = getPlaybackId(asset);
+  let searchParams = new URLSearchParams(
+    JSON.parse(JSON.stringify(params, (_, v) => v ?? void 0))
+  );
+  if (getPlaybackPolicy(asset) === "signed") {
+    const token = generateJwt(client, playbackId, audience, params);
+    searchParams = new URLSearchParams({ token });
+  }
+  return { playbackId, searchParams };
+}
 function getAnimatedPosterSrc({
   asset,
   client,
@@ -352,16 +370,22 @@ function getAnimatedPosterSrc({
   end = start + 5,
   fps = 15
 }) {
-  const params = { height, width, start, end, fps }, playbackId = getPlaybackId(asset);
-  let searchParams = new URLSearchParams(
-    JSON.parse(JSON.stringify(params, (_, v) => v ?? void 0))
-  );
-  if (getPlaybackPolicy(asset) === "signed") {
-    const token = generateJwt(client, playbackId, "g", params);
-    searchParams = new URLSearchParams({ token });
-  }
+  const params = { height, width, start, end, fps }, { playbackId, searchParams } = createUrlParamsObject(client, asset, params, "g");
   return `https://image.mux.com/${playbackId}/animated.gif?${searchParams}`;
 }
+function getPosterSrc({
+  asset,
+  client,
+  fit_mode,
+  height,
+  time = asset.thumbTime ?? void 0,
+  width
+}) {
+  const params = { fit_mode, height, width };
+  time && (params.time = time);
+  const { playbackId, searchParams } = createUrlParamsObject(client, asset, params, "t");
+  return `https://image.mux.com/${playbackId}/thumbnail.png?${searchParams}`;
+}
 const Image = styled.img`
   transition: opacity 0.175s ease-out 0s;
   display: block;
@@ -376,16 +400,18 @@ const Image = styled.img`
 };
 function VideoThumbnail({
   asset,
-  width
+  width,
+  staticImage = !1
 }) {
-  const { inView, ref } = useInView(), posterWidth = width || 250, [status, setStatus] = useState("loading"), client = useClient(), animatedSrc = useMemo(() => {
+  const { inView, ref } = useInView(), posterWidth = width || 250, [status, setStatus] = useState("loading"), client = useClient(), src = useMemo(() => {
     try {
-      return getAnimatedPosterSrc({ asset, client, width: posterWidth });
+      let thumbnail;
+      return staticImage ? thumbnail = getPosterSrc({ asset, client, width: posterWidth }) : thumbnail = getAnimatedPosterSrc({ asset, client, width: posterWidth }), thumbnail;
     } catch {
       status !== "error" && setStatus("error");
       return;
     }
-  }, [asset, client, posterWidth, status]);
+  }, [asset, client, posterWidth, status, staticImage]);
   function handleLoad() {
     setStatus("loaded");
   }
@@ -440,8 +466,8 @@ function VideoThumbnail({
         /* @__PURE__ */ jsx(
           Image,
           {
-            src: animatedSrc,
-            alt: `Preview for video ${asset.filename || asset.assetId}`,
+            src,
+            alt: `Preview for ${staticImage ? "image" : "video"} ${asset.filename || asset.assetId}`,
             onLoad: handleLoad,
             onError: handleError,
             style: {
@@ -754,6 +780,14 @@ function StopWatchIcon(props) {
     }
   );
 }
+const DialogStateContext = createContext({
+  dialogState: !1,
+  setDialogState: () => null
+}), DialogStateProvider = ({
+  dialogState,
+  setDialogState,
+  children
+}) => /* @__PURE__ */ jsx(DialogStateContext.Provider, { value: { dialogState, setDialogState }, children }), useDialogStateContext = () => useContext(DialogStateContext);
 function getVideoSrc({ asset, client }) {
   const playbackId = getPlaybackId(asset), searchParams = new URLSearchParams();
   if (getPlaybackPolicy(asset) === "signed") {
@@ -762,12 +796,100 @@ function getVideoSrc({ asset, client }) {
   }
   return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
 }
+function getDevicePixelRatio(options) {
+  const {
+    defaultDpr = 1,
+    maxDpr = 3,
+    round = !0
+  } = options || {}, dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : defaultDpr;
+  return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
+}
+function formatSeconds(seconds) {
+  if (typeof seconds != "number" || Number.isNaN(seconds))
+    return "";
+  const hrs = ~~(seconds / 3600), mins = ~~(seconds % 3600 / 60), secs = ~~seconds % 60;
+  let ret = "";
+  return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
+}
+function formatSecondsToHHMMSS(seconds) {
+  const hrs = Math.floor(seconds / 3600).toString().padStart(2, "0"), mins = Math.floor(seconds % 3600 / 60).toString().padStart(2, "0"), secs = Math.floor(seconds % 60).toString().padStart(2, "0");
+  return `${hrs}:${mins}:${secs}`;
+}
+function isValidTimeFormat(time) {
+  return /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/.test(time) || time === "";
+}
+function getSecondsFromTimeFormat(time) {
+  const [hh = 0, mm = 0, ss = 0] = time.split(":").map(Number);
+  return hh * 3600 + mm * 60 + ss;
+}
+function EditThumbnailDialog({ asset, currentTime = 0 }) {
+  const client = useClient(), { setDialogState } = useDialogStateContext(), dialogId = `EditThumbnailDialog${useId()}`, [timeFormatted, setTimeFormatted] = useState(
+    () => formatSecondsToHHMMSS(currentTime)
+  ), [nextTime, setNextTime] = useState(currentTime), [inputError, setInputError] = useState(""), assetWithNewThumbnail = useMemo(() => ({ ...asset, thumbTime: nextTime }), [asset, nextTime]), [saving, setSaving] = useState(!1), [saveThumbnailError, setSaveThumbnailError] = useState(null), handleSave = () => {
+    setSaving(!0), client.patch(asset._id).set({ thumbTime: nextTime }).commit({ returnDocuments: !1 }).then(() => void setDialogState(!1)).catch(setSaveThumbnailError).finally(() => void setSaving(!1));
+  }, width = 300 * getDevicePixelRatio({ maxDpr: 2 });
+  if (saveThumbnailError)
+    throw saveThumbnailError;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      id: dialogId,
+      header: "Edit thumbnail",
+      onClose: () => setDialogState(!1),
+      footer: /* @__PURE__ */ jsx(Stack, { padding: 3, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: inputError !== "",
+          mode: "ghost",
+          tone: "primary",
+          loading: saving,
+          onClick: handleSave,
+          text: "Set new thumbnail"
+        },
+        "thumbnail"
+      ) }),
+      children: /* @__PURE__ */ jsxs(Stack, { space: 3, padding: 3, children: [
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Current:" }),
+          /* @__PURE__ */ jsx(VideoThumbnail, { asset, width, staticImage: !0 })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "New:" }),
+          /* @__PURE__ */ jsx(VideoThumbnail, { asset: assetWithNewThumbnail, width, staticImage: !0 })
+        ] }),
+        /* @__PURE__ */ jsx(Stack, { space: 2, children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(Text, { size: 5, weight: "semibold", children: "Or" }) }) }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Selected time for thumbnail (hh:mm:ss):" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              size: 1,
+              value: timeFormatted,
+              placeholder: "hh:mm:ss",
+              onChange: (event) => {
+                const value = event.currentTarget.value;
+                if (setTimeFormatted(value), isValidTimeFormat(value)) {
+                  setInputError("");
+                  const totalSeconds = getSecondsFromTimeFormat(value);
+                  setNextTime(totalSeconds);
+                } else
+                  setInputError("Invalid time format");
+              },
+              customValidity: inputError
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 function VideoPlayer({
   asset,
+  thumbnailWidth = 250,
   children,
   ...props
 }) {
-  const client = useClient(), isAudio = assetIsAudio(asset), { src: videoSrc, error } = useMemo(() => {
+  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), thumbnail = getPosterSrc({ asset, client, width: thumbnailWidth }), { src: videoSrc, error } = useMemo(() => {
     try {
       const src = asset?.playbackId && getVideoSrc({ client, asset });
       return src ? { src } : { error: new TypeError("Asset has no playback ID") };
@@ -785,49 +907,54 @@ function VideoPlayer({
   return isAudio && (aspectRatio = props.forceAspectRatio ? (
     // 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(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
-    videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        MuxPlayer,
+  ) : 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: thumbnail,
+            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.5.0",
+              page_type: "Preview Player"
+            },
+            audio: isAudio,
+            style: {
+              height: "100%",
+              width: "100%",
+              display: "block",
+              objectFit: "contain"
+            }
+          }
+        ),
+        children
+      ] }),
+      error ? /* @__PURE__ */ jsx(
+        "div",
         {
-          ...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.4.0",
-            page_type: "Preview Player"
-          },
-          audio: isAudio,
           style: {
-            height: "100%",
-            width: "100%",
-            display: "block",
-            objectFit: "contain"
-          }
+            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
     ] }),
-    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
+    dialogState === "edit-thumbnail" && /* @__PURE__ */ jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime })
   ] });
 }
 function assetIsAudio(asset) {
@@ -1150,13 +1277,6 @@ const useDocReferences = createHookFromObservableFactory(({ documentStore, id })
     apiVersion: SANITY_API_VERSION
   }
 ));
-function formatSeconds(seconds) {
-  if (typeof seconds != "number" || Number.isNaN(seconds))
-    return "";
-  const hrs = ~~(seconds / 3600), mins = ~~(seconds % 3600 / 60), secs = ~~seconds % 60;
-  let ret = "";
-  return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
-}
 function getVideoMetadata(doc) {
   const id = doc.assetId || doc._id || "", date = doc.data?.created_at ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
   return {
@@ -3279,7 +3399,7 @@ const FileButton = styled(MenuItem)(({ theme }) => {
 `, LockButton = styled(Button)`
   background: transparent;
   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]), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
   return useEffect(() => {
@@ -3323,6 +3443,14 @@ function PlayerActionsMenu(props) {
               onClick: () => setDialogState("select-video")
             }
           ),
+          isVideoAsset(asset) && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: ImageIcon,
+              text: "Thumbnail",
+              onClick: () => setDialogState("edit-thumbnail")
+            }
+          ),
           /* @__PURE__ */ jsx(MenuDivider, {}),
           /* @__PURE__ */ jsx(
             MenuItem,
@@ -3941,7 +4069,7 @@ function Uploader(props) {
         case "commitUpload":
           return Object.assign({}, prev, { uploadStatus: { progress: 0 } });
         case "progressInfo": {
-          const { type, action: _, ...payload } = action;
+          const { ...payload } = action;
           return Object.assign({}, prev, {
             uploadStatus: {
               ...prev.uploadStatus,
@@ -4060,7 +4188,7 @@ function Uploader(props) {
     idx > -1 && dragEnteredEls.current.splice(idx, 1), dragEnteredEls.current.length === 0 && setDragState(null);
   };
   if (state.error !== null) {
-    const error = { state };
+    const error = {};
     return /* @__PURE__ */ jsxs(Flex, { gap: 3, direction: "column", justify: "center", align: "center", children: [
       /* @__PURE__ */ jsx(Text, { size: 5, muted: !0, children: /* @__PURE__ */ jsx(ErrorOutlineIcon, {}) }),
       /* @__PURE__ */ jsx(Text, { children: "Something went wrong" }),
@@ -4103,20 +4231,27 @@ function Uploader(props) {
         onPaste: handlePaste,
         ref: containerRef,
         children: props.asset ? /* @__PURE__ */ jsx(
-          Player,
+          DialogStateProvider,
           {
-            readOnly: props.readOnly,
-            asset: props.asset,
-            onChange: props.onChange,
-            buttons: /* @__PURE__ */ jsx(
-              PlayerActionsMenu$1,
+            dialogState: props.dialogState,
+            setDialogState: props.setDialogState,
+            children: /* @__PURE__ */ jsx(
+              Player,
               {
+                readOnly: props.readOnly,
                 asset: props.asset,
-                dialogState: props.dialogState,
-                setDialogState: props.setDialogState,
                 onChange: props.onChange,
-                onSelect: handleUpload,
-                readOnly: props.readOnly
+                buttons: /* @__PURE__ */ jsx(
+                  PlayerActionsMenu$1,
+                  {
+                    asset: props.asset,
+                    dialogState: props.dialogState,
+                    setDialogState: props.setDialogState,
+                    onChange: props.onChange,
+                    onSelect: handleUpload,
+                    readOnly: props.readOnly
+                  }
+                )
               }
             )
           }