sanity-plugin-mux-input 2.4.0 → 2.5.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Sanity.io
+Copyright (c) 2025 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -77,19 +77,19 @@ The Mux plugin will find its access tokens by fetching this document.
 
 When a Mux video is uploaded/chosen in a document via this plugin, it gets stored as a reference to the video document:
 
-```json
+```json5
 // example document
 {
-  "_type": "exampleSchemaWithVideo",
+  _type: 'exampleSchemaWithVideo',
   // Example video field
-  "myVideoField": {
-    "_type": "mux.video",
-    "asset": {
-      "_type": "reference",
-      "_weak": true,
-      "_ref": "4e37284e-cec2-406d-973c-fdf9ab1e5598" // 👈 ID of the document holding the video's Mux data
-    }
-  }
+  myVideoField: {
+    _type: 'mux.video',
+    asset: {
+      _type: 'reference',
+      _weak: true,
+      _ref: '4e37284e-cec2-406d-973c-fdf9ab1e5598', // 👈 ID of the document holding the video's Mux data
+    },
+  },
 }
 ```
 
@@ -112,54 +112,55 @@ Before you can display videos in your frontend, you need to follow these referen
 
 For reference, here's an example `mux.videoAsset` document:
 
-```json
+```json5
 {
-  "_id": "4e37284e-cec2-406d-973c-fdf9ab1e5598",
-  "_type": "mux.videoAsset",
-  "assetId": "7ovyI76F92n02H00mWP7lOCZMIU00N4iysDiQDNppX026HY",
-  "filename": "mux-example-video.mp4",
-  "status": "ready",
-  "playbackId": "YA02HBpY02fKWHDRMNilo301pdH02LY3k9HTcK43ItGJLWA",
+  _id: '4e37284e-cec2-406d-973c-fdf9ab1e5598',
+  _type: 'mux.videoAsset',
+  assetId: '7ovyI76F92n02H00mWP7lOCZMIU00N4iysDiQDNppX026HY',
+  filename: 'mux-example-video.mp4',
+  status: 'ready',
+  playbackId: 'YA02HBpY02fKWHDRMNilo301pdH02LY3k9HTcK43ItGJLWA',
+  thumbTime: 65.82,
   // Full Mux asset data:
-  "data": {
-    "encoding_tier": "smart",
-    "max_resolution_tier": "1080p",
-    "aspect_ratio": "16:9",
-    "created_at": "1706645034",
-    "duration": 25.492133,
-    "status": "ready",
-    "master_access": "none",
-    "max_stored_frame_rate": 29.97,
-    "playback_ids": [
+  data: {
+    encoding_tier: 'smart',
+    max_resolution_tier: '1080p',
+    aspect_ratio: '16:9',
+    created_at: '1706645034',
+    duration: 25.492133,
+    status: 'ready',
+    master_access: 'none',
+    max_stored_frame_rate: 29.97,
+    playback_ids: [
       {
-        "id": "YA02HBpY02fKWHDRMNilo301pdH02LY3k9HTcK43ItGJLWA",
-        "policy": "signed"
-      }
+        id: 'YA02HBpY02fKWHDRMNilo301pdH02LY3k9HTcK43ItGJLWA',
+        policy: 'signed',
+      },
     ],
-    "resolution_tier": "1080p",
-    "ingest_type": "on_demand_url",
-    "max_stored_resolution": "HD",
-    "tracks": [
+    resolution_tier: '1080p',
+    ingest_type: 'on_demand_url',
+    max_stored_resolution: 'HD',
+    tracks: [
       {
-        "max_channel_layout": "stereo",
-        "max_channels": 2,
-        "id": "00MKMC73SYimw1YTh0102lPJJp9w2R5rHddpNX1N9opAMk",
-        "type": "audio",
-        "primary": true,
-        "duration": 25.45
+        max_channel_layout: 'stereo',
+        max_channels: 2,
+        id: '00MKMC73SYimw1YTh0102lPJJp9w2R5rHddpNX1N9opAMk',
+        type: 'audio',
+        primary: true,
+        duration: 25.45,
       },
       {
-        "max_frame_rate": 29.97,
-        "max_height": 1080,
-        "id": "g1wEph3CVvbJL01YNKzAWMyH8N1SxW00WeECGjqwEHW9g",
-        "type": "video",
-        "duration": 25.4254,
-        "max_width": 1920
-      }
+        max_frame_rate: 29.97,
+        max_height: 1080,
+        id: 'g1wEph3CVvbJL01YNKzAWMyH8N1SxW00WeECGjqwEHW9g',
+        type: 'video',
+        duration: 25.4254,
+        max_width: 1920,
+      },
     ],
-    "id": "7ovyI76F92n02H00mWP7lOCZMIU00N4iysDiQDNppX026HY",
-    "mp4_support": "none"
-  }
+    id: '7ovyI76F92n02H00mWP7lOCZMIU00N4iysDiQDNppX026HY',
+    mp4_support: 'none',
+  },
 }
 ```
 
