sanity-plugin-mux-input 3.0.4 → 4.0.0

package/src/components/VideosBrowser.tsx

@@ -1,100 +0,0 @@
-import {SearchIcon} from '@sanity/icons'
-import {Card, Flex, Grid, Inline, Label, Stack, Text, TextInput} from '@sanity/ui'
-import {useMemo, useState} from 'react'
-
-import {DrmPlaybackWarningContextProvider} from '../context/DrmPlaybackWarningContext'
-import useAssets from '../hooks/useAssets'
-import type {PluginConfig, VideoAssetDocument} from '../util/types'
-import ConfigureApi from './ConfigureApi'
-import ImportVideosFromMux from './ImportVideosFromMux'
-import PageSelector from './PageSelector'
-import ResyncMetadata from './ResyncMetadata'
-import {SelectSortOptions} from './SelectSortOptions'
-import SpinnerBox from './SpinnerBox'
-import type {VideoDetailsProps} from './VideoDetails/useVideoDetails'
-import VideoDetails from './VideoDetails/VideoDetails'
-import VideoInBrowser from './VideoInBrowser'
-
-export interface VideosBrowserProps {
-  config: PluginConfig
-  onSelect?: (asset: VideoAssetDocument) => void
-}
-
-export default function VideosBrowser({onSelect, config}: VideosBrowserProps) {
-  const {assets, isLoading, searchQuery, setSearchQuery, setSort, sort} = useAssets()
-  const [page, setPage] = useState<number>(0)
-  const pageLimit = 20
-  const pageTotal = Math.floor(assets.length / pageLimit) + 1
-  const [editedAsset, setEditedAsset] = useState<VideoDetailsProps['asset'] | null>(null)
-  const freshEditedAsset = useMemo(
-    () => assets.find((a) => a._id === editedAsset?._id) || editedAsset,
-    [editedAsset, assets]
-  )
-
-  const pageStart = page * pageLimit
-  const pageEnd = pageStart + pageLimit
-
-  const placement = onSelect ? 'input' : 'tool'
-  return (
-    <DrmPlaybackWarningContextProvider config={config}>
-      <Stack padding={4} space={4} style={{minHeight: '50vh'}}>
-        <Flex justify="space-between" align="center">
-          <Flex align="center" gap={3}>
-            <TextInput
-              value={searchQuery}
-              icon={SearchIcon}
-              onInput={(e: React.FormEvent<HTMLInputElement>) =>
-                setSearchQuery(e.currentTarget.value)
-              }
-              placeholder="Search videos"
-            />
-            <SelectSortOptions setSort={setSort} sort={sort} />
-            <PageSelector page={page} setPage={setPage} total={pageTotal} />
-          </Flex>
-          {placement === 'tool' && (
-            <Inline space={2}>
-              <ImportVideosFromMux />
-              <ResyncMetadata />
-              <ConfigureApi />
-            </Inline>
-          )}
-        </Flex>
-        <Stack space={3}>
-          {assets?.length > 0 && (
-            <Label muted>
-              {assets.length} video{assets.length > 1 ? 's' : null}{' '}
-              {searchQuery ? `matching "${searchQuery}"` : 'found'}
-            </Label>
-          )}
-          <Grid
-            gap={2}
-            style={{
-              gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
-            }}
-          >
-            {assets.slice(pageStart, pageEnd).map((asset) => (
-              <VideoInBrowser
-                key={asset._id}
-                asset={asset}
-                onEdit={setEditedAsset}
-                onSelect={onSelect}
-              />
-            ))}
-          </Grid>
-        </Stack>
-        {isLoading && <SpinnerBox />}
-
-        {!isLoading && assets.length === 0 && (
-          <Card marginY={4} paddingX={4} paddingY={6} border radius={2} tone="transparent">
-            <Text align="center" muted size={3}>
-              {searchQuery ? `No videos found for "${searchQuery}"` : 'No videos in this dataset'}
-            </Text>
-          </Card>
-        )}
-      </Stack>
-      {freshEditedAsset && (
-        <VideoDetails closeDialog={() => setEditedAsset(null)} asset={freshEditedAsset} />
-      )}
-    </DrmPlaybackWarningContextProvider>
-  )
-}

package/src/components/documentPreview/DocumentPreview.tsx

