sanity-plugin-mux-input 2.1.0 → 2.2.0

package/src/components/documentPreview/DocumentPreview.tsx

@@ -0,0 +1,107 @@
+// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
+
+import {DocumentIcon} from '@sanity/icons'
+import type {PropsWithChildren} from 'react'
+import React, {useMemo} from 'react'
+import type {SanityDocument} from 'sanity'
+import type {CollatedHit, FIXME, SchemaType} from 'sanity'
+import {PreviewCard, useDocumentPresence, useDocumentPreviewStore, useSchema} from 'sanity'
+import {usePaneRouter} from 'sanity/desk'
+import {IntentLink} from 'sanity/router'
+
+import {PluginPlacement} from '../../util/types'
+import {MissingSchemaType} from './MissingSchemaType'
+import {PaneItemPreview} from './PaneItemPreview'
+
+interface DocumentPreviewProps {
+  schemaType?: SchemaType
+  documentPair: CollatedHit<SanityDocument>
+  placement?: PluginPlacement
+}
+
+/**
+ * Return `false` if we explicitly disable the icon.
+ * Otherwise return the passed icon or the schema type icon as a backup.
+ */
+export function getIconWithFallback(
+  icon: React.ComponentType<any> | false | undefined,
+  schemaType: SchemaType | undefined,
+  defaultIcon: React.ComponentType<any>
+): React.ComponentType<any> | false {
+  if (icon === false) {
+    return false
+  }
+
+  return icon || ((schemaType && schemaType.icon) as any) || defaultIcon || false
+}
+
+/** When inside the field input, we can open the reference on a child pane */
+function DocumentPreviewInInput(props: PropsWithChildren<DocumentPreviewProps>) {
+  const {ChildLink} = usePaneRouter()
+
+  return (linkProps: PropsWithChildren) => (
+    <ChildLink
+      childId={props.documentPair.id}
+      // Pass the schemaType of the document so `paneChild` in `buildPagesStructure` can access it
+      childParameters={{type: props.documentPair.type}}
+    >
+      {linkProps.children}
+    </ChildLink>
+  )
+}
+
+/** When inside the tool, we must use a regular intent link to take users to the desk tool */
+function DocumentPreviewInRool(props: DocumentPreviewProps) {
+  return (linkProps: PropsWithChildren) => (
+    <IntentLink intent="edit" params={{id: props.documentPair.id}}>
+      {linkProps.children}
+    </IntentLink>
+  )
+}
+
+export function DocumentPreview(props: DocumentPreviewProps) {
+  const {schemaType, documentPair} = props
+  const doc = documentPair?.draft || documentPair?.published
+  const id = documentPair.id || ''
+  const documentPreviewStore = useDocumentPreviewStore()
+  const schema = useSchema()
+  const documentPresence = useDocumentPresence(id)
+  const hasSchemaType = Boolean(schemaType && schemaType.name && schema.get(schemaType.name))
+
+  const PreviewComponent = useMemo(() => {
+    if (!doc) return null
+
+    if (!schemaType || !hasSchemaType) {
+      return <MissingSchemaType value={doc as SanityDocument} />
+    }
+
+    return (
+      <PaneItemPreview
+        documentPreviewStore={documentPreviewStore}
+        icon={getIconWithFallback(undefined, schemaType, DocumentIcon)}
+        schemaType={schemaType}
+        layout="default"
+        value={doc}
+        presence={documentPresence}
+      />
+    )
+  }, [hasSchemaType, schemaType, documentPresence, doc, documentPreviewStore])
+
+  return (
+    <PreviewCard
+      __unstable_focusRing
+      as={
+        (props.placement === 'input'
+          ? DocumentPreviewInInput(props)
+          : DocumentPreviewInRool(props)) as FIXME
+      }
+      data-as="a"
+      data-ui="PaneItem"
+      padding={2}
+      radius={2}
+      tone="inherit"
+    >
+      {PreviewComponent}
+    </PreviewCard>
+  )
+}

package/src/components/documentPreview/DraftStatus.tsx

@@ -0,0 +1,34 @@
+// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/DraftStatus.tsx
+import {EditIcon} from '@sanity/icons'
+import {Box, Text, Tooltip} from '@sanity/ui'
+import React from 'react'
+import type {PreviewValue, SanityDocument} from 'sanity'
+import {TextWithTone} from 'sanity'
+
+import {TimeAgo} from './TimeAgo'
+
+export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
+  const {document} = props
+  const updatedAt = document && '_updatedAt' in document && document._updatedAt
+
+  return (
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>
+            {document ? (
+              <>Edited {updatedAt && <TimeAgo time={updatedAt} />}</>
+            ) : (
+              <>No unpublished edits</>
+            )}
+          </Text>
+        </Box>
+      }
+    >
+      <TextWithTone tone="caution" dimmed={!document} muted={!document} size={1}>
+        <EditIcon />
+      </TextWithTone>
+    </Tooltip>
+  )
+}

