Subtitles/Captions control

Author: mderrick

src/DefaultPlayer/Captions/Captions.css

@@ -1,30 +1,59 @@
 .component {
     position: relative;
-    color: #fff;
 }
 
-.button {}
+.component:hover {
+    background-color: #000;
+}
+
+.button {
+    width: 34px;
+    height: 34px;
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    cursor: pointer;
+}
+
+.button:focus {
+    outline: 0;
+}
+
+.icon {
+    padding: 5px;
+}
 
 .trackList {
     position: absolute;
-    left: 0;
+    right: 0;
     bottom: 100%;
     display: none;
-    background: #000;
+    background-color: rgba(0,0,0,0.7);
     list-style: none;
     padding: 0;
     margin: 0;
+    color: #fff;
 }
 
 .component:hover .trackList {
     display: block;
 }
 
 .trackItem {
-    padding: 5px;
+    padding: 7px;
+    cursor: pointer;
+}
+
+.activeTrackItem,
+.trackItem:hover {
+    background: #000;
 }
 
-.activeTrack {
+.activeTrackItem {
     composes: trackItem;
     text-decoration: underline;
 }

src/DefaultPlayer/Captions/Captions.js

@@ -1,34 +1,30 @@
 import React from 'react';
 import styles from './Captions.css';
+import ClosedCaptionIcon from './../Icon/closed_caption.svg';
 
-export default ({ textTracks, getVideoEl, forceUpdateState, className }) => {
+export default ({ textTracks, onClick, onItemClick, className }) => {
     return (
         <div className={[
             styles.component,
             className
         ].join(' ')}>
-            <button className={styles.button}>
-                CC
+            <button
+                type="button"
+                onClick={onClick}
+                aria-label="Captions"
+                className={styles.button}>
+                <ClosedCaptionIcon
+                    className={styles.icon}
+                    fill="#fff" />
             </button>
             <ul className={styles.trackList}>
-                { textTracks && Array.prototype.slice.call(textTracks).map((track, i) => (
+                { textTracks && [...textTracks].map((track) => (
                     <li
+                        key={track.language}
                         className={track.mode === 'showing'
-                            ? styles.activeTrack
+                            ? styles.activeTrackItem
                             : styles.trackItem}
-                        onClick={() => {
-                            const videoEl = getVideoEl()
-                            if (track.mode !== 'showing') {
-                                videoEl.textTracks[i].mode = 'showing';
-                            } else {
-                                videoEl.textTracks[i].mode = 'disabled';
-                            }
-                            // There is no `onTrackChange` event so we
-                            // have to forcibly update the video state
-                            // in order for the UI to update.
-                            forceUpdateState();
-                        }}
-                        key={track.language}>
+                        onClick={onItemClick.bind(this, track)}>
                         { track.label }
                     </li>
                 ))}

src/DefaultPlayer/Captions/Captions.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Captions from './Captions';
+import styles from './Captions.css';
+
+describe('Captions', () => {
+    let component;
+
+    beforeAll(() => {
+        component = shallow(<Captions />);
+    });
+
+    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);
+    });
+});

src/DefaultPlayer/DefaultPlayer.js

@@ -2,6 +2,8 @@ import React, { PropTypes } from 'react';
 import videoConnect from './../video/video';
 import {
     setVolume,
+    showTrack,
+    toggleTracks,
     fullscreen,
     toggleMute,
     togglePause,
@@ -13,6 +15,7 @@ import styles from './DefaultPlayer.css';
 import Time from './Time/Time';
 import Seek from './Seek/Seek';
 import Volume from './Volume/Volume';
+import Captions from './Captions/Captions';
 import PlayPause from './PlayPause/PlayPause';
 import Fullscreen from './Fullscreen/Fullscreen';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
@@ -26,8 +29,10 @@ export const DefaultPlayer = ({
     onSeekChange,
     onVolumeChange,
     onVolumeClick,
+    onCaptionsClick,
     onPlayPauseClick,
     onFullscreenClick,
+    onCaptionsItemClick,
     ...restProps
 }) => {
     return (
@@ -76,6 +81,14 @@ export const DefaultPlayer = ({
                                         onChange={onVolumeChange}
                                         onClick={onVolumeClick}
                                         {...video} />;
+                                case 'Captions':
+                                    return video && video.textTracks && video.textTracks.length
+                                        ? <Captions
+                                            key={i}
+                                            onClick={onCaptionsClick}
+                                            onItemClick={onCaptionsItemClick}
+                                            {...video}/>
+                                        : null;
                                 default:
                                     return null;
                             }
@@ -86,7 +99,7 @@ export const DefaultPlayer = ({
     );
 };
 
-const controls = ['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen'];
+const controls = ['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen', 'Captions'];
 
 DefaultPlayer.defaultProps = {
     controls
@@ -109,7 +122,9 @@ export default videoConnect(
     (videoEl, state) => ({
         onFullscreenClick: () => fullscreen(videoEl),
         onVolumeClick: () => toggleMute(videoEl, state),
+        onCaptionsClick: () => toggleTracks(state),
         onPlayPauseClick: () => togglePause(videoEl, state),
+        onCaptionsItemClick: (track) => showTrack(state, track),
         onVolumeChange: (e) => setVolume(videoEl, state, e.target.value),
         onSeekChange: (e) => setCurrentTime(videoEl, state, e.target.value * state.duration / 100)
     })

src/video/api.js

@@ -50,7 +50,30 @@ export const fullscreen = (videoEl) => {
     } else if (videoEl.webkitRequestFullscreen) {
         videoEl.webkitRequestFullscreen();
     }
-}
+};
+
+export const showTrack = ({ textTracks }, track) => {
+    hideTracks({ textTracks });
+    track.mode = 'showing';
+};
+
+export const hideTracks = ({ textTracks }) => {
+    for (var i = 0; i < textTracks.length; i++) {
+        textTracks[i].mode = 'disabled';
+    }
+};
+
+export const toggleTracks = (() => {
+    let previousTrack;
+    return ({ textTracks }) => {
+        let currentTrack = [...textTracks].filter((track) => track.mode === 'showing')[0];
+        if (currentTrack) {
+            hideTracks({ textTracks });
+            previousTrack = currentTrack;
+        } else {
+            showTrack({ textTracks }, previousTrack || textTracks[0]);
+        }
+}})();
 
 /**
  * Custom getter methods that are commonly used

src/video/api.test.js

@@ -2,21 +2,35 @@ import {
     mute,
     unmute,
     setVolume,
+    showTrack,
     toggleMute,
     fullscreen,
+    hideTracks,
     togglePause,
+    toggleTracks,
     setCurrentTime,
     getPercentagePlayed
 } from './api';
 
 describe('api', () => {
     let videoElMock;
+    let textTracksMock;
 
     beforeEach(() => {
         videoElMock = {
             play: jest.fn(),
             pause: jest.fn()
         };
+        textTracksMock = [{
+            id: 1,
+            mode: 'showing'
+        }, {
+            id: 2,
+            mode: 'disabled'
+        }, {
+            id: 3,
+            mode: 'disabled'
+        }];
     });
 
     describe('togglePause', () => {
@@ -131,6 +145,59 @@ describe('api', () => {
         });
     });
 
+    describe('hideTracks', () => {
+        it('hides all of the tracks', () => {
+            expect(textTracksMock[0].mode).toBe('showing');
+            hideTracks({ textTracks: textTracksMock }, textTracksMock[2]);
+            expect(textTracksMock[0].mode).toBe('disabled');
+        });
+    });
+
+    describe('showTrack', () => {
+        it('hides all of the tracks', () => {
+            expect(textTracksMock[0].mode).toBe('showing');
+            showTrack({ textTracks: textTracksMock }, textTracksMock[2]);
+            expect(textTracksMock[0].mode).toBe('disabled');
+        });
+
+        it('sets the given track to show', () => {
+            expect(textTracksMock[2].mode).toBe('disabled');
+            showTrack({ textTracks: textTracksMock }, textTracksMock[2]);
+            expect(textTracksMock[2].mode).toBe('showing');
+        });
+    });
+
+    describe('toggleTracks', () => {
+        it('shows the first track if no tracks are showing and there is no previously active track', () => {
+            textTracksMock[0].mode = 'disabled';
+            expect(textTracksMock[0].mode).toBe('disabled');
+            toggleTracks({ textTracks: textTracksMock });
+            expect(textTracksMock[0].mode).toBe('showing');
+        });
+
+        it('hides all tracks if a current track is showing', () => {
+            expect(textTracksMock[0].mode).toBe('showing');
+            toggleTracks({ textTracks: textTracksMock });
+            expect(textTracksMock[0].mode).toBe('disabled');
+            expect(textTracksMock[1].mode).toBe('disabled');
+            expect(textTracksMock[2].mode).toBe('disabled');
+        });
+
+        it('shows the previously active track if no tracks are showing', () => {
+            expect(textTracksMock[0].mode).toBe('showing');
+            toggleTracks({ textTracks: textTracksMock });
+            expect(textTracksMock[0].mode).toBe('disabled');
+            toggleTracks({ textTracks: textTracksMock });
+            expect(textTracksMock[0].mode).toBe('showing');
+            showTrack({ textTracks: textTracksMock }, textTracksMock[2]);
+            expect(textTracksMock[2].mode).toBe('showing');
+            toggleTracks({ textTracks: textTracksMock });
+            expect(textTracksMock[2].mode).toBe('disabled');
+            toggleTracks({ textTracks: textTracksMock });
+            expect(textTracksMock[2].mode).toBe('showing');
+        });
+    });
+
     describe('getPercentagePlayed', () => {
         it('returns correct percentage played', () => {
             expect(getPercentagePlayed({

src/video/constants.js

@@ -24,6 +24,12 @@ export const EVENTS = [
     'onWaiting'
 ];
 
+export const TRACKEVENTS = [
+    'onChange',
+    'onAddTrack',
+    'onRemoveTrack'
+];
+
 export const METHODS = [
     'addTextTrack',
     'canPlayType',

src/video/video.js

@@ -9,6 +9,7 @@ import toClass from 'recompose/toClass';
 import {
     EVENTS,
     PROPERTIES,
+    TRACKEVENTS
 } from './constants';
 
 const defaultMapStateToProps = (state = {}) => Object.assign({
@@ -56,6 +57,10 @@ export default (
                 this.videoEl[event.toLowerCase()] = this.updateState;
             });
 
+            TRACKEVENTS.forEach(event => {
+                this.videoEl.textTracks[event.toLowerCase()] = this.updateState;
+            });
+
             // If <source> elements are used instead of a src attribute then
             // errors for unsupported format do not bubble up to the <video>.
             // Do this manually by listening to the last <source> error event