sanity-plugin-media 4.3.5 → 5.0.0

package/src/components/AssetGridVirtualized/index.tsx

@@ -1,94 +0,0 @@
-import {memo, forwardRef} from 'react'
-import {VirtuosoGrid} from 'react-virtuoso'
-import {styled} from 'styled-components'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import type {CardAssetData, CardUploadData} from '../../types'
-import CardAsset from '../CardAsset'
-import CardUpload from '../CardUpload'
-
-type Props = {
-  items: (CardAssetData | CardUploadData)[]
-  onLoadMore?: () => void
-}
-
-const CARD_HEIGHT = 220
-const CARD_WIDTH = 240
-
-const VirtualCell = memo(
-  ({item, selected}: {item: CardAssetData | CardUploadData; selected: boolean}) => {
-    if (item?.type === 'asset') {
-      return <CardAsset id={item.id} selected={selected} />
-    }
-
-    if (item?.type === 'upload') {
-      return <CardUpload id={item.id} />
-    }
-
-    return null
-  },
-)
-
-const StyledItemContainer = styled.div`
-  height: ${CARD_HEIGHT}px;
-  width: ${CARD_WIDTH}px;
-`
-
-const ItemContainer = forwardRef<HTMLDivElement, any>((props, ref) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
-  const {context, ...rest} = props
-  return <StyledItemContainer ref={ref} {...rest} />
-})
-
-const StyledListContainer = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, ${CARD_WIDTH}px);
-  grid-template-rows: repeat(auto-fill, ${CARD_HEIGHT}px);
-  justify-content: center;
-  margin: 0 auto;
-`
-
-const ListContainer = forwardRef<HTMLDivElement, any>((props, ref) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
-  const {context, ...rest} = props
-  return <StyledListContainer ref={ref} {...rest} />
-})
-
-const AssetGridVirtualized = (props: Props) => {
-  const {items, onLoadMore} = props
-
-  // Redux
-  const selectedAssets = useTypedSelector((state) => state.selected.assets)
-
-  const selectedIds = (selectedAssets && selectedAssets.map((asset) => asset._id)) || []
-  const totalCount = items?.length
-
-  if (totalCount === 0) {
-    return null
-  }
-
-  return (
-    <VirtuosoGrid
-      className="media__custom-scrollbar"
-      computeItemKey={(index) => {
-        const item = items[index]
-        return item?.id
-      }}
-      components={{
-        Item: ItemContainer,
-        List: ListContainer,
-      }}
-      endReached={onLoadMore}
-      itemContent={(index) => {
-        const item = items[index]
-        const selected = selectedIds.includes(item?.id)
-        return <VirtualCell item={item} selected={selected} />
-      }}
-      overscan={48}
-      style={{overflowX: 'hidden', overflowY: 'scroll'}}
-      totalCount={totalCount}
-    />
-  )
-}
-
-export default AssetGridVirtualized

package/src/components/AssetMetadata/index.tsx

@@ -1,122 +0,0 @@
-import {DownloadIcon} from '@sanity/icons'
-import {Box, Button, Flex, Inline, Stack, Text} from '@sanity/ui'
-import {format} from 'date-fns'
-import filesize from 'filesize'
-import {type ReactNode} from 'react'
-
-import type {Asset, AssetItem} from '../../types'
-import getAssetResolution from '../../utils/getAssetResolution'
-import {isImageAsset} from '../../utils/typeGuards'
-import ButtonAssetCopy from '../ButtonAssetCopy'
-
-type Props = {
-  asset: Asset
-  item?: AssetItem
-}
-
-const Row = ({label, value}: {label: string; value: ReactNode}) => {
-  return (
-    <Flex justify="space-between">
-      <Text
-        size={1}
-        style={{
-          opacity: 0.8,
-          width: '40%',
-        }}
-        textOverflow="ellipsis"
-      >
-        {label}
-      </Text>
-      <Text
-        size={1}
-        style={{
-          opacity: 0.4,
-          textAlign: 'right',
-          width: '60%',
-        }}
-        textOverflow="ellipsis"
-      >
-        {value}
-      </Text>
-    </Flex>
-  )
-}
-
-const AssetMetadata = (props: Props) => {
-  const {asset, item} = props
-
-  const exif = asset?.metadata?.exif
-
-  // Callbacks
-  const handleDownload = () => {
-    window.location.href = `${asset.url}?dl=${asset.originalFilename}`
-  }
-
-  return (
-    <Box marginTop={3}>
-      {/* Base */}
-      <Box>
-        <Stack space={3}>
-          <Row label="Size" value={filesize(asset?.size, {base: 10, round: 0})} />
-          <Row label="MIME type" value={asset?.mimeType} />
-          <Row label="Extension" value={(asset?.extension).toUpperCase()} />
-          {isImageAsset(asset) && <Row label="Dimensions" value={getAssetResolution(asset)} />}
-        </Stack>
-      </Box>
-      {/* EXIF */}
-      {exif &&
-        (exif.DateTimeOriginal ||
-          exif.FNumber ||
-          exif.FocalLength ||
-          exif.ExposureTime ||
-          exif.ISO) && (
-          <>
-            {/* Divider */}
-            <Box
-              marginY={4}
-              style={{
-                background: 'var(--card-border-color)',
-                height: '1px',
-                width: '100%',
-              }}
-            />
-            <Box>
-              <Stack space={3}>
-                {exif.ISO && <Row label="ISO" value={exif.ISO} />}
-                {exif.FNumber && <Row label="Aperture" value={`ƒ/${exif.FNumber}`} />}
-                {exif.FocalLength && <Row label="Focal length" value={`${exif.FocalLength}mm`} />}
-                {exif.ExposureTime && (
-                  <Row label="Exposure time" value={`1/${1 / exif.ExposureTime}`} />
-                )}
-                {exif.DateTimeOriginal && (
-                  <Row
-                    label="Original date"
-                    value={format(new Date(exif.DateTimeOriginal), 'PPp')}
-                  />
-                )}
-              </Stack>
-            </Box>
-          </>
-        )}
-
-      {/* Asset actions */}
-      <Box marginTop={5}>
-        <Inline space={2}>
-          {/* Download */}
-          <Button
-            disabled={!item || item?.updating}
-            fontSize={1}
-            icon={DownloadIcon}
-            mode="ghost"
-            onClick={handleDownload}
-            text="Download"
-          />
-          {/* Copy to clipboard */}
-          <ButtonAssetCopy disabled={!item || item?.updating} url={asset.url} />
-        </Inline>
-      </Box>
-    </Box>
-  )
-}
-
-export default AssetMetadata

package/src/components/AssetTableVirtualized/index.tsx

@@ -1,73 +0,0 @@
-import {Box} from '@sanity/ui'
-import {memo} from 'react'
-import {GroupedVirtuoso} from 'react-virtuoso'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import type {CardAssetData, CardUploadData} from '../../types'
-import TableHeader from '../TableHeader'
-import TableRowAsset from '../TableRowAsset'
-import TableRowUpload from '../TableRowUpload'
-
-type Props = {
-  items: (CardAssetData | CardUploadData)[]
-  onLoadMore?: () => void
-}
-
-const VirtualRow = memo(
-  ({item, selected}: {item: CardAssetData | CardUploadData; selected: boolean}) => {
-    if (item?.type === 'asset') {
-      return (
-        <Box style={{height: '100px'}}>
-          <TableRowAsset id={item.id} selected={selected} />
-        </Box>
-      )
-    }
-
-    if (item?.type === 'upload') {
-      return (
-        <Box style={{height: '100px'}}>
-          <TableRowUpload id={item.id} />
-        </Box>
-      )
-    }
-
-    return null
-  },
-)
-
-const AssetTableVirtualized = (props: Props) => {
-  const {items, onLoadMore} = props
-
-  // Redux
-  const selectedAssets = useTypedSelector((state) => state.selected.assets)
-
-  const selectedIds = (selectedAssets && selectedAssets.map((asset) => asset._id)) || []
-  const totalCount = items?.length
-
-  if (totalCount === 0) {
-    return null
-  }
-
-  return (
-    <GroupedVirtuoso
-      className="media__custom-scrollbar"
-      computeItemKey={(index) => {
-        const item = items[index]
-        return item?.id || index
-      }}
-      endReached={onLoadMore}
-      groupCounts={Array(1).fill(totalCount)}
-      groupContent={() => {
-        return <TableHeader />
-      }}
-      itemContent={(index) => {
-        const item = items[index]
-        const selected = selectedIds.includes(item?.id)
-        return <VirtualRow item={item} selected={selected} />
-      }}
-      style={{overflowX: 'hidden'}}
-    />
-  )
-}
-
-export default AssetTableVirtualized

package/src/components/AutoTagInputWrapper/index.tsx

@@ -1,87 +0,0 @@
-import {useToast} from '@sanity/ui'
-import {useEffect, useRef} from 'react'
-import {type InputProps} from 'sanity'
-
-import {useToolOptions} from '../../contexts/ToolOptionsContext'
-import useVersionedClient from '../../hooks/useVersionedClient'
-import {applyMediaTags} from '../../utils/applyMediaTags'
-
-type AssetValue = {
-  _type: 'image' | 'file'
-  asset?: {
-    _ref: string
-    _type: 'reference'
-  }
-}
-
-export type AutoTagInputProps = InputProps & {
-  mediaTags?: string[]
-}
-
-/**
- * Input component that automatically applies media tags when an asset is selected or uploaded.
- *
- * Apply explicitly to image/file fields that should be auto-tagged:
- * ```ts
- * import {AutoTagInput} from 'sanity-plugin-media'
- *
- * defineField({
- *   type: 'image',
- *   options: { mediaTags: ['product'] },   // also pre-filters the media browser
- *   components: { input: AutoTagInput },
- * })
- * ```
- *
- * Pass `mediaTags` as a prop to override or use without `options`:
- * ```ts
- * components: { input: (props) => <AutoTagInput {...props} mediaTags={['product']} /> }
- * ```
- */
-export function AutoTagInput(props: AutoTagInputProps) {
-  const {renderDefault, schemaType, value, mediaTags: mediaTagsProp} = props
-  const toast = useToast()
-
-  // Prop takes precedence; fall back to schemaType.options.mediaTags (set for browser pre-filtering)
-  const mediaTags =
-    mediaTagsProp ?? (schemaType?.options as {mediaTags?: string[]} | undefined)?.mediaTags
-
-  const client = useVersionedClient()
-  const {createTagsOnUpload} = useToolOptions()
-
-  const prevAssetRef = useRef<string | undefined>(undefined)
-  const isInitialMount = useRef(true)
-
-  const currentAssetRef = (value as AssetValue | undefined)?.asset?._ref
-
-  useEffect(() => {
-    if (isInitialMount.current) {
-      isInitialMount.current = false
-      prevAssetRef.current = currentAssetRef
-      return
-    }
-
-    const previousRef = prevAssetRef.current
-    prevAssetRef.current = currentAssetRef
-
-    if (!mediaTags?.length || !currentAssetRef || currentAssetRef === previousRef) return
-
-    applyMediaTags({
-      client,
-      assetId: currentAssetRef,
-      mediaTags,
-      createTagsOnUpload,
-    }).catch((err) => {
-      console.error('[sanity-plugin-media] Failed to apply auto-tags:', err)
-      const label = mediaTags.length === 1 ? 'tag' : 'tags'
-      toast.push({
-        closable: true,
-        status: 'error',
-        title: `Failed to apply the media ${label} ${mediaTags.join(', ')}`,
-      })
-    })
-  }, [currentAssetRef, mediaTags, client, createTagsOnUpload])
-
-  return renderDefault(props as InputProps)
-}
-
-export default AutoTagInput

package/src/components/Browser/Browser.test.tsx

@@ -1,45 +0,0 @@
-import {studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
-import {render, screen, waitFor} from '@testing-library/react'
-import {of} from 'rxjs'
-import {ColorSchemeProvider} from 'sanity'
-import {describe, expect, it, vi, beforeEach} from 'vitest'
-
-import {createListenMock} from '../../__tests__/fixtures/listenMock'
-import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
-import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
-import useVersionedClient from '../../hooks/useVersionedClient'
-import Browser from './index'
-
-vi.mock('../../hooks/useVersionedClient', () => ({
-  default: vi.fn(),
-}))
-
-describe('Browser', () => {
-  beforeEach(() => {
-    const fetch = vi.fn().mockReturnValue(of({items: []}))
-    vi.mocked(useVersionedClient).mockReturnValue(
-      createMockSanityClient({
-        listen: createListenMock(),
-        observable: {fetch},
-      }),
-    )
-  })
-
-  it('renders Browse Assets header in tool mode', async () => {
-    render(
-      <ColorSchemeProvider scheme="light">
-        <ThemeProvider theme={studioTheme}>
-          <ToastProvider>
-            <ToolOptionsProvider options={{creditLine: {enabled: false}}}>
-              <Browser />
-            </ToolOptionsProvider>
-          </ToastProvider>
-        </ThemeProvider>
-      </ColorSchemeProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('Browse Assets')).toBeInTheDocument()
-    })
-  })
-})

package/src/components/Browser/index.tsx

@@ -1,90 +0,0 @@
-import {Card, Flex, PortalProvider} from '@sanity/ui'
-import {useState} from 'react'
-import {type AssetSourceComponentProps, type SanityDocument} from 'sanity'
-
-import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
-import useVersionedClient from '../../hooks/useVersionedClient'
-import GlobalStyle from '../../styled/GlobalStyles'
-import Controls from '../Controls'
-import DebugControls from '../DebugControls'
-import Dialogs from '../Dialogs'
-import Header from '../Header'
-import Items from '../Items'
-import Notifications from '../Notifications'
-import PickedBar from '../PickedBar'
-import ReduxProvider from '../ReduxProvider'
-import TagsPanel from '../TagsPanel'
-import UploadDropzone from '../UploadDropzone'
-import {useBrowserInit} from './useBrowserInit'
-
-type Props = {
-  assetType?: AssetSourceComponentProps['assetType']
-  document?: SanityDocument
-  onClose?: AssetSourceComponentProps['onClose']
-  onSelect?: AssetSourceComponentProps['onSelect']
-  selectedAssets?: AssetSourceComponentProps['selectedAssets']
-  schemaType?: AssetSourceComponentProps['schemaType']
-}
-
-const BrowserContent = ({
-  onClose,
-  schemaType,
-}: {
-  onClose?: AssetSourceComponentProps['onClose']
-  schemaType?: AssetSourceComponentProps['schemaType']
-}) => {
-  const client = useVersionedClient()
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-
-  useBrowserInit(client, schemaType)
-
-  return (
-    <PortalProvider element={portalElement}>
-      <UploadDropzone>
-        <Dialogs />
-        <Notifications />
-
-        <Card display="flex" height="fill" ref={setPortalElement}>
-          <Flex direction="column" flex={1}>
-            {/* Header */}
-            <Header onClose={onClose} />
-
-            {/* Browser Controls */}
-            <Controls />
-
-            <Flex flex={1}>
-              <Flex align="flex-end" direction="column" flex={1} style={{position: 'relative'}}>
-                <PickedBar />
-                <Items />
-              </Flex>
-              <TagsPanel />
-            </Flex>
-
-            {/* Debug */}
-            <DebugControls />
-          </Flex>
-        </Card>
-      </UploadDropzone>
-    </PortalProvider>
-  )
-}
-
-const Browser = (props: Props) => {
-  const client = useVersionedClient()
-
-  return (
-    <ReduxProvider
-      assetType={props?.assetType}
-      client={client}
-      document={props?.document}
-      selectedAssets={props?.selectedAssets}
-    >
-      <AssetBrowserDispatchProvider onSelect={props?.onSelect}>
-        <GlobalStyle />
-        <BrowserContent onClose={props?.onClose} schemaType={props?.schemaType} />
-      </AssetBrowserDispatchProvider>
-    </ReduxProvider>
-  )
-}
-
-export default Browser

package/src/components/Browser/useBrowserInit.ts

@@ -1,126 +0,0 @@
-import type {MutationEvent, SanityClient} from '@sanity/client'
-import groq from 'groq'
-import {useEffect} from 'react'
-import {useDispatch, useSelector} from 'react-redux'
-import type {Dispatch} from 'redux'
-import type {AssetSourceComponentProps} from 'sanity'
-
-import {inputs} from '../../config/searchFacets'
-import {TAG_DOCUMENT_NAME} from '../../constants'
-import {assetsActions} from '../../modules/assets'
-import {searchActions} from '../../modules/search'
-import {tagsActions} from '../../modules/tags'
-import type {RootReducerState} from '../../modules/types'
-import type {Asset, Tag} from '../../types'
-
-function getMediaTagNames(schemaType?: AssetSourceComponentProps['schemaType']): string[] {
-  const mediaTags = (schemaType?.options as {mediaTags?: string[]} | undefined)?.mediaTags
-  if (!mediaTags?.length) return []
-  const unique = new Set(
-    mediaTags.map((t) => t?.trim()).filter((t): t is string => Boolean(t?.length)),
-  )
-  return Array.from(unique)
-}
-
-function createAssetHandler(dispatch: Dispatch) {
-  return (update: MutationEvent) => {
-    const {documentId, result, transition} = update
-
-    switch (transition) {
-      case 'appear':
-        dispatch(assetsActions.listenerCreateQueue({asset: result as Asset}))
-        break
-      case 'disappear':
-        dispatch(assetsActions.listenerDeleteQueue({assetId: documentId}))
-        break
-      case 'update':
-        dispatch(assetsActions.listenerUpdateQueue({asset: result as Asset}))
-        break
-      default:
-        break
-    }
-  }
-}
-
-function createTagHandler(dispatch: Dispatch) {
-  return (update: MutationEvent) => {
-    const {documentId, result, transition} = update
-
-    switch (transition) {
-      case 'appear':
-        dispatch(tagsActions.listenerCreateQueue({tag: result as Tag}))
-        break
-      case 'disappear':
-        dispatch(tagsActions.listenerDeleteQueue({tagId: documentId}))
-        break
-      case 'update':
-        dispatch(tagsActions.listenerUpdateQueue({tag: result as Tag}))
-        break
-      default:
-        break
-    }
-  }
-}
-
-export function useBrowserInit(
-  client: SanityClient,
-  schemaType?: AssetSourceComponentProps['schemaType'],
-): void {
-  const dispatch = useDispatch()
-  const tagsByIds = useSelector((state: RootReducerState) => state.tags.byIds)
-  const tagsFetchCount = useSelector((state: RootReducerState) => state.tags.fetchCount)
-
-  const tagNames = getMediaTagNames(schemaType)
-  const hasMediaTags = tagNames.length > 0
-
-  useEffect(() => {
-    if (!hasMediaTags) {
-      dispatch(searchActions.facetsClear())
-    }
-
-    dispatch(tagsActions.fetchRequest())
-
-    const assetSubscription = client
-      .listen(
-        groq`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`,
-      )
-      .subscribe(createAssetHandler(dispatch))
-
-    const tagSubscription = client
-      .listen(groq`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`)
-      .subscribe(createTagHandler(dispatch))
-
-    return () => {
-      assetSubscription.unsubscribe()
-      tagSubscription.unsubscribe()
-    }
-  }, [client, dispatch, hasMediaTags])
-
-  // When mediaTags are configured, wait for the tag fetch to complete then apply facets.
-  // Dispatching clear + add synchronously keeps all actions within assetsSearchEpic's
-  // 400ms debounce window, so the browser performs exactly one asset fetch on open.
-  useEffect(() => {
-    if (!hasMediaTags || tagsFetchCount < 0) return
-
-    const tagFacetInput = inputs.tag
-    if (tagFacetInput.type !== 'searchable') return
-
-    const resolvedTags = tagNames
-      .map((name) => Object.values(tagsByIds).find((item) => item.tag.name.current === name))
-      .filter((item): item is NonNullable<typeof item> => Boolean(item))
-
-    dispatch(searchActions.facetsClear())
-
-    for (const tagItem of resolvedTags) {
-      dispatch(
-        searchActions.facetsAdd({
-          facet: {
-            ...tagFacetInput,
-            operatorType: 'references',
-            value: {label: tagItem.tag.name.current, value: tagItem.tag._id},
-          },
-        }),
-      )
-    }
-  }, [tagsFetchCount, hasMediaTags]) // eslint-disable-line react-hooks/exhaustive-deps
-}