sanity-plugin-mux-input 2.1.1 → 2.2.0

package/src/components/VideoDetails/VideoReferences.tsx

@@ -0,0 +1,70 @@
+import type {SanityDocument} from '@sanity/client'
+import {Box, Card, Text} from '@sanity/ui'
+import React from 'react'
+import {collate, useSchema} from 'sanity'
+import styled from 'styled-components'
+
+import {PluginPlacement} from '../../util/types'
+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 FileReferences: React.FC<{
+  references?: SanityDocument[]
+  isLoaded: boolean
+  placement: PluginPlacement
+}> = (props) => {
+  const schema = useSchema()
+  if (!props.isLoaded) {
+    return <SpinnerBox />
+  }
+
+  if (!props.references?.length) {
+    return (
+      <Text size={2} weight="bold" muted style={{marginTop: '1.5rem', textAlign: 'center'}}>
+        No documents are using this file
+      </Text>
+    )
+  }
+
+  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}
+                placement={props.placement}
+              />
+            </Box>
+          </Card>
+        )
+      })}
+    </Container>
+  )
+}
+
+export default FileReferences

package/src/components/VideoDetails/useVideoDetails.ts

@@ -0,0 +1,85 @@
+import {useToast} from '@sanity/ui'
+import {useState} from 'react'
+import {useDocumentStore} from 'sanity'
+
+import {useClient} from '../../hooks/useClient'
+import useDocReferences from '../../hooks/useDocReferences'
+import getVideoMetadata from '../../util/getVideoMetadata'
+import {PluginPlacement, VideoAssetDocument} from '../../util/types'
+
+export interface FileDetailsProps {
+  placement: PluginPlacement
+  closeDialog: () => void
+  asset: VideoAssetDocument & {autoPlay?: boolean}
+}
+
+export default function useFileDetails(props: FileDetailsProps) {
+  const documentStore = useDocumentStore()
+  const toast = useToast()
+  const client = useClient()
+  const [references, referencesLoading] = useDocReferences({
+    documentStore,
+    id: props.asset._id as string,
+  })
+
+  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<'deleting' | 'closing' | 'idle' | 'saving'>('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: 'File name updated', status: 'success'})
+    } 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,
+  }
+}

package/src/components/VideoInBrowser.tsx