package/src/components/documentPreview/MissingSchemaType.tsx

@@ -0,0 +1,33 @@
+// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/MissingSchemaType.tsx
+import {WarningOutlineIcon} from '@sanity/icons'
+import React from 'react'
+import type {SanityDocument} from 'sanity'
+import type {GeneralPreviewLayoutKey} from 'sanity'
+import {SanityDefaultPreview} from 'sanity'
+
+export interface MissingSchemaTypeProps {
+  layout?: GeneralPreviewLayoutKey
+  value: SanityDocument
+}
+
+const getUnknownTypeFallback = (id: string, typeName: string) => ({
+  title: (
+    <em>
+      No schema found for type <code>{typeName}</code>
+    </em>
+  ),
+  subtitle: (
+    <em>
+      Document: <code>{id}</code>
+    </em>
+  ),
+  media: () => <WarningOutlineIcon />,
+})
+
+export function MissingSchemaType(props: MissingSchemaTypeProps) {
+  const {layout, value} = props
+
+  return (
+    <SanityDefaultPreview {...getUnknownTypeFallback(value._id, value._type)} layout={layout} />
+  )
+}

package/src/components/documentPreview/PaneItemPreview.tsx

@@ -0,0 +1,71 @@
+// Adapted from:
+// https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
+import {Inline} from '@sanity/ui'
+import {isNumber, isString} from 'lodash'
+import React, {isValidElement} from 'react'
+import {useMemoObservable} from 'react-rx'
+import type {SanityDocument, SchemaType} from 'sanity'
+import {PreviewValue} from 'sanity'
+import {
+  DocumentPresence,
+  DocumentPreviewPresence,
+  DocumentPreviewStore,
+  GeneralPreviewLayoutKey,
+  getPreviewStateObservable,
+  getPreviewValueWithFallback,
+  isRecord,
+  SanityDefaultPreview,
+} from 'sanity'
+
+import {DraftStatus} from './DraftStatus'
+import {PublishedStatus} from './PublishedStatus'
+
+export interface PaneItemPreviewState {
+  isLoading?: boolean
+  draft?: PreviewValue | Partial<SanityDocument> | null
+  published?: PreviewValue | Partial<SanityDocument> | null
+}
+
+export interface PaneItemPreviewProps {
+  documentPreviewStore: DocumentPreviewStore
+  icon: React.ComponentType | false
+  layout: GeneralPreviewLayoutKey
+  presence?: DocumentPresence[]
+  schemaType: SchemaType
+  value: SanityDocument
+}
+
+export function PaneItemPreview(props: PaneItemPreviewProps) {
+  const {icon, layout, presence, schemaType, value} = props
+  const title =
+    (isRecord(value.title) && isValidElement(value.title)) ||
+    isString(value.title) ||
+    isNumber(value.title)
+      ? value.title
+      : null
+
+  // NOTE: this emits sync so can never be null
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const {draft, published, isLoading} = useMemoObservable<PaneItemPreviewState>(
+    () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
+    [props.documentPreviewStore, schemaType, value._id, title]
+  )!
+
+  const status = isLoading ? null : (
+    <Inline space={4}>
+      {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
+      <PublishedStatus document={published} />
+      <DraftStatus document={draft} />
+    </Inline>
+  )
+
+  return (
+    <SanityDefaultPreview
+      {...(getPreviewValueWithFallback({value, draft, published}) as any)}
+      isPlaceholder={isLoading}
+      icon={icon}
+      layout={layout}
+      status={status}
+    />
+  )
+}

package/src/components/documentPreview/PublishedStatus.tsx

@@ -0,0 +1,35 @@
+// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/PublishedStatus.tsx
+
+import {PublishIcon} from '@sanity/icons'
+import {Box, Text, Tooltip} from '@sanity/ui'
+import React from 'react'
+import type {PreviewValue, SanityDocument} from 'sanity'
+import {TextWithTone} from 'sanity'
+
+import {TimeAgo} from './TimeAgo'
+
+export function PublishedStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
+  const {document} = props
+  const updatedAt = document && '_updatedAt' in document && document._updatedAt
+
+  return (
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>
+            {document ? (
+              <>Published {updatedAt && <TimeAgo time={updatedAt} />}</>
+            ) : (
+              <>Not published</>
+            )}
+          </Text>
+        </Box>
+      }
+    >
+      <TextWithTone tone="positive" dimmed={!document} muted={!document} size={1}>
+        <PublishIcon />
+      </TextWithTone>
+    </Tooltip>
+  )
+}

