Merge branch 'release/0.3.10'

dist/clappr.js

@@ -4484,7 +4484,7 @@ exports = module.exports = __webpack_require__(/*! ../../../../node_modules/css-
 
 
 // module
-exports.push([module.i, ".container[data-container] {\n  position: absolute;\n  background-color: black;\n  height: 100%;\n  width: 100%; }\n  .container[data-container] .chromeless {\n    cursor: default; }\n\n[data-player]:not(.nocursor) .container[data-container]:not(.chromeless).pointer-enabled {\n  cursor: pointer; }\n", ""]);
+exports.push([module.i, ".container[data-container] {\n  position: absolute;\n  background-color: black;\n  height: 100%;\n  width: 100%;\n  max-width: 100%; }\n  .container[data-container] .chromeless {\n    cursor: default; }\n\n[data-player]:not(.nocursor) .container[data-container]:not(.chromeless).pointer-enabled {\n  cursor: pointer; }\n", ""]);
 
 // exports
 
@@ -24735,6 +24735,7 @@ Events.CORE_ACTIVE_CONTAINER_CHANGED = 'core:active:container:changed';
  * Fired when the options were changed for the core
  *
  * @event CORE_OPTIONS_CHANGE
+ * @param {Object} new options provided to configure() method
  */
 Events.CORE_OPTIONS_CHANGE = 'core:options:change';
 /**
@@ -26336,8 +26337,8 @@ function formatTime(time, paddedHours) {
 }
 
 var Fullscreen = exports.Fullscreen = {
-  isFullscreen: function isFullscreen() {
-    return !!(document.webkitFullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement);
+  getFullscreenElement: function getFullscreenElement() {
+    return document.webkitFullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement;
   },
   requestFullscreen: function requestFullscreen(el) {
     if (el.requestFullscreen) el.requestFullscreen();else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();else if (el.mozRequestFullScreen) el.mozRequestFullScreen();else if (el.msRequestFullscreen) el.msRequestFullscreen();else if (el.querySelector && el.querySelector('video') && el.querySelector('video').webkitEnterFullScreen) el.querySelector('video').webkitEnterFullScreen();else if (el.webkitEnterFullScreen) el.webkitEnterFullScreen();
@@ -28323,7 +28324,7 @@ var Core = function (_UIObject) {
   };
 
   Core.prototype.updateSize = function updateSize() {
-    _utils.Fullscreen.isFullscreen() ? this.setFullscreen() : this.setPlayerSize();
+    this.isFullscreen() ? this.setFullscreen() : this.setPlayerSize();
   };
 
   Core.prototype.setFullscreen = function setFullscreen() {
@@ -28433,7 +28434,7 @@ var Core = function (_UIObject) {
   };
 
   Core.prototype.handleFullscreenChange = function handleFullscreenChange() {
-    this.trigger(_events2.default.CORE_FULLSCREEN, _utils.Fullscreen.isFullscreen());
+    this.trigger(_events2.default.CORE_FULLSCREEN, this.isFullscreen());
     this.updateSize();
   };
 
@@ -28511,13 +28512,17 @@ var Core = function (_UIObject) {
     return this.activeContainer && this.activeContainer.getPlaybackType();
   };
 
+  Core.prototype.isFullscreen = function isFullscreen() {
+    return _utils.Fullscreen.getFullscreenElement() === (_browser2.default.isiOS ? this.activeContainer.el : this.el);
+  };
+
   Core.prototype.toggleFullscreen = function toggleFullscreen() {
-    if (!_utils.Fullscreen.isFullscreen()) {
-      _utils.Fullscreen.requestFullscreen(_browser2.default.isiOS ? this.activeContainer.el : this.el);
-      !_browser2.default.isiOS && this.$el.addClass('fullscreen');
-    } else {
+    if (this.isFullscreen()) {
       _utils.Fullscreen.cancelFullscreen();
       !_browser2.default.isiOS && this.$el.removeClass('fullscreen nocursor');
+    } else {
+      _utils.Fullscreen.requestFullscreen(_browser2.default.isiOS ? this.activeContainer.el : this.el);
+      !_browser2.default.isiOS && this.$el.addClass('fullscreen');
     }
   };
 
@@ -28545,7 +28550,7 @@ var Core = function (_UIObject) {
     var sources = options.source || options.sources;
     sources && this.load(sources, options.mimeType || this.options.mimeType);
 
-    this.trigger(_events2.default.CORE_OPTIONS_CHANGE);
+    this.trigger(_events2.default.CORE_OPTIONS_CHANGE, options); // Trigger with newly provided options
     this.containers.forEach(function (container) {
       return container.configure(_this6.options);
     });
@@ -30386,7 +30391,7 @@ var _clapprZepto2 = _interopRequireDefault(_clapprZepto);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var version = "0.3.9"; // Copyright 2014 Globo.com Player authors. All rights reserved.
+var version = "0.3.10"; // Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
@@ -34703,8 +34708,6 @@ var _core_plugin = __webpack_require__(/*! ../base/core_plugin */ "./src/base/co
 
 var _core_plugin2 = _interopRequireDefault(_core_plugin);
 
-var _utils = __webpack_require__(/*! ../base/utils */ "./src/base/utils.js");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var EndVideo = function (_CorePlugin) {
@@ -34731,7 +34734,7 @@ var EndVideo = function (_CorePlugin) {
 
   EndVideo.prototype.ended = function ended() {
     var exitOnEnd = typeof this.core.options.exitFullscreenOnEnd === 'undefined' || this.core.options.exitFullscreenOnEnd;
-    if (exitOnEnd && _utils.Fullscreen.isFullscreen()) this.core.toggleFullscreen();
+    if (exitOnEnd && this.core.isFullscreen()) this.core.toggleFullscreen();
   };
 
   (0, _createClass3.default)(EndVideo, [{
@@ -35956,7 +35959,7 @@ var MediaControl = function (_UICorePlugin) {
 
   MediaControl.prototype.playerResize = function playerResize(size) {
     this.$fullscreenToggle.html('');
-    var icon = _utils.Fullscreen.isFullscreen() ? _shrink2.default : _expand2.default;
+    var icon = this.core.isFullscreen() ? _shrink2.default : _expand2.default;
     this.$fullscreenToggle.append(icon);
     this.applyButtonStyle(this.$fullscreenToggle);
     this.$el.find('.media-control').length !== 0 && this.$el.removeClass('w320');
@@ -36217,7 +36220,7 @@ var MediaControl = function (_UICorePlugin) {
   };
 
   MediaControl.prototype.updateCursorStyle = function updateCursorStyle(showing) {
-    if (showing) this.core.$el.removeClass('nocursor');else if (_utils.Fullscreen.isFullscreen()) this.core.$el.addClass('nocursor');
+    if (showing) this.core.$el.removeClass('nocursor');else if (this.core.isFullscreen()) this.core.$el.addClass('nocursor');
   };
 
   MediaControl.prototype.settingsUpdate = function settingsUpdate() {
@@ -36394,8 +36397,10 @@ var MediaControl = function (_UICorePlugin) {
    */
 
 
-  MediaControl.prototype.configure = function configure() {
-    this.options.chromeless ? this.disable() : this.enable();
+  MediaControl.prototype.configure = function configure(options) {
+    // Check if chromeless mode or if configure is called with new source(s)
+    if (this.options.chromeless || options.source || options.sources) this.disable();else this.enable();
+
     this.trigger(_events2.default.MEDIACONTROL_OPTIONS_CHANGE);
   };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clappr",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "An extensible media player for the web",
   "main": "./dist/clappr.js",
   "scripts": {

public/index.html

@@ -70,6 +70,9 @@
       <button class="run btn btn-primary">Run</button>
       <div id="console"> </div>
     </div>
+    <p>
+      <a href="/index.plainhtml5.html">Load Plain HTML5 Version</a>
+    </p>
   </section>
   <footer class="footer"></footer>
   <script>

public/index.plainhtml5.html

@@ -70,6 +70,9 @@
       <button class="run btn btn-primary">Run</button>
       <div id="console"> </div>
     </div>
+    <p>
+      <a href="/">Load Full Clappr Version</a>
+    </p>
   </section>
   <footer class="footer"></footer>
   <script>

public/stylesheets/style.css

@@ -41,7 +41,7 @@ body {
 }
 
 a:hover {
-  color: #fff;
+  color: #aaa;
   text-decoration: none;
 }
 

src/base/events.js

@@ -569,6 +569,7 @@ Events.CORE_ACTIVE_CONTAINER_CHANGED = 'core:active:container:changed'
  * Fired when the options were changed for the core
  *
  * @event CORE_OPTIONS_CHANGE
+ * @param {Object} new options provided to configure() method
  */
 Events.CORE_OPTIONS_CHANGE = 'core:options:change'
 /**

src/base/utils.js

@@ -55,13 +55,11 @@ export function formatTime(time, paddedHours) {
 }
 
 export const Fullscreen = {
-  isFullscreen: function() {
-    return !!(
-      document.webkitFullscreenElement ||
+  getFullscreenElement: function() {
+    return document.webkitFullscreenElement ||
       document.webkitIsFullScreen ||
       document.mozFullScreen ||
       document.msFullscreenElement
-    )
   },
   requestFullscreen: function(el) {
     if (el.requestFullscreen)

src/components/container/public/style.scss

@@ -3,7 +3,8 @@
   background-color: black;
   height: 100%;
   width: 100%;
-
+  max-width: 100%;
+
   .chromeless {
     cursor: default;
   }

src/components/core/core.js

@@ -142,7 +142,7 @@ export default class Core extends UIObject {
   }
 
   updateSize() {
-    Fullscreen.isFullscreen() ? this.setFullscreen() : this.setPlayerSize()
+    this.isFullscreen() ? this.setFullscreen() : this.setPlayerSize()
   }
 
   setFullscreen() {
@@ -240,7 +240,7 @@ export default class Core extends UIObject {
   }
 
   handleFullscreenChange() {
-    this.trigger(Events.CORE_FULLSCREEN, Fullscreen.isFullscreen())
+    this.trigger(Events.CORE_FULLSCREEN, this.isFullscreen())
     this.updateSize()
   }
 
@@ -308,13 +308,17 @@ export default class Core extends UIObject {
     return this.activeContainer && this.activeContainer.getPlaybackType()
   }
 
+  isFullscreen() {
+    return Fullscreen.getFullscreenElement() === (Browser.isiOS ? this.activeContainer.el : this.el)
+  }
+
   toggleFullscreen() {
-    if (!Fullscreen.isFullscreen()) {
-      Fullscreen.requestFullscreen(Browser.isiOS ? this.activeContainer.el : this.el)
-      !Browser.isiOS && this.$el.addClass('fullscreen')
-    } else {
+    if (this.isFullscreen()) {
       Fullscreen.cancelFullscreen()
       !Browser.isiOS && this.$el.removeClass('fullscreen nocursor')
+    } else {
+      Fullscreen.requestFullscreen(Browser.isiOS ? this.activeContainer.el : this.el)
+      !Browser.isiOS && this.$el.addClass('fullscreen')
     }
   }
 
@@ -338,7 +342,7 @@ export default class Core extends UIObject {
     const sources = options.source || options.sources
     sources && this.load(sources, options.mimeType || this.options.mimeType)
 
-    this.trigger(Events.CORE_OPTIONS_CHANGE)
+    this.trigger(Events.CORE_OPTIONS_CHANGE, options) // Trigger with newly provided options
     this.containers.forEach((container) => container.configure(this.options))
   }
 

src/plugins/end_video.js

@@ -1,6 +1,5 @@
 import Events from '../base/events'
 import CorePlugin from '../base/core_plugin'
-import { Fullscreen } from '../base/utils'
 
 export default class EndVideo extends CorePlugin {
   get name() { return 'end_video' }
@@ -20,7 +19,7 @@ export default class EndVideo extends CorePlugin {
 
   ended() {
     const exitOnEnd = typeof (this.core.options.exitFullscreenOnEnd) === 'undefined' || this.core.options.exitFullscreenOnEnd
-    if (exitOnEnd && Fullscreen.isFullscreen())
+    if (exitOnEnd && this.core.isFullscreen())
       this.core.toggleFullscreen()
 
   }

src/plugins/media_control/media_control.js

@@ -262,7 +262,7 @@ export default class MediaControl extends UICorePlugin {
 
   playerResize(size) {
     this.$fullscreenToggle.html('')
-    let icon = Fullscreen.isFullscreen() ? exitFullscreenIcon : fullscreenIcon
+    let icon = this.core.isFullscreen() ? exitFullscreenIcon : fullscreenIcon
     this.$fullscreenToggle.append(icon)
     this.applyButtonStyle(this.$fullscreenToggle)
     this.$el.find('.media-control').length !== 0 && this.$el.removeClass('w320')
@@ -506,7 +506,7 @@ export default class MediaControl extends UICorePlugin {
   updateCursorStyle(showing) {
     if (showing)
       this.core.$el.removeClass('nocursor')
-    else if (Fullscreen.isFullscreen())
+    else if (this.core.isFullscreen())
       this.core.$el.addClass('nocursor')
   }
 
@@ -664,8 +664,13 @@ export default class MediaControl extends UICorePlugin {
    * @method configure
    * @param {Object} options all the options to change in form of a javascript object
    */
-  configure() {
-    this.options.chromeless ? this.disable() : this.enable()
+  configure(options) {
+    // Check if chromeless mode or if configure is called with new source(s)
+    if (this.options.chromeless || options.source || options.sources)
+      this.disable()
+    else
+      this.enable()
+
     this.trigger(Events.MEDIACONTROL_OPTIONS_CHANGE)
   }
 

test/components/core_spec.js

@@ -55,7 +55,6 @@ describe('Core', function() {
       let fullScreenSpy
 
       beforeEach(() => {
-        sinon.stub(Fullscreen, 'isFullscreen').value(() => false)
         fullScreenSpy = sinon.spy(Fullscreen, 'requestFullscreen')
       })
 
@@ -75,10 +74,11 @@ describe('Core', function() {
 
         it('adds a class "fullscreen" to core element', () => {
           const spy = sinon.spy(this.core.$el, 'addClass')
+          sinon.stub(this.core, 'isFullscreen').returns(false)
+
           expect(spy).not.to.have.been.called
 
           this.core.toggleFullscreen()
-
           expect(spy).to.have.been.calledWith('fullscreen')
         })
       })
@@ -98,19 +98,20 @@ describe('Core', function() {
     })
 
     describe('when is in fullscreen', () => {
-      beforeEach(() => {
-        sinon.stub(Fullscreen, 'isFullscreen').value(() => true)
-      })
 
       it('calls Fullscreen.cancelFullscreen', () => {
         const spy = sinon.spy(Fullscreen, 'cancelFullscreen')
+        sinon.stub(Browser, 'isiOS').value(false)
+        sinon.stub(this.core, 'isFullscreen').returns(true)
+
         this.core.toggleFullscreen()
         expect(spy).to.have.been.called
       })
 
       describe('Browser.isiOS', () => {
         it('removes "fullscreen nocursor" classes from core element', () => {
           sinon.stub(Browser, 'isiOS').value(false)
+          sinon.stub(this.core, 'isFullscreen').returns(true)
           const spy = sinon.spy(this.core.$el, 'removeClass')
           expect(spy).not.to.have.been.called
 
@@ -120,6 +121,21 @@ describe('Core', function() {
         })
       })
     })
+    describe('Multiple instances', () => {
+      it('shouldn\'t toggle one instance fullscreen state when another one stops', () => {
+        const newInstance = new Core({})
+        const fakeContainer1 = document.createElement('div')
+        fakeContainer1.setAttribute('id', 'fakeContainer1')
+        newInstance.el = fakeContainer1
+
+        expect(this.core.isFullscreen()).to.equal(false)
+        expect(newInstance.isFullscreen()).to.equal(false)
+
+        sinon.stub(Fullscreen, 'getFullscreenElement').returns(fakeContainer1)
+        expect(this.core.isFullscreen()).to.equal(false)
+        expect(newInstance.isFullscreen()).to.equal(true)
+      })
+    })
   })
 
   describe('#enableResizeObserver', () => {