@@ -0,0 +1,183 @@
+import {CheckmarkIcon, EditIcon, LockIcon, PlayIcon} from '@sanity/icons'
+import {Button, Card, Stack, Text, Tooltip} from '@sanity/ui'
+import React, {useState} from 'react'
+import styled from 'styled-components'
+
+import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
+import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
+import {VideoAssetDocument} from '../util/types'
+import IconInfo from './IconInfo'
+import VideoMetadata from './VideoMetadata'
+import VideoPlayer from './VideoPlayer'
+import VideoThumbnail from './VideoThumbnail'
+
+const PlayButton = styled.button`
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 0.1875rem;
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    background: var(--card-fg-color);
+    opacity: 0;
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    transition: 0.15s ease-out;
+    border-radius: inherit;
+  }
+
+  > div[data-play] {
+    z-index: 11;
+    opacity: 0;
+    transition: 0.15s 0.05s ease-out;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--card-fg-color);
+    background: var(--card-bg-color);
+    width: auto;
+    height: 30%;
+    aspect-ratio: 1;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    > svg {
+      display: block;
+      width: 70%;
+      height: auto;
+      // Visual balance to center-align the icon
+      transform: translateX(5%);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    &::after {
+      opacity: 0.3;
+    }
+    > div[data-play] {
+      opacity: 1;
+    }
+  }
+`
+
+export default function VideoInBrowser({
+  onSelect,
+  onEdit,
+  asset,
+}: {
+  onSelect?: (asset: VideoAssetDocument) => void
+  onEdit?: (asset: VideoAssetDocument) => void
+  asset: VideoAssetDocument
+}) {
+  const [renderVideo, setRenderVideo] = useState(false)
+  const select = React.useCallback(() => onSelect?.(asset), [onSelect, asset])
+  const edit = React.useCallback(() => onEdit?.(asset), [onEdit, asset])
+
+  if (!asset) {
+    return null
+  }
+
+  const playbackPolicy = getPlaybackPolicy(asset)
+
+  return (
+    <Card
+      border
+      padding={2}
+      sizing="border"
+      radius={2}
+      style={{
+        position: 'relative',
+      }}
+    >
+      {playbackPolicy === 'signed' && (
+        <Tooltip
+          content={
+            <Card padding={2} radius={2}>
+              <IconInfo icon={LockIcon} text="Signed playback policy" size={2} />
+            </Card>
+          }
+          placement="right"
+          fallbackPlacements={['top', 'bottom']}
+          portal
+        >
+          <Card
+            tone="caution"
+            style={{
+              borderRadius: '100%',
+              position: 'absolute',
+              left: '1em',
+              top: '1em',
+              zIndex: 10,
+            }}
+            padding={2}
+            border
+          >
+            <Text muted size={1}>
+              <LockIcon />
+            </Text>
+          </Card>
+        </Tooltip>
+      )}
+      <Stack
+        space={3}
+        height="fill"
+        style={{
+          gridTemplateRows: 'min-content min-content 1fr',
+        }}
+      >
+        {renderVideo ? (
+          <VideoPlayer asset={asset} autoPlay forceAspectRatio={THUMBNAIL_ASPECT_RATIO} />
+        ) : (
+          <PlayButton onClick={() => setRenderVideo(true)}>
+            <div data-play>
+              <PlayIcon />
+            </div>
+            <VideoThumbnail asset={asset} />
+          </PlayButton>
+        )}
+        <VideoMetadata asset={asset} />
+        <div
+          style={{
+            display: 'flex',
+            width: '100%',
+            alignItems: 'flex-end',
+            justifyContent: 'flex-start',
+            gap: '.35rem',
+          }}
+        >
+          {onSelect && (
+            <Button
+              icon={CheckmarkIcon}
+              fontSize={2}
+              padding={2}
+              mode="ghost"
+              text="Select"
+              style={{flex: 1}}
+              tone="positive"
+              onClick={select}
+            />
+          )}
+          <Button
+            icon={EditIcon}
+            fontSize={2}
+            padding={2}
+            mode="ghost"
+            text="Details"
+            style={{flex: 1}}
+            onClick={edit}
+          />
+        </div>
+      </Stack>
+    </Card>
+  )
+}

package/src/components/VideoMetadata.tsx

@@ -0,0 +1,43 @@
+import {CalendarIcon, ClockIcon} from '@sanity/icons'
+import {Inline, Stack, Text} from '@sanity/ui'
+import React from 'react'
+
+import getVideoMetadata from '../util/getVideoMetadata'
+import {VideoAssetDocument} from '../util/types'
+import IconInfo from './IconInfo'
+
+const VideoMetadata = (props: {asset: VideoAssetDocument}) => {
+  if (!props.asset) {
+    return null
+  }
+
+  const displayInfo = getVideoMetadata(props.asset)
+  return (
+    <Stack space={2}>
+      {displayInfo.title && (
+        <Text
+          size={1}
+          weight="semibold"
+          style={{
+            wordWrap: 'break-word',
+          }}
+        >
+          {displayInfo.title}
+        </Text>
+      )}
+      <Inline space={3}>
+        {displayInfo?.duration && (
+          <IconInfo text={displayInfo.duration} icon={ClockIcon} size={1} muted />
+        )}
+        <IconInfo
+          text={displayInfo.createdAt.toISOString().split('T')[0]}
+          icon={CalendarIcon}
+          size={1}
+          muted
+        />
+      </Inline>
+    </Stack>
+  )
+}
+
+export default VideoMetadata

package/src/components/VideoPlayer.tsx