package/src/components/documentPreview/TimeAgo.tsx

@@ -0,0 +1,13 @@
+// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/TimeAgo.tsx
+import React from 'react'
+import {useTimeAgo} from 'sanity'
+
+export interface TimeAgoProps {
+  time: string | Date
+}
+
+export function TimeAgo({time}: TimeAgoProps) {
+  const timeAgo = useTimeAgo(time)
+
+  return <span title={timeAgo}>{timeAgo} ago</span>
+}

package/src/components/documentPreview/paneItemTypes.ts

@@ -0,0 +1,7 @@
+import type {PreviewValue, SanityDocument} from 'sanity'
+
+export interface PaneItemPreviewState {
+  isLoading?: boolean
+  draft?: PreviewValue | Partial<SanityDocument> | null
+  published?: PreviewValue | Partial<SanityDocument> | null
+}

package/src/components/icons/Resolution.tsx

@@ -0,0 +1,12 @@
+import React, {SVGProps} from 'react'
+
+export function ResolutionIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
+      />
+    </svg>
+  )
+}

package/src/components/icons/StopWatch.tsx

@@ -0,0 +1,20 @@
+import React, {SVGProps} from 'react'
+
+export function StopWatchIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <path d="M232 306.667h48V176h-48v130.667z" fill="currentColor" />
+      <path
+        d="M407.67 170.271l30.786-30.786-33.942-33.941-30.785 30.786C341.217 111.057 300.369 96 256 96 149.961 96 64 181.961 64 288s85.961 192 192 192 192-85.961 192-192c0-44.369-15.057-85.217-40.33-117.729zm-45.604 223.795C333.734 422.398 296.066 438 256 438s-77.735-15.602-106.066-43.934C121.602 365.735 106 328.066 106 288s15.602-77.735 43.934-106.066C178.265 153.602 215.934 138 256 138s77.734 15.602 106.066 43.934C390.398 210.265 406 247.934 406 288s-15.602 77.735-43.934 106.066z"
+        fill="currentColor"
+      />
+      <path d="M192 32h128v48H192z" fill="currentColor" />
+    </svg>
+  )
+}

package/src/components/icons/ToolIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+/**
+ * Icon of a monitor with a play button.
+ * Credits: material design icons & react-icons
+ */
+const ToolIcon = () => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 24 24"
+    height="1em"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z" />
+  </svg>
+)
+
+export default ToolIcon

package/src/hooks/useAssets.ts

@@ -0,0 +1,61 @@
+import {useMemo, useState} from 'react'
+import {collate, createHookFromObservableFactory, DocumentStore, useDocumentStore} from 'sanity'
+
+import {SANITY_API_VERSION} from '../hooks/useClient'
+import {createSearchFilter} from '../util/createSearchFilter'
+import type {VideoAssetDocument} from '../util/types'
+
+export const ASSET_SORT_OPTIONS = {
+  createdDesc: {groq: '_createdAt desc', label: 'Newest first'},
+  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)'},
+}
+
+export type SortOption = keyof typeof ASSET_SORT_OPTIONS
+
+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(' && ')
+
+  const query = ASSET_SORT_OPTIONS[sort].groq
+  return documentStore.listenQuery(/* groq */ `*[${filter}] | order(${query})`, search.params, {
+    apiVersion: SANITY_API_VERSION,
+  })
+})
+
+export default function useAssets() {
+  const documentStore = useDocumentStore()
+  const [sort, setSort] = useState<SortOption>('createdDesc')
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const [assetDocuments = [], isLoading] = useAssetDocuments({documentStore, sort, searchQuery})
+  const assets = useMemo(
+    () =>
+      // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
+      collate<VideoAssetDocument>(assetDocuments).map(
+        (collated) =>
+          ({
+            ...(collated.draft || collated.published || {}),
+            _id: collated.id,
+          } as VideoAssetDocument)
+      ),
+    [assetDocuments]
+  )
+
+  return {
+    assets,
+    isLoading,
+    sort,
+    searchQuery,
+    setSort,
+    setSearchQuery,
+  }
+}

