sanity-plugin-mux-input 2.1.0 → 2.2.0

package/src/components/EditThumbnailDialog.tsx

@@ -1,74 +0,0 @@
-import {Button, Dialog, Stack, Text} from '@sanity/ui'
-import React, {useCallback, useId, useMemo, useState} from 'react'
-import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-
-import {useClient} from '../hooks/useClient'
-import type {SetDialogState} from '../hooks/useDialogState'
-import type {VideoAssetDocument} from '../util/types'
-import {VideoThumbnail} from './VideoSource.styled'
-
-export interface Props {
-  asset: VideoAssetDocument
-  getCurrentTime: () => number
-  setDialogState: SetDialogState
-}
-export default function EditThumbnailDialog({asset, getCurrentTime, setDialogState}: Props) {
-  const client = useClient()
-  const dialogId = `EditThumbnailDialog${useId()}`
-  const nextTime = useMemo(() => getCurrentTime(), [getCurrentTime])
-  const assetWithNewThumbnail = useMemo(() => ({...asset, thumbTime: nextTime}), [asset, nextTime])
-  const [saving, setSaving] = useState(false)
-  const [error, setError] = useState<Error | null>(null)
-  const handleSave = useCallback(() => {
-    setSaving(true)
-    client
-      .patch(asset._id!)
-      .set({thumbTime: nextTime})
-      .commit({returnDocuments: false})
-      .then(() => void setDialogState(false))
-      .catch(setError)
-      .finally(() => void setSaving(false))
-  }, [client, asset._id, nextTime, setDialogState])
-  const width = 300 * getDevicePixelRatio({maxDpr: 2})
-
-  if (error) {
-    // eslint-disable-next-line no-warning-comments
-    // @TODO handle errors more gracefully
-    throw error
-  }
-
-  return (
-    <Dialog
-      id={dialogId}
-      header="Edit thumbnail"
-      onClose={() => setDialogState(false)}
-      footer={
-        <Stack padding={3}>
-          <Button
-            key="thumbnail"
-            mode="ghost"
-            tone="primary"
-            loading={saving}
-            onClick={handleSave}
-            text="Set new thumbnail"
-          />
-        </Stack>
-      }
-    >
-      <Stack space={3} padding={3}>
-        <Stack space={2}>
-          <Text size={1} weight="semibold">
-            Current:
-          </Text>
-          <VideoThumbnail asset={asset} width={width} />
-        </Stack>
-        <Stack space={2}>
-          <Text size={1} weight="semibold">
-            New:
-          </Text>
-          <VideoThumbnail asset={assetWithNewThumbnail} width={width} />
-        </Stack>
-      </Stack>
-    </Dialog>
-  )
-}

package/src/components/VideoSource.styled.tsx