@@ -0,0 +1,69 @@
+import MuxPlayer, {MuxPlayerProps} from '@mux/mux-player-react'
+import {Card} from '@sanity/ui'
+import React, {PropsWithChildren, useMemo} from 'react'
+
+import {useClient} from '../hooks/useClient'
+import {MIN_ASPECT_RATIO} from '../util/constants'
+import {getVideoSrc} from '../util/getVideoSrc'
+import type {VideoAssetDocument} from '../util/types'
+import pluginPkg from './../../package.json'
+
+export default function VideoPlayer({
+  asset,
+  children,
+  ...props
+}: PropsWithChildren<
+  {asset: VideoAssetDocument; forceAspectRatio?: number} & Partial<Pick<MuxPlayerProps, 'autoPlay'>>
+>) {
+  const client = useClient()
+
+  const videoSrc = useMemo(() => asset?.playbackId && getVideoSrc({client, asset}), [asset, client])
+
+  const signedToken = useMemo(() => {
+    try {
+      const url = new URL(videoSrc!)
+      return url.searchParams.get('token')
+    } catch {
+      return false
+    }
+  }, [videoSrc])
+
+  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)
+
+  return (
+    <Card tone="transparent" style={{aspectRatio: aspectRatio, position: 'relative'}}>
+      {videoSrc && (
+        <>
+          <MuxPlayer
+            {...props}
+            playsInline
+            playbackId={asset.playbackId}
+            tokens={
+              signedToken
+                ? {playback: signedToken, thumbnail: signedToken, storyboard: signedToken}
+                : undefined
+            }
+            streamType="on-demand"
+            preload="metadata"
+            crossOrigin="anonymous"
+            metadata={{
+              player_name: 'Sanity Admin Dashboard',
+              player_version: pluginPkg.version,
+              page_type: 'Preview Player',
+            }}
+            style={{
+              height: '100%',
+              width: '100%',
+              display: 'block',
+              objectFit: 'contain',
+            }}
+          />
+          {children}
+        </>
+      )}
+    </Card>
+  )
+}

package/src/components/VideoThumbnail.tsx

