sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/components/Input.tsx

@@ -1,78 +0,0 @@
-import {Card} from '@sanity/ui'
-import {memo, Suspense} from 'react'
-
-import {useAccessControl} from '../hooks/useAccessControl'
-import {useAssetDocumentValues} from '../hooks/useAssetDocumentValues'
-import {useClient} from '../hooks/useClient'
-import {useDialogState} from '../hooks/useDialogState'
-import {useMuxPolling} from '../hooks/useMuxPolling'
-import {useSecretsDocumentValues} from '../hooks/useSecretsDocumentValues'
-import type {MuxInputProps, PluginConfig} from '../util/types'
-import {ConfigureApiDialog} 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: PluginConfig
-}
-const Input = (props: InputProps) => {
-  const client = useClient()
-  const secretDocumentValues = useSecretsDocumentValues()
-  const assetDocumentValues = useAssetDocumentValues(props.value?.asset)
-  const poll = useMuxPolling(props.readOnly ? undefined : assetDocumentValues?.value || undefined)
-  const [dialogState, setDialogState] = useDialogState()
-  const {hasConfigAccess} = useAccessControl(props.config)
-
-  const error = secretDocumentValues.error || assetDocumentValues.error || poll.error /*||
-    // @TODO move errored logic to Uploader, where handleRemoveVideo can be called
-    (assetDocumentValues.value?.status === 'errored'
-      ? new Error(assetDocumentValues.value.data?.errors?.messages?.join(' '))
-      : undefined)
-      // */
-  if (error) {
-    // @TODO deal with it more gracefully
-    throw error
-  }
-  const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading
-
-  return (
-    <Card>
-      <ErrorBoundaryCard schemaType={props.schemaType}>
-        <Suspense fallback={<InputFallback />}>
-          {isLoading ? (
-            <InputFallback />
-          ) : (
-            <>
-              {secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? (
-                <Onboard setDialogState={setDialogState} config={props.config} />
-              ) : (
-                <Uploader
-                  {...props}
-                  config={props.config}
-                  onChange={props.onChange}
-                  client={client}
-                  secrets={secretDocumentValues.value.secrets}
-                  asset={assetDocumentValues.value}
-                  dialogState={dialogState}
-                  setDialogState={setDialogState}
-                  needsSetup={secretDocumentValues.value.needsSetup}
-                />
-              )}
-
-              {dialogState === 'secrets' && hasConfigAccess && (
-                <ConfigureApiDialog
-                  setDialogState={setDialogState}
-                  secrets={secretDocumentValues.value.secrets}
-                />
-              )}
-            </>
-          )}
-        </Suspense>
-      </ErrorBoundaryCard>
-    </Card>
-  )
-}
-
-export default memo(Input)

package/src/components/InputBrowser.tsx

@@ -1,41 +0,0 @@
-import {Dialog} from '@sanity/ui'
-import {useCallback, useId} from 'react'
-import {styled} from 'styled-components'
-
-import type {SetDialogState} from '../hooks/useDialogState'
-import SelectAsset, {type Props as SelectAssetProps} from './SelectAsset'
-
-/** To prevent Content Layout Shift (CLS), ensure that the dialog always occupies the entire available height. */
-const StyledDialog = styled(Dialog)`
-  > div[data-ui='DialogCard'] > div[data-ui='Card'] {
-    height: 100%;
-  }
-`
-
-export default function InputBrowser({
-  setDialogState,
-  asset,
-  onChange,
-  config,
-}: Pick<SelectAssetProps, 'onChange' | 'asset' | 'config'> & {
-  setDialogState: SetDialogState
-}) {
-  const id = `InputBrowser${useId()}`
-  const handleClose = useCallback(() => setDialogState(false), [setDialogState])
-  return (
-    <StyledDialog
-      __unstable_autoFocus
-      header="Select video"
-      id={id}
-      onClose={handleClose}
-      width={2}
-    >
-      <SelectAsset
-        config={config}
-        asset={asset}
-        onChange={onChange}
-        setDialogState={setDialogState}
-      />
-    </StyledDialog>
-  )
-}

package/src/components/InputError.tsx

