sanity-plugin-mux-input 2.2.4 → 2.3.1

package/src/components/withFocusRing/withFocusRing.ts

@@ -1,32 +1,30 @@
-import {rem, Theme} from '@sanity/ui'
+import {rem} from '@sanity/ui'
 import {type ComponentType} from 'react'
 import styled, {css} from 'styled-components'
 
 import {focusRingBorderStyle, focusRingStyle} from './helpers'
 
 export function withFocusRing<Props>(component: ComponentType<Props>) {
-  return styled(component as unknown as any)<Props & {$border?: boolean}>(
-    (props: {theme: Theme; $border?: boolean}) => {
-      const border = {
-        width: props.$border ? 1 : 0,
-        color: 'var(--card-border-color)',
-      }
+  return styled(component as unknown as any)<Props & {$border?: boolean}>((props) => {
+    const border = {
+      width: props.$border ? 1 : 0,
+      color: 'var(--card-border-color)',
+    }
 
-      return css`
-        --card-focus-box-shadow: ${focusRingBorderStyle(border)};
+    return css`
+      --card-focus-box-shadow: ${focusRingBorderStyle(border)};
 
-        border-radius: ${rem(props.theme.sanity.radius[1])};
-        outline: none;
-        box-shadow: var(--card-focus-box-shadow);
+      border-radius: ${rem(props.theme.sanity.radius[1])};
+      outline: none;
+      box-shadow: var(--card-focus-box-shadow);
 
-        &:focus {
-          --card-focus-box-shadow: ${focusRingStyle({
-            base: props.theme.sanity.color.base,
-            border,
-            focusRing: props.theme.sanity.focusRing,
-          })};
-        }
-      `
-    }
-  )
+      &:focus {
+        --card-focus-box-shadow: ${focusRingStyle({
+          base: props.theme.sanity.color.base,
+          border,
+          focusRing: props.theme.sanity.focusRing,
+        })};
+      }
+    `
+  })
 }

package/src/hooks/useClient.ts

@@ -1,7 +1,7 @@
 // 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 const SANITY_API_VERSION = '2024-03-05'
 
 export function useClient() {
   return useSanityClient({apiVersion: SANITY_API_VERSION})

package/src/hooks/useImportMuxAssets.ts

@@ -0,0 +1,127 @@
+import {uuid} from '@sanity/uuid'
+import {useMemo, useState} from 'react'
+import {
+  createHookFromObservableFactory,
+  truncateString,
+  useClient,
+  useDocumentStore,
+  type DocumentStore,
+} from 'sanity'
+import {parseMuxDate} from '../util/parsers'
+import type {MuxAsset, VideoAssetDocument} from '../util/types'
+import {SANITY_API_VERSION} from './useClient'
+import useMuxAssets from './useMuxAssets'
+import {useSecretsDocumentValues} from './useSecretsDocumentValues'
+
+type ImportState = 'closed' | 'idle' | 'importing' | 'done' | 'error'
+
+export type AssetInSanity = {
+  uploadId: string
+  assetId: string
+}
+
+export default function useImportMuxAssets() {
+  const documentStore = useDocumentStore()
+  const client = useClient({
+    apiVersion: SANITY_API_VERSION,
+  })
+
+  const [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore)
+
+  const secretDocumentValues = useSecretsDocumentValues()
+  const hasSecrets = !!secretDocumentValues.value.secrets?.secretKey
+
+  const [importError, setImportError] = useState<unknown>()
+  const [importState, setImportState] = useState<ImportState>('closed')
+  const dialogOpen = importState !== 'closed'
+
+  const muxAssets = useMuxAssets({
+    secrets: secretDocumentValues.value.secrets,
+    enabled: hasSecrets && dialogOpen,
+  })
+
+  const missingAssets = useMemo(() => {
+    return assetsInSanity && muxAssets.data
+      ? muxAssets.data.filter((a) => !assetExistsInSanity(a, assetsInSanity))
+      : undefined
+  }, [assetsInSanity, muxAssets.data])
+
+  const [selectedAssets, setSelectedAssets] = useState<MuxAsset[]>([])
+
+  const closeDialog = () => {
+    if (importState !== 'importing') setImportState('closed')
+  }
+  const openDialog = () => {
+    if (importState === 'closed') setImportState('idle')
+  }
+
+  async function importAssets() {
+    setImportState('importing')
+    const documents = selectedAssets.map(muxAssetToSanityDocument)
+
+    const tx = client.transaction()
+    documents.forEach((doc) => tx.create(doc))
+
+    try {
+      await tx.commit({returnDocuments: false})
+      setSelectedAssets([])
+      setImportState('done')
+    } catch (error) {
+      setImportState('error')
+      setImportError(error)
+    }
+  }
+
+  return {
+    assetsInSanityLoading,
+    closeDialog,
+    dialogOpen,
+    importState,
+    importError,
+    hasSecrets,
+    importAssets,
+    missingAssets,
+    muxAssets,
+    openDialog,
+    selectedAssets,
+    setSelectedAssets,
+  }
+}
+
+function muxAssetToSanityDocument(asset: MuxAsset): VideoAssetDocument {
+  return {
+    _id: uuid(),
+    _type: 'mux.videoAsset',
+    _updatedAt: new Date().toISOString(),
+    _createdAt: parseMuxDate(asset.created_at).toISOString(),
+    assetId: asset.id,
+    playbackId: asset.playback_ids.find((p) => p.id)?.id,
+    filename: `Asset #${truncateString(asset.id, 15)}`,
+    status: asset.status,
+    data: asset,
+  }
+}
+
+const useAssetsInSanity = createHookFromObservableFactory<AssetInSanity[], DocumentStore>(
+  (documentStore) => {
+    return documentStore.listenQuery(
+      /* groq */ `*[_type == "mux.videoAsset"] {
+      "uploadId": coalesce(uploadId, data.upload_id),
+      "assetId": coalesce(assetId, data.id),
+    }`,
+      {},
+      {
+        apiVersion: SANITY_API_VERSION,
+      }
+    )
+  }
+)
+
+function assetExistsInSanity(asset: MuxAsset, existingAssets: AssetInSanity[]) {
+  // Don't allow importing assets that are not ready
+  if (asset.status !== 'ready') return false
+
+  return existingAssets.some(
+    (existing) => existing.assetId === asset.id || existing.uploadId === asset.upload_id
+  )
+}

package/src/hooks/useMuxAssets.ts

@@ -0,0 +1,168 @@
+import {useEffect, useState} from 'react'
+import {defer, of, timer} from 'rxjs'
+import {concatMap, expand, tap} from 'rxjs/operators'
+
+import type {MuxAsset, Secrets} from '../util/types'
+
+const FIRST_PAGE = 1
+const ASSETS_PER_PAGE = 100
+
+type MuxAssetsState = {
+  pageNum: number
+  loading: boolean
+  data?: MuxAsset[]
+  error?: FetchError
+}
+
+type FetchError =
+  | {
+      _tag: 'FetchError'
+    }
+  | {_tag: 'MuxError'; error: unknown}
+
+type PageResult = (
+  | {
+      data: MuxAsset[]
+    }
+  | {
+      error: FetchError
+    }
+) & {
+  pageNum: number
+}
+
+/**
+ * @docs {@link https://docs.mux.com/api-reference#video/operation/list-assets}
+ */
+async function fetchMuxAssetsPage(
+  {secretKey, token}: Secrets,
+  pageNum: number
+): Promise<PageResult> {
+  try {
+    const res = await fetch(
+      `https://api.mux.com/video/v1/assets?limit=${ASSETS_PER_PAGE}&page=${pageNum}`,
+      {
+        headers: {
+          Authorization: `Basic ${btoa(`${token}:${secretKey}`)}`,
+        },
+      }
+    )
+    const json = await res.json()
+
+    if (json.error) {
+      return {
+        pageNum,
+        error: {
+          _tag: 'MuxError',
+          error: json.error,
+        },
+      }
+    }
+
+    return {
+      pageNum,
+      data: json.data as MuxAsset[],
+    }
+  } catch (error) {
+    return {
+      pageNum,
+      error: {_tag: 'FetchError'},
+    }
+  }
+}
+
+function accumulateIntermediateState(
+  currentState: MuxAssetsState,
+  pageResult: PageResult
+): MuxAssetsState {
+  const currentData = ('data' in currentState && currentState.data) || []
+  return {
+    ...currentState,
+    data: [
+      ...currentData,
+      ...(('data' in pageResult && pageResult.data) || []).filter(
+        // De-duplicate assets for safety
+        (asset) => !currentData.some((a) => a.id === asset.id)
+      ),
+    ],
+    error:
+      'error' in pageResult
+        ? pageResult.error
+        : // Reset error if current page is successful
+          undefined,
+    pageNum: pageResult.pageNum,
+    loading: true,
+  }
+}
+
+function hasMorePages(pageResult: PageResult) {
+  return (
+    typeof pageResult === 'object' &&
+    'data' in pageResult &&
+    Array.isArray(pageResult.data) &&
+    pageResult.data.length > 0
+  )
+}
+
+/**
+ * Fetches all assets from a Mux environment. Rules:
+ * - One page at a time
+ * - Mux has no information on pagination
+ *   - We've finished fetching if a page returns `data.length === 0`
+ * - Rate limiting to one request per 2 seconds
+ * - Update state while still fetching to give feedback to users
+ */
+export default function useMuxAssets({secrets, enabled}: {enabled: boolean; secrets: Secrets}) {
+  const [state, setState] = useState<MuxAssetsState>({loading: true, pageNum: FIRST_PAGE})
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const subscription = defer(() =>
+      fetchMuxAssetsPage(
+        secrets,
+        // When we've already successfully loaded before (fully or partially), we start from the following page to avoid re-fetching
+        'data' in state && state.data && state.data.length > 0 && !state.error
+          ? state.pageNum + 1
+          : state.pageNum
+      )
+    )
+      .pipe(
+        // Here we replace "concatMap" with "expand" to recursively fetch next pages
+        expand((pageResult) => {
+          // if fetched page has data, we continue emitting, requesting the next page
+          // after 2s to avoid rate limiting
+          if (hasMorePages(pageResult)) {
+            return timer(2000).pipe(
+              // eslint-disable-next-line max-nested-callbacks
+              concatMap(() => defer(() => fetchMuxAssetsPage(secrets, pageResult.pageNum + 1)))
+            )
+          }
+
+          // Else, we stop emitting
+          return of()
+        }),
+
+        // On each iteration, persist intermediate states to give feedback to users
+        tap((pageResult) =>
+          setState((prevState) => accumulateIntermediateState(prevState, pageResult))
+        )
+      )
+      .subscribe({
+        // Once done, let the user know we've stopped loading
+        complete: () => {
+          setState((prev) => ({
+            ...prev,
+            loading: false,
+          }))
+        },
+      })
+
+    // Unsubscribe on component unmount to prevent memory leaks or fetching unnecessarily
+    // eslint-disable-next-line consistent-return
+    return () => subscription.unsubscribe()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled])
+
+  return state
+}

package/src/plugin.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
-
 import Input from './components/Input'
 import VideoThumbnail from './components/VideoThumbnail'
-import type {Config, MuxInputProps, VideoAssetDocument} from './util/types'
+import type {MuxInputProps, PluginConfig, VideoAssetDocument} from './util/types'
 
-export function muxVideoCustomRendering(config: Config) {
+export function muxVideoCustomRendering(config: PluginConfig) {
   return {
     components: {
-      input: (props: MuxInputProps) => <Input config={config} {...props} />,
+      input: (props: MuxInputProps) => (
+        <Input config={{...config, ...props.schemaType.options}} {...props} />
+      ),
     },
     preview: {
       select: {

package/src/util/asserters.ts

@@ -11,3 +11,12 @@ export function isMuxInputPreviewProps(
 ): props is MuxInputPreviewProps {
   return props.schemaType?.type?.name === 'mux.video'
 }
+
+export function isValidUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url)
+    return parsed && !!parsed.protocol.match(/http:|https:/)
+  } catch {
+    return false
+  }
+}

package/src/util/createSearchFilter.ts

@@ -55,7 +55,7 @@ function extractTermsFromQuery(query: string): string[] {
  * 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[], includeAssetId: Boolean) {
+function createConstraints(terms: string[], includeAssetId: boolean) {
   const searchPaths = includeAssetId ? ['filename', 'assetId'] : ['filename']
   const constraints = terms
     .map((_term, i) => searchPaths.map((joinedPath) => `${joinedPath} match $t${i}`))

package/src/util/formatBytes.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+// From: https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+export default function formatBytes(bytes: number, si = false, dp = 1) {
+  const thresh = si ? 1000 : 1024
+
+  if (Math.abs(bytes) < thresh) {
+    return bytes + ' B'
+  }
+
+  const units = si
+    ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+  let u = -1
+  const r = 10 ** dp
+
+  do {
+    bytes /= thresh
+    ++u
+  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1)
+
+  return bytes.toFixed(dp) + ' ' + units[u]
+}

package/src/util/generateJwt.ts

@@ -30,6 +30,7 @@ export function generateJwt<T extends Audience>(
     throw new TypeError('Missing signingKeyPrivate')
   }
 
+  // @ts-expect-error - handle missing typings for this package
   const {default: sign} = suspend(() => import('jsonwebtoken-esm/sign'), ['jsonwebtoken-esm/sign'])
 
   return sign(

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: Partial<VideoAssetDocument>
+  asset: Pick<VideoAssetDocument, 'playbackId' | 'data' | 'thumbTime'>
   client: SanityClient
 }
 

package/src/util/getPlaybackId.ts

@@ -1,6 +1,6 @@
 import type {VideoAssetDocument} from './types'
 
-export function getPlaybackId(asset: Partial<VideoAssetDocument>): string {
+export function getPlaybackId(asset: Pick<VideoAssetDocument, 'playbackId'>): string {
   if (!asset?.playbackId) {
     console.error('Asset is missing a playbackId', {asset})
     throw new TypeError(`Missing playbackId`)

package/src/util/getPlaybackPolicy.ts

@@ -1,5 +1,5 @@
 import type {PlaybackPolicy, VideoAssetDocument} from './types'
 
-export function getPlaybackPolicy(asset: Partial<VideoAssetDocument>): PlaybackPolicy {
+export function getPlaybackPolicy(asset: Pick<VideoAssetDocument, 'data'>): PlaybackPolicy {
   return asset.data?.playback_ids?.[0]?.policy ?? 'public'
 }

package/src/util/parsers.ts

@@ -0,0 +1,5 @@
+import type {MuxAsset} from './types'
+
+export function parseMuxDate(date: MuxAsset['created_at']): Date {
+  return new Date(Number(date) * 1000)
+}