Merge pull request #29 from BKWLD/paused-prop

Switch from `playing` to `paused` to control videos

packages/next/README.md

@@ -62,6 +62,13 @@ For more examples, read [the Cypress component tests](./cypress/component).
 | `sizes` | `string` | Sets [`next/image`'s `sizes`](https://nextjs.org/docs/pages/api-reference/components/image#sizes) prop.
 | `imageLoader` | `Function` | This is passed through [to `next/image`'s `loader` prop](https://nextjs.org/docs/app/api-reference/components/image#loader).
 
+### Video
+
+| Prop | Type | Description
+| -- | -- | --
+| `paused` | `boolean` | Disables autoplay of videos. This prop is reactive, unlike the `paused` property of the html `<video>` tag.  You can set it to `true` to pause a playing video or set it to `false` to play a paused video.
+
+
 ### Accessibility
 
 | Prop | Type | Description

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/README.md

@@ -95,6 +95,11 @@ For more examples, read [the Cypress component tests](./cypress/component).
 | `priority` | `boolean` | Sets [`next/image`'s `priority`](https://nextjs.org/docs/pages/api-reference/components/image#priority) and videos to not lazy load.
 | `sizes` | `string` | Sets [`next/image`'s `sizes`](https://nextjs.org/docs/pages/api-reference/components/image#sizes) prop.
 
+### Video
+
+| Prop | Type | Description
+| -- | -- | --
+| `paused` | `boolean` | Disables autoplay of videos. This prop is reactive, unlike the `paused` property of the html `<video>` tag.  You can set it to `true` to pause a playing video or set it to `false` to play a paused video.
 
 ### Accessibility
 

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 },