@@ -1,17 +0,0 @@
-import {Box, Dialog, Text} from '@sanity/ui'
-import {useId} from 'react'
-
-interface Props {
-  error: Error
-  onClose: () => void
-}
-export default function InputError({onClose, error}: Props) {
-  const id = `InputError${useId()}`
-  return (
-    <Dialog animate header={error.name} id={id} onClose={onClose}>
-      <Box padding={4}>
-        <Text>{error.message}</Text>
-      </Box>
-    </Dialog>
-  )
-}

package/src/components/MuxLogo.tsx

@@ -1,42 +0,0 @@
-import {useTheme_v2} from '@sanity/ui'
-import {CSSProperties, useId, useMemo} from 'react'
-
-export interface Props {
-  height?: number
-}
-export default function MuxLogo({height = 26}: Props) {
-  const id = useId()
-  const theme = useTheme_v2()
-  const fillColor = theme.color._dark ? 'white' : 'black'
-  const titleId = useMemo(() => `${id}-title`, [id])
-
-  const pathStyle: CSSProperties = {
-    fillRule: 'nonzero',
-  }
-
-  return (
-    <svg
-      aria-labelledby={titleId}
-      style={{height: `${height}px`}}
-      viewBox="0 0 1600 500"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlSpace="preserve"
-    >
-      <g id="Layer-1" fill={fillColor}>
-        <path
-          d="M994.287,93.486c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m0,-93.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,68.943 -56.09,125.033 -125.032,125.033c-68.942,-0 -125.03,-56.09 -125.03,-125.033l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,137.853 112.149,250.003 249.999,250.003c137.851,-0 250.001,-112.15 250.001,-250.003l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486"
-          style={pathStyle}
-        />
-        <path
-          d="M1537.51,468.511c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m-275.883,-218.509l-143.33,143.329c-24.402,24.402 -24.402,63.966 0,88.368c24.402,24.402 63.967,24.402 88.369,-0l143.33,-143.329l143.328,143.329c24.402,24.4 63.967,24.402 88.369,-0c24.403,-24.402 24.403,-63.966 0.001,-88.368l-143.33,-143.329l0.001,-0.004l143.329,-143.329c24.402,-24.402 24.402,-63.965 0,-88.367c-24.402,-24.402 -63.967,-24.402 -88.369,-0l-143.329,143.328l-143.329,-143.328c-24.402,-24.401 -63.967,-24.402 -88.369,-0c-24.402,24.402 -24.402,63.965 0,88.367l143.329,143.329l0,0.004Z"
-          style={pathStyle}
-        />
-        <path
-          d="M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729"
-          style={pathStyle}
-        />
-      </g>
-    </svg>
-  )
-}

package/src/components/Onboard.tsx

@@ -1,65 +0,0 @@
-import {PlugIcon} from '@sanity/icons'
-import {Button, Card, Flex, Grid, Heading, Inline, Text} from '@sanity/ui'
-import {useCallback} from 'react'
-
-import {useAccessControl} from '../hooks/useAccessControl'
-import type {SetDialogState} from '../hooks/useDialogState'
-import {PluginConfig} from '../util/types'
-import MuxLogo from './MuxLogo'
-
-interface OnboardProps {
-  setDialogState: SetDialogState
-  config: PluginConfig
-}
-
-export default function Onboard(props: OnboardProps) {
-  const {setDialogState} = props
-  const handleOpen = useCallback(() => setDialogState('secrets'), [setDialogState])
-  const {hasConfigAccess} = useAccessControl(props.config)
-
-  return (
-    <>
-      <div style={{padding: 2}}>
-        <Card
-          display="flex"
-          sizing="border"
-          style={{
-            aspectRatio: '16/9',
-            width: '100%',
-            boxShadow: 'var(--card-bg-color) 0 0 0 2px',
-          }}
-          paddingX={[2, 3, 4, 4]}
-          radius={1}
-          tone="transparent"
-        >
-          <Flex justify="flex-start" align="center">
-            <Grid columns={1} gap={[2, 3, 4, 4]}>
-              <Inline paddingY={1}>
-                <div style={{height: '32px'}}>
-                  <MuxLogo />
-                </div>
-              </Inline>
-              <Inline paddingY={1}>
-                <Heading size={[0, 1, 2, 2]}>
-                  Upload and preview videos directly from your studio.
-                </Heading>
-              </Inline>
-              <Inline paddingY={1}>
-                {hasConfigAccess ? (
-                  <Button mode="ghost" icon={PlugIcon} text="Configure API" onClick={handleOpen} />
-                ) : (
-                  <Card padding={[3, 3, 3]} radius={2} shadow={1} tone="critical">
-                    <Text>
-                      You do not have access to configure the Mux API. Please contact your
-                      administrator.
-                    </Text>
-                  </Card>
-                )}
-              </Inline>
-            </Grid>
-          </Flex>
-        </Card>
-      </div>
-    </>
-  )
-}

