sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/components/VideoDetails/VideoDetails.tsx

@@ -1,358 +0,0 @@
-import {
-  CalendarIcon,
-  CheckmarkIcon,
-  ClockIcon,
-  CropIcon,
-  EditIcon,
-  ErrorOutlineIcon,
-  RevertIcon,
-  SearchIcon,
-  SyncIcon,
-  TagIcon,
-  TrashIcon,
-} from '@sanity/icons'
-import {
-  Button,
-  Card,
-  Dialog,
-  Flex,
-  Heading,
-  Spinner,
-  Stack,
-  Tab,
-  TabList,
-  TabPanel,
-  Text,
-  TextInput,
-} from '@sanity/ui'
-import React, {useEffect, useState} from 'react'
-
-import {DIALOGS_Z_INDEX} from '../../util/constants'
-import {MuxPlaybackId, MuxTextTrack, PlaybackPolicy} from '../../util/types'
-import FormField from '../FormField'
-import IconInfo from '../IconInfo'
-import {ResolutionIcon} from '../icons/Resolution'
-import {StopWatchIcon} from '../icons/StopWatch'
-import TextTracksManager from '../TextTracksManager'
-import VideoPlayer from '../VideoPlayer'
-import DeleteDialog from './DeleteDialog'
-import useVideoDetails, {VideoDetailsProps} from './useVideoDetails'
-import VideoReferences from './VideoReferences'
-
-const AssetInput: React.FC<{
-  label: string
-  description?: string
-  placeholder?: string
-  value: string
-  onInput: (e: React.FormEvent<HTMLInputElement>) => void
-  disabled?: boolean
-}> = (props) => (
-  <FormField title={props.label} description={props.description} inputId={props.label}>
-    <TextInput
-      id={props.label}
-      value={props.value}
-      placeholder={props.placeholder}
-      onInput={props.onInput}
-      disabled={props.disabled}
-    />
-  </FormField>
-)
-
-const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
-  const [tab, setTab] = useState<'details' | 'references'>('details')
-  const {
-    displayInfo,
-    filename,
-    modified,
-    references,
-    referencesLoading,
-    setFilename,
-    state,
-    setState,
-    handleClose,
-    confirmClose,
-    saveChanges,
-    handleResync,
-    isResyncing,
-  } = useVideoDetails(props)
-
-  const isSaving = state === 'saving'
-
-  // Avoid layout shifts in large screens' 2-column dialog by setting their `minHeight` to the container's
-  const [containerHeight, setContainerHeight] = useState<number | null>(null)
-  const contentsRef = React.useRef<HTMLDivElement>(null)
-  useEffect(() => {
-    if (!contentsRef.current || !('getBoundingClientRect' in contentsRef.current)) return
-
-    setContainerHeight(contentsRef.current.getBoundingClientRect().height)
-  }, [])
-
-  return (
-    <Dialog
-      animate
-      header={displayInfo.title}
-      zOffset={DIALOGS_Z_INDEX}
-      id="video-details-dialog"
-      onClose={handleClose}
-      onClickOutside={handleClose}
-      width={2}
-      position="fixed"
-      footer={
-        <Card padding={3}>
-          <Flex justify="space-between" align="center">
-            <Flex gap={2}>
-              <Button
-                icon={TrashIcon}
-                fontSize={2}
-                padding={3}
-                mode="bleed"
-                text="Delete"
-                tone="critical"
-                onClick={() => setState('deleting')}
-                disabled={isSaving || isResyncing}
-              />
-              <Button
-                icon={SyncIcon}
-                fontSize={2}
-                padding={3}
-                mode="bleed"
-                text="Resync"
-                tone="primary"
-                onClick={handleResync}
-                disabled={isSaving || isResyncing}
-                iconRight={isResyncing && Spinner}
-              />
-            </Flex>
-            {modified && (
-              <Button
-                icon={CheckmarkIcon}
-                fontSize={2}
-                padding={3}
-                mode="ghost"
-                text="Save and close"
-                tone="positive"
-                onClick={saveChanges}
-                iconRight={isSaving && Spinner}
-                disabled={isSaving || isResyncing}
-              />
-            )}
-          </Flex>
-        </Card>
-      }
-    >
-      {/* DELETION DIALOG */}
-      {state === 'deleting' && (
-        <DeleteDialog
-          asset={props.asset}
-          cancelDelete={() => setState('idle')}
-          referencesLoading={referencesLoading}
-          references={references}
-          succeededDeleting={() => {
-            props.closeDialog()
-          }}
-        />
-      )}
-
-      {/* CONFIRM CLOSING DIALOG */}
-      {state === 'closing' && (
-        <Dialog
-          animate
-          header={'You have unsaved changes'}
-          zOffset={DIALOGS_Z_INDEX}
-          id="closing-video-details-dialog"
-          onClose={() => confirmClose(false)}
-          onClickOutside={() => confirmClose(false)}
-          width={1}
-          position="fixed"
-          footer={
-            <Card padding={3}>
-              <Flex justify="space-between" align="center">
-                <Button
-                  icon={ErrorOutlineIcon}
-                  fontSize={2}
-                  padding={3}
-                  text="Discard changes"
-                  tone="critical"
-                  onClick={() => confirmClose(true)}
-                />
-                {modified && (
-                  <Button
-                    icon={RevertIcon}
-                    fontSize={2}
-                    padding={3}
-                    mode="ghost"
-                    text="Keep editing"
-                    tone="primary"
-                    onClick={() => confirmClose(false)}
-                  />
-                )}
-              </Flex>
-            </Card>
-          }
-        >
-          <Card padding={5}>
-            <Stack style={{textAlign: 'center'}} space={3}>
-              <Heading size={2}>Unsaved changes will be lost</Heading>
-              <Text size={2}>Are you sure you want to discard them?</Text>
-            </Stack>
-          </Card>
-        </Dialog>
-      )}
-      <Card
-        padding={4}
-        sizing="border"
-        style={{
-          containerType: 'inline-size',
-        }}
-      >
-        <Flex
-          sizing="border"
-          gap={4}
-          direction={['column', 'column', 'row']}
-          align="flex-start"
-          ref={contentsRef}
-          style={
-            typeof containerHeight === 'number'
-              ? {
-                  minHeight: containerHeight,
-                }
-              : undefined
-          }
-        >
-          <Stack space={4} flex={1} sizing="border">
-            <VideoPlayer asset={props.asset} autoPlay={props.asset.autoPlay || false} />
-            {tab === 'details' && (
-              <TextTracksManager
-                asset={props.asset}
-                iconOnly
-                collapseTracks
-                tracks={
-                  displayInfo?.text_tracks ||
-                  props.asset.data?.tracks?.filter(
-                    (track): track is MuxTextTrack => track.type === 'text'
-                  ) ||
-                  []
-                }
-              />
-            )}
-          </Stack>
-          <Stack space={4} flex={1} sizing="border">
-            <TabList space={2}>
-              <Tab
-                aria-controls="details-panel"
-                icon={EditIcon}
-                id="details-tab"
-                label="Details"
-                onClick={() => setTab('details')}
-                selected={tab === 'details'}
-              />
-              <Tab
-                aria-controls="references-panel"
-                icon={SearchIcon}
-                id="references-tab"
-                label={`Used by ${references ? `(${references.length})` : ''}`}
-                onClick={() => setTab('references')}
-                selected={tab === 'references'}
-              />
-            </TabList>
-            <TabPanel
-              aria-labelledby="details-tab"
-              id="details-panel"
-              hidden={tab !== 'details'}
-              style={{wordBreak: 'break-word'}}
-            >
-              <Stack space={4}>
-                <AssetInput
-                  label="Video title or file name"
-                  description="Not visible to users. Useful for finding videos later."
-                  value={filename || ''}
-                  onInput={(e) => setFilename(e.currentTarget.value)}
-                  disabled={state !== 'idle'}
-                />
-                <Stack space={3}>
-                  {displayInfo?.duration && (
-                    <IconInfo
-                      text={`Duration: ${displayInfo.duration}`}
-                      icon={ClockIcon}
-                      size={2}
-                    />
-                  )}
-                  {displayInfo?.max_stored_resolution && (
-                    <IconInfo
-                      text={`Max Resolution: ${displayInfo.max_stored_resolution}`}
-                      icon={ResolutionIcon}
-                      size={2}
-                    />
-                  )}
-                  {displayInfo?.max_stored_frame_rate && (
-                    <IconInfo
-                      text={`Frame rate: ${displayInfo.max_stored_frame_rate}`}
-                      icon={StopWatchIcon}
-                      size={2}
-                    />
-                  )}
-                  {displayInfo?.aspect_ratio && (
-                    <IconInfo
-                      text={`Aspect Ratio: ${displayInfo.aspect_ratio}`}
-                      icon={CropIcon}
-                      size={2}
-                    />
-                  )}
-                  <IconInfo
-                    text={`Uploaded on: ${displayInfo.createdAt.toLocaleDateString('en', {
-                      year: 'numeric',
-                      month: '2-digit',
-                      day: '2-digit',
-                      hour: '2-digit',
-                      minute: '2-digit',
-                      hour12: true,
-                    })}`}
-                    icon={CalendarIcon}
-                    size={2}
-                  />
-                  <IconInfo text={`Mux ID: \n${displayInfo.id}`} icon={TagIcon} size={2} />
-                  <PlaybackIds playback_ids={displayInfo.playback_ids} />
-                </Stack>
-              </Stack>
-            </TabPanel>
-            <TabPanel
-              aria-labelledby="references-tab"
-              id="references-panel"
-              hidden={tab !== 'references'}
-            >
-              <VideoReferences references={references} isLoaded={!referencesLoading} />
-            </TabPanel>
-          </Stack>
-        </Flex>
-      </Card>
-    </Dialog>
-  )
-}
-
-const PlaybackIds = ({playback_ids}: {playback_ids?: MuxPlaybackId[]}) => {
-  if (playback_ids) {
-    return playback_ids.map((entry) => (
-      <IconInfo
-        key={entry.id}
-        text={`Playback ID [${policyToText(entry.policy)}]: ${entry.id}`}
-        icon={TagIcon}
-        size={2}
-      />
-    ))
-  }
-  return <IconInfo text={'No Playback ID'} icon={TagIcon} size={2} />
-}
-
-const policyToText = (policy: PlaybackPolicy) => {
-  switch (policy) {
-    case 'drm':
-      return 'DRM'
-    case 'signed':
-      return 'Signed'
-    case 'public':
-      return 'Public'
-    default:
-      return policy
-  }
-}
-export default VideoDetails

