add artplayer-plugin-blur

docs/uncompiled/artplayer-plugin-blur.js

@@ -0,0 +1,101 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global = global || self, global.artplayerPluginBlur = factory());
+}(this, function () { 'use strict';
+
+	var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+	function createCommonjsModule(fn, module) {
+		return module = { exports: {} }, fn(module, module.exports), module.exports;
+	}
+
+	var blurImageUrl = createCommonjsModule(function (module, exports) {
+	(function(window, factory) {
+	  {
+	    module.exports = factory();
+	  }
+	})(commonjsGlobal, function() {
+	  return function blurImageUrl(url, radius) {
+	    return new Promise(function(resolve) {
+	      var img = new Image();
+	      img.onload = function() {
+	        var w = img.naturalWidth;
+	        var h = img.naturalHeight;
+	        var canvas = document.createElement('canvas');
+	        canvas.style.width = w + 'px';
+	        canvas.style.height = h + 'px';
+	        canvas.width = w;
+	        canvas.height = h;
+	        var context = canvas.getContext('2d');
+	        context.filter = `blur(${radius}px)`;
+	        context.drawImage(
+	          img,
+	          -radius,
+	          -radius,
+	          w + radius * 2,
+	          h + radius * 2
+	        );
+	        canvas.toBlob(function(blob) {
+	          resolve(URL.createObjectURL(blob));
+	          img.onload = null;
+	        });
+	      };
+	      img.src = url;
+	    });
+	  };
+	});
+	});
+
+	function artplayerPluginBlur(art) {
+	  var _art$constructor$util = art.constructor.utils,
+	      errorHandle = _art$constructor$util.errorHandle,
+	      clamp = _art$constructor$util.clamp;
+	  var player = art.player;
+	  return {
+	    name: 'artplayerPluginBlur',
+	    attach: function attach($ref) {
+	      var radius = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 15;
+	      errorHandle($ref instanceof Element, 'The attach element is not a dom element');
+	      $ref.style.backgroundRepeat = 'no-repeat';
+	      $ref.style.transition = 'all .2s ease';
+
+	      function show() {
+	        var _$ref$getBoundingClie = $ref.getBoundingClientRect(),
+	            left = _$ref$getBoundingClie.left,
+	            top = _$ref$getBoundingClie.top;
+
+	        $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) {
+	            $ref.style.backgroundImage = "url(".concat(img, ")");
+	            $ref.style.visibility = 'visible';
+	            $ref.style.opacity = '1';
+	            $ref.style.pointerEvents = 'all';
+	          });
+	        });
+	      }
+
+	      function hide() {
+	        $ref.style.visibility = 'hidden';
+	        $ref.style.opacity = '0';
+	        $ref.style.pointerEvents = 'none';
+	        $ref.style.backgroundImage = 'none';
+	      }
+
+	      hide();
+	      art.on('video:pause', show);
+	      art.on('video:ended', show);
+	      art.on('video:seeked', show);
+	      art.on('video:playing', hide);
+	      art.on('video:timeupdate', hide);
+	    }
+	  };
+	}
+
+	return artplayerPluginBlur;
+
+}));
+//# sourceMappingURL=artplayer-plugin-blur.js.map