@@ -1,235 +0,0 @@
-import {LockIcon, UnknownIcon} from '@sanity/icons'
-import {Box, Card, Grid, Inline, Spinner} from '@sanity/ui'
-import React, {memo, Suspense, useMemo} from 'react'
-import {MediaPreview} from 'sanity'
-import styled from 'styled-components'
-import {suspend} from 'suspend-react'
-import {useErrorBoundary} from 'use-error-boundary'
-
-import {useClient} from '../hooks/useClient'
-import {getAnimatedPosterSrc} from '../util/getAnimatedPosterSrc'
-import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
-import {getPosterSrc} from '../util/getPosterSrc'
-import type {VideoAssetDocument} from '../util/types'
-
-const mediaDimensions = {aspect: 16 / 9}
-
-interface ImageLoaderProps {
-  alt: string
-  src: string
-  height?: number
-  width: number
-  aspectRatio?: string
-}
-const ImageLoader = memo(function ImageLoader({
-  alt,
-  src,
-  height,
-  width,
-  aspectRatio,
-}: ImageLoaderProps) {
-  suspend(async () => {
-    const img = new Image(width, height)
-    img.decoding = 'async'
-    img.src = src
-    await img.decode()
-  }, ['sanity-plugin-mux-input', 'image', src])
-
-  return <img alt={alt} src={src} height={height} width={width} style={{aspectRatio}} />
-})
-
-// @TODO fix typings errors due to props.renderDefault
-const VideoMediaPreview = styled<any>(MediaPreview)`
-  img {
-    object-fit: cover;
-  }
-`
-
-interface VideoMediaPreviewSignedSubtitleProps {
-  solo?: boolean
-}
-const VideoMediaPreviewSignedSubtitle = ({solo}: VideoMediaPreviewSignedSubtitleProps) => {
-  return (
-    <Inline
-      space={1}
-      style={{
-        marginTop: solo ? '-1.35em' : undefined,
-        marginBottom: solo ? undefined : '0.35rem',
-      }}
-    >
-      <LockIcon />
-      Signed playback policy
-    </Inline>
-  )
-}
-
-interface PosterImageProps extends Omit<ImageLoaderProps, 'src' | 'alt'> {
-  asset: VideoAssetDocument
-  showTip?: boolean
-}
-const PosterImage = ({asset, height, width, showTip}: PosterImageProps) => {
-  const client = useClient()
-  const src = getPosterSrc({
-    asset,
-    client,
-    height,
-    width,
-    fit_mode: 'smartcrop',
-  })
-  const subtitle = useMemo(
-    () =>
-      showTip && getPlaybackPolicy(asset) === 'signed' ? (
-        <VideoMediaPreviewSignedSubtitle solo />
-      ) : undefined,
-    [asset, showTip]
-  )
-
-  // eslint-disable-next-line no-warning-comments
-  // @TODO support setting the alt text in the schema, like how we deal with images
-  return (
-    <VideoMediaPreview
-      mediaDimensions={mediaDimensions}
-      subtitle={subtitle}
-      title={<>{null}</>}
-      media={<ImageLoader alt="" src={src} height={height} width={width} />}
-    />
-  )
-}
-
-export interface VideoThumbnailProps extends Omit<PosterImageProps, 'height'> {
-  width: number
-}
-export const VideoThumbnail = memo(function VideoThumbnail({
-  asset,
-  width,
-  showTip,
-}: VideoThumbnailProps) {
-  const {ErrorBoundary, didCatch, error} = useErrorBoundary()
-  const height = Math.round((width * 9) / 16)
-  const subtitle = useMemo(
-    () =>
-      showTip && getPlaybackPolicy(asset) === 'signed' ? (
-        <VideoMediaPreviewSignedSubtitle />
-      ) : undefined,
-    [showTip, asset]
-  )
-
-  if (didCatch) {
-    return (
-      <VideoMediaPreview
-        subtitle={error.message}
-        mediaDimensions={mediaDimensions}
-        title="Error when loading thumbnail"
-        media={
-          <Card radius={2} height="fill" style={{position: 'relative', width: '100%'}}>
-            <Box
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-              }}
-            >
-              <UnknownIcon />
-            </Box>
-          </Card>
-        }
-      />
-    )
-  }
-
-  return (
-    <ErrorBoundary>
-      <Suspense
-        fallback={
-          <VideoMediaPreview
-            isPlaceholder
-            title="Loading thumbnail..."
-            subtitle={subtitle}
-            mediaDimensions={mediaDimensions}
-          />
-        }
-      >
-        <PosterImage showTip={showTip} asset={asset} height={height} width={width} />
-      </Suspense>
-    </ErrorBoundary>
-  )
-})
-
-// @TODO fix typings errors due to props.renderDefault
-const AnimatedVideoMediaPreview = styled<any>(MediaPreview)`
-  img {
-    object-fit: contain;
-  }
-`
-
-interface AnimatedPosterImageProps extends Omit<ImageLoaderProps, 'src' | 'alt' | 'height'> {
-  asset: VideoAssetDocument
-}
-const AnimatedPosterImage = ({asset, width}: AnimatedPosterImageProps) => {
-  const client = useClient()
-  const src = getAnimatedPosterSrc({asset, client, width})
-
-  // eslint-disable-next-line no-warning-comments
-  // @TODO support setting the alt text in the schema, like how we deal with images
-  return (
-    <AnimatedVideoMediaPreview
-      withBorder={false}
-      mediaDimensions={mediaDimensions}
-      media={<ImageLoader alt="" src={src} width={width} aspectRatio="16:9" />}
-    />
-  )
-}
-
-export interface AnimatedVideoThumbnailProps extends Omit<PosterImageProps, 'height'> {
-  width: number
-}
-export const AnimatedVideoThumbnail = memo(function AnimatedVideoThumbnail({
-  asset,
-  width,
-}: AnimatedVideoThumbnailProps) {
-  const {ErrorBoundary, didCatch} = useErrorBoundary()
-
-  if (didCatch) {
-    return null
-  }
-
-  return (
-    <ErrorBoundary>
-      <Suspense
-        fallback={
-          <FancyBackdrop>
-            <VideoMediaPreview
-              mediaDimensions={mediaDimensions}
-              withBorder={false}
-              media={<Spinner muted />}
-            />
-          </FancyBackdrop>
-        }
-      >
-        <Card height="fill" tone="transparent">
-          <AnimatedPosterImage asset={asset} width={width} />
-        </Card>
-      </Suspense>
-    </ErrorBoundary>
-  )
-})
-const FancyBackdrop = styled(Box)`
-  backdrop-filter: blur(8px) brightness(0.5) saturate(2);
-  mix-blend-mode: color-dodge;
-`
-
-export const ThumbGrid = styled(Grid)`
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-`
-
-export const CardLoadMore = styled(Card)`
-  border-top: 1px solid var(--card-border-color);
-  position: sticky;
-  bottom: 0;
-  z-index: 200;
-`

