sanity-plugin-media 4.3.5 → 5.0.0

package/src/components/CardAsset/index.tsx

@@ -1,290 +0,0 @@
-import {CheckmarkCircleIcon, EditIcon, WarningFilledIcon} from '@sanity/icons'
-import {
-  Box,
-  Checkbox,
-  Container,
-  Flex,
-  Spinner,
-  Text,
-  type Theme,
-  type ThemeColorSchemeKey,
-  Tooltip,
-} from '@sanity/ui'
-import {memo, type MouseEvent, type RefObject} from 'react'
-import {useDispatch} from 'react-redux'
-import {useColorSchemeValue} from 'sanity'
-import {styled, css} from 'styled-components'
-
-import {PANEL_HEIGHT} from '../../constants'
-import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
-import useKeyPress from '../../hooks/useKeyPress'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {assetsActions, selectAssetById} from '../../modules/assets'
-import {dialogActions} from '../../modules/dialog'
-import {getSchemeColor} from '../../utils/getSchemeColor'
-import imageDprUrl from '../../utils/imageDprUrl'
-import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
-import FileIcon from '../FileIcon'
-import Image from '../Image'
-
-type Props = {
-  id: string
-  selected: boolean
-}
-
-const CardWrapper = styled(Flex)`
-  box-sizing: border-box;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-`
-
-const CardContainer = styled(Flex)<{$picked?: boolean; theme: Theme; $updating?: boolean}>(({
-  $picked,
-  theme,
-  $updating,
-}) => {
-  return css`
-    border: 1px solid transparent;
-    height: 100%;
-    pointer-events: ${$updating ? 'none' : 'auto'};
-    position: relative;
-    transition: all 300ms;
-    user-select: none;
-    width: 100%;
-
-    border: ${$picked
-      ? `1px solid ${theme.sanity.color.spot.orange} !important`
-      : '1px solid inherit'};
-
-    ${!$updating &&
-    css`
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          border: 1px solid var(--card-border-color);
-        }
-      }
-    `}
-  `
-})
-
-const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(({
-  $scheme,
-}) => {
-  return css`
-    cursor: pointer;
-    height: ${PANEL_HEIGHT}px;
-    transition: all 300ms;
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: ${getSchemeColor($scheme, 'bg')};
-      }
-    }
-  `
-})
-
-const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => {
-  return {
-    color: theme.sanity.color.spot.red,
-  }
-})
-
-const CardAsset = (props: Props) => {
-  const {id, selected} = props
-
-  const scheme = useColorSchemeValue()
-
-  // Refs
-  const shiftPressed: RefObject<boolean> = useKeyPress('shift')
-
-  // Redux
-  const dispatch = useDispatch()
-  const lastPicked = useTypedSelector((state) => state.assets.lastPicked)
-  const item = useTypedSelector((state) => selectAssetById(state, id))
-
-  const asset = item?.asset
-  const error = item?.error
-  const isOpaque = item?.asset?.metadata?.isOpaque
-  const picked = item?.picked
-  const updating = item?.updating
-
-  const {onSelect} = useAssetSourceActions()
-
-  // Short circuit if no asset is available
-  if (!asset) {
-    return null
-  }
-
-  // Callbacks
-  const handleAssetClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-
-    if (onSelect) {
-      onSelect([
-        {
-          kind: 'assetDocumentId',
-          value: asset._id,
-        },
-      ])
-    } else if (shiftPressed.current) {
-      if (picked) {
-        dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
-      } else {
-        dispatch(assetsActions.pickRange({startId: lastPicked || asset._id, endId: asset._id}))
-      }
-    } else {
-      dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
-    }
-  }
-
-  const handleContextActionClick = (e: MouseEvent) => {
-    e.stopPropagation()
-
-    if (onSelect) {
-      dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
-    } else if (shiftPressed.current && !picked) {
-      dispatch(assetsActions.pickRange({startId: lastPicked || asset._id, endId: asset._id}))
-    } else {
-      dispatch(assetsActions.pick({assetId: asset._id, picked: !picked}))
-    }
-  }
-
-  const opacityContainer = updating ? 0.5 : 1
-  const opacityPreview = selected || updating ? 0.25 : 1
-
-  return (
-    <CardWrapper padding={1}>
-      <CardContainer direction="column" $picked={picked} $updating={item.updating}>
-        {/* Image */}
-        <Box
-          flex={1}
-          style={{
-            cursor: selected ? 'default' : 'pointer',
-            position: 'relative',
-          }}
-        >
-          <div onClick={handleAssetClick} style={{height: '100%', opacity: opacityPreview}}>
-            {/* File icon */}
-            {isFileAsset(asset) && <FileIcon extension={asset.extension} width="80px" />}
-
-            {/* Image */}
-            {isImageAsset(asset) && (
-              <Image
-                draggable={false}
-                $scheme={scheme}
-                $showCheckerboard={!isOpaque}
-                src={imageDprUrl(asset, {height: 250, width: 250})}
-                style={{
-                  draggable: false,
-                  transition: 'opacity 1000ms',
-                }}
-              />
-            )}
-          </div>
-
-          {/* Selected check icon */}
-          {selected && !updating && (
-            <Flex
-              align="center"
-              justify="center"
-              style={{
-                height: '100%',
-                left: 0,
-                opacity: opacityContainer,
-                position: 'absolute',
-                top: 0,
-                width: '100%',
-              }}
-            >
-              <Text size={2}>
-                <CheckmarkCircleIcon />
-              </Text>
-            </Flex>
-          )}
-
-          {/* Spinner */}
-          {updating && (
-            <Flex
-              align="center"
-              justify="center"
-              style={{
-                height: '100%',
-                left: 0,
-                position: 'absolute',
-                top: 0,
-                width: '100%',
-              }}
-            >
-              <Spinner />
-            </Flex>
-          )}
-        </Box>
-
-        {/* Footer */}
-        <ContextActionContainer
-          align="center"
-          onClick={handleContextActionClick}
-          paddingX={1}
-          $scheme={scheme}
-          style={{opacity: opacityContainer}}
-        >
-          {onSelect ? (
-            <EditIcon
-              style={{
-                flexShrink: 0,
-                opacity: 0.5,
-              }}
-            />
-          ) : (
-            <Checkbox
-              checked={picked}
-              readOnly
-              style={{
-                flexShrink: 0,
-                pointerEvents: 'none',
-                transform: 'scale(0.8)',
-              }}
-            />
-          )}
-
-          <Box marginLeft={2}>
-            <Text muted size={0} textOverflow="ellipsis">
-              {asset.originalFilename}
-            </Text>
-          </Box>
-        </ContextActionContainer>
-
-        {/* TODO: DRY */}
-        {/* Error button */}
-        {error && (
-          <Box
-            padding={3}
-            style={{
-              position: 'absolute',
-              right: 0,
-              top: 0,
-            }}
-          >
-            <Tooltip
-              animate
-              content={
-                <Container padding={2} width={0}>
-                  <Text size={1}>{error}</Text>
-                </Container>
-              }
-              placement="left"
-              portal
-            >
-              <Text size={1}>
-                <StyledWarningOutlineIcon color="critical" />
-              </Text>
-            </Tooltip>
-          </Box>
-        )}
-      </CardContainer>
-    </CardWrapper>
-  )
-}
-
-export default memo(CardAsset)

