模糊插件添加支持判断

This commit is contained in:
zhw2590582 committed 2019-05-09 20:01:52 +08:00
1 parent 0eb028fbd4
commit cca41ae1fe
3 files changed
+3 -2

No files matched your search

+1
View File
@@ -51,6 +51,7 @@
var _art$constructor$util = art.constructor.utils,
errorHandle = _art$constructor$util.errorHandle,
clamp = _art$constructor$util.clamp;
errorHandle(CanvasRenderingContext2D && Object.prototype.hasOwnProperty.call(CanvasRenderingContext2D.prototype, 'filter'), 'artplayerPluginBlur: Your browser does not support canvas blur');
var player = art.player;
var blurUrlCache = '';
return {
+1 -1
View File
@@ -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 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":";;;;;;;;;;;;;CAAA,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE;GACzB,AAAiC;KAC/B,cAAc,GAAG,OAAO,EAAE,CAAC;IAC5B,AAIA;EACF,EAAEA,cAAI,EAAE,WAAW;GAClB,OAAO,SAAS,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE;KACxC,OAAO,IAAI,OAAO,CAAC,SAAS,OAAO,EAAE;OACnC,IAAI,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;OACtB,GAAG,CAAC,MAAM,GAAG,WAAW;SACtB,IAAI,CAAC,GAAG,GAAG,CAAC,YAAY,CAAC;SACzB,IAAI,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC;SAC1B,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;SAC9C,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC;SAC9B,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC;SAC/B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;SACjB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;SAClB,IAAI,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;SACtC,OAAO,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;SAC1C,OAAO,CAAC,SAAS;WACf,GAAG;WACH,CAAC,MAAM;WACP,CAAC,MAAM;WACP,CAAC,GAAG,MAAM,GAAG,CAAC;WACd,CAAC,GAAG,MAAM,GAAG,CAAC;UACf,CAACLine truncated
{"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 errorHandle(\n CanvasRenderingContext2D && Object.prototype.hasOwnProperty.call(CanvasRenderingContext2D.prototype, 'filter'),\n 'artplayerPluginBlur: Your browser does not support canvas blur',\n );\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","CanvasRenderingContext2D","Object","prototype","hasOwnProperty","call","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":";;;;;;;;;;;;;CAAA,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE;GACzB,AAAiC;KAC/B,cAAc,GAAG,OAAO,EAAE,CAAC;IAC5B,AAIA;EACF,EAAEA,cAAI,EAAE,WAAW;GAClB,OAAO,SAAS,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE;KACxC,OAAO,IAAI,OAAO,CAAC,SAAS,OAAO,EAAE;OACnC,IAAI,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;OACtB,GAAG,CAAC,MAAM,GAAG,WAAW;SACtB,IAAI,CAAC,GAAG,GAAG,CAAC,YAAY,CAAC;SACzB,IAAI,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC;SAC1B,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;SAC9C,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC;SAC9B,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC;SAC/B,MAAM,CAAC,KAAKLine truncated
+1 -1
View File
@@ -4,7 +4,7 @@ function artplayerPluginBlur(art) {
const { errorHandle, clamp } = art.constructor.utils;
errorHandle(
CanvasRenderingContext2D && Object.prototype.hasOwnProperty.call(CanvasRenderingContext2D.prototype, 'filter'),
'Your browser does not support canvas blur',
'artplayerPluginBlur: Your browser does not support canvas blur',
);
const { player } = art;
let blurUrlCache = '';