sanity-plugin-mux-input 2.4.1 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -41,8 +41,7 @@
   ],
   "scripts": {
     "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
-    "clean": "rimraf lib",
-    "dev": "plugin-kit link-watch --strict",
+    "dev": "sanity dev",
     "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
@@ -75,11 +74,10 @@
     "@sanity/pkg-utils": "^6.12.1",
     "@sanity/plugin-kit": "4.0.19",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/vision": "^3.68.1",
+    "@sanity/vision": "^3.74.0",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.3.17",
     "@types/react-is": "^18.3.1",
-    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "eslint": "^8.57.1",
@@ -98,12 +96,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "rimraf": "^5.0.7",
-    "sanity": "^3.68.1",
+    "sanity": "^3.74.0",
     "semantic-release": "^24.2.0",
     "styled-components": "^6.1.13",
-    "typescript": "^5.7.2",
-    "yalc": "1.0.0-pre.53"
+    "typescript": "5.7.3"
   },
   "peerDependencies": {
     "react": "^18",

package/src/components/EditThumbnailDialog.tsx

@@ -0,0 +1,122 @@
+import {Button, Dialog, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import React, {useId, useMemo, useState} from 'react'
+import {getDevicePixelRatio} from 'use-device-pixel-ratio'
+
+import {useDialogStateContext} from '../context/DialogStateContext'
+import {useClient} from '../hooks/useClient'
+import {
+  formatSecondsToHHMMSS,
+  getSecondsFromTimeFormat,
+  isValidTimeFormat,
+} from '../util/formatSeconds'
+import type {VideoAssetDocument} from '../util/types'
+import VideoThumbnail from './VideoThumbnail'
+
+export interface Props {
+  asset: VideoAssetDocument
+  currentTime?: number
+}
+
+export default function EditThumbnailDialog({asset, currentTime = 0}: Props) {
+  const client = useClient()
+
+  const {setDialogState} = useDialogStateContext()
+  const dialogId = `EditThumbnailDialog${useId()}`
+
+  const [timeFormatted, setTimeFormatted] = useState<string>(() =>
+    formatSecondsToHHMMSS(currentTime)
+  )
+  const [nextTime, setNextTime] = useState<number>(currentTime)
+  const [inputError, setInputError] = useState<string>('')
+
+  const assetWithNewThumbnail = useMemo(() => ({...asset, thumbTime: nextTime}), [asset, nextTime])
+  const [saving, setSaving] = useState(false)
+  const [saveThumbnailError, setSaveThumbnailError] = useState<Error | null>(null)
+  const handleSave = () => {
+    setSaving(true)
+    client
+      .patch(asset._id!)
+      .set({thumbTime: nextTime})
+      .commit({returnDocuments: false})
+      .then(() => void setDialogState(false))
+      .catch(setSaveThumbnailError)
+      .finally(() => void setSaving(false))
+  }
+  const width = 300 * getDevicePixelRatio({maxDpr: 2})
+
+  if (saveThumbnailError) {
+    // eslint-disable-next-line no-warning-comments
+    // @TODO handle errors more gracefully
+    throw saveThumbnailError
+  }
+
+  const handleInputChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.value
+    setTimeFormatted(value)
+
+    if (isValidTimeFormat(value)) {
+      setInputError('')
+      const totalSeconds = getSecondsFromTimeFormat(value)
+      setNextTime(totalSeconds)
+    } else {
+      setInputError('Invalid time format')
+    }
+  }
+
+  return (
+    <Dialog
+      id={dialogId}
+      header="Edit thumbnail"
+      onClose={() => setDialogState(false)}
+      footer={
+        <Stack padding={3}>
+          <Button
+            key="thumbnail"
+            disabled={inputError !== ''}
+            mode="ghost"
+            tone="primary"
+            loading={saving}
+            onClick={handleSave}
+            text="Set new thumbnail"
+          />
+        </Stack>
+      }
+    >
+      <Stack space={3} padding={3}>
+        <Stack space={2}>
+          <Text size={1} weight="semibold">
+            Current:
+          </Text>
+          <VideoThumbnail asset={asset} width={width} staticImage />
+        </Stack>
+        <Stack space={2}>
+          <Text size={1} weight="semibold">
+            New:
+          </Text>
+          <VideoThumbnail asset={assetWithNewThumbnail} width={width} staticImage />
+        </Stack>
+
+        <Stack space={2}>
+          <Flex align={'center'} justify={'center'}>
+            <Text size={5} weight="semibold">
+              Or
+            </Text>
+          </Flex>
+        </Stack>
+
+        <Stack space={2}>
+          <Text size={1} weight="semibold">
+            Selected time for thumbnail (hh:mm:ss):
+          </Text>
+          <TextInput
+            size={1}
+            value={timeFormatted}
+            placeholder="hh:mm:ss"
+            onChange={handleInputChange}
+            customValidity={inputError}
+          />
+        </Stack>
+      </Stack>
+    </Dialog>
+  )
+}

package/src/components/PlayerActionsMenu.tsx

@@ -1,5 +1,6 @@
 import {
   EllipsisHorizontalIcon,
+  ImageIcon,
   LockIcon,
   PlugIcon,
   ResetIcon,
@@ -43,6 +44,11 @@ const LockButton = styled(Button)`
   color: white;
 `
 
+// @TODO: add support for audio type (asset._type) when uploading an audio file so we can hide the thumbnail option.
+const isVideoAsset = (asset: VideoAssetDocument) => {
+  return asset._type === 'mux.videoAsset'
+}
+
 function PlayerActionsMenu(
   props: Pick<MuxInputProps, 'onChange' | 'readOnly'> & {
     asset: VideoAssetDocument
@@ -111,6 +117,13 @@ function PlayerActionsMenu(
               text="Browse"
               onClick={() => setDialogState('select-video')}
             />
+            {isVideoAsset(asset) && (
+              <MenuItem
+                icon={ImageIcon}
+                text="Thumbnail"
+                onClick={() => setDialogState('edit-thumbnail')}
+              />
+            )}
             <MenuDivider />
             <MenuItem
               icon={PlugIcon}

package/src/components/Uploader.tsx

@@ -7,6 +7,7 @@ import type {SanityClient} from 'sanity'
 import {PatchEvent, set, setIfMissing} from 'sanity'
 
 import {uploadFile, uploadUrl} from '../actions/upload'
+import {DialogStateProvider} from '../context/DialogStateContext'
 import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
 import {isValidUrl} from '../util/asserters'
 import {extractDroppedFiles} from '../util/extractFiles'
@@ -347,21 +348,26 @@ export default function Uploader(props: Props) {
         ref={containerRef}
       >
         {props.asset ? (
-          <Player
-            readOnly={props.readOnly}
-            asset={props.asset}
-            onChange={props.onChange}
-            buttons={
-              <PlayerActionsMenu
-                asset={props.asset}
-                dialogState={props.dialogState}
-                setDialogState={props.setDialogState}
-                onChange={props.onChange}
-                onSelect={handleUpload}
-                readOnly={props.readOnly}
-              />
-            }
-          />
+          <DialogStateProvider
+            dialogState={props.dialogState}
+            setDialogState={props.setDialogState}
+          >
+            <Player
+              readOnly={props.readOnly}
+              asset={props.asset}
+              onChange={props.onChange}
+              buttons={
+                <PlayerActionsMenu
+                  asset={props.asset}
+                  dialogState={props.dialogState}
+                  setDialogState={props.setDialogState}
+                  onChange={props.onChange}
+                  onSelect={handleUpload}
+                  readOnly={props.readOnly}
+                />
+              }
+            />
+          </DialogStateProvider>
         ) : (
           <UploadPlaceholder
             hovering={dragState !== null}

package/src/components/VideoPlayer.tsx

@@ -1,23 +1,32 @@
-import MuxPlayer, {type MuxPlayerProps} from '@mux/mux-player-react'
+import MuxPlayer, {type MuxPlayerProps, type MuxPlayerRefAttributes} from '@mux/mux-player-react'
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Card, Text} from '@sanity/ui'
-import {type PropsWithChildren, useMemo} from 'react'
+import {type PropsWithChildren, useMemo, useRef} from 'react'
 
+import {useDialogStateContext} from '../context/DialogStateContext'
 import {useClient} from '../hooks/useClient'
 import {AUDIO_ASPECT_RATIO, MIN_ASPECT_RATIO} from '../util/constants'
+import {getPosterSrc} from '../util/getPosterSrc'
 import {getVideoSrc} from '../util/getVideoSrc'
 import type {VideoAssetDocument} from '../util/types'
+import EditThumbnailDialog from './EditThumbnailDialog'
 
 export default function VideoPlayer({
   asset,
+  thumbnailWidth = 250,
   children,
   ...props
 }: PropsWithChildren<
-  {asset: VideoAssetDocument; forceAspectRatio?: number} & Partial<Pick<MuxPlayerProps, 'autoPlay'>>
+  {asset: VideoAssetDocument; thumbnailWidth?: number; forceAspectRatio?: number} & Partial<
+    Pick<MuxPlayerProps, 'autoPlay'>
+  >
 >) {
   const client = useClient()
+  const {dialogState} = useDialogStateContext()
 
   const isAudio = assetIsAudio(asset)
+  const muxPlayer = useRef<MuxPlayerRefAttributes>(null)
+  const thumbnail = getPosterSrc({asset, client, width: thumbnailWidth})
 
   const {src: videoSrc, error} = useMemo(() => {
     try {
@@ -52,55 +61,63 @@ export default function VideoPlayer({
   }
 
   return (
-    <Card tone="transparent" style={{aspectRatio: aspectRatio, position: 'relative'}}>
-      {videoSrc && (
-        <>
-          <MuxPlayer
-            {...props}
-            playsInline
-            playbackId={asset.playbackId}
-            tokens={
-              signedToken
-                ? {playback: signedToken, thumbnail: signedToken, storyboard: signedToken}
-                : undefined
-            }
-            preload="metadata"
-            crossOrigin="anonymous"
-            metadata={{
-              player_name: 'Sanity Admin Dashboard',
-              player_version: process.env.PKG_VERSION,
-              page_type: 'Preview Player',
-            }}
-            audio={isAudio}
+    <>
+      <Card tone="transparent" style={{aspectRatio: aspectRatio, position: 'relative'}}>
+        {videoSrc && (
+          <>
+            <MuxPlayer
+              poster={thumbnail}
+              ref={muxPlayer}
+              {...props}
+              playsInline
+              playbackId={asset.playbackId}
+              tokens={
+                signedToken
+                  ? {playback: signedToken, thumbnail: signedToken, storyboard: signedToken}
+                  : undefined
+              }
+              preload="metadata"
+              crossOrigin="anonymous"
+              metadata={{
+                player_name: 'Sanity Admin Dashboard',
+                player_version: process.env.PKG_VERSION,
+                page_type: 'Preview Player',
+              }}
+              audio={isAudio}
+              style={{
+                height: '100%',
+                width: '100%',
+                display: 'block',
+                objectFit: 'contain',
+              }}
+            />
+            {children}
+          </>
+        )}
+        {error ? (
+          <div
             style={{
-              height: '100%',
-              width: '100%',
-              display: 'block',
-              objectFit: 'contain',
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
             }}
-          />
-          {children}
-        </>
+          >
+            <Text muted>
+              <ErrorOutlineIcon style={{marginRight: '0.15em'}} />
+              {typeof error === 'object' && 'message' in error && typeof error.message === 'string'
+                ? error.message
+                : 'Error loading video'}
+            </Text>
+          </div>
+        ) : null}
+        {children}
+      </Card>
+
+      {dialogState === 'edit-thumbnail' && (
+        <EditThumbnailDialog asset={asset} currentTime={muxPlayer?.current?.currentTime} />
       )}
-      {error ? (
-        <div
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-          }}
-        >
-          <Text muted>
-            <ErrorOutlineIcon style={{marginRight: '0.15em'}} />
-            {typeof error === 'object' && 'message' in error && typeof error.message === 'string'
-              ? error.message
-              : 'Error loading video'}
-          </Text>
-        </div>
-      ) : null}
-      {children}
-    </Card>
+    </>
   )
 }
 

package/src/components/VideoThumbnail.tsx

@@ -6,8 +6,9 @@ import {styled} from 'styled-components'
 import {useClient} from '../hooks/useClient'
 import useInView from '../hooks/useInView'
 import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
-import {type AnimatedPosterSrcOptions, getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
-import {VideoAssetDocument} from '../util/types'
+import {getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
+import {getPosterSrc} from '../util/getPosterSrc'
+import {AssetThumbnailOptions, MuxAnimatedThumbnailUrl, MuxThumbnailUrl} from '../util/types'
 
 const Image = styled.img`
   transition: opacity 0.175s ease-out 0s;
@@ -29,9 +30,11 @@ const STATUS_TO_TONE: Record<ImageStatus, CardTone> = {
 export default function VideoThumbnail({
   asset,
   width,
+  staticImage = false,
 }: {
-  asset: AnimatedPosterSrcOptions['asset'] & Pick<VideoAssetDocument, 'filename' | 'assetId'>
+  asset: AssetThumbnailOptions['asset']
   width?: number
+  staticImage?: boolean
 }) {
   const {inView, ref} = useInView()
   const posterWidth = width || 250
@@ -39,14 +42,18 @@ export default function VideoThumbnail({
   const [status, setStatus] = useState<ImageStatus>('loading')
   const client = useClient()
 
-  const animatedSrc = useMemo(() => {
+  const src = useMemo(() => {
     try {
-      return getAnimatedPosterSrc({asset, client, width: posterWidth})
+      let thumbnail: MuxAnimatedThumbnailUrl | MuxThumbnailUrl
+      if (staticImage) thumbnail = getPosterSrc({asset, client, width: posterWidth})
+      else thumbnail = getAnimatedPosterSrc({asset, client, width: posterWidth})
+
+      return thumbnail
     } catch {
       if (status !== 'error') setStatus('error')
       return undefined
     }
-  }, [asset, client, posterWidth, status])
+  }, [asset, client, posterWidth, status, staticImage])
 
   function handleLoad() {
     setStatus('loaded')
@@ -105,8 +112,8 @@ export default function VideoThumbnail({
             </Stack>
           )}
           <Image
-            src={animatedSrc}
-            alt={`Preview for video ${asset.filename || asset.assetId}`}
+            src={src}
+            alt={`Preview for ${staticImage ? 'image' : 'video'} ${asset.filename || asset.assetId}`}
             onLoad={handleLoad}
             onError={handleError}
             style={{

package/src/context/DialogStateContext.tsx

@@ -0,0 +1,36 @@
+import React, {createContext, useContext} from 'react'
+
+import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
+
+type DialogStateContextProps = {
+  dialogState: DialogState
+  setDialogState: SetDialogState
+}
+
+const DialogStateContext = createContext<DialogStateContextProps>({
+  dialogState: false,
+  setDialogState: () => {
+    return null
+  },
+})
+
+interface DialogStateProviderProps extends DialogStateContextProps {
+  children: React.ReactNode
+}
+
+export const DialogStateProvider = ({
+  dialogState,
+  setDialogState,
+  children,
+}: DialogStateProviderProps) => {
+  return (
+    <DialogStateContext.Provider value={{dialogState, setDialogState}}>
+      {children}
+    </DialogStateContext.Provider>
+  )
+}
+
+export const useDialogStateContext = () => {
+  const context = useContext(DialogStateContext)
+  return context
+}

package/src/util/createUrlParamsObject.ts

@@ -0,0 +1,25 @@
+import type {SanityClient} from 'sanity'
+
+import {Audience, generateJwt} from './generateJwt'
+import {getPlaybackId} from './getPlaybackId'
+import {getPlaybackPolicy} from './getPlaybackPolicy'
+import type {AssetThumbnailOptions} from './types'
+
+export function createUrlParamsObject(
+  client: SanityClient,
+  asset: AssetThumbnailOptions['asset'],
+  params: object,
+  audience: Audience
+) {
+  const playbackId = getPlaybackId(asset)
+
+  let searchParams = new URLSearchParams(
+    JSON.parse(JSON.stringify(params, (_, v) => v ?? undefined))
+  )
+  if (getPlaybackPolicy(asset) === 'signed') {
+    const token = generateJwt(client, playbackId, audience, params)
+    searchParams = new URLSearchParams({token})
+  }
+
+  return {playbackId, searchParams}
+}

package/src/util/formatSeconds.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // From: https://stackoverflow.com/a/11486026/10433647
-export default function formatSeconds(seconds: number): string {
+export function formatSeconds(seconds: number): string {
   if (typeof seconds !== 'number' || Number.isNaN(seconds)) {
     return ''
   }
@@ -20,3 +20,30 @@ export default function formatSeconds(seconds: number): string {
   ret += '' + secs
   return ret
 }
+
+// Output like "05:14:01"
+export function formatSecondsToHHMMSS(seconds: number): string {
+  const hrs = Math.floor(seconds / 3600)
+    .toString()
+    .padStart(2, '0')
+  const mins = Math.floor((seconds % 3600) / 60)
+    .toString()
+    .padStart(2, '0')
+  const secs = Math.floor(seconds % 60)
+    .toString()
+    .padStart(2, '0')
+
+  return `${hrs}:${mins}:${secs}`
+}
+
+// Checks if time has a HH:MM:SS format like "05:14:01"
+export function isValidTimeFormat(time: string) {
+  const regex = /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/
+  return regex.test(time) || time === ''
+}
+
+// Converts a time like "05:14:01" to seconds
+export function getSecondsFromTimeFormat(time: string): number {
+  const [hh = 0, mm = 0, ss = 0] = time.split(':').map(Number)
+  return hh * 3600 + mm * 60 + ss
+}

package/src/util/getAnimatedPosterSrc.ts

@@ -1,12 +1,11 @@
 import type {SanityClient} from 'sanity'
 
-import {generateJwt} from './generateJwt'
-import {getPlaybackId} from './getPlaybackId'
-import {getPlaybackPolicy} from './getPlaybackPolicy'
-import type {AnimatedThumbnailOptions, MuxAnimatedThumbnailUrl, VideoAssetDocument} from './types'
+import {createUrlParamsObject} from './createUrlParamsObject'
+import type {AnimatedThumbnailOptions, MuxAnimatedThumbnailUrl} from './types'
+import {AssetThumbnailOptions} from './types'
 
 export interface AnimatedPosterSrcOptions extends AnimatedThumbnailOptions {
-  asset: Pick<VideoAssetDocument, 'playbackId' | 'data' | 'thumbTime'>
+  asset: AssetThumbnailOptions['asset']
   client: SanityClient
 }
 
@@ -20,15 +19,8 @@ export function getAnimatedPosterSrc({
   fps = 15,
 }: AnimatedPosterSrcOptions): MuxAnimatedThumbnailUrl {
   const params = {height, width, start, end, fps}
-  const playbackId = getPlaybackId(asset)
 
-  let searchParams = new URLSearchParams(
-    JSON.parse(JSON.stringify(params, (_, v) => v ?? undefined))
-  )
-  if (getPlaybackPolicy(asset) === 'signed') {
-    const token = generateJwt(client, playbackId, 'g', params)
-    searchParams = new URLSearchParams({token})
-  }
+  const {playbackId, searchParams} = createUrlParamsObject(client, asset, params, 'g')
 
   return `https://image.mux.com/${playbackId}/animated.gif?${searchParams}`
 }

package/src/util/getPosterSrc.ts

@@ -1,12 +1,11 @@
 import type {SanityClient} from 'sanity'
 
-import {generateJwt} from './generateJwt'
-import {getPlaybackId} from './getPlaybackId'
-import {getPlaybackPolicy} from './getPlaybackPolicy'
-import type {MuxThumbnailUrl, ThumbnailOptions, VideoAssetDocument} from './types'
+import {createUrlParamsObject} from './createUrlParamsObject'
+import type {MuxThumbnailUrl, ThumbnailOptions} from './types'
+import {AssetThumbnailOptions} from './types'
 
 export interface PosterSrcOptions extends ThumbnailOptions {
-  asset: VideoAssetDocument
+  asset: AssetThumbnailOptions['asset']
   client: SanityClient
 }
 
@@ -15,19 +14,15 @@ export function getPosterSrc({
   client,
   fit_mode,
   height,
-  time = asset.thumbTime,
+  time = asset.thumbTime ?? undefined,
   width,
 }: PosterSrcOptions): MuxThumbnailUrl {
-  const params = {fit_mode, height, time, width}
-  const playbackId = getPlaybackId(asset)
-
-  let searchParams = new URLSearchParams(
-    JSON.parse(JSON.stringify(params, (_, v) => v ?? undefined))
-  )
-  if (getPlaybackPolicy(asset) === 'signed') {
-    const token = generateJwt(client, playbackId, 't', params)
-    searchParams = new URLSearchParams({token})
+  const params = {fit_mode, height, width}
+  if (time) {
+    ;(params as any).time = time
   }
 
+  const {playbackId, searchParams} = createUrlParamsObject(client, asset, params, 't')
+
   return `https://image.mux.com/${playbackId}/thumbnail.png?${searchParams}`
 }

package/src/util/getVideoMetadata.ts

@@ -1,4 +1,4 @@
-import formatSeconds from './formatSeconds'
+import {formatSeconds} from './formatSeconds'
 import {VideoAssetDocument} from './types'
 
 export default function getVideoMetadata(doc: VideoAssetDocument) {

package/src/util/types.ts

@@ -262,6 +262,10 @@ export interface AnimatedThumbnailOptions {
   fps?: number
 }
 
+export interface AssetThumbnailOptions {
+  asset: Pick<VideoAssetDocument, 'playbackId' | 'data' | 'thumbTime' | 'filename' | 'assetId'>
+}
+
 export type PlaybackPolicy = 'signed' | 'public'
 
 export interface MuxErrors {