package/src/hooks/useCancelUpload.ts

@@ -1,7 +1,7 @@
 import {useCallback} from 'react'
 import {PatchEvent, unset} from 'sanity'
 
-import {deleteAsset} from '../actions/assets'
+import {deleteAssetOnMux} from '../actions/assets'
 import {useClient} from '../hooks/useClient'
 import type {MuxInputProps, VideoAssetDocument} from '../util/types'
 
@@ -13,7 +13,7 @@ export const useCancelUpload = (asset: VideoAssetDocument, onChange: MuxInputPro
     }
     onChange(PatchEvent.from(unset()))
     if (asset.assetId) {
-      deleteAsset(client, asset.assetId)
+      deleteAssetOnMux(client, asset.assetId)
     }
     if (asset._id) {
       client.delete(asset._id)

package/src/hooks/useClient.ts

@@ -1,6 +1,8 @@
 // As it's required to specify the API Version this custom hook ensures it's all using the same version
 import {useClient as useSanityClient} from 'sanity'
 
+export const SANITY_API_VERSION = '2022-09-14'
+
 export function useClient() {
-  return useSanityClient({apiVersion: '2022-09-14'})
+  return useSanityClient({apiVersion: SANITY_API_VERSION})
 }

package/src/hooks/useDocReferences.ts

@@ -0,0 +1,21 @@
+import {createHookFromObservableFactory, DocumentStore, SanityDocument} from 'sanity'
+
+import {SANITY_API_VERSION} from './useClient'
+
+const useDocReferences = createHookFromObservableFactory<
+  SanityDocument[],
+  {
+    documentStore: DocumentStore
+    id: string
+  }
+>(({documentStore, id}) => {
+  return documentStore.listenQuery(
+    /* groq */ '*[references($id)]{_id, _type, _rev, _updatedAt, _createdAt}',
+    {id},
+    {
+      apiVersion: SANITY_API_VERSION,
+    }
+  )
+})
+
+export default useDocReferences

package/src/hooks/useInView.ts

@@ -0,0 +1,45 @@
+import type {RefObject} from 'react'
+import {useEffect, useRef, useState} from 'react'
+
+type IntersectionOptions = {
+  root?: Element | null
+  rootMargin?: string
+  threshold?: number
+  onChange?: (inView: boolean) => void
+}
+
+function useInView<RefElement = HTMLElement>(
+  options: IntersectionOptions = {}
+): {inView: boolean; ref: RefObject<RefElement>} {
+  const [inView, setInView] = useState(false)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    const observer = new IntersectionObserver(([entry], obs) => {
+      // ==== from react-intersection-observer ====
+      // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.
+      // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0
+      const nowInView =
+        entry.isIntersecting &&
+        obs.thresholds.some((threshold) => entry.intersectionRatio >= threshold)
+
+      // Update our state when observer callback fires
+      setInView(nowInView)
+      options?.onChange?.(nowInView)
+    }, options)
+
+    const toObserve = ref.current
+    observer.observe(toObserve)
+
+    // eslint-disable-next-line
+    return () => {
+      if (toObserve) observer.unobserve(toObserve)
+    }
+  }, [options])
+
+  return {inView, ref}
+}
+
+export default useInView

package/src/index.ts

@@ -1,5 +1,6 @@
 import {definePlugin} from 'sanity'
 
+import createStudioTool from './components/StudioTool'
 import {muxVideoCustomRendering} from './plugin'
 import {muxVideo, muxVideoAsset} from './schema'
 import type {Config} from './util/types'
@@ -23,5 +24,6 @@ export const muxInput = definePlugin<Partial<Config> | void>((userConfig) => {
         },
       ],
     },
+    tools: config.tool === false ? undefined : [createStudioTool(config)],
   }
 })

