sanity-plugin-mux-input 2.5.0 → 2.6.0

package/src/components/UploadConfiguration.tsx

@@ -19,6 +19,7 @@ import {
   type UploadTextTrack,
 } from '../util/types'
 import TextTracksEditor, {type TrackAction} from './TextTracksEditor'
+import PlaybackPolicy from './uploadConfiguration/PlaybackPolicy'
 import type {StagedUpload} from './Uploader'
 
 export type UploadConfigurationStateAction =
@@ -26,7 +27,8 @@ export type UploadConfigurationStateAction =
   | {action: 'max_resolution_tier'; value: UploadConfig['max_resolution_tier']}
   | {action: 'mp4_support'; value: UploadConfig['mp4_support']}
   | {action: 'normalize_audio'; value: UploadConfig['normalize_audio']}
-  | {action: 'signed'; value: UploadConfig['signed']}
+  | {action: 'signed_policy'; value: UploadConfig['signed_policy']}
+  | {action: 'public_policy'; value: UploadConfig['public_policy']}
   | TrackAction
 
 const ENCODING_OPTIONS = [
@@ -84,6 +86,8 @@ export default function UploadConfiguration({
               mp4_support: 'none',
               max_resolution_tier: '1080p',
               text_tracks: prev.text_tracks?.filter(({type}) => type !== 'autogenerated'),
+              public_policy: true,
+              signed_policy: false,
             })
             // If encoding tier switches to smart, add back in default smart features
           }
