sanity-plugin-mux-input 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-mux-input",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
   "keywords": [
     "sanity",
@@ -61,62 +61,61 @@
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "@mux/mux-video-react": "^0.7.7",
+    "@mux/mux-player-react": "^1.11.4",
     "@mux/upchunk": "^3",
     "@sanity/icons": "^2",
     "@sanity/incompatible-plugin": "^1",
     "@sanity/ui": "^1",
     "@sanity/uuid": "^3",
-    "classnames": "^2.3.2",
     "jsonwebtoken-esm": "^1.0.5",
-    "media-chrome": "^0.21.0",
-    "motion": "^10",
+    "lodash": "^4",
+    "react-rx": "^2.1.3",
     "rxjs": "^7",
     "scroll-into-view-if-needed": "^3",
-    "suspend-react": "^0.0.10",
+    "suspend-react": "^0.1.0",
     "swr": "^2.1.0",
-    "use-device-pixel-ratio": "^1.1.2",
+    "type-fest": "^3.6.1",
     "use-error-boundary": "^2.0.6"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.4",
-    "@commitlint/config-conventional": "^17.4.4",
-    "@sanity/pkg-utils": "^2.2.13",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
+    "@sanity/pkg-utils": "^2.3.10",
     "@sanity/plugin-kit": "^3.1.7",
-    "@sanity/semantic-release-preset": "^4.0.0",
-    "@sanity/vision": "^3.6.0",
-    "@types/react": "^18.0.28",
+    "@sanity/semantic-release-preset": "^4.1.2",
+    "@sanity/vision": "^3.14.5",
+    "@types/react": "^18.2.18",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.0",
-    "next": "^13.2.4",
-    "next-sanity": "^4.1.5",
+    "lint-staged": "^13.2.3",
+    "next": "^13.4.12",
+    "next-sanity": "^4.3.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
-    "prettier-plugin-packagejson": "^2.4.3",
+    "prettier": "^2.8.8",
+    "prettier-plugin-packagejson": "^2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^5.0.0",
-    "sanity": "^3.6.0",
-    "styled-components": "^5.3.9",
-    "type-fest": "^3.6.1",
-    "typescript": "^5.0.2"
+    "sanity": "^3.14.5",
+    "styled-components": "^5.3.11",
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "react": "^18",
+    "react-is": "^18",
     "sanity": "^3",
     "styled-components": "^5.2"
   },

package/src/actions/assets.ts

@@ -1,8 +1,8 @@
 import type {SanityClient} from 'sanity'
 
-import type {MuxAsset} from '../util/types'
+import type {MuxAsset, VideoAssetDocument} from '../util/types'
 
