sanity-plugin-media 4.3.5 → 5.0.0

package/src/modules/uploads/index.test.ts

@@ -1,59 +0,0 @@
-// @vitest-environment node
-
-import {describe, expect, it} from 'vitest'
-
-import type {UploadItem} from '../../types'
-import uploadsReducer, {uploadsActions} from './index'
-
-describe('uploads slice', () => {
-  it('uploadStart adds item to queue', () => {
-    let state = uploadsReducer(undefined, {type: '@@INIT'} as never)
-    const uploadItem = {
-      _type: 'upload',
-      assetType: 'image',
-      hash: 'abc',
-      name: 'x.png',
-      size: 1,
-      status: 'queued',
-    } as UploadItem
-
-    state = uploadsReducer(
-      state,
-      uploadsActions.uploadStart({
-        file: new File([], 'x.png'),
-        uploadItem,
-      }),
-    )
-
-    expect(state.allIds).toEqual(['abc'])
-    expect(state.byIds.abc).toMatchObject({hash: 'abc', status: 'queued'})
-  })
-
-  it('uploadProgress updates percent and status', () => {
-    let state = uploadsReducer(undefined, {type: '@@INIT'} as never)
-    const uploadItem = {
-      _type: 'upload',
-      assetType: 'image',
-      hash: 'h1',
-      name: 'x.png',
-      size: 1,
-      status: 'queued',
-      percent: 0,
-    } as UploadItem
-
-    state = uploadsReducer(
-      state,
-      uploadsActions.uploadStart({file: new File([], 'x.png'), uploadItem}),
-    )
-    state = uploadsReducer(
-      state,
-      uploadsActions.uploadProgress({
-        uploadHash: 'h1',
-        event: {percent: 42, stage: 'upload'} as any,
-      }),
-    )
-
-    expect(state.byIds.h1.percent).toBe(42)
-    expect(state.byIds.h1.status).toBe('uploading')
-  })
-})

package/src/modules/uploads/index.ts

