clappr - npm Package Compare versions

Comparing version 0.2.39 to 0.2.40

bower.json

@@ -32,3 +32,3 @@ {
     "gulp": "^3.8.1",
-    "hls.js": "^0.5.10",
+    "hls.js": "^0.5.11",
     "html-loader": "^0.4.3",
@@ -35,0 +35,0 @@ "isparta": "^4.0.0",

package.json

 {
   "name": "clappr",
-  "version": "0.2.39",
+  "version": "0.2.40",
   "description": "An extensible media player for the web",
@@ -44,3 +44,3 @@ "main": "./src/main.js",
     "gulp": "^3.8.1",
-    "hls.js": "^0.5.10",
+    "hls.js": "^0.5.11",
     "html-loader": "^0.4.3",
@@ -47,0 +47,0 @@ "isparta": "^4.0.0",

README.md

@@ -97,4 +97,7 @@ [![npm version](https://badge.fury.io/js/clappr.svg)](http://badge.fury.io/js/clappr)
 ##### Chromeless
-Add `chromeless: 'true'` if you want the player to act in chromeless mode.
+Add `chromeless: true` if you want the player to act in chromeless mode.
 
+##### Allow user interaction (in chromeless mode)
+Add `allowUserInteraction: true` if you want the player to handle clicks/taps when in chromeless mode. By default it's set to `false` on desktop browsers, and `true` on mobile browsers (due to playback start only being allowed when started through user interaction).
+
 ##### Mute
@@ -101,0 +104,0 @@ Add `mute: true` if you want to start player with no sound.

src/components/container/container.js

@@ -275,11 +275,17 @@ // Copyright 2014 Globo.com Player authors. All rights reserved.
   clicked() {
-    this.trigger(Events.CONTAINER_CLICK, this, this.name)
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
+      this.trigger(Events.CONTAINER_CLICK, this, this.name)
+    }
   }
 
   dblClicked() {
-    this.trigger(Events.CONTAINER_DBLCLICK, this, this.name)
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
+      this.trigger(Events.CONTAINER_DBLCLICK, this, this.name)
+    }
   }
 
   onContextMenu() {
-    this.trigger(Events.CONTAINER_CONTEXTMENU, this, this.name)
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
+      this.trigger(Events.CONTAINER_CONTEXTMENU, this, this.name)
+    }
   }
@@ -346,7 +352,11 @@
   mouseEnter() {
-    this.trigger(Events.CONTAINER_MOUSE_ENTER)
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
+      this.trigger(Events.CONTAINER_MOUSE_ENTER)
+    }
   }
 
   mouseLeave() {
-    this.trigger(Events.CONTAINER_MOUSE_LEAVE)
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
+      this.trigger(Events.CONTAINER_MOUSE_LEAVE)
+    }
   }
@@ -377,2 +387,10 @@
 