package/src/components/CardUpload/index.tsx

@@ -1,161 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Flex, Text} from '@sanity/ui'
-import filesize from 'filesize'
-import {useDispatch} from 'react-redux'
-import {useColorSchemeValue} from 'sanity'
-import {styled} from 'styled-components'
-
-import {PANEL_HEIGHT} from '../../constants'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {selectUploadById, uploadsActions} from '../../modules/uploads'
-import {getSchemeColor} from '../../utils/getSchemeColor'
-import FileIcon from '../FileIcon'
-import Image from '../Image'
-
-type Props = {
-  id: string
-}
-
-const CardWrapper = styled(Flex)`
-  box-sizing: border-box;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-`
-
-const CardUpload = (props: Props) => {
-  const {id} = props
-
-  const scheme = useColorSchemeValue()
-
-  // Redux
-  const dispatch = useDispatch()
-  const item = useTypedSelector((state) => selectUploadById(state, id))
-
-  if (!item) {
-    return null
-  }
-
-  const fileSize = filesize(item.size, {base: 10, round: 0})
-  const percentLoaded = Math.round(item.percent || 0) // (0 - 100)
-
-  const isComplete = item.status === 'complete'
-  const isUploading = item.status === 'uploading'
-  const isQueued = item.status === 'queued'
-
-  let status
-  if (isComplete) {
-    status = 'Verifying'
-  }
-  if (isUploading) {
-    status = `${percentLoaded}%`
-  }
-  if (isQueued) {
-    status = 'Queued'
-  }
-
-  // Callbacks
-  const handleCancelUpload = () => {
-    dispatch(uploadsActions.uploadCancel({hash: item.hash}))
-  }
-
-  return (
-    <CardWrapper padding={1}>
-      <Flex
-        direction="column"
-        flex={1}
-        style={{
-          background: getSchemeColor(scheme, 'bg'),
-          border: '1px solid transparent',
-          height: '100%',
-          position: 'relative',
-        }}
-      >
-        {/* Progress bar */}
-        <div
-          style={{
-            background: 'var(--card-fg-color)',
-            bottom: 0,
-            height: '1px',
-            left: 0,
-            position: 'absolute',
-            width: '100%',
-            transform: `scaleX(${percentLoaded * 0.01})`,
-            transformOrigin: 'bottom left',
-            transition: 'all 1000ms ease-out',
-          }}
-        />
-
-        <Box flex={1} style={{position: 'relative'}}>
-          {item.assetType === 'image' && item?.objectUrl && (
-            <Image
-              draggable={false}
-              $scheme={scheme}
-              src={item.objectUrl}
-              style={{
-                opacity: 0.4,
-              }}
-            />
-          )}
-
-          {item.assetType === 'file' && (
-            <div style={{height: '100%', opacity: 0.1}}>
-              <FileIcon width="80px" />
-            </div>
-          )}
-
-          {/*
-          Cancel upload button.
-          Assets will only have a `complete` status _after_ it has been created on your dataset.
-          As such, we also hide the cancel button when `percentLoaded === 100`, as cancelling when the asset
-          has been fully uploaded (even with a status of `progress`) won't stop the asset from being created.
-        */}
-          {!isComplete && percentLoaded !== 100 && (
-            <Flex
-              align="center"
-              direction="column"
-              justify="center"
-              style={{
-                height: '100%',
-                left: 0,
-                position: 'absolute',
-                top: 0,
-                width: '100%',
-              }}
-            >
-              <Button
-                fontSize={4}
-                icon={CloseIcon}
-                mode="bleed"
-                onClick={handleCancelUpload}
-                padding={2}
-                style={{background: 'none', boxShadow: 'none'}}
-                tone="critical"
-              />
-            </Flex>
-          )}
-        </Box>
-
-        {/* Footer */}
-        <Flex
-          align="center"
-          justify="space-between"
-          paddingX={2}
-          style={{height: `${PANEL_HEIGHT}px`}}
-        >
-          <Box flex={1} marginRight={1}>
-            <Text size={0} textOverflow="ellipsis">
-              {item.name} ({fileSize})
-            </Text>
-          </Box>
-          <Text size={0} style={{flexShrink: 0}} weight="semibold">
-            {status}
-          </Text>
-        </Flex>
-      </Flex>
-    </CardWrapper>
-  )
-}
-
-export default CardUpload

