Rename mapVideoElToProps and make them specific event handlers

Author: mderrick

src/DefaultPlayer/DefaultPlayer.js

@@ -22,10 +22,10 @@ const DefaultPlayer = ({
     style,
     children,
     className,
-    setVolume,
-    toggleMute,
-    togglePause,
-    setCurrentTime,
+    onSeekChange,
+    onVolumeChange,
+    onVolumeClick,
+    onPlayPauseClick,
     onFullscreenClick,
     ...restProps
 }) => {
@@ -47,16 +47,16 @@ const DefaultPlayer = ({
             </video>
             <div className={styles.controls}>
                 <PlayPause
-                    togglePause={togglePause}
+                    onClick={onPlayPauseClick}
                     {...video} />
                 <Seek
                     className={styles.seek}
-                    setCurrentTime={setCurrentTime}
+                    onChange={onSeekChange}
                     {...video} />
                 <Time {...video} />
                 <Volume
-                    setVolume={setVolume}
-                    toggleMute={toggleMute}
+                    onChange={onVolumeChange}
+                    onClick={onVolumeClick}
                     {...video} />
                 <Fullscreen
                     onClick={onFullscreenClick}
@@ -78,9 +78,9 @@ export default video(
     }),
     (videoEl, state) => ({
         onFullscreenClick: () => fullscreen(videoEl),
-        toggleMute: () => toggleMute(videoEl, state),
-        togglePause: () => togglePause(videoEl, state),
-        setVolume: (value) => setVolume(videoEl, state, value),
-        setCurrentTime: (value) => setCurrentTime(videoEl, state, value)
+        onVolumeClick: () => toggleMute(videoEl, state),
+        onPlayPauseClick: () => togglePause(videoEl, state),
+        onVolumeChange: (e) => setVolume(videoEl, state, e.target.value),
+        onSeekChange: (e) => setCurrentTime(videoEl, state, e.target.value * state.duration / 100)
     })
 );

src/DefaultPlayer/PlayPause/PlayPause.js

@@ -3,15 +3,15 @@ import styles from './PlayPause.css';
 import PlayArrow from './../Icon/play_arrow.svg';
 import Pause from './../Icon/pause.svg';
 
-export default ({ togglePause, paused, className }) => {
+export default ({ onClick, paused, className }) => {
     return (
         <div className={[
             styles.component,
             className
         ].join(' ')}>
             <button
                 className={styles.button}
-                onClick={togglePause}
+                onClick={onClick}
                 aria-label={ paused
                     ? 'Play'
                     : 'Pause' }

src/DefaultPlayer/PlayPause/PlayPause.test.js

@@ -25,10 +25,10 @@ describe('PlayPause', () => {
             .toContain(newClassNameString);
     });
 
-    it('triggers \'togglePause\' prop when the button is clicked', () => {
+    it('triggers \'onClick\' prop when the button is clicked', () => {
         const spy = jest.fn();
         component.setProps({
-            togglePause: spy
+            onClick: spy
         });
         expect(spy)
             .not.toHaveBeenCalled();

src/DefaultPlayer/Seek/Seek.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import styles from './Seek.css';
 
-export default ({ setCurrentTime, duration, percentagePlayed, percentageBuffered, className }) => {
-    const change = (e) => {
-        setCurrentTime(e.target.value * duration / 100);
-    };
+export default ({ onChange, duration, percentagePlayed, percentageBuffered, className }) => {
     return (
         <div className={[
             styles.component,
@@ -27,7 +24,7 @@ export default ({ setCurrentTime, duration, percentagePlayed, percentageBuffered
                     max="100"
                     type="range"
                     orient="horizontal"
-                    onChange={change}
+                    onChange={onChange}
                     className={styles.input}
                     value={percentagePlayed} />
             </div>

src/DefaultPlayer/Seek/Seek.test.js

@@ -42,6 +42,18 @@ describe('Seek', () => {
             .toEqual(10);
     });
 
+    it('triggers \'onChange\' prop when the input is changed', () => {
+        const spy = jest.fn();
+        component.setProps({
+            onChange: spy
+        });
+        expect(spy)
+            .not.toHaveBeenCalled();
+        component.find('input').simulate('change');
+        expect(spy)
+            .toHaveBeenCalled();
+    });
+
     it('changes the played fill bar width', () => {
         component.setProps({
             percentagePlayed: 0

src/DefaultPlayer/Volume/Volume.js

@@ -3,10 +3,7 @@ import styles from './Volume.css';
 import VolumeOff from './../Icon/volume_off.svg';
 import VolumeUp from './../Icon/volume_up.svg';
 
-export default ({ setVolume, toggleMute, volume, muted, className }) => {
-    const change = (e) => {
-        setVolume(e.target.value);
-    };
+export default ({ onChange, onClick, volume, muted, className }) => {
     const volumeValue = muted
         ? 0
         : +volume;
@@ -21,7 +18,7 @@ export default ({ setVolume, toggleMute, volume, muted, className }) => {
                     ? 'Unmute'
                     : 'Mute'}
                 className={styles.button}
-                onClick={toggleMute}
+                onClick={onClick}
                 type="button">
                 { isSilent
                     ? <VolumeOff
@@ -48,7 +45,7 @@ export default ({ setVolume, toggleMute, volume, muted, className }) => {
                         max="1"
                         type="range"
                         orient="vertical"
-                        onChange={change}
+                        onChange={onChange}
                         className={styles.input}
                         value={volumeValue} />
                 </div>

src/DefaultPlayer/Volume/Volume.test.js

@@ -39,10 +39,10 @@ describe('Volume', () => {
             .toEqual('1');
     });
 
-    it('triggers \'toggleMute\' prop when the button is clicked', () => {
+    it('triggers \'onClick\' prop when the button is clicked', () => {
         const spy = jest.fn();
         component.setProps({
-            toggleMute: spy
+            onClick: spy
         });
         expect(spy)
             .not.toHaveBeenCalled();
@@ -51,6 +51,18 @@ describe('Volume', () => {
             .toHaveBeenCalled();
     });
 
+    it('triggers \'onChange\' prop when the input is changed', () => {
+        const spy = jest.fn();
+        component.setProps({
+            onChange: spy
+        });
+        expect(spy)
+            .not.toHaveBeenCalled();
+        component.find('input').simulate('change');
+        expect(spy)
+            .toHaveBeenCalled();
+    });
+
     describe('when muted', () => {
         beforeAll(() => {
             component.setProps({