add artplayer-tool-thumbnail demo

docs/assets/css/style.css

@@ -160,4 +160,7 @@ img {
     background: #2b2b2b;
     border-radius: 3px;
     padding: 20px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
 }

docs/assets/example/thumbnail.js

@@ -1 +1,79 @@
-console.log('thumbnail');
+var url = 'https://zhw2590582.github.io/assets-cdn';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    title: '【新海诚动画】『秒速5センチメートル』',
+    autoSize: true,
+    moreVideoAttr: {
+        crossOrigin: 'anonymous',
+    },
+    controls: [
+        {
+            name: 'thumbnail',
+            position: 'right',
+            html: '创建预览图',
+            mounted: $file => {
+                console.warn('暂时只支持本地视频，请点击创建预览图');
+
+                var thumbnail = new ArtplayerToolThumbnail({
+                    fileInput: $file,
+                    delay: 300,
+                    number: 60,
+                    width: 160,
+                    height: 90,
+                    column: 10,
+                });
+
+                thumbnail.on('file', function(file) {
+                    console.log('Read video successfully: ' + file.name);
+                });
+
+                thumbnail.on('video', function(video) {
+                    console.log('Video size: ' + video.videoWidth + ' x ' + video.videoHeight);
+                    console.log('Video duration: ' + video.duration + 's');
+                    thumbnail.start();
+                });
+
+                thumbnail.on('canvas', function(canvas) {
+                    console.log('Build canvas successfully');
+                    console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height);
+                    console.log('Preview density: ' + thumbnail.density + ' p/s');
+                });
+
+                thumbnail.on('update', function(url, percentage) {
+                    console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
+                    var $popups = document.querySelector('.popups');
+                    var $popinner = document.querySelector('.popinner');
+                    $popups.style.display = 'flex';
+                    $popinner.style.backgroundImage = 'url(' + url + ')';
+                });
+
+                thumbnail.on('download', function(name) {
+                    console.log('Start download preview: ' + name);
+                });
+
+                thumbnail.on('done', function() {
+                    $popups.style.display = 'none';
+                    thumbnail.download();
+                    console.log('Build preview image complete');
+                    Artplayer.instances.forEach(function(art) {
+                        art.destroy(true);
+                    });
+
+                    new Artplayer({
+                        container: '.artplayer-app',
+                        url: thumbnail.videoUrl,
+                        thumbnails: {
+                            url: thumbnail.thumbnailUrl,
+                            number: thumbnail.option.number,
+                            width: thumbnail.option.width,
+                            height: thumbnail.option.height,
+                            column: thumbnail.option.column,
+                        },
+                    });
+                    console.log('Build player complete');
+                });
+            },
+        },
+    ],
+});

docs/uncompiled/artplayer-tool-thumbnail.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (factory((global['artplayer-tool-thumbnail'] = {})));
-}(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global['artplayer-tool-thumbnail'] = factory());
+}(this, function () { 'use strict';
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -115,30 +115,34 @@
 
   var inherits = _inherits;
 
-  function E() {// Keep this empty so it's easier to inherit from
+  function E () {
+    // Keep this empty so it's easier to inherit from
     // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
   }
 
   E.prototype = {
-    on: function on(name, callback, ctx) {
+    on: function (name, callback, ctx) {
       var e = this.e || (this.e = {});
+
       (e[name] || (e[name] = [])).push({
         fn: callback,
         ctx: ctx
       });
+
       return this;
     },
-    once: function once(name, callback, ctx) {
-      var self = this;
 
-      function listener() {
+    once: function (name, callback, ctx) {
+      var self = this;
+      function listener () {
         self.off(name, listener);
         callback.apply(ctx, arguments);
       }
       listener._ = callback;
       return this.on(name, listener, ctx);
     },
-    emit: function emit(name) {
+
+    emit: function (name) {
       var data = [].slice.call(arguments, 1);
       var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
       var i = 0;
@@ -150,25 +154,34 @@
 
       return this;
     },
-    off: function off(name, callback) {
+
+    off: function (name, callback) {
       var e = this.e || (this.e = {});
       var evts = e[name];
       var liveEvents = [];
 
       if (evts && callback) {
         for (var i = 0, len = evts.length; i < len; i++) {
-          if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]);
+          if (evts[i].fn !== callback && evts[i].fn._ !== callback)
+            liveEvents.push(evts[i]);
         }
-      } // Remove event from queue to prevent memory leak
+      }
+
+      // Remove event from queue to prevent memory leak
       // Suggested by https://github.com/lazd
       // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
 
+      (liveEvents.length)
+        ? e[name] = liveEvents
+        : delete e[name];
 
-      liveEvents.length ? e[name] = liveEvents : delete e[name];
       return this;
     }
   };
+
   var tinyEmitter = E;
+  var TinyEmitter = E;
+  tinyEmitter.TinyEmitter = TinyEmitter;
 
   function sleep(ms) {
     return new Promise(function (resolve) {
@@ -208,8 +221,8 @@
       _this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option));
 
       _this.video = ArtplayerToolThumbnail.creatVideo();
-      _this.inputChange = _this.inputChange.bind(assertThisInitialized(assertThisInitialized(_this)));
-      _this.ondrop = _this.ondrop.bind(assertThisInitialized(assertThisInitialized(_this)));
+      _this.inputChange = _this.inputChange.bind(assertThisInitialized(_this));
+      _this.ondrop = _this.ondrop.bind(assertThisInitialized(_this));
 
       _this.option.fileInput.addEventListener('change', _this.inputChange);
 
@@ -241,7 +254,24 @@
             width = _this$option.width,
             height = _this$option.height,
             column = _this$option.column;
-        this.errorHandle(fileInput.tagName === 'INPUT' && fileInput.type === 'file', 'The \'fileInput\' is not a usable file input like: <input type="file">');
+        this.errorHandle(fileInput instanceof Element, "The 'fileInput' is not a Element");
+
+        if (!(fileInput.tagName === 'INPUT' && fileInput.type === 'file')) {
+          fileInput.style.position = 'relative';
+          var newFileInput = document.createElement('input');
+          newFileInput.type = 'file';
+          newFileInput.style.position = 'absolute';
+          newFileInput.style.width = '100%';
+          newFileInput.style.height = '100%';
+          newFileInput.style.left = '0';
+          newFileInput.style.top = '0';
+          newFileInput.style.right = '0';
+          newFileInput.style.bottom = '0';
+          newFileInput.style.opacity = '0';
+          fileInput.appendChild(newFileInput);
+          this.option.fileInput = newFileInput;
+        }
+
         ['delay', 'number', 'width', 'height', 'column'].forEach(function (item) {
           _this2.errorHandle(typeof _this2.option[item] === 'number', "The '".concat(item, "' is not a number"));
         });
@@ -275,7 +305,7 @@
           this.video.src = videoUrl;
           sleep(delay).then(function () {
             _this3.emit('video', _this3.video);
-          }).catch(function (err) {
+          })["catch"](function (err) {
             _this3.emit('error', err.message);
 
             console.error(err);
@@ -317,7 +347,7 @@
 
                   resolve();
                 });
-              }).catch(function (err) {
+              })["catch"](function (err) {
                 console.error(err);
               });
             });
@@ -329,14 +359,14 @@
             _this4.processing = false;
 
             _this4.emit('done');
-          }).catch(function (err) {
+          })["catch"](function (err) {
             _this4.processing = false;
 
             _this4.emit('error', err.message);
 
             console.error(err);
           });