package/src/components/VideoSource.tsx

@@ -1,318 +0,0 @@
-import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {DownloadIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  Dialog,
-  Flex,
-  Grid,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Stack,
-  Text,
-  useClickOutside,
-  useToast,
-} from '@sanity/ui'
-import {animate} from 'motion'
-import React, {memo, useCallback, useEffect, useId, useLayoutEffect, useRef, useState} from 'react'
-import styled from 'styled-components'
-import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-
-import {deleteAsset} from '../actions/assets'
-import {useClient} from '../hooks/useClient'
-import type {VideoAssetDocument} from '../util/types'
-import {AnimatedVideoThumbnail, CardLoadMore, ThumbGrid, VideoThumbnail} from './VideoSource.styled'
-
-export interface AssetActionsMenuProps {
-  asset: VideoAssetDocument
-}
-
-function AssetActionsMenu(props: AssetActionsMenuProps) {
-  const {asset} = props
-  const id = useId()
-  const [dialogState, setDialogState] = useState<false | 'show-uses' | 'confirm-delete'>()
-  const [open, setOpen] = useState(false)
-  const [menuElement, setMenuRef] = useState<HTMLDivElement | null>(null)
-
-  const handleDelete = useCallback(() => setDialogState('confirm-delete'), [])
-  const handleClick = useCallback(() => {
-    setDialogState(false)
-    setOpen(true)
-  }, [setDialogState])
-  const handleClose = useCallback(() => {
-    setDialogState(false)
-    setOpen(false)
-  }, [setDialogState])
-
-  useEffect(() => {
-    if (open && dialogState) {
-      setOpen(false)
-    }
-  }, [dialogState, open])
-
-  useClickOutside(
-    useCallback(() => setOpen(false), []),
-    [menuElement]
-  )
-
-  return (
-    <>
-      <MenuButton
-        id={`${id}-asset-menu`}
-        button={
-          <Button icon={EllipsisVerticalIcon} mode="ghost" onClick={handleClick} padding={2} />
-        }
-        menu={
-          <Menu ref={setMenuRef}>
-            <MenuItem tone="critical" icon={TrashIcon} text="Delete" onClick={handleDelete} />
-          </Menu>
-        }
-        portal
-        placement="right"
-      />
-      {dialogState === 'confirm-delete' && <DeleteDialog asset={asset} onClose={handleClose} />}
-    </>
-  )
-}
-
-interface DeleteDialogProps {
-  asset: VideoAssetDocument
-  onClose: () => void
-}
-function DeleteDialog(props: DeleteDialogProps) {
-  const {asset, onClose} = props
-  const client = useClient()
-  const {push: pushToast} = useToast()
-  const [deleting, setDeleting] = useState(false)
-  const [deleteOnMux, setDeleteOnMux] = useState(false)
-  const id = useId()
-  const noPaddingOnStack = true
-  const width = 200 * getDevicePixelRatio({maxDpr: 2})
-
-  const handleDelete = useCallback(async () => {
-    setDeleting(true)
-    try {
-      if (asset?._id) {
-        await client.delete(asset._id)
-      }
-      if (deleteOnMux && asset?.assetId) {
-        await deleteAsset(client, asset.assetId)
-      }
-      document
-        .querySelector(`[data-id="${asset._id}"]`)
-        ?.parentElement?.setAttribute?.('hidden', 'true')
-    } catch (err: any) {
-      console.error('Failed during delete', err)
-      pushToast({
-        closable: true,
-        description: err?.message,
-        duration: 5000,
-        title: 'Uncaught error',
-        status: 'error',
-      })
-    } finally {
-      setDeleting(false)
-      onClose()
-    }
-  }, [asset._id, asset.assetId, client, deleteOnMux, onClose, pushToast])
-
-  return (
-    <Dialog
-      onClose={onClose}
-      id={`${id}-confirm-delete`}
-      header="Delete video"
-      footer={
-        <Grid padding={2} gap={2} columns={2}>
-          <Button mode="bleed" text="Cancel" onClick={onClose} />
-          <Button
-            text="Delete"
-            tone="critical"
-            icon={TrashIcon}
-            onClick={handleDelete}
-            loading={deleting}
-            // disabled={!canDelete}
-          />
-        </Grid>
-      }
-      // __unstable_autoFocus
-      width={1}
-    >
-      <Stack
-        paddingX={noPaddingOnStack ? 0 : [2, 3, 4]}
-        paddingY={noPaddingOnStack ? 0 : [3, 3, 3, 4]}
-        space={1}
-      >
-        <Card paddingX={[2, 3, 4]} paddingY={[3, 3, 3, 4]}>
-          <Grid columns={3} gap={3}>
-            <Flex style={{gridColumn: 'span 2'}} align="center">
-              <Box padding={4}>
-                <Stack space={4}>
-                  <Flex align="center" as="label">
-                    <Checkbox
-                      checked={deleteOnMux}
-                      onChange={() => setDeleteOnMux((prev) => !prev)}
-                    />
-                    <Text style={{margin: '0 10px'}}>Delete asset on Mux</Text>
-                  </Flex>
-                  <Flex align="center" as="label">
-                    <Checkbox disabled checked />
-                    <Text style={{margin: '0 10px'}}>Delete video from dataset</Text>
-                  </Flex>
-                </Stack>
-              </Box>
-            </Flex>
-            <VideoThumbnail asset={asset} width={width} showTip />
-          </Grid>
-        </Card>
-      </Stack>
-    </Dialog>
-  )
-}
-
-export interface Props {
-  assets: VideoAssetDocument[]
-  isLoading: boolean
-  isLastPage: boolean
-  onSelect: (assetId: string) => void
-  onLoadMore: () => void
-}
-
-export default function VideoSource({assets, isLoading, isLastPage, onSelect, onLoadMore}: Props) {
-  const handleClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    (event) => onSelect(event.currentTarget.dataset.id!),
-    [onSelect]
-  )
-  const handleKeyPress = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(
-    (event) => {
-      if (event.key === 'Enter') {
-        onSelect(event.currentTarget.dataset.id!)
-      }
-    },
-    [onSelect]
-  )
-  const width = 200 * getDevicePixelRatio({maxDpr: 2})
-
-  return (
-    <>
-      <Box padding={4}>
-        <ThumbGrid gap={2}>
-          {assets.map((asset) => (
-            <VideoSourceItem
-              key={asset._id}
-              asset={asset}
-              onClick={handleClick}
-              onKeyPress={handleKeyPress}
-              width={width}
-            />
-          ))}
-        </ThumbGrid>
-        {isLoading && assets.length === 0 && (
-          <Flex justify="center">
-            <Spinner muted />
-          </Flex>
-        )}
-
-        {!isLoading && assets.length === 0 && (
-          <Text align="center" muted>
-            No videos
-          </Text>
-        )}
-      </Box>
-      {assets.length > 0 && !isLastPage && (
-        <CardLoadMore tone="default" padding={4}>
-          <Flex direction="column">
-            <Button
-              type="button"
-              icon={DownloadIcon}
-              loading={isLoading}
-              onClick={onLoadMore}
-              text="Load more"
-              tone="primary"
-            />
-          </Flex>
-        </CardLoadMore>
-      )}
-    </>
-  )
-}
-
-interface VideoSourceItemProps {
-  asset: VideoAssetDocument
-  onClick: React.MouseEventHandler<HTMLDivElement>
-  onKeyPress: React.KeyboardEventHandler<HTMLDivElement>
-  width: number
-}
-const _VideoSourceItem = ({asset, onClick, onKeyPress, width}: VideoSourceItemProps) => {
-  const [hover, setHover] = useState<boolean | null>(null)
-  const ref = useRef<HTMLDivElement>(null)
-  useLayoutEffect(() => {
-    if (!ref.current || hover === null) {
-      return
-    }
-    if (hover) {
-      animate(ref.current, {opacity: 1})
-    } else {
-      animate(ref.current, {opacity: 0})
-    }
-  }, [hover])
-  return (
-    <Box height="fill" style={{position: 'relative'}}>
-      <Card
-        as="button"
-        data-id={asset._id}
-        onClick={onClick}
-        onKeyPress={onKeyPress}
-        tabIndex={0}
-        radius={2}
-        padding={1}
-        style={{lineHeight: 0, position: 'relative'}}
-        __unstable_focusRing
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
-      >
-        <VideoThumbnail asset={asset} width={width} showTip />
-        {asset?.playbackId && (
-          <AnimateWrapper tone="transparent" ref={ref} margin={1} radius={1}>
-            {hover !== null && <AnimatedVideoThumbnail asset={asset} width={width} />}
-          </AnimateWrapper>
-        )}
-      </Card>
-      <ActionsAssetsContainer>
-        <AssetActionsMenu asset={asset} />
-      </ActionsAssetsContainer>
-    </Box>
-  )
-}
-const VideoSourceItem = memo(_VideoSourceItem)
-const AnimateWrapper = styled(Card)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  will-change: opacity;
-  background: transparent;
-  background-color: hsl(0deg 0% 0% / 33%);
-  opacity: 0;
-  pointer-events: none;
-`
-
-const ActionsAssetsContainer = styled.div`
-  box-sizing: border-box;
-  position: absolute;
-  z-index: 300;
-  opacity: 0;
-  top: 7px;
-  right: 7px;
-
-  button:hover + &,
-  button:focus-visible + &,
-  &:hover,
-  &:focus-visible {
-    opacity: 1;
-  }
-`