@@ -1,83 +0,0 @@
-// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/paneItem/PaneItem.tsx
-
-import {DocumentIcon} from '@sanity/icons'
-import type {PropsWithChildren} from 'react'
-import React, {useMemo} from 'react'
-import type {CollatedHit, FIXME, SanityDocument, SchemaType} from 'sanity'
-import {PreviewCard, useDocumentPresence, useDocumentPreviewStore, useSchema} from 'sanity'
-import {IntentLink} from 'sanity/router'
-
-import {MissingSchemaType} from './MissingSchemaType'
-import {PaneItemPreview} from './PaneItemPreview'
-
-interface DocumentPreviewProps {
-  schemaType?: SchemaType
-  documentPair: CollatedHit<SanityDocument>
-}
-
-/**
- * Return `false` if we explicitly disable the icon.
- * Otherwise return the passed icon or the schema type icon as a backup.
- */
-export function getIconWithFallback(
-  icon: React.ComponentType<any> | false | undefined,
-  schemaType: SchemaType | undefined,
-  defaultIcon: React.ComponentType<any>
-): React.ComponentType<any> | false {
-  if (icon === false) {
-    return false
-  }
-
-  return icon || ((schemaType && schemaType.icon) as any) || defaultIcon || false
-}
-
-function DocumentPreviewLink(props: DocumentPreviewProps) {
-  return (linkProps: PropsWithChildren) => (
-    <IntentLink intent="edit" params={{id: props.documentPair.id}}>
-      {linkProps.children}
-    </IntentLink>
-  )
-}
-
-export function DocumentPreview(props: DocumentPreviewProps) {
-  const {schemaType, documentPair} = props
-  const doc = documentPair?.draft || documentPair?.published
-  const id = documentPair.id || ''
-  const documentPreviewStore = useDocumentPreviewStore()
-  const schema = useSchema()
-  const documentPresence = useDocumentPresence(id)
-  const hasSchemaType = Boolean(schemaType && schemaType.name && schema.get(schemaType.name))
-
-  const PreviewComponent = useMemo(() => {
-    if (!doc) return null
-
-    if (!schemaType || !hasSchemaType) {
-      return <MissingSchemaType value={doc as SanityDocument} />
-    }
-
-    return (
-      <PaneItemPreview
-        documentPreviewStore={documentPreviewStore}
-        icon={getIconWithFallback(undefined, schemaType, DocumentIcon)}
-        schemaType={schemaType}
-        layout="default"
-        value={doc}
-        presence={documentPresence}
-      />
-    )
-  }, [hasSchemaType, schemaType, documentPresence, doc, documentPreviewStore])
-
-  return (
-    <PreviewCard
-      __unstable_focusRing
-      as={DocumentPreviewLink(props) as FIXME}
-      data-as="a"
-      data-ui="PaneItem"
-      padding={2}
-      radius={2}
-      tone="inherit"
-    >
-      {PreviewComponent}
-    </PreviewCard>
-  )
-}

package/src/components/documentPreview/DraftStatus.tsx

@@ -1,34 +0,0 @@
-// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/DraftStatus.tsx
-import {EditIcon} from '@sanity/icons'
-import {Box, Text, Tooltip} from '@sanity/ui'
-import type {PreviewValue, SanityDocument} from 'sanity'
-import {TextWithTone} from 'sanity'
-
-import {TimeAgo} from './TimeAgo'
-
-export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
-  const {document} = props
-  const updatedAt = document && '_updatedAt' in document && document._updatedAt
-
-  return (
-    <Tooltip
-      animate
-      portal
-      content={
-        <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <>Edited {updatedAt && <TimeAgo time={updatedAt} />}</>
-            ) : (
-              <>No unpublished edits</>
-            )}
-          </Text>
-        </Box>
-      }
-    >
-      <TextWithTone tone="caution" dimmed={!document} muted={!document} size={1}>
-        <EditIcon />
-      </TextWithTone>
-    </Tooltip>
-  )
-}

package/src/components/documentPreview/MissingSchemaType.tsx