@@ -97,7 +101,9 @@ export default function UploadConfiguration({
         case 'mp4_support':
         case 'max_resolution_tier':
         case 'normalize_audio':
-        case 'signed':
+        case 'signed_policy':
+          return Object.assign({}, prev, {[action.action]: action.value})
+        case 'public_policy':
           return Object.assign({}, prev, {[action.action]: action.value})
         // Updating individual tracks
         case 'track': {
@@ -135,7 +141,8 @@ export default function UploadConfiguration({
       encoding_tier: pluginConfig.encoding_tier,
       max_resolution_tier: pluginConfig.max_resolution_tier,
       mp4_support: pluginConfig.mp4_support,
-      signed: secrets.enableSignedUrls && pluginConfig.defaultSigned,
+      signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
+      public_policy: true,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks,
     } as UploadConfig
@@ -279,31 +286,13 @@ export default function UploadConfiguration({
               </FormField>
             )}
 
-            {(secrets.enableSignedUrls || config.encoding_tier === 'smart') && (
+            {config.encoding_tier === 'smart' && (
               <FormField title="Additional Configuration">
                 <Stack space={2}>
-                  {secrets.enableSignedUrls && (
-                    <Flex align="center" gap={2}>
-                      <Checkbox
-                        id={`${id}--signed`}
-                        style={{display: 'block'}}
-                        name="signed"
-                        required
-                        checked={config.signed}
-                        onChange={(e) =>
-                          dispatch({
-                            action: 'signed',
-                            value: e.currentTarget.checked,
-                          })
-                        }
-                      />
-                      <Text>
-                        <label htmlFor={`${id}--signed`}>Signed playback URL</label>
-                      </Text>
-                    </Flex>
-                  )}
+                  <PlaybackPolicy id={id} config={config} secrets={secrets} dispatch={dispatch} />
+
                   {config.encoding_tier === 'smart' && (
-                    <Flex align="center" gap={2}>
+                    <Flex align="center" gap={2} padding={[0, 2]}>
                       <Checkbox
                         id={`${id}--mp4_support`}
                         style={{display: 'block'}}
@@ -340,6 +329,9 @@ export default function UploadConfiguration({
 
         <Box marginTop={4}>
           <Button
+            disabled={
+              config.encoding_tier === 'smart' && !config.public_policy && !config.signed_policy
+            }
             icon={UploadIcon}
             text="Upload"
             tone="positive"
@@ -351,6 +343,17 @@ export default function UploadConfiguration({
   )
 }
 
+function setPlaybackPolicy(config: UploadConfig): MuxNewAssetSettings['playback_policy'] {
+  const playback_policy: MuxNewAssetSettings['playback_policy'] = []
+  if (config.public_policy) {
+    playback_policy.push('public')
+  }
+  if (config.signed_policy) {
+    playback_policy.push('signed')
+  }
+  return playback_policy
+}
+
 function formatUploadConfig(config: UploadConfig): MuxNewAssetSettings {
   const generated_subtitles = config.text_tracks
     .filter<AutogeneratedTextTrack>(isAutogeneratedTrack)
@@ -383,7 +386,7 @@ function formatUploadConfig(config: UploadConfig): MuxNewAssetSettings {
       ),
     ],
     mp4_support: config.mp4_support,
-    playback_policy: config.signed ? ['public', 'signed'] : ['public'],
+    playback_policy: setPlaybackPolicy(config),
     max_resolution_tier: config.max_resolution_tier,
     encoding_tier: config.encoding_tier,
     normalize_audio: config.normalize_audio,

package/src/components/VideoDetails/useVideoDetails.ts

@@ -1,5 +1,5 @@
 import {useToast} from '@sanity/ui'
-import {useState} from 'react'
+import {useMemo, useState} from 'react'
 import {useDocumentStore} from 'sanity'
 
 import {useClient} from '../../hooks/useClient'
@@ -17,10 +17,10 @@ export default function useVideoDetails(props: VideoDetailsProps) {
   const documentStore = useDocumentStore()
   const toast = useToast()
   const client = useClient()
-  const [references, referencesLoading] = useDocReferences({
-    documentStore,
-    id: props.asset._id as string,
-  })
+
+  const [references, referencesLoading] = useDocReferences(
+    useMemo(() => ({documentStore, id: props.asset._id}), [documentStore, props.asset._id])
+  )
 
   const [originalAsset, setOriginalAsset] = useState(() => props.asset)
   const [filename, setFilename] = useState(props.asset.filename)

package/src/components/uploadConfiguration/PlaybackPolicy.tsx

@@ -0,0 +1,44 @@
+import {Grid, Text} from '@sanity/ui'
+
+import {Secrets, UploadConfig} from '../../util/types'
+import PlaybackPolicyOption from './PlaybackPolicyOption'
+import PlaybackPolicyWarning from './PlaybackPolicyWarning'
+
+export default function PlaybackPolicy({
+  id,
+  config,
+  secrets,
+  dispatch,
+}: {
+  id: string
+  config: UploadConfig
+  secrets: Secrets
+  dispatch: any
+}) {
+  const noPolicySelected = !(config.public_policy || config.signed_policy)
+  return (
+    <Grid gap={3}>
+      <Text weight="bold">Advanced Playback Policies</Text>
+      <PlaybackPolicyOption
+        id={`${id}--public`}
+        checked={config.public_policy}
+        optionName="Public"
+        description="Playback IDs are accessible by constructing an HLS URL like https://stream.mux.com/{PLAYBACK_ID}"
+        dispatch={dispatch}
+        action="public_policy"
+      />
+      {secrets.enableSignedUrls && (
+        <PlaybackPolicyOption
+          id={`${id}--signed`}
+          checked={config.signed_policy}
+          optionName="Signed"
+          description="Playback IDs should be used with tokens https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}. 
+                // See Secure video playback for details about creating tokens."
+          dispatch={dispatch}
+          action="signed_policy"
+        />
+      )}
+      {noPolicySelected && <PlaybackPolicyWarning />}
+    </Grid>
+  )
+}

package/src/components/uploadConfiguration/PlaybackPolicyOption.tsx

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

package/src/components/uploadConfiguration/PlaybackPolicyWarning.tsx

@@ -0,0 +1,29 @@
+import {WarningFilledIcon} from '@sanity/icons'
+import {Box, Flex, Text} from '@sanity/ui'
+import {CSSProperties} from 'react'
+
+export default function PlaybackPolicyWarning() {
+  const textStyle: CSSProperties = {
+    color: '#13141A',
+    fontWeight: 500,
+  }
+
+  const boxStyle: CSSProperties = {
+    outline: '0.01rem solid grey',
+    backgroundColor: '#979cb0',
+    borderRadius: '0.5rem',
+    width: 'max-content',
+    color: '#13141A',
+  }
+
+  return (
+    <Box padding={2} style={boxStyle}>
+      <Flex align="center" gap={2}>
+        <WarningFilledIcon />
+        <Text size={1} style={textStyle}>
+          Please select at least one Playback Policy
+        </Text>
+      </Flex>
+    </Box>
+  )
+}

package/src/hooks/useAssets.ts

@@ -1,6 +1,5 @@
 import {useMemo, useState} from 'react'
-import {useObservable} from 'react-rx'
-import {collate, DocumentStore, useDocumentStore} from 'sanity'
+import {collate, createHookFromObservableFactory, DocumentStore, useDocumentStore} from 'sanity'
 
 import {SANITY_API_VERSION} from '../hooks/useClient'
 import {createSearchFilter} from '../util/createSearchFilter'
@@ -15,49 +14,47 @@ export const ASSET_SORT_OPTIONS = {
 
 export type SortOption = keyof typeof ASSET_SORT_OPTIONS
 
-const useAssetDocuments = ({
-  documentStore,
-  sort,
-  searchQuery,
-}: {
-  documentStore: DocumentStore
-  sort: SortOption
-  searchQuery: string
-}): VideoAssetDocument[] | undefined => {
-  const memoizedObservable = useMemo(() => {
-    const search = createSearchFilter(searchQuery)
-    const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
-    const sortFragment = ASSET_SORT_OPTIONS[sort].groq
-    return documentStore.listenQuery(
-      /* groq */ `*[${filter}] | order(${sortFragment})`,
-      search.params,
-      {
-        apiVersion: SANITY_API_VERSION,
-      }
-    )
-  }, [documentStore, sort, searchQuery])
+const useAssetDocuments = createHookFromObservableFactory<
+  VideoAssetDocument[],
+  {
+    documentStore: DocumentStore
+    sort: SortOption
+    searchQuery: string
+  }
+>(({documentStore, sort, searchQuery}) => {
+  const search = createSearchFilter(searchQuery)
+  const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
 
-  return useObservable(memoizedObservable, undefined)
-}
+  const sortFragment = ASSET_SORT_OPTIONS[sort].groq
+  return documentStore.listenQuery(
+    /* groq */ `*[${filter}] | order(${sortFragment})`,
+    search.params,
+    {
+      apiVersion: SANITY_API_VERSION,
+    }
+  )
+})
 
 export default function useAssets() {
   const documentStore = useDocumentStore()
   const [sort, setSort] = useState<SortOption>('createdDesc')
   const [searchQuery, setSearchQuery] = useState('')
 
-  const assetDocumentsObservable = useAssetDocuments({documentStore, sort, searchQuery})
-  const isLoading = assetDocumentsObservable === undefined
+  const [assetDocuments = [], isLoading] = useAssetDocuments(
+    useMemo(() => ({documentStore, sort, searchQuery}), [documentStore, sort, searchQuery])
+  )
+
   const assets = useMemo(
     () =>
       // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-      collate<VideoAssetDocument>(assetDocumentsObservable ?? []).map(
+      collate<VideoAssetDocument>(assetDocuments).map(
         (collated) =>
           ({
             ...(collated.draft || collated.published || {}),
             _id: collated.id,
           }) as VideoAssetDocument
       ),
-    [assetDocumentsObservable]
+    [assetDocuments]
   )
 
   return {

package/src/util/types.ts

@@ -163,7 +163,8 @@ export interface UploadConfig
     'encoding_tier' | 'max_resolution_tier' | 'mp4_support' | 'normalize_audio'
   > {
   text_tracks: UploadTextTrack[]
-  signed: boolean
+  signed_policy: boolean
+  public_policy: boolean
 }
 
 /**
@@ -208,7 +209,7 @@ export interface MuxNewAssetSettings
   }[]
 
   /** An array of playback policy names that you want applied to this asset and available through playback_ids. */
-  playback_policy: ('public' | 'signed')[]
+  playback_policy: ('public' | 'signed' | 'drm')[]
 
   /** Arbitrary user-supplied metadata that will be included in the asset details and related webhooks.  */
   passthrough?: string