added fullscreen toggle method, updated example to show fullscreen co…

…ntrols
souporserious · Aug 4, 2015 · 54fe9ad · 54fe9ad
1 parent 4ae10df
commit 54fe9ad
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 22 deletions.
diff --git a/example/index.jsx b/example/index.jsx
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { MediaContainer, PlayPause, Progress, MuteUnmute, Volume, Fullscreen } from '../src/index';
 
+import './main.scss';
+
 class App extends Component {
 
   _handlePlayPause() {
@@ -11,13 +13,17 @@ class App extends Component {
     this.refs['media-player'].muteUnmute();
   }
 
+  _handleFullscreen() {
+    this.refs['media-player'].toggleFullscreen();
+  }
+
   render() {
     return(
       <MediaContainer ref="media-player" type="video">
         {props => {
 
-          const { player, playing, duration, current, progress, muted, volume, isFullscreen } = props;
-          
+          const { player, playing, duration, current, progress, muted, volume, fullscreen } = props;
+
           return(
             <div className="media__container">
               <div
@@ -26,7 +32,7 @@ class App extends Component {
               >
                 <video
                   src="http://media.w3.org/2010/05/sintel/trailer.mp4"
-                  controls={true}
+                  controls={false}
                   preload={true}
                 />
               </div>
@@ -51,7 +57,8 @@ class App extends Component {
                   volume={volume}
                 />
                 <Fullscreen
-                  player={player}
+                  fullscreen={fullscreen}
+                  onFullscreen={::this._handleFullscreen}
                 />
               </div>
             </div>

diff --git a/example/main.scss b/example/main.scss
@@ -0,0 +1,10 @@
+// hide native controls
+video::-webkit-media-controls {
+  display: none !important;
+}
+
+// push controls above fullscreen video
+.media__controls {
+  position: relative;
+  z-index: 2147483647;
+}
diff --git a/src/MediaContainer.jsx b/src/MediaContainer.jsx
@@ -10,7 +10,7 @@ class MediaContainer extends Component {
     progress: 0,
     muted: false,
     volume: 1,
-    isFullscreen: false
+    fullscreen: false
   }
 
   static formatTime(current) {
@@ -56,6 +56,32 @@ class MediaContainer extends Component {
     }
   }
 
+  toggleFullscreen() {
+
+    const { player, fullscreen } = this.state;
+
+    if(!fullscreen) {
+      if(player.requestFullscreen) {
+        player.requestFullscreen();
+      } else if(player.webkitRequestFullscreen) {
+        player.webkitRequestFullscreen();
+      } else if(player.mozRequestFullScreen) {
+        player.mozRequestFullScreen();
+      }
+    } else {
+
+      const d = document;
+
+      if(d.cancelFullScreen) {
+        d.cancelFullScreen();
+      } else if (d.webkitCancelFullScreen) {
+        d.webkitCancelFullScreen();
+      } else if (d.mozCancelFullScreen) {
+        d.mozCancelFullScreen();
+      }
+    }
+  }
+
   // Private Methods
   _setPlayer(cb) {
 
@@ -165,7 +191,7 @@ class MediaContainer extends Component {
     const d = document;
 
     this.setState({
-      isFullscreen: d.fullScreen || d.mozFullScreen || d.webkitIsFullScreen
+      fullscreen: d.fullScreen || d.mozFullScreen || d.webkitIsFullScreen
     });
   }
 

diff --git a/src/controls/Fullscreen.jsx b/src/controls/Fullscreen.jsx
@@ -5,29 +5,18 @@ import React, {Component} from 'react';
 
 class Fullscreen {
 
-  // shouldComponentUpdate(nextProps) {
-  //   return nextProps.isFullscreen;
-  // }
+  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();
-    }
+    this.props.onFullscreen();
   }
 
   render() {
     return(
       <button onClick={::this._handleFullscreen}>
-        Fullscreen
+        {this.props.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
       </button>
     );
   }