sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/components/UploadPlaceholder.tsx

@@ -1,88 +0,0 @@
-import {DocumentVideoIcon, PlugIcon, SearchIcon, UploadIcon} from '@sanity/icons'
-import {Button, Card, Flex, Inline, Text} from '@sanity/ui'
-import {useCallback} from 'react'
-
-import {useAccessControl} from '../hooks/useAccessControl'
-import type {SetDialogState} from '../hooks/useDialogState'
-import {PluginConfig} from '../util/types'
-import {FileInputButton, type FileInputButtonProps} from './FileInputButton'
-
-function formatAcceptString(accept: string): string {
-  return accept
-    .split(',')
-    .map((type) => type.trim().replace('/*', ''))
-    .join(' or ')
-}
-
-interface UploadPlaceholderProps {
-  setDialogState: SetDialogState
-  readOnly: boolean
-  hovering: boolean
-  needsSetup: boolean
-  onSelect: FileInputButtonProps['onSelect']
-  config: PluginConfig
-  accept: string
-}
-export default function UploadPlaceholder(props: UploadPlaceholderProps) {
-  const {setDialogState, readOnly, onSelect, hovering, needsSetup, accept} = props
-  const handleBrowse = useCallback(() => setDialogState('select-video'), [setDialogState])
-  const handleConfigureApi = useCallback(() => setDialogState('secrets'), [setDialogState])
-  const {hasConfigAccess} = useAccessControl(props.config)
-
-  return (
-    <Card
-      sizing="border"
-      tone={readOnly ? 'transparent' : 'inherit'}
-      border
-      radius={2}
-      paddingX={3}
-      paddingY={1}
-      style={hovering ? {borderColor: 'transparent'} : undefined}
-    >
-      <Flex
-        align="center"
-        justify="space-between"
-        gap={4}
-        direction={['column', 'column', 'row']}
-        paddingY={2}
-        sizing="border"
-      >
-        <Flex align="center" justify="flex-start" gap={2} flex={1}>
-          <Flex justify="center">
-            <Text muted>
-              <DocumentVideoIcon />
-            </Text>
-          </Flex>
-          <Flex justify="center">
-            <Text size={1} muted>
-              Drag {formatAcceptString(accept)} file or paste URL here
-            </Text>
-          </Flex>
-        </Flex>
-        <Inline space={2}>
-          <FileInputButton
-            accept={accept}
-            mode="bleed"
-            tone="default"
-            icon={UploadIcon}
-            text="Upload"
-            onSelect={onSelect}
-          />
-          <Button mode="bleed" icon={SearchIcon} text="Select" onClick={handleBrowse} />
-
-          {hasConfigAccess && (
-            <Button
-              padding={3}
-              radius={3}
-              tone={needsSetup ? 'critical' : undefined}
-              onClick={handleConfigureApi}
-              icon={PlugIcon}
-              mode="bleed"
-              title="Configure plugin credentials"
-            />
-          )}
-        </Inline>
-      </Flex>
-    </Card>
-  )
-}

package/src/components/UploadProgress.tsx

@@ -1,80 +0,0 @@
-// Lifted from sanity/form/inputs/files/common/UploadProgress
-
-import {Button, Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
-import {LinearProgress} from 'sanity'
-import {styled} from 'styled-components'
-
-export const CardWrapper = styled(Card)`
-  min-height: 82px;
-  box-sizing: border-box;
-`
-
-export const FlexWrapper = styled(Flex)`
-  text-overflow: ellipsis;
-  overflow: hidden;
-`
-
-export const LeftSection = styled(Stack)`
-  position: relative;
-  width: 60%;
-`
-
-export const CodeWrapper = styled(Code)`
-  position: relative;
-  width: 100%;
-
-  code {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    position: relative;
-    max-width: 200px;
-  }
-`
-
-export const UploadProgress = ({
-  progress = 100,
-  onCancel,
-  filename,
-  text = 'Uploading',
-}: {
-  progress: number
-  filename?: React.ReactNode
-  onCancel?: React.MouseEventHandler<HTMLButtonElement>
-  text?: React.ReactNode
-}) => {
-  // Disable cancel button when upload is 90% or more complete
-  // to prevent inconsistency between Mux and Sanity
-  const isCancelDisabled = progress >= 90
-
-  return (
-    <CardWrapper tone="primary" padding={4} border height="fill">
-      <FlexWrapper align="center" justify="space-between" height="fill" direction="row" gap={2}>
-        <LeftSection>
-          <Flex justify="center" gap={[3, 3, 2, 2]} direction={['column', 'column', 'row']}>
-            <Text size={1}>
-              <Inline space={2}>
-                {text}
-                <CodeWrapper size={1}>{filename ? filename : '...'}</CodeWrapper>
-              </Inline>
-            </Text>
-          </Flex>
-
-          <Card marginTop={3} radius={5} shadow={1}>
-            <LinearProgress value={progress} />
-          </Card>
-        </LeftSection>
-
-        {onCancel ? (
-          <Button
-            fontSize={2}
-            text="Cancel upload"
-            mode="ghost"
-            tone="critical"
-            onClick={onCancel}
-            disabled={isCancelDisabled}
-          />
-        ) : null}
-      </FlexWrapper>
-    </CardWrapper>
-  )
-}

package/src/components/Uploader.styled.tsx

@@ -1,66 +0,0 @@
-/* eslint-disable no-nested-ternary */
-import {Card, type CardTone} from '@sanity/ui'
-import React, {forwardRef, useCallback, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {withFocusRing} from './withFocusRing'
-
-const UploadCardWithFocusRing = withFocusRing(Card)
-
-interface UploadCardProps {
-  tone?: CardTone
-  children: React.ReactNode
-  onPaste: React.ClipboardEventHandler<HTMLInputElement>
-  onDrop: React.DragEventHandler<HTMLDivElement>
-  onDragOver: React.DragEventHandler<HTMLDivElement>
-  onDragLeave: React.DragEventHandler<HTMLDivElement>
-  onDragEnter: React.DragEventHandler<HTMLDivElement>
-}
-export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps>(
-  ({children, tone, onPaste, onDrop, onDragEnter, onDragLeave, onDragOver}, forwardedRef) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>((event) => {
-      const target = event.target as HTMLElement
-
-      // Don't steal focus when pasting into the VTT input
-      if (target.closest('#vtt-url')) {
-        return
-      }
-
-      if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-        inputRef.current!.focus()
-      }
-    }, [])
-
-    return (
-      <UploadCardWithFocusRing
-        tone={tone}
-        ref={forwardedRef}
-        padding={0}
-        radius={2}
-        shadow={0}
-        tabIndex={0}
-        onKeyDown={handleKeyDown}
-        onPaste={onPaste}
-        onDrop={onDrop}
-        onDragEnter={onDragEnter}
-        onDragLeave={onDragLeave}
-        onDragOver={onDragOver}
-      >
-        <HiddenInput ref={inputRef} />
-        {children}
-      </UploadCardWithFocusRing>
-    )
-  }
-)
-
-const HiddenInput = styled.input.attrs({type: 'text'})`
-  position: absolute;
-  border: 0;
-  color: white;
-  opacity: 0;
-
-  &:focus {
-    outline: none;
-  }
-`