refactor: onboarding etc done, delete up next

src/actions/upload.ts

@@ -6,7 +6,7 @@ import {type Observable, concat, defer, from, of, throwError} from 'rxjs'
 import {catchError, mergeMap, mergeMapTo, switchMap} from 'rxjs/operators'
 
 import {createUpChunkObservable} from '../clients/upChunkObservable'
-import type {MuxAsset, Config} from '../util/types'
+import type {Config, MuxAsset} from '../util/types'
 import {getAsset} from './assets'
 import {testSecretsObservable} from './secrets'
 

src/components/ConfigureApi.tsx

@@ -106,7 +106,7 @@ function ConfigureApi({secrets, setDialogState}: Props) {
   }, [firstField])
 
   return (
-    <Dialog id={id} onClose={handleClose} header={<Header />} width={1}>
+    <Dialog id={id} onClose={handleClose} header={<Header />} width={0}>
       <Box padding={4} style={{position: 'relative'}}>
         <form onSubmit={handleSubmit} noValidate>
           <Stack space={4}>

src/components/Input.tsx

@@ -1,15 +1,15 @@
 import React, {memo} from 'react'
 import {useClient} from 'sanity'
-import {useDocumentPreviewStore} from 'sanity/_unstable'
 
 import {useAssetDocumentValues} from '../hooks/useAssetDocumentValues'
 import {useDialogState} from '../hooks/useDialogState'
 import {useMuxPolling} from '../hooks/useMuxPolling'
 import {useSecretsDocumentValues} from '../hooks/useSecretsDocumentValues'
 import type {Config, MuxInputProps} from '../util/types'
-import InputLegacy from './__legacy__Input'
+import Uploader from './__legacy__Uploader'
 import ConfigureApi from './ConfigureApi'
 import {InputFallback} from './Input.styled'
+import Onboard from './Onboard'
 
 export interface InputProps extends MuxInputProps {
   config: Config
@@ -39,16 +39,20 @@ const Input = (props: InputProps) => {
         <InputFallback />
       ) : (
         <>
-          <InputLegacy
-            {...props}
-            asset={assetDocumentValues.value}
-            client={client}
-            dialogState={dialogState}
-            setDialogState={setDialogState}
-            secrets={secretDocumentValues.value.secrets}
-            isInitialSetup={secretDocumentValues.value.isInitialSetup}
-            needsSetup={secretDocumentValues.value.needsSetup}
-          />
+          {secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? (
+            <Onboard setDialogState={setDialogState} />
+          ) : (
+            <Uploader
+              {...props}
+              client={client}
+              secrets={secretDocumentValues.value.secrets}
+              asset={assetDocumentValues.value}
+              dialogState={dialogState}
+              setDialogState={setDialogState}
+              needsSetup={secretDocumentValues.value.needsSetup}
+            />
+          )}
+
           {dialogState === 'secrets' && (
             <ConfigureApi
               setDialogState={setDialogState}

src/components/Onboard.tsx

@@ -0,0 +1,48 @@
+import {PlugIcon} from '@sanity/icons'
+import {Button, Card, Flex, Grid, Heading, Inline} from '@sanity/ui'
+import React, {useCallback} from 'react'
+
+import type {SetDialogState} from '../hooks/useDialogState'
+import MuxLogo from './MuxLogo'
+
+interface OnboardProps {
+  setDialogState: SetDialogState
+}
+
+export default function Onboard(props: OnboardProps) {
+  const {setDialogState} = props
+  const handleOpen = useCallback(() => setDialogState('secrets'), [setDialogState])
+
+  return (
+    <>
+      <div style={{padding: 2}}>
+        <Card
+          display="flex"
+          sizing="border"
+          style={{aspectRatio: '16/9', width: '100%', boxShadow: 'var(--card-bg-color) 0 0 0 2px'}}
+          paddingX={[2, 3, 4, 4]}
+          radius={1}
+          tone="transparent"
+        >
+          <Flex justify="flex-start" align="center">
+            <Grid columns={1} gap={[2, 3, 4, 4]}>
+              <Inline paddingY={1}>
+                <div style={{height: '32px'}}>
+                  <MuxLogo />
+                </div>
+              </Inline>
+              <Inline paddingY={1}>
+                <Heading size={[0, 1, 2, 2]}>
+                  Upload and preview videos directly from your studio.
+                </Heading>
+              </Inline>
+              <Inline paddingY={1}>
+                <Button mode="ghost" icon={PlugIcon} text="Configure API" onClick={handleOpen} />
+              </Inline>
+            </Grid>
+          </Flex>
+        </Card>
+      </div>
+    </>
+  )
+}

src/components/Player.tsx

@@ -1,5 +1,5 @@
 import {type PlaybackEngine, generatePlayerInitTime, initialize} from '@mux-elements/playback-core'
-import {Card, Stack, Text} from '@sanity/ui'
+import {Card, Text} from '@sanity/ui'
 import {
   MediaControlBar,
   MediaController,
@@ -71,7 +71,6 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
     (event) => setError(event.currentTarget.error),
     []
   )
-  const [isDeletedOnMux, setDeletedOnMux] = useState<boolean>(false)
   const playRef = useRef<HTMLDivElement>(null)
   const muteRef = useRef<HTMLDivElement>(null)
   const video = useRef<HTMLVideoElement>(null)
@@ -109,23 +108,24 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
     playbackEngineRef.current = nextPlaybackEngineRef
   }, [videoSrc, isLoading, playerInitTime])
 
+  useEffect(() => {
+    if (asset?.status === 'errored') {
+      handleCancelUpload()
+      // eslint-disable-next-line no-warning-comments
+      // @TODO use better error handling
+      throw new Error(asset.data?.errors?.messages?.join(' '))
+    }
+  }, [asset.data?.errors?.messages, asset?.status, handleCancelUpload])
+
+  if (error) {
+    // @TODO better error handling
+    throw error
+  }
+
   if (!asset || !asset.status) {
     return null
   }
 
-  /*
-  if (assetDocument && assetDocument.status === 'errored') {
-            // eslint-disable-next-line no-warning-comments
-            // todo: use client.observable
-            return this.handleRemoveVideo().then(() => {
-              this.setState({
-                isLoading: false,
-                error: new Error(assetDocument.data?.errors?.messages?.join(' ')),
-              })
-            })
-          }
-// */
-
   if (isLoading) {
     return (
       <UploadProgress
@@ -165,15 +165,6 @@ const MuxVideo = ({asset, buttons, readOnly, onChange, dialogState, setDialogSta
             <MediaFullscreenButton />
           </MediaControlBar>
         </MediaController>
-        {error && (
-          <Card padding={3} radius={2} shadow={1} tone="critical" marginTop={2}>
-            <Stack space={2}>
-              <Text size={1}>There was an error loading this video ({error.type}).</Text>
-              {isDeletedOnMux && <Text size={1}>The video is deleted on Mux</Text>}
-            </Stack>
-          </Card>
-        )}
-
         {isPreparingStaticRenditions && (
           <Card
             padding={2}

src/components/UploadPlaceholder.tsx

@@ -0,0 +1,89 @@
+import {PlugIcon, SearchIcon, UploadIcon} from '@sanity/icons'
+import {DocumentVideoIcon} from '@sanity/icons'
+import {Box, Button, Card, Flex, Inline, Text} from '@sanity/ui'
+import React, {useCallback} from 'react'
+import styled from 'styled-components'
+
+import type {SetDialogState} from '../hooks/useDialogState'
+import {type FileInputButtonProps, FileInputButton} from './FileInputButton'
+
+const UploadCard = styled(Card)`
+  && {
+    border-style: dashed;
+  }
+`
+
+const ConfigureApiBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`
+
+interface UploadPlaceholderProps {
+  setDialogState: SetDialogState
+  readOnly: boolean
+  hovering: boolean
+  needsSetup: boolean
+  onSelect: FileInputButtonProps['onSelect']
+}
+export default function UploadPlaceholder(props: UploadPlaceholderProps) {
+  const {setDialogState, readOnly, onSelect, hovering, needsSetup} = props
+  const handleBrowse = useCallback(() => setDialogState('select-video'), [setDialogState])
+  const handleConfigureApi = useCallback(() => setDialogState('secrets'), [setDialogState])
+
+  return (
+    <Box style={{padding: 1, position: 'relative'}} height="stretch">
+      <UploadCard
+        sizing="border"
+        height="fill"
+        tone={readOnly ? 'transparent' : 'inherit'}
+        border
+        padding={3}
+        style={hovering ? {borderColor: 'transparent'} : undefined}
+      >
+        <ConfigureApiBox padding={3}>
+          <Button
+            padding={3}
+            radius={3}
+            tone={needsSetup ? 'critical' : undefined}
+            onClick={handleConfigureApi}
+            icon={PlugIcon}
+            mode="bleed"
+          />
+        </ConfigureApiBox>
+        <Flex
+          align="center"
+          justify="space-between"
+          gap={4}
+          direction={['column', 'column', 'row']}
+          paddingY={[2, 2, 0]}
+          sizing="border"
+          height="fill"
+        >
+          <Flex align="center" justify="center" gap={2} flex={1}>
+            <Flex justify="center">
+              <Text muted>
+                <DocumentVideoIcon />
+              </Text>
+            </Flex>
+            <Flex justify="center">
+              <Text size={1} muted>
+                Drag video or paste URL here
+              </Text>
+            </Flex>
+          </Flex>
+          <Inline space={2}>
+            <FileInputButton
+              mode="ghost"
+              tone="default"
+              icon={UploadIcon}
+              text="Upload"
+              onSelect={onSelect}
+            />
+            <Button mode="ghost" icon={SearchIcon} text="Select" onClick={handleBrowse} />
+          </Inline>
+        </Flex>
+      </UploadCard>
+    </Box>
+  )
+}