package/src/plugin.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Input from './components/Input'
-import {VideoThumbnail} from './components/VideoSource.styled'
+import VideoThumbnail from './components/VideoThumbnail'
 import type {Config, MuxInputProps, VideoAssetDocument} from './util/types'
 
 export function muxVideoCustomRendering(config: Config) {

package/src/util/constants.ts

@@ -4,3 +4,10 @@ export const name = 'mux-input' as const
 export const cacheNs = 'sanity-plugin-mux-input' as const
 
 export const muxSecretsDocumentId = 'secrets.mux' as const
+
+export const DIALOGS_Z_INDEX = 60_000
+
+export const THUMBNAIL_ASPECT_RATIO = 16 / 9
+
+/** Thumbnails and input shouldn't go beyond this aspect ratio */
+export const MIN_ASPECT_RATIO = 1

package/src/util/createSearchFilter.ts

@@ -0,0 +1,78 @@
+// Adaptation of Sanity's createSearchQuery for our limited use case:
+// https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/core/search/weighted/createSearchQuery.ts
+import {compact, toLower, trim, uniq, words} from 'lodash'
+
+const SPECIAL_CHARS = /([^!@#$%^&*(),\\/?";:{}|[\]+<>\s-])+/g
+const STRIP_EDGE_CHARS = /(^[.]+)|([.]+$)/
+
+function tokenize(string: string): string[] {
+  return (string.match(SPECIAL_CHARS) || []).map((token) => token.replace(STRIP_EDGE_CHARS, ''))
+}
+
+function toGroqParams(terms: string[]): Record<string, string> {
+  const params: Record<string, string> = {}
+  return terms.reduce((acc, term, i) => {
+    acc[`t${i}`] = `*${term}*` // "t" is short for term
+    return acc
+  }, params)
+}
+
+/**
+ * Convert a string into an array of tokenized terms.
+ *
+ * Any (multi word) text wrapped in double quotes will be treated as "phrases", or separate tokens that
+ * will not have its special characters removed.
+ * E.g.`"the" "fantastic mr" fox fox book` =\> ["the", `"fantastic mr"`, "fox", "book"]
+ *
+ * Phrases wrapped in quotes are assigned relevance scoring differently from regular words.
+ *
+ * @internal
+ */
+function extractTermsFromQuery(query: string): string[] {
+  const quotedQueries = [] as string[]
+  const unquotedQuery = query.replace(/("[^"]*")/g, (match) => {
+    if (words(match).length > 1) {
+      quotedQueries.push(match)
+      return ''
+    }
+    return match
+  })
+
+  // Lowercase and trim quoted queries
+  const quotedTerms = quotedQueries.map((str) => trim(toLower(str)))
+
+  /**
+   * Convert (remaining) search query into an array of deduped, sanitized tokens.
+   * All white space and special characters are removed.
+   * e.g. "The saint of Saint-Germain-des-Prés" =\> ['the', 'saint', 'of', 'germain', 'des', 'pres']
+   */
+  const remainingTerms = uniq(compact(tokenize(toLower(unquotedQuery))))
+
+  return [...quotedTerms, ...remainingTerms]
+}
+
+/** Which properties of the video asset document should we match users' queries against */
+const SEARCH_PATHS = ['filename', 'assetId', '_id']
+
+/**
+ * Create GROQ constraints, given search terms and the full spec of available document types and fields.
+ * Essentially a large list of all possible fields (joined by logical OR) to match our search terms against.
+ */
+function createConstraints(terms: string[]) {
+  const constraints = terms
+    .map((_term, i) => SEARCH_PATHS.map((joinedPath) => `${joinedPath} match $t${i}`))
+    .filter((constraint) => constraint.length > 0)
+
+  return constraints.map((constraint) => `(${constraint.join(' || ')})`)
+}
+
+export function createSearchFilter(query: string) {
+  const terms = extractTermsFromQuery(query)
+
+  return {
+    filter: createConstraints(terms),
+    params: {
+      ...toGroqParams(terms),
+    },
+  }
+}

package/src/util/formatSeconds.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+// From: https://stackoverflow.com/a/11486026/10433647
+export default function formatSeconds(seconds: number): string {
+  if (typeof seconds !== 'number' || Number.isNaN(seconds)) {
+    return ''
+  }
+  // Hours, minutes and seconds
+  const hrs = ~~(seconds / 3600)
+  const mins = ~~((seconds % 3600) / 60)
+  const secs = ~~seconds % 60
+
+  // Output like "1:01" or "4:03:59" or "123:03:59"
+  let ret = ''
+
+  if (hrs > 0) {
+    ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+  }
+
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+  ret += '' + secs
+  return ret
+}

package/src/util/getAnimatedPosterSrc.ts

@@ -6,7 +6,7 @@ import {getPlaybackPolicy} from './getPlaybackPolicy'
 import type {AnimatedThumbnailOptions, MuxAnimatedThumbnailUrl, VideoAssetDocument} from './types'
 
 export interface AnimatedPosterSrcOptions extends AnimatedThumbnailOptions {
-  asset: VideoAssetDocument
+  asset: Partial<VideoAssetDocument>
   client: SanityClient
 }