+  updateStyle() {
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
+      this.$el.removeClass('chromeless')
+    } else {
+      this.$el.addClass('chromeless')
+    }
+  }
+
   /**
@@ -385,2 +403,3 @@ * enables to configure the container after its creation
     this.options = $.extend(this.options, options)
+    this.updateStyle()
     this.trigger(Events.CONTAINER_OPTIONS_CHANGE)
@@ -393,4 +412,5 @@ }
     this.$el.append(this.playback.render().el)
+    this.updateStyle()
     return this
   }
 }

src/components/player.js

@@ -9,2 +9,3 @@ // Copyright 2014 Globo.com Player authors. All rights reserved.
 import Events from 'base/events'
+import Browser from 'components/browser'
 import CoreFactory from 'components/core_factory'
@@ -106,2 +107,4 @@ import Loader from 'components/loader'
    * player acts in chromeless mode **default**: `false`
+   * @param {Boolean} [options.allowUserInteraction]
+   * whether or not the player should handle click events when in chromeless mode **default**: `false` on desktops browsers, `true` on mobile.
    * @param {Boolean} [options.muted]
@@ -134,3 +137,3 @@ * start the video muted **default**: `false`
    * @param {String} [options.watermarkLink]
-   * `watermarkLink: 'http://example.net/'` - define URL to open when the watermark is clicked. If not provided watermark will not be clickable. 
+   * `watermarkLink: 'http://example.net/'` - define URL to open when the watermark is clicked. If not provided watermark will not be clickable.
    * @param {Boolean} [options.disableVideoTagContextMenu]
@@ -152,3 +155,3 @@ * disables the context menu (right click) on the video element if a HTML5Video playback is used.
     super(options)
-    var defaultOptions = {playerId: uniqueId(""), persistConfig: true, width: 640, height: 360, baseUrl: baseUrl}
+    var defaultOptions = {playerId: uniqueId(""), persistConfig: true, width: 640, height: 360, baseUrl: baseUrl, allowUserInteraction: Browser.isMobile}
     this.options = $.extend(defaultOptions, options)
@@ -155,0 +158,0 @@ this.options.sources = this.normalizeSources(options)

src/playbacks/flashls/flashls.js

@@ -639,3 +639,3 @@ // Copyright 2014 Globo.com Player authors. All rights reserved.
     for (var index = 0 ; index < levelsLength ; index++) {
-      this._levels.push({id: index, label: `${levels[index].height}p`})
+      this._levels.push({id: index, label: `${levels[index].height}p`, level: levels[index]})
     }
@@ -642,0 +642,0 @@ this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels)

src/playbacks/hls/hls.js

@@ -156,3 +156,3 @@ // Copyright 2014 Globo.com Player authors. All rights reserved.
     this._levels = this.hls.levels.map((level, index) => {
-      return {id: index , label: `${level.bitrate/1000}Kbps`
+      return {id: index, level: level, label: `${level.bitrate/1000}Kbps`
     }})
@@ -193,2 +193,5 @@ this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels)
   onLevelSwitch(evt, data) {
+    if (!this.levels.length) {
+      this.fillLevels()
+    }
     this.trigger(Events.PLAYBACK_LEVEL_SWITCH_END)
@@ -195,0 +198,0 @@ this.trigger(Events.PLAYBACK_LEVEL_SWITCH, data)

src/plugins/click_to_pause/click_to_pause.js

@@ -8,3 +8,2 @@ //Copyright 2014 Globo.com Player authors. All rights reserved.
 import Playback from 'base/playback'
-import Browser from 'components/browser'
 
@@ -19,6 +18,4 @@ export default class ClickToPausePlugin extends ContainerPlugin {
   bindEvents() {
-    if (!this.options.chromeless && !Browser.isMobile) {
-      this.listenTo(this.container, Events.CONTAINER_CLICK, this.click)
-      this.listenTo(this.container, Events.CONTAINER_SETTINGSUPDATE, this.settingsUpdate)
-    }
+    this.listenTo(this.container, Events.CONTAINER_CLICK, this.click)
+    this.listenTo(this.container, Events.CONTAINER_SETTINGSUPDATE, this.settingsUpdate)
   }
@@ -25,0 +22,0 @@

src/plugins/poster/poster.js

@@ -68,12 +68,9 @@ //Copyright 2014 Globo.com Player authors. All rights reserved.
   showPlayButton(show) {
-    if (!this.options.chromeless) {
-      if (show) {
-        this.$playButton.show()
-        this.$el.addClass("clickable")
-        this.updateSize()
-      }
-      else {
-        this.$playButton.hide()
-        this.$el.removeClass("clickable")
-      }
+    if (show && (!this.options.chromeless || this.options.allowUserInteraction)) {
+      this.$playButton.show()
+      this.$el.addClass("clickable")
+      this.updateSize()
+    } else {
+      this.$playButton.hide()
+      this.$el.removeClass("clickable")
     }
@@ -83,3 +80,3 @@ }
   clicked() {
-    if (!this.options.chromeless) {
+    if (!this.options.chromeless || this.options.allowUserInteraction) {
       this.playRequested = true
@@ -117,4 +114,3 @@ this.update()
       this.showPlayButton(showPlayButton)
-    }
-    else {
+    } else {
       this.container.enableMediaControl()
@@ -121,0 +117,0 @@ if (this.shouldHideOnPlay()) {

yuidoc.json

 {
   "name": "Clappr",
   "description": "An extensible media player for the web",
-  "version": "0.2.39",
+  "version": "0.2.40",
   "url": "https://github.com/clappr/clappr",
@@ -6,0 +6,0 @@ "logo": "https://cloud.githubusercontent.com/assets/244265/6373134/a845eb50-bce7-11e4-80f2-592ba29972ab.png",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of lines in readme file

321

increased by0.94%

Number of medium supply chain risk alerts

11

decreased by-8.33%

Worsened metrics

Total package byte prevSize

5799376

decreased by-21.6%

Number of package files

148

decreased by-22.51%

Lines of code

36004

decreased by-8.55%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

9

increased by350%

No dependency changes