package/src/components/Controls/index.tsx

@@ -1,136 +0,0 @@
-import {Box, Button, Flex, Inline, useMediaIndex} from '@sanity/ui'
-import {useDispatch} from 'react-redux'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {dialogActions} from '../../modules/dialog'
-import {tagsActions} from '../../modules/tags'
-import ButtonViewGroup from '../ButtonViewGroup'
-import OrderSelect from '../OrderSelect'
-import Progress from '../Progress'
-import SearchFacets from '../SearchFacets'
-import SearchFacetsControl from '../SearchFacetsControl'
-import TagIcon from '../TagIcon'
-import TextInputSearch from '../TextInputSearch'
-
-const Controls = () => {
-  // Redux
-  const dispatch = useDispatch()
-  const fetching = useTypedSelector((state) => state.assets.fetching)
-  const pageIndex = useTypedSelector((state) => state.assets.pageIndex)
-  const searchFacets = useTypedSelector((state) => state.search.facets)
-  const tagsPanelVisible = useTypedSelector((state) => state.tags.panelVisible)
-
-  const mediaIndex = useMediaIndex()
-
-  // Callbacks
-  const handleShowSearchFacetDialog = () => {
-    dispatch(dialogActions.showSearchFacets())
-  }
-
-  const handleShowTagsDialog = () => {
-    dispatch(dialogActions.showTags())
-  }
-
-  const toggleTagsPanelToggle = () => {
-    dispatch(tagsActions.panelVisibleSet({panelVisible: !tagsPanelVisible}))
-  }
-
-  return (
-    <Box
-      paddingY={2}
-      style={{
-        borderBottom: '1px solid var(--card-border-color)',
-        zIndex: 2,
-      }}
-    >
-      {/* Rows: search / filters / orders  */}
-      <Box marginBottom={2}>
-        <Flex
-          align="flex-start"
-          direction={['column', 'column', 'column', 'column', 'row']}
-          justify="space-between"
-        >
-          {/* Search + Filters */}
-          <Flex
-            flex={1}
-            style={{
-              alignItems: 'flex-start',
-              flex: 1,
-              height: '100%',
-              justifyContent: mediaIndex < 2 ? 'space-between' : 'flex-start',
-              position: 'relative',
-              width: '100%',
-            }}
-          >
-            <Box marginX={2} style={{minWidth: '200px'}}>
-              {/* Search */}
-              <TextInputSearch />
-            </Box>
-
-            <Box display={['none', 'none', 'block']}>
-              <SearchFacets />
-
-              {/* Search Facets Control (add / clear) */}
-              <SearchFacetsControl />
-            </Box>
-
-            <Box display={['block', 'block', 'none']} marginX={2}>
-              <Inline space={2} style={{whiteSpace: 'nowrap'}}>
-                {/* Filters button (small) */}
-                <Button
-                  fontSize={1}
-                  mode="ghost"
-                  onClick={handleShowSearchFacetDialog}
-                  text={`Filters${searchFacets.length > 0 ? ` (${searchFacets.length})` : ''}`}
-                  tone="primary"
-                />
-
-                {/* Tags button (small) */}
-                <Button
-                  fontSize={1}
-                  mode="ghost"
-                  onClick={handleShowTagsDialog}
-                  text={`Tags`}
-                  tone="primary"
-                />
-              </Inline>
-            </Box>
-          </Flex>
-        </Flex>
-      </Box>
-
-      <Box>
-        <Flex align="center" justify={['space-between']}>
-          {/* Views */}
-          <Box marginX={2}>
-            <ButtonViewGroup />
-          </Box>
-
-          <Flex marginX={2}>
-            {/* Orders */}
-            <OrderSelect />
-            {/* Tags panel toggle */}
-            <Box display={['none', 'none', 'block']} marginLeft={2}>
-              <Button
-                fontSize={1}
-                icon={
-                  <Box style={{transform: 'scale(0.75)'}}>
-                    <TagIcon />
-                  </Box>
-                }
-                onClick={toggleTagsPanelToggle}
-                mode={tagsPanelVisible ? 'default' : 'ghost'}
-                text={tagsPanelVisible ? 'Tags' : ''}
-              />
-            </Box>
-          </Flex>
-        </Flex>
-      </Box>
-
-      {/* Progress bar */}
-      <Progress key={pageIndex} loading={fetching} />
-    </Box>
-  )
-}
-
-export default Controls