@@ -0,0 +1,106 @@
+import {ErrorOutlineIcon} from '@sanity/icons'
+import {Card, CardTone, Stack, Text} from '@sanity/ui'
+import React, {useMemo, useState} from 'react'
+import styled from 'styled-components'
+
+import {useClient} from '../hooks/useClient'
+import useInView from '../hooks/useInView'
+import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
+import {getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
+import {VideoAssetDocument} from '../util/types'
+import SpinnerBox from './SpinnerBox'
+
+const Image = styled.img`
+  transition: opacity 0.175s ease-out 0s;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center center;
+`
+
+type ImageStatus = 'loading' | 'error' | 'loaded'
+
+const STATUS_TO_TONE: Record<ImageStatus, CardTone> = {
+  loading: 'transparent',
+  error: 'critical',
+  loaded: 'default',
+}
+
+export default function VideoThumbnail({
+  asset,
+  width = 250,
+}: {
+  asset: Partial<VideoAssetDocument>
+  width?: number
+}) {
+  const {inView, ref} = useInView()
+
+  const [status, setStatus] = useState<ImageStatus>('loading')
+  const client = useClient()
+
+  const animatedSrc = useMemo(() => {
+    try {
+      return getAnimatedPosterSrc({asset, client, width})
+    } catch {
+      if (status !== 'error') setStatus('error')
+      return undefined
+    }
+  }, [asset, client, width, status, setStatus])
+
+  function handleLoad() {
+    setStatus('loaded')
+  }
+
+  function handleError() {
+    setStatus('error')
+  }
+
+  return (
+    <Card
+      style={{
+        aspectRatio: THUMBNAIL_ASPECT_RATIO,
+        position: 'relative',
+      }}
+      border
+      radius={2}
+      ref={ref as any}
+      tone={STATUS_TO_TONE[status]}
+    >
+      {inView ? (
+        <>
+          {status === 'loading' && <SpinnerBox />}
+          {status === 'error' && (
+            <Stack
+              space={4}
+              style={{
+                position: 'absolute',
+                width: '100%',
+                left: 0,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                justifyItems: 'center',
+              }}
+            >
+              <Text size={4} muted>
+                <ErrorOutlineIcon style={{fontSize: '1.75em'}} />
+              </Text>
+              <Text muted align="center">
+                Failed loading thumbnail
+              </Text>
+            </Stack>
+          )}
+          <Image
+            src={animatedSrc}
+            alt={`Preview for video ${asset.filename || asset.assetId}`}
+            onLoad={handleLoad}
+            onError={handleError}
+            style={{
+              opacity: status === 'loaded' ? 1 : 0,
+            }}
+          />
+        </>
+      ) : null}
+    </Card>
+  )
+}

package/src/components/VideosBrowser.tsx

@@ -0,0 +1,83 @@
+import {SearchIcon} from '@sanity/icons'
+import {Card, Flex, Grid, Label, Stack, Text, TextInput} from '@sanity/ui'
+import React from 'react'
+
+import useAssets from '../hooks/useAssets'
+import type {VideoAssetDocument} from '../util/types'
+import {SelectSortOptions} from './SelectSortOptions'
+import SpinnerBox from './SpinnerBox'
+import {FileDetailsProps} from './VideoDetails/useVideoDetails'
+import VideoDetails from './VideoDetails/VideoDetails'
+import VideoInBrowser from './VideoInBrowser'
+
+export interface VideosBrowserProps {
+  onSelect?: (asset: VideoAssetDocument) => void
+}
+
+export default function VideosBrowser({onSelect}: VideosBrowserProps) {
+  const {assets, isLoading, searchQuery, setSearchQuery, setSort, sort} = useAssets()
+  const [editedAsset, setEditedAsset] = React.useState<FileDetailsProps['asset'] | null>(null)
+  const freshEditedAsset = React.useMemo(
+    () => assets.find((a) => a._id === editedAsset?._id) || editedAsset,
+    [editedAsset, assets]
+  )
+
+  return (
+    <>
+      <Stack padding={4} space={4}>
+        <Flex justify="space-between" align="center">
+          <Flex align="center" gap={3}>
+            <TextInput
+              value={searchQuery}
+              icon={SearchIcon}
+              onInput={(e: React.FormEvent<HTMLInputElement>) =>
+                setSearchQuery(e.currentTarget.value)
+              }
+              placeholder="Search files"
+            />
+            <SelectSortOptions setSort={setSort} sort={sort} />
+          </Flex>
+        </Flex>
+        <Stack space={3}>
+          {assets?.length > 0 && (
+            <Label muted>
+              {assets.length} video{assets.length > 1 ? 's' : null}{' '}
+              {searchQuery ? `matching "${searchQuery}"` : 'found'}
+            </Label>
+          )}
+          <Grid
+            gap={2}
+            style={{
+              gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+            }}
+          >
+            {assets.map((asset) => (
+              <VideoInBrowser
+                key={asset._id}
+                asset={asset}
+                onEdit={setEditedAsset}
+                onSelect={onSelect}
+              />
+            ))}
+          </Grid>
+        </Stack>
+        {isLoading && <SpinnerBox />}
+
+        {!isLoading && assets.length === 0 && (
+          <Card padding={2} marginY={4} border radius={2}>
+            <Text align="center" muted>
+              {searchQuery ? `No videos found for "${searchQuery}"` : 'No videos in this dataset'}
+            </Text>
+          </Card>
+        )}
+      </Stack>
+      {freshEditedAsset && (
+        <VideoDetails
+          closeDialog={() => setEditedAsset(null)}
+          asset={freshEditedAsset}
+          placement={onSelect ? 'input' : 'tool'}
+        />
+      )}
+    </>
+  )
+}

package/src/components/__legacy__Uploader.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 // This component needs to be refactored into a functional component
 
-import React, {lazy, Component} from 'react'
+import React, {Component} from 'react'
 import {type Observable, Subject} from 'rxjs'
 import {takeUntil, tap} from 'rxjs/operators'
 import type {SanityClient} from 'sanity'
@@ -12,17 +12,12 @@ import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
 import {extractDroppedFiles} from '../util/extractFiles'
 import type {Config, MuxInputProps, Secrets, VideoAssetDocument} from '../util/types'
 import InputBrowser from './InputBrowser'
+import Player from './Player'
 import PlayerActionsMenu from './PlayerActionsMenu'
 import {UploadCard} from './Uploader.styled'
 import UploadPlaceholder from './UploadPlaceholder'
 import {UploadProgress} from './UploadProgress'
 
-// TODO: Without this lazy load call a build error occurs in the Player component from the import
-// of media-chrome components. media-chrome ships separate ESM and CJS compatible modules in versions >=1.0.0.
-// Once the plugin is updated to media-chrome >= 1.0.0, remove this lazy load.
-// import Player from './Player'
-const Player = lazy(() => import('./Player'))
-
 interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
   config: Config
   client: SanityClient
@@ -249,8 +244,6 @@ class MuxVideoInputUploader extends Component<Props, State> {
               readOnly={this.props.readOnly}
               asset={this.props.asset}
               onChange={this.props.onChange}
-              dialogState={this.props.dialogState}
-              setDialogState={this.props.setDialogState}
               buttons={
                 <PlayerActionsMenu
                   asset={this.props.asset}