package/src/components/VideoDetails/VideoReferences.tsx

@@ -1,63 +0,0 @@
-import type {SanityDocument} from '@sanity/client'
-import {Box, Card, Text} from '@sanity/ui'
-import {collate, useSchema} from 'sanity'
-import {styled} from 'styled-components'
-
-import {DocumentPreview} from '../documentPreview/DocumentPreview'
-import SpinnerBox from '../SpinnerBox'
-
-const Container = styled(Box)`
-  * {
-    color: ${(props: any) => props.theme.sanity.color.base.fg};
-  }
-  a {
-    text-decoration: none;
-  }
-  h2 {
-    font-size: ${(props: any) => props.theme.sanity.fonts.text.sizes[1]};
-  }
-`
-
-const VideoReferences: React.FC<{
-  references?: SanityDocument[]
-  isLoaded: boolean
-}> = (props) => {
-  const schema = useSchema()
-  if (!props.isLoaded) {
-    return <SpinnerBox />
-  }
-
-  if (!props.references?.length) {
-    return (
-      <Card border radius={3} padding={3}>
-        <Text size={2}>No documents are using this video</Text>
-      </Card>
-    )
-  }
-
-  const documentPairs = collate(props.references || [])
-  return (
-    <Container>
-      {documentPairs?.map((documentPair) => {
-        const schemaType = schema.get(documentPair.type)
-
-        return (
-          <Card
-            key={documentPair.id}
-            marginBottom={2}
-            padding={2}
-            radius={2}
-            shadow={1}
-            style={{overflow: 'hidden'}}
-          >
-            <Box>
-              <DocumentPreview documentPair={documentPair} schemaType={schemaType} />
-            </Box>
-          </Card>
-        )
-      })}
-    </Container>
-  )
-}
-
-export default VideoReferences