package/src/components/DebugControls/index.tsx

@@ -1,80 +0,0 @@
-import {PlugIcon} from '@sanity/icons'
-import {Box, Flex, Switch, Text, Tooltip} from '@sanity/ui'
-import {type ChangeEvent} from 'react'
-import {useDispatch} from 'react-redux'
-
-import useKeyPress from '../../hooks/useKeyPress'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {debugActions} from '../../modules/debug'
-
-const DebugControls = () => {
-  // Redux
-  const dispatch = useDispatch()
-  const badConnection = useTypedSelector((state) => state.debug.badConnection)
-  const debugEnabled = useTypedSelector((state) => state.debug.enabled)
-
-  // Callbacks
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const checked = e.target.checked
-
-    dispatch(debugActions.setBadConnection(checked))
-  }
-
-  const handleToggleControls = () => {
-    dispatch(debugActions.toggleEnabled())
-  }
-
-  // Close on escape key press
-  useKeyPress('alt+ctrl+shift+/', handleToggleControls)
-
-  if (!debugEnabled) {
-    return null
-  }
-
-  return (
-    <Box
-      padding={4}
-      style={{
-        bottom: 0,
-        left: 0,
-        pointerEvents: 'none',
-        position: 'fixed',
-        width: '100%',
-      }}
-    >
-      {/* Bad connection toggle */}
-      <Flex align="center">
-        <Box marginRight={3}>
-          <Text muted size={1}>
-            <PlugIcon />
-          </Text>
-        </Box>
-        <Tooltip
-          animate
-          content={
-            <Box padding={2}>
-              <Text muted size={1}>
-                {badConnection
-                  ? 'Bad connection: +3000ms & 50% chance to fail'
-                  : 'No connection throttling'}
-              </Text>
-            </Box>
-          }
-          fallbackPlacements={['right', 'left']}
-          placement="bottom"
-          portal
-        >
-          <Switch
-            checked={badConnection}
-            onChange={handleChange}
-            style={{
-              pointerEvents: 'auto',
-            }}
-          />
-        </Tooltip>
-      </Flex>
-    </Box>
-  )
-}
-
-export default DebugControls

package/src/components/Dialog/index.tsx

@@ -1,11 +0,0 @@
-import {Dialog as SanityDialog} from '@sanity/ui'
-import {type ComponentProps} from 'react'
-
-const Dialog = (props: ComponentProps<typeof SanityDialog>) => {
-  // HACK: Temporarily force fixed positioning on all @sanity/ui <Dialog /> components.
-  // The studio is currently setting absolute positioning on all root-level dialogs on the mobile breakpoint,
-  // causing unwanted scroll behaviour.
-  return <SanityDialog {...props} style={{position: 'fixed'}} />
-}
-
-export default Dialog