sanity-plugin-mux-input 3.0.5 → 4.0.0

package/src/components/ErrorBoundaryCard.tsx

@@ -1,97 +0,0 @@
-/* eslint-disable no-console */
-import {Button, Card, Flex, Grid, Heading, Inline, Text, useToast} from '@sanity/ui'
-import React, {memo, useCallback, useRef} from 'react'
-import scrollIntoView from 'scroll-into-view-if-needed'
-import {clear} from 'suspend-react'
-import {useErrorBoundary} from 'use-error-boundary'
-
-import {name} from '../util/constants'
-import {type MuxInputProps} from '../util/types'
-
-export interface Props extends Pick<MuxInputProps, 'schemaType'> {
-  children: React.ReactNode
-}
-function ErrorBoundaryCard(props: Props) {
-  const {children, schemaType} = props
-  const {push: pushToast} = useToast()
-  const errorRef = useRef(null)
-  const {ErrorBoundary, didCatch, error, reset} = useErrorBoundary({
-    // oxlint-disable-next-line no-unstable-nested-components
-    onDidCatch: (err, errorInfo) => {
-      console.group(err.toString())
-      console.groupCollapsed('console.error')
-      console.error(err)
-      console.groupEnd()
-      if (err.stack) {
-        console.groupCollapsed('error.stack')
-        console.log(err.stack)
-        console.groupEnd()
-      }
-      if (errorInfo?.componentStack) {
-        console.groupCollapsed('errorInfo.componentStack')
-        console.log(errorInfo.componentStack)
-        console.groupEnd()
-      }
-      console.groupEnd()
-      pushToast({
-        status: 'error',
-        title: 'Plugin crashed',
-        description: (
-          <Flex align="center">
-            <Inline space={1}>
-              An error happened while rendering
-              <Button
-                padding={1}
-                fontSize={1}
-                style={{transform: 'translateY(1px)'}}
-                mode="ghost"
-                text={schemaType.title}
-                onClick={() => {
-                  if (errorRef.current) {
-                    scrollIntoView(errorRef.current, {
-                      behavior: 'smooth',
-                      scrollMode: 'if-needed',
-                      block: 'center',
-                    })
-                  }
-                }}
-              />
-            </Inline>
-          </Flex>
-        ),
-      })
-    },
-  })
-  const handleRetry = useCallback(() => {
-    // Purge request cache before retrying, otherwise the cached errors will rethrow
-    clear([name])
-
-    reset()
-  }, [reset])
-
-  if (didCatch) {
-    return (
-      <Card ref={errorRef} paddingX={[2, 3, 4, 4]} height="fill" shadow={1} overflow="auto">
-        <Flex justify="flex-start" align="center" height="fill">
-          <Grid columns={1} gap={[2, 3, 4, 4]}>
-            <Heading as="h1">
-              The <code>{name}</code> plugin crashed
-            </Heading>
-            {error?.message && (
-              <Card padding={3} tone="critical" shadow={1} radius={2}>
-                <Text>{error.message}</Text>
-              </Card>
-            )}
-            <Inline>
-              <Button onClick={handleRetry} text="Retry" />
-            </Inline>
-          </Grid>
-        </Flex>
-      </Card>
-    )
-  }
-
-  return <ErrorBoundary>{children}</ErrorBoundary>
-}
-
-export default memo(ErrorBoundaryCard)

package/src/components/FileInputButton.tsx

@@ -1,54 +0,0 @@
-import {Button, type ButtonProps} from '@sanity/ui'
-import React, {useCallback, useId, useRef} from 'react'
-import {styled} from 'styled-components'
-
-const HiddenInput = styled.input`
-  overflow: hidden;
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  position: absolute;
-  z-index: -1;
-`
-
-const Label = styled.label`
-  position: relative;
-`
-
-export interface FileInputButtonProps extends ButtonProps {
-  onSelect: (files: FileList) => void
-  accept: string
-}
-export const FileInputButton = ({onSelect, accept, ...props}: FileInputButtonProps) => {
-  const inputId = `FileSelect${useId()}`
-  const inputRef = useRef<HTMLInputElement>(null)
-  const handleSelect = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
-    (event) => {
-      if (onSelect) {
-        onSelect(event.target.files!)
-      }
-    },
-    [onSelect],
-  )
-  const handleButtonClick = useCallback(() => inputRef.current?.click(), [])
-  return (
-    <Label htmlFor={inputId}>
-      <HiddenInput
-        accept={accept}
-        ref={inputRef}
-        tabIndex={0}
-        type="file"
-        id={inputId}
-        onChange={handleSelect}
-        value=""
-      />
-      <Button
-        onClick={handleButtonClick}
-        mode="default"
-        tone="primary"
-        style={{width: '100%'}}
-        {...props}
-      />
-    </Label>
-  )
-}

