sanity-plugin-mux-input 2.4.1 → 2.6.0

package/src/components/MuxLogo.tsx

@@ -1,463 +1,42 @@
-import {useId, useMemo} from 'react'
+import {useTheme_v2} from '@sanity/ui'
+import {CSSProperties, useId, useMemo} from 'react'
 
-// Mapping ids to ensure filter refs are unique, otherwise all Logo instances are hidden if the first SVG is hidden, due to how SVGs deal with relative links and ids
-const ids = [
-  'title',
-  'a',
-  'b',
-  'c',
-  'd',
-  'e',
-  'f',
-  'g',
-  'h',
-  'i',
-  'j',
-  'k',
-  'l',
-  'm',
-  'n',
-  'o',
-  'p',
-  'q',
-  'r',
-] as const
 export interface Props {
   height?: number
 }
-export default function MuxLogo({height = 26}) {
+export default function MuxLogo({height = 26}: Props) {
   const id = useId()
-  const [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo<typeof ids>(
-    () => ids.map((field) => `${id}-${field}`) as unknown as typeof ids,
-    [id]
-  )
+  const theme = useTheme_v2()
+  const fillColor = theme.color._dark ? 'white' : 'black'
+  const titleId = useMemo(() => `${id}-title`, [id])
+
+  const pathStyle: CSSProperties = {
+    fillRule: 'nonzero',
+  }
 
   return (
     <svg
       aria-labelledby={titleId}
-      role="img"
+      style={{height: `${height}px`}}
+      viewBox="0 0 1600 500"
+      version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlSpace="preserve"
-      viewBox="92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188"
-      style={{height: `${height}px`}}
     >
-      <title id={titleId}>Mux Logo</title>
-      <defs>
-        <linearGradient
-          id={c}
-          spreadMethod="pad"
-          gradientTransform="matrix(528.38055 0 0 -528.38055 63.801 159.5)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={d}
-          spreadMethod="pad"
-          gradientTransform="matrix(523.66766 0 0 -523.66766 67.897 159.5)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={g}
-          spreadMethod="pad"
-          gradientTransform="rotate(180 296.075 79.75) scale(524.84045)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={i}
-          spreadMethod="pad"
-          gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 159.5)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={j}
-          spreadMethod="pad"
-          gradientTransform="matrix(523.08514 0 0 -523.08514 67.897 224.446)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={k}
-          spreadMethod="pad"
-          gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 94.553)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={l}
-          spreadMethod="pad"
-          gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 159.5)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={m}
-          spreadMethod="pad"
-          gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 94.554)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={p}
-          spreadMethod="pad"
-          gradientTransform="matrix(521.97632 0 0 -521.97632 69.067 191.973)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={q}
-          spreadMethod="pad"
-          gradientTransform="matrix(523.09039 0 0 -523.09039 67.312 191.973)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <linearGradient
-          id={r}
-          spreadMethod="pad"
-          gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 159.5)"
-          gradientUnits="userSpaceOnUse"
-          y2={0}
-          x2={1}
-          y1={0}
-          x1={0}
-        >
-          <stop
-            offset={0}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff4e00',
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopOpacity: 1,
-              stopColor: '#ff1791',
-            }}
-          />
-        </linearGradient>
-        <clipPath id={a} clipPathUnits="userSpaceOnUse">
-          <path d="M0 319h657.706V0H0Z" />
-        </clipPath>
-        <clipPath id={b} clipPathUnits="userSpaceOnUse">
-          <path d="M423.64 242h164.999V77H423.64Z" />
-        </clipPath>
-        <clipPath id={e} clipPathUnits="userSpaceOnUse">
-          <path d="M0 319h657.706V0H0Z" />
-        </clipPath>
-        <clipPath id={f} clipPathUnits="userSpaceOnUse">
-          <path d="M311.3 242h93.031V77H311.3Z" />
-        </clipPath>
-        <clipPath id={h} clipPathUnits="userSpaceOnUse">
-          <path d="M198.96 242h35.106V77H198.96Z" />
-        </clipPath>
-        <clipPath id={n} clipPathUnits="userSpaceOnUse">
-          <path d="M0 319h657.706V0H0Z" />
-        </clipPath>
-        <clipPath id={o} clipPathUnits="userSpaceOnUse">
-          <path d="M69.067 242H169.12V141.947H69.067Z" />
-        </clipPath>
-      </defs>
-      <g clipPath={`url(#${a})`} transform="matrix(1.33333 0 0 -1.33333 0 425.333)">
-        <g
-          style={{
-            opacity: 0.69999701,
-          }}
-          clipPath={`url(#${b})`}
-        >
-          <path
-            style={{
-              fill: `url(#${c})`,
-              stroke: 'none',
-            }}
-            d="M558.674 82.142c6.855-6.855 17.969-6.855 24.824 0 6.854 6.855 6.854 17.969 0 24.823L453.605 236.858c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
-          />
-        </g>
-      </g>
-      <path
-        style={{
-          fill: `url(#${d})`,
-          stroke: 'none',
-        }}
-        d="M558.674 236.858 428.781 106.966c-6.855-6.855-6.855-17.969 0-24.825 6.855-6.854 17.969-6.854 24.823 0l129.894 129.894c6.854 6.855 6.854 17.968 0 24.823A17.498 17.498 0 0 1 571.086 242a17.495 17.495 0 0 1-12.412-5.142"
-        transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
-      />
-      <g clipPath={`url(#${e})`} transform="matrix(1.33333 0 0 -1.33333 0 425.333)">
-        <g
-          style={{
-            opacity: 0.69999701,
-          }}
-          clipPath={`url(#${f})`}
-        >
-          <path
-            style={{
-              fill: `url(#${g})`,
-              stroke: 'none',
-            }}
-            d="M328.853 112.107c22.297 0 40.372 18.075 40.372 40.372v71.315c0 10.054 7.505 18.206 17.554 18.206 10.048 0 17.552-8.152 17.552-18.206v-71.315c0-41.686-33.793-75.479-75.478-75.479-9.694 0-17.553 7.859-17.553 17.554 0 9.694 7.859 17.553 17.553 17.553"
-          />
-        </g>
-        <g
-          style={{
-            opacity: 0.69999701,
-          }}
-          clipPath={`url(#${h})`}
-        >
-          <path
-            style={{
-              fill: `url(#${i})`,
-              stroke: 'none',
-            }}
-            d="M216.513 242c-10.049 0-17.553-8.152-17.553-18.206V95.206c0-10.054 7.504-18.206 17.553-18.206 10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.054-7.505 18.206-17.553 18.206"
-          />
-        </g>
-      </g>
-      <path
-        style={{
-          fill: `url(#${j})`,
-          stroke: 'none',
-        }}
-        d="M369.225 224.447c0-9.694 7.859-17.553 17.553-17.553 9.695 0 17.553 7.859 17.553 17.553s-7.858 17.552-17.553 17.552c-9.694 0-17.553-7.858-17.553-17.552"
-        transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
-      />
-      <path
-        style={{
-          fill: `url(#${k})`,
-          stroke: 'none',
-        }}
-        d="M553.532 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.552-17.554 17.552-9.694 0-17.553-7.858-17.553-17.552"
-        transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
-      />
-      <path
-        style={{
-          fill: `url(#${l})`,
-          stroke: 'none',
-        }}
-        d="M69.067 223.794V95.206C69.067 85.152 76.571 77 86.62 77c10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.055-7.505 18.205-17.553 18.205-10.049 0-17.553-8.15-17.553-18.205"
-        transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
-      />
-      <path
-        style={{
-          fill: `url(#${m})`,
-          stroke: 'none',
-        }}
-        d="M198.96 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.553-17.554 17.553-9.694 0-17.553-7.859-17.553-17.553"
-        transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
-      />
-      <g clipPath={`url(#${n})`} transform="matrix(1.33333 0 0 -1.33333 0 425.333)">
-        <g
-          style={{
-            opacity: 0.69999701,
-          }}
-          clipPath={`url(#${o})`}
-        >
-          <path
-            style={{
-              fill: `url(#${p})`,
-              stroke: 'none',
-            }}
-            d="M139.155 147.088c6.855-6.855 17.969-6.855 24.824 0s6.855 17.969 0 24.824l-64.947 64.946c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
-          />
-        </g>
+      <g id="Layer-1" fill={fillColor}>
+        <path
+          d="M994.287,93.486c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m0,-93.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,68.943 -56.09,125.033 -125.032,125.033c-68.942,-0 -125.03,-56.09 -125.03,-125.033l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,137.853 112.149,250.003 249.999,250.003c137.851,-0 250.001,-112.15 250.001,-250.003l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486"
+          style={pathStyle}
+        />
+        <path
+          d="M1537.51,468.511c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m-275.883,-218.509l-143.33,143.329c-24.402,24.402 -24.402,63.966 0,88.368c24.402,24.402 63.967,24.402 88.369,-0l143.33,-143.329l143.328,143.329c24.402,24.4 63.967,24.402 88.369,-0c24.403,-24.402 24.403,-63.966 0.001,-88.368l-143.33,-143.329l0.001,-0.004l143.329,-143.329c24.402,-24.402 24.402,-63.965 0,-88.367c-24.402,-24.402 -63.967,-24.402 -88.369,-0l-143.329,143.328l-143.329,-143.328c-24.402,-24.401 -63.967,-24.402 -88.369,-0c-24.402,24.402 -24.402,63.965 0,88.367l143.329,143.329l0,0.004Z"
+          style={pathStyle}
+        />
+        <path
+          d="M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729"
+          style={pathStyle}
+        />
       </g>
