sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/components/ResyncMetadata.tsx

@@ -1,280 +0,0 @@
-import {CheckmarkCircleIcon, ErrorOutlineIcon, SyncIcon} from '@sanity/icons'
-import {Box, Button, Card, Dialog, Flex, Heading, Radio, Spinner, Stack, Text} from '@sanity/ui'
-import {useState} from 'react'
-
-import useResyncMuxMetadata from '../hooks/useResyncMuxMetadata'
-import {isEmptyOrPlaceholderTitle} from '../util/assetTitlePlaceholder'
-import {DIALOGS_Z_INDEX} from '../util/constants'
-
-type SyncOption = 'fillEmpty' | 'syncTitles' | 'fullResync'
-
-interface OptionCardProps {
-  id: SyncOption
-  selected: boolean
-  onSelect: (id: SyncOption) => void
-  title: string
-  count: number
-  description: string
-  disabled?: boolean
-}
-
-function OptionCard({
-  id,
-  selected,
-  onSelect,
-  title,
-  count,
-  description,
-  disabled,
-}: OptionCardProps) {
-  return (
-    <Card
-      as="label"
-      padding={3}
-      radius={2}
-      border
-      tone={selected ? 'primary' : 'default'}
-      style={{
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
-      }}
-    >
-      <Flex gap={3} align="flex-start">
-        <Box paddingTop={1}>
-          <Radio
-            checked={selected}
-            onChange={() => onSelect(id)}
-            disabled={disabled}
-            name="sync-option"
-          />
-        </Box>
-        <Stack space={2} flex={1}>
-          <Flex align="center" gap={2}>
-            <Text size={2} weight="semibold">
-              {title} ({count})
-            </Text>
-          </Flex>
-          <Text size={1} muted>
-            {description}
-          </Text>
-        </Stack>
-      </Flex>
-    </Card>
-  )
-}
-
-function ResyncMetadataDialog(props: ReturnType<typeof useResyncMuxMetadata>) {
-  const {resyncState} = props
-
-  const videosToUpdate = props.matchedAssets?.filter((m) => m.muxAsset).length || 0
-  const videosWithEmptyOrPlaceholder =
-    props.matchedAssets?.filter(
-      (m) => m.muxAsset && m.muxTitle && isEmptyOrPlaceholderTitle(m.currentTitle, m.muxAsset.id)
-    ).length || 0
-
-  const hasEmptyTitles = videosWithEmptyOrPlaceholder > 0
-  const defaultOption: SyncOption = hasEmptyTitles ? 'fillEmpty' : 'syncTitles'
-  const [selectedOption, setSelectedOption] = useState<SyncOption>(defaultOption)
-
-  const canTriggerResync = resyncState === 'idle' || resyncState === 'error'
-  const isResyncing = resyncState === 'syncing'
-  const isDone = resyncState === 'done'
-  const isLoading = props.muxAssets.loading || props.sanityAssetsLoading
-
-  const handleSync = () => {
-    switch (selectedOption) {
-      case 'fillEmpty':
-        props.syncOnlyEmpty()
-        break
-      case 'syncTitles':
-        props.syncAllVideos()
-        break
-      case 'fullResync':
-        props.syncFullData()
-        break
-      default:
-        break
-    }
-  }
-
-  return (
-    <Dialog
-      animate
-      header="Sync with Mux"
-      zOffset={DIALOGS_Z_INDEX}
-      id="resync-metadata-dialog"
-      onClose={props.closeDialog}
-      onClickOutside={props.closeDialog}
-      width={1}
-      position="fixed"
-      footer={
-        !isDone && (
-          <Card padding={3}>
-            <Flex justify="flex-end" gap={2}>
-              <Button
-                fontSize={2}
-                padding={3}
-                mode="ghost"
-                text="Cancel"
-                onClick={props.closeDialog}
-                disabled={isResyncing}
-              />
-              <Button
-                icon={SyncIcon}
-                fontSize={2}
-                padding={3}
-                text="Run sync"
-                tone="primary"
-                onClick={handleSync}
-                iconRight={isResyncing && Spinner}
-                disabled={!canTriggerResync || isLoading}
-              />
-            </Flex>
-          </Card>
-        )
-      }
-    >
-      <Box padding={4}>
-        {/* LOADING ASSETS STATE */}
-        {isLoading && (
-          <Card tone="primary" marginBottom={4} padding={3} border radius={2}>
-            <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} muted>
-                  This may take a while.
-                </Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-
-        {/* ERROR LOADING MUX */}
-        {props.muxAssets.error && (
-          <Card tone="critical" marginBottom={4} padding={3} border radius={2}>
-            <Flex align="center" gap={2}>
-              <ErrorOutlineIcon fontSize={36} />
-              <Stack space={2}>
-                <Text size={2} weight="semibold">
-                  There was an error getting data from Mux
-                </Text>
-                <Text size={1}>Please try again or contact a developer for help.</Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-
-        {/* SYNCING STATE */}
-        {resyncState === 'syncing' && (
-          <Card tone="primary" marginBottom={4} padding={3} border radius={2}>
-            <Flex align="center" gap={4}>
-              <Spinner muted size={4} />
-              <Stack space={2}>
-                <Text size={2} weight="semibold">
-                  Syncing metadata
-                </Text>
-                <Text size={1} muted>
-                  Updating videos from Mux...
-                </Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-
-        {/* ERROR SYNCING */}
-        {resyncState === 'error' && (
-          <Card tone="critical" marginBottom={4} padding={3} border radius={2}>
-            <Flex align="center" gap={2}>
-              <ErrorOutlineIcon fontSize={36} />
-              <Stack space={2}>
-                <Text size={2} weight="semibold">
-                  There was an error syncing metadata
-                </Text>
-                <Text size={1}>
-                  {props.resyncError
-                    ? `Error: ${props.resyncError}`
-                    : 'Please try again or contact a developer for help.'}
-                </Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-
-        {/* SUCCESS STATE */}
-        {resyncState === 'done' && (
-          <Stack paddingY={5} space={3} style={{textAlign: 'center'}}>
-            <Box>
-              <CheckmarkCircleIcon fontSize={48} />
-            </Box>
-            <Heading size={2}>Sync completed</Heading>
-            <Text size={2} muted>
-              Videos have been updated from Mux.
-            </Text>
-          </Stack>
-        )}
-
-        {/* OPTIONS */}
-        {!isDone && !isLoading && !props.muxAssets.error && (
-          <Stack space={4}>
-            <Text size={1} muted>
-              Found {videosToUpdate} video{videosToUpdate === 1 ? '' : 's'} linked to Mux.
-            </Text>
-
-            <Stack space={3}>
-              {hasEmptyTitles && (
-                <OptionCard
-                  id="fillEmpty"
-                  selected={selectedOption === 'fillEmpty'}
-                  onSelect={setSelectedOption}
-                  title="Fill missing titles only"
-                  count={videosWithEmptyOrPlaceholder}
-                  description="Updates only videos without a title or with placeholder titles (e.g., 'Asset #123') using the title from Mux."
-                  disabled={isResyncing}
-                />
-              )}
-
-              <OptionCard
-                id="syncTitles"
-                selected={selectedOption === 'syncTitles'}
-                onSelect={setSelectedOption}
-                title="Sync all titles"
-                count={videosToUpdate}
-                description="Replaces the title in Sanity with the title from Mux for all videos."
-                disabled={isResyncing}
-              />
-
-              <OptionCard
-                id="fullResync"
-                selected={selectedOption === 'fullResync'}
-                onSelect={setSelectedOption}
-                title="Full resync"
-                count={videosToUpdate}
-                description="Updates all fields from Mux including status, duration, tracks, captions, and renditions."
-                disabled={isResyncing}
-              />
-            </Stack>
-          </Stack>
-        )}
-      </Box>
-    </Dialog>
-  )
-}
-
-export default function ResyncMetadata() {
-  const resyncMetadata = useResyncMuxMetadata()
-
-  if (!resyncMetadata.hasSecrets) {
-    return
-  }
-
-  if (resyncMetadata.dialogOpen) {
-    // eslint-disable-next-line consistent-return
-    return <ResyncMetadataDialog {...resyncMetadata} />
-  }
-
-  // eslint-disable-next-line consistent-return
-  return <Button mode="bleed" text="Sync with Mux" onClick={resyncMetadata.openDialog} />
-}

package/src/components/SelectAsset.tsx

@@ -1,39 +0,0 @@
-import {useCallback} from 'react'
-import {PatchEvent, set, setIfMissing, unset} from 'sanity'
-
-import type {SetDialogState} from '../hooks/useDialogState'
-import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
-import VideosBrowser, {type VideosBrowserProps} from './VideosBrowser'
-
-export interface Props extends Pick<MuxInputProps, 'onChange'> {
-  asset?: VideoAssetDocument | null | undefined
-  setDialogState: SetDialogState
-  config: PluginConfig
-}
-
-export default function SelectAssets({
-  asset: selectedAsset,
-  onChange,
-  setDialogState,
-  config,
-}: Props) {
-  const handleSelect = useCallback<Required<VideosBrowserProps>['onSelect']>(
-    (chosenAsset) => {
-      if (!chosenAsset?._id) {
-        onChange(PatchEvent.from([unset(['asset'])]))
-      }
-      if (chosenAsset._id !== selectedAsset?._id) {
-        onChange(
-          PatchEvent.from([
-            setIfMissing({asset: {}, _type: 'mux.video'}),
-            set({_type: 'reference', _weak: true, _ref: chosenAsset._id}, ['asset']),
-          ])
-        )
-      }
-      setDialogState(false)
-    },
-    [onChange, setDialogState, selectedAsset]
-  )
-
-  return <VideosBrowser onSelect={handleSelect} config={config} />
-}

package/src/components/SelectSortOptions.tsx

@@ -1,45 +0,0 @@
-import {SortIcon} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuItem, PopoverProps} from '@sanity/ui'
-import {useId} from 'react'
-
-import {ASSET_SORT_OPTIONS, SortOption} from '../hooks/useAssets'
-
-export const CONTEXT_MENU_POPOVER_PROPS: PopoverProps = {
-  constrainSize: true,
-  placement: 'bottom',
-  portal: true,
-  width: 0,
-}
-
-/**
- * @sanity/ui components adapted from:
- * https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/pane/PaneContextMenuButton.tsx#L19
- */
-export function SelectSortOptions(props: {sort: SortOption; setSort: (s: SortOption) => void}) {
-  const id = useId()
-
-  return (
-    <MenuButton
-      button={
-        <Button text="Sort" icon={SortIcon} mode="bleed" padding={3} style={{cursor: 'pointer'}} />
-      }
-      id={id}
-      menu={
-        <Menu>
-          {Object.entries(ASSET_SORT_OPTIONS).map(([type, {label}]) => (
-            <MenuItem
-              key={type}
-              data-as="button"
-              onClick={() => props.setSort(type as SortOption)}
-              padding={3}
-              tone="default"
-              text={label}
-              pressed={type === props.sort}
-            />
-          ))}
-        </Menu>
-      }
-      popover={CONTEXT_MENU_POPOVER_PROPS}
-    />
-  )
-}

package/src/components/SpinnerBox.tsx

@@ -1,16 +0,0 @@
-import {Box, Spinner} from '@sanity/ui'
-
-const SpinnerBox: React.FC = () => (
-  <Box
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      minHeight: '150px',
-    }}
-  >
-    <Spinner />
-  </Box>
-)
-
-export default SpinnerBox

package/src/components/StudioTool.tsx

@@ -1,24 +0,0 @@
-import type {Tool} from 'sanity'
-
-import type {PluginConfig} from '../util/types'
-import ToolIcon from './icons/ToolIcon'
-import VideosBrowser from './VideosBrowser'
-
-const StudioTool: React.FC<PluginConfig> = (config) => {
-  return <VideosBrowser config={config} />
-}
-
-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',
-    icon: toolConfig.icon || DEFAULT_TOOL_CONFIG.icon,
-    title: toolConfig.title || DEFAULT_TOOL_CONFIG.title,
-    component: (props: any) => <StudioTool {...config} {...props} />,
-  }
-}

package/src/components/TextTracksEditor.tsx

@@ -1,117 +0,0 @@
-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 {FormField} from 'sanity'
-
-import {type PluginConfig, SUPPORTED_MUX_LANGUAGES, UploadTextTrack} from '../util/types'
-
-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,
-}
-
-type TrackSubAction =
-  | {subAction: 'add'; value: Partial<UploadTextTrack>}
-  | {subAction: 'update'; value: Partial<UploadTextTrack>}
-  | {subAction: 'delete'}
-
-export type TrackAction = {action: 'track'; id: string} & TrackSubAction
-
-export default function TextTracksEditor({
-  tracks,
-  dispatch,
-  defaultLang,
-}: {
-  /**
-   * 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 track = tracks[0]
-  return (
-    <FormField title="Auto-generated subtitle or caption" path={[]}>
-      <Stack space={2}>
-        <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>
-            )}
-          />
-        )}
-      </Stack>
-    </FormField>
-  )
-}