hide button on fullscreen and reshow on exit

jgubman · Jul 27, 2017 · 90532cb · 90532cb
1 parent 46eeaff
commit 90532cb
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/dist/videojs.theaterMode.js b/dist/videojs.theaterMode.js
@@ -1,7 +1,7 @@
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 module.exports={
   "name": "videojs-theater-mode",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "description": "Adds a class the video.js container that can be used to put your video into \"theater mode\"",
   "main": "dist/videojs-theater-mode.cjs.js",
   "module": "dist/videojs-theater-mode.es.js",
@@ -90,6 +90,7 @@ var _packageJson = require('../package.json');
 
 var Button = _videoJs2['default'].getComponent('Button');
 var defaults = { className: 'theater-mode' };
+var componentName = 'theaterModeToggle';
 
 // Cross-compatibility for Video.js 5 and 6.
 var registerPlugin = _videoJs2['default'].registerPlugin || _videoJs2['default'].plugin;
@@ -142,7 +143,7 @@ _videoJs2['default'].registerComponent('TheaterModeToggle', TheaterModeToggle);
 var onPlayerReady = function onPlayerReady(player, options) {
   player.addClass('vjs-theater-mode');
 
-  var toggle = player.controlBar.addChild('theaterModeToggle', options);
+  var toggle = player.controlBar.addChild(componentName, options);
   player.controlBar.el().insertBefore(toggle.el(), player.controlBar.fullscreenToggle.el());
 };
 
@@ -157,6 +158,14 @@ var theaterMode = function theaterMode(options) {
   this.ready(function () {
     onPlayerReady(_this, _videoJs2['default'].mergeOptions(defaults, options));
   });
+
+  this.on('fullscreenchange', function (event) {
+    if (_this.isFullscreen()) {
+      _this.controlBar.getChild(componentName).hide();
+    } else {
+      _this.controlBar.getChild(componentName).show();
+    }
+  });
 };
 
 // Register the plugin with video.js.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "videojs-theater-mode",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Adds a class the video.js container that can be used to put your video into \"theater mode\"",
   "main": "dist/videojs-theater-mode.cjs.js",
   "module": "dist/videojs-theater-mode.es.js",

diff --git a/src/videojs.theaterMode.js b/src/videojs.theaterMode.js
@@ -3,6 +3,7 @@ import {version as VERSION} from '../package.json';
 
 const Button = videojs.getComponent('Button');
 const defaults = { className: 'theater-mode' };
+const componentName = 'theaterModeToggle';
 
 // Cross-compatibility for Video.js 5 and 6.
 const registerPlugin = videojs.registerPlugin || videojs.plugin;
@@ -45,7 +46,7 @@ videojs.registerComponent('TheaterModeToggle', TheaterModeToggle);
 const onPlayerReady = (player, options) => {
   player.addClass('vjs-theater-mode');
 
-  let toggle = player.controlBar.addChild('theaterModeToggle', options);
+  let toggle = player.controlBar.addChild(componentName, options);
   player.controlBar.el().insertBefore(toggle.el(), player.controlBar.fullscreenToggle.el());
 };
 
@@ -58,6 +59,14 @@ const theaterMode = function(options) {
   this.ready(() => {
     onPlayerReady(this, videojs.mergeOptions(defaults, options));
   });
+
+  this.on('fullscreenchange', (event) => {
+    if (this.isFullscreen()) {
+      this.controlBar.getChild(componentName).hide();
+    } else {
+      this.controlBar.getChild(componentName).show();
+    }
+  });
 };
 
 // Register the plugin with video.js.