package/src/components/PageSelector.tsx

@@ -1,54 +0,0 @@
-import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
-import {Button, Label} from '@sanity/ui'
-import {Dispatch, SetStateAction, useEffect} from 'react'
-
-const PageSelector = (props: {
-  page: number
-  setPage: Dispatch<SetStateAction<number>>
-  total: number
-}) => {
-  const page = props.page
-  const setPage = props.setPage
-
-  useEffect(() => {
-    // Constraint in bounds.
-    const clamped = Math.min(props.total - 1, Math.max(0, page))
-    if (page !== clamped) {
-      setPage(clamped)
-    }
-  }, [page, props.total, setPage])
-
-  return (
-    <>
-      <Button
-        icon={ChevronLeftIcon}
-        mode="bleed"
-        padding={3}
-        style={{cursor: 'pointer'}}
-        disabled={page <= 0}
-        onClick={() => {
-          setPage((p) => {
-            return Math.min(props.total - 1, Math.max(0, p - 1))
-          })
-        }}
-      />
-      <Label muted>
-        Page {page + 1}/{props.total}
-      </Label>
-      <Button
-        icon={ChevronRightIcon}
-        mode="bleed"
-        padding={3}
-        style={{cursor: 'pointer'}}
-        disabled={page >= props.total - 1}
-        onClick={() => {
-          setPage((p) => {
-            return Math.min(props.total - 1, Math.max(0, p + 1))
-          })
-        }}
-      />
-    </>
-  )
-}
-
-export default PageSelector

package/src/components/Player.styled.tsx