package/src/components/FileInputMenuItem.styled.tsx

@@ -1,36 +0,0 @@
-import {MenuItem} from '@sanity/ui'
-import {css, styled} from 'styled-components'
-
-import {focusRingStyle} from './withFocusRing/helpers'
-
-export const FileButton = styled(MenuItem)(({theme}) => {
-  const {focusRing} = theme.sanity
-  const base = theme.sanity.color.base
-  const border = {width: 1, color: 'var(--card-border-color)'}
-
-  return css`
-    position: relative;
-
-    &:not([data-disabled='true']) {
-      &:focus-within {
-        box-shadow: ${focusRingStyle({base, border, focusRing})};
-      }
-    }
-
-    & input {
-      overflow: hidden;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      min-width: 0;
-      display: block;
-      appearance: none;
-      padding: 0;
-      margin: 0;
-      border: 0;
-      opacity: 0;
-    }
-  `
-})

package/src/components/FileInputMenuItem.tsx

@@ -1,85 +0,0 @@
-import {Box, type ButtonProps, Flex, Text} from '@sanity/ui'
-import {isValidElement, useId, forwardRef, useCallback} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {FileButton} from './FileInputMenuItem.styled'
-
-export interface FileInputMenuItemProps extends ButtonProps {
-  accept?: string
-  capture?: 'user' | 'environment'
-  multiple?: boolean
-  onSelect?: (files: File[]) => void
-  disabled?: boolean
-}
-
-export const FileInputMenuItem = forwardRef(function FileInputMenuItem(
-  props: FileInputMenuItemProps &
-    Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref' | 'type' | 'value' | 'onSelect'>,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
-  const {
-    icon: Icon,
-    id: idProp,
-    accept,
-    capture,
-    fontSize,
-    multiple,
-    onSelect,
-    space = 3,
-    textAlign,
-    text,
-    disabled,
-    ...rest
-  } = props
-  const idHook = useId()
-  const id = idProp || idHook
-
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (onSelect && event.target.files) {
-        onSelect(Array.from(event.target.files))
-      }
-    },
-    [onSelect],
-  )
-
-  const content = (
-    <Flex align="center" justify="flex-start">
-      {/* Icon */}
-      {Icon && (
-        <Box marginRight={text ? space : undefined}>
-          <Text size={fontSize}>
-            {isValidElement(Icon) && Icon}
-            {isValidElementType(Icon) && <Icon />}
-          </Text>
-        </Box>
-      )}
-
-      {/* Text */}
-      {text && (
-        <Text align={textAlign} size={fontSize} textOverflow="ellipsis">
-          {text}
-        </Text>
-      )}
-    </Flex>
-  )
-
-  return (
-    <FileButton {...rest} htmlFor={id} disabled={disabled} ref={forwardedRef}>
-      {content}
-
-      {/* Visibly hidden input */}
-      <input
-        data-testid="file-button-input"
-        accept={accept}
-        capture={capture}
-        id={id}
-        multiple={multiple}
-        onChange={handleChange}
-        type="file"
-        value=""
-        disabled={disabled}
-      />
-    </FileButton>
-  )
-})

package/src/components/FormField.tsx

