Customize control order in DefaultPlayer

Author: mderrick

README.md

@@ -23,19 +23,21 @@ View the [demo](http://mderrick.github.io/react-html5video/).
 
 ### Simple Usage
 
-The simplest way to use this component is to use the default player that is provided.
+The simplest way to use this component is to use the default player that is provided. It works the same way as a normal HTML5 video by taking all the supported [HTML5 video attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) except for `controls`. This is now "controlled" and can be an array of supported component names in any order as below:
 
 ```js
 import { DefaultPlayer as Video } from 'react-html5video';
 import 'react-html5video/dist/styles.css';
 render() {
     return (
-        <Video controls autoPlay loop muted
+        <Video autoPlay loop muted
+            controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
             poster="http://sourceposter.jpg"
             onCanPlayThrough={() => {
                 // Do stuff
             }}>
             <source src="http://sourcefile.webm" type="video/webm" />
+            <track label="English" kind="subtitles" srcLang="en" src="http://source.vtt" default />
         </Video>
     );
 }
@@ -48,10 +50,10 @@ If you want to get creative and create your own video player then you will need
 ```js
 import videoConnect from 'react-html5video';
 
-const MyVideoPlayer = ({ video, videoEl, ...restProps }) => (
+const MyVideoPlayer = ({ video, videoEl, children, ...restProps }) => (
     <div>
         <video {...restProps}>
-            <source src="http://sourcefile.webm" type="video/webm" />
+            { children }
         </video>
         <p>
             Here are the video properties for the above HTML5 video:

src/DefaultPlayer/DefaultPlayer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import videoConnect from './../video/video';
 import {
     setVolume,
@@ -10,16 +10,17 @@ import {
     getPercentageBuffered
 } from './../video/api';
 import styles from './DefaultPlayer.css';
-import PlayPause from './PlayPause/PlayPause';
+import Time from './Time/Time';
 import Seek from './Seek/Seek';
 import Volume from './Volume/Volume';
-import ErrorMessage from './ErrorMessage/ErrorMessage';
-import Time from './Time/Time';
+import PlayPause from './PlayPause/PlayPause';
 import Fullscreen from './Fullscreen/Fullscreen';
+import ErrorMessage from './ErrorMessage/ErrorMessage';
 
-const DefaultPlayer = ({
+export const DefaultPlayer = ({
     video,
     style,
+    controls,
     children,
     className,
     onSeekChange,
@@ -35,7 +36,7 @@ const DefaultPlayer = ({
             className
         ].join(' ')}
         style={style}>
-            { video.error
+            { video && video.error
                 ? <ErrorMessage
                     className={styles.error}
                     {...video} />
@@ -45,27 +46,56 @@ const DefaultPlayer = ({
                 {...restProps}>
                 { children }
             </video>
-            <div className={styles.controls}>
-                <PlayPause
-                    onClick={onPlayPauseClick}
-                    {...video} />
-                <Seek
-                    className={styles.seek}
-                    onChange={onSeekChange}
-                    {...video} />
-                <Time {...video} />
-                <Volume
-                    onChange={onVolumeChange}
-                    onClick={onVolumeClick}
-                    {...video} />
-                <Fullscreen
-                    onClick={onFullscreenClick}
-                    {...video} />
-            </div>
+            { controls && controls.length
+                ? <div className={styles.controls}>
+                        { controls.map((control, i) => {
+                            switch (control) {
+                                case 'Seek':
+                                    return <Seek
+                                        key={i}
+                                        className={styles.seek}
+                                        onChange={onSeekChange}
+                                        {...video} />;
+                                case 'PlayPause':
+                                    return <PlayPause
+                                        key={i}
+                                        onClick={onPlayPauseClick}
+                                        {...video} />;
+                                case 'Fullscreen':
+                                    return <Fullscreen
+                                        key={i}
+                                        onClick={onFullscreenClick}
+                                        {...video} />;
+                                case 'Time':
+                                    return <Time
+                                        key={i}
+                                        {...video} />;
+                                case 'Volume':
+                                    return <Volume
+                                        key={i}
+                                        onChange={onVolumeChange}
+                                        onClick={onVolumeClick}
+                                        {...video} />;
+                                default:
+                                    return null;
+                            }
+                        }) }
+                    </div>
+                : null }
         </div>
     );
 };
 
+const controls = ['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen'];
+
+DefaultPlayer.defaultProps = {
+    controls
+};
+
+DefaultPlayer.propTypes = {
+    controls: PropTypes.arrayOf(PropTypes.oneOf(controls))
+};
+
 export default videoConnect(
     DefaultPlayer,
     ({ networkState, error, ...restState }) => ({

src/DefaultPlayer/DefaultPlayer.test.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DefaultPlayer } from './DefaultPlayer';
+import styles from './DefaultPlayer.css';
+import Time from './Time/Time';
+import Seek from './Seek/Seek';
+import Volume from './Volume/Volume';
+import PlayPause from './PlayPause/PlayPause';
+import Fullscreen from './Fullscreen/Fullscreen';
+import ErrorMessage from './ErrorMessage/ErrorMessage';
+
+describe('DefaultPlayer', () => {
+    let component;
+
+    beforeAll(() => {
+        component = shallow(<DefaultPlayer />);
+    });
+
+    it('should accept a className prop and append it to the components class', () => {
+        const newClassNameString = 'a new className';
+        expect(component.prop('className'))
+            .toContain(styles.component);
+        component.setProps({
+            className: newClassNameString
+        });
+        expect(component.prop('className'))
+            .toContain(styles.component);
+        expect(component.prop('className'))
+            .toContain(newClassNameString);
+    });
+
+    it('applies `style` prop if provided', () => {
+        component.setProps({
+            style: { color: 'red' }
+        });
+        expect(component.prop('style'))
+            .toEqual({ color: 'red' });
+    });
+
+    it('spreads all parent props on the video element', () => {
+        component.setProps({
+            autoPlay: true
+        });
+        expect(component.find('video').prop('autoPlay'))
+            .toEqual(true);
+    });
+
+    it('shows the error component when required', () => {
+        expect(component.find(ErrorMessage).exists())
+            .toBeFalsy();
+        component.setProps({
+            video: {
+                error: true
+            }
+        });
+        expect(component.find(ErrorMessage).exists())
+            .toBeTruthy();
+    });
+
+    it('renders some default controls in a default order', () => {
+        const controlsComponent = component.find(`.${styles.controls}`);
+        expect(controlsComponent.childAt(0).is(PlayPause))
+            .toBeTruthy();
+        expect(controlsComponent.childAt(1).is(Seek))
+            .toBeTruthy();
+        expect(controlsComponent.childAt(2).is(Time))
+            .toBeTruthy();
+        expect(controlsComponent.childAt(3).is(Volume))
+            .toBeTruthy();
+        expect(controlsComponent.childAt(4).is(Fullscreen))
+            .toBeTruthy();
+    });
+
+    it('renders controls in a given custom order', () => {
+        component.setProps({
+            controls: ['Fullscreen', 'Seek', 'Time']
+        });
+        const controlsComponent = component.find(`.${styles.controls}`);
+        expect(controlsComponent.childAt(0).is(Fullscreen))
+            .toBeTruthy();
+        expect(controlsComponent.childAt(1).is(Seek))
+            .toBeTruthy();
+        expect(controlsComponent.childAt(2).is(Time))
+            .toBeTruthy();
+    });
+
+    it('renders no controls when given an empty array', () => {
+        expect(component.find(`.${styles.controls}`).exists())
+            .toBeTruthy();
+        component.setProps({
+            controls: []
+        });
+        expect(component.find(`.${styles.controls}`).exists())
+            .toBeFalsy();
+    });
+});