@@ -1,282 +0,0 @@
-import {createSelector, createSlice, type PayloadAction} from '@reduxjs/toolkit'
-import type {ClientError, SanityAssetDocument, SanityImageAssetDocument} from '@sanity/client'
-import groq from 'groq'
-import type {Selector} from 'react-redux'
-import {empty, merge, of} from 'rxjs'
-import {catchError, delay, filter, mergeMap, takeUntil, withLatestFrom} from 'rxjs/operators'
-
-import type {HttpError, MyEpic, SanityUploadProgressEvent, UploadItem} from '../../types'
-import constructFilter from '../../utils/constructFilter'
-import {generatePreviewBlobUrl$} from '../../utils/generatePreviewBlobUrl'
-import {hashFile$, uploadAsset$} from '../../utils/uploadSanityAsset'
-import {assetsActions} from '../assets'
-import type {RootReducerState} from '../types'
-import {UPLOADS_ACTIONS} from './actions'
-
-export type UploadsReducerState = {
-  allIds: string[]
-  byIds: Record<string, UploadItem>
-}
-
-const initialState = {
-  allIds: [],
-  byIds: {},
-} as UploadsReducerState
-
-const uploadsSlice = createSlice({
-  name: 'uploads',
-  initialState,
-  extraReducers: (builder) => {
-    builder //
-      .addCase(UPLOADS_ACTIONS.uploadComplete, (state, action) => {
-        const {asset} = action.payload
-        if (state.byIds[asset.sha1hash]) {
-          state.byIds[asset.sha1hash].status = 'complete'
-        }
-      })
-  },
-  reducers: {
-    checkRequest(
-      _state,
-      _action: PayloadAction<{assets: (SanityAssetDocument | SanityImageAssetDocument)[]}>,
-    ) {
-      //
-    },
-    checkComplete(state, action: PayloadAction<{results: Record<string, string | null>}>) {
-      const {results} = action.payload
-
-      const assetHashes = Object.keys(results)
-
-      assetHashes.forEach((hash) => {
-        const deleteIndex = state.allIds.indexOf(hash)
-        if (deleteIndex >= 0) {
-          state.allIds.splice(deleteIndex, 1)
-        }
-
-        if (state.byIds[hash]) {
-          const blobUrl = state.byIds[hash].objectUrl
-          if (blobUrl) {
-            window.URL.revokeObjectURL(blobUrl)
-          }
-
-          delete state.byIds[hash]
-        }
-      })
-    },
-    previewReady(state, action: PayloadAction<{hash: string; blobUrl: string}>) {
-      const {blobUrl, hash} = action.payload
-      if (state.byIds[hash]) {
-        state.byIds[hash].objectUrl = blobUrl
-      }
-    },
-    uploadCancel(state, action: PayloadAction<{hash: string}>) {
-      const {hash} = action.payload
-      const deleteIndex = state.allIds.indexOf(hash)
-      if (deleteIndex >= 0) {
-        state.allIds.splice(deleteIndex, 1)
-      }
-      if (state.byIds[hash]) {
-        delete state.byIds[hash]
-      }
-    },
-    uploadError(state, action: PayloadAction<{error: HttpError; hash: string}>) {
-      const {hash} = action.payload
-      const deleteIndex = state.allIds.indexOf(hash)
-      if (deleteIndex >= 0) {
-        state.allIds.splice(deleteIndex, 1)
-      }
-      delete state.byIds[hash]
-    },
-    uploadRequest(
-      _state,
-      _action: PayloadAction<{file: File; forceAsAssetType?: 'file' | 'image'}>,
-    ) {
-      //
-    },
-    uploadProgress(
-      state,
-      action: PayloadAction<{event: SanityUploadProgressEvent; uploadHash: string}>,
-    ) {
-      const {event, uploadHash} = action.payload
-      state.byIds[uploadHash].percent = event.percent
-      state.byIds[uploadHash].status = 'uploading'
-    },
-    uploadStart(state, action: PayloadAction<{file: File; uploadItem: UploadItem}>) {
-      const {uploadItem} = action.payload
-      if (!state.allIds.includes(uploadItem.hash)) {
-        state.allIds.push(uploadItem.hash)
-      }
-      state.byIds[uploadItem.hash] = uploadItem
-    },
-  },
-})
-
-// Epics
-
-export const uploadsAssetStartEpic: MyEpic = (action$, _state$, {client}) =>
-  action$.pipe(
-    filter(uploadsActions.uploadStart.match),
-    mergeMap((action) => {
-      const {file, uploadItem} = action.payload
-
-      return merge(
-        // Generate low res preview
-        of(null).pipe(
-          mergeMap(() => generatePreviewBlobUrl$(file)),
-          mergeMap((url) => {
-            return of(
-              uploadsActions.previewReady({
-                blobUrl: url,
-                hash: uploadItem.hash,
-              }),
-            )
-          }),
-        ),
-        // Upload asset and receive progress / complete events
-        of(null).pipe(
-          // delay(500000), // debug uploads
-          mergeMap(() => uploadAsset$(client, uploadItem.assetType, file, uploadItem.hash)),
-          takeUntil(
-            action$.pipe(
-              filter(uploadsActions.uploadCancel.match),
-              filter((v) => v.payload.hash === uploadItem.hash),
-            ),
-          ),
-          mergeMap((event) => {
-            if (event?.type === 'complete') {
-              return of(
-                UPLOADS_ACTIONS.uploadComplete({
-                  asset: event.asset,
-                }),
-              )
-            }
-            if (event?.type === 'progress' && event?.stage === 'upload') {
-              return of(
-                uploadsActions.uploadProgress({
-                  event,
-                  uploadHash: uploadItem.hash,
-                }),
-              )
-            }
-            return empty()
-          }),
-          catchError((error: ClientError) =>
-            of(
-              uploadsActions.uploadError({
-                error: {
-                  message: error?.message || 'Internal error',
-                  statusCode: error?.statusCode || 500,
-                },
-                hash: uploadItem.hash,
-              }),
-            ),
-          ),
-        ),
-      )
-    }),
-  )
-
-export const uploadsAssetUploadEpic: MyEpic = (action$, state$) =>
-  action$.pipe(
-    filter(uploadsActions.uploadRequest.match),
-    withLatestFrom(state$),
-    mergeMap(([action, state]) => {
-      const {file, forceAsAssetType} = action.payload
-
-      return of(action).pipe(
-        // Generate SHA1 hash from local file
-        // This will throw in insecure contexts (non-localhost / https)
-        mergeMap(() => hashFile$(file)),
-        // Ignore if the file exists and is currently being uploaded
-        filter((hash) => {
-          const exists = !!state.uploads.byIds[hash]
-          return !exists
-        }),
-        // Dispatch start action and begin upload process
-        mergeMap((hash) => {
-          const assetType = forceAsAssetType || (file.type.indexOf('image') >= 0 ? 'image' : 'file')
-          const uploadItem = {
-            _type: 'upload',
-            assetType,
-            hash,
-            name: file.name,
-            size: file.size,
-            status: 'queued',
-          } as UploadItem
-          return of(uploadsActions.uploadStart({file, uploadItem}))
-        }),
-      )
-    }),
-  )
-
-export const uploadsCompleteQueueEpic: MyEpic = (action$) =>
-  action$.pipe(
-    filter(UPLOADS_ACTIONS.uploadComplete.match),
-    mergeMap((action) => {
-      return of(
-        uploadsActions.checkRequest({
-          assets: [action.payload.asset],
-        }),
-      )
-    }),
-  )
-
-export const uploadsCheckRequestEpic: MyEpic = (action$, state$, {client}) =>
-  action$.pipe(
-    filter(uploadsActions.checkRequest.match),
-    withLatestFrom(state$),
-    mergeMap(([action, state]) => {
-      const {assets} = action.payload
-
-      const documentIds = assets.map((asset) => asset._id)
-
-      const constructedFilter = constructFilter({
-        assetTypes: state.assets.assetTypes,
-        searchFacets: state.search.facets,
-        searchQuery: state.search.query,
-      })
-
-      const query = groq`
-        *[${constructedFilter} && _id in $documentIds].sha1hash
-      `
-
-      return of(action).pipe(
-        delay(1000), // give Sanity some time to register the recently uploaded asset
-        mergeMap(() => client.observable.fetch<string[]>(query, {documentIds})),
-        mergeMap((resultHashes) => {
-          const checkedResults = assets.reduce((acc: Record<string, string | null>, asset) => {
-            acc[asset.sha1hash] = resultHashes.includes(asset.sha1hash) ? asset._id : null
-            return acc
-          }, {})
-
-          return of(
-            uploadsActions.checkComplete({results: checkedResults}), //
-            assetsActions.insertUploads({results: checkedResults}),
-          )
-        }),
-      )
-    }),
-  )
-
-// Selectors
-
-const selectUploadsByIds = (state: RootReducerState) => state.uploads.byIds
-
-const selectUploadsAllIds = (state: RootReducerState) => state.uploads.allIds
-
-export const selectUploadById = createSelector(
-  [
-    (state: RootReducerState) => state.uploads.byIds,
-    (_state: RootReducerState, uploadId: string) => uploadId,
-  ],
-  (byIds, uploadId) => byIds[uploadId],
-)
-
-export const selectUploads: Selector<RootReducerState, UploadItem[]> = createSelector(
-  [selectUploadsByIds, selectUploadsAllIds],
-  (byIds, allIds) => allIds.map((id) => byIds[id]),
-)
-
-export const uploadsActions = {...uploadsSlice.actions}
-
-export default uploadsSlice.reducer