@@ -1,38 +0,0 @@
-import {Box, Flex, Stack, Text} from '@sanity/ui'
-import React, {memo} from 'react'
-
-// @TODO: get rid of this once v3 core is stable
-
-export interface Props {
-  children: React.ReactNode
-  title: React.ReactNode
-  description?: React.ReactNode
-  inputId: string
-}
-
-function FormField(props: Props) {
-  const {children, title, description, inputId} = props
-
-  return (
-    <Stack space={1}>
-      <Flex align="flex-end">
-        <Box flex={1} paddingY={2}>
-          <Stack space={2}>
-            <Text as="label" htmlFor={inputId} weight="semibold" size={1}>
-              {title || <em>Untitled</em>}
-            </Text>
-
-            {description && (
-              <Text muted size={1}>
-                {description}
-              </Text>
-            )}
-          </Stack>
-        </Box>
-      </Flex>
-      <div>{children}</div>
-    </Stack>
-  )
-}
-
-export default memo(FormField)

package/src/components/IconInfo.tsx

@@ -1,22 +0,0 @@
-import {Flex, Text} from '@sanity/ui'
-
-const IconInfo: React.FC<{
-  text: string
-  icon: React.FC
-  size?: number
-  muted?: boolean
-}> = (props) => {
-  const Icon = props.icon
-  return (
-    <Flex gap={2} align="center" padding={1}>
-      <Text size={(props.size || 1) + 1} muted>
-        <Icon />
-      </Text>
-      <Text size={props.size || 1} muted={props.muted}>
-        {props.text}
-      </Text>
-    </Flex>
-  )
-}
-
-export default IconInfo

package/src/components/ImportVideosFromMux.tsx

