@hola.org/videojs-thumbnails - npm Package Compare versions

Comparing version 0.1.1-5 to 0.1.1-6

package.json

 {
   "name": "@hola.org/videojs-thumbnails",
-  "version": "0.1.1-5",
+  "version": "0.1.1-6",
   "description": "progress bar thumbnails plugin for video.js",
@@ -5,0 +5,0 @@ "main": "videojs.thumbnails.js",

videojs.thumbnails.js

 (function() {
+  'use strict';
   var defaults = {
@@ -85,27 +86,14 @@ 0: {
       return options;
-    };
-
-  /**
-   * register the thubmnails plugin
-   */
-  videojs.plugin('thumbnails', function(options) {
-    var div, settings, img, player, progressControl, duration, moveListener, moveCancel;
-    options = options && unfoldSpritesConf(options);
-    settings = extend({}, defaults, options);
-    player = this;
-
-    (function() {
-      var progressControl, addFakeActive, removeFakeActive;
+    },
+    androidHack = function() {
       // Android doesn't support :active and :hover on non-anchor and non-button elements
       // so, we need to fake the :active selector for thumbnails to show up.
       if (navigator.userAgent.toLowerCase().indexOf("android") !== -1) {
-        progressControl = player.controlBar.progressControl;
-
-        addFakeActive = function() {
+        var progressControl = player.controlBar.progressControl;
+        var addFakeActive = function() {
           progressControl.addClass('fake-active');
         };
-        removeFakeActive = function() {
+        var removeFakeActive = function() {
           progressControl.removeClass('fake-active');
         };
-
         progressControl.on('touchstart', addFakeActive);
@@ -115,12 +103,26 @@ progressControl.on('touchend', removeFakeActive);
       }
-    })();
+    };
 
+  /**
+   * register the thubmnails plugin
+   */
+  videojs.plugin('thumbnails', function(options) {
+    var player = this;
+    options = options && unfoldSpritesConf(options);
+    if (player._thumbs) {
+      player._thumbs.settings = extend({}, defaults, options);
+      return;
+    }
+    player._thumbs = {};
+    player._thumbs.settings = extend({}, defaults, options);
+    androidHack();
+
     // create the thumbnail
-    div = document.createElement('div');
+    var div = document.createElement('div');
     div.className = 'vjs-thumbnail-holder';
-    img = document.createElement('img');
+    var img = document.createElement('img');
     div.appendChild(img);
-    img.src = settings['0'].src;
+    img.src = player._thumbs.settings['0'].src;
     img.className = 'vjs-thumbnail';
-    extend(img.style, settings['0'].style);
+    extend(img.style, player._thumbs.settings['0'].style);
 
@@ -135,3 +137,3 @@ // center the thumbnail over the cursor if an offset wasn't provided
     // keep track of the duration to calculate correct thumbnail to display
-    duration = player.duration();
+    var duration = player.duration();
 
@@ -149,3 +151,3 @@ // when the container is MP4
     // add the thumbnail to the player
-    progressControl = player.controlBar.progressControl;
+    var progressControl = player.controlBar.progressControl;
     var el = progressControl.el();
@@ -157,10 +159,8 @@ if (el.firstChild)
 
-    moveListener = function(event) {
-      var mouseTime, time, active, left, setting, pageX, right, width, halfWidth, pageXOffset, clientRect;
-      active = 0;
-      pageXOffset = getScrollOffset().x;
-      clientRect = offsetParent(progressControl.el()).getBoundingClientRect();
-      right = (clientRect.width || clientRect.right) + pageXOffset;
+    var moveListener = function(event) {
+      var pageXOffset = getScrollOffset().x;
+      var clientRect = offsetParent(progressControl.el()).getBoundingClientRect();
+      var right = (clientRect.width || clientRect.right) + pageXOffset;
 
-      pageX = event.pageX;
+      var pageX = event.pageX;
       if (event.changedTouches) {
@@ -171,5 +171,7 @@ pageX = event.changedTouches[0].pageX;
       // find the page offset of the mouse
-      left = pageX || (event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
+      var left = pageX || (event.clientX + document.body.scrollLeft +
+        document.documentElement.scrollLeft);
       // subtract the page offset of the positioned offset parent
-      left -= offsetParent(progressControl.el()).getBoundingClientRect().left + pageXOffset;
+      left -= offsetParent(progressControl.el()).getBoundingClientRect().left +
+        pageXOffset;
 
@@ -181,4 +183,6 @@ // apply updated styles to the thumbnail if necessary
       // relative to the progress control
-      mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration);
-      for (time in settings) {
+      var mouseTime = Math.floor((left - progressControl.el().offsetLeft) /
+        progressControl.width() * duration);
+      var active = 0, settings = player._thumbs.settings;
+      for (var time in settings) {
         if (mouseTime > time) {
@@ -188,3 +192,3 @@ active = Math.max(active, time);
       }
-      setting = settings[active];
+      var setting = settings[active];
       if (setting.src && img.src != setting.src) {
@@ -204,7 +208,8 @@ img.src = setting.src;
 
-      width = parseFloat(setting.width || settings[0].width)*scale;
-      height = parseFloat(setting.height || settings[0].height)*scale;
-      halfWidth = width / 2;
+      var width = parseFloat(setting.width || settings[0].width)*scale;
+      var height = parseFloat(setting.height || settings[0].height)*scale;
+      var halfWidth = width / 2;
 
-      // make sure that the thumbnail doesn't fall off the right side of the left side of the player
+      // make sure that the thumbnail doesn't fall off the right side of the
+      // left side of the player
       if ((left + halfWidth) > right) {
@@ -229,3 +234,3 @@ left = right - width;
 
-    moveCancel = function(event) {
+    var moveCancel = function(event) {
       div.style.display = 'none';
@@ -232,0 +237,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

84671

increased by0.14%

Lines of code

273

increased by3.02%

No dependency changes