Merge branch 'master' of narrowizard/video_player into master

README.md

@@ -1,6 +1,8 @@
 Fork from [mderrick/react-html5video](https://github.com/mderrick/react-html5video)
 
-Add speed/playbackRate control
+## extension
++ Add speed/playbackRate control
++ ie9 support. (fullscreen feature only support ie11.)
 
 Install dependencies.
 

scripts/deploy:demo.js

@@ -1,51 +0,0 @@
-/* eslint-disable no-console */
-
-const ghpages = require('gh-pages');
-const pkg = require('./../package.json');
-const path = require('path');
-const chalk = require('chalk');
-const fs = require('fs');
-const distPath = path.join(__dirname, '../demo/dist');
-
-const deploy = (options = {}) => {
-    ghpages.publish(distPath, Object.assign({
-        message: pkg.version
-    }, options), (err) => {
-        if (err) {
-            error([err]);
-            return;
-        }
-        console.log(chalk.green('Demo has succesfully deployed.'));
-    });
-};
-
-const error = (errs = []) => {
-    errs.forEach((err) => {
-        console.log(chalk.red(err));
-    });
-    process.exit(1);
-};
-
-try {
-    fs.accessSync(distPath, fs.F_OK);
-    if (process.env.TRAVIS) {
-        if (process.env.GITHUB_TOKEN) {
-            deploy({
-                repo: `https://${process.env.GITHUB_TOKEN}@github.com/${process.env.TRAVIS_REPO_SLUG}.git`,
-                user: {
-                    name: 'Travis CI'
-                }
-            });
-        } else {
-            error(['process.env.GITHUB_TOKEN with "repo" access is required to deploy gh-pages.']);
-        }
-    } else {
-        // Deploys using git origin, username and email.
-        deploy();
-    }
-} catch (e) {
-    error([
-        `${distPath} does not exist.`,
-        'Please run "npm i && npm run i:demo && npm run build:demo" and try again.'
-    ]);
-}

src/DefaultPlayer/Captions/Captions.js

@@ -3,7 +3,7 @@ import styles from './Captions.css';
 import ClosedCaptionIcon from './../Icon/caption_new.svg';
 
 export default ({ textTracks, onClick, onItemClick, className, ariaLabel }) => {
-    console.log('caption')
+    // console.log('caption')
     return (
         <div className={[
             styles.component,

src/DefaultPlayer/DefaultPlayer.css

@@ -3,6 +3,7 @@
     font-family: Helvetica;
     font-size: 11px;
     background-color: #000;
+    width: 100%;
 }
 
 .video {
@@ -16,8 +17,8 @@
     right: 0;
     left: 0;
     height: 34px;
-    display: flex;
-    background-color: rgba(0,0,0,0.7);
+    display: block;
+    background-color: rgba(0, 0, 0, 0.7);
     opacity: 0;
     transition: opacity 0.2s;
 }
@@ -28,4 +29,4 @@
 
 .component:hover .controls {
     opacity: 1;
-}
+}

src/DefaultPlayer/DefaultPlayer.js

@@ -54,83 +54,83 @@ const DefaultPlayer = ({
             styles.component,
             className
         ].join(' ')}
-        style={style}>
+            style={style}>
             <video
                 className={styles.video}
                 {...restProps}>
-                { children }
+                {children}
             </video>
             <Overlay
                 onClick={onPlayPauseClick}
                 {...video} />
-            { controls && controls.length && !video.error
+            {controls && controls.length && !video.error
                 ? <div className={styles.controls}>
-                        { controls.map((control, i) => {
-                            switch (control) {
-                                case 'Seek':
-                                    return <Seek
+                    {controls.map((control, i) => {
+                        switch (control) {
+                            case 'Seek':
+                                return <Seek
+                                    key={i}
+                                    ariaLabel={copy.seek}
+                                    className={styles.seek}
+                                    onChange={onSeekChange}
+                                    {...video} />;
+                            case 'PlayPause':
+                                return <PlayPause
+                                    key={i}
+                                    ariaLabelPlay={copy.play}
+                                    ariaLabelPause={copy.pause}
+                                    onClick={onPlayPauseClick}
+                                    {...video} />;
+                            case 'Fullscreen':
+                                return <Fullscreen
+                                    key={i}
+                                    ariaLabel={copy.fullscreen}
+                                    onClick={onFullscreenClick}
+                                    onScreenClickCallback={onScreenClickCallback}
+                                    {...video} />;
+                            case 'Time':
+                                return <Time
+                                    key={i}
+                                    {...video} />;
+                            case 'Volume':
+                                return <Volume
+                                    key={i}
+                                    onClick={onVolumeClick}
+                                    onChange={onVolumeChange}
+                                    ariaLabelMute={copy.mute}
+                                    ariaLabelUnmute={copy.unmute}
+                                    ariaLabelVolume={copy.volume}
+                                    {...video} />;
+                            case 'Captions':
+                                return video.textTracks && video.textTracks.length
+                                    ? <Captions
                                         key={i}
-                                        ariaLabel={copy.seek}
-                                        className={styles.seek}
-                                        onChange={onSeekChange}
-                                        {...video} />;
-                                case 'PlayPause':
-                                    return <PlayPause
+                                        onClick={onCaptionsClick}
+                                        ariaLabel={copy.captions}
+                                        onItemClick={onCaptionsItemClick}
+                                        {...video} />
+                                    : null;
+                            case 'Speed':
+                                return playbackrates && playbackrates.length > 0
+                                    ? <Speed
                                         key={i}
-                                        ariaLabelPlay={copy.play}
-                                        ariaLabelPause={copy.pause}
-                                        onClick={onPlayPauseClick}
-                                        {...video} />;
-                                case 'Fullscreen':
-                                    return <Fullscreen
-                                        key={i}
-                                        ariaLabel={copy.fullscreen}
-                                        onClick={onFullscreenClick}
-                                        onScreenClickCallback={onScreenClickCallback}
-                                        {...video} />;
-                                case 'Time':
-                                    return <Time
-                                        key={i}
-                                        {...video} />;
-                                case 'Volume':
-                                    return <Volume
-                                        key={i}
-                                        onClick={onVolumeClick}
-                                        onChange={onVolumeChange}
-                                        ariaLabelMute={copy.mute}
-                                        ariaLabelUnmute={copy.unmute}
-                                        ariaLabelVolume={copy.volume}
-                                        {...video} />;
-                                case 'Captions':
-                                    return video.textTracks && video.textTracks.length
-                                        ? <Captions
-                                            key={i}
-                                            onClick={onCaptionsClick}
-                                            ariaLabel={copy.captions}
-                                            onItemClick={onCaptionsItemClick}
-                                            {...video}/>
-                                        : null;
-                                case 'Speed':
-                                    return playbackrates && playbackrates.length > 0
-                                        ? <Speed
-                                            key={i}
-                                            onClick={onSpeedClick}
-                                            ariaLabel={copy.captions}
-                                            onItemClick={onSpeedsItemClick}
-                                            playbackrates={playbackrates}
-                                            {...video}/>
-                                        : null;
-                                default:
-                                    return null;
-                            }
-                        }) }
-                    </div>
-                : null }
+                                        onClick={onSpeedClick}
+                                        ariaLabel={copy.captions}
+                                        onItemClick={onSpeedsItemClick}
+                                        playbackrates={playbackrates}
+                                        {...video} />
+                                    : null;
+                            default:
+                                return null;
+                        }
+                    })}
+                </div>
+                : null}
         </div>
     );
 };
 
-const controls = ['PlayPause', 'Seek', 'Time', 'Volume', 'Captions', 'Speed', 'Fullscreen'];
+const controls = ['PlayPause', 'Seek', 'Fullscreen', 'Speed', 'Volume', 'Time', 'Captions'];
 
 DefaultPlayer.defaultProps = {
     copy,

src/DefaultPlayer/Fullscreen/Fullscreen.css

@@ -1,4 +1,7 @@
-.component {}
+.component {
+    float: right;
+    height: 34px;
+}
 
 .component:hover {
     background-color: #000;
@@ -23,4 +26,4 @@
 
 .icon {
     padding: 5px;
-}
+}

src/DefaultPlayer/PlayPause/PlayPause.css

@@ -1,4 +1,8 @@
-.component {}
+.component {
+    float: left;
+    height: 34px;
+}
+
 
 .component:hover {
     background-color: #000;

src/DefaultPlayer/Seek/Seek.css

@@ -1,5 +1,8 @@
 .component {
-    position: relative;
+    position: absolute;
+    left: 34px;
+    height: 34px;
+    right: 178px;
 }
 
 .track {

src/DefaultPlayer/Speed/Speed.css

@@ -1,5 +1,7 @@
 .component {
     position: relative;
+    float: right;
+    height: 34px;
 }
 
 .component:hover {
@@ -29,10 +31,9 @@
 
 .speedList {
     position: absolute;
-    right: -9px;
     bottom: 100%;
     display: none;
-    background-color: rgba(0,0,0,0.7);
+    background-color: rgba(0, 0, 0, 0.7);
     list-style: none;
     padding: 0;
     margin: 0;
@@ -48,12 +49,11 @@
     cursor: pointer;
 }
 
-.activeSpeedItem,
-.speedItem:hover {
+.activeSpeedItem, .speedItem:hover {
     background: #000;
 }
 
 .activeSpeedItem {
     composes: speedItem;
     text-decoration: underline;
-}
+}

src/DefaultPlayer/Speed/Speed.js

@@ -3,7 +3,7 @@ import styles from './Speed.css';
 import SpeedIcon from './../Icon/speed.svg';
 
 export default ({ playbackrates, onClick, onItemClick, className, ariaLabel }) => {
-    console.log('speed')
+    // console.log('speed')
     return (
         <div className={[
             styles.component,

src/DefaultPlayer/Time/Time.css

@@ -2,6 +2,7 @@
     padding: 0 10px 0 10px;
     line-height: 35px;
     color: #fff;
+    float: right;
 }
 
 .current {

src/DefaultPlayer/Volume/Volume.css

@@ -1,5 +1,7 @@
 .component {
     position: relative;
+    float: right;
+    height: 34px;
 }
 
 .component:hover {
@@ -51,8 +53,7 @@
     background-color: #3e3e3e;
 }
 
-.fill,
-.input {
+.fill, .input {
     position: absolute;
     right: 0;
     bottom: 0;

src/video/api.js

@@ -91,14 +91,18 @@ export const toggleTracks = (() => {
         } else {
             showTrack({ textTracks }, previousTrack || textTracks[0]);
         }
-}})();
+    }
+})();
 
 export const showSpeed = (videoEl, state, speed) => {
     let playbackrates = state.playbackrates;
-    hideSpeeds(videoEl, {playbackrates});
+    hideSpeeds(videoEl, { playbackrates });
     speed.mode = speed.SHOWING || 'showing';
-
-    videoEl.dataset['playbackrates'] = JSON.stringify(playbackrates);
+    if (videoEl.dataset) {
+        videoEl.dataset['playbackrates'] = JSON.stringify(playbackrates);
+    } else {
+        videoEl.setAttribute("data-playbackrates", JSON.stringify(playbackrates));
+    }
     videoEl.playbackRate = speed.id;
 };
 
@@ -118,12 +122,13 @@ export const toggleSpeeds = (() => {
             .filter((item) => item.mode === 'showing')[0];
 
         if (currentSpeed) {
-            hideSpeeds(videoEl, {playbackrates});
+            hideSpeeds(videoEl, { playbackrates });
             previousSpeed = currentSpeed;
         } else {
-            showSpeed(videoEl, {playbackrates}, previousSpeed || playbackrates[0]);
+            showSpeed(videoEl, { playbackrates }, previousSpeed || playbackrates[0]);
         }
-}})();
+    }
+})();
 
 /**
  * Custom getter methods that are commonly used

src/video/video.js

@@ -43,8 +43,12 @@ export default (
             this.setState(
                 PROPERTIES.reduce((p, c) => {
                     p[c] = this.videoEl && this.videoEl[c];
-                    if (c == 'playbackrates' && this.videoEl.dataset[c]) {
-                        p[c] = this.videoEl && JSON.parse(this.videoEl.dataset[c]);
+                    if (c == 'playbackrates' && this.videoEl) {
+                        if (this.videoEl.dataset) {
+                            p[c] = JSON.parse(this.videoEl.dataset[c]);
+                        } else {
+                            p[c] = JSON.parse(this.videoEl.getAttribute("data-" + c));
+                        }
                     }
                     return p;
                 }, {})
@@ -53,14 +57,18 @@ export default (
 
         bindEventsToUpdateState() {
             EVENTS.forEach(event => {
-                this.videoEl.addEventListener(event.toLowerCase(), this.updateState);
+                if (this.videoEl.addEventListener) {
+                    this.videoEl.addEventListener(event.toLowerCase(), this.updateState);
+                } else {
+                    this.videoEl.attachEvent("on" + event.toLowerCase(), this.updateState);
+                }
             });
 
             TRACKEVENTS.forEach(event => {
                 // TODO: JSDom does not have this method on
                 // `textTracks`. Investigate so we can test this without this check.
-                this.videoEl.textTracks.addEventListener
-                && this.videoEl.textTracks.addEventListener(event.toLowerCase(), this.updateState);
+                this.videoEl.textTracks && this.videoEl.textTracks.addEventListener
+                    && this.videoEl.textTracks.addEventListener(event.toLowerCase(), this.updateState);
             });
 
             // If <source> elements are used instead of a src attribute then
@@ -71,26 +79,28 @@ export default (
             const sources = this.videoEl.getElementsByTagName('source');
             if (sources.length) {
                 const lastSource = sources[sources.length - 1];
-                lastSource.addEventListener('error', this.updateState);
+                lastSource.addEventListener ? lastSource.addEventListener('error', this.updateState) : lastSource.attachEvent('error', this.updateState);
             }
         }
 
         unbindEvents() {
             EVENTS.forEach(event => {
-                this.videoEl.removeEventListener(event.toLowerCase(), this.updateState);
+                this.videoEl.removeEventListener ? this.videoEl.removeEventListener(event.toLowerCase(), this.updateState) :
+                    this.videoEl.detachEvent("on" + event.toLowerCase(), this.updateState);
             });
 
             TRACKEVENTS.forEach(event => {
                 // TODO: JSDom does not have this method on
                 // `textTracks`. Investigate so we can test this without this check.
-                this.videoEl.textTracks.removeEventListener
-                && this.videoEl.textTracks.removeEventListener(event.toLowerCase(), this.updateState);
+                this.videoEl.textTracks && this.videoEl.textTracks.removeEventListener
+                    && this.videoEl.textTracks.removeEventListener(event.toLowerCase(), this.updateState);
             });
 
             const sources = this.videoEl.getElementsByTagName('source');
             if (sources.length) {
                 const lastSource = sources[sources.length - 1];
-                lastSource.removeEventListener('error', this.updateState);
+                lastSource.removeEventListener ? lastSource.removeEventListener('error', this.updateState) :
+                    lastSource.detachEvent('onerror', this.updateState);
             }
         }
 
@@ -120,7 +130,7 @@ export default (
                 this.props
             );
             return (
-                <div ref={this.setRef.bind(this)} style={{height: '100%'}}>
+                <div ref={this.setRef.bind(this)} style={{ height: '100%' }}>
                     <BaseComponent
                         {...mergeProps(
                             stateProps,