@@ -1,32 +0,0 @@
-// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/MissingSchemaType.tsx
-import {WarningOutlineIcon} from '@sanity/icons'
-import type {SanityDocument} from 'sanity'
-import type {GeneralPreviewLayoutKey} from 'sanity'
-import {SanityDefaultPreview} from 'sanity'
-
-export interface MissingSchemaTypeProps {
-  layout?: GeneralPreviewLayoutKey
-  value: SanityDocument
-}
-
-const getUnknownTypeFallback = (id: string, typeName: string) => ({
-  title: (
-    <em>
-      No schema found for type <code>{typeName}</code>
-    </em>
-  ),
-  subtitle: (
-    <em>
-      Document: <code>{id}</code>
-    </em>
-  ),
-  media: () => <WarningOutlineIcon />,
-})
-
-export function MissingSchemaType(props: MissingSchemaTypeProps) {
-  const {layout, value} = props
-
-  return (
-    <SanityDefaultPreview {...getUnknownTypeFallback(value._id, value._type)} layout={layout} />
-  )
-}

package/src/components/documentPreview/PaneItemPreview.tsx

@@ -1,74 +0,0 @@
-// Adapted from:
-// https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
-import {Inline} from '@sanity/ui'
-import {isNumber, isString} from 'lodash'
-import {isValidElement, useMemo} from 'react'
-import {useObservable} from 'react-rx'
-import type {SanityDocument, SchemaType} from 'sanity'
-import type {PreviewValue} from 'sanity'
-import {
-  type DocumentPresence,
-  DocumentPreviewPresence,
-  type DocumentPreviewStore,
-  type GeneralPreviewLayoutKey,
-  getPreviewStateObservable,
-  getPreviewValueWithFallback,
-  isRecord,
-  SanityDefaultPreview,
-} from 'sanity'
-
-import {DraftStatus} from './DraftStatus'
-import {PublishedStatus} from './PublishedStatus'
-
-export interface PaneItemPreviewState {
-  isLoading?: boolean
-  draft?: PreviewValue | Partial<SanityDocument> | null
-  published?: PreviewValue | Partial<SanityDocument> | null
-}
-
-export interface PaneItemPreviewProps {
-  documentPreviewStore: DocumentPreviewStore
-  icon: React.ComponentType | false
-  layout: GeneralPreviewLayoutKey
-  presence?: DocumentPresence[]
-  schemaType: SchemaType
-  value: SanityDocument
-}
-
-export function PaneItemPreview(props: PaneItemPreviewProps) {
-  const {icon, layout, presence, schemaType, value} = props
-  const title =
-    (isRecord(value.title) && isValidElement(value.title)) ||
-    isString(value.title) ||
-    isNumber(value.title)
-      ? value.title
-      : null
-
-  const observable = useMemo(
-    () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id),
-    [props.documentPreviewStore, schemaType, value._id]
-  )
-  const {snapshot, original, isLoading} = useObservable(observable, {
-    isLoading: true,
-    snapshot: null,
-    original: null,
-  })
-
-  const status = isLoading ? null : (
-    <Inline space={4}>
-      {presence && presence.length > 0 && <DocumentPreviewPresence presence={presence} />}
-      <PublishedStatus document={original} />
-      <DraftStatus document={snapshot} />
-    </Inline>
-  )
-
-  return (
-    <SanityDefaultPreview
-      {...(getPreviewValueWithFallback({snapshot, original, fallback: {title}}) as any)}
-      isPlaceholder={isLoading}
-      icon={icon}
-      layout={layout}
-      status={status}
-    />
-  )
-}

package/src/components/documentPreview/PublishedStatus.tsx

@@ -1,35 +0,0 @@
-// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/PublishedStatus.tsx
-
-import {PublishIcon} from '@sanity/icons'
-import {Box, Text, Tooltip} from '@sanity/ui'
-import type {PreviewValue, SanityDocument} from 'sanity'
-import {TextWithTone} from 'sanity'
-
-import {TimeAgo} from './TimeAgo'
-
-export function PublishedStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
-  const {document} = props
-  const updatedAt = document && '_updatedAt' in document && document._updatedAt
-
-  return (
-    <Tooltip
-      animate
-      portal
-      content={
-        <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <>Published {updatedAt && <TimeAgo time={updatedAt} />}</>
-            ) : (
-              <>Not published</>
-            )}
-          </Text>
-        </Box>
-      }
-    >
-      <TextWithTone tone="positive" dimmed={!document} muted={!document} size={1}>
-        <PublishIcon />
-      </TextWithTone>
-    </Tooltip>
-  )
-}

package/src/components/documentPreview/TimeAgo.tsx

@@ -1,12 +0,0 @@
-// Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/TimeAgo.tsx
-import {useTimeAgo} from 'sanity'
-
-export interface TimeAgoProps {
-  time: string | Date
-}
-
-export function TimeAgo({time}: TimeAgoProps) {
-  const timeAgo = useTimeAgo(time)
-
-  return <span title={timeAgo}>{timeAgo} ago</span>
-}

