diff --git a/docs/assets/example/blur.js b/docs/assets/example/blur.js index b20bbbe03..8bcb1ee96 100644 --- a/docs/assets/example/blur.js +++ b/docs/assets/example/blur.js @@ -15,6 +15,7 @@ var art = new Artplayer({ width: '200px', height: '200px', margin: '-100px 0 0 -100px', + border: '1px solid rgba(255, 255, 255, 0.1)', }, mounted($layer) { art.plugins.artplayerPluginBlur.attach($layer); diff --git a/docs/uncompiled/artplayer-plugin-blur.js b/docs/uncompiled/artplayer-plugin-blur.js index 8e0277adc..5d3e64c22 100644 --- a/docs/uncompiled/artplayer-plugin-blur.js +++ b/docs/uncompiled/artplayer-plugin-blur.js @@ -52,6 +52,7 @@ errorHandle = _art$constructor$util.errorHandle, clamp = _art$constructor$util.clamp; var player = art.player; + var blurUrlCache = ''; return { name: 'artplayerPluginBlur', attach: function attach($ref) { @@ -61,9 +62,10 @@ $ref.style.transition = 'all .2s ease'; function hide() { + window.URL.revokeObjectURL(blurUrlCache); + $ref.classList.remove('artplayer-blur-show'); $ref.style.visibility = 'hidden'; $ref.style.opacity = '0'; - $ref.style.pointerEvents = 'none'; $ref.style.backgroundImage = 'none'; } @@ -72,17 +74,20 @@ left = _$ref$getBoundingClie.left, top = _$ref$getBoundingClie.top; - var time = player.currentTime; $ref.style.backgroundImage = 'none'; $ref.style.backgroundSize = "".concat(player.width, "px ").concat(player.height, "px"); $ref.style.backgroundPosition = "".concat(player.left - left, "px ").concat(player.top - top, "px"); - player.getScreenshotBlobUrl().then(function (url) { - blurImageUrl(url, clamp(radius, 0, 50)).then(function (img) { - if (time === player.currentTime) { - $ref.style.backgroundImage = "url(".concat(img, ")"); + var time = player.currentTime; + player.getScreenshotBlobUrl().then(function (screenshotBlobUrl) { + blurImageUrl(screenshotBlobUrl, clamp(radius, 0, 50)).then(function (blurUrl) { + window.URL.revokeObjectURL(screenshotBlobUrl); + + if (!player.playing && time === player.currentTime) { + blurUrlCache = blurUrl; + $ref.classList.add('artplayer-blur-show'); $ref.style.visibility = 'visible'; $ref.style.opacity = '1'; - $ref.style.pointerEvents = 'auto'; + $ref.style.backgroundImage = "url(".concat(blurUrl, ")"); } else { hide(); } @@ -92,7 +97,6 @@ hide(); art.on('video:pause', show); - art.on('video:ended', show); art.on('video:seeked', show); art.on('video:playing', hide); art.on('video:seeking', hide); diff --git a/docs/uncompiled/artplayer-plugin-blur.js.map b/docs/uncompiled/artplayer-plugin-blur.js.map index 97a715358..9a5b9966e 100644 --- a/docs/uncompiled/artplayer-plugin-blur.js.map +++ b/docs/uncompiled/artplayer-plugin-blur.js.map @@ -1 +1 @@ -{"version":3,"file":"artplayer-plugin-blur.js","sources":["../../packages/artplayer-plugin-blur/node_modules/blur-image-url/index.js","../../packages/artplayer-plugin-blur/src/index.js"],"sourcesContent":["(function(window, factory) {\n if (typeof exports === 'object') {\n module.exports = factory();\n } else if (typeof define === 'function' && define.amd) {\n define(factory);\n } else {\n window.blurImageUrl = factory();\n }\n})(this, function() {\n return function blurImageUrl(url, radius) {\n return new Promise(function(resolve) {\n var img = new Image();\n img.onload = function() {\n var w = img.naturalWidth;\n var h = img.naturalHeight;\n var canvas = document.createElement('canvas');\n canvas.style.width = w + 'px';\n canvas.style.height = h + 'px';\n canvas.width = w;\n canvas.height = h;\n var context = canvas.getContext('2d');\n context.filter = 'blur(' + radius + 'px)';\n context.drawImage(\n img,\n -radius,\n -radius,\n w + radius * 2,\n h + radius * 2\n );\n canvas.toBlob(function(blob) {\n resolve(URL.createObjectURL(blob));\n img.onload = null;\n });\n };\n img.src = url;\n });\n };\n});\n","import blurImageUrl from 'blur-image-url';\n\nfunction artplayerPluginBlur(art) {\n const { errorHandle, clamp } = art.constructor.utils;\n const { player } = art;\n return {\n name: 'artplayerPluginBlur',\n attach($ref, radius = 15) {\n errorHandle($ref instanceof Element, 'The attach element is not a dom element');\n $ref.style.backgroundRepeat = 'no-repeat';\n $ref.style.transition = 'all .2s ease';\n\n function hide() {\n $ref.style.visibility = 'hidden';\n $ref.style.opacity = '0';\n $ref.style.pointerEvents = 'none';\n $ref.style.backgroundImage = 'none';\n }\n\n function show() {\n const { left, top } = $ref.getBoundingClientRect();\n const time = player.currentTime;\n $ref.style.backgroundImage = 'none';\n $ref.style.backgroundSize = `${player.width}px ${player.height}px`;\n $ref.style.backgroundPosition = `${player.left - left}px ${player.top - top}px`;\n player.getScreenshotBlobUrl().then(url => {\n blurImageUrl(url, clamp(radius, 0, 50)).then(img => {\n if (time === player.currentTime) {\n $ref.style.backgroundImage = `url(${img})`;\n $ref.style.visibility = 'visible';\n $ref.style.opacity = '1';\n $ref.style.pointerEvents = 'auto';\n } else {\n hide();\n }\n });\n });\n }\n\n hide();\n art.on('video:pause', show);\n art.on('video:ended', show);\n art.on('video:seeked', show);\n art.on('video:playing', hide);\n art.on('video:seeking', hide);\n art.on('video:timeupdate', hide);\n },\n };\n}\n\nexport default artplayerPluginBlur;\n"],"names":["this","artplayerPluginBlur","art","constructor","utils","errorHandle","clamp","player","name","attach","$ref","radius","Element","style","backgroundRepeat","transition","hide","visibility","opacity","pointerEvents","backgroundImage","show","getBoundingClientRect","left","top","time","currentTime","backgroundSize","width","height","backgroundPosition","getScreenshotBlobUrl","then","url","blurImageUrl","img","on"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"artplayer-plugin-blur.js","sources":["../../packages/artplayer-plugin-blur/node_modules/blur-image-url/index.js","../../packages/artplayer-plugin-blur/src/index.js"],"sourcesContent":["(function(window, factory) {\n if (typeof exports === 'object') {\n module.exports = factory();\n } else if (typeof define === 'function' && define.amd) {\n define(factory);\n } else {\n window.blurImageUrl = factory();\n }\n})(this, function() {\n return function blurImageUrl(url, radius) {\n return new Promise(function(resolve) {\n var img = new Image();\n img.onload = function() {\n var w = img.naturalWidth;\n var h = img.naturalHeight;\n var canvas = document.createElement('canvas');\n canvas.style.width = w + 'px';\n canvas.style.height = h + 'px';\n canvas.width = w;\n canvas.height = h;\n var context = canvas.getContext('2d');\n context.filter = 'blur(' + radius + 'px)';\n context.drawImage(\n img,\n -radius,\n -radius,\n w + radius * 2,\n h + radius * 2\n );\n canvas.toBlob(function(blob) {\n resolve(URL.createObjectURL(blob));\n img.onload = null;\n });\n };\n img.src = url;\n });\n };\n});\n","import blurImageUrl from 'blur-image-url';\n\nfunction artplayerPluginBlur(art) {\n const { errorHandle, clamp } = art.constructor.utils;\n const { player } = art;\n let blurUrlCache = '';\n return {\n name: 'artplayerPluginBlur',\n attach($ref, radius = 15) {\n errorHandle($ref instanceof Element, 'The attach element is not a dom element');\n $ref.style.backgroundRepeat = 'no-repeat';\n $ref.style.transition = 'all .2s ease';\n\n function hide() {\n window.URL.revokeObjectURL(blurUrlCache);\n $ref.classList.remove('artplayer-blur-show');\n $ref.style.visibility = 'hidden';\n $ref.style.opacity = '0';\n $ref.style.backgroundImage = 'none';\n }\n\n function show() {\n const { left, top } = $ref.getBoundingClientRect();\n $ref.style.backgroundImage = 'none';\n $ref.style.backgroundSize = `${player.width}px ${player.height}px`;\n $ref.style.backgroundPosition = `${player.left - left}px ${player.top - top}px`;\n const time = player.currentTime;\n player.getScreenshotBlobUrl().then(screenshotBlobUrl => {\n blurImageUrl(screenshotBlobUrl, clamp(radius, 0, 50)).then(blurUrl => {\n window.URL.revokeObjectURL(screenshotBlobUrl);\n if (!player.playing && time === player.currentTime) {\n blurUrlCache = blurUrl;\n $ref.classList.add('artplayer-blur-show');\n $ref.style.visibility = 'visible';\n $ref.style.opacity = '1';\n $ref.style.backgroundImage = `url(${blurUrl})`;\n } else {\n hide();\n }\n });\n });\n }\n\n hide();\n art.on('video:pause', show);\n art.on('video:seeked', show);\n art.on('video:playing', hide);\n art.on('video:seeking', hide);\n art.on('video:timeupdate', hide);\n },\n };\n}\n\nexport default artplayerPluginBlur;\n"],"names":["this","artplayerPluginBlur","art","constructor","utils","errorHandle","clamp","player","blurUrlCache","name","attach","$ref","radius","Element","style","backgroundRepeat","transition","hide","window","URL","revokeObjectURL","classList","remove","visibility","opacity","backgroundImage","show","getBoundingClientRect","left","top","backgroundSize","width","height","backgroundPosition","time","currentTime","getScreenshotBlobUrl","then","screenshotBlobUrl","blurImageUrl","blurUrl","playing","add","on"],"mappings":"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"} \ No newline at end of file diff --git a/packages/artplayer-plugin-blur/src/index.js b/packages/artplayer-plugin-blur/src/index.js index a0d094b6a..3ea9b13a5 100644 --- a/packages/artplayer-plugin-blur/src/index.js +++ b/packages/artplayer-plugin-blur/src/index.js @@ -3,6 +3,7 @@ import blurImageUrl from 'blur-image-url'; function artplayerPluginBlur(art) { const { errorHandle, clamp } = art.constructor.utils; const { player } = art; + let blurUrlCache = ''; return { name: 'artplayerPluginBlur', attach($ref, radius = 15) { @@ -11,25 +12,28 @@ function artplayerPluginBlur(art) { $ref.style.transition = 'all .2s ease'; function hide() { + window.URL.revokeObjectURL(blurUrlCache); + $ref.classList.remove('artplayer-blur-show'); $ref.style.visibility = 'hidden'; $ref.style.opacity = '0'; - $ref.style.pointerEvents = 'none'; $ref.style.backgroundImage = 'none'; } function show() { const { left, top } = $ref.getBoundingClientRect(); - const time = player.currentTime; $ref.style.backgroundImage = 'none'; $ref.style.backgroundSize = `${player.width}px ${player.height}px`; $ref.style.backgroundPosition = `${player.left - left}px ${player.top - top}px`; - player.getScreenshotBlobUrl().then(url => { - blurImageUrl(url, clamp(radius, 0, 50)).then(img => { - if (time === player.currentTime) { - $ref.style.backgroundImage = `url(${img})`; + const time = player.currentTime; + player.getScreenshotBlobUrl().then(screenshotBlobUrl => { + blurImageUrl(screenshotBlobUrl, clamp(radius, 0, 50)).then(blurUrl => { + window.URL.revokeObjectURL(screenshotBlobUrl); + if (!player.playing && time === player.currentTime) { + blurUrlCache = blurUrl; + $ref.classList.add('artplayer-blur-show'); $ref.style.visibility = 'visible'; $ref.style.opacity = '1'; - $ref.style.pointerEvents = 'auto'; + $ref.style.backgroundImage = `url(${blurUrl})`; } else { hide(); } @@ -39,7 +43,6 @@ function artplayerPluginBlur(art) { hide(); art.on('video:pause', show); - art.on('video:ended', show); art.on('video:seeked', show); art.on('video:playing', hide); art.on('video:seeking', hide);