-export function deleteAsset(client: SanityClient, assetId: string) {
+export function deleteAssetOnMux(client: SanityClient, assetId: string) {
   const {dataset} = client.config()
   return client.request<void>({
     url: `/addons/mux/assets/${dataset}/${assetId}`,
@@ -11,6 +11,34 @@ export function deleteAsset(client: SanityClient, assetId: string) {
   })
 }
 
+export async function deleteAsset({
+  client,
+  asset,
+  deleteOnMux,
+}: {
+  client: SanityClient
+  asset: VideoAssetDocument
+  deleteOnMux: boolean
+}) {
+  if (!asset?._id) return true
+
+  try {
+    await client.delete(asset._id)
+  } catch (error) {
+    return 'failed-sanity'
+  }
+
+  if (deleteOnMux && asset?.assetId) {
+    try {
+      await deleteAssetOnMux(client, asset.assetId)
+    } catch (error) {
+      return 'failed-mux'
+    }
+  }
+
+  return true
+}
+
 export function getAsset(client: SanityClient, assetId: string) {
   const {dataset} = client.config()
   return client.request<{data: MuxAsset}>({

package/src/clients/upChunkObservable.ts

@@ -1,4 +1,4 @@
-import * as UpChunk from '@mux/upchunk'
+import {UpChunk} from '@mux/upchunk'
 import {Observable} from 'rxjs'
 
 export function createUpChunkObservable(uuid: string, uploadUrl: string, source: File) {

package/src/components/ConfigureApi.tsx

@@ -108,7 +108,15 @@ function ConfigureApi({secrets, setDialogState}: Props) {
   }, [firstField])
 
   return (
-    <Dialog id={id} onClose={handleClose} header={<Header />} width={0}>
+    <Dialog
+      id={id}
+      onClose={handleClose}
+      header={<Header />}
+      width={1}
+      style={{
+        maxWidth: '550px',
+      }}
+    >
       <Box padding={4} style={{position: 'relative'}}>
         <form onSubmit={handleSubmit} noValidate>
           <Stack space={4}>

package/src/components/FormField.tsx

@@ -18,17 +18,15 @@ function FormField(props: Props) {
       <Flex align="flex-end">
         <Box flex={1} paddingY={2}>
           <Stack space={2}>
-            <Flex>
-              <Text as="label" htmlFor={inputId} weight="semibold" size={1}>
-                {title || <em>Untitled</em>}
-              </Text>
+            <Text as="label" htmlFor={inputId} weight="semibold" size={1}>
+              {title || <em>Untitled</em>}
+            </Text>
 
-              {description && (
-                <Text muted size={1}>
-                  {description}
-                </Text>
-              )}
-            </Flex>
+            {description && (
+              <Text muted size={1}>
+                {description}
+              </Text>
+            )}
           </Stack>
         </Box>
       </Flex>

package/src/components/IconInfo.tsx

@@ -0,0 +1,23 @@
+import {Flex, Text} from '@sanity/ui'
+import React from 'react'
+
+const IconInfo: React.FC<{
+  text: string
+  icon: React.FC
+  size?: number
+  muted?: boolean
+}> = (props) => {
+  const Icon = props.icon
+  return (
+    <Flex gap={2} align="center" padding={1}>
+      <Text size={(props.size || 1) + 1} muted>
+        <Icon />
+      </Text>
+      <Text size={props.size || 1} muted={props.muted}>
+        {props.text}
+      </Text>
+    </Flex>
+  )
+}
+
+export default IconInfo

package/src/components/Input.styled.tsx

@@ -1,13 +1,5 @@
 import {Box, Card, Flex, Spinner, Text} from '@sanity/ui'
 import React from 'react'
-import styled from 'styled-components'
-
-// This container base container ensures everything uses the same aspect ratio, avoids layout shifts and stuff jumping around
-export const AspectRatioCard = styled(Card)`
-  aspect-ratio: 16 / 9;
-  position: relative;
-  width: 100%;
-`
 
 export const InputFallback = () => {
   return (

package/src/components/Input.tsx

@@ -1,3 +1,4 @@
+import {Card} from '@sanity/ui'
 import React, {memo, Suspense} from 'react'
 
 import {useAssetDocumentValues} from '../hooks/useAssetDocumentValues'
@@ -9,7 +10,7 @@ import type {Config, MuxInputProps} from '../util/types'
 import Uploader from './__legacy__Uploader'
 import ConfigureApi from './ConfigureApi'
 import ErrorBoundaryCard from './ErrorBoundaryCard'
-import {AspectRatioCard, InputFallback} from './Input.styled'
+import {InputFallback} from './Input.styled'
 import Onboard from './Onboard'
 
 export interface InputProps extends MuxInputProps {
@@ -35,7 +36,7 @@ const Input = (props: InputProps) => {
   const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading
 
   return (
-    <AspectRatioCard>
+    <Card>
       <ErrorBoundaryCard schemaType={props.schemaType}>
         <Suspense fallback={<InputFallback />}>
           {isLoading ? (
@@ -68,7 +69,7 @@ const Input = (props: InputProps) => {
           )}
         </Suspense>
       </ErrorBoundaryCard>
-    </AspectRatioCard>
+    </Card>
   )
 }
 

package/src/components/InputBrowser.tsx

@@ -11,14 +11,7 @@ export default function InputBrowser({setDialogState, asset, onChange}: Props) {
   const id = `InputBrowser${useId()}`
   const handleClose = useCallback(() => setDialogState(false), [setDialogState])
   return (
-    <Dialog
-      scheme="dark"
-      __unstable_autoFocus
-      header="Select video"
-      id={id}
-      onClose={handleClose}
-      width={2}
-    >
+    <Dialog __unstable_autoFocus header="Select video" id={id} onClose={handleClose} width={2}>
       <SelectAsset asset={asset} onChange={onChange} setDialogState={setDialogState} />
     </Dialog>
   )

package/src/components/Player.styled.tsx

@@ -1,131 +1,10 @@
-import {Card} from '@sanity/ui'
-import {MediaControlBar, MediaPosterImage} from 'media-chrome/dist/react'
-import React, {useEffect, useMemo, useRef, useState} from 'react'
+import {useState} from 'react'
 import styled from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
-import {getPosterSrc} from '../util/getPosterSrc'
 import {getStoryboardSrc} from '../util/getStoryboardSrc'
 import type {VideoAssetDocument} from '../util/types'
 
-export const VideoContainer = styled(Card)`
-  position: relative;
-  min-height: 150px;
-  aspect-ratio: 16 / 9;
-  overflow: hidden;
-  border-radius: 1px;
-  media-airplay-button[media-airplay-unavailable] {
-    display: none;
-  }
-  media-volume-range[media-volume-unavailable] {
-    display: none;
-  }
-  media-pip-button[media-pip-unavailable] {
-    display: none;
-  }
-  media-controller {
-    --media-control-background: transparent;
-    --media-control-hover-background: transparent;
-    --media-range-track-background-color: rgba(255, 255, 255, 0.5);
-    --media-range-track-border-radius: 3px;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-  }
-  media-control-bar {
-    --media-button-icon-width: 18px;
-    --media-preview-time-margin: 0px;
-  }
-  media-control-bar:not([slot]) :is([role='button'], [role='switch'], button) {
-    height: 44px;
-  }
-  .size-extra-small media-control-bar [role='button'],
-  .size-extra-small media-control-bar [role='switch'] {
-    height: auto;
-    padding: 4.4% 3.2%;
-  }
-  .mxp-spacer {
-    flex-grow: 1;
-    height: 100%;
-    background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
-  }
-  media-controller::part(vertical-layer) {
-    transition: background-color 1s;
-  }
-  media-controller:is([media-paused], :not([user-inactive]))::part(vertical-layer) {
-    background-color: rgba(0, 0, 0, 0.6);
-    transition: background-color 0.25s;
-  }
-  .mxp-center-controls {
-    --media-background-color: transparent;
-    --media-button-icon-width: 100%;
-    --media-button-icon-height: auto;
-    pointer-events: none;
-    width: 100%;
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    justify-content: center;
-  }
-  .mxp-center-controls media-play-button {
-    --media-control-background: transparent;
-    --media-control-hover-background: transparent;
-    padding: 0;
-    width: max(27px, min(9%, 90px));
-  }
-  .mxp-center-controls media-seek-backward-button,
-  .mxp-center-controls media-seek-forward-button {
-    --media-control-background: transparent;
-    --media-control-hover-background: transparent;
-    padding: 0;
-    margin: 0 10%;
-    width: min(7%, 70px);
-  }
-  media-loading-indicator {
-    --media-loading-icon-width: 100%;
-    --media-button-icon-height: auto;
-    pointer-events: none;
-    position: absolute;
-    width: min(15%, 150px);
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    justify-content: center;
-  }
-  /* Intentionally don't target the div for transition but the children
- of the div. Prevents messing with media-chrome's autohide feature. */
-  media-loading-indicator + div * {
-    transition: opacity 0.15s;
-    opacity: 1;
-  }
-  media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {
-    opacity: 0;
-    transition-delay: 400ms;
-  }
-  media-volume-range {
-    width: min(100%, 100px);
-  }
-  media-time-display {
-    white-space: nowrap;
-  }
-  :is(media-time-display, media-text-display, media-playback-rate-button) {
-    color: inherit;
-  }
-  media-controller:fullscreen media-control-bar[slot='top-chrome'] {
-    /* Hide menus and buttons that trigger modals when in full-screen */
-    display: none;
-  }
-  video {
-    background: transparent;
-  }
-  media-controller:not(:fullscreen) video {
-    aspect-ratio: 16 / 9;
-  }
-  media-controller:not(:-webkit-full-screen) video {
-    aspect-ratio: 16 / 9;
-  }
-`
-
 export const StyledCenterControls = styled.div`
   && {
     --media-background-color: transparent;
@@ -146,7 +25,10 @@ export const StyledCenterControls = styled.div`
   }
 `
 
-export const TopControls = styled(MediaControlBar)`
+export const TopControls = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
   justify-content: flex-end;
   button {
     height: auto;
@@ -156,27 +38,6 @@ export const TopControls = styled(MediaControlBar)`
 export interface PosterImageProps {
   asset: VideoAssetDocument
 }
-export function PosterImage({asset}: PosterImageProps) {
-  const client = useClient()
-  const ref = useRef<HTMLElement>(null)
-  const src = useMemo(
-    () => getPosterSrc({client, asset, width: 1920, height: 1080}),
-    [client, asset]
-  )
-
-  useEffect(() => {
-    if (ref.current) {
-      const style = document.createElement('style')
-      style.innerHTML = 'img { object-fit: contain; }'
-      if (ref.current?.shadowRoot) {
-        ref.current.shadowRoot.appendChild(style)
-      }
-    }
-  }, [])
-
-  return <MediaPosterImage ref={ref} slot="poster" src={src} />
-}
-
 export interface ThumbnailsMetadataTrackProps {
   asset: VideoAssetDocument
 }

package/src/components/Player.tsx

@@ -1,43 +1,18 @@
-import MuxVideo from '@mux/mux-video-react'
 import {Card, Text} from '@sanity/ui'
-import {
-  MediaControlBar,
-  MediaController,
-  MediaDurationDisplay,
-  MediaFullscreenButton,
-  MediaLoadingIndicator,
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaTimeDisplay,
-  MediaTimeRange,
-} from 'media-chrome/dist/react'
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {useEffect, useMemo, useRef} from 'react'
 
 import {useCancelUpload} from '../hooks/useCancelUpload'
-import {useClient} from '../hooks/useClient'
-import type {DialogState, SetDialogState} from '../hooks/useDialogState'
-import {getVideoSrc} from '../util/getVideoSrc'
 import type {MuxInputProps, VideoAssetDocument} from '../util/types'
-import pluginPkg from './../../package.json'
-import EditThumbnailDialog from './EditThumbnailDialog'
-import {
-  PosterImage,
-  StyledCenterControls,
-  ThumbnailsMetadataTrack,
-  TopControls,
-  VideoContainer,
-} from './Player.styled'
+import {TopControls} from './Player.styled'
 import {UploadProgress} from './UploadProgress'
+import VideoPlayer from './VideoPlayer'
 
 interface Props extends Pick<MuxInputProps, 'onChange' | 'readOnly'> {
   buttons?: React.ReactNode
   asset: VideoAssetDocument
-  dialogState: DialogState
-  setDialogState: SetDialogState
 }
 
-const MuxVideoOld = ({asset, buttons, readOnly, onChange, dialogState, setDialogState}: Props) => {
-  const client = useClient()
+const Player = ({asset, buttons, readOnly, onChange}: Props) => {
   const isLoading = useMemo<boolean | string>(() => {
     if (asset?.status === 'preparing') {
       return 'Preparing the video'
@@ -66,16 +41,8 @@ const MuxVideoOld = ({asset, buttons, readOnly, onChange, dialogState, setDialog
     }
     return false
   }, [asset?.data?.static_renditions?.status])
-  const videoSrc = useMemo(() => asset.playbackId && getVideoSrc({client, asset}), [asset, client])
-  const [error, setError] = useState<MediaError | Error | null>(null)
-  const handleError = useCallback<React.ReactEventHandler<HTMLVideoElement>>(
-    (event) => setError(event.currentTarget.error),
-    []
-  )
   const playRef = useRef<HTMLDivElement>(null)
   const muteRef = useRef<HTMLDivElement>(null)
-  const video = useRef<HTMLVideoElement>(null)
-  const getCurrentTime = useCallback(() => video.current?.currentTime ?? 0, [video])
   const handleCancelUpload = useCancelUpload(asset, onChange)
 
   useEffect(() => {
@@ -99,20 +66,6 @@ const MuxVideoOld = ({asset, buttons, readOnly, onChange, dialogState, setDialog
     }
   }, [asset.data?.errors?.messages, asset?.status, handleCancelUpload])
 
-  const signedToken = useMemo(() => {
-    try {
-      const url = new URL(videoSrc!)
-      return url.searchParams.get('token')
-    } catch {
-      return false
-    }
-  }, [videoSrc])
-
-  if (error) {
-    // @TODO better error handling
-    throw error
-  }
-
   if (!asset || !asset.status) {
     return null
   }
@@ -129,65 +82,26 @@ const MuxVideoOld = ({asset, buttons, readOnly, onChange, dialogState, setDialog
   }
 
   return (
-    <>
-      <VideoContainer shadow={1} tone="transparent" scheme="dark">
-        <MediaController>
-          <MuxVideo
-            playsInline
-            ref={video}
-            playbackId={`${asset.playbackId}${signedToken ? `?token=${signedToken}` : ''}`}
-            onError={handleError}
-            slot="media"
-            preload="metadata"
-            crossOrigin="anonymous"
-            metadata={{
-              player_name: 'Sanity Admin Dashboard',
-              player_version: pluginPkg.version,
-              page_type: 'Preview Player',
-            }}
-          >
-            <ThumbnailsMetadataTrack asset={asset} />
-          </MuxVideo>
-          <PosterImage asset={asset} />
-          <MediaLoadingIndicator slot="centered-chrome" noAutoHide />
-          <StyledCenterControls slot="centered-chrome">
-            <MediaPlayButton />
-          </StyledCenterControls>
-          {buttons && <TopControls slot="top-chrome">{buttons}</TopControls>}
-          <MediaControlBar>
-            <MediaMuteButton />
-            <MediaTimeDisplay />
-            <MediaTimeRange />
-            <MediaDurationDisplay />
-            <MediaFullscreenButton />
-          </MediaControlBar>
-        </MediaController>
-        {isPreparingStaticRenditions && (
-          <Card
-            padding={2}
-            radius={1}
-            style={{
-              background: 'var(--card-fg-color)',
-              position: 'absolute',
-              top: '0.5em',
-              left: '0.5em',
-            }}
-          >
-            <Text size={1} style={{color: 'var(--card-bg-color)'}}>
-              MUX is preparing static renditions, please stand by
-            </Text>
-          </Card>
-        )}
-      </VideoContainer>
-      {dialogState === 'edit-thumbnail' && (
-        <EditThumbnailDialog
-          asset={asset}
-          getCurrentTime={getCurrentTime}
-          setDialogState={setDialogState}
-        />
+    <VideoPlayer asset={asset}>
+      {buttons && <TopControls slot="top-chrome">{buttons}</TopControls>}
+      {isPreparingStaticRenditions && (
+        <Card
+          padding={2}
+          radius={1}
+          style={{
+            background: 'var(--card-fg-color)',
+            position: 'absolute',
+            top: '0.5em',
+            left: '0.5em',
+          }}
+        >
+          <Text size={1} style={{color: 'var(--card-bg-color)'}}>
+            MUX is preparing static renditions, please stand by
+          </Text>
+        </Card>
       )}
-    </>
+    </VideoPlayer>
   )
 }
 
-export default MuxVideoOld
+export default Player

package/src/components/PlayerActionsMenu.tsx

@@ -1,5 +1,4 @@
 import {
-  EditIcon,
   EllipsisVerticalIcon,
   LockIcon,
   PlugIcon,
@@ -88,9 +87,6 @@ function PlayerActionsMenu(props: Props) {
           </LockCard>
         </Tooltip>
       )}
-      {!readOnly && (
-        <Button icon={EditIcon} mode="ghost" onClick={() => setDialogState('edit-thumbnail')} />
-      )}
       <Popover
         content={
           <Menu ref={setMenuRef}>