-      <path
-        style={{
-          fill: `url(#${q})`,
-          stroke: 'none',
-        }}
-        d="m204.101 236.858-64.947-64.946c-6.854-6.855-6.854-17.969 0-24.824 6.856-6.855 17.97-6.855 24.824 0l64.947 64.947c6.855 6.855 6.855 17.968 0 24.823A17.495 17.495 0 0 1 216.513 242a17.498 17.498 0 0 1-12.412-5.142"
-        transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
-      />
-      <path
-        style={{
-          fill: `url(#${r})`,
-          stroke: 'none',
-        }}
-        d="M253.374 223.794v-71.315c0-41.685 33.793-75.479 75.479-75.479 9.695 0 17.553 7.859 17.553 17.554 0 9.694-7.858 17.553-17.553 17.553-22.297 0-40.372 18.075-40.372 40.372v71.315c0 10.055-7.505 18.205-17.554 18.205s-17.553-8.15-17.553-18.205"
-        transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
-      />
     </svg>
   )
 }

package/src/components/PlayerActionsMenu.tsx

@@ -1,5 +1,6 @@
 import {
   EllipsisHorizontalIcon,
+  ImageIcon,
   LockIcon,
   PlugIcon,
   ResetIcon,
@@ -43,6 +44,11 @@ const LockButton = styled(Button)`
   color: white;
 `
 
+// @TODO: add support for audio type (asset._type) when uploading an audio file so we can hide the thumbnail option.
+const isVideoAsset = (asset: VideoAssetDocument) => {
+  return asset._type === 'mux.videoAsset'
+}
+
 function PlayerActionsMenu(
   props: Pick<MuxInputProps, 'onChange' | 'readOnly'> & {
     asset: VideoAssetDocument
@@ -111,6 +117,13 @@ function PlayerActionsMenu(
               text="Browse"
               onClick={() => setDialogState('select-video')}
             />
+            {isVideoAsset(asset) && (
+              <MenuItem
+                icon={ImageIcon}
+                text="Thumbnail"
+                onClick={() => setDialogState('edit-thumbnail')}
+              />
+            )}
             <MenuDivider />
             <MenuItem
               icon={PlugIcon}

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/Uploader.tsx

@@ -7,6 +7,7 @@ import type {SanityClient} from 'sanity'
 import {PatchEvent, set, setIfMissing} from 'sanity'
 
 import {uploadFile, uploadUrl} from '../actions/upload'
+import {DialogStateProvider} from '../context/DialogStateContext'
 import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
 import {isValidUrl} from '../util/asserters'
 import {extractDroppedFiles} from '../util/extractFiles'
@@ -347,21 +348,26 @@ export default function Uploader(props: Props) {
         ref={containerRef}
       >
         {props.asset ? (
-          <Player
-            readOnly={props.readOnly}
-            asset={props.asset}
-            onChange={props.onChange}
-            buttons={
-              <PlayerActionsMenu
-                asset={props.asset}
-                dialogState={props.dialogState}
-                setDialogState={props.setDialogState}
-                onChange={props.onChange}
-                onSelect={handleUpload}
-                readOnly={props.readOnly}
-              />
-            }
-          />
+          <DialogStateProvider
+            dialogState={props.dialogState}
+            setDialogState={props.setDialogState}
+          >
+            <Player
+              readOnly={props.readOnly}
+              asset={props.asset}
+              onChange={props.onChange}
+              buttons={
+                <PlayerActionsMenu
+                  asset={props.asset}
+                  dialogState={props.dialogState}
+                  setDialogState={props.setDialogState}
+                  onChange={props.onChange}
+                  onSelect={handleUpload}
+                  readOnly={props.readOnly}
+                />
+              }
+            />
+          </DialogStateProvider>
         ) : (
           <UploadPlaceholder
             hovering={dragState !== null}