@@ -1,55 +0,0 @@
-import {Suspense, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {useClient} from '../hooks/useClient'
-import {getStoryboardSrc} from '../util/getStoryboardSrc'
-import type {VideoAssetDocument} from '../util/types'
-
-export const StyledCenterControls = styled.div`
-  && {
-    --media-background-color: transparent;
-    --media-button-icon-width: 100%;
-    --media-button-icon-height: auto;
-    pointer-events: none;
-    width: 100%;
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    justify-content: center;
-    media-play-button {
-      --media-control-background: transparent;
-      --media-control-hover-background: transparent;
-      padding: 0;
-      width: max(27px, min(9%, 90px));
-    }
-  }
-`
-
-export const TopControls = styled.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  justify-content: flex-end;
-  button {
-    height: auto;
-  }
-`
-
-export interface PosterImageProps {
-  asset: VideoAssetDocument
-}
-export interface ThumbnailsMetadataTrackProps {
-  asset: VideoAssetDocument
-}
-export function ThumbnailsMetadataTrack({asset}: ThumbnailsMetadataTrackProps) {
-  const client = useClient()
-  // Why useState instead of useMemo? Because we really really only want to run it exactly once and useMemo doesn't make that guarantee
-  const [src] = useState<string>(() => getStoryboardSrc({asset, client}))
-
-  return (
-    /* We use Suspense here because `getStoryboardSrc` uses suspend() under the hood */
-    <Suspense fallback={null}>
-      <track label="thumbnails" default kind="metadata" src={src} />
-    </Suspense>
-  )
-}

package/src/components/Player.tsx

@@ -1,117 +0,0 @@
-import {Card, Text} from '@sanity/ui'
-import React, {useEffect, useMemo, useRef} from 'react'
-
-import {useCancelUpload} from '../hooks/useCancelUpload'
-import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
-import {TopControls} from './Player.styled'
-import {UploadProgress} from './UploadProgress'
-import VideoPlayer from './VideoPlayer'
-
-interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
-  buttons?: React.ReactNode
-  asset: VideoAssetDocument
-  config?: PluginConfig
-}
-
-const Player = ({asset, buttons, readOnly, onChange, config}: Props) => {
-  const isLoading = useMemo<boolean | string>(() => {
-    if (asset?.status === 'preparing') {
-      return 'Preparing the video'
-    }
-    if (asset?.status === 'waiting_for_upload') {
-      return 'Waiting for upload to start'
-    }
-    if (asset?.status === 'waiting') {
-      return 'Processing upload'
-    }
-    if (asset?.status === 'ready') {
-      return false
-    }
-    if (typeof asset?.status === 'undefined') {
-      return false
-    }
-
-    return true
-  }, [asset])
-  const isPreparingStaticRenditions = useMemo<boolean>(() => {
-    // Legacy: If static_renditions has a status field, it was created with mp4_support (deprecated)
-    // We don't process this old format, just return false
-    // Note: 'disabled' status is valid in the new format when no renditions were requested
-    if (
-      asset?.data?.static_renditions?.status &&
-      asset?.data?.static_renditions?.status !== 'disabled'
-    ) {
-      return false
-    }
-
-    // Check if any file in static_renditions is still preparing
-    const files = asset?.data?.static_renditions?.files
-    if (!files || files.length === 0) {
-      return false
-    }
-    return files.some((file) => file.status === 'preparing')
-  }, [asset?.data?.static_renditions?.status, asset?.data?.static_renditions?.files])
-  const playRef = useRef<HTMLDivElement>(null)
-  const muteRef = useRef<HTMLDivElement>(null)
-  const handleCancelUpload = useCancelUpload(asset, onChange)
-
-  useEffect(() => {
-    const style = document.createElement('style')
-    style.innerHTML = 'button svg { vertical-align: middle; }'
-
-    if (playRef.current?.shadowRoot) {
-      playRef.current.shadowRoot.appendChild(style)
-    }
-    if (muteRef?.current?.shadowRoot) {
-      muteRef.current.shadowRoot.appendChild(style.cloneNode(true))
-    }
-  }, [])
-
-  useEffect(() => {
-    if (asset?.status === 'errored') {
-      handleCancelUpload()
-      // eslint-disable-next-line no-warning-comments
-      // @TODO use better error handling
-      throw new Error(asset.data?.errors?.messages?.join(' '))
-    }
-  }, [asset.data?.errors?.messages, asset?.status, handleCancelUpload])
-
-  if (!asset || !asset.status) {
-    return null
-  }
-
-  if (isLoading) {
-    return (
-      <UploadProgress
-        progress={100}
-        filename={asset?.filename}
-        text={(isLoading !== true && isLoading) || 'Waiting for Mux to complete the upload'}
-        onCancel={readOnly ? undefined : () => handleCancelUpload()}
-      />
-    )
-  }
-
-  return (
-    <VideoPlayer asset={asset} hlsConfig={config?.hlsConfig}>
-      {buttons && <TopControls slot="top-chrome">{buttons}</TopControls>}
-      {isPreparingStaticRenditions && (
-        <Card
-          padding={2}
-          radius={1}
-          style={{
-            background: 'var(--card-fg-color)',
-            position: 'absolute',
-            top: '0.5em',
-            left: '0.5em',
-          }}
-        >
-          <Text size={1} style={{color: 'var(--card-bg-color)'}}>
-            MUX is preparing static renditions, please stand by
-          </Text>
-        </Card>
-      )}
-    </VideoPlayer>
-  )
-}
-
-export default Player

package/src/components/PlayerActionsMenu.tsx

@@ -1,190 +0,0 @@
-import {
-  EllipsisHorizontalIcon,
-  ImageIcon,
-  LockIcon,
-  PlugIcon,
-  ResetIcon,
-  SearchIcon,
-  SyncIcon,
-  TranslateIcon,
-  UploadIcon,
-} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Inline,
-  Label,
-  Menu,
-  MenuDivider,
-  MenuItem,
-  Popover,
-  Text,
-  Tooltip,
-  useClickOutsideEvent,
-} from '@sanity/ui'
-import {memo, useCallback, useEffect, useMemo, useState} from 'react'
-import {PatchEvent, unset} from 'sanity'
-import {styled} from 'styled-components'
-
-import {useAccessControl} from '../hooks/useAccessControl'
-import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
-import {useResyncAsset} from '../hooks/useResyncAsset'
-import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
-import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
-import {FileInputMenuItem} from './FileInputMenuItem'
-
-const LockCard = styled(Card)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0.6;
-  mix-blend-mode: screen;
-  background: transparent;
-`
-
-const LockButton = styled(Button)`
-  background: transparent;
-  color: white;
-`
-
-// @TODO: add support for audio type (asset._type) when uploading an audio file so we can hide the thumbnail option.
-const isVideoAsset = (asset: VideoAssetDocument) => {
-  return asset._type === 'mux.videoAsset'
-}
-
-function PlayerActionsMenu(
-  props: Pick<MuxInputProps, 'onChange' | 'readOnly'> & {
-    asset: VideoAssetDocument
-    onSelect: (files: File[]) => void
-    dialogState: DialogState
-    setDialogState: SetDialogState
-    config: PluginConfig
-    accept: string
-  }
-) {
-  const {asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept} = props
-  const [open, setOpen] = useState(false)
-  const [menuElement, setMenuRef] = useState<HTMLDivElement | null>(null)
-  const isSigned = useMemo(() => getPlaybackPolicy(asset)?.policy === 'signed', [asset])
-  const {hasConfigAccess} = useAccessControl(props.config)
-  const {resyncAsset, isResyncing} = useResyncAsset({showToast: true})
-
-  const onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange])
-
-  const handleResync = useCallback(async () => {
-    setOpen(false)
-    await resyncAsset(asset)
-  }, [resyncAsset, asset])
-
-  useEffect(() => {
-    if (open && dialogState) {
-      setOpen(false)
-    }
-  }, [dialogState, open])
-
-  useClickOutsideEvent(
-    () => setOpen(false),
-    () => [menuElement]
-  )
-
-  return (
-    <Inline space={1} padding={2}>
-      {isSigned && (
-        <Tooltip
-          animate
-          content={
-            <Box padding={2}>
-              <Text muted size={1}>
-                Signed playback policy
-              </Text>
-            </Box>
-          }
-          placement="right"
-          portal
-        >
-          <LockCard radius={2} margin={2} scheme="dark" tone="positive">
-            <LockButton icon={LockIcon} mode="bleed" tone="positive" />
-          </LockCard>
-        </Tooltip>
-      )}
-      <Popover
-        animate
-        content={
-          <Menu ref={setMenuRef}>
-            <Box padding={2}>
-              <Label muted size={1}>
-                Replace
-              </Label>
-            </Box>
-            <FileInputMenuItem
-              accept={accept}
-              icon={UploadIcon}
-              onSelect={onSelect}
-              text="Upload"
-              disabled={readOnly}
-              fontSize={1}
-            />
-            <MenuItem
-              icon={SearchIcon}
-              text="Browse"
-              onClick={() => setDialogState('select-video')}
-            />
-            {isVideoAsset(asset) && (
-              <>
-                <MenuItem
-                  icon={ImageIcon}
-                  text="Thumbnail"
-                  onClick={() => setDialogState('edit-thumbnail')}
-                />
-                <MenuItem
-                  icon={TranslateIcon}
-                  text="Captions"
-                  onClick={() => setDialogState('edit-captions')}
-                />
-                <MenuItem
-                  icon={SyncIcon}
-                  text="Resync from Mux"
-                  onClick={handleResync}
-                  disabled={readOnly || isResyncing}
-                />
-              </>
-            )}
-            <MenuDivider />
-            {hasConfigAccess && (
-              <>
-                <MenuItem
-                  icon={PlugIcon}
-                  text="Configure API"
-                  onClick={() => setDialogState('secrets')}
-                />
-                <MenuDivider />
-              </>
-            )}
-            <MenuItem
-              tone="critical"
-              icon={ResetIcon}
-              text="Clear field"
-              onClick={onReset}
-              disabled={readOnly}
-            />
-          </Menu>
-        }
-        portal
-        open={open}
-      >
-        <Button
-          icon={EllipsisHorizontalIcon}
-          mode="ghost"
-          fontSize={1}
-          onClick={() => {
-            setDialogState(false)
-            setOpen(true)
-          }}
-        />
-      </Popover>
-    </Inline>
-  )
-}
-
-export default memo(PlayerActionsMenu)