From c9dfc883ab85e2a427cad8fe1a9e22d900d3f7c5 Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Thu, 6 Dec 2018 15:39:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90gif=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/gif/css/common.css | 4 +- docs/gif/js/common.js | 16 +-- docs/lab/js/example.js | 9 +- docs/uncompiled/artplayer-plugin-gif.js | 129 ++++++++++++++++- docs/uncompiled/artplayer.css | 12 +- docs/uncompiled/artplayer.js | 20 +-- packages/artplayer-plugin-gif/README.md | 62 +++++++- packages/artplayer-plugin-gif/src/index.js | 132 +++++++++++++++++- .../artplayer/src/player/screenshotMix.js | 10 +- packages/artplayer/src/style/bottom.scss | 2 + packages/artplayer/src/utils/index.js | 10 ++ 11 files changed, 352 insertions(+), 54 deletions(-) diff --git a/docs/gif/css/common.css b/docs/gif/css/common.css index 6851a54e2..4e7c98a94 100644 --- a/docs/gif/css/common.css +++ b/docs/gif/css/common.css @@ -38,12 +38,14 @@ html, body, .container { } .part-right .preview { + display: flex; + align-items: center; + justify-content: center; width: 500px; height: 500px; background: #f3f3f3; } .part-right .preview img { - width: 100%; max-width: 100%; } \ No newline at end of file diff --git a/docs/gif/js/common.js b/docs/gif/js/common.js index 75e6bb828..cc522d489 100644 --- a/docs/gif/js/common.js +++ b/docs/gif/js/common.js @@ -17,24 +17,18 @@ var art = new Artplayer({ container: '.artplayer', url: 'https://blog.zhw-island.com/assets-cdn/video/one-more-time-one-more-chance-480p.mp4', + title: '【新海诚动画】『秒速5センチメートル』', autoSize: true, controls: [ { name: 'preview', position: 'right', - html: '打开' + html: '打开', + mounted: $preview => { + art.plugins.localPreview.attach($preview); + }, }, ], plugins: [artplayerPluginGif] }); - - art.on('firstCanplay', () => { - var preview = document.querySelector('.art-control-preview'); - art.plugins.localPreview.attach(preview); - art.plugins.artplayerPluginGif.create({}, image => { - var animatedImage = document.createElement('img'); - animatedImage.src = image; - document.querySelector('.preview').appendChild(animatedImage); - }); - }); })(); diff --git a/docs/lab/js/example.js b/docs/lab/js/example.js index 5f2a52985..47d70a941 100644 --- a/docs/lab/js/example.js +++ b/docs/lab/js/example.js @@ -98,8 +98,10 @@ var art = new Artplayer({ { name: 'preview', position: 'right', - index: 1, - html: '打开' + html: '打开', + mounted: $preview => { + art.plugins.localPreview.attach($preview); + }, }, ], icons: { @@ -108,9 +110,6 @@ var art = new Artplayer({ }); art.on('firstCanplay', () => { - var preview = document.querySelector('.art-control-preview'); - art.plugins.localPreview.attach(preview); - art.on('resize', $player => { art.controls.quality.show(); art.controls.setting.show(); diff --git a/docs/uncompiled/artplayer-plugin-gif.js b/docs/uncompiled/artplayer-plugin-gif.js index 51a6e480b..1600412c3 100644 --- a/docs/uncompiled/artplayer-plugin-gif.js +++ b/docs/uncompiled/artplayer-plugin-gif.js @@ -2719,22 +2719,137 @@ }, typeof window !== "undefined" ? window.navigator : {}); }); + function i18nMix(i18n) { + i18n.update({ + 'zh-cn': { + 'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒', + 'Gif time is too short': 'Gif 时间太短', + 'Start creating gif, please wait': '开始创建 gif，请稍等', + 'Create gif successfully': '创建 gif 成功', + 'There is another gif in the processing': '正有另一个 gif 在创建中' + }, + 'zh-tw': { + 'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒', + 'Gif time is too short': 'Gif 時間太短', + 'Start creating gif, please wait': '開始創建 gif，請稍等', + 'Create gif successfully': '創建 gif 成功', + 'There is another gif in the processing': '正有另一個 gif 在創建中' + } + }); + } + function artplayerPluginGif(art) { + var _art$constructor$util = art.constructor.utils, + errorHandle = _art$constructor$util.errorHandle, + clamp = _art$constructor$util.clamp, + downloadImage = _art$constructor$util.downloadImage; + var i18n = art.i18n, + notice = art.notice, + layers = art.layers, + controls = art.controls, + player = art.player, + _art$option = art.option, + theme = _art$option.theme, + title = _art$option.title, + proxy = art.events.proxy, + $video = art.template.$video; + i18nMix(i18n); + layers.add({ + name: 'artplayer-plugin-gif-progress', + html: '
', + style: { + position: 'absolute', + top: '0', + left: '0', + height: '3px', + width: '0%', + 'background-color': theme + } + }); + var $progress = layers['artplayer-plugin-gif-progress'].$ref; + var isProcessing = false; + var pressStartTime = 0; + var progressTimer = null; + + function cleanTimer() { + $progress.style.width = '0%'; + clearTimeout(progressTimer); + progressTimer = null; + } + + function createGif() { + cleanTimer(); + var pressTime = new Date() - pressStartTime; + + if (isProcessing) { + notice.show(i18n.get('There is another gif in the processing')); + } else if (pressTime < 1000) { + notice.show(i18n.get('Gif time is too short')); + } else { + var numFrames = Math.floor(clamp(pressTime, 1000, 5000) / 100); + var videoWidth = $video.videoWidth, + videoHeight = $video.videoHeight; + art.plugins.artplayerPluginGif.create({ + numFrames: numFrames, + gifHeight: 200, + gifWidth: videoWidth / videoHeight * 200 + }, function (image) { + downloadImage(image, "".concat(title || 'unnamed', ".gif")); + }); + } + } + + controls.add({ + name: 'artplayer-plugin-gif', + position: 'right', + html: 'GIF', + mounted: function mounted($gif) { + proxy($gif, 'mousedown', function () { + cleanTimer(); + pressStartTime = new Date(); + notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds')); + + (function loop() { + progressTimer = setTimeout(function () { + var width = parseInt($progress.style.width, 10); + + if (width <= 100) { + $progress.style.width = "".concat(width + 1, "%"); + loop(); + } else { + createGif(); + } + }, 50); + })(); + }); + proxy($gif, 'mouseup', function () { + createGif(); + }); + } + }); return { name: 'artplayerPluginGif', + isProcessing: isProcessing, create: function create() { var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var callback = arguments.length > 1 ? arguments[1] : undefined; + isProcessing = true; + art.emit('artplayerPluginGif:create:start'); + notice.show("".concat(i18n.get('Start creating gif, please wait'), ": ").concat(config.numFrames / 10 || 1, " s"), false, 5000); gifshot.createGIF(objectSpread({}, config, { - video: [art.template.$video.src] + offset: player.currentTime, + video: [$video.src] }), function (obj) { - if (!obj.error) { - if (callback) { - callback(obj.image); - } - } else { - console.log(obj.error); + if (obj.error) { + notice.show(obj.errorMsg); + errorHandle(false, obj.errorMsg); + } else if (typeof callback === 'function') { + callback(obj.image); + notice.show(i18n.get('Create gif successfully')); } + + isProcessing = false; + art.emit('artplayerPluginGif:create:end'); }); } }; diff --git a/docs/uncompiled/artplayer.css b/docs/uncompiled/artplayer.css index 7eb9eb32c..48cb2939b 100644 --- a/docs/uncompiled/artplayer.css +++ b/docs/uncompiled/artplayer.css @@ -1,18 +1,18 @@ -.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer} .artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0} +.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer} .artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff} .artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all} -.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:60;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none} .artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask .art-playBig{position:absolute;right:30px;bottom:65px;opacity:.6} -.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;line-height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume:hover .art-volume-panel{width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-time{padding:0 10px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality{position:relative;z-index:30;padding:0 10px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality .art-qualitys{display:none;position:absolute;left:-15px;bottom:35px;width:100px;padding:5px 0;text-align:center;color:#fff;background:rgba(0,0,0,.7);border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality .art-qualitys .art-quality-item{height:30px;line-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality .art-qualitys .art-quality-item:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality:hover .art-qualitys{display:block}.artplayer-video-player.artplayer-controls-show .artplayer-bottom,.artplayer-video-player.artplayer-hover .artplayer-bottom{opacity:1;visibility:visible}.artplayer-video-player.artplayer-destroy .art-progress-indicator,.artplayer-video-player.artplayer-destroy .art-progress-tip,.artplayer-video-player.artplayer-error .art-progress-indicator,.artplayer-video-player.artplayer-error .art-progress-tip{display:none!important} -.artplayer-video-player .artplayer-contextmenu{display:none;position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none} +.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:60;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none} +.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;min-width:36px;line-height:36px;text-align:center;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume:hover .art-volume-panel{width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-time{padding:0 10px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality{position:relative;z-index:30;padding:0 10px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality .art-qualitys{display:none;position:absolute;left:-15px;bottom:35px;width:100px;padding:5px 0;text-align:center;color:#fff;background:rgba(0,0,0,.7);border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality .art-qualitys .art-quality-item{height:30px;line-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality .art-qualitys .art-quality-item:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality:hover .art-qualitys{display:block}.artplayer-video-player.artplayer-controls-show .artplayer-bottom,.artplayer-video-player.artplayer-hover .artplayer-bottom{opacity:1;visibility:visible}.artplayer-video-player.artplayer-destroy .art-progress-indicator,.artplayer-video-player.artplayer-destroy .art-progress-tip,.artplayer-video-player.artplayer-error .art-progress-indicator,.artplayer-video-player.artplayer-error .art-progress-tip{display:none!important} .artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:70;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px} -.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer} +.artplayer-video-player .artplayer-contextmenu{display:none;position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none} .artplayer-video-player.artplayer-hide-cursor *{cursor:none!important} .artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6} +.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer} +.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0} .artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill} .artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:flex;align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important} -.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0} .artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)} .artplayer-auto-size{display:flex;align-items:center;justify-content:center} button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:hover:after,[data-balloon][data-balloon-pos=down-left]:hover:before,[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down-right]:after{right:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-right]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;right:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-right]:hover:after,[data-balloon][data-balloon-pos=down-right]:hover:before,[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=left]:after{margin-right:11px;right:100%;top:50%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon][data-balloon-pos=left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");background-size:100% auto;width:6px;height:18px;margin-right:5px;right:100%;top:50%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon][data-balloon-pos=left]:hover:after,[data-balloon][data-balloon-pos=left]:hover:before,[data-balloon][data-balloon-pos=left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=left][data-balloon-visible]:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-balloon][data-balloon-pos=right]:after{left:100%;margin-left:11px;top:50%;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon][data-balloon-pos=right]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");background-size:100% auto;width:6px;height:18px;left:100%;margin-left:5px;top:50%;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon][data-balloon-pos=right]:hover:after,[data-balloon][data-balloon-pos=right]:hover:before,[data-balloon][data-balloon-pos=right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=right][data-balloon-visible]:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-balloon][data-balloon-length=small]:after{white-space:normal;width:80px}[data-balloon][data-balloon-length=medium]:after{white-space:normal;width:150px}[data-balloon][data-balloon-length=large]:after{white-space:normal;width:260px}[data-balloon][data-balloon-length=xlarge]:after{white-space:normal;width:380px}@media screen and (max-width:768px){[data-balloon][data-balloon-length=xlarge]:after{white-space:normal;width:90vw}}[data-balloon][data-balloon-length=fit]:after{white-space:normal;width:100%} \ No newline at end of file diff --git a/docs/uncompiled/artplayer.js b/docs/uncompiled/artplayer.js index 6791bce56..05f20f192 100644 --- a/docs/uncompiled/artplayer.js +++ b/docs/uncompiled/artplayer.js @@ -622,6 +622,15 @@ type: 'text/vtt' })); } + function downloadImage(url, name) { + var elink = document.createElement('a'); + setStyle(elink, 'display', 'none'); + elink.href = url; + elink.download = name; + document.body.appendChild(elink); + elink.click(); + document.body.removeChild(elink); + } var utils = /*#__PURE__*/Object.freeze({ ArtPlayerError: ArtPlayerError, @@ -644,7 +653,8 @@ inverseClass: inverseClass, tooltip: tooltip, srtToVtt: srtToVtt, - vttToBlob: vttToBlob + vttToBlob: vttToBlob, + downloadImage: downloadImage }); function validElement(paths, value, type) { @@ -1501,13 +1511,7 @@ canvas.height = $video.videoHeight; canvas.getContext('2d').drawImage($video, 0, 0); var dataUri = canvas.toDataURL('image/png'); - var elink = document.createElement('a'); - setStyle(elink, 'display', 'none'); - elink.href = dataUri; - elink.download = "".concat(option.title || 'artplayer', "_").concat(secondToTime($video.currentTime), ".png"); - document.body.appendChild(elink); - elink.click(); - document.body.removeChild(elink); + downloadImage(dataUri, "".concat(option.title || 'artplayer', "_").concat(secondToTime($video.currentTime), ".png")); return dataUri; } diff --git a/packages/artplayer-plugin-gif/README.md b/packages/artplayer-plugin-gif/README.md index 543c3a97a..c4e27d982 100644 --- a/packages/artplayer-plugin-gif/README.md +++ b/packages/artplayer-plugin-gif/README.md @@ -1,3 +1,63 @@ # artplayer-plugin-gif -Gif plugin for ArtPlayer +Gif plugin for ArtPlayer, use [gifshot](https://github.com/yahoo/gifshot) as a dependency + +## Demo + +[Checkout the demo](https://artplayer.org/gif/) from Github Pages + +## Install + +Install with `npm` + +``` +$ npm install artplayer-plugin-gif +``` + +Or install with `yarn` + +``` +$ yarn add artplayer-plugin-gif +``` + +```js +import artplayerPluginGif from 'artplayer-plugin-gif'; +``` + +Or umd builds are also available + +```html + +``` + +Will expose the global variable to `window.artplayerPluginGif`. + +## Usage + +This will add a button called "GIF" in the bottom control bar. + +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: 'path/to/video.mp4', + plugins: [artplayerPluginGif], +}); +``` + +Or can be called via api + +```js +art.plugins.artplayerPluginGif.create( + { + // some configuration + // https://github.com/yahoo/gifshot#options + }, + function(imageUrl) { + console.log(imageUrl); + }, +); +``` + +## License + +MIT © [Harvey Zack](https://www.zhw-island.com/) diff --git a/packages/artplayer-plugin-gif/src/index.js b/packages/artplayer-plugin-gif/src/index.js index 766cc4557..cb81ea917 100644 --- a/packages/artplayer-plugin-gif/src/index.js +++ b/packages/artplayer-plugin-gif/src/index.js @@ -1,22 +1,140 @@ import gifshot from 'gifshot'; +function i18nMix(i18n) { + i18n.update({ + 'zh-cn': { + 'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒', + 'Gif time is too short': 'Gif 时间太短', + 'Start creating gif, please wait': '开始创建 gif，请稍等', + 'Create gif successfully': '创建 gif 成功', + 'There is another gif in the processing': '正有另一个 gif 在创建中', + }, + 'zh-tw': { + 'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒', + 'Gif time is too short': 'Gif 時間太短', + 'Start creating gif, please wait': '開始創建 gif，請稍等', + 'Create gif successfully': '創建 gif 成功', + 'There is another gif in the processing': '正有另一個 gif 在創建中', + }, + }); +} + function artplayerPluginGif(art) { + const { errorHandle, clamp, downloadImage } = art.constructor.utils; + const { + i18n, + notice, + layers, + controls, + player, + option: { theme, title }, + events: { proxy }, + template: { $video }, + } = art; + + i18nMix(i18n); + + layers.add({ + name: 'artplayer-plugin-gif-progress', + html: '
', + style: { + position: 'absolute', + top: '0', + left: '0', + height: '3px', + width: '0%', + 'background-color': theme, + }, + }); + + const $progress = layers['artplayer-plugin-gif-progress'].$ref; + let isProcessing = false; + let pressStartTime = 0; + let progressTimer = null; + + function cleanTimer() { + $progress.style.width = '0%'; + clearTimeout(progressTimer); + progressTimer = null; + } + + function createGif() { + cleanTimer(); + const pressTime = new Date() - pressStartTime; + + if (isProcessing) { + notice.show(i18n.get('There is another gif in the processing')); + } else if (pressTime < 1000) { + notice.show(i18n.get('Gif time is too short')); + } else { + const numFrames = Math.floor(clamp(pressTime, 1000, 5000) / 100); + const { videoWidth, videoHeight } = $video; + art.plugins.artplayerPluginGif.create( + { + numFrames, + gifHeight: 200, + gifWidth: (videoWidth / videoHeight) * 200, + }, + image => { + downloadImage(image, `${title || 'unnamed'}.gif`); + }, + ); + } + } + + controls.add({ + name: 'artplayer-plugin-gif', + position: 'right', + html: 'GIF', + mounted: $gif => { + proxy($gif, 'mousedown', () => { + cleanTimer(); + pressStartTime = new Date(); + notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds')); + + (function loop() { + progressTimer = setTimeout(() => { + const width = parseInt($progress.style.width, 10); + if (width <= 100) { + $progress.style.width = `${width + 1}%`; + loop(); + } else { + createGif(); + } + }, 50); + })(); + }); + + proxy($gif, 'mouseup', () => { + createGif(); + }); + }, + }); + return { name: 'artplayerPluginGif', + isProcessing, create(config = {}, callback) { + isProcessing = true; + art.emit('artplayerPluginGif:create:start'); + notice.show(`${i18n.get('Start creating gif, please wait')}: ${config.numFrames / 10 || 1} s`, false, 5000); gifshot.createGIF( { ...config, - video: [art.template.$video.src], + offset: player.currentTime, + video: [$video.src], }, obj => { - if (!obj.error) { - if (callback) { - callback(obj.image); - } - } else { - console.log(obj.error); + if (obj.error) { + notice.show(obj.errorMsg); + errorHandle(false, obj.errorMsg); + } else if (typeof callback === 'function') { + callback(obj.image); + notice.show(i18n.get('Create gif successfully')); } + + isProcessing = false; + art.emit('artplayerPluginGif:create:end'); }, ); }, diff --git a/packages/artplayer/src/player/screenshotMix.js b/packages/artplayer/src/player/screenshotMix.js index 0a954ea8d..830d58cc9 100644 --- a/packages/artplayer/src/player/screenshotMix.js +++ b/packages/artplayer/src/player/screenshotMix.js @@ -1,4 +1,4 @@ -import { setStyle, secondToTime } from '../utils'; +import { secondToTime, downloadImage } from '../utils'; export default function screenshotMix(art, player) { const { @@ -13,13 +13,7 @@ export default function screenshotMix(art, player) { canvas.height = $video.videoHeight; canvas.getContext('2d').drawImage($video, 0, 0); const dataUri = canvas.toDataURL('image/png'); - const elink = document.createElement('a'); - setStyle(elink, 'display', 'none'); - elink.href = dataUri; - elink.download = `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`; - document.body.appendChild(elink); - elink.click(); - document.body.removeChild(elink); + downloadImage(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`); return dataUri; } diff --git a/packages/artplayer/src/style/bottom.scss b/packages/artplayer/src/style/bottom.scss index aa8d707be..d27cfc73c 100644 --- a/packages/artplayer/src/style/bottom.scss +++ b/packages/artplayer/src/style/bottom.scss @@ -136,7 +136,9 @@ opacity: .9; font-size: 12px; height: 36px; + min-width: 36px; line-height: 36px; + text-align: center; cursor: pointer; .art-icon { display: flex; diff --git a/packages/artplayer/src/utils/index.js b/packages/artplayer/src/utils/index.js index 2de572a34..91ac2512d 100644 --- a/packages/artplayer/src/utils/index.js +++ b/packages/artplayer/src/utils/index.js @@ -170,3 +170,13 @@ export function vttToBlob(vttText) { }), ); } + +export function downloadImage(url, name) { + const elink = document.createElement('a'); + setStyle(elink, 'display', 'none'); + elink.href = url; + elink.download = name; + document.body.appendChild(elink); + elink.click(); + document.body.removeChild(elink); +} \ No newline at end of file