package/src/operators/checkTagName.test.ts

@@ -1,29 +0,0 @@
-// @vitest-environment node
-
-import type {SanityClient} from '@sanity/client'
-import {firstValueFrom, of} from 'rxjs'
-import {describe, expect, it, vi} from 'vitest'
-
-import checkTagName from './checkTagName'
-
-describe('checkTagName', () => {
-  it('errors with 409 when a tag with the same slug exists', async () => {
-    const client = {
-      fetch: vi.fn().mockResolvedValue(1),
-    } as unknown as SanityClient
-
-    await expect(
-      firstValueFrom(of(null).pipe(checkTagName(client, 'existing'))),
-    ).rejects.toMatchObject({statusCode: 409, message: 'Tag already exists'})
-  })
-
-  it('emits true when name is available', async () => {
-    const client = {
-      fetch: vi.fn().mockResolvedValue(0),
-    } as unknown as SanityClient
-
-    await expect(firstValueFrom(of(null).pipe(checkTagName(client, 'fresh-name')))).resolves.toBe(
-      true,
-    )
-  })
-})

package/src/operators/checkTagName.ts

@@ -1,33 +0,0 @@
-import type {SanityClient} from '@sanity/client'
-import groq from 'groq'
-import {from, Observable, of, throwError} from 'rxjs'
-import {mergeMap} from 'rxjs/operators'
-
-import {TAG_DOCUMENT_NAME} from '../constants'
-import type {HttpError} from '../types'
-
-const checkTagName = (client: SanityClient, name: string) => {
-  return function <T>(source: Observable<T>): Observable<boolean> {
-    return source.pipe(
-      mergeMap(() => {
-        return from(
-          client.fetch(groq`count(*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $name])`, {
-            name,
-          }),
-        ) as Observable<number>
-      }),
-      mergeMap((existingTagCount: number) => {
-        if (existingTagCount > 0) {
-          return throwError({
-            message: 'Tag already exists',
-            statusCode: 409,
-          } as HttpError)
-        }
-
-        return of(true)
-      }),
-    )
-  }
-}
-
-export default checkTagName

