Add playback rate props (#220)

Co-authored-by: Renée Kooi <[email protected]>

README.md

@@ -47,6 +47,7 @@ import Vimeo from '@u-wave/react-vimeo';
 | muted | bool | false | Starts in a muted state to help with autoplay |
 | background | bool | false | Starts in a background state with no controls to help with autoplay |
 | responsive | bool | false | Enable responsive mode and resize according to parent element (experimental) |
+| playbackRate | number | | Specify playback rate (requires Vimeo PRO / Business account)
 | speed | bool | false | Enable playback rate controls (requires Vimeo PRO / Business account) |
 | keyboard | bool | true | Allows for keyboard input to trigger player events. |
 | pip | bool | false | Show the picture-in-picture button in the controlbar and enable the picture-in-picture API. |

index.d.ts

@@ -235,6 +235,11 @@ export interface VimeoProps {
    */
   responsive?: boolean
 
+  /**
+   * Specify playback rate (requires Vimeo PRO / Business account)
+   */
+  playbackRate?: number
+
   /**
    * Enable playback rate controls (requires Vimeo PRO / Business account)
    */

src/index.js

@@ -109,6 +109,9 @@ class Vimeo extends React.Component {
             player.unload();
           }
           break;
+        case 'playbackRate':
+          player.setPlaybackRate(value);
+          break;
         default:
           // Nothing
       }
@@ -119,7 +122,7 @@ class Vimeo extends React.Component {
    * @private
    */
   createPlayer() {
-    const { start, volume } = this.props;
+    const { start, volume, playbackRate } = this.props;
 
     this.player = new Player(this.container, this.getInitialOptions());
 
@@ -154,6 +157,10 @@ class Vimeo extends React.Component {
     if (typeof volume === 'number') {
       this.updateProps(['volume']);
     }
+
+    if (typeof playbackRate === 'number') {
+      this.updateProps(['playbackRate']);
+    }
   }
 
   /**
@@ -293,6 +300,11 @@ if (process.env.NODE_ENV !== 'production') {
      */
     responsive: PropTypes.bool,
 
+    /**
+     * Specify playback rate (requires Vimeo PRO / Business account)
+     */
+    playbackRate: PropTypes.number,
+
     /**
      * Enable playback rate controls (requires Vimeo PRO / Business account)
      */

test/test.js

@@ -134,6 +134,19 @@ describe('Vimeo', () => {
     expect(playerMock.setHeight).toHaveBeenCalledWith(800);
   });
 
+  it('should set the playback rate using the "playbackRate" props', async () => {
+    const { playerMock, rerender } = render({
+      video: 169408731,
+      playbackRate: 0.5,
+    });
+
+    expect(playerMock.setPlaybackRate).toHaveBeenCalledWith(0.5);
+
+    await rerender({ playbackRate: 2 });
+
+    expect(playerMock.setPlaybackRate).toHaveBeenCalledWith(2);
+  });
+
   it('should destroy player when unmounting', async () => {
     const { playerMock, unmount } = render({
       video: 169408731,

test/util/createVimeo.js

@@ -14,6 +14,7 @@ export default function createVimeo({ shouldFail = false } = {}) {
         : Promise.resolve();
     },
     setVolume: createPromiseSpy(),
+    setPlaybackRate: createPromiseSpy(),
     setCurrentTime: createPromiseSpy(),
     setAutopause: createPromiseSpy(),
     setColor: createPromiseSpy(),