sanity-plugin-mux-input 2.2.3 → 2.3.0

package/src/components/ImportVideosFromMux.tsx

@@ -0,0 +1,317 @@
+import {CheckmarkCircleIcon, ErrorOutlineIcon, RetrieveIcon, RetryIcon} from '@sanity/icons'
+import {
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Code,
+  Dialog,
+  Flex,
+  Heading,
+  Spinner,
+  Stack,
+  Text,
+} from '@sanity/ui'
+import {truncateString, useFormattedDuration} from 'sanity'
+import styled from 'styled-components'
+
+import useImportMuxAssets from '../hooks/useImportMuxAssets'
+import {DIALOGS_Z_INDEX} from '../util/constants'
+import type {MuxAsset} from '../util/types'
+import VideoThumbnail from './VideoThumbnail'
+
+const MissingAssetCheckbox = styled(Checkbox)`
+  position: static !important;
+
+  input::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    cursor: pointer;
+    z-index: 1000;
+  }
+`
+
+function MissingAsset({
+  asset,
+  selectAsset,
+  selected,
+}: {
+  asset: MuxAsset
+  selectAsset: (selected: boolean) => void
+  selected: boolean
+}) {
+  const duration = useFormattedDuration(asset.duration * 1000)
+
+  return (
+    <Card
+      key={asset.id}
+      tone={selected ? 'positive' : undefined}
+      border
+      paddingX={2}
+      paddingY={3}
+      style={{position: 'relative'}}
+      radius={1}
+    >
+      <Flex align="center" gap={2}>
+        <MissingAssetCheckbox
+          checked={selected}
+          onChange={(e) => {
+            selectAsset(e.currentTarget.checked)
+          }}
+          aria-label={selected ? `Import video ${asset.id}` : `Skip import of video ${asset.id}`}
+        />
+        <VideoThumbnail
+          asset={{
+            assetId: asset.id,
+            data: asset,
+            filename: asset.id,
+            playbackId: asset.playback_ids.find((p) => p.id)?.id,
+          }}
+          width={150}
+        />
+        <Stack space={2}>
+          <Flex align="center" gap={1}>
+            <Code size={2}>{truncateString(asset.id, 15)}</Code>{' '}
+            <Text muted size={2}>
+              ({duration.formatted})
+            </Text>
+          </Flex>
+          <Text size={1}>
+            Uploaded at{' '}
+            {new Date(Number(asset.created_at) * 1000).toLocaleDateString('en', {
+              year: 'numeric',
+              day: '2-digit',
+              month: '2-digit',
+            })}
+          </Text>
+        </Stack>
+      </Flex>
+    </Card>
+  )
+}
+
+// eslint-disable-next-line complexity
+function ImportVideosDialog(props: ReturnType<typeof useImportMuxAssets>) {
+  const {importState} = props
+
+  const canTriggerImport =
+    (importState === 'idle' || importState === 'error') && props.selectedAssets.length > 0
+  const isImporting = importState === 'importing'
+  const noAssetsToImport =
+    props.missingAssets?.length === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading
+
+  return (
+    <Dialog
+      header={'Import videos from Mux'}
+      zOffset={DIALOGS_Z_INDEX}
+      id="video-details-dialog"
+      onClose={props.closeDialog}
+      onClickOutside={props.closeDialog}
+      width={1}
+      position="fixed"
+      footer={
+        importState !== 'done' &&
+        !noAssetsToImport && (
+          <Card padding={3}>
+            <Flex justify="space-between" align="center">
+              <Button
+                fontSize={2}
+                padding={3}
+                mode="bleed"
+                text="Cancel"
+                tone="critical"
+                onClick={props.closeDialog}
+                disabled={isImporting}
+              />
+              {props.missingAssets && (
+                <Button
+                  icon={RetrieveIcon}
+                  fontSize={2}
+                  padding={3}
+                  mode="ghost"
+                  text={
+                    props.selectedAssets?.length > 0
+                      ? `Import ${props.selectedAssets.length} video(s)`
+                      : 'No video(s) selected'
+                  }
+                  tone="positive"
+                  onClick={props.importAssets}
+                  iconRight={isImporting && Spinner}
+                  disabled={!canTriggerImport}
+                />
+              )}
+            </Flex>
+          </Card>
+        )
+      }
+    >
+      <Box padding={3}>
+        {/* LOADING ASSETS STATE */}
+        {(props.muxAssets.loading || props.assetsInSanityLoading) && (
+          <Card tone="primary" marginBottom={5} padding={3} border>
+            <Flex align="center" gap={4}>
+              <Spinner muted size={4} />
+              <Stack space={2}>
+                <Text size={2} weight="semibold">
+                  Loading assets from Mux
+                </Text>
+                <Text size={1}>
+                  This may take a while.
+                  {props.missingAssets &&
+                    props.missingAssets.length > 0 &&
+                    ` There are at least ${props.missingAssets.length} video${props.missingAssets.length > 1 ? 's' : ''} currently not in Sanity...`}
+                </Text>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
+
+        {/* ERROR LOADING MUX */}
+        {props.muxAssets.error && (
+          <Card tone="critical" marginBottom={5} padding={3} border>
+            <Flex align="center" gap={2}>
+              <ErrorOutlineIcon fontSize={36} />
+              <Stack space={2}>
+                <Text size={2} weight="semibold">
+                  There was an error getting all data from Mux
+                </Text>
+                <Text size={1}>
+                  {props.missingAssets
+                    ? `But we've found ${props.missingAssets.length} video${props.missingAssets.length > 1 ? 's' : ''} not in Sanity, which you can start importing now.`
+                    : 'Please try again or contact a developer for help.'}
+                </Text>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
+
+        {/* IMPORTING STATE */}
+        {importState === 'importing' && (
+          <Card tone="primary" marginBottom={5} padding={3} border>
+            <Flex align="center" gap={4}>
+              <Spinner muted size={4} />
+              <Stack space={2}>
+                <Text size={2} weight="semibold">
+                  Importing {props.selectedAssets.length} video
+                  {props.selectedAssets.length > 1 && 's'} from Mux
+                </Text>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
+
+        {/* ERROR IMPORTING */}
+        {importState === 'error' && (
+          <Card tone="critical" marginBottom={5} padding={3} border>
+            <Flex align="center" gap={2}>
+              <ErrorOutlineIcon fontSize={36} />
+              <Stack space={2}>
+                <Text size={2} weight="semibold">
+                  There was an error importing videos
+                </Text>
+                <Text size={1}>
+                  {props.importError
+                    ? `Error: ${props.importError}`
+                    : 'Please try again or contact a developer for help.'}
+                </Text>
+                <Box marginTop={1}>
+                  <Button
+                    icon={RetryIcon}
+                    text="Retry"
+                    tone="primary"
+                    onClick={props.importAssets}
+                  />
+                </Box>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
+
+        {/* NO ASSETS TO IMPORT or SUCESS STATE */}
+        {(noAssetsToImport || importState === 'done') && (
+          <Stack paddingY={5} marginBottom={4} space={3} style={{textAlign: 'center'}}>
+            <Box>
+              <CheckmarkCircleIcon fontSize={48} />
+            </Box>
+            <Heading size={2}>
+              {importState === 'done'
+                ? `Videos imported successfully`
+                : 'There are no Mux videos to import'}
+            </Heading>
+            <Text size={2}>
+              {importState === 'done'
+                ? 'You can now use them in your Sanity content.'
+                : "They're all in Sanity and ready to be used in your content."}
+            </Text>
+          </Stack>
+        )}
+
+        {/* MISSING ASSETS SELECTOR */}
+        {props.missingAssets &&
+          props.missingAssets.length > 0 &&
+          (importState === 'idle' || importState === 'error') && (
+            <Stack space={4}>
+              <Heading size={1}>
+                There are {props.missingAssets.length}
+                {props.muxAssets.loading && '+'} Mux video{props.missingAssets.length > 1 && 's'}{' '}
+                not in Sanity
+              </Heading>
+              {!props.muxAssets.loading && (
+                <Flex align="center" paddingX={2}>
+                  <Checkbox
+                    id="import-all"
+                    style={{display: 'block'}}
+                    onClick={(e) => {
+                      const selectAll = e.currentTarget.checked
+                      if (selectAll) {
+                        // eslint-disable-next-line no-unused-expressions
+                        props.missingAssets && props.setSelectedAssets(props.missingAssets)
+                      } else {
+                        props.setSelectedAssets([])
+                      }
+                    }}
+                    checked={props.selectedAssets.length === props.missingAssets.length}
+                  />
+                  <Box flex={1} paddingLeft={3} as="label" htmlFor="import-all">
+                    <Text>Import all</Text>
+                  </Box>
+                </Flex>
+              )}
+              {props.missingAssets.map((asset) => (
+                <MissingAsset
+                  key={asset.id}
+                  asset={asset}
+                  selectAsset={(selected) => {
+                    if (selected) {
+                      props.setSelectedAssets([...props.selectedAssets, asset])
+                    } else {
+                      props.setSelectedAssets(props.selectedAssets.filter((a) => a.id !== asset.id))
+                    }
+                  }}
+                  selected={props.selectedAssets.some((a) => a.id === asset.id)}
+                />
+              ))}
+            </Stack>
+          )}
+      </Box>
+    </Dialog>
+  )
+}
+
+export default function ImportVideosFromMux() {
+  const importAssets = useImportMuxAssets()
+
+  if (!importAssets.hasSecrets) {
+    return
+  }
+
+  if (importAssets.dialogOpen) {
+    // eslint-disable-next-line consistent-return
+    return <ImportVideosDialog {...importAssets} />
+  }
+
+  // eslint-disable-next-line consistent-return
+  return <Button mode="bleed" text="Import from Mux" onClick={importAssets.openDialog} />
+}

package/src/components/Input.tsx

@@ -6,15 +6,15 @@ import {useClient} from '../hooks/useClient'
 import {useDialogState} from '../hooks/useDialogState'
 import {useMuxPolling} from '../hooks/useMuxPolling'
 import {useSecretsDocumentValues} from '../hooks/useSecretsDocumentValues'
-import type {Config, MuxInputProps} from '../util/types'
-import Uploader from './__legacy__Uploader'
+import type {MuxInputProps, PluginConfig} from '../util/types'
 import ConfigureApi from './ConfigureApi'
 import ErrorBoundaryCard from './ErrorBoundaryCard'
 import {InputFallback} from './Input.styled'
 import Onboard from './Onboard'
+import Uploader from './Uploader'
 
 export interface InputProps extends MuxInputProps {
-  config: Config
+  config: PluginConfig
 }
 const Input = (props: InputProps) => {
   const client = useClient()

package/src/components/PlayerActionsMenu.tsx

@@ -1,4 +1,5 @@
 import {
+  EllipsisHorizontalIcon,
   EllipsisVerticalIcon,
   LockIcon,
   PlugIcon,
@@ -43,14 +44,15 @@ const LockButton = styled(Button)`
   color: white;
 `
 
-export interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
-  asset: VideoAssetDocument
-  onUpload: (files: File[]) => void
-  dialogState: DialogState
-  setDialogState: SetDialogState
-}
-function PlayerActionsMenu(props: Props) {
-  const {asset, readOnly, dialogState, setDialogState, onChange, onUpload} = props
+function PlayerActionsMenu(
+  props: Pick<MuxInputProps, 'onChange' | 'readOnly'> & {
+    asset: VideoAssetDocument
+    onSelect: (files: File[]) => void
+    dialogState: DialogState
+    setDialogState: SetDialogState
+  }
+) {
+  const {asset, readOnly, dialogState, setDialogState, onChange, onSelect} = props
   const [open, setOpen] = useState(false)
   const [menuElement, setMenuRef] = useState<HTMLDivElement | null>(null)
   const isSigned = useMemo(() => getPlaybackPolicy(asset) === 'signed', [asset])
@@ -98,11 +100,10 @@ function PlayerActionsMenu(props: Props) {
             <FileInputMenuItem
               accept="video/*"
               icon={UploadIcon}
-              mode="bleed"
-              onSelect={onUpload}
+              onSelect={onSelect}
               text="Upload"
               disabled={readOnly}
-              fontSize={2}
+              fontSize={1}
             />
             <MenuItem
               icon={SearchIcon}
@@ -129,8 +130,9 @@ function PlayerActionsMenu(props: Props) {
         open={open}
       >
         <Button
-          icon={EllipsisVerticalIcon}
+          icon={EllipsisHorizontalIcon}
           mode="ghost"
+          fontSize={1}
           onClick={() => {
             setDialogState(false)
             setOpen(true)

package/src/components/SelectAsset.tsx

@@ -19,7 +19,7 @@ export default function SelectAssets({asset: selectedAsset, onChange, setDialogS
       if (chosenAsset._id !== selectedAsset?._id) {
         onChange(
           PatchEvent.from([
-            setIfMissing({asset: {}}),
+            setIfMissing({asset: {}, _type: 'mux.video'}),
             set({_type: 'reference', _weak: true, _ref: chosenAsset._id}, ['asset']),
           ])
         )

package/src/components/StudioTool.tsx

@@ -1,20 +1,25 @@
 import React from 'react'
 import {Tool} from 'sanity'
 
-import {Config} from '../util/types'
+import {PluginConfig} from '../util/types'
 import ToolIcon from './icons/ToolIcon'
 import VideosBrowser from './VideosBrowser'
 
-const StudioTool: React.FC<Config> = () => {
+const StudioTool: React.FC<PluginConfig> = () => {
   return <VideosBrowser />
 }
 
-export default function createStudioTool(config: Config): Tool {
-  const toolConfig = typeof config.tool === 'object' ? config.tool : {}
+export const DEFAULT_TOOL_CONFIG = {
+  icon: ToolIcon,
+  title: 'Videos',
+}
+
+export default function createStudioTool(config: PluginConfig): Tool {
+  const toolConfig = typeof config.tool === 'object' ? config.tool : DEFAULT_TOOL_CONFIG
   return {
     name: 'mux',
-    title: toolConfig.title || 'Videos',
+    icon: toolConfig.icon || DEFAULT_TOOL_CONFIG.icon,
+    title: toolConfig.title || DEFAULT_TOOL_CONFIG.title,
     component: (props: any) => <StudioTool {...config} {...props} />,
-    icon: toolConfig.icon || ToolIcon,
   }
 }

package/src/components/TextTracksEditor.tsx

@@ -0,0 +1,214 @@
+import {AddIcon, DocumentTextIcon, ResetIcon, TranslateIcon, TrashIcon} from '@sanity/icons'
+import {Autocomplete, Button, Card, Code, Flex, Radio, Stack, Text} from '@sanity/ui'
+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'
+
+const ALL_LANGUAGE_CODES = LanguagesList.getAllCodes().map((code) => ({
+  value: code,
+  label: LanguagesList.getNativeName(code),
+}))
+
+const SUBTITLE_LANGUAGES: Record<
+  Extract<UploadTextTrack, {language_code: any}>['type'],
+  {value: string; label: string}[]
+> = {
+  autogenerated: SUPPORTED_MUX_LANGUAGES.map((lang) => ({
+    value: lang.code,
+    label: lang.label,
+  })),
+  subtitles: ALL_LANGUAGE_CODES,
+  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: '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,
+}: {
+  canAutoGenerate: boolean
+  tracks: (Partial<UploadTextTrack> & {_id: string})[]
+  dispatch: Dispatch<TrackAction>
+}) {
+  const trackTypes = TRACK_TYPES.filter(
+    ({value}) => !(value === 'autogenerated' && !canAutoGenerate)
+  )
+
+  if (trackTypes.length === 0) return null
+
+  return (
+    <FormField
+      title="Captions & Subtitles"
+      description="Provide text tracks for video accessibility."
+    >
+      <Stack space={2}>
+        {tracks.map((track) => (
+          <TrackEditor
+            key={track._id}
+            canAutoGenerate={canAutoGenerate}
+            track={track}
+            dispatch={dispatch}
+          />
+        ))}
+        <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),
+  }
+}