package/src/components/VideoDetails/useVideoDetails.ts

@@ -1,103 +0,0 @@
-import {useToast} from '@sanity/ui'
-import {useMemo, useState} from 'react'
-import {useDocumentStore} from 'sanity'
-
-import {useClient} from '../../hooks/useClient'
-import useDocReferences from '../../hooks/useDocReferences'
-import {useResyncAsset} from '../../hooks/useResyncAsset'
-import getVideoMetadata from '../../util/getVideoMetadata'
-import {VideoAssetDocument} from '../../util/types'
-
-type VideoDetailsState = 'idle' | 'saving' | 'deleting' | 'closing' | 'resyncing'
-
-export interface VideoDetailsProps {
-  closeDialog: () => void
-  asset: VideoAssetDocument & {autoPlay?: boolean}
-}
-
-export default function useVideoDetails(props: VideoDetailsProps) {
-  const documentStore = useDocumentStore()
-  const toast = useToast()
-  const client = useClient()
-
-  const [references, referencesLoading] = useDocReferences(
-    useMemo(() => ({documentStore, id: props.asset._id}), [documentStore, props.asset._id])
-  )
-
-  const [originalAsset, setOriginalAsset] = useState(() => props.asset)
-  const [filename, setFilename] = useState(props.asset.filename)
-  const modified = filename !== originalAsset.filename
-
-  const displayInfo = getVideoMetadata({...props.asset, filename})
-
-  const [state, setState] = useState<VideoDetailsState>('idle')
-
-  const {resyncAsset, isResyncing} = useResyncAsset({showToast: true})
-
-  async function handleResync() {
-    if (state !== 'idle') return
-    setState('resyncing')
-    await resyncAsset(props.asset)
-    setState('idle')
-  }
-
-  function handleClose() {
-    if (state !== 'idle') return
-
-    if (modified) {
-      setState('closing')
-      return
-    }
-
-    props.closeDialog()
-  }
-
-  function confirmClose(shouldClose: boolean) {
-    if (state !== 'closing') return
-
-    if (shouldClose) props.closeDialog()
-
-    setState('idle')
-  }
-
-  async function saveChanges() {
-    if (state !== 'idle') return
-    setState('saving')
-
-    try {
-      await client.patch(props.asset._id).set({filename}).commit()
-      setOriginalAsset((prev) => ({...prev, filename}))
-      toast.push({
-        title: 'Video title updated',
-        description: `New title: ${filename}`,
-        status: 'success',
-      })
-      props.closeDialog()
-    } catch (error) {
-      toast.push({
-        title: 'Failed updating file name',
-        status: 'error',
-        description: typeof error === 'string' ? error : 'Please try again',
-      })
-      setFilename(originalAsset.filename)
-    }
-
-    setState('idle')
-  }
-
-  return {
-    references,
-    referencesLoading,
-    modified,
-    filename,
-    setFilename,
-    displayInfo,
-    state,
-    setState,
-    handleClose,
-    confirmClose,
-    saveChanges,
-    handleResync,
-    isResyncing,
-  }
-}