sanity-plugin-mux-input 2.4.1 → 2.6.0

package/src/components/VideoDetails/useVideoDetails.ts

@@ -1,5 +1,5 @@
 import {useToast} from '@sanity/ui'
-import {useState} from 'react'
+import {useMemo, useState} from 'react'
 import {useDocumentStore} from 'sanity'
 
 import {useClient} from '../../hooks/useClient'
@@ -17,10 +17,10 @@ export default function useVideoDetails(props: VideoDetailsProps) {
   const documentStore = useDocumentStore()
   const toast = useToast()
   const client = useClient()
-  const [references, referencesLoading] = useDocReferences({
-    documentStore,
-    id: props.asset._id as string,
-  })
+
+  const [references, referencesLoading] = useDocReferences(
+    useMemo(() => ({documentStore, id: props.asset._id}), [documentStore, props.asset._id])
+  )
 
   const [originalAsset, setOriginalAsset] = useState(() => props.asset)
   const [filename, setFilename] = useState(props.asset.filename)

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/components/uploadConfiguration/PlaybackPolicy.tsx

@@ -0,0 +1,44 @@
+import {Grid, Text} from '@sanity/ui'
+
+import {Secrets, UploadConfig} from '../../util/types'
+import PlaybackPolicyOption from './PlaybackPolicyOption'
+import PlaybackPolicyWarning from './PlaybackPolicyWarning'
+
+export default function PlaybackPolicy({
+  id,
+  config,
+  secrets,
+  dispatch,
+}: {
+  id: string
+  config: UploadConfig
+  secrets: Secrets
+  dispatch: any
+}) {
+  const noPolicySelected = !(config.public_policy || config.signed_policy)
+  return (
+    <Grid gap={3}>
+      <Text weight="bold">Advanced Playback Policies</Text>
+      <PlaybackPolicyOption
+        id={`${id}--public`}
+        checked={config.public_policy}
+        optionName="Public"
+        description="Playback IDs are accessible by constructing an HLS URL like https://stream.mux.com/{PLAYBACK_ID}"
+        dispatch={dispatch}
+        action="public_policy"
+      />
+      {secrets.enableSignedUrls && (
+        <PlaybackPolicyOption
+          id={`${id}--signed`}
+          checked={config.signed_policy}
+          optionName="Signed"
+          description="Playback IDs should be used with tokens https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}. 
+                // See Secure video playback for details about creating tokens."
+          dispatch={dispatch}
+          action="signed_policy"
+        />
+      )}
+      {noPolicySelected && <PlaybackPolicyWarning />}
+    </Grid>
+  )
+}

package/src/components/uploadConfiguration/PlaybackPolicyOption.tsx

@@ -0,0 +1,60 @@
+import {Box, Checkbox, Flex, Grid, Stack, Text} from '@sanity/ui'
+import {CSSProperties, useState} from 'react'
+
+import {UploadConfigurationStateAction} from '../UploadConfiguration'
+
+export default function PlaybackPolicyOption({
+  id,
+  checked,
+  optionName,
+  description,
+  dispatch,
+  action,
+}: {
+  id: string
+  checked: boolean
+  optionName: string
+  description: string
+  dispatch: any
+  action: UploadConfigurationStateAction['action']
+}) {
+  const [scale, setScale] = useState(1)
+
+  const boxStyle: CSSProperties = {
+    outline: '0.01rem solid grey',
+    transform: `scale(${scale})`,
+    transition: 'transform 0.1s ease-in-out',
+    cursor: 'pointer',
+    borderRadius: '0.25rem',
+  }
+
+  const triggerAnimation = () => {
+    setScale(0.98)
+    setTimeout(() => {
+      setScale(1)
+    }, 100)
+  }
+
+  const handleBoxClick = () => {
+    triggerAnimation()
+    dispatch({
+      action,
+      value: !checked,
+    })
+  }
+  return (
+    <label>
+      <Flex gap={3} padding={3} style={boxStyle}>
+        <Checkbox id={id} required checked={checked} onChange={handleBoxClick} />
+        <Grid gap={3}>
+          <Text size={3} weight="bold">
+            {optionName}
+          </Text>
+          <Text size={2} muted>
+            {description}
+          </Text>
+        </Grid>
+      </Flex>
+    </label>
+  )
+}

package/src/components/uploadConfiguration/PlaybackPolicyWarning.tsx

@@ -0,0 +1,29 @@
+import {WarningFilledIcon} from '@sanity/icons'
+import {Box, Flex, Text} from '@sanity/ui'
+import {CSSProperties} from 'react'
+
+export default function PlaybackPolicyWarning() {
+  const textStyle: CSSProperties = {
+    color: '#13141A',
+    fontWeight: 500,
+  }
+
+  const boxStyle: CSSProperties = {
+    outline: '0.01rem solid grey',
+    backgroundColor: '#979cb0',
+    borderRadius: '0.5rem',
+    width: 'max-content',
+    color: '#13141A',
+  }
+
+  return (
+    <Box padding={2} style={boxStyle}>
+      <Flex align="center" gap={2}>
+        <WarningFilledIcon />
+        <Text size={1} style={textStyle}>
+          Please select at least one Playback Policy
+        </Text>
+      </Flex>
+    </Box>
+  )
+}

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/hooks/useAssets.ts

@@ -1,6 +1,5 @@
 import {useMemo, useState} from 'react'
-import {useObservable} from 'react-rx'
-import {collate, DocumentStore, useDocumentStore} from 'sanity'
+import {collate, createHookFromObservableFactory, DocumentStore, useDocumentStore} from 'sanity'
 
 import {SANITY_API_VERSION} from '../hooks/useClient'
 import {createSearchFilter} from '../util/createSearchFilter'
@@ -15,49 +14,47 @@ export const ASSET_SORT_OPTIONS = {
 
 export type SortOption = keyof typeof ASSET_SORT_OPTIONS
 
-const useAssetDocuments = ({
-  documentStore,
-  sort,
-  searchQuery,
-}: {
-  documentStore: DocumentStore
-  sort: SortOption
-  searchQuery: string
-}): VideoAssetDocument[] | undefined => {
-  const memoizedObservable = useMemo(() => {
-    const search = createSearchFilter(searchQuery)
-    const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
-    const sortFragment = ASSET_SORT_OPTIONS[sort].groq
-    return documentStore.listenQuery(
-      /* groq */ `*[${filter}] | order(${sortFragment})`,
-      search.params,
-      {
-        apiVersion: SANITY_API_VERSION,
-      }
-    )
-  }, [documentStore, sort, searchQuery])
+const useAssetDocuments = createHookFromObservableFactory<
+  VideoAssetDocument[],
+  {
+    documentStore: DocumentStore
+    sort: SortOption
+    searchQuery: string
+  }
+>(({documentStore, sort, searchQuery}) => {
+  const search = createSearchFilter(searchQuery)
+  const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
 
-  return useObservable(memoizedObservable, undefined)
-}
+  const sortFragment = ASSET_SORT_OPTIONS[sort].groq
+  return documentStore.listenQuery(
+    /* groq */ `*[${filter}] | order(${sortFragment})`,
+    search.params,
+    {
+      apiVersion: SANITY_API_VERSION,
+    }
+  )
+})
 
 export default function useAssets() {
   const documentStore = useDocumentStore()
   const [sort, setSort] = useState<SortOption>('createdDesc')
   const [searchQuery, setSearchQuery] = useState('')
 
-  const assetDocumentsObservable = useAssetDocuments({documentStore, sort, searchQuery})
-  const isLoading = assetDocumentsObservable === undefined
+  const [assetDocuments = [], isLoading] = useAssetDocuments(
+    useMemo(() => ({documentStore, sort, searchQuery}), [documentStore, sort, searchQuery])
+  )
+
   const assets = useMemo(
     () =>
       // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-      collate<VideoAssetDocument>(assetDocumentsObservable ?? []).map(
+      collate<VideoAssetDocument>(assetDocuments).map(
         (collated) =>
           ({
             ...(collated.draft || collated.published || {}),
             _id: collated.id,
           }) as VideoAssetDocument
       ),
-    [assetDocumentsObservable]
+    [assetDocuments]
   )
 
   return {

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

@@ -163,7 +163,8 @@ export interface UploadConfig
     'encoding_tier' | 'max_resolution_tier' | 'mp4_support' | 'normalize_audio'
   > {
   text_tracks: UploadTextTrack[]
-  signed: boolean
+  signed_policy: boolean
+  public_policy: boolean
 }
 
 /**
@@ -208,7 +209,7 @@ export interface MuxNewAssetSettings
   }[]
 
   /** An array of playback policy names that you want applied to this asset and available through playback_ids. */
-  playback_policy: ('public' | 'signed')[]
+  playback_policy: ('public' | 'signed' | 'drm')[]
 
   /** Arbitrary user-supplied metadata that will be included in the asset details and related webhooks.  */
   passthrough?: string
@@ -262,6 +263,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 {