@@ -279,7 +280,7 @@ Issues are actively monitored and PRs are welcome. When developing this plugin t
 
 ### Publishing
 
-Run the ["CI" workflow](https://github.com/sanity-io/sanity-plugin-mux-input/actions/workflows/ci.yml).
+You can run the ["CI and Release" workflow](<[https://github.com/sanity-io/sanity-plugin-mux-input/actions/workflows/ci.yml](https://github.com/sanity-io/sanity-plugin-mux-input/actions/workflows/main.yml)>).
 Make sure to select the main branch and check "Release new version".
 
 Semantic release will only release on configured branches, so it is safe to run release on any branch.
@@ -301,11 +302,12 @@ After Studio v3 turns stable this behavior will change. The v2 version will then
 
 ### Develop & test
 
-This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
-with default configuration for build & watch scripts.
+You can run the example locally by doing the following:
 
-See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
-on how to run this plugin with hotreload in the studio.
+1. run `npm install` and `npm dev` on the root of the repo
+2. In the terminal, a command with `yalc` will be shown, that command will allow you to run the version that you have locally directly on the example or on your own app.
+3. run `npm install` and `npm dev` on the `/example` directory where the app with the example exists or in your own app
+4. the studio and app should auto reload with your changes in the plugin package you have locally
 
 ### Release new version
 

package/dist/index.js

@@ -19,7 +19,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), rxjs = require("rxjs"), operators = require("rxjs/operators"), suspendReact = require("suspend-react"), MuxPlayer = require("@mux/mux-player-react"), desk = require("sanity/desk"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"), reactRx = require("react-rx"), useSWR = require("swr"), scrollIntoView = require("scroll-into-view-if-needed"), upchunk = require("@mux/upchunk"), reactIs = require("react-is"), LanguagesList = require("iso-639-1");
+var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), reactRx = require("react-rx"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), rxjs = require("rxjs"), operators = require("rxjs/operators"), suspendReact = require("suspend-react"), MuxPlayer = require("@mux/mux-player-react"), desk = require("sanity/desk"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"), useSWR = require("swr"), scrollIntoView = require("scroll-into-view-if-needed"), upchunk = require("@mux/upchunk"), reactIs = require("react-is"), LanguagesList = require("iso-639-1");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -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 = sanity.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 = React.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 reactRx.useObservable(memoizedObservable, void 0);
+};
 function useAssets() {
-  const documentStore = sanity.useDocumentStore(), [sort, setSort] = React.useState("createdDesc"), [searchQuery, setSearchQuery] = React.useState(""), [assetDocuments = [], isLoading] = useAssetDocuments({ documentStore, sort, searchQuery });
+  const documentStore = sanity.useDocumentStore(), [sort, setSort] = React.useState("createdDesc"), [searchQuery, setSearchQuery] = React.useState(""), assetDocumentsObservable = useAssetDocuments({ documentStore, sort, searchQuery }), isLoading = assetDocumentsObservable === void 0;
   return {
     assets: React.useMemo(
       () => (
         // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-        sanity.collate(assetDocuments).map(
+        sanity.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 = styledComponents.styled.img`
   transition: opacity 0.175s ease-out 0s;
   display: block;
@@ -376,16 +400,18 @@ const Image = styledComponents.styled.img`
 };
 function VideoThumbnail({
   asset,
-  width
+  width,
+  staticImage = !1
 }) {
-  const { inView, ref } = useInView(), posterWidth = width || 250, [status, setStatus] = React.useState("loading"), client = useClient(), animatedSrc = React.useMemo(() => {
+  const { inView, ref } = useInView(), posterWidth = width || 250, [status, setStatus] = React.useState("loading"), client = useClient(), src = React.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__ */ jsxRuntime.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 = React.createContext({
+  dialogState: !1,
+  setDialogState: () => null
+}), DialogStateProvider = ({
+  dialogState,
+  setDialogState,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(DialogStateContext.Provider, { value: { dialogState, setDialogState }, children }), useDialogStateContext = () => React.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${React.useId()}`, [timeFormatted, setTimeFormatted] = React.useState(
+    () => formatSecondsToHHMMSS(currentTime)
+  ), [nextTime, setNextTime] = React.useState(currentTime), [inputError, setInputError] = React.useState(""), assetWithNewThumbnail = React.useMemo(() => ({ ...asset, thumbTime: nextTime }), [asset, nextTime]), [saving, setSaving] = React.useState(!1), [saveThumbnailError, setSaveThumbnailError] = React.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__ */ jsxRuntime.jsx(
+    ui.Dialog,
+    {
+      id: dialogId,
+      header: "Edit thumbnail",
+      onClose: () => setDialogState(!1),
+      footer: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          disabled: inputError !== "",
+          mode: "ghost",
+          tone: "primary",
+          loading: saving,
+          onClick: handleSave,
+          text: "Set new thumbnail"
+        },
+        "thumbnail"
+      ) }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, padding: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: "Current:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(VideoThumbnail, { asset, width, staticImage: !0 })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: "New:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(VideoThumbnail, { asset: assetWithNewThumbnail, width, staticImage: !0 })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { space: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 5, weight: "semibold", children: "Or" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "semibold", children: "Selected time for thumbnail (hh:mm:ss):" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.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 } = React.useMemo(() => {
+  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = React.useRef(null), thumbnail = getPosterSrc({ asset, client, width: thumbnailWidth }), { src: videoSrc, error } = React.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__ */ jsxRuntime.jsxs(ui.Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
-    videoSrc && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MuxPlayer__default.default,
+  ) : AUDIO_ASPECT_RATIO), /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
+      videoSrc && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MuxPlayer__default.default,
+          {
+            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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ui.Text, { muted: !0, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
+            typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
+          ] })
         }
-      ),
+      ) : null,
       children
     ] }),
-    error ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { muted: !0, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(icons.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__ */ jsxRuntime.jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime })
   ] });
 }
 function assetIsAudio(asset) {
@@ -1150,13 +1277,6 @@ const useDocReferences = sanity.createHookFromObservableFactory(({ documentStore
     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 = styledComponents.styled(ui.MenuItem)(({ theme }) => {
 `, LockButton = styledComponents.styled(ui.Button)`
   background: transparent;
   color: white;
-`;
+`, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 function PlayerActionsMenu(props) {
   const { asset, readOnly, dialogState, setDialogState, onChange, onSelect } = props, [open, setOpen] = React.useState(!1), [menuElement, setMenuRef] = React.useState(null), isSigned = React.useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
   return React.useEffect(() => {
@@ -3323,6 +3443,14 @@ function PlayerActionsMenu(props) {
               onClick: () => setDialogState("select-video")
             }
           ),
+          isVideoAsset(asset) && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.MenuItem,
+            {
+              icon: icons.ImageIcon,
+              text: "Thumbnail",
+              onClick: () => setDialogState("edit-thumbnail")
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}),
           /* @__PURE__ */ jsxRuntime.jsx(
             ui.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__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, direction: "column", justify: "center", align: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 5, muted: !0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorOutlineIcon, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Something went wrong" }),
@@ -4103,20 +4231,27 @@ function Uploader(props) {
         onPaste: handlePaste,
         ref: containerRef,
         children: props.asset ? /* @__PURE__ */ jsxRuntime.jsx(
-          Player,
+          DialogStateProvider,
           {
-            readOnly: props.readOnly,
-            asset: props.asset,
-            onChange: props.onChange,
-            buttons: /* @__PURE__ */ jsxRuntime.jsx(
-              PlayerActionsMenu$1,
+            dialogState: props.dialogState,
+            setDialogState: props.setDialogState,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Player,
               {
+                readOnly: props.readOnly,
                 asset: props.asset,
-                dialogState: props.dialogState,
-                setDialogState: props.setDialogState,
                 onChange: props.onChange,
-                onSelect: handleUpload,
-                readOnly: props.readOnly
+                buttons: /* @__PURE__ */ jsxRuntime.jsx(
+                  PlayerActionsMenu$1,
+                  {
+                    asset: props.asset,
+                    dialogState: props.dialogState,
+                    setDialogState: props.setDialogState,
+                    onChange: props.onChange,
+                    onSelect: handleUpload,
+                    readOnly: props.readOnly
+                  }
+                )
               }
             )
           }