fleshing out more of the api

README.md

@@ -4,4 +4,7 @@ React video/audio player.
 
 ## TODOS
 
-Playlist feature.
+- [] Fix Progress component
+- [] Playlist feature
+- [] Show time preview when hovering scrubber
+- [] Show thumbnail preview when hovering scrubber

example/index.jsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {MediaContainer, PlayPause} from '../src/index';
+import {MediaContainer, PlayPause, Progress, MuteUnmute, Fullscreen} from '../src/index';
 
 class App extends Component {
 
@@ -9,12 +9,17 @@ class App extends Component {
         {props =>
           <div>
             <video
-              src="http://sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4"
+              src="http://sample-videos.com/video/mp4/720/big_buck_bunny_720p_20mb.mp4"
               controls={true}
-              ref="player"
             />
-            <PlayPause {...props} />
-            {props.current}/{props.duration}
+            <div>
+              <PlayPause {...props} />
+              {MediaContainer.formatTime(props.current)}
+              <Progress {...props} />
+              {MediaContainer.formatTime(props.duration)}
+              <MuteUnmute {...props} />
+              <Fullscreen {...props} />
+            </div>
           </div>
         }
       </MediaContainer>

src/Fullscreen.jsx

@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+
+// we'll do this later
+// http://www.sitepoint.com/use-html5-full-screen-api/
+
+class Fullscreen {
+
+  // need to handle if in fullscreen or not in mediacontainer
+  // shouldComponentUpdate(nextProps) {
+  //   return this.props.fullscreen !== nextProps.fullscreen;
+  // }
+
+  _handleFullscreen() {
+
+    const {player} = this.props;
+
+    // need to get correct fullscreen on componentDidMount
+    // instead of checking here every time
+    if(player.requestFullscreen) {
+      player.requestFullscreen();
+    } else if(player.webkitRequestFullscreen) {
+      player.webkitRequestFullscreen();
+    } else if(player.mozRequestFullScreen) {
+      player.mozRequestFullScreen();
+    }
+  }
+
+  render() {
+    return(
+      <button onClick={::this._handleFullscreen}>
+        Fullscreen
+      </button>
+    );
+  }
+}
+
+export default Fullscreen;

src/MediaPlayer.jsx → src/MediaContainer.jsx

@@ -5,8 +5,9 @@ class MediaContainer extends Component {
   state = {
     player: null,
     playing: false,
-    duration: '0:00',
-    current: '0:00'
+    muted: false,
+    duration: 0,
+    current: 0
   }
 
   static formatTime(current) {
@@ -31,7 +32,7 @@ class MediaContainer extends Component {
 
   _handleLoadedMetaData(e) {
     this.setState({
-      duration: MediaContainer.formatTime(e.target.duration)
+      duration: e.target.duration
     });
   }
 
@@ -40,7 +41,8 @@ class MediaContainer extends Component {
     const { player } = this.state;
 
     this.setState({
-      current: MediaContainer.formatTime(player.currentTime)
+      current: player.currentTime,
+      muted: player.muted
     });
   }
 
@@ -58,6 +60,14 @@ class MediaContainer extends Component {
     player.addEventListener('pause', () => {
       this.setState({playing: false});
     });
+
+    player.addEventListener('volumechange', () => {
+      this.setState({muted: player.muted});
+    });
+
+    player.addEventListener('ended', () => {
+      this.setState({playing: false});
+    });
   }
 
   componentDidMount() {

src/MuteUnmute.jsx

@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+
+class MuteUnmute {
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.muted !== nextProps.muted;
+  }
+
+  _handleMuteUnmute() {
+
+    const {player} = this.props;
+
+    if(player.muted === false) {
+      player.muted = true;
+    } else {
+      player.muted = false;
+    }
+  }
+
+  render() {
+    return(
+      <button onClick={::this._handleMuteUnmute}>
+        {this.props.muted ? 'Unmute' : 'Mute'}
+      </button>
+    );
+  }
+}
+
+export default MuteUnmute;

src/Progress.jsx

@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+
+class Progress {
+
+  dragging = false
+
+  _handleChange(e) {
+    const {player} = this.props;
+    player.currentTime = e.target.value;
+  }
+
+  _handleDragging() {
+    this.dragging = true;
+  }
+
+  _handleDrag(e) {
+
+    const {player} = this.props;
+
+    if(this.dragging) {
+
+      player.currentTime = e.target.value;
+
+      if(e.type === 'mouseup') {
+        this.dragging = false;
+      }
+    }
+  }
+
+  render() {
+    return(
+      <input
+        type="range"
+        step="any"
+        max={(this.props.duration).toFixed(4)}
+        value={this.props.current}
+        onChange={::this._handleChange}
+        onMouseDown={::this._handleDragging}
+        onMouseMove={::this._handleDrag}
+        onMouseUp={::this._handleDrag}
+      />
+    );
+  }
+}
+
+export default Progress;

src/index.js

@@ -1,4 +1,7 @@
-import MediaContainer from './MediaPlayer';
+import MediaContainer from './MediaContainer';
 import PlayPause from './PlayPause';
+import Progress from './Progress';
+import MuteUnmute from './MuteUnmute';
+import Fullscreen from './Fullscreen';
 
-export { MediaContainer, PlayPause };
+export { MediaContainer, PlayPause, Progress, MuteUnmute, Fullscreen };