Switch to paused rather than playing to control videos

packages/next/src/NextVisual.tsx

@@ -29,7 +29,7 @@ export default function NextVisual(
     priority,
     sizes,
     imageLoader,
-    playing,
+    paused,
     alt,
     className = '',
     style = {},
@@ -69,7 +69,7 @@ export default function NextVisual(
         position,
         priority,
         noPoster: !!image, // Use `image` as poster frame
-        playing,
+        paused,
       }} /> }
 
     </VisualWrapper>

packages/next/src/types/nextVisualTypes.ts

@@ -17,7 +17,7 @@ export type NextVisualProps = {
   sizes?: string
   imageLoader?: Function
 
-  playing?: boolean
+  paused?: boolean
 
   alt: string
 

packages/react/cypress/component/LazyVideo.cy.tsx

@@ -4,16 +4,16 @@ import { LazyVideo } from '../../src'
 // Make an instance of LazyVideo that can be controlled
 const Player = function({ autoplay }: any) {
 
-  const [playing, setPlaying] = useState(autoplay)
+  const [paused, setPaused] = useState(!autoplay)
 
   return (<>
     <LazyVideo
       src='https://placehold.co/300x200.mp4'
       alt=''
-      playing={ playing }/>
+      paused={ paused }/>
     <div style={{ position: 'relative' }}>
-      <button onClick={() => setPlaying(true)}>Play</button>
-      <button onClick={() => setPlaying(false)}>Pause</button>
+      <button onClick={() => setPaused(false)}>Play</button>
+      <button onClick={() => setPaused(true)}>Pause</button>
     </div>
   </>)
 }

packages/react/cypress/support/commands.ts

@@ -8,7 +8,7 @@ Cypress.Commands.add('isPlaying',
   cy.wrap(subject).should('have.prop', 'paused', false)
 })
 
-// Check that a video is playing
+// Check that a video is paused
 // https://glebbahmutov.com/blog/test-video-play/
 Cypress.Commands.add('isPaused',
   { prevSubject: true },

packages/react/src/LazyVideo.tsx

@@ -9,7 +9,7 @@ import { fillStyles, transparentGif } from './lib/styles'
 
 // An video rendered within a Visual that supports lazy loading
 export default function LazyVideo({
-  src, alt, fit, position, priority, noPoster, playing = true
+  src, alt, fit, position, priority, noPoster, paused
 }: LazyVideoProps): ReactElement {
 
   // Make a ref to the video so it can be controlled
@@ -45,10 +45,10 @@ export default function LazyVideo({
     videoRef.current?.pause()
   }
 
-  // Respond to playing prop and call methods that control the video playback
+  // Respond to paused prop and call methods that control the video playback
   useEffect(() => {
-    playing ? play() : pause()
-  }, [ playing ])
+    paused ? pause() : play()
+  }, [ paused ])
 
   // Simplify logic for whether to load sources
   const shouldLoad = priority || inView
@@ -62,7 +62,7 @@ export default function LazyVideo({
       loop
 
       // Whether to autoplay
-      autoPlay={ playing }
+      autoPlay={ !paused }
 
       // Load a transparent gif as a poster if an `image` was specified so
       // the image is used as poster rather than the first frame of video. This

packages/react/src/types/lazyVideoTypes.ts

@@ -12,8 +12,8 @@ export type LazyVideoProps = {
   // Use a transparent gif poster image
   noPoster?: boolean
 
-  // Controls autoplaying and current playing state
-  playing?: boolean
+  // Controls autoplaying and play state
+  paused?: boolean
 
   // Display props
   fit?: CSSProperties['objectFit']

packages/sanity-next/cypress/support/commands.ts

@@ -10,7 +10,7 @@ Cypress.Commands.add('hasDimensions',
   return subject
 })
 
-// Check that a video is playing
+// Check that a video is paused
 // https://glebbahmutov.com/blog/test-video-play/
 Cypress.Commands.add('isPlaying',
   { prevSubject: true },