package/src/components/documentPreview/paneItemTypes.ts

@@ -1,7 +0,0 @@
-import type {PreviewValue, SanityDocument} from 'sanity'
-
-export interface PaneItemPreviewState {
-  isLoading?: boolean
-  draft?: PreviewValue | Partial<SanityDocument> | null
-  published?: PreviewValue | Partial<SanityDocument> | null
-}

package/src/components/icons/Audio.tsx

@@ -1,13 +0,0 @@
-import type {SVGProps} from 'react'
-
-export function AudioIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
-      <path
-        fill="currentColor"
-        style={{opacity: '0.65'}}
-        d="M10.75 19q.95 0 1.6-.65t.65-1.6V13h3v-2h-4v3.875q-.275-.2-.587-.288t-.663-.087q-.95 0-1.6.65t-.65 1.6t.65 1.6t1.6.65M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z"
-      />
-    </svg>
-  )
-}

package/src/components/icons/Resolution.tsx

@@ -1,12 +0,0 @@
-import type {SVGProps} from 'react'
-
-export function ResolutionIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
-      <path
-        fill="currentColor"
-        d="M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
-      />
-    </svg>
-  )
-}

package/src/components/icons/StopWatch.tsx

@@ -1,20 +0,0 @@
-import type {SVGProps} from 'react'
-
-export function StopWatchIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
-      viewBox="0 0 512 512"
-      {...props}
-    >
-      <path d="M232 306.667h48V176h-48v130.667z" fill="currentColor" />
-      <path
-        d="M407.67 170.271l30.786-30.786-33.942-33.941-30.785 30.786C341.217 111.057 300.369 96 256 96 149.961 96 64 181.961 64 288s85.961 192 192 192 192-85.961 192-192c0-44.369-15.057-85.217-40.33-117.729zm-45.604 223.795C333.734 422.398 296.066 438 256 438s-77.735-15.602-106.066-43.934C121.602 365.735 106 328.066 106 288s15.602-77.735 43.934-106.066C178.265 153.602 215.934 138 256 138s77.734 15.602 106.066 43.934C390.398 210.265 406 247.934 406 288s-15.602 77.735-43.934 106.066z"
-        fill="currentColor"
-      />
-      <path d="M192 32h128v48H192z" fill="currentColor" />
-    </svg>
-  )
-}

package/src/components/icons/ToolIcon.tsx

@@ -1,19 +0,0 @@
-/**
- * Icon of a monitor with a play button.
- * Credits: material design icons & react-icons
- */
-const ToolIcon = () => (
-  <svg
-    stroke="currentColor"
-    fill="currentColor"
-    strokeWidth="0"
-    viewBox="0 0 24 24"
-    height="1em"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z" />
-  </svg>
-)
-
-export default ToolIcon

package/src/components/uploadConfiguration/PlaybackPolicy.tsx