package/src/operators/debugThrottle.ts

@@ -1,25 +0,0 @@
-import {iif, type Observable, of, throwError} from 'rxjs'
-import {delay, mergeMap} from 'rxjs/operators'
-
-const debugThrottle = (throttled?: boolean) => {
-  return function <T>(source: Observable<T>): Observable<T> {
-    return iif(
-      () => !!throttled,
-      source.pipe(
-        delay(3000),
-        mergeMap((v) => {
-          if (Math.random() > 0.5) {
-            return throwError({
-              message: 'Test error',
-              statusCode: 500,
-            })
-          }
-          return of(v)
-        }),
-      ),
-      source,
-    )
-  }
-}
-
-export default debugThrottle

package/src/plugin.tsx

@@ -1,54 +0,0 @@
-import {ImageIcon} from '@sanity/icons'
-import {type AssetSource, type Tool as SanityTool, definePlugin} from 'sanity'
-
-import FormBuilderTool from './components/FormBuilderTool'
-import Tool from './components/Tool'
-import {ToolOptionsProvider} from './contexts/ToolOptionsContext'
-import mediaTag from './schemas/tag'
-import type {MediaToolOptions} from './types'
-
-const plugin = {
-  icon: ImageIcon,
-  name: 'media',
-  title: 'Media',
-}
-
-export const mediaAssetSource = {
-  ...plugin,
-  component: FormBuilderTool,
-} satisfies AssetSource
-
-const tool = {
-  ...plugin,
-  component: Tool,
-  __internalApplicationType: 'sanity/media',
-} satisfies SanityTool
-
-export const media = definePlugin<MediaToolOptions | void>((options) => ({
-  name: 'media',
-  studio: {
-    components: {
-      layout: (props) => (
-        <ToolOptionsProvider options={options}>{props.renderDefault(props)}</ToolOptionsProvider>
-      ),
-    },
-  },
-  form: {
-    file: {
-      assetSources: (prev) => {
-        return [...prev, mediaAssetSource]
-      },
-    },
-    image: {
-      assetSources: (prev) => {
-        return [...prev, mediaAssetSource]
-      },
-    },
-  },
-  schema: {
-    types: [mediaTag],
-  },
-  tools: (prev) => {
-    return [...prev, tool]
-  },
-}))

package/src/schemas/tag.ts

@@ -1,28 +0,0 @@
-import TagIcon from '../components/TagIcon'
-import {TAG_DOCUMENT_NAME} from '../constants'
-
-export default {
-  title: 'Media Tag',
-  icon: TagIcon,
-  name: TAG_DOCUMENT_NAME,
-  type: 'document',
-  fields: [
-    {
-      title: 'Name',
-      name: 'name',
-      type: 'slug',
-    },
-  ],
-  preview: {
-    select: {
-      name: 'name',
-    },
-    prepare(selection: any) {
-      const {name} = selection
-      return {
-        media: TagIcon,
-        title: name?.current,
-      }
-    },
-  },
-}

package/src/styled/GlobalStyles/index.tsx

@@ -1,40 +0,0 @@
-import {createGlobalStyle, css} from 'styled-components'
-
-const customScrollbar = css`
-  ::-webkit-scrollbar {
-    width: 14px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    border: 4px solid rgba(0, 0, 0, 0);
-    background: var(--card-border-color);
-    background-clip: padding-box;
-
-    &:hover {
-      background: var(--card-muted-fg-color);
-      background-clip: padding-box;
-    }
-  }
-`
-
-const GlobalStyle = createGlobalStyle`
-  .media__custom-scrollbar {
-    ${customScrollbar}
-  }
-
-  // @sanity/ui overrides
-
-  // Custom scrollbar on Box (used in Dialogs)
-  div[data-ui="Box"] {
-    ${customScrollbar}
-  }
-
-  // Dialog background color
-  div[data-ui="Dialog"] {
-    background-color: rgba(15, 17, 18, 0.9);
-  }
-
-`
-
-export default GlobalStyle