sanity-plugin-mux-input 2.3.4 → 2.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -22,45 +22,42 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "sideEffects": false,
-  "type": "module",
+  "type": "commonjs",
   "exports": {
     ".": {
       "source": "./src/_exports/index.ts",
-      "import": "./lib/index.js",
-      "require": "./lib/index.cjs",
-      "default": "./lib/index.js"
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./lib/index.cjs",
-  "module": "./lib/index.esm.js",
-  "source": "./src/_exports/index.ts",
-  "types": "./lib/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "src",
-    "lib",
+    "dist",
     "sanity.json",
     "v2-incompatible.js"
   ],
   "scripts": {
-    "build": "run-s clean && pkg-utils build --strict && pkg-utils --strict",
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
     "clean": "rimraf lib",
-    "dev": "plugin-kit link-watch",
+    "dev": "plugin-kit link-watch --strict",
     "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
     "prepare": "husky install || true",
-    "prepublishOnly": "run-s build",
+    "prepublishOnly": "npm run build",
     "test": "npm run lint && npm run type-check && npm run build",
     "type-check": "tsc --noEmit",
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "@mux/mux-player-react": "^2.4.1",
-    "@mux/upchunk": "^3.3.2",
-    "@sanity/icons": "^2.11.7",
+    "@mux/mux-player-react": "^2.6.0",
+    "@mux/upchunk": "^3.4.0",
+    "@sanity/icons": "^2.11.8",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^2.1.0",
+    "@sanity/ui": "^2.1.11",
     "@sanity/uuid": "^3.0.2",
     "iso-639-1": "^3.1.2",
     "jsonwebtoken-esm": "^1.0.5",
@@ -70,57 +67,64 @@
     "scroll-into-view-if-needed": "^3.1.0",
     "suspend-react": "^0.1.3",
     "swr": "^2.2.5",
-    "type-fest": "^4.10.2"
+    "type-fest": "^4.18.2",
+    "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
-    "@sanity/client": "^6.15.11",
-    "@sanity/pkg-utils": "^6.0.1",
-    "@sanity/plugin-kit": "^3.1.10",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@sanity/client": "^6.18.2",
+    "@sanity/pkg-utils": "^6.8.16",
+    "@sanity/plugin-kit": "4.0.12",
     "@sanity/semantic-release-preset": "^4.1.7",
-    "@sanity/vision": "^3.36.4",
-    "@types/lodash": "^4.17.0",
-    "@types/react": "^18.2.74",
-    "@types/react-is": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@sanity/vision": "^3.42.1",
+    "@types/lodash": "^4.17.4",
+    "@types/react": "^18.3.2",
+    "@types/react-is": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-config-sanity": "^7.1.2",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "npm-run-all2": "^5.0.0",
     "prettier": "^3.2.5",
-    "prettier-plugin-packagejson": "^2.4.14",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "sanity": "^3.36.4",
-    "semantic-release": "^23.0.7",
-    "styled-components": "^6.1.8",
-    "typescript": "5.4.2",
-    "use-error-boundary": "^2.0.6",
+    "prettier-plugin-packagejson": "^2.5.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "rimraf": "^5.0.7",
+    "sanity": "^3.42.1",
+    "styled-components": "^6.1.11",
+    "typescript": "^5.4.5",
     "yalc": "1.0.0-pre.53"
   },
   "peerDependencies": {
     "react": "^18",
     "react-is": "^18",
-    "sanity": "^3",
-    "styled-components": "^6"
+    "sanity": "^3.42.0",
+    "styled-components": "^5 || ^6"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
-  "sanityExchangeUrl": "https://www.sanity.io/plugins/sanity-plugin-mux-input"
+  "sanityExchangeUrl": "https://www.sanity.io/plugins/sanity-plugin-mux-input",
+  "browserslist": "extends @sanity/browserslist-config",
+  "sanityPlugin": {
+    "verifyPackage": {
+      "srcIndex": false
+    }
+  }
 }

package/src/_exports/index.ts

@@ -1,7 +1,8 @@
 import {definePlugin} from 'sanity'
+
 import createStudioTool, {DEFAULT_TOOL_CONFIG} from '../components/StudioTool'
 import {muxVideoCustomRendering} from '../plugin'
-import {muxVideo, muxVideoAsset} from '../schema'
+import {muxVideoSchema, schemaTypes} from '../schema'
 import type {PluginConfig} from '../util/types'
 export type {VideoAssetDocument} from '../util/types'
 
@@ -20,9 +21,9 @@ export const muxInput = definePlugin<Partial<PluginConfig> | void>((userConfig)
     name: 'mux-input',
     schema: {
       types: [
-        muxVideoAsset,
+        ...schemaTypes,
         {
-          ...muxVideo,
+          ...muxVideoSchema,
           ...muxVideoCustomRendering(config),
         },
       ],

package/src/components/TextTracksEditor.tsx

@@ -1,12 +1,11 @@
-import {AddIcon, DocumentTextIcon, ResetIcon, TranslateIcon, TrashIcon} from '@sanity/icons'
-import {Autocomplete, Button, Card, Code, Flex, Radio, Stack, Text} from '@sanity/ui'
+import {TranslateIcon} from '@sanity/icons'
+import {Autocomplete, Box, Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
+import {uuid} from '@sanity/uuid'
 import LanguagesList from 'iso-639-1'
 import {Dispatch} from 'react'
-
-import {uuid} from '@sanity/uuid'
 import {FormField} from 'sanity'
-import {SUPPORTED_MUX_LANGUAGES, UploadTextTrack, isCustomTextTrack} from '../util/types'
-import FileInputArea from './FileInputArea'
+
+import {type PluginConfig, SUPPORTED_MUX_LANGUAGES, UploadTextTrack} from '../util/types'
 
 const ALL_LANGUAGE_CODES = LanguagesList.getAllCodes().map((code) => ({
   value: code,
@@ -25,190 +24,94 @@ const SUBTITLE_LANGUAGES: Record<
   captions: ALL_LANGUAGE_CODES,
 }
 
-/**
- * Subtitles and Captions are uploaded via .srt and .vtt files, which we can't currently support
- * due to the lack of a server to receive Mux's requests to these files' URLs.
- *
- * For now, only auto-generated subtitles are supported.
- */
-const TRACK_TYPES = [
-  {value: 'autogenerated', label: 'Auto-generated Subtitles'},
-  // {value: 'subtitles', label: 'Subtitles'},
-  // {value: 'captions', label: 'Closed Captions'},
-] as const
-
 type TrackSubAction =
-  | {subAction: 'add'}
+  | {subAction: 'add'; value: Partial<UploadTextTrack>}
   | {subAction: 'update'; value: Partial<UploadTextTrack>}
   | {subAction: 'delete'}
 
 export type TrackAction = {action: 'track'; id: string} & TrackSubAction
 
-/**
- * Handles editing of a single text track, dispatching actions back to the
- * parent UploadConfiguration state object for changing internal state.
- */
-function TrackEditor({
-  canAutoGenerate,
-  track,
-  dispatch,
-}: {
-  canAutoGenerate: boolean
-  track: Partial<UploadTextTrack> & {_id: string}
-  dispatch: Dispatch<TrackAction>
-}) {
-  const {_id: id, type} = track
-  const dispatchTrackAction = (args: TrackSubAction) => dispatch({action: 'track', id, ...args})
-
-  const trackTypes = TRACK_TYPES.filter(
-    ({value}) => !(value === 'autogenerated' && !canAutoGenerate)
-  )
-
-  if (trackTypes.length === 0) return null
-
-  return (
-    <Card border padding={3} radius={2} style={{position: 'relative'}}>
-      <Stack space={3}>
-        {trackTypes.length > 1 && (
-          <FormField title="Auto-generated subtitles">
-            <Flex gap={3}>
-              {trackTypes.map(({value, label}) => {
-                const inputId = `${id}--type-${value}`
-                return (
-                  <Flex key={value} align="center" gap={2}>
-                    <Radio
-                      checked={type === value}
-                      name="track-type"
-                      onChange={(e) =>
-                        dispatchTrackAction({
-                          subAction: 'update',
-                          value: {
-                            type: e.currentTarget.value as UploadTextTrack['type'],
-                          },
-                        })
-                      }
-                      value={value}
-                      id={inputId}
-                    />
-                    <Text as="label" htmlFor={inputId}>
-                      {label}
-                    </Text>
-                  </Flex>
-                )
-              })}
-            </Flex>
-          </FormField>
-        )}
-
-        <Autocomplete
-          id={`${id}--language`}
-          value={track.language_code}
-          onChange={(newValue) =>
-            dispatchTrackAction({
-              subAction: 'update',
-              value: {
-                language_code: newValue,
-                name: LanguagesList.getNativeName(newValue),
-              },
-            })
-          }
-          options={SUBTITLE_LANGUAGES[track.type!]}
-          icon={TranslateIcon}
-          placeholder="Select language"
-          filterOption={(query, option) =>
-            option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
-            option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
-          }
-          openButton
-          renderValue={(value) =>
-            SUBTITLE_LANGUAGES[track.type!].find((l) => l.value === value)?.label || value
-          }
-          renderOption={(option) => (
-            <Card data-as="button" padding={3} radius={2} tone="inherit">
-              <Text size={2} textOverflow="ellipsis">
-                {option.label} ({option.value})
-              </Text>
-            </Card>
-          )}
-        />
-
-        <Flex>
-          <Button
-            icon={TrashIcon}
-            tone="critical"
-            mode="ghost"
-            onClick={() => dispatchTrackAction({subAction: 'delete'})}
-            text="Delete"
-          />
-        </Flex>
-      </Stack>
-    </Card>
-  )
-}
-
 export default function TextTracksEditor({
-  canAutoGenerate,
   tracks,
   dispatch,
+  defaultLang,
 }: {
-  canAutoGenerate: boolean
+  /**
+   * Although the schema for tracks is an array, which we'll eventually support to allow uploading
+   * multiple custom subtitles, for now we only support a single auto-generated track.
+   */
   tracks: (Partial<UploadTextTrack> & {_id: string})[]
   dispatch: Dispatch<TrackAction>
+  defaultLang: PluginConfig['defaultAutogeneratedSubtitleLang']
 }) {
-  const trackTypes = TRACK_TYPES.filter(
-    ({value}) => !(value === 'autogenerated' && !canAutoGenerate)
-  )
-
-  if (trackTypes.length === 0) return null
-
+  const track = tracks[0]
   return (
-    <FormField
-      title="Captions & Subtitles"
-      description="Provide text tracks for video accessibility."
-    >
+    <FormField title="Auto-generated subtitle or caption">
       <Stack space={2}>
-        {tracks.map((track) => (
-          <TrackEditor
-            key={track._id}
-            canAutoGenerate={canAutoGenerate}
-            track={track}
-            dispatch={dispatch}
+        <Flex align="center">
+          <Checkbox
+            id="include-autogenerated-track"
+            style={{display: 'block'}}
+            checked={!!track?.language_code}
+            onChange={() => {
+              if (track) {
+                dispatch({action: 'track', id: track._id, subAction: 'delete'})
+              } else {
+                dispatch({
+                  action: 'track',
+                  id: uuid(),
+                  subAction: 'add',
+                  value: {
+                    type: 'autogenerated',
+                    name: defaultLang || undefined,
+                    language_code: defaultLang || undefined,
+                  },
+                })
+              }
+            }}
+          />
+          <Box flex={1} paddingLeft={3}>
+            <Text>
+              <label htmlFor="checkbox">Generate captions</label>
+            </Text>
+          </Box>
+        </Flex>
+        {track && (
+          <Autocomplete
+            id={`text-tract-editor--language`}
+            value={track.language_code}
+            onChange={(newValue) =>
+              dispatch({
+                action: 'track',
+                id: track._id,
+                subAction: 'update',
+                value: {
+                  language_code: newValue,
+                  name: LanguagesList.getNativeName(newValue),
+                },
+              })
+            }
+            options={SUBTITLE_LANGUAGES[track.type!]}
+            icon={TranslateIcon}
+            placeholder="Select language"
+            filterOption={(query, option) =>
+              option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
+              option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
+            }
+            openButton
+            renderValue={(value) =>
+              SUBTITLE_LANGUAGES[track.type!].find((l) => l.value === value)?.label || value
+            }
+            renderOption={(option) => (
+              <Card data-as="button" padding={3} radius={2} tone="inherit">
+                <Text size={2} textOverflow="ellipsis">
+                  {option.label} ({option.value})
+                </Text>
+              </Card>
+            )}
           />
-        ))}
-        <Button
-          icon={AddIcon}
-          onClick={() => dispatch({action: 'track', id: uuid(), subAction: 'add'})}
-          text="New caption/subtitle"
-          mode="ghost"
-        />
+        )}
       </Stack>
     </FormField>
   )
 }
-
-function getFileTextContents(file: File) {
-  return new Promise<string>((resolve, reject) => {
-    const reader = new FileReader()
-
-    reader.onload = () => {
-      if (typeof reader.result === 'string') {
-        resolve(reader.result)
-      } else {
-        reject(new Error('Could not read file'))
-      }
-    }
-
-    reader.onerror = reject
-
-    reader.readAsText(file)
-  })
-}
-
-async function fileToTrackFile(file: File) {
-  return {
-    name: file.name,
-    size: file.size,
-    type: file.type,
-    contents: await getFileTextContents(file),
-  }
-}

package/src/components/UploadConfiguration.tsx

@@ -1,5 +1,5 @@
 import {DocumentVideoIcon, UploadIcon} from '@sanity/icons'
-import {Button, Card, Checkbox, Dialog, Flex, Label, Radio, Stack, Text} from '@sanity/ui'
+import {Box, Button, Card, Checkbox, Dialog, Flex, Label, Radio, Stack, Text} from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
 import LanguagesList from 'iso-639-1'
 import {useEffect, useId, useReducer, useRef} from 'react'
@@ -61,17 +61,16 @@ export default function UploadConfiguration({
 }) {
   const id = useId()
   const autoTextTracks = useRef<NonNullable<UploadConfig['text_tracks']>>(
-    (pluginConfig.encoding_tier === 'smart' &&
-      pluginConfig.defaultAutogeneratedSubtitleLangs?.map(
-        (language_code) =>
-          ({
+    pluginConfig.encoding_tier === 'smart' && pluginConfig.defaultAutogeneratedSubtitleLang
+      ? [
+          {
             _id: uuid(),
             type: 'autogenerated',
-            language_code,
-            name: LanguagesList.getNativeName(language_code),
-          }) satisfies AutogeneratedTextTrack
-      )) ||
-      []
+            language_code: pluginConfig.defaultAutogeneratedSubtitleLang,
+            name: LanguagesList.getNativeName(pluginConfig.defaultAutogeneratedSubtitleLang),
+          } satisfies AutogeneratedTextTrack,
+        ]
+      : []
   ).current
 
   const [config, dispatch] = useReducer(
@@ -109,11 +108,10 @@ export default function UploadConfiguration({
             case 'add':
               // Exit early if track already exists
               if (target_track_i !== -1) break
-              text_tracks.push(
-                (prev.encoding_tier === 'smart'
-                  ? {_id: action.id, type: 'autogenerated'}
-                  : {_id: action.id, type: 'subtitles'}) as UploadTextTrack
-              )
+              text_tracks.push({
+                _id: action.id,
+                ...action.value,
+              } as AutogeneratedTextTrack)
               break
             case 'update':
               if (target_track_i === -1) break
@@ -332,20 +330,22 @@ export default function UploadConfiguration({
           </Stack>
         )}
 
-        {!disableTextTrackConfig && (
+        {!disableTextTrackConfig && config.encoding_tier === 'smart' && (
           <TextTracksEditor
-            canAutoGenerate={config.encoding_tier === 'smart'}
             tracks={config.text_tracks}
             dispatch={dispatch}
+            defaultLang={pluginConfig.defaultAutogeneratedSubtitleLang}
           />
         )}
 
-        <Button
-          icon={UploadIcon}
-          text="Upload"
-          tone="positive"
-          onClick={() => startUpload(formatUploadConfig(config))}
-        />
+        <Box marginTop={4}>
+          <Button
+            icon={UploadIcon}
+            text="Upload"
+            tone="positive"
+            onClick={() => startUpload(formatUploadConfig(config))}
+          />
+        </Box>
       </Stack>
     </Dialog>
   )

package/src/components/VideoInBrowser.tsx

@@ -8,7 +8,7 @@ import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
 import {VideoAssetDocument} from '../util/types'
 import IconInfo from './IconInfo'
 import VideoMetadata from './VideoMetadata'
-import VideoPlayer from './VideoPlayer'
+import VideoPlayer, {assetIsAudio} from './VideoPlayer'
 import VideoThumbnail from './VideoThumbnail'
 
 const PlayButton = styled.button`
@@ -143,7 +143,26 @@ export default function VideoInBrowser({
             <div data-play>
               <PlayIcon />
             </div>
-            <VideoThumbnail asset={asset} />
+            {assetIsAudio(asset) ? (
+              <div
+                style={{
+                  aspectRatio: THUMBNAIL_ASPECT_RATIO,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="3em" viewBox="0 0 24 24">
+                  <path
+                    fill="currentColor"
+                    style={{opacity: '0.65'}}
+                    d="M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
+                  />
+                </svg>
+              </div>
+            ) : (
+              <VideoThumbnail asset={asset} />
+            )}
           </PlayButton>
         )}
         <VideoMetadata asset={asset} />

package/src/components/VideoPlayer.tsx

@@ -4,7 +4,7 @@ import {Card, Text} from '@sanity/ui'
 import {type PropsWithChildren, useMemo} from 'react'
 
 import {useClient} from '../hooks/useClient'
-import {MIN_ASPECT_RATIO} from '../util/constants'
+import {AUDIO_ASPECT_RATIO, MIN_ASPECT_RATIO} from '../util/constants'
 import {getVideoSrc} from '../util/getVideoSrc'
 import type {VideoAssetDocument} from '../util/types'
 
@@ -17,6 +17,8 @@ export default function VideoPlayer({
 >) {
   const client = useClient()
 
+  const isAudio = assetIsAudio(asset)
+
   const {src: videoSrc, error} = useMemo(() => {
     try {
       const src = asset?.playbackId && getVideoSrc({client, asset})
@@ -41,7 +43,13 @@ export default function VideoPlayer({
   const [width, height] = (asset?.data?.aspect_ratio ?? '16:9').split(':').map(Number)
   const targetAspectRatio =
     props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height)
-  const aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio)
+  let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio)
+  if (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
+  }
 
   return (
     <Card tone="transparent" style={{aspectRatio: aspectRatio, position: 'relative'}}>
@@ -63,6 +71,7 @@ export default function VideoPlayer({
               player_version: process.env.PKG_VERSION,
               page_type: 'Preview Player',
             }}
+            audio={isAudio}
             style={{
               height: '100%',
               width: '100%',
@@ -94,3 +103,7 @@ export default function VideoPlayer({
     </Card>
   )
 }
+
+export function assetIsAudio(asset: VideoAssetDocument) {
+  return asset.data?.max_stored_resolution === 'Audio only'
+}

package/src/hooks/useImportMuxAssets.ts

@@ -58,7 +58,7 @@ export default function useImportMuxAssets() {
 
   async function importAssets() {
     setImportState('importing')
-    const documents = selectedAssets.map(muxAssetToSanityDocument)
+    const documents = selectedAssets.flatMap((asset) => muxAssetToSanityDocument(asset) || [])
 
     const tx = client.transaction()
     documents.forEach((doc) => tx.create(doc))
@@ -89,14 +89,18 @@ export default function useImportMuxAssets() {
   }
 }
 
-function muxAssetToSanityDocument(asset: MuxAsset): VideoAssetDocument {
+function muxAssetToSanityDocument(asset: MuxAsset): VideoAssetDocument | undefined {
+  const playbackId = (asset.playback_ids || []).find((p) => p.id)?.id
+
+  if (!playbackId) return undefined
+
   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,
+    playbackId,
     filename: `Asset #${truncateString(asset.id, 15)}`,
     status: asset.status,
     data: asset,