@@ -1,133 +0,0 @@
-import {Code, Grid, Text} from '@sanity/ui'
-import {ActionDispatch} from 'react'
-
-import {Secrets, UploadConfig} from '../../util/types'
-import {UploadConfigurationStateAction} from '../UploadConfiguration'
-import PlaybackPolicyOption from './PlaybackPolicyOption'
-import PlaybackPolicyWarning from './PlaybackPolicyWarning'
-
-export default function PlaybackPolicy({
-  id,
-  config,
-  secrets,
-  dispatch,
-}: {
-  id: string
-  config: UploadConfig
-  secrets: Secrets
-  dispatch: ActionDispatch<[action: UploadConfigurationStateAction]>
-}) {
-  const noPolicySelected = !(config.public_policy || config.signed_policy || config.drm_policy)
-  const drmPolicyDisabled = !secrets.drmConfigId
-  return (
-    <Grid gap={3}>
-      <Text weight="bold">Advanced Playback Policies</Text>
-      <PlaybackPolicyOption
-        id={`${id}--public`}
-        checked={config.public_policy}
-        optionName="Public"
-        description={
-          <>
-            <Text size={2} muted>
-              Playback IDs are accessible by constructing an HLS URL like
-            </Text>
-            <Code>{'https://stream.mux.com/{PLAYBACK_ID}'}</Code>
-          </>
-        }
-        dispatch={dispatch}
-        action="public_policy"
-      />
-      {secrets.enableSignedUrls && (
-        <PlaybackPolicyOption
-          id={`${id}--signed`}
-          checked={config.signed_policy}
-          optionName="Signed"
-          description={
-            <>
-              <Text size={2} muted>
-                Playback IDs should be used with tokens
-              </Text>
-              <Code>{'https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}'}</Code>
-              <Text size={2} muted>
-                See{' '}
-                <a
-                  href="https://www.mux.com/docs/guides/secure-video-playback"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Secure video playback
-                </a>{' '}
-                for details about creating tokens.
-              </Text>
-            </>
-          }
-          // See Secure video playback for details about creating tokens."
-          dispatch={dispatch}
-          action="signed_policy"
-        />
-      )}
-      {drmPolicyDisabled ? (
-        <PlaybackPolicyOption
-          id={`${id}--drm`}
-          checked={false}
-          optionName="DRM - Disabled"
-          description={
-            <>
-              <Text size={2} muted>
-                To enable DRM add your DRM Configuration Id to your plugin configuration in the API
-                Credentials view.{' '}
-                <a
-                  href="https://www.mux.com/support/human"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Contact us
-                </a>{' '}
-                to get started using DRM.
-              </Text>
-            </>
-          }
-          dispatch={dispatch}
-          disabled
-        />
-      ) : (
-        <PlaybackPolicyOption
-          id={`${id}--drm`}
-          checked={config.drm_policy}
-          optionName="DRM"
-          description={
-            <>
-              <Text size={2} muted>
-                Playback IDs should be used with tokens as with Signed playback, but require extra
-                configuration.
-              </Text>
-              <Code>{'https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}'}</Code>
-              <Text size={2} muted>
-                See{' '}
-                <a
-                  href="https://www.mux.com/docs/guides/protect-videos-with-drm#play-drm-protected-videos"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Protect videos with DRM
-                </a>{' '}
-                for details about configuring your player for DRM playback and{' '}
-                <a
-                  href="https://www.mux.com/docs/guides/secure-video-playback"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Secure video playback
-                </a>{' '}
-                for details about creating tokens.
-              </Text>
-            </>
-          }
-          dispatch={dispatch}
-          action="drm_policy"
-        />
-      )}
-      {noPolicySelected && <PlaybackPolicyWarning />}
-    </Grid>
-  )
-}

package/src/components/uploadConfiguration/PlaybackPolicyOption.tsx

@@ -1,76 +0,0 @@
-import {Checkbox, Flex, Grid, Text} from '@sanity/ui'
-import {ActionDispatch, CSSProperties, ReactNode, useState} from 'react'
-
-import {UploadConfigurationStateAction} from '../UploadConfiguration'
-
-export default function PlaybackPolicyOption({
-  id,
-  checked,
-  optionName,
-  description,
-  dispatch,
-  action,
-  disabled,
-}: {
-  id: string
-  checked: boolean
-  optionName: string
-  description: string | ReactNode
-  dispatch: ActionDispatch<[action: UploadConfigurationStateAction]>
-  action?: 'public_policy' | 'signed_policy' | 'drm_policy'
-  disabled?: boolean
-}) {
-  const [scale, setScale] = useState(1)
-
-  const boxStyle: CSSProperties = {
-    outline: '0.01rem solid grey',
-    transform: `scale(${scale})`,
-    transition: 'transform 0.1s ease-in-out',
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    borderRadius: '0.25rem',
-  }
-
-  const triggerAnimation = () => {
-    setScale(0.98)
-    setTimeout(() => {
-      setScale(1)
-    }, 100)
-  }
-
-  const handleBoxClick = () => {
-    if (!action) return
-    triggerAnimation()
-    dispatch({
-      action,
-      value: !checked,
-    })
-  }
-
-  const descriptionJsx =
-    typeof description === 'string' ? (
-      <Text size={2} muted>
-        {description}
-      </Text>
-    ) : (
-      description
-    )
-  return (
-    <label>
-      <Flex gap={3} padding={3} style={boxStyle}>
-        <Checkbox
-          id={id}
-          required
-          checked={checked}
-          onChange={handleBoxClick}
-          disabled={disabled}
-        />
-        <Grid gap={3}>
-          <Text size={3} weight="bold">
-            {optionName}
-          </Text>
-          {descriptionJsx}
-        </Grid>
-      </Flex>
-    </label>
-  )
-}