-        }).catch(function (err) {
+        })["catch"](function (err) {
           _this4.processing = false;
 
           _this4.emit('error', err.message);
@@ -464,9 +494,7 @@
 
   window.ArtplayerToolThumbnail = ArtplayerToolThumbnail;
 
-  exports.default = ArtplayerToolThumbnail;
+  return ArtplayerToolThumbnail;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+}));
 //# sourceMappingURL=artplayer-tool-thumbnail.js.map

docs/uncompiled/artplayer-tool-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer-tool-thumbnail.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer-tool-thumbnail/node_modules/tiny-emitter/index.js","../../packages/artplayer-tool-thumbnail/src/utils.js","../../packages/artplayer-tool-thumbnail/src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function\");\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function E () {\n  // Keep this empty so it's easier to inherit from\n  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n  on: function (name, callback, ctx) {\n    var e = this.e || (this.e = {});\n\n    (e[name] || (e[name] = [])).push({\n      fn: callback,\n      ctx: ctx\n    });\n\n    return this;\n  },\n\n  once: function (name, callback, ctx) {\n    var self = this;\n    function listener () {\n      self.off(name, listener);\n      callback.apply(ctx, arguments);\n    };\n\n    listener._ = callback\n    return this.on(name, listener, ctx);\n  },\n\n  emit: function (name) {\n    var data = [].slice.call(arguments, 1);\n    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();\n    var i = 0;\n    var len = evtArr.length;\n\n    for (i; i < len; i++) {\n      evtArr[i].fn.apply(evtArr[i].ctx, data);\n    Line truncated
+{"version":3,"file":"artplayer-tool-thumbnail.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer-tool-thumbnail/node_modules/tiny-emitter/index.js","../../packages/artplayer-tool-thumbnail/src/utils.js","../../packages/artplayer-tool-thumbnail/src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function\");\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function E () {\n  // Keep this empty so it's easier to inherit from\n  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n  on: function (name, callback, ctx) {\n    var e = this.e || (this.e = {});\n\n    (e[name] || (e[name] = [])).push({\n      fn: callback,\n      ctx: ctx\n    });\n\n    return this;\n  },\n\n  once: function (name, callback, ctx) {\n    var self = this;\n    function listener () {\n      self.off(name, listener);\n      callback.apply(ctx, arguments);\n    };\n\n    listener._ = callback\n    return this.on(name, listener, ctx);\n  },\n\n  emit: function (name) {\n    var data = [].slice.call(arguments, 1);\n    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();\n    var i = 0;\n    var len = evtArr.length;\n\n    for (i; i < len; i++) {\n      evtArr[i].fn.apply(evtArr[i].ctx, data);\n    Line truncated

packages/artplayer-tool-thumbnail/src/index.js

@@ -39,10 +39,23 @@ class ArtplayerToolThumbnail extends Emitter {
         this.option = Object.assign({}, this.option, option);
         const { fileInput, delay, number, width, height, column } = this.option;
 
-        this.errorHandle(
-            fileInput.tagName === 'INPUT' && fileInput.type === 'file',
-            'The \'fileInput\' is not a usable file input like: <input type="file">',
-        );
+        this.errorHandle(fileInput instanceof Element, "The 'fileInput' is not a Element");
+
+        if (!(fileInput.tagName === 'INPUT' && fileInput.type === 'file')) {
+            fileInput.style.position = 'relative';
+            const newFileInput = document.createElement('input');
+            newFileInput.type = 'file';
+            newFileInput.style.position = 'absolute';
+            newFileInput.style.width = '100%';
+            newFileInput.style.height = '100%';
+            newFileInput.style.left = '0';
+            newFileInput.style.top = '0';
+            newFileInput.style.right = '0';
+            newFileInput.style.bottom = '0';
+            newFileInput.style.opacity = '0';
+            fileInput.appendChild(newFileInput);
+            this.option.fileInput = newFileInput;
+        }
 
         ['delay', 'number', 'width', 'height', 'column'].forEach(item => {
             this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`);