@@ -1,339 +0,0 @@
-import {
-  CheckmarkCircleIcon,
-  ErrorOutlineIcon,
-  InfoOutlineIcon,
-  RetrieveIcon,
-  RetryIcon,
-} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  Code,
-  Dialog,
-  Flex,
-  Heading,
-  Spinner,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {truncateString, useFormattedDuration} from 'sanity'
-import {styled} from 'styled-components'
-
-import useImportMuxAssets from '../hooks/useImportMuxAssets'
-import {DIALOGS_Z_INDEX} from '../util/constants'
-import type {MuxAsset} from '../util/types'
-import VideoThumbnail from './VideoThumbnail'
-
-const MissingAssetCheckbox = styled(Checkbox)`
-  position: static !important;
-
-  input::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    display: block;
-    cursor: pointer;
-    z-index: 1000;
-  }
-`
-
-function MissingAsset({
-  asset,
-  selectAsset,
-  selected,
-}: {
-  asset: MuxAsset
-  selectAsset: (selected: boolean) => void
-  selected: boolean
-}) {
-  const duration = useFormattedDuration(asset.duration * 1000)
-
-  return (
-    <Card
-      key={asset.id}
-      tone={selected ? 'positive' : undefined}
-      border
-      paddingX={2}
-      paddingY={3}
-      style={{position: 'relative'}}
-      radius={1}
-    >
-      <Flex align="center" gap={2}>
-        <MissingAssetCheckbox
-          checked={selected}
-          onChange={(e) => {
-            selectAsset(e.currentTarget.checked)
-          }}
-          aria-label={selected ? `Import video ${asset.id}` : `Skip import of video ${asset.id}`}
-        />
-        <VideoThumbnail
-          asset={{
-            assetId: asset.id,
-            data: asset,
-            filename: asset.id,
-            playbackId: asset.playback_ids.find((p) => p.id)?.id,
-          }}
-          width={150}
-        />
-        <Stack space={2}>
-          <Flex align="center" gap={1}>
-            <Code size={2}>{truncateString(asset.id, 15)}</Code>{' '}
-            <Text muted size={2}>
-              ({duration.formatted})
-            </Text>
-          </Flex>
-          <Text size={1}>
-            Uploaded at{' '}
-            {new Date(Number(asset.created_at) * 1000).toLocaleDateString('en', {
-              year: 'numeric',
-              day: '2-digit',
-              month: '2-digit',
-            })}
-          </Text>
-        </Stack>
-      </Flex>
-    </Card>
-  )
-}
-
-function ImportVideosDialog(props: ReturnType<typeof useImportMuxAssets>) {
-  const {importState} = props
-
-  const canTriggerImport =
-    (importState === 'idle' || importState === 'error') && props.selectedAssets.length > 0
-  const isImporting = importState === 'importing'
-  const noAssetsToImport =
-    props.missingAssets?.length === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading
-
-  return (
-    <Dialog
-      animate
-      header={'Import videos from Mux'}
-      zOffset={DIALOGS_Z_INDEX}
-      id="video-details-dialog"
-      onClose={props.closeDialog}
-      onClickOutside={props.closeDialog}
-      width={1}
-      position="fixed"
-      footer={
-        importState !== 'done' &&
-        !noAssetsToImport && (
-          <Card padding={3}>
-            <Flex justify="space-between" align="center">
-              <Button
-                fontSize={2}
-                padding={3}
-                mode="ghost"
-                text="Cancel"
-                tone="critical"
-                onClick={props.closeDialog}
-                disabled={isImporting}
-              />
-              {props.missingAssets && (
-                <Button
-                  icon={RetrieveIcon}
-                  fontSize={2}
-                  padding={3}
-                  mode="ghost"
-                  text={
-                    props.selectedAssets?.length > 0
-                      ? `Import ${props.selectedAssets.length} video(s)`
-                      : 'No video(s) selected'
-                  }
-                  tone="positive"
-                  onClick={props.importAssets}
-                  iconRight={isImporting && Spinner}
-                  disabled={!canTriggerImport}
-                />
-              )}
-            </Flex>
-          </Card>
-        )
-      }
-    >
-      <Box padding={3}>
-        {/* WARNING: SKIPPED ASSETS WITHOUT PLAYBACK */}
-        {props.muxAssets.hasSkippedAssetsWithoutPlayback && (
-          <Card tone="caution" marginBottom={5} padding={3} border>
-            <Flex align="center" gap={2}>
-              <InfoOutlineIcon fontSize={36} />
-              <Stack space={2}>
-                <Text size={2} weight="semibold">
-                  Some videos were skipped
-                </Text>
-                <Text size={1}>
-                  Videos without playback IDs cannot be imported and have been excluded from the
-                  list.
-                </Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-
-        {/* LOADING ASSETS STATE */}
-        {(props.muxAssets.loading || props.assetsInSanityLoading) && (
-          <Card tone="primary" marginBottom={5} padding={3} border>
-            <Flex align="center" gap={4}>
-              <Spinner muted size={4} />
-              <Stack space={2}>
-                <Text size={2} weight="semibold">
-                  Loading assets from Mux
-                </Text>
-                <Text size={1}>
-                  This may take a while.
-                  {props.missingAssets &&
-                    props.missingAssets.length > 0 &&
-                    ` There are at least ${props.missingAssets.length} video${props.missingAssets.length > 1 ? 's' : ''} currently not in Sanity...`}
-                </Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-
-        {/* ERROR LOADING MUX */}
-        {props.muxAssets.error && (
-          <Card tone="critical" marginBottom={5} padding={3} border>
-            <Flex align="center" gap={2}>
-              <ErrorOutlineIcon fontSize={36} />
-              <Stack space={2}>
-                <Text size={2} weight="semibold">
-                  There was an error getting all data from Mux
-                </Text>
-                <Text size={1}>
-                  {props.missingAssets
-                    ? `But we've found ${props.missingAssets.length} video${props.missingAssets.length > 1 ? 's' : ''} not in Sanity, which you can start importing now.`
-                    : 'Please try again or contact a developer for help.'}
-                </Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-
-        {/* IMPORTING STATE */}
-        {importState === 'importing' && (
-          <Card tone="primary" marginBottom={5} padding={3} border>
-            <Flex align="center" gap={4}>
-              <Spinner muted size={4} />
-              <Stack space={2}>
-                <Text size={2} weight="semibold">
-                  Importing {props.selectedAssets.length} video
-                  {props.selectedAssets.length > 1 && 's'} from Mux
-                </Text>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-
-        {/* ERROR IMPORTING */}
-        {importState === 'error' && (
-          <Card tone="critical" marginBottom={5} padding={3} border>
-            <Flex align="center" gap={2}>
-              <ErrorOutlineIcon fontSize={36} />
-              <Stack space={2}>
-                <Text size={2} weight="semibold">
-                  There was an error importing videos
-                </Text>
-                <Text size={1}>
-                  {props.importError
-                    ? `Error: ${props.importError}`
-                    : 'Please try again or contact a developer for help.'}
-                </Text>
-                <Box marginTop={1}>
-                  <Button
-                    icon={RetryIcon}
-                    text="Retry"
-                    tone="primary"
-                    onClick={props.importAssets}
-                  />
-                </Box>
-              </Stack>
-            </Flex>
-          </Card>
-        )}
-
-        {/* NO ASSETS TO IMPORT or SUCESS STATE */}
-        {(noAssetsToImport || importState === 'done') && (
-          <Stack paddingY={5} marginBottom={4} space={3} style={{textAlign: 'center'}}>
-            <Box>
-              <CheckmarkCircleIcon fontSize={48} />
-            </Box>
-            <Heading size={2}>
-              {importState === 'done'
-                ? `Videos imported successfully`
-                : 'There are no Mux videos to import'}
-            </Heading>
-            <Text size={2}>
-              {importState === 'done'
-                ? 'You can now use them in your Sanity content.'
-                : "They're all in Sanity and ready to be used in your content."}
-            </Text>
-          </Stack>
-        )}
-
-        {/* MISSING ASSETS SELECTOR */}
-        {props.missingAssets &&
-          props.missingAssets.length > 0 &&
-          (importState === 'idle' || importState === 'error') && (
-            <Stack space={4}>
-              <Heading size={1}>
-                There are {props.missingAssets.length}
-                {props.muxAssets.loading && '+'} Mux video{props.missingAssets.length > 1 && 's'}{' '}
-                not in Sanity
-              </Heading>
-              {!props.muxAssets.loading && (
-                <Flex align="center" paddingX={2}>
-                  <Checkbox
-                    id="import-all"
-                    style={{display: 'block'}}
-                    onClick={(e) => {
-                      const selectAll = e.currentTarget.checked
-                      if (selectAll) {
-                        // eslint-disable-next-line no-unused-expressions
-                        props.missingAssets && props.setSelectedAssets(props.missingAssets)
-                      } else {
-                        props.setSelectedAssets([])
-                      }
-                    }}
-                    checked={props.selectedAssets.length === props.missingAssets.length}
-                  />
-                  <Box flex={1} paddingLeft={3} as="label" htmlFor="import-all">
-                    <Text>Import all</Text>
-                  </Box>
-                </Flex>
-              )}
-              {props.missingAssets.map((asset) => (
-                <MissingAsset
-                  key={asset.id}
-                  asset={asset}
-                  selectAsset={(selected) => {
-                    if (selected) {
-                      props.setSelectedAssets([...props.selectedAssets, asset])
-                    } else {
-                      props.setSelectedAssets(props.selectedAssets.filter((a) => a.id !== asset.id))
-                    }
-                  }}
-                  selected={props.selectedAssets.some((a) => a.id === asset.id)}
-                />
-              ))}
-            </Stack>
-          )}
-      </Box>
-    </Dialog>
-  )
-}
-
-export default function ImportVideosFromMux() {
-  const importAssets = useImportMuxAssets()
-
-  if (!importAssets.hasSecrets) {
-    return
-  }
-
-  if (importAssets.dialogOpen) {
-    return <ImportVideosDialog {...importAssets} />
-  }
-
-  return <Button mode="bleed" text="Import from Mux" onClick={importAssets.openDialog} />
-}

package/src/components/Input.styled.tsx

@@ -1,22 +0,0 @@
-import {Box, Card, Flex, Spinner, Text} from '@sanity/ui'
-
-export const InputFallback = () => {
-  return (
-    <div style={{padding: 1}}>
-      <Card
-        shadow={1}
-        sizing="border"
-        style={{aspectRatio: '16/9', width: '100%', borderRadius: '1px'}}
-      >
-        <Flex align="center" direction="column" height="fill" justify="center">
-          <Spinner muted />
-          <Box marginTop={3}>
-            <Text align="center" muted size={1}>
-              Loading…
-            </Text>
-          </Box>
-        </Flex>
-      </Card>
-    </div>
-  )
-}