diff --git a/docs/thumbnail/css/common.css b/docs/thumbnail/css/common.css index e69de29bb..8cc895b40 100644 --- a/docs/thumbnail/css/common.css +++ b/docs/thumbnail/css/common.css @@ -0,0 +1,147 @@ +html, body { + height: 100%; +} + +::-webkit-input-placeholder { + color:#dadada; +} +:-moz-placeholder { + color:#dadada; +} +::-moz-placeholder { + color:#dadada; +} +:-ms-input-placeholder { + color:#dadada; +} + +.container { + height: 100%; + display: flex; + font-size: 14px; + color: #97a8be; +} + +.left-part { + width: 40%; + flex-direction: column; + border-right: 1px solid #ddd; + padding: 20px; + box-sizing: border-box; +} + +.left-part .upload { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 300px; + border: 2px dashed #d9d9d9; + text-align: center; + cursor: pointer; + border-radius: 3px; + margin-bottom: 10px; + box-sizing: border-box; +} + +.left-part .upload .file { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + outline: none; + opacity: 0; +} + +.left-part .artplayer { + display: none; + height: 300px; + margin-bottom: 10px; +} + +.left-part .result { + display: flex; + height: 30px; + line-height: 30px; + margin-bottom: 10px; +} + +.left-part .result .item { + display: flex; + height: 30px; + line-height: 30px; + margin-right: 20px; +} + +.left-part .result .item .name{ + width: 50px; +} + +.left-part .setup { + margin-bottom: 10px; +} + +.left-part .setup .item { + display: flex; + height: 30px; + line-height: 30px; + margin-bottom: 20px; +} + +.left-part .setup .item .name{ + width: 50px; +} + +.left-part .setup .item .input { + height: 30px; + width: 200px; + border-radius: 3px; + outline: none; + color: #687079; + border: 1px solid #d9d9d9; + padding: 0 10px; +} + +.left-part .btns { + display: flex; +} + +.left-part .btns .btn { + width: 120px; + height: 35px; + line-height: 35px; + text-align: center; + border-radius: 3px; + margin-right: 20px; + color: #fff; + cursor: pointer; +} + +.left-part .btns .btn.reset { + background: #97a8be; +} + +.left-part .btns .btn.download { + background: #3ca5ea; +} + +.left-part .btns .btn:hover { + opacity: .8; +} + +.rigth-part { + flex: 1; + padding: 20px; + box-sizing: border-box; +} + +.rigth-part .img { + width: 100%; + height: 100%; + border: 2px dashed #d9d9d9; + background-color: #f5f5f5; + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} \ No newline at end of file diff --git a/docs/thumbnail/index.html b/docs/thumbnail/index.html index 05e5b2baa..92990b82c 100644 --- a/docs/thumbnail/index.html +++ b/docs/thumbnail/index.html @@ -17,7 +17,48 @@
-
+
+
+ 点击上传视频文件, 支持格式：mp4、ogg、webm + +
+
+
+
+
长宽：
+ 0 x 0 +
+
+
时长：
+ 0s +
+
+
+
+
数量：
+ +
+
+
宽度：
+ +
+
+
高度：
+ +
+
+
纵数：
+ +
+
+
+
重置
+
下载
+
+
+
+
+
diff --git a/docs/thumbnail/js/common.js b/docs/thumbnail/js/common.js index 23a7c1299..f7c3862b4 100644 --- a/docs/thumbnail/js/common.js +++ b/docs/thumbnail/js/common.js @@ -1 +1,64 @@ -var thumbnail = new ArtplayerToolThumbnail('.artplayer-tool-thumbnail'); \ No newline at end of file +(function() { + var $upload = document.querySelector('.upload'); + var $file = document.querySelector('.file'); + var $artplayer = document.querySelector('.artplayer'); + var $aspectRatio = document.querySelector('.aspectRatio'); + var $duration = document.querySelector('.duration'); + var $number = document.querySelector('.number'); + var $width = document.querySelector('.width'); + var $height = document.querySelector('.height'); + var $column = document.querySelector('.column'); + + var thumbnail = new ArtplayerToolThumbnail({ + fileInput: $file, + callbackVideoUrl: function(url) { + $upload.style.display = 'none'; + $artplayer.style.display = 'block'; + restartArtplayer(); + }, + callbackThumbnailUrl: function (url) { + console.log(url); + } + }); + + function restartArtplayer() { + var number = Number($number.value); + var width = Number($width.value); + var height = Number($height.value); + var column = Number($column.value); + + Artplayer.instances.forEach(function(art) { + art.destroy(true); + }); + + var option = { + container: $artplayer, + url: thumbnail.videoUrl + }; + + if (thumbnail.thumbnailUrl) { + option.thumbnails = { + url: thumbnail.thumbnailUrl, + number: number, + width: width, + height: height, + column: column, + } + } + + var art = new Artplayer(option); + + art.on('firstCanplay', function() { + var $video = art.template.$video; + $aspectRatio.textContent = $video.videoWidth + ' x ' + $video.videoHeight; + $duration.textContent = $video.duration + 's'; + thumbnail.setup({ + videoElement: $video, + number: number, + width: width, + height: height, + column: column, + }); + }); + } +})(); diff --git a/docs/uncompiled/artplayer-tool-thumbnail.js b/docs/uncompiled/artplayer-tool-thumbnail.js index 9194475a3..94ced53bf 100644 --- a/docs/uncompiled/artplayer-tool-thumbnail.js +++ b/docs/uncompiled/artplayer-tool-thumbnail.js @@ -4,6 +4,44 @@ (factory((global['artplayer-tool-thumbnail'] = {}))); }(this, (function (exports) { 'use strict'; + function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; + } + + var defineProperty = _defineProperty; + + function _objectSpread(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : {}; + var ownKeys = Object.keys(source); + + if (typeof Object.getOwnPropertySymbols === 'function') { + ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { + return Object.getOwnPropertyDescriptor(source, sym).enumerable; + })); + } + + ownKeys.forEach(function (key) { + defineProperty(target, key, source[key]); + }); + } + + return target; + } + + var objectSpread = _objectSpread; + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); @@ -12,12 +50,86 @@ var classCallCheck = _classCallCheck; - var ArtplayerToolThumbnail = function ArtplayerToolThumbnail(el) { - classCallCheck(this, ArtplayerToolThumbnail); + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } - this.el = el; - console.log(this); - }; + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + var createClass = _createClass; + + function errorHandle(condition, msg) { + if (!condition) { + throw new Error(msg); + } + } + + var ArtplayerToolThumbnail = + /*#__PURE__*/ + function () { + function ArtplayerToolThumbnail(option) { + classCallCheck(this, ArtplayerToolThumbnail); + + if (option.fileInput) { + errorHandle(option.fileInput.tagName === 'INPUT' && option.fileInput.type === 'file', 'This fileInput is not a file input'); + } + + if (option.videoElement) { + errorHandle(option.fileInput.tagName === 'VIDEO', 'This videoElement is not a video element'); + } + + if (option.callbackVideoUrl) { + errorHandle(typeof option.callbackVideoUrl === 'function', 'This callbackVideoUrl is not a function'); + } + + if (option.callbackThumbnailUrl) { + errorHandle(typeof option.callbackThumbnailUrl === 'function', 'This callbackThumbnailUrl is not a function'); + } + + this.option = option; + this.init(); + } + + createClass(ArtplayerToolThumbnail, [{ + key: "init", + value: function init() { + var _this = this; + + var fileType = ['video/mp4', 'video/ogg', 'video/webm']; + this.option.fileInput.addEventListener('change', function () { + var file = _this.option.fileInput.files[0]; + + if (file) { + errorHandle(fileType.includes(file.type), "Only file types are supported: ".concat(fileType.toString())); + var videoUrl = URL.createObjectURL(file); + _this.videoUrl = videoUrl; + + if (_this.option.callbackVideoUrl) { + _this.option.callbackVideoUrl(videoUrl); + } + } + }); + } + }, { + key: "setup", + value: function setup() { + var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + this.option = objectSpread({}, this.option, option); + } + }]); + + return ArtplayerToolThumbnail; + }(); window.ArtplayerToolThumbnail = ArtplayerToolThumbnail; diff --git a/packages/artplayer-tool-thumbnail/src/index.js b/packages/artplayer-tool-thumbnail/src/index.js index d55b73888..04f64bc2d 100644 --- a/packages/artplayer-tool-thumbnail/src/index.js +++ b/packages/artplayer-tool-thumbnail/src/index.js @@ -1,11 +1,61 @@ import './index.scss'; +function errorHandle(condition, msg) { + if (!condition) { + throw new Error(msg); + } +} + class ArtplayerToolThumbnail { - constructor(el) { - this.el = el; - console.log(this); + constructor(option) { + if (option.fileInput) { + errorHandle( + option.fileInput.tagName === 'INPUT' && option.fileInput.type === 'file', + 'This fileInput is not a file input', + ); + } + + if (option.videoElement) { + errorHandle(option.fileInput.tagName === 'VIDEO', 'This videoElement is not a video element'); + } + + if (option.callbackVideoUrl) { + errorHandle(typeof option.callbackVideoUrl === 'function', 'This callbackVideoUrl is not a function'); + } + + if (option.callbackThumbnailUrl) { + errorHandle( + typeof option.callbackThumbnailUrl === 'function', + 'This callbackThumbnailUrl is not a function', + ); + } + + this.option = option; + this.init(); + } + + init() { + const fileType = ['video/mp4', 'video/ogg', 'video/webm']; + this.option.fileInput.addEventListener('change', () => { + const file = this.option.fileInput.files[0]; + if (file) { + errorHandle(fileType.includes(file.type), `Only file types are supported: ${fileType.toString()}`); + const videoUrl = URL.createObjectURL(file); + this.videoUrl = videoUrl; + if (this.option.callbackVideoUrl) { + this.option.callbackVideoUrl(videoUrl); + } + } + }); + } + + setup(option = {}) { + this.option = { + ...this.option, + ...option, + }; } } window.ArtplayerToolThumbnail = ArtplayerToolThumbnail; -export default ArtplayerToolThumbnail; \ No newline at end of file +export default ArtplayerToolThumbnail;