Merge branch 'release/0.3.4'

.babelrc

@@ -3,6 +3,7 @@
   "plugins": [
     "add-module-exports",
     ["transform-es2015-classes", {"loose": true}],
+    "transform-object-rest-spread",
     "transform-runtime"
   ]
 }

.eslintrc.js

@@ -26,7 +26,8 @@ module.exports = {
     },
     "extends": "eslint:recommended",
     "parserOptions": {
-        "sourceType": "module"
+        "sourceType": "module",
+        "ecmaVersion": 2018,
     },
     "rules": {
         "indent": [

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "clappr",
   "description": "An extensible media player for the web",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "homepage": "https://github.com/clappr/clappr",
   "authors": [
     "Globo.com"
@@ -24,6 +24,7 @@
     "babel-loader": "^7.1.3",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-es2015-classes": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
     "chai": "^4.1.2",

doc/API_EVENTS.md

@@ -3,7 +3,7 @@
 You can listen to several [events from Clappr](http://clappr.github.io/classes/Events.html).
 
 ```javascript
-// You can either listen some events this way
+// You can either listen to events fired from the player layer this way
 var player = new Clappr.Player({
   events: {
     onReady: function() { ... }, //Fired when the player is ready on startup
@@ -21,3 +21,11 @@ var player = new Clappr.Player({
 // or this way
 player.on(Clappr.Events.PLAYER_PLAY, function() { ... })
 ```
+
+If you want to listen for events from other layers, you need to add the bind for the specific scope.
+
+For example, the `CONTAINER_STATE_BUFFERING` event is triggered by the container, so if you want to listen for events from the container layer on your code, here is how:
+
+```javascript
+player.core.activeContainer.on(Clappr.Events.CONTAINER_STATE_BUFFERING, function() { ... })
+```

doc/BUILTIN_PLUGINS.md

@@ -71,20 +71,8 @@ Add `playbackNotSupportedMessage: 'Please try on a different browser'` to define
 ##### Preload
 In case you're loading a on demand video (mp4), it's possible to define the way the video will be preloaded according to [preload](http://www.stevesouders.com/blog/2013/04/12/html5-video-preload/) attribute options. Add `preload: <type>` on embed parameters. By default, Clappr will try to download only video metadata (`preload: 'metadata'`).
 
-##### HLS Buffer Length
-The default behavior for the HLS playback is to keep buffering indefinitely, even on VoD. This replicates the behavior for progressive download, which continues buffering when pausing the video, thus making the video available for playback even on slow networks. To change this behavior, add `maxMaxBufferLength: <value>` to embed parameters, where `value` is in seconds.
-
-```javascript
-hlsjsConfig: {
-  maxMaxBufferLength: value
-}
-```
-
-##### HLS level switch
-The default behavior for the HLS playback is to use [hls.currentLevel](https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlscurrentlevel) to switch current level. To change this behaviour and force HLS playback to use [hls.nextLevel](https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlsnextlevel), add `hlsUseNextLevel: true` to embed parameters. (default value is false)
-
-##### Playback configuration
-The configuration for the playback, it's still only compatible with `html5_video` playback.
+### Playback configuration
+The configuration for the playback, it's still only compatible with `html5_video` playback (and derived).
 
 ```javascript
 {
@@ -101,6 +89,44 @@ The configuration for the playback, it's still only compatible with `html5_video
   }
 }
 ```
+#### HLS configuration
+
+All options to configure the HLS playback should be under `playback`. Any specific settings for hls.js should be in the option `hlsjsConfig`:
+
+```javascript
+{
+  playback: {
+    hlsjsConfig: {
+      // hls.js specific options
+    }
+  }
+}
+```
+
+##### HLS level switch
+The default behavior for the HLS playback is to use [hls.currentLevel](https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlscurrentlevel) to switch current level. To change this behaviour and force HLS playback to use [hls.nextLevel](https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlsnextlevel), add `hlsUseNextLevel: true` to embed parameters. (default value is false)
+
+Ex:
+```javascript
+{
+  playback: {
+    hlsUseNextLevel: true
+  }
+}
+```
+
+##### HLS Buffer Length
+The default behavior for the HLS playback is to keep buffering indefinitely, even on VoD. This replicates the behavior for progressive download, which continues buffering when pausing the video, thus making the video available for playback even on slow networks. To change this behavior, add `maxMaxBufferLength: <value>` to embed parameters, where `value` is in seconds.
+
+```javascript
+{
+  playback: {
+    hlsjsConfig: {
+      maxMaxBufferLength: value
+    }
+  }
+}
+```
 
 ##### Closed Captions Plugin
 Customize the labels and title:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clappr",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "An extensible media player for the web",
   "main": "./dist/clappr.js",
   "scripts": {
@@ -32,6 +32,7 @@
     "babel-loader": "^7.1.3",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-es2015-classes": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
     "chai": "^4.1.2",

src/base/utils.js

@@ -312,6 +312,26 @@ export class DomRecycler {
 
 DomRecycler.options = { recycleVideo: false }
 
+export class DoubleEventHandler {
+  constructor(delay = 500) {
+    this.delay = delay
+    this.lastTime = 0
+  }
+
+  handle(event, cb, prevented = true) {
+    // Based on http://jsfiddle.net/brettwp/J4djY/
+    let currentTime = new Date().getTime()
+    let diffTime = currentTime - this.lastTime
+
+    if (diffTime < this.delay && diffTime > 0) {
+      cb()
+      prevented && event.preventDefault()
+    }
+
+    this.lastTime = currentTime
+  }
+}
+
 export default {
   Config,
   Fullscreen,
@@ -329,5 +349,6 @@ export default {
   now,
   removeArrayItem,
   canAutoPlayMedia,
-  Media
+  Media,
+  DoubleEventHandler
 }

src/components/container/container.js

@@ -9,6 +9,7 @@
 import Events from '../../base/events'
 import UIObject from '../../base/ui_object'
 import ErrorMixin from '../../base/error_mixin'
+import { DoubleEventHandler } from '../../base/utils'
 
 import './public/style.scss'
 
@@ -35,7 +36,7 @@ export default class Container extends UIObject {
     return {
       'click': 'clicked',
       'dblclick': 'dblClicked',
-      'doubleTap': 'dblClicked',
+      'touchend': 'dblTap',
       'contextmenu': 'onContextMenu',
       'mouseenter': 'mouseEnter',
       'mouseleave': 'mouseLeave'
@@ -124,6 +125,9 @@ export default class Container extends UIObject {
     this.isReady = false
     this.mediaControlDisabled = false
     this.plugins = [this.playback]
+    this.dblTapHandler = new DoubleEventHandler(500)
+    this.clickTimer = null
+    this.clickDelay = 200  // FIXME: could be a player option
     this.bindEvents()
   }
 
@@ -330,15 +334,34 @@ export default class Container extends UIObject {
   }
 
   clicked() {
-    if (!this.options.chromeless || this.options.allowUserInteraction)
-      this.trigger(Events.CONTAINER_CLICK, this, this.name)
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
+      // The event is delayed because it can be canceled by a double-click event
+      // An example of use is to prevent playback from pausing when switching to full screen
+      this.clickTimer = setTimeout(() => {
+        this.clickTimer && this.trigger(Events.CONTAINER_CLICK, this, this.name)
+      }, this.clickDelay)
+    }
+  }
 
+  cancelClicked() {
+    clearTimeout(this.clickTimer)
+    this.clickTimer = null
   }
 
   dblClicked() {
-    if (!this.options.chromeless || this.options.allowUserInteraction)
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
+      this.cancelClicked()
       this.trigger(Events.CONTAINER_DBLCLICK, this, this.name)
+    }
+  }
 
+  dblTap(evt) {
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
+      this.dblTapHandler.handle(evt, () => {
+        this.cancelClicked()
+        this.trigger(Events.CONTAINER_DBLCLICK, this, this.name)
+      })
+    }
   }
 
   onContextMenu(event) {

src/components/player.js

@@ -295,7 +295,7 @@ export default class Player extends BaseObject {
     else
       this._onReady()
 
-    this.listenTo(this.core.activeContainer, Events.CORE_ACTIVE_CONTAINER_CHANGED, this._containerChanged)
+    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this._containerChanged)
     this.listenTo(this.core, Events.CORE_FULLSCREEN, this._onFullscreenChange)
     this.listenTo(this.core, Events.CORE_RESIZE, this._onResize)
     return this

src/playbacks/hls/hls.js

@@ -32,7 +32,7 @@ export default class HLS extends HTML5VideoPlayback {
   set currentLevel(id) {
     this._currentLevel = id
     this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START)
-    if (this.options.hlsUseNextLevel)
+    if (this.options.playback.hlsUseNextLevel)
       this._hls.nextLevel = this._currentLevel
     else
       this._hls.currentLevel = this._currentLevel
@@ -110,7 +110,7 @@ export default class HLS extends HTML5VideoPlayback {
   constructor(...args) {
     super(...args)
     // backwards compatibility (TODO: remove on 0.3.0)
-    this.options.playback || (this.options.playback = this.options)
+    this.options.playback = { ...this.options, ...this.options.playback }
     this._minDvrSize = typeof (this.options.hlsMinimumDvrSize) === 'undefined' ? 60 : this.options.hlsMinimumDvrSize
     // The size of the start time extrapolation window measured as a multiple of segments.
     // Should be 2 or higher, or 0 to disable. Should only need to be increased above 2 if more than one segment is

src/playbacks/html5_video/html5_video.js

@@ -273,6 +273,7 @@ export default class HTML5Video extends Playback {
     this._stopped = true
     // src will be added again in play()
     this.el.removeAttribute('src')
+    this.el.load() // load with no src to stop loading of the previous source and avoid leaks
     this._stopPlayheadMovingChecks()
     this._handleBufferingEvents()
     this.trigger(Events.PLAYBACK_STOP)
@@ -441,6 +442,7 @@ export default class HTML5Video extends Playback {
     this.handleTextTrackChange && this.el.textTracks.removeEventListener('change', this.handleTextTrackChange)
     super.destroy()
     this.el.removeAttribute('src')
+    this.el.load() // load with no src to stop loading of the previous source and avoid leaks
     this._src = null
     DomRecycler.garbage(this.$el)
   }

test/base/utils_spec.js

@@ -266,4 +266,20 @@ describe('Utils', function() {
       expect(video1[0]).to.be.equal(video2[0])
     })
   })
+
+  describe('DoubleEventHandler', function() {
+    it('handle double event', function() {
+      const delay = 500
+      const handler = new utils.DoubleEventHandler(delay)
+      const spy = sinon.spy()
+      const evt = new Event('touchend')
+
+      handler.handle(evt, spy)
+      expect(spy).to.not.have.been.called
+      setTimeout(() => {
+        handler.handle(evt, spy)
+        expect(spy).to.have.been.calledOnce
+      }, delay/2)
+    })
+  })
 })

test/playbacks/hls_spec.js

@@ -45,7 +45,7 @@ describe('HLS playback', function() {
     it('should set options.playback as a reference to options if options.playback not set', function() {
       let options = { src: 'http://clappr.io/video.m3u8' },
         hls = new HLS(options)
-      expect(hls.options.playback).to.be.equal(hls.options)
+      expect(hls.options.playback).to.deep.equal(hls.options)
       options = { src: 'http://clappr.io/video.m3u8', playback: { test: true } }
       hls = new HLS(options)
       expect(hls.options.playback.test).to.be.equal(true)

yarn.lock

@@ -1036,6 +1036,11 @@ babel-plugin-syntax-exponentiation-operator@^6.8.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
   integrity sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=
 
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+  integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
+
 babel-plugin-syntax-trailing-function-commas@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
@@ -1249,6 +1254,14 @@ babel-plugin-transform-exponentiation-operator@^6.22.0:
     babel-plugin-syntax-exponentiation-operator "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-object-rest-spread@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
 babel-plugin-transform-regenerator@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"