sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/components/VideoInBrowser.tsx

@@ -1,245 +0,0 @@
-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 {DRMWarningDialog, useDrmPlaybackWarningContext} from '../context/DrmPlaybackWarningContext'
-import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
-import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
-import {VideoAssetDocument} from '../util/types'
-import IconInfo from './IconInfo'
-import {AudioIcon} from './icons/Audio'
-import VideoMetadata from './VideoMetadata'
-import VideoPlayer, {assetIsAudio} 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;
-    }
-  }
-`
-
-type RenderState = 'render-video' | 'pre-render-warn' | false
-
-export default function VideoInBrowser({
-  onSelect,
-  onEdit,
-  asset,
-}: {
-  onSelect?: (asset: VideoAssetDocument) => void
-  onEdit?: (asset: VideoAssetDocument) => void
-  asset: VideoAssetDocument
-}) {
-  const [renderVideo, setRenderVideo] = useState<RenderState>(false)
-  const select = React.useCallback(() => onSelect?.(asset), [onSelect, asset])
-  const edit = React.useCallback(() => onEdit?.(asset), [onEdit, asset])
-  const {hasShownWarning} = useDrmPlaybackWarningContext()
-
-  if (!asset) {
-    return null
-  }
-
-  const playbackPolicy = getPlaybackPolicy(asset)
-  const onClickPlay = () => {
-    if (playbackPolicy?.policy === 'drm' && !hasShownWarning) {
-      setRenderVideo('pre-render-warn')
-    } else {
-      setRenderVideo('render-video')
-    }
-  }
-  return (
-    <Card
-      border
-      padding={2}
-      sizing="border"
-      radius={2}
-      style={{
-        position: 'relative',
-      }}
-    >
-      {playbackPolicy?.policy === 'signed' && (
-        <Tooltip
-          animate
-          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: 11,
-            }}
-            padding={2}
-            border
-          >
-            <Text muted size={1}>
-              <LockIcon />
-            </Text>
-          </Card>
-        </Tooltip>
-      )}
-      {playbackPolicy?.policy === 'drm' && (
-        <Tooltip
-          animate
-          content={
-            <Card padding={2} radius={2}>
-              <IconInfo icon={LockIcon} text="DRM playback policy" size={2} />
-            </Card>
-          }
-          placement="right"
-          fallbackPlacements={['top', 'bottom']}
-          portal
-        >
-          <Card
-            tone="caution"
-            style={{
-              borderRadius: '0.25rem',
-              position: 'absolute',
-              left: '1em',
-              top: '1em',
-              zIndex: 11,
-            }}
-            padding={2}
-            border
-          >
-            <Text muted size={1} weight="semibold" style={{color: 'var(--card-icon-color)'}}>
-              DRM
-            </Text>
-          </Card>
-        </Tooltip>
-      )}
-      <Stack
-        space={3}
-        height="fill"
-        style={{
-          gridTemplateRows: 'min-content min-content 1fr',
-        }}
-      >
-        {renderVideo === 'pre-render-warn' && (
-          <DRMWarningDialog
-            onClose={() => {
-              setRenderVideo('render-video')
-            }}
-          />
-        )}
-        {renderVideo === 'render-video' ? (
-          <VideoPlayer asset={asset} autoPlay forceAspectRatio={THUMBNAIL_ASPECT_RATIO} />
-        ) : (
-          <PlayButton onClick={onClickPlay}>
-            <div data-play>
-              <PlayIcon />
-            </div>
-            {assetIsAudio(asset) ? (
-              <div
-                style={{
-                  aspectRatio: THUMBNAIL_ASPECT_RATIO,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <AudioIcon width="3em" height="3em" />
-              </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

@@ -1,45 +0,0 @@
-import {CalendarIcon, ClockIcon, TagIcon} from '@sanity/icons'
-import {Inline, Stack, Text} from '@sanity/ui'
-
-import getVideoMetadata from '../util/getVideoMetadata'
-import type {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
-        />
-        {displayInfo.title != displayInfo.id.slice(0, 12) && (
-          <IconInfo text={displayInfo.id.slice(0, 12)} icon={TagIcon} size={1} muted />
-        )}
-      </Inline>
-    </Stack>
-  )
-}
-
-export default VideoMetadata

package/src/components/VideoPlayer.tsx

@@ -1,235 +0,0 @@
-import {type MuxPlayerProps, type MuxPlayerRefAttributes} from '@mux/mux-player-react'
-import MuxPlayer from '@mux/mux-player-react/lazy'
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {Card, Text} from '@sanity/ui'
-import {type PropsWithChildren, Suspense, useMemo, useRef, useState} from 'react'
-
-import {useDialogStateContext} from '../context/DialogStateContext'
-import {useClient} from '../hooks/useClient'
-import {AUDIO_ASPECT_RATIO, MIN_ASPECT_RATIO} from '../util/constants'
-import {generateJwt} from '../util/generateJwt'
-import {getPlaybackId} from '../util/getPlaybackPolicy'
-import {getPlaybackPolicyById} from '../util/getPlaybackPolicy'
-import {getPosterSrc} from '../util/getPosterSrc'
-import {getVideoSrc} from '../util/getVideoSrc'
-import {tryWithSuspend} from '../util/tryWithSuspend'
-import type {VideoAssetDocument} from '../util/types'
-import CaptionsDialog from './CaptionsDialog'
-import EditThumbnailDialog from './EditThumbnailDialog'
-import {AudioIcon} from './icons/Audio'
-
-export default function VideoPlayer({
-  asset,
-  thumbnailWidth = 250,
-  children,
-  hlsConfig,
-  ...props
-}: PropsWithChildren<
-  {
-    asset: VideoAssetDocument
-    thumbnailWidth?: number
-    forceAspectRatio?: number
-    hlsConfig?: MuxPlayerProps['_hlsConfig']
-  } & Partial<Pick<MuxPlayerProps, 'autoPlay'>>
->) {
-  const client = useClient()
-  const {dialogState} = useDialogStateContext()
-
-  const isAudio = assetIsAudio(asset)
-  const muxPlayer = useRef<MuxPlayerRefAttributes>(null)
-  const playerContainerRef = useRef<HTMLDivElement>(null)
-  const [error, setError] = useState<Error>()
-
-  /* Playback ID that will be used to play the video */
-  const playbackId = useMemo(() => {
-    try {
-      return getPlaybackId(asset, ['public', 'signed', 'drm'])
-    } catch (e) {
-      setError(new TypeError('Asset has no playback ID'))
-      return undefined
-    }
-  }, [asset])
-
-  const muxPlaybackId = useMemo(() => {
-    if (!playbackId) return undefined
-    return getPlaybackPolicyById(asset, playbackId)
-  }, [asset, playbackId])
-
-  const src = useMemo(() => {
-    if (!playbackId) return undefined
-    if (!muxPlaybackId) return undefined
-    return tryWithSuspend(
-      () => getVideoSrc({muxPlaybackId, client}),
-      (e: Error) => {
-        setError(e)
-        return undefined
-      }
-    )
-  }, [muxPlaybackId, playbackId, client])
-
-  const poster = useMemo(() => {
-    return tryWithSuspend(
-      () => getPosterSrc({asset, client, width: thumbnailWidth}),
-      (e: Error) => {
-        setError(e)
-        return undefined
-      }
-    )
-  }, [asset, client, thumbnailWidth])
-
-  const signedToken = useMemo(() => {
-    try {
-      const url = new URL(src!)
-      return url.searchParams.get('token')
-    } catch {
-      return undefined
-    }
-  }, [src])
-  const drmToken = useMemo(() => {
-    if (!playbackId) return undefined
-    if (muxPlaybackId?.policy !== 'drm') return undefined
-
-    return tryWithSuspend(
-      () => generateJwt(client, playbackId, 'd'),
-      (e: Error) => {
-        setError(e)
-        return undefined
-      }
-    )
-  }, [client, muxPlaybackId?.policy, playbackId])
-  const tokens:
-    | Partial<{
-        playback?: string
-        thumbnail?: string
-        storyboard?: string
-        drm?: string
-      }>
-    | undefined = useMemo(() => {
-    try {
-      const partialTokens: {
-        playback?: string
-        thumbnail?: string
-        storyboard?: string
-        drm?: string
-      } = {
-        playback: undefined,
-        thumbnail: undefined,
-        storyboard: undefined,
-        drm: undefined,
-      }
-
-      if (signedToken) {
-        partialTokens.playback = signedToken
-        partialTokens.thumbnail = signedToken
-        partialTokens.storyboard = signedToken
-      }
-
-      if (drmToken) {
-        partialTokens.drm = drmToken
-      }
-
-      return {...partialTokens}
-    } catch {
-      return undefined
-    }
-  }, [signedToken, drmToken])
-
-  const [width, height] = (asset?.data?.aspect_ratio ?? '16:9').split(':').map(Number)
-  const targetAspectRatio =
-    props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height)
-  let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio)
-  if (isAudio) {
-    aspectRatio = props.forceAspectRatio
-      ? // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
-        props.forceAspectRatio * 1.2
-      : AUDIO_ASPECT_RATIO
-  }
-
-  /* We use Suspense here because `generateJwt` and related functions use suspend()
-   under the hood */
-  return (
-    <>
-      <Card
-        ref={playerContainerRef}
-        tone="transparent"
-        style={{
-          aspectRatio: aspectRatio,
-          position: 'relative',
-          ...(isAudio && {display: 'flex', alignItems: 'flex-end'}),
-        }}
-      >
-        {src && poster && (
-          <>
-            {isAudio && (
-              <AudioIcon
-                style={{
-                  padding: '0.5em',
-                  width: '2.2em',
-                  height: '2.2em',
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  zIndex: 1,
-                }}
-              />
-            )}
-            <Suspense fallback={null}>
-              <MuxPlayer
-                poster={isAudio ? undefined : poster}
-                ref={muxPlayer}
-                {...props}
-                playsInline
-                playbackId={playbackId}
-                tokens={tokens}
-                preload="metadata"
-                crossOrigin="anonymous"
-                metadata={{
-                  player_name: 'Sanity Admin Dashboard',
-                  player_version: process.env.PKG_VERSION,
-                  page_type: 'Preview Player',
-                }}
-                audio={isAudio}
-                _hlsConfig={hlsConfig}
-                style={{
-                  ...(!isAudio && {height: '100%'}),
-                  width: '100%',
-                  display: 'block',
-                  objectFit: 'contain',
-                  ...(isAudio && {alignSelf: 'end'}),
-                }}
-              />
-              {children}
-            </Suspense>
-          </>
-        )}
-        {error ? (
-          <div
-            style={{
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: 'translate(-50%, -50%)',
-            }}
-          >
-            <Text muted>
-              <ErrorOutlineIcon style={{marginRight: '0.15em'}} />
-              {typeof error === 'object' && 'message' in error && typeof error.message === 'string'
-                ? error.message
-                : 'Error loading video'}
-            </Text>
-          </div>
-        ) : null}
-        {children}
-      </Card>
-
-      {dialogState === 'edit-thumbnail' && (
-        <EditThumbnailDialog asset={asset} currentTime={muxPlayer?.current?.currentTime} />
-      )}
-      {dialogState === 'edit-captions' && <CaptionsDialog asset={asset} />}
-    </>
-  )
-}
-
-export function assetIsAudio(asset: VideoAssetDocument) {
-  return asset.data?.max_stored_resolution === 'Audio only'
-}

package/src/components/VideoThumbnail.tsx

@@ -1,138 +0,0 @@
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {Box, Card, CardTone, Spinner, Stack, Text} from '@sanity/ui'
-import {Suspense, useMemo, useRef, 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 {getPosterSrc} from '../util/getPosterSrc'
-import {tryWithSuspend} from '../util/tryWithSuspend'
-import {AssetThumbnailOptions, MuxAnimatedThumbnailUrl, MuxThumbnailUrl} from '../util/types'
-
-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,
-  staticImage = false,
-}: {
-  asset: AssetThumbnailOptions['asset']
-  width?: number
-  staticImage?: boolean
-}) {
-  const posterWidth = width || 250
-  const client = useClient()
-  const ref = useRef<HTMLDivElement | null>(null)
-  const inView = useInView(ref)
-
-  const [status, setStatus] = useState<ImageStatus>('loading')
-  const [error, setError] = useState<string | null>(null)
-
-  const thumbnailSrc = useMemo(() => {
-    return tryWithSuspend(
-      () => {
-        let thumbnail: MuxAnimatedThumbnailUrl | MuxThumbnailUrl | undefined
-
-        if (staticImage) thumbnail = getPosterSrc({asset, client, width: posterWidth})
-        else thumbnail = getAnimatedPosterSrc({asset, client, width: posterWidth})
-        return thumbnail
-      },
-      (err: Error) => {
-        handleError(err.message)
-        return undefined
-      }
-    )
-  }, [asset, client, posterWidth, staticImage])
-
-  function handleLoad() {
-    setStatus('loaded')
-  }
-
-  function handleError(err?: string) {
-    setStatus('error')
-    if (err) {
-      setError(err)
-    } else {
-      setError('Failed loading thumbnail')
-    }
-  }
-
-  return (
-    <Suspense fallback={<span>Preparing thumbnail</span>}>
-      <Card
-        style={{
-          aspectRatio: THUMBNAIL_ASPECT_RATIO,
-          position: 'relative',
-          maxWidth: width ? `${width}px` : undefined,
-          width: '100%',
-          flex: 1,
-        }}
-        border
-        radius={2}
-        ref={ref}
-        tone={STATUS_TO_TONE[status]}
-      >
-        {inView ? (
-          <>
-            {status === 'loading' && (
-              <Box
-                style={{
-                  position: 'absolute',
-                  left: '50%',
-                  top: '50%',
-                  transform: 'translate(-50%, -50%)',
-                }}
-              >
-                <Spinner />
-              </Box>
-            )}
-            {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">
-                  {error}
-                </Text>
-              </Stack>
-            )}
-            <Image
-              src={thumbnailSrc ?? undefined}
-              alt={`Preview for ${staticImage ? 'image' : 'video'} ${asset.filename || asset.assetId}`}
-              onLoad={handleLoad}
-              onError={() => handleError()}
-              style={{opacity: status === 'loaded' ? 1 : 0}}
-            />
-          </>
-        ) : null}
-      </Card>
-    </Suspense>
-  )
-}