alpha-video-player-js 1.1.0 → 1.3.0

package/dist/alpha-video-player-js.js

@@ -1 +1 @@
-var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};function e(e,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}function i(t,e,i,n){return new(i||(i=Promise))((function(o,r){function a(t){try{d(n.next(t))}catch(t){r(t)}}function s(t){try{d(n.throw(t))}catch(t){r(t)}}function d(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}d((n=n.apply(t,e||[])).next())}))}function n(t,e){var i,n,o,r,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(d){return function(s){if(i)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(i=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,n=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){a.label=s[1];break}if(6===s[0]&&a.label<o[1]){a.label=o[1],o=s;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(s);break}o[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],n=0}finally{i=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,d])}}}"function"==typeof SuppressedError&&SuppressedError;var o=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},r={landscape:{front:[0,1,.5,1,0,0,.5,0],back:[.5,1,1,1,.5,0,1,0]},portrait:{front:[0,1,1,1,0,.5,1,.5],back:[0,.5,1,.5,0,0,1,0]}},a={landscape_front:function(t,e){return[0,0,t,e]},landscape_back:function(t,e){return[t,0,t,e]},portrait_front:function(t,e){return[0,0,t,e]},portrait_back:function(t,e){return[0,e,t,e]}},s=function(t,e,i,n){var o="front"===e?"back":"front";return{imageCoords:a["".concat(t,"_").concat(e)](i,n),alphaImageCoords:a["".concat(t,"_").concat(o)](i,n)}},d=function(t,e,i){return"landscape"===t?"width"===e?2*i:i:"width"===e?i:2*i},h=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},c={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},l=function(){function t(t){if(this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=0,this.onCanPlayTimes=1,this.canPlay=!1,this.adaptAnimation=null,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");this.setConfig(t),this.container=t.container,this.canvas=function(t,e,i){var n=t.offsetWidth,r=t.offsetHeight,a=o(),s=e||n,d=i||r;s&&d||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var h=document.createElement("canvas");return h.width=s*a,h.height=d*a,h.style.width="100%",h.style.height="100%",h.style.pointerEvents="none",t.appendChild(h),h}(this.container,t.width,t.height);var e=this.canvas,i=e.width,n=e.height;this.canvasWidth=i,this.canvasHeight=n,t.src&&this.initVideo()}return Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.video)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.setConfig=function(t){t&&(this.config=Object.assign({},c,this.config||{},t))},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.playbackRate,n=t.muted,o=t.loop,r=t.crossOrigin,a=this.video=document.createElement("video");a.src=e,a.crossOrigin=null!=r?r:"anonymous",a.autoplay=!1,a.preload="auto",a.playbackRate=i,a.loop=o,a.muted=n,n&&a.setAttribute("muted",""),a.setAttribute("playsinline",""),a.setAttribute("webkit-playsinline",""),a.setAttribute("x-webkit-airplay",""),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.pointerEvents="none",document.body.appendChild(a),this.bindInstance(),this.addEvent(),a.load()},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this.drawFrame.bind(this);this.adaptAnimation||(this.adaptAnimation=this.initAdaptAnimation()),this.animationId=this.adaptAnimation(t),this.playing=!0},t.prototype.initAdaptAnimation=function(){var t=this,e=this.config,i=e.videoFrame,n=e.fps,o=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&i)return function(e){return t.video.requestVideoFrameCallback(e)};if(o){if(n){var r=-1;return function(e){return r++,o((function(){if(r%(60/n)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return o(t)}}var a=n>0?1e3/n:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,i=this.config;if(e){var n=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&i.videoFrame?this.video.cancelVideoFrameCallback(e):n?n(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}},t.prototype.play=function(t){var e,o;return i(this,void 0,void 0,(function(){var i,r;return n(this,(function(n){switch(n.label){case 0:h(this.video),t&&this.setConfig(t),n.label=1;case 1:return n.trys.push([1,3,,4]),[4,this.video.play()];case 2:return i=n.sent(),this.drawFrame(),[2,i];case 3:throw r=n.sent(),null===(o=(e=this.config).onError)||void 0===o||o.call(e,r),r;case 4:return[2]}}))}))},t.prototype.pause=function(){h(this.video),this.video.pause(),this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){h(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){h(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){h(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){h(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,i,n=this,r=n.video,a=n.config,s=n.canvas;if(this.videoWidth=r.videoWidth,this.videoHeight=r.videoHeight,a.autoResize&&s&&r.videoWidth>0&&r.videoHeight>0){var d=o(),h=(t=r.videoWidth,e=r.videoHeight,("landscape"===(i=a.orientation)?t/2:t)/("portrait"===i?e/2:e)),c=s.width/d,l=s.height/d,u=void 0;if("width"===a.autoResize||"height"===a.autoResize)u=a.autoResize;else u=h>=c/l?"width":"height";var p="width"===u?c:Math.round(l*h),v="width"===u?Math.round(c/h):l,f=v*d;p*d===this.canvasWidth&&f===this.canvasHeight||(!function(t,e,i){var n=o();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(s,p,v),this.canvasWidth=s.width,this.canvasHeight=s.height,this.onCanvasResized())}a.onLoad&&a.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,t.autoShow&&this.drawFrameOnce(),1===this.onCanPlayTimes&&t.onCanPlay&&t.onCanPlay(),1!==this.onCanPlayTimes&&t.loop&&t.onLoop&&t.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t=this.config;t.onPause&&t.onPause()},t.prototype.onEnded=function(){var t=this.config;this.video.currentTime=0,this.cancelDrawFrame(),t.onEnded&&t.onEnded()},t.prototype.onError=function(t){var e,i,n=this.config,o=this.video;n.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t),null===(i=n.onError)||void 0===i||i.call(n,t),this.destroy()},t.prototype.destroy=function(){var t,e,i;try{var n=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==n?void 0:n.onDestroy)||void 0===e||e.call(n),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(i=this.config)||void 0===i?void 0:i.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,i=t.onCanplay,n=t.onPlay,o=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=i.bind(this),this.onPlay=n.bind(this),this.onPause=o.bind(this),this.onEnded=r.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",i),e.addEventListener("canplaythrough",n),e.addEventListener("play",o),e.addEventListener("pause",r),e.addEventListener("ended",a),e.addEventListener("error",s)},t.prototype.removeEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",i),e.removeEventListener("play",o),e.removeEventListener("canplaythrough",n),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),u=function(t){function i(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initWebGLRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return e(i,t),i.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.viewport(0,0,t.width,t.height),this.vertexShader=this.initShader(e.VERTEX_SHADER,"#define GLSLIFY 1\nattribute vec4 a_Position;attribute vec2 a_Video_Texture_Position;attribute vec2 a_Alpha_Video_Texture_Position;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_Position=a_Position;v_Video_Texture_Position=a_Video_Texture_Position;v_Alpha_Video_Texture_Position=a_Alpha_Video_Texture_Position;}"),this.fragmentShader=this.initShader(e.FRAGMENT_SHADER,"precision lowp float;\n#define GLSLIFY 1\nuniform sampler2D u_Sampler;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_FragColor=vec4(texture2D(u_Sampler,v_Video_Texture_Position).rgb,texture2D(u_Sampler,v_Alpha_Video_Texture_Position).r);}"),this.program=this.initProgram(),this.texture=this.initTexture(),this.vertexBuffer=this.initVertexBuffer()},i.prototype.initShader=function(t,e){var i=this.gl,n=i.createShader(t);if(i.shaderSource(n,e),i.compileShader(n),this.config.debug){var o=i.getShaderParameter(n,i.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,o),o||console.log("[alpha-video-player-js] shader compile fail: ",t,i.getShaderInfoLog(n))}return n},i.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),this.config.debug){var i=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",i),i||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},i.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();return t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,1),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),e},i.prototype.initVertexBuffer=function(){var t=this,e=t.gl,i=t.program,n=t.config,o=function(t,e){var i="front"===e,n=[-1,1,1,1,-1,-1,1,-1],o=r[t][i?"front":"back"],a=r[t][i?"back":"front"],s=[];return n.forEach((function(t,e){e%2==0&&(s=s.concat(n.slice(e,e+2)).concat(o.slice(e,e+2)).concat(a.slice(e,e+2)))})),new Float32Array(s)}(n.orientation,n.side),a=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW);var s=o.BYTES_PER_ELEMENT,d=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*s,0),e.enableVertexAttribArray(d);var h=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(h,2,e.FLOAT,!1,6*s,2*s),e.enableVertexAttribArray(h);var c=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6*s,4*s),e.enableVertexAttribArray(c);var l=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(l,0),a},i.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},i.prototype.drawFrameOnce=function(){var t=this.gl,e=this.video;t&&e&&this.canPlay&&(t.clear(t.COLOR_BUFFER_BIT),t.texImage2D(t.TEXTURE_2D,0,t.RGB,t.RGB,t.UNSIGNED_BYTE,e),t.drawArrays(t.TRIANGLE_STRIP,0,4))},i.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},i.prototype.onEnded=function(){var e=this.gl,i=this.config;i.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),i.autoDestroy&&this.destroy()},i.prototype.destroy=function(){var e,i,n=this,o=n.canvas,r=n.gl,a=n.vertexShader,s=n.fragmentShader,d=n.texture,h=n.vertexBuffer,c=n.program;o&&r&&(t.prototype.destroy.call(this),null===(e=o.parentNode)||void 0===e||e.removeChild(o),r.detachShader(c,a),r.deleteShader(a),r.detachShader(c,s),r.deleteShader(s),r.deleteTexture(d),r.deleteBuffer(h),r.deleteProgram(c),null===(i=r.getExtension("WEBGL_lose_context"))||void 0===i||i.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},i}(l),p=function(t){function i(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initCanvasRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return e(i,t),i.prototype.initCanvasRender=function(){var t=this,e=t.canvas,i=t.canvasWidth,n=t.canvasHeight,o=t.config,r=o.orientation,a=o.side,h=document.createElement("canvas");this.tempCanvasWidth=h.width=d(r,"width",i),this.tempCanvasHeight=h.height=d(r,"height",n);var c=s(r,a,i,n),l=c.imageCoords,u=c.alphaImageCoords;this.imageCoords=l,this.alphaImageCoords=u,this.context2d=e.getContext("2d"),this.tempContext2d=h.getContext("2d")},i.prototype.onCanvasResized=function(){var t=this,e=t.canvasWidth,i=t.canvasHeight,n=t.config,o=n.orientation,r=n.side,a=document.createElement("canvas");this.tempCanvasWidth=a.width=d(o,"width",e),this.tempCanvasHeight=a.height=d(o,"height",i);var h=s(o,r,e,i),c=h.imageCoords,l=h.alphaImageCoords;this.imageCoords=c,this.alphaImageCoords=l,this.context2d=this.canvas.getContext("2d"),this.tempContext2d=a.getContext("2d")},i.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,i=t.tempContext2d,n=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.tempCanvasWidth,d=t.tempCanvasHeight,h=t.imageCoords,c=t.alphaImageCoords;if(e&&i&&n&&o&&r&&a&&s&&d&&h&&c){i.drawImage(n,0,0,r,a,0,0,s,d);for(var l=i.getImageData.apply(i,h),u=l.data,p=i.getImageData.apply(i,c).data,v=3;v<u.length;v+=4)u[v]=p[v-3];e.putImageData(l,0,0)}},i.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},i.prototype.onEnded=function(){var e=this,i=e.context2d,n=e.canvasWidth,o=e.canvasHeight,r=e.config;r.autoClear&&i.clearRect(0,0,n,o),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},i.prototype.destroy=function(){var e,i=this.canvas;i&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),this.canvas=null,this.context2d=null,this.tempContext2d=null,this.tempCanvasWidth=null,this.tempCanvasHeight=null,this.imageCoords=null,this.alphaImageCoords=null)},i}(l),v=function(){function t(t){if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new u(t);else{if(!document.createElement("canvas").getContext("2d"))throw new Error("[alpha-video-player-js]: Your browser does not support play. Please upgrade your browser and try again.");this.render=new p(t)}var e}return Object.defineProperty(t.prototype,"playing",{get:function(){return this.render.playing},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){return this.render.loop},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return i(this,void 0,void 0,(function(){return n(this,(function(e){return[2,this.render.play(t)]}))}))},t.prototype.pause=function(){this.render.pause()},t.prototype.destroy=function(){this.render.destroy()},t.prototype.reset=function(){this.render.reset()},t.prototype.setSrc=function(t){this.render.setSrc(t)},t.prototype.setCurrentTime=function(t){this.render.setCurrentTime(t)},t.prototype.setMute=function(t){this.render.setMute(t)},t.prototype.setLoop=function(t){this.render.setLoop(t)},t.prototype.setPlaybackRate=function(t){this.render.setPlaybackRate(t)},t}();export{v as default};
+var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};function e(e,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}function i(t,e,i,n){return new(i||(i=Promise))((function(o,r){function a(t){try{h(n.next(t))}catch(t){r(t)}}function s(t){try{h(n.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}h((n=n.apply(t,e||[])).next())}))}function n(t,e){var i,n,o,r,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(h){return function(s){if(i)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(i=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,n=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){a.label=s[1];break}if(6===s[0]&&a.label<o[1]){a.label=o[1],o=s;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(s);break}o[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],n=0}finally{i=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,h])}}}"function"==typeof SuppressedError&&SuppressedError;var o="start",r=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},a=function(t){if(void 0===t&&(t=1),"number"!=typeof t||!isFinite(t)||t<0||t>1)throw new Error("[alpha-video-player-js]: alphaScale must be a finite number between 0 and 1.");return t},s=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=o);var r=a(i);if("landscape"===t){var s=1/(1+r),h=r/(1+r);return{rgb:{x:"front"===e?0:h,y:0,width:s,height:1},alpha:{x:"front"===e?s:0,y:"start"===n?0:1-r,width:h,height:r}}}var d=1/(1+r),l=r/(1+r);return{rgb:{x:0,y:"front"===e?0:l,width:1,height:d},alpha:{x:"start"===n?0:1-r,y:"front"===e?d:0,width:r,height:l}}},h=function(t){var e=t.x,i=t.y,n=t.width,o=t.height;return[e,1-i,e+n,1-i,e,1-i-o,e+n,1-i-o]},d=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},l=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},c={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:o,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},u=function(){function t(t,e){if(void 0===e&&(e=!1),this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=0,this.onCanPlayTimes=1,this.canPlay=!1,this.adaptAnimation=null,this.renderVideoDirectly=!1,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");if(this.renderVideoDirectly=e,this.setConfig(t),this.container=t.container,!e){this.canvas=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,a=r(),s=e||n,h=i||o;s&&h||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var d=document.createElement("canvas");return d.width=s*a,d.height=h*a,d.style.width="100%",d.style.height="100%",d.style.pointerEvents="none",t.appendChild(d),d}(this.container,t.width,t.height);var i=this.canvas,n=i.width,o=i.height;this.canvasWidth=n,this.canvasHeight=o}t.src&&this.initVideo()}return Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.video)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.setConfig=function(t){if(t){var e=Object.assign({},c,this.config||{},t);e.alphaScale=a(e.alphaScale),e.alphaAlign=e.alphaAlign||o,this.config=e}},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.poster,n=t.playbackRate,o=t.muted,r=t.loop,a=t.crossOrigin,s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i||"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",s.src=e,s.autoplay=!1,s.preload="auto",s.playbackRate=n,s.loop=r,s.muted=o,o&&s.setAttribute("muted",""),s.setAttribute("playsinline",""),s.setAttribute("webkit-playsinline",""),s.setAttribute("x-webkit-airplay",""),this.renderVideoDirectly){var h=this.config.width||this.container.offsetWidth,d=this.config.height||this.container.offsetHeight;s.style.display="block",s.style.width=h?"".concat(h,"px"):"100%",s.style.height=d?"".concat(d,"px"):"100%",s.style.visibility=this.config.autoShow?"visible":"hidden",s.style.pointerEvents="none",this.container.appendChild(s)}else s.style.position="absolute",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.pointerEvents="none",document.body.appendChild(s);this.bindInstance(),this.addEvent(),s.load()},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this.drawFrame.bind(this);this.adaptAnimation||(this.adaptAnimation=this.initAdaptAnimation()),this.animationId=this.adaptAnimation(t),this.playing=!0},t.prototype.initAdaptAnimation=function(){var t=this,e=this.config,i=e.videoFrame,n=e.fps,o=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&i)return function(e){return t.video.requestVideoFrameCallback(e)};if(o){if(n){var r=-1;return function(e){return r++,o((function(){if(r%(60/n)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return o(t)}}var a=n>0?1e3/n:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,i=this.config;if(e){var n=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&i.videoFrame?this.video.cancelVideoFrameCallback(e):n?n(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}else this.playing=!1},t.prototype.play=function(t){var e,o;return i(this,void 0,void 0,(function(){var i,r;return n(this,(function(n){switch(n.label){case 0:d(this.video),t&&this.setConfig(t),n.label=1;case 1:return n.trys.push([1,3,,4]),[4,this.video.play()];case 2:return i=n.sent(),this.renderVideoDirectly?(this.setNativeVideoVisible(!0),this.playing=!0):this.drawFrame(),[2,i];case 3:throw r=n.sent(),null===(o=(e=this.config).onError)||void 0===o||o.call(e,r),r;case 4:return[2]}}))}))},t.prototype.pause=function(){d(this.video),this.video.pause(),this.renderVideoDirectly?this.playing=!1:this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){d(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){d(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){d(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){d(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,i=this,n=i.video,a=i.config,h=i.canvas;if(this.videoWidth=n.videoWidth,this.videoHeight=n.videoHeight,a.autoResize&&(h||this.renderVideoDirectly)&&n.videoWidth>0&&n.videoHeight>0){var d=r(),l=function(t,e,i,n,r){if(void 0===n&&(n=1),void 0===r&&(r=o),0===n)return t/e;var a=s(i,"front",n,r).rgb;return t*a.width/(e*a.height)}(n.videoWidth,n.videoHeight,a.orientation,a.alphaScale,a.alphaAlign),c=h?h.width/d:a.width||(null===(t=this.container)||void 0===t?void 0:t.offsetWidth)||n.videoWidth,u=h?h.height/d:a.height||(null===(e=this.container)||void 0===e?void 0:e.offsetHeight)||n.videoHeight,p=void 0;if("width"===a.autoResize||"height"===a.autoResize)p=a.autoResize;else p=l>=c/u?"width":"height";var v="width"===p?c:Math.round(u*l),f="width"===p?Math.round(c/l):u,y=f*d;!h||v*d===this.canvasWidth&&y===this.canvasHeight?this.renderVideoDirectly&&(n.style.width="".concat(v,"px"),n.style.height="".concat(f,"px")):(!function(t,e,i){var n=r();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(h,v,f),this.canvasWidth=h.width,this.canvasHeight=h.height,this.onCanvasResized())}a.onLoad&&a.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!0):t.autoShow&&this.drawFrameOnce(),1===this.onCanPlayTimes&&t.onCanPlay&&t.onCanPlay(),1!==this.onCanPlayTimes&&t.loop&&t.onLoop&&t.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t=this.config;t.onPause&&t.onPause()},t.prototype.onEnded=function(){var t=this.config;this.video.currentTime=0,this.cancelDrawFrame(),t.onEnded&&t.onEnded()},t.prototype.setNativeVideoVisible=function(t){this.renderVideoDirectly&&this.video&&(this.video.style.visibility=t?"visible":"hidden")},t.prototype.onError=function(t){var e,i,n=this.config,o=this.video;n.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t),null===(i=n.onError)||void 0===i||i.call(n,t),this.destroy()},t.prototype.destroy=function(){var t,e,i;try{var n=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==n?void 0:n.onDestroy)||void 0===e||e.call(n),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(i=this.config)||void 0===i?void 0:i.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,i=t.onCanplay,n=t.onPlay,o=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=i.bind(this),this.onPlay=n.bind(this),this.onPause=o.bind(this),this.onEnded=r.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",i),e.addEventListener("canplaythrough",n),e.addEventListener("play",o),e.addEventListener("pause",r),e.addEventListener("ended",a),e.addEventListener("error",s)},t.prototype.removeEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",i),e.removeEventListener("play",o),e.removeEventListener("canplaythrough",n),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),p=function(t){function i(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initWebGLRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return e(i,t),i.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.viewport(0,0,t.width,t.height),this.vertexShader=this.initShader(e.VERTEX_SHADER,"#define GLSLIFY 1\nattribute vec4 a_Position;attribute vec2 a_Video_Texture_Position;attribute vec2 a_Alpha_Video_Texture_Position;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_Position=a_Position;v_Video_Texture_Position=a_Video_Texture_Position;v_Alpha_Video_Texture_Position=a_Alpha_Video_Texture_Position;}"),this.fragmentShader=this.initShader(e.FRAGMENT_SHADER,"precision lowp float;\n#define GLSLIFY 1\nuniform sampler2D u_Sampler;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_FragColor=vec4(texture2D(u_Sampler,v_Video_Texture_Position).rgb,texture2D(u_Sampler,v_Alpha_Video_Texture_Position).r);}"),this.program=this.initProgram(),this.texture=this.initTexture(),this.vertexBuffer=this.initVertexBuffer()},i.prototype.initShader=function(t,e){var i=this.gl,n=i.createShader(t);if(i.shaderSource(n,e),i.compileShader(n),this.config.debug){var o=i.getShaderParameter(n,i.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,o),o||console.log("[alpha-video-player-js] shader compile fail: ",t,i.getShaderInfoLog(n))}return n},i.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),this.config.debug){var i=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",i),i||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},i.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();return t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,1),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),e},i.prototype.initVertexBuffer=function(){var t=this,e=t.gl,i=t.program,n=t.config,r=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=o);var r=[-1,1,1,1,-1,-1,1,-1],a=s(t,e,i,n),d=a.rgb,l=a.alpha,c=h(d),u=h(l),p=[];return r.forEach((function(t,e){e%2==0&&(p=p.concat(r.slice(e,e+2)).concat(c.slice(e,e+2)).concat(u.slice(e,e+2)))})),new Float32Array(p)}(n.orientation,n.side,n.alphaScale,n.alphaAlign),a=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,r,e.STATIC_DRAW);var d=r.BYTES_PER_ELEMENT,l=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6*d,0),e.enableVertexAttribArray(l);var c=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6*d,2*d),e.enableVertexAttribArray(c);var u=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*d,4*d),e.enableVertexAttribArray(u);var p=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(p,0),a},i.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},i.prototype.drawFrameOnce=function(){var t=this.gl,e=this.video;t&&e&&this.canPlay&&l(e)&&(t.clear(t.COLOR_BUFFER_BIT),t.texImage2D(t.TEXTURE_2D,0,t.RGB,t.RGB,t.UNSIGNED_BYTE,e),t.drawArrays(t.TRIANGLE_STRIP,0,4))},i.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},i.prototype.onEnded=function(){var e=this.gl,i=this.config;i.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),i.autoDestroy&&this.destroy()},i.prototype.destroy=function(){var e,i,n=this,o=n.canvas,r=n.gl,a=n.vertexShader,s=n.fragmentShader,h=n.texture,d=n.vertexBuffer,l=n.program;o&&r&&(t.prototype.destroy.call(this),null===(e=o.parentNode)||void 0===e||e.removeChild(o),r.detachShader(l,a),r.deleteShader(a),r.detachShader(l,s),r.deleteShader(s),r.deleteTexture(h),r.deleteBuffer(d),r.deleteProgram(l),null===(i=r.getExtension("WEBGL_lose_context"))||void 0===i||i.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},i}(u),v=function(t){function i(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initCanvasRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return e(i,t),i.prototype.initCanvasRender=function(){var t=this.canvas;this.context2d=t.getContext("2d"),this.resizeAlphaCanvas()},i.prototype.onCanvasResized=function(){this.context2d=this.canvas.getContext("2d"),this.resizeAlphaCanvas()},i.prototype.resizeAlphaCanvas=function(){var t=this.alphaCanvas||document.createElement("canvas");t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d")},i.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,i=t.alphaContext2d,n=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,h=t.canvasWidth,d=t.canvasHeight,c=t.config;if(e&&i&&n&&o&&l(n)&&r&&a&&h&&d){var u=s(c.orientation,c.side,c.alphaScale,c.alphaAlign),p=u.rgb,v=u.alpha;e.drawImage(n,p.x*r,p.y*a,p.width*r,p.height*a,0,0,h,d);var f=e.getImageData(0,0,h,d),y=f.data;i.drawImage(n,v.x*r,v.y*a,v.width*r,v.height*a,0,0,h,d);for(var g=i.getImageData(0,0,h,d).data,m=3;m<y.length;m+=4)y[m]=g[m-3];e.putImageData(f,0,0)}},i.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},i.prototype.onEnded=function(){var e=this,i=e.context2d,n=e.canvasWidth,o=e.canvasHeight,r=e.config;r.autoClear&&i.clearRect(0,0,n,o),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},i.prototype.destroy=function(){var e,i=this.canvas;i&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),this.canvas=null,this.context2d=null,this.alphaCanvas=null,this.alphaContext2d=null)},i}(u),f=function(t){function i(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{i=t.call(this,e,!0)||this,null==n||n()}catch(t){if(!o)throw t;o(t)}return i}return e(i,t),i.prototype.onEnded=function(){var e=this.config;e.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this),e.autoDestroy&&this.destroy()},i.prototype.destroy=function(){t.prototype.destroy.call(this)},i}(u),y=function(){function t(t){var e,i=a(t.alphaScale),n=Object.assign({},t,{alphaScale:i});if(0===i)this.render=new f(n);else if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new p(n);else{if(!document.createElement("canvas").getContext("2d"))throw new Error("[alpha-video-player-js]: Your browser does not support play. Please upgrade your browser and try again.");this.render=new v(n)}}return Object.defineProperty(t.prototype,"playing",{get:function(){return this.render.playing},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){return this.render.loop},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return i(this,void 0,void 0,(function(){return n(this,(function(e){return[2,this.render.play(t)]}))}))},t.prototype.pause=function(){this.render.pause()},t.prototype.destroy=function(){this.render.destroy()},t.prototype.reset=function(){this.render.reset()},t.prototype.setSrc=function(t){this.render.setSrc(t)},t.prototype.setCurrentTime=function(t){this.render.setCurrentTime(t)},t.prototype.setMute=function(t){this.render.setMute(t)},t.prototype.setLoop=function(t){this.render.setLoop(t)},t.prototype.setPlaybackRate=function(t){this.render.setPlaybackRate(t)},t}();export{y as default};

package/dist/react.d.ts

@@ -5,6 +5,8 @@ interface IConfig {
     width?: number;
     height?: number;
     src?: string;
+    /** 视频封面；未传时使用内置透明封面规避 Android WebView 默认 poster 的 CORS 问题 */
+    poster?: string;
     /** 跨域视频资源；默认 anonymous */
     crossOrigin?: 'anonymous' | 'use-credentials';
     muted?: boolean;
@@ -13,17 +15,21 @@ interface IConfig {
     fps?: number;
     orientation?: IOrientation;
     side?: ISide;
+    /** Alpha 遮罩宽高相对 RGB 内容的缩放比例；0 表示普通不透明视频 */
+    alphaScale?: number;
+    /** Alpha 缩小后在副轴上的对齐方式 */
+    alphaAlign?: IAlphaAlign;
     videoFrame?: boolean;
     debug?: boolean;
     autoShow?: boolean;
     autoClear?: boolean;
     autoDestroy?: boolean;
     /**
-     * 视频加载后按比例自适应 canvas 尺寸（默认 'contain'）。
-     * - 'contain'：自动判断，确保视频完整填入 canvas 盒子（类似 object-fit: contain）
+     * 视频加载后按比例自适应渲染目标尺寸（默认 'contain'）。
+     * - 'contain'：自动判断，确保视频完整填入容器盒子（类似 object-fit: contain）
      * - 'width'：固定宽度，按视频比例自动调整高度
      * - 'height'：固定高度，按视频比例自动调整宽度
-     * - false：不自适应，canvas 保持初始尺寸
+     * - false：不自适应，渲染目标保持初始尺寸
      */
     autoResize?: 'width' | 'height' | 'contain' | false;
     onInitSuccess?: () => void;
@@ -41,6 +47,7 @@ interface IConfig {
 type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
 type IOrientation = 'landscape' | 'portrait';
 type ISide = 'front' | 'back';
+type IAlphaAlign = 'start' | 'end';
 
 declare class Render {
     private render;
@@ -57,9 +64,28 @@ declare class Render {
     setLoop(loop: boolean): void;
     setPlaybackRate(playbackRate: number): void;
 }
+/** 核心类实例类型（`new Render(...)` 的实例），便于业务侧标注 ref / getPlayer() 等 */
+type IAlphaVideoPlayer = InstanceType<typeof Render>;
 
-interface AlphaVideoPlayerProps {
+/**
+ * Vue 2 / Vue 3 的 template ref、React 的 `useRef` 所指向的命令式 API 形状（与 `expose` / `useImperativeHandle` 一致）。
+ */
+type IAlphaVideoPlayerRef = {
+    play: () => Promise<void> | undefined;
+    pause: () => void;
+    destroy: () => void;
+    reset: () => void;
+    setSrc: (src: string) => void;
+    setCurrentTime: (time: number) => void;
+    setMute: (muted: boolean) => void;
+    setLoop: (loop: boolean) => void;
+    setPlaybackRate: (rate: number) => void;
+    getPlayer: () => IAlphaVideoPlayer | null;
+};
+
+interface IAlphaVideoPlayerProps {
     src?: string;
+    poster?: string;
     width?: number;
     height?: number;
     crossOrigin?: 'anonymous' | 'use-credentials';
@@ -69,6 +95,8 @@ interface AlphaVideoPlayerProps {
     fps?: number;
     orientation?: IOrientation;
     side?: ISide;
+    alphaScale?: number;
+    alphaAlign?: IAlphaAlign;
     videoFrame?: boolean;
     debug?: boolean;
     autoShow?: boolean;
@@ -88,18 +116,6 @@ interface AlphaVideoPlayerProps {
     className?: string;
     style?: React.CSSProperties;
 }
-interface AlphaVideoPlayerRef {
-    play: () => Promise<void> | undefined;
-    pause: () => void;
-    destroy: () => void;
-    reset: () => void;
-    setSrc: (src: string) => void;
-    setCurrentTime: (time: number) => void;
-    setMute: (muted: boolean) => void;
-    setLoop: (loop: boolean) => void;
-    setPlaybackRate: (rate: number) => void;
-    getPlayer: () => Render | null;
-}
-declare const AlphaVideoPlayer: React.ForwardRefExoticComponent<AlphaVideoPlayerProps & React.RefAttributes<AlphaVideoPlayerRef>>;
+declare const AlphaVideoPlayer: React.ForwardRefExoticComponent<IAlphaVideoPlayerProps & React.RefAttributes<IAlphaVideoPlayerRef>>;
 
-export { type AlphaVideoPlayerProps, type AlphaVideoPlayerRef, AlphaVideoPlayer as default };
+export { type IAlphaVideoPlayerProps, type IAlphaVideoPlayerRef, AlphaVideoPlayer as default };

package/dist/react.js

@@ -1 +1 @@
-import t,{forwardRef as e,useRef as n,useEffect as o,useImperativeHandle as i}from"react";var r=function(t,e){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},r(t,e)};function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function s(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{u(o.next(t))}catch(t){r(t)}}function s(t){try{u(o.throw(t))}catch(t){r(t)}}function u(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}u((o=o.apply(t,e||[])).next())}))}function u(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(u){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(n=1,o&&(i=2&s[0]?o.return:s[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,s[1])).done)return i;switch(o=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){a.label=s[1];break}if(6===s[0]&&a.label<i[1]){a.label=i[1],i=s;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(s);break}i[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],o=0}finally{n=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,u])}}}"function"==typeof SuppressedError&&SuppressedError;var l=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},d={landscape:{front:[0,1,.5,1,0,0,.5,0],back:[.5,1,1,1,.5,0,1,0]},portrait:{front:[0,1,1,1,0,.5,1,.5],back:[0,.5,1,.5,0,0,1,0]}},c={landscape_front:function(t,e){return[0,0,t,e]},landscape_back:function(t,e){return[t,0,t,e]},portrait_front:function(t,e){return[0,0,t,e]},portrait_back:function(t,e){return[0,e,t,e]}},h=function(t,e,n,o){var i="front"===e?"back":"front";return{imageCoords:c["".concat(t,"_").concat(e)](n,o),alphaImageCoords:c["".concat(t,"_").concat(i)](n,o)}},p=function(t,e,n){return"landscape"===t?"width"===e?2*n:n:"width"===e?n:2*n},v=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},f={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},y=function(){function t(t){if(this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=0,this.onCanPlayTimes=1,this.canPlay=!1,this.adaptAnimation=null,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");this.setConfig(t),this.container=t.container,this.canvas=function(t,e,n){var o=t.offsetWidth,i=t.offsetHeight,r=l(),a=e||o,s=n||i;a&&s||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var u=document.createElement("canvas");return u.width=a*r,u.height=s*r,u.style.width="100%",u.style.height="100%",u.style.pointerEvents="none",t.appendChild(u),u}(this.container,t.width,t.height);var e=this.canvas,n=e.width,o=e.height;this.canvasWidth=n,this.canvasHeight=o,t.src&&this.initVideo()}return Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.video)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.setConfig=function(t){t&&(this.config=Object.assign({},f,this.config||{},t))},t.prototype.initVideo=function(){var t=this.config,e=t.src,n=t.playbackRate,o=t.muted,i=t.loop,r=t.crossOrigin,a=this.video=document.createElement("video");a.src=e,a.crossOrigin=null!=r?r:"anonymous",a.autoplay=!1,a.preload="auto",a.playbackRate=n,a.loop=i,a.muted=o,o&&a.setAttribute("muted",""),a.setAttribute("playsinline",""),a.setAttribute("webkit-playsinline",""),a.setAttribute("x-webkit-airplay",""),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.pointerEvents="none",document.body.appendChild(a),this.bindInstance(),this.addEvent(),a.load()},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this.drawFrame.bind(this);this.adaptAnimation||(this.adaptAnimation=this.initAdaptAnimation()),this.animationId=this.adaptAnimation(t),this.playing=!0},t.prototype.initAdaptAnimation=function(){var t=this,e=this.config,n=e.videoFrame,o=e.fps,i=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&n)return function(e){return t.video.requestVideoFrameCallback(e)};if(i){if(o){var r=-1;return function(e){return r++,i((function(){if(r%(60/o)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return i(t)}}var a=o>0?1e3/o:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,n=this.config;if(e){var o=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&n.videoFrame?this.video.cancelVideoFrameCallback(e):o?o(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}},t.prototype.play=function(t){var e,n;return s(this,void 0,void 0,(function(){var o,i;return u(this,(function(r){switch(r.label){case 0:v(this.video),t&&this.setConfig(t),r.label=1;case 1:return r.trys.push([1,3,,4]),[4,this.video.play()];case 2:return o=r.sent(),this.drawFrame(),[2,o];case 3:throw i=r.sent(),null===(n=(e=this.config).onError)||void 0===n||n.call(e,i),i;case 4:return[2]}}))}))},t.prototype.pause=function(){v(this.video),this.video.pause(),this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){v(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){v(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){v(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){v(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,n,o=this,i=o.video,r=o.config,a=o.canvas;if(this.videoWidth=i.videoWidth,this.videoHeight=i.videoHeight,r.autoResize&&a&&i.videoWidth>0&&i.videoHeight>0){var s=l(),u=(t=i.videoWidth,e=i.videoHeight,("landscape"===(n=r.orientation)?t/2:t)/("portrait"===n?e/2:e)),d=a.width/s,c=a.height/s,h=void 0;if("width"===r.autoResize||"height"===r.autoResize)h=r.autoResize;else h=u>=d/c?"width":"height";var p="width"===h?d:Math.round(c*u),v="width"===h?Math.round(d/u):c,f=v*s;p*s===this.canvasWidth&&f===this.canvasHeight||(!function(t,e,n){var o=l();t.width=e*o,t.height=n*o,t.style.width=e+"px",t.style.height=n+"px"}(a,p,v),this.canvasWidth=a.width,this.canvasHeight=a.height,this.onCanvasResized())}r.onLoad&&r.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,t.autoShow&&this.drawFrameOnce(),1===this.onCanPlayTimes&&t.onCanPlay&&t.onCanPlay(),1!==this.onCanPlayTimes&&t.loop&&t.onLoop&&t.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t=this.config;t.onPause&&t.onPause()},t.prototype.onEnded=function(){var t=this.config;this.video.currentTime=0,this.cancelDrawFrame(),t.onEnded&&t.onEnded()},t.prototype.onError=function(t){var e,n,o=this.config,i=this.video;o.debug&&console.error(null!==(e=null==i?void 0:i.error)&&void 0!==e?e:t),null===(n=o.onError)||void 0===n||n.call(o,t),this.destroy()},t.prototype.destroy=function(){var t,e,n;try{var o=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==o?void 0:o.onDestroy)||void 0===e||e.call(o),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(n=this.config)||void 0===n?void 0:n.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,n=t.onCanplay,o=t.onPlay,i=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=n.bind(this),this.onPlay=o.bind(this),this.onPause=i.bind(this),this.onEnded=r.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",n),e.addEventListener("canplaythrough",o),e.addEventListener("play",i),e.addEventListener("pause",r),e.addEventListener("ended",a),e.addEventListener("error",s)},t.prototype.removeEvent=function(){var t=this,e=t.video,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",n),e.removeEventListener("play",i),e.removeEventListener("canplaythrough",o),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),m=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initWebGLRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return a(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.viewport(0,0,t.width,t.height),this.vertexShader=this.initShader(e.VERTEX_SHADER,"#define GLSLIFY 1\nattribute vec4 a_Position;attribute vec2 a_Video_Texture_Position;attribute vec2 a_Alpha_Video_Texture_Position;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_Position=a_Position;v_Video_Texture_Position=a_Video_Texture_Position;v_Alpha_Video_Texture_Position=a_Alpha_Video_Texture_Position;}"),this.fragmentShader=this.initShader(e.FRAGMENT_SHADER,"precision lowp float;\n#define GLSLIFY 1\nuniform sampler2D u_Sampler;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_FragColor=vec4(texture2D(u_Sampler,v_Video_Texture_Position).rgb,texture2D(u_Sampler,v_Alpha_Video_Texture_Position).r);}"),this.program=this.initProgram(),this.texture=this.initTexture(),this.vertexBuffer=this.initVertexBuffer()},e.prototype.initShader=function(t,e){var n=this.gl,o=n.createShader(t);if(n.shaderSource(o,e),n.compileShader(o),this.config.debug){var i=n.getShaderParameter(o,n.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,i),i||console.log("[alpha-video-player-js] shader compile fail: ",t,n.getShaderInfoLog(o))}return o},e.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),this.config.debug){var n=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",n),n||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},e.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();return t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,1),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),e},e.prototype.initVertexBuffer=function(){var t=this,e=t.gl,n=t.program,o=t.config,i=function(t,e){var n="front"===e,o=[-1,1,1,1,-1,-1,1,-1],i=d[t][n?"front":"back"],r=d[t][n?"back":"front"],a=[];return o.forEach((function(t,e){e%2==0&&(a=a.concat(o.slice(e,e+2)).concat(i.slice(e,e+2)).concat(r.slice(e,e+2)))})),new Float32Array(a)}(o.orientation,o.side),r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,i,e.STATIC_DRAW);var a=i.BYTES_PER_ELEMENT,s=e.getAttribLocation(n,"a_Position");e.vertexAttribPointer(s,2,e.FLOAT,!1,6*a,0),e.enableVertexAttribArray(s);var u=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*a,2*a),e.enableVertexAttribArray(u);var l=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(l);var c=e.getUniformLocation(n,"u_Sampler");return e.uniform1i(c,0),r},e.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},e.prototype.drawFrameOnce=function(){var t=this.gl,e=this.video;t&&e&&this.canPlay&&(t.clear(t.COLOR_BUFFER_BIT),t.texImage2D(t.TEXTURE_2D,0,t.RGB,t.RGB,t.UNSIGNED_BYTE,e),t.drawArrays(t.TRIANGLE_STRIP,0,4))},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this.gl,n=this.config;n.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),n.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n,o=this,i=o.canvas,r=o.gl,a=o.vertexShader,s=o.fragmentShader,u=o.texture,l=o.vertexBuffer,d=o.program;i&&r&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),r.detachShader(d,a),r.deleteShader(a),r.detachShader(d,s),r.deleteShader(s),r.deleteTexture(u),r.deleteBuffer(l),r.deleteProgram(d),null===(n=r.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},e}(y),g=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initCanvasRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return a(e,t),e.prototype.initCanvasRender=function(){var t=this,e=t.canvas,n=t.canvasWidth,o=t.canvasHeight,i=t.config,r=i.orientation,a=i.side,s=document.createElement("canvas");this.tempCanvasWidth=s.width=p(r,"width",n),this.tempCanvasHeight=s.height=p(r,"height",o);var u=h(r,a,n,o),l=u.imageCoords,d=u.alphaImageCoords;this.imageCoords=l,this.alphaImageCoords=d,this.context2d=e.getContext("2d"),this.tempContext2d=s.getContext("2d")},e.prototype.onCanvasResized=function(){var t=this,e=t.canvasWidth,n=t.canvasHeight,o=t.config,i=o.orientation,r=o.side,a=document.createElement("canvas");this.tempCanvasWidth=a.width=p(i,"width",e),this.tempCanvasHeight=a.height=p(i,"height",n);var s=h(i,r,e,n),u=s.imageCoords,l=s.alphaImageCoords;this.imageCoords=u,this.alphaImageCoords=l,this.context2d=this.canvas.getContext("2d"),this.tempContext2d=a.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,n=t.tempContext2d,o=t.video,i=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.tempCanvasWidth,u=t.tempCanvasHeight,l=t.imageCoords,d=t.alphaImageCoords;if(e&&n&&o&&i&&r&&a&&s&&u&&l&&d){n.drawImage(o,0,0,r,a,0,0,s,u);for(var c=n.getImageData.apply(n,l),h=c.data,p=n.getImageData.apply(n,d).data,v=3;v<h.length;v+=4)h[v]=p[v-3];e.putImageData(c,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this,n=e.context2d,o=e.canvasWidth,i=e.canvasHeight,r=e.config;r.autoClear&&n.clearRect(0,0,o,i),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n=this.canvas;n&&(t.prototype.destroy.call(this),null===(e=n.parentNode)||void 0===e||e.removeChild(n),this.canvas=null,this.context2d=null,this.tempContext2d=null,this.tempCanvasWidth=null,this.tempCanvasHeight=null,this.imageCoords=null,this.alphaImageCoords=null)},e}(y),_=function(){function t(t){if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new m(t);else{if(!document.createElement("canvas").getContext("2d"))throw new Error("[alpha-video-player-js]: Your browser does not support play. Please upgrade your browser and try again.");this.render=new g(t)}var e}return Object.defineProperty(t.prototype,"playing",{get:function(){return this.render.playing},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){return this.render.loop},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return s(this,void 0,void 0,(function(){return u(this,(function(e){return[2,this.render.play(t)]}))}))},t.prototype.pause=function(){this.render.pause()},t.prototype.destroy=function(){this.render.destroy()},t.prototype.reset=function(){this.render.reset()},t.prototype.setSrc=function(t){this.render.setSrc(t)},t.prototype.setCurrentTime=function(t){this.render.setCurrentTime(t)},t.prototype.setMute=function(t){this.render.setMute(t)},t.prototype.setLoop=function(t){this.render.setLoop(t)},t.prototype.setPlaybackRate=function(t){this.render.setPlaybackRate(t)},t}(),E=e((function(e,r){var a=n(null),s=n(null),u=n(e);return u.current=e,o((function(){var t,e,n;if(a.current){var o=u.current;return s.current=new _({container:a.current,src:o.src,width:o.width,height:o.height,crossOrigin:o.crossOrigin,muted:null===(t=o.muted)||void 0===t||t,loop:null!==(e=o.loop)&&void 0!==e&&e,playbackRate:null!==(n=o.playbackRate)&&void 0!==n?n:1,fps:o.fps,orientation:o.orientation,side:o.side,videoFrame:o.videoFrame,debug:o.debug,autoShow:o.autoShow,autoClear:o.autoClear,autoDestroy:o.autoDestroy,autoResize:o.autoResize,onInitSuccess:function(){var t,e;return null===(e=(t=u.current).onInitSuccess)||void 0===e?void 0:e.call(t)},onInitError:function(t){var e,n;return null===(n=(e=u.current).onInitError)||void 0===n?void 0:n.call(e,t)},onLoad:function(){var t,e;return null===(e=(t=u.current).onLoad)||void 0===e?void 0:e.call(t)},onCanPlay:function(){var t,e;return null===(e=(t=u.current).onCanPlay)||void 0===e?void 0:e.call(t)},onPlay:function(){var t,e;return null===(e=(t=u.current).onPlay)||void 0===e?void 0:e.call(t)},onLoop:function(){var t,e;return null===(e=(t=u.current).onLoop)||void 0===e?void 0:e.call(t)},onPause:function(){var t,e;return null===(e=(t=u.current).onPause)||void 0===e?void 0:e.call(t)},onEnded:function(){var t,e;return null===(e=(t=u.current).onEnded)||void 0===e?void 0:e.call(t)},onError:function(t){var e,n;return null===(n=(e=u.current).onError)||void 0===n?void 0:n.call(e,t)},onDestroy:function(){var t,e;return null===(e=(t=u.current).onDestroy)||void 0===e?void 0:e.call(t)}}),function(){var t;null===(t=s.current)||void 0===t||t.destroy(),s.current=null}}}),[]),o((function(){var t;null!=e.src&&(null===(t=s.current)||void 0===t||t.setSrc(e.src))}),[e.src]),o((function(){var t,n;null===(t=s.current)||void 0===t||t.setMute(null===(n=e.muted)||void 0===n||n)}),[e.muted]),o((function(){var t,n;null===(t=s.current)||void 0===t||t.setLoop(null!==(n=e.loop)&&void 0!==n&&n)}),[e.loop]),o((function(){var t,n;null===(t=s.current)||void 0===t||t.setPlaybackRate(null!==(n=e.playbackRate)&&void 0!==n?n:1)}),[e.playbackRate]),i(r,(function(){return{play:function(){var t;return null===(t=s.current)||void 0===t?void 0:t.play()},pause:function(){var t;return null===(t=s.current)||void 0===t?void 0:t.pause()},destroy:function(){var t;null===(t=s.current)||void 0===t||t.destroy(),s.current=null},reset:function(){var t;return null===(t=s.current)||void 0===t?void 0:t.reset()},setSrc:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setSrc(t)},setCurrentTime:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setCurrentTime(t)},setMute:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setMute(t)},setLoop:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setLoop(t)},setPlaybackRate:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setPlaybackRate(t)},getPlayer:function(){return s.current}}})),t.createElement("div",{ref:a,className:e.className,style:e.style})}));E.displayName="AlphaVideoPlayer";export{E as default};
+import t,{forwardRef as e,useRef as i,useEffect as n,useImperativeHandle as o}from"react";var r=function(t,e){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},r(t,e)};function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}function s(t,e,i,n){return new(i||(i=Promise))((function(o,r){function a(t){try{l(n.next(t))}catch(t){r(t)}}function s(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}l((n=n.apply(t,e||[])).next())}))}function l(t,e){var i,n,o,r,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(l){return function(s){if(i)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(i=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,n=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){a.label=s[1];break}if(6===s[0]&&a.label<o[1]){a.label=o[1],o=s;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(s);break}o[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],n=0}finally{i=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}"function"==typeof SuppressedError&&SuppressedError;var d="start",u=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},c=function(t){if(void 0===t&&(t=1),"number"!=typeof t||!isFinite(t)||t<0||t>1)throw new Error("[alpha-video-player-js]: alphaScale must be a finite number between 0 and 1.");return t},h=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=d);var o=c(i);if("landscape"===t){var r=1/(1+o),a=o/(1+o);return{rgb:{x:"front"===e?0:a,y:0,width:r,height:1},alpha:{x:"front"===e?r:0,y:"start"===n?0:1-o,width:a,height:o}}}var s=1/(1+o),l=o/(1+o);return{rgb:{x:0,y:"front"===e?0:l,width:1,height:s},alpha:{x:"start"===n?0:1-o,y:"front"===e?s:0,width:o,height:l}}},v=function(t){var e=t.x,i=t.y,n=t.width,o=t.height;return[e,1-i,e+n,1-i,e,1-i-o,e+n,1-i-o]},p=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},f=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},y={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:d,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},g=function(){function t(t,e){if(void 0===e&&(e=!1),this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=0,this.onCanPlayTimes=1,this.canPlay=!1,this.adaptAnimation=null,this.renderVideoDirectly=!1,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");if(this.renderVideoDirectly=e,this.setConfig(t),this.container=t.container,!e){this.canvas=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=u(),a=e||n,s=i||o;a&&s||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var l=document.createElement("canvas");return l.width=a*r,l.height=s*r,l.style.width="100%",l.style.height="100%",l.style.pointerEvents="none",t.appendChild(l),l}(this.container,t.width,t.height);var i=this.canvas,n=i.width,o=i.height;this.canvasWidth=n,this.canvasHeight=o}t.src&&this.initVideo()}return Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.video)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.setConfig=function(t){if(t){var e=Object.assign({},y,this.config||{},t);e.alphaScale=c(e.alphaScale),e.alphaAlign=e.alphaAlign||d,this.config=e}},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.poster,n=t.playbackRate,o=t.muted,r=t.loop,a=t.crossOrigin,s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i||"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",s.src=e,s.autoplay=!1,s.preload="auto",s.playbackRate=n,s.loop=r,s.muted=o,o&&s.setAttribute("muted",""),s.setAttribute("playsinline",""),s.setAttribute("webkit-playsinline",""),s.setAttribute("x-webkit-airplay",""),this.renderVideoDirectly){var l=this.config.width||this.container.offsetWidth,d=this.config.height||this.container.offsetHeight;s.style.display="block",s.style.width=l?"".concat(l,"px"):"100%",s.style.height=d?"".concat(d,"px"):"100%",s.style.visibility=this.config.autoShow?"visible":"hidden",s.style.pointerEvents="none",this.container.appendChild(s)}else s.style.position="absolute",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.pointerEvents="none",document.body.appendChild(s);this.bindInstance(),this.addEvent(),s.load()},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this.drawFrame.bind(this);this.adaptAnimation||(this.adaptAnimation=this.initAdaptAnimation()),this.animationId=this.adaptAnimation(t),this.playing=!0},t.prototype.initAdaptAnimation=function(){var t=this,e=this.config,i=e.videoFrame,n=e.fps,o=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&i)return function(e){return t.video.requestVideoFrameCallback(e)};if(o){if(n){var r=-1;return function(e){return r++,o((function(){if(r%(60/n)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return o(t)}}var a=n>0?1e3/n:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,i=this.config;if(e){var n=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&i.videoFrame?this.video.cancelVideoFrameCallback(e):n?n(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}else this.playing=!1},t.prototype.play=function(t){var e,i;return s(this,void 0,void 0,(function(){var n,o;return l(this,(function(r){switch(r.label){case 0:p(this.video),t&&this.setConfig(t),r.label=1;case 1:return r.trys.push([1,3,,4]),[4,this.video.play()];case 2:return n=r.sent(),this.renderVideoDirectly?(this.setNativeVideoVisible(!0),this.playing=!0):this.drawFrame(),[2,n];case 3:throw o=r.sent(),null===(i=(e=this.config).onError)||void 0===i||i.call(e,o),o;case 4:return[2]}}))}))},t.prototype.pause=function(){p(this.video),this.video.pause(),this.renderVideoDirectly?this.playing=!1:this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){p(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){p(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){p(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){p(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,i=this,n=i.video,o=i.config,r=i.canvas;if(this.videoWidth=n.videoWidth,this.videoHeight=n.videoHeight,o.autoResize&&(r||this.renderVideoDirectly)&&n.videoWidth>0&&n.videoHeight>0){var a=u(),s=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=d),0===n)return t/e;var r=h(i,"front",n,o).rgb;return t*r.width/(e*r.height)}(n.videoWidth,n.videoHeight,o.orientation,o.alphaScale,o.alphaAlign),l=r?r.width/a:o.width||(null===(t=this.container)||void 0===t?void 0:t.offsetWidth)||n.videoWidth,c=r?r.height/a:o.height||(null===(e=this.container)||void 0===e?void 0:e.offsetHeight)||n.videoHeight,v=void 0;if("width"===o.autoResize||"height"===o.autoResize)v=o.autoResize;else v=s>=l/c?"width":"height";var p="width"===v?l:Math.round(c*s),f="width"===v?Math.round(l/s):c,y=f*a;!r||p*a===this.canvasWidth&&y===this.canvasHeight?this.renderVideoDirectly&&(n.style.width="".concat(p,"px"),n.style.height="".concat(f,"px")):(!function(t,e,i){var n=u();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(r,p,f),this.canvasWidth=r.width,this.canvasHeight=r.height,this.onCanvasResized())}o.onLoad&&o.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!0):t.autoShow&&this.drawFrameOnce(),1===this.onCanPlayTimes&&t.onCanPlay&&t.onCanPlay(),1!==this.onCanPlayTimes&&t.loop&&t.onLoop&&t.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t=this.config;t.onPause&&t.onPause()},t.prototype.onEnded=function(){var t=this.config;this.video.currentTime=0,this.cancelDrawFrame(),t.onEnded&&t.onEnded()},t.prototype.setNativeVideoVisible=function(t){this.renderVideoDirectly&&this.video&&(this.video.style.visibility=t?"visible":"hidden")},t.prototype.onError=function(t){var e,i,n=this.config,o=this.video;n.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t),null===(i=n.onError)||void 0===i||i.call(n,t),this.destroy()},t.prototype.destroy=function(){var t,e,i;try{var n=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==n?void 0:n.onDestroy)||void 0===e||e.call(n),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(i=this.config)||void 0===i?void 0:i.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,i=t.onCanplay,n=t.onPlay,o=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=i.bind(this),this.onPlay=n.bind(this),this.onPause=o.bind(this),this.onEnded=r.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",i),e.addEventListener("canplaythrough",n),e.addEventListener("play",o),e.addEventListener("pause",r),e.addEventListener("ended",a),e.addEventListener("error",s)},t.prototype.removeEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",i),e.removeEventListener("play",o),e.removeEventListener("canplaythrough",n),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),m=function(t){function e(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initWebGLRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return a(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.viewport(0,0,t.width,t.height),this.vertexShader=this.initShader(e.VERTEX_SHADER,"#define GLSLIFY 1\nattribute vec4 a_Position;attribute vec2 a_Video_Texture_Position;attribute vec2 a_Alpha_Video_Texture_Position;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_Position=a_Position;v_Video_Texture_Position=a_Video_Texture_Position;v_Alpha_Video_Texture_Position=a_Alpha_Video_Texture_Position;}"),this.fragmentShader=this.initShader(e.FRAGMENT_SHADER,"precision lowp float;\n#define GLSLIFY 1\nuniform sampler2D u_Sampler;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_FragColor=vec4(texture2D(u_Sampler,v_Video_Texture_Position).rgb,texture2D(u_Sampler,v_Alpha_Video_Texture_Position).r);}"),this.program=this.initProgram(),this.texture=this.initTexture(),this.vertexBuffer=this.initVertexBuffer()},e.prototype.initShader=function(t,e){var i=this.gl,n=i.createShader(t);if(i.shaderSource(n,e),i.compileShader(n),this.config.debug){var o=i.getShaderParameter(n,i.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,o),o||console.log("[alpha-video-player-js] shader compile fail: ",t,i.getShaderInfoLog(n))}return n},e.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),this.config.debug){var i=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",i),i||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},e.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();return t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,1),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),e},e.prototype.initVertexBuffer=function(){var t=this,e=t.gl,i=t.program,n=t.config,o=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=d);var o=[-1,1,1,1,-1,-1,1,-1],r=h(t,e,i,n),a=r.rgb,s=r.alpha,l=v(a),u=v(s),c=[];return o.forEach((function(t,e){e%2==0&&(c=c.concat(o.slice(e,e+2)).concat(l.slice(e,e+2)).concat(u.slice(e,e+2)))})),new Float32Array(c)}(n.orientation,n.side,n.alphaScale,n.alphaAlign),r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW);var a=o.BYTES_PER_ELEMENT,s=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(s,2,e.FLOAT,!1,6*a,0),e.enableVertexAttribArray(s);var l=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6*a,2*a),e.enableVertexAttribArray(l);var u=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(u);var c=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(c,0),r},e.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},e.prototype.drawFrameOnce=function(){var t=this.gl,e=this.video;t&&e&&this.canPlay&&f(e)&&(t.clear(t.COLOR_BUFFER_BIT),t.texImage2D(t.TEXTURE_2D,0,t.RGB,t.RGB,t.UNSIGNED_BYTE,e),t.drawArrays(t.TRIANGLE_STRIP,0,4))},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this.gl,i=this.config;i.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),i.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,i,n=this,o=n.canvas,r=n.gl,a=n.vertexShader,s=n.fragmentShader,l=n.texture,d=n.vertexBuffer,u=n.program;o&&r&&(t.prototype.destroy.call(this),null===(e=o.parentNode)||void 0===e||e.removeChild(o),r.detachShader(u,a),r.deleteShader(a),r.detachShader(u,s),r.deleteShader(s),r.deleteTexture(l),r.deleteBuffer(d),r.deleteProgram(u),null===(i=r.getExtension("WEBGL_lose_context"))||void 0===i||i.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},e}(g),b=function(t){function e(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initCanvasRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return a(e,t),e.prototype.initCanvasRender=function(){var t=this.canvas;this.context2d=t.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.onCanvasResized=function(){this.context2d=this.canvas.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.resizeAlphaCanvas=function(){var t=this.alphaCanvas||document.createElement("canvas");t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,i=t.alphaContext2d,n=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.canvasWidth,l=t.canvasHeight,d=t.config;if(e&&i&&n&&o&&f(n)&&r&&a&&s&&l){var u=h(d.orientation,d.side,d.alphaScale,d.alphaAlign),c=u.rgb,v=u.alpha;e.drawImage(n,c.x*r,c.y*a,c.width*r,c.height*a,0,0,s,l);var p=e.getImageData(0,0,s,l),y=p.data;i.drawImage(n,v.x*r,v.y*a,v.width*r,v.height*a,0,0,s,l);for(var g=i.getImageData(0,0,s,l).data,m=3;m<y.length;m+=4)y[m]=g[m-3];e.putImageData(p,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this,i=e.context2d,n=e.canvasWidth,o=e.canvasHeight,r=e.config;r.autoClear&&i.clearRect(0,0,n,o),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,i=this.canvas;i&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),this.canvas=null,this.context2d=null,this.alphaCanvas=null,this.alphaContext2d=null)},e}(g),w=function(t){function e(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{i=t.call(this,e,!0)||this,null==n||n()}catch(t){if(!o)throw t;o(t)}return i}return a(e,t),e.prototype.onEnded=function(){var e=this.config;e.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this),e.autoDestroy&&this.destroy()},e.prototype.destroy=function(){t.prototype.destroy.call(this)},e}(g),E=function(){function t(t){var e,i=c(t.alphaScale),n=Object.assign({},t,{alphaScale:i});if(0===i)this.render=new w(n);else if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new m(n);else{if(!document.createElement("canvas").getContext("2d"))throw new Error("[alpha-video-player-js]: Your browser does not support play. Please upgrade your browser and try again.");this.render=new b(n)}}return Object.defineProperty(t.prototype,"playing",{get:function(){return this.render.playing},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){return this.render.loop},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return s(this,void 0,void 0,(function(){return l(this,(function(e){return[2,this.render.play(t)]}))}))},t.prototype.pause=function(){this.render.pause()},t.prototype.destroy=function(){this.render.destroy()},t.prototype.reset=function(){this.render.reset()},t.prototype.setSrc=function(t){this.render.setSrc(t)},t.prototype.setCurrentTime=function(t){this.render.setCurrentTime(t)},t.prototype.setMute=function(t){this.render.setMute(t)},t.prototype.setLoop=function(t){this.render.setLoop(t)},t.prototype.setPlaybackRate=function(t){this.render.setPlaybackRate(t)},t}(),A=e((function(e,r){var a=i(null),s=i(null),l=i(e);return l.current=e,n((function(){var t,e,i,n,o,r,u;if(a.current){var c=l.current;return s.current=new E({container:a.current,src:c.src,poster:c.poster,width:c.width,height:c.height,crossOrigin:c.crossOrigin,muted:null===(t=c.muted)||void 0===t||t,loop:null!==(e=c.loop)&&void 0!==e&&e,playbackRate:null!==(i=c.playbackRate)&&void 0!==i?i:1,fps:c.fps,orientation:null!==(n=c.orientation)&&void 0!==n?n:"landscape",side:null!==(o=c.side)&&void 0!==o?o:"front",alphaScale:null!==(r=c.alphaScale)&&void 0!==r?r:1,alphaAlign:null!==(u=c.alphaAlign)&&void 0!==u?u:d,videoFrame:c.videoFrame,debug:c.debug,autoShow:c.autoShow,autoClear:c.autoClear,autoDestroy:c.autoDestroy,autoResize:c.autoResize,onInitSuccess:function(){var t,e;return null===(e=(t=l.current).onInitSuccess)||void 0===e?void 0:e.call(t)},onInitError:function(t){var e,i;return null===(i=(e=l.current).onInitError)||void 0===i?void 0:i.call(e,t)},onLoad:function(){var t,e;return null===(e=(t=l.current).onLoad)||void 0===e?void 0:e.call(t)},onCanPlay:function(){var t,e;return null===(e=(t=l.current).onCanPlay)||void 0===e?void 0:e.call(t)},onPlay:function(){var t,e;return null===(e=(t=l.current).onPlay)||void 0===e?void 0:e.call(t)},onLoop:function(){var t,e;return null===(e=(t=l.current).onLoop)||void 0===e?void 0:e.call(t)},onPause:function(){var t,e;return null===(e=(t=l.current).onPause)||void 0===e?void 0:e.call(t)},onEnded:function(){var t,e;return null===(e=(t=l.current).onEnded)||void 0===e?void 0:e.call(t)},onError:function(t){var e,i;return null===(i=(e=l.current).onError)||void 0===i?void 0:i.call(e,t)},onDestroy:function(){var t,e;return null===(e=(t=l.current).onDestroy)||void 0===e?void 0:e.call(t)}}),function(){var t;null===(t=s.current)||void 0===t||t.destroy(),s.current=null}}}),[]),n((function(){var t;null!=e.src&&(null===(t=s.current)||void 0===t||t.setSrc(e.src))}),[e.src]),n((function(){var t,i;null===(t=s.current)||void 0===t||t.setMute(null===(i=e.muted)||void 0===i||i)}),[e.muted]),n((function(){var t,i;null===(t=s.current)||void 0===t||t.setLoop(null!==(i=e.loop)&&void 0!==i&&i)}),[e.loop]),n((function(){var t,i;null===(t=s.current)||void 0===t||t.setPlaybackRate(null!==(i=e.playbackRate)&&void 0!==i?i:1)}),[e.playbackRate]),o(r,(function(){return{play:function(){var t;return null===(t=s.current)||void 0===t?void 0:t.play()},pause:function(){var t;return null===(t=s.current)||void 0===t?void 0:t.pause()},destroy:function(){var t;null===(t=s.current)||void 0===t||t.destroy(),s.current=null},reset:function(){var t;return null===(t=s.current)||void 0===t?void 0:t.reset()},setSrc:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setSrc(t)},setCurrentTime:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setCurrentTime(t)},setMute:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setMute(t)},setLoop:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setLoop(t)},setPlaybackRate:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setPlaybackRate(t)},getPlayer:function(){return s.current}}})),t.createElement("div",{ref:a,className:e.className,style:e.style})}));A.displayName="AlphaVideoPlayer";export{A as default};

package/dist/vue2.d.ts

@@ -1,3 +1,86 @@
 declare const AlphaVideoPlayer: any;
 
-export { AlphaVideoPlayer as default };
+interface IConfig {
+    container: HTMLElement;
+    width?: number;
+    height?: number;
+    src?: string;
+    /** 视频封面；未传时使用内置透明封面规避 Android WebView 默认 poster 的 CORS 问题 */
+    poster?: string;
+    /** 跨域视频资源；默认 anonymous */
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    muted?: boolean;
+    loop?: boolean;
+    playbackRate?: number;
+    fps?: number;
+    orientation?: IOrientation;
+    side?: ISide;
+    /** Alpha 遮罩宽高相对 RGB 内容的缩放比例；0 表示普通不透明视频 */
+    alphaScale?: number;
+    /** Alpha 缩小后在副轴上的对齐方式 */
+    alphaAlign?: IAlphaAlign;
+    videoFrame?: boolean;
+    debug?: boolean;
+    autoShow?: boolean;
+    autoClear?: boolean;
+    autoDestroy?: boolean;
+    /**
+     * 视频加载后按比例自适应渲染目标尺寸（默认 'contain'）。
+     * - 'contain'：自动判断，确保视频完整填入容器盒子（类似 object-fit: contain）
+     * - 'width'：固定宽度，按视频比例自动调整高度
+     * - 'height'：固定高度，按视频比例自动调整宽度
+     * - false：不自适应，渲染目标保持初始尺寸
+     */
+    autoResize?: 'width' | 'height' | 'contain' | false;
+    onInitSuccess?: () => void;
+    onInitError?: (e: ErrorEvent) => void;
+    onLoad?: () => void;
+    onCanPlay?: () => void;
+    onPlay?: () => void;
+    onLoop?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    /** 媒体 error 事件或 play() 拒绝等，原样传入 */
+    onError?: (e: unknown) => void;
+    onDestroy?: () => void;
+}
+type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
+type IOrientation = 'landscape' | 'portrait';
+type ISide = 'front' | 'back';
+type IAlphaAlign = 'start' | 'end';
+
+declare class Render {
+    private render;
+    constructor(config: IConfig);
+    get playing(): boolean;
+    get loop(): boolean;
+    play(config?: IOptionalConfig): Promise<void>;
+    pause(): void;
+    destroy(): void;
+    reset(): void;
+    setSrc(src: string): void;
+    setCurrentTime(time: number): void;
+    setMute(muted: boolean): void;
+    setLoop(loop: boolean): void;
+    setPlaybackRate(playbackRate: number): void;
+}
+/** 核心类实例类型（`new Render(...)` 的实例），便于业务侧标注 ref / getPlayer() 等 */
+type IAlphaVideoPlayer = InstanceType<typeof Render>;
+
+/**
+ * Vue 2 / Vue 3 的 template ref、React 的 `useRef` 所指向的命令式 API 形状（与 `expose` / `useImperativeHandle` 一致）。
+ */
+type IAlphaVideoPlayerRef = {
+    play: () => Promise<void> | undefined;
+    pause: () => void;
+    destroy: () => void;
+    reset: () => void;
+    setSrc: (src: string) => void;
+    setCurrentTime: (time: number) => void;
+    setMute: (muted: boolean) => void;
+    setLoop: (loop: boolean) => void;
+    setPlaybackRate: (rate: number) => void;
+    getPlayer: () => IAlphaVideoPlayer | null;
+};
+
+export { type IAlphaVideoPlayer, type IAlphaVideoPlayerRef, AlphaVideoPlayer as default };

package/dist/vue2.js

@@ -1 +1 @@
-import t from"vue";var e=function(t,n){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},e(t,n)};function n(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}function o(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{d(o.next(t))}catch(t){r(t)}}function s(t){try{d(o.throw(t))}catch(t){r(t)}}function d(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}d((o=o.apply(t,e||[])).next())}))}function i(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(d){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(n=1,o&&(i=2&s[0]?o.return:s[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,s[1])).done)return i;switch(o=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){a.label=s[1];break}if(6===s[0]&&a.label<i[1]){a.label=i[1],i=s;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(s);break}i[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],o=0}finally{n=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,d])}}}"function"==typeof SuppressedError&&SuppressedError;var r=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},a={landscape:{front:[0,1,.5,1,0,0,.5,0],back:[.5,1,1,1,.5,0,1,0]},portrait:{front:[0,1,1,1,0,.5,1,.5],back:[0,.5,1,.5,0,0,1,0]}},s={landscape_front:function(t,e){return[0,0,t,e]},landscape_back:function(t,e){return[t,0,t,e]},portrait_front:function(t,e){return[0,0,t,e]},portrait_back:function(t,e){return[0,e,t,e]}},d=function(t,e,n,o){var i="front"===e?"back":"front";return{imageCoords:s["".concat(t,"_").concat(e)](n,o),alphaImageCoords:s["".concat(t,"_").concat(i)](n,o)}},l=function(t,e,n){return"landscape"===t?"width"===e?2*n:n:"width"===e?n:2*n},u=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},c={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},h=function(){function t(t){if(this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=0,this.onCanPlayTimes=1,this.canPlay=!1,this.adaptAnimation=null,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");this.setConfig(t),this.container=t.container,this.canvas=function(t,e,n){var o=t.offsetWidth,i=t.offsetHeight,a=r(),s=e||o,d=n||i;s&&d||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var l=document.createElement("canvas");return l.width=s*a,l.height=d*a,l.style.width="100%",l.style.height="100%",l.style.pointerEvents="none",t.appendChild(l),l}(this.container,t.width,t.height);var e=this.canvas,n=e.width,o=e.height;this.canvasWidth=n,this.canvasHeight=o,t.src&&this.initVideo()}return Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.video)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.setConfig=function(t){t&&(this.config=Object.assign({},c,this.config||{},t))},t.prototype.initVideo=function(){var t=this.config,e=t.src,n=t.playbackRate,o=t.muted,i=t.loop,r=t.crossOrigin,a=this.video=document.createElement("video");a.src=e,a.crossOrigin=null!=r?r:"anonymous",a.autoplay=!1,a.preload="auto",a.playbackRate=n,a.loop=i,a.muted=o,o&&a.setAttribute("muted",""),a.setAttribute("playsinline",""),a.setAttribute("webkit-playsinline",""),a.setAttribute("x-webkit-airplay",""),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.pointerEvents="none",document.body.appendChild(a),this.bindInstance(),this.addEvent(),a.load()},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this.drawFrame.bind(this);this.adaptAnimation||(this.adaptAnimation=this.initAdaptAnimation()),this.animationId=this.adaptAnimation(t),this.playing=!0},t.prototype.initAdaptAnimation=function(){var t=this,e=this.config,n=e.videoFrame,o=e.fps,i=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&n)return function(e){return t.video.requestVideoFrameCallback(e)};if(i){if(o){var r=-1;return function(e){return r++,i((function(){if(r%(60/o)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return i(t)}}var a=o>0?1e3/o:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,n=this.config;if(e){var o=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&n.videoFrame?this.video.cancelVideoFrameCallback(e):o?o(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}},t.prototype.play=function(t){var e,n;return o(this,void 0,void 0,(function(){var o,r;return i(this,(function(i){switch(i.label){case 0:u(this.video),t&&this.setConfig(t),i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.video.play()];case 2:return o=i.sent(),this.drawFrame(),[2,o];case 3:throw r=i.sent(),null===(n=(e=this.config).onError)||void 0===n||n.call(e,r),r;case 4:return[2]}}))}))},t.prototype.pause=function(){u(this.video),this.video.pause(),this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){u(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){u(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){u(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){u(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,n,o=this,i=o.video,a=o.config,s=o.canvas;if(this.videoWidth=i.videoWidth,this.videoHeight=i.videoHeight,a.autoResize&&s&&i.videoWidth>0&&i.videoHeight>0){var d=r(),l=(t=i.videoWidth,e=i.videoHeight,("landscape"===(n=a.orientation)?t/2:t)/("portrait"===n?e/2:e)),u=s.width/d,c=s.height/d,h=void 0;if("width"===a.autoResize||"height"===a.autoResize)h=a.autoResize;else h=l>=u/c?"width":"height";var p="width"===h?u:Math.round(c*l),v="width"===h?Math.round(u/l):c,f=v*d;p*d===this.canvasWidth&&f===this.canvasHeight||(!function(t,e,n){var o=r();t.width=e*o,t.height=n*o,t.style.width=e+"px",t.style.height=n+"px"}(s,p,v),this.canvasWidth=s.width,this.canvasHeight=s.height,this.onCanvasResized())}a.onLoad&&a.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,t.autoShow&&this.drawFrameOnce(),1===this.onCanPlayTimes&&t.onCanPlay&&t.onCanPlay(),1!==this.onCanPlayTimes&&t.loop&&t.onLoop&&t.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t=this.config;t.onPause&&t.onPause()},t.prototype.onEnded=function(){var t=this.config;this.video.currentTime=0,this.cancelDrawFrame(),t.onEnded&&t.onEnded()},t.prototype.onError=function(t){var e,n,o=this.config,i=this.video;o.debug&&console.error(null!==(e=null==i?void 0:i.error)&&void 0!==e?e:t),null===(n=o.onError)||void 0===n||n.call(o,t),this.destroy()},t.prototype.destroy=function(){var t,e,n;try{var o=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==o?void 0:o.onDestroy)||void 0===e||e.call(o),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(n=this.config)||void 0===n?void 0:n.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,n=t.onCanplay,o=t.onPlay,i=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=n.bind(this),this.onPlay=o.bind(this),this.onPause=i.bind(this),this.onEnded=r.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",n),e.addEventListener("canplaythrough",o),e.addEventListener("play",i),e.addEventListener("pause",r),e.addEventListener("ended",a),e.addEventListener("error",s)},t.prototype.removeEvent=function(){var t=this,e=t.video,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",n),e.removeEventListener("play",i),e.removeEventListener("canplaythrough",o),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),p=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initWebGLRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return n(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.viewport(0,0,t.width,t.height),this.vertexShader=this.initShader(e.VERTEX_SHADER,"#define GLSLIFY 1\nattribute vec4 a_Position;attribute vec2 a_Video_Texture_Position;attribute vec2 a_Alpha_Video_Texture_Position;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_Position=a_Position;v_Video_Texture_Position=a_Video_Texture_Position;v_Alpha_Video_Texture_Position=a_Alpha_Video_Texture_Position;}"),this.fragmentShader=this.initShader(e.FRAGMENT_SHADER,"precision lowp float;\n#define GLSLIFY 1\nuniform sampler2D u_Sampler;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_FragColor=vec4(texture2D(u_Sampler,v_Video_Texture_Position).rgb,texture2D(u_Sampler,v_Alpha_Video_Texture_Position).r);}"),this.program=this.initProgram(),this.texture=this.initTexture(),this.vertexBuffer=this.initVertexBuffer()},e.prototype.initShader=function(t,e){var n=this.gl,o=n.createShader(t);if(n.shaderSource(o,e),n.compileShader(o),this.config.debug){var i=n.getShaderParameter(o,n.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,i),i||console.log("[alpha-video-player-js] shader compile fail: ",t,n.getShaderInfoLog(o))}return o},e.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),this.config.debug){var n=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",n),n||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},e.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();return t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,1),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),e},e.prototype.initVertexBuffer=function(){var t=this,e=t.gl,n=t.program,o=t.config,i=function(t,e){var n="front"===e,o=[-1,1,1,1,-1,-1,1,-1],i=a[t][n?"front":"back"],r=a[t][n?"back":"front"],s=[];return o.forEach((function(t,e){e%2==0&&(s=s.concat(o.slice(e,e+2)).concat(i.slice(e,e+2)).concat(r.slice(e,e+2)))})),new Float32Array(s)}(o.orientation,o.side),r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,i,e.STATIC_DRAW);var s=i.BYTES_PER_ELEMENT,d=e.getAttribLocation(n,"a_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*s,0),e.enableVertexAttribArray(d);var l=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6*s,2*s),e.enableVertexAttribArray(l);var u=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*s,4*s),e.enableVertexAttribArray(u);var c=e.getUniformLocation(n,"u_Sampler");return e.uniform1i(c,0),r},e.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},e.prototype.drawFrameOnce=function(){var t=this.gl,e=this.video;t&&e&&this.canPlay&&(t.clear(t.COLOR_BUFFER_BIT),t.texImage2D(t.TEXTURE_2D,0,t.RGB,t.RGB,t.UNSIGNED_BYTE,e),t.drawArrays(t.TRIANGLE_STRIP,0,4))},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this.gl,n=this.config;n.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),n.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n,o=this,i=o.canvas,r=o.gl,a=o.vertexShader,s=o.fragmentShader,d=o.texture,l=o.vertexBuffer,u=o.program;i&&r&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),r.detachShader(u,a),r.deleteShader(a),r.detachShader(u,s),r.deleteShader(s),r.deleteTexture(d),r.deleteBuffer(l),r.deleteProgram(u),null===(n=r.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},e}(h),v=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initCanvasRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return n(e,t),e.prototype.initCanvasRender=function(){var t=this,e=t.canvas,n=t.canvasWidth,o=t.canvasHeight,i=t.config,r=i.orientation,a=i.side,s=document.createElement("canvas");this.tempCanvasWidth=s.width=l(r,"width",n),this.tempCanvasHeight=s.height=l(r,"height",o);var u=d(r,a,n,o),c=u.imageCoords,h=u.alphaImageCoords;this.imageCoords=c,this.alphaImageCoords=h,this.context2d=e.getContext("2d"),this.tempContext2d=s.getContext("2d")},e.prototype.onCanvasResized=function(){var t=this,e=t.canvasWidth,n=t.canvasHeight,o=t.config,i=o.orientation,r=o.side,a=document.createElement("canvas");this.tempCanvasWidth=a.width=l(i,"width",e),this.tempCanvasHeight=a.height=l(i,"height",n);var s=d(i,r,e,n),u=s.imageCoords,c=s.alphaImageCoords;this.imageCoords=u,this.alphaImageCoords=c,this.context2d=this.canvas.getContext("2d"),this.tempContext2d=a.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,n=t.tempContext2d,o=t.video,i=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.tempCanvasWidth,d=t.tempCanvasHeight,l=t.imageCoords,u=t.alphaImageCoords;if(e&&n&&o&&i&&r&&a&&s&&d&&l&&u){n.drawImage(o,0,0,r,a,0,0,s,d);for(var c=n.getImageData.apply(n,l),h=c.data,p=n.getImageData.apply(n,u).data,v=3;v<h.length;v+=4)h[v]=p[v-3];e.putImageData(c,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this,n=e.context2d,o=e.canvasWidth,i=e.canvasHeight,r=e.config;r.autoClear&&n.clearRect(0,0,o,i),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n=this.canvas;n&&(t.prototype.destroy.call(this),null===(e=n.parentNode)||void 0===e||e.removeChild(n),this.canvas=null,this.context2d=null,this.tempContext2d=null,this.tempCanvasWidth=null,this.tempCanvasHeight=null,this.imageCoords=null,this.alphaImageCoords=null)},e}(h),f=function(){function t(t){if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new p(t);else{if(!document.createElement("canvas").getContext("2d"))throw new Error("[alpha-video-player-js]: Your browser does not support play. Please upgrade your browser and try again.");this.render=new v(t)}var e}return Object.defineProperty(t.prototype,"playing",{get:function(){return this.render.playing},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){return this.render.loop},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return o(this,void 0,void 0,(function(){return i(this,(function(e){return[2,this.render.play(t)]}))}))},t.prototype.pause=function(){this.render.pause()},t.prototype.destroy=function(){this.render.destroy()},t.prototype.reset=function(){this.render.reset()},t.prototype.setSrc=function(t){this.render.setSrc(t)},t.prototype.setCurrentTime=function(t){this.render.setCurrentTime(t)},t.prototype.setMute=function(t){this.render.setMute(t)},t.prototype.setLoop=function(t){this.render.setLoop(t)},t.prototype.setPlaybackRate=function(t){this.render.setPlaybackRate(t)},t}(),y=t.extend({name:"AlphaVideoPlayer",props:{src:{type:String,default:void 0},width:{type:Number,default:void 0},height:{type:Number,default:void 0},crossOrigin:{type:String,default:void 0},muted:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},playbackRate:{type:Number,default:1},fps:{type:Number,default:0},orientation:{type:String,default:"landscape"},side:{type:String,default:"front"},videoFrame:{type:Boolean,default:!1},debug:{type:Boolean,default:!1},autoShow:{type:Boolean,default:!1},autoClear:{type:Boolean,default:!0},autoDestroy:{type:Boolean,default:!1},autoResize:{default:"contain"}},data:function(){return{_player:null}},render:function(t){return t("div",{ref:"container"})},mounted:function(){this._initPlayer()},beforeDestroy:function(){this._destroyPlayer()},watch:{src:function(t){var e;null!=t&&(null===(e=this._player)||void 0===e||e.setSrc(t))},muted:function(t){var e;null===(e=this._player)||void 0===e||e.setMute(t)},loop:function(t){var e;null===(e=this._player)||void 0===e||e.setLoop(t)},playbackRate:function(t){var e;null===(e=this._player)||void 0===e||e.setPlaybackRate(t)}},methods:{_initPlayer:function(){var t=this,e=t.$refs.container;e&&(t._destroyPlayer(),t._player=new f({container:e,src:t.src,width:t.width,height:t.height,crossOrigin:t.crossOrigin,muted:t.muted,loop:t.loop,playbackRate:t.playbackRate,fps:t.fps,orientation:t.orientation,side:t.side,videoFrame:t.videoFrame,debug:t.debug,autoShow:t.autoShow,autoClear:t.autoClear,autoDestroy:t.autoDestroy,autoResize:t.autoResize,onInitSuccess:function(){return t.$emit("init-success")},onInitError:function(e){return t.$emit("init-error",e)},onLoad:function(){return t.$emit("load")},onCanPlay:function(){return t.$emit("can-play")},onPlay:function(){return t.$emit("play")},onLoop:function(){return t.$emit("loop")},onPause:function(){return t.$emit("pause")},onEnded:function(){return t.$emit("ended")},onError:function(e){return t.$emit("error",e)},onDestroy:function(){return t.$emit("destroy")}}))},play:function(){var t;return null===(t=this._player)||void 0===t?void 0:t.play()},pause:function(){var t;null===(t=this._player)||void 0===t||t.pause()},reset:function(){var t;null===(t=this._player)||void 0===t||t.reset()},_destroyPlayer:function(){var t=this;t._player&&(t._player.destroy(),t._player=null)},destroy:function(){this._destroyPlayer()},setSrc:function(t){var e;null===(e=this._player)||void 0===e||e.setSrc(t)},setCurrentTime:function(t){var e;null===(e=this._player)||void 0===e||e.setCurrentTime(t)},setMute:function(t){var e;null===(e=this._player)||void 0===e||e.setMute(t)},setLoop:function(t){var e;null===(e=this._player)||void 0===e||e.setLoop(t)},setPlaybackRate:function(t){var e;null===(e=this._player)||void 0===e||e.setPlaybackRate(t)},getPlayer:function(){return this._player}}});export{y as default};
+import t from"vue";var e=function(t,i){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},e(t,i)};function i(t,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function n(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}function n(t,e,i,n){return new(i||(i=Promise))((function(o,r){function a(t){try{l(n.next(t))}catch(t){r(t)}}function s(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}l((n=n.apply(t,e||[])).next())}))}function o(t,e){var i,n,o,r,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(l){return function(s){if(i)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(i=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,n=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){a.label=s[1];break}if(6===s[0]&&a.label<o[1]){a.label=o[1],o=s;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(s);break}o[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],n=0}finally{i=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}"function"==typeof SuppressedError&&SuppressedError;var r="start",a=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},s=function(t){if(void 0===t&&(t=1),"number"!=typeof t||!isFinite(t)||t<0||t>1)throw new Error("[alpha-video-player-js]: alphaScale must be a finite number between 0 and 1.");return t},l=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=r);var o=s(i);if("landscape"===t){var a=1/(1+o),l=o/(1+o);return{rgb:{x:"front"===e?0:l,y:0,width:a,height:1},alpha:{x:"front"===e?a:0,y:"start"===n?0:1-o,width:l,height:o}}}var d=1/(1+o),h=o/(1+o);return{rgb:{x:0,y:"front"===e?0:h,width:1,height:d},alpha:{x:"start"===n?0:1-o,y:"front"===e?d:0,width:o,height:h}}},d=function(t){var e=t.x,i=t.y,n=t.width,o=t.height;return[e,1-i,e+n,1-i,e,1-i-o,e+n,1-i-o]},h=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},u=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},c={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:r,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},p=function(){function t(t,e){if(void 0===e&&(e=!1),this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=0,this.onCanPlayTimes=1,this.canPlay=!1,this.adaptAnimation=null,this.renderVideoDirectly=!1,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");if(this.renderVideoDirectly=e,this.setConfig(t),this.container=t.container,!e){this.canvas=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=a(),s=e||n,l=i||o;s&&l||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var d=document.createElement("canvas");return d.width=s*r,d.height=l*r,d.style.width="100%",d.style.height="100%",d.style.pointerEvents="none",t.appendChild(d),d}(this.container,t.width,t.height);var i=this.canvas,n=i.width,o=i.height;this.canvasWidth=n,this.canvasHeight=o}t.src&&this.initVideo()}return Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.video)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.setConfig=function(t){if(t){var e=Object.assign({},c,this.config||{},t);e.alphaScale=s(e.alphaScale),e.alphaAlign=e.alphaAlign||r,this.config=e}},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.poster,n=t.playbackRate,o=t.muted,r=t.loop,a=t.crossOrigin,s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i||"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",s.src=e,s.autoplay=!1,s.preload="auto",s.playbackRate=n,s.loop=r,s.muted=o,o&&s.setAttribute("muted",""),s.setAttribute("playsinline",""),s.setAttribute("webkit-playsinline",""),s.setAttribute("x-webkit-airplay",""),this.renderVideoDirectly){var l=this.config.width||this.container.offsetWidth,d=this.config.height||this.container.offsetHeight;s.style.display="block",s.style.width=l?"".concat(l,"px"):"100%",s.style.height=d?"".concat(d,"px"):"100%",s.style.visibility=this.config.autoShow?"visible":"hidden",s.style.pointerEvents="none",this.container.appendChild(s)}else s.style.position="absolute",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.pointerEvents="none",document.body.appendChild(s);this.bindInstance(),this.addEvent(),s.load()},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this.drawFrame.bind(this);this.adaptAnimation||(this.adaptAnimation=this.initAdaptAnimation()),this.animationId=this.adaptAnimation(t),this.playing=!0},t.prototype.initAdaptAnimation=function(){var t=this,e=this.config,i=e.videoFrame,n=e.fps,o=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&i)return function(e){return t.video.requestVideoFrameCallback(e)};if(o){if(n){var r=-1;return function(e){return r++,o((function(){if(r%(60/n)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return o(t)}}var a=n>0?1e3/n:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,i=this.config;if(e){var n=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&i.videoFrame?this.video.cancelVideoFrameCallback(e):n?n(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}else this.playing=!1},t.prototype.play=function(t){var e,i;return n(this,void 0,void 0,(function(){var n,r;return o(this,(function(o){switch(o.label){case 0:h(this.video),t&&this.setConfig(t),o.label=1;case 1:return o.trys.push([1,3,,4]),[4,this.video.play()];case 2:return n=o.sent(),this.renderVideoDirectly?(this.setNativeVideoVisible(!0),this.playing=!0):this.drawFrame(),[2,n];case 3:throw r=o.sent(),null===(i=(e=this.config).onError)||void 0===i||i.call(e,r),r;case 4:return[2]}}))}))},t.prototype.pause=function(){h(this.video),this.video.pause(),this.renderVideoDirectly?this.playing=!1:this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){h(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){h(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){h(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){h(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,i=this,n=i.video,o=i.config,s=i.canvas;if(this.videoWidth=n.videoWidth,this.videoHeight=n.videoHeight,o.autoResize&&(s||this.renderVideoDirectly)&&n.videoWidth>0&&n.videoHeight>0){var d=a(),h=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=r),0===n)return t/e;var a=l(i,"front",n,o).rgb;return t*a.width/(e*a.height)}(n.videoWidth,n.videoHeight,o.orientation,o.alphaScale,o.alphaAlign),u=s?s.width/d:o.width||(null===(t=this.container)||void 0===t?void 0:t.offsetWidth)||n.videoWidth,c=s?s.height/d:o.height||(null===(e=this.container)||void 0===e?void 0:e.offsetHeight)||n.videoHeight,p=void 0;if("width"===o.autoResize||"height"===o.autoResize)p=o.autoResize;else p=h>=u/c?"width":"height";var v="width"===p?u:Math.round(c*h),f="width"===p?Math.round(u/h):c,y=f*d;!s||v*d===this.canvasWidth&&y===this.canvasHeight?this.renderVideoDirectly&&(n.style.width="".concat(v,"px"),n.style.height="".concat(f,"px")):(!function(t,e,i){var n=a();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(s,v,f),this.canvasWidth=s.width,this.canvasHeight=s.height,this.onCanvasResized())}o.onLoad&&o.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!0):t.autoShow&&this.drawFrameOnce(),1===this.onCanPlayTimes&&t.onCanPlay&&t.onCanPlay(),1!==this.onCanPlayTimes&&t.loop&&t.onLoop&&t.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t=this.config;t.onPause&&t.onPause()},t.prototype.onEnded=function(){var t=this.config;this.video.currentTime=0,this.cancelDrawFrame(),t.onEnded&&t.onEnded()},t.prototype.setNativeVideoVisible=function(t){this.renderVideoDirectly&&this.video&&(this.video.style.visibility=t?"visible":"hidden")},t.prototype.onError=function(t){var e,i,n=this.config,o=this.video;n.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t),null===(i=n.onError)||void 0===i||i.call(n,t),this.destroy()},t.prototype.destroy=function(){var t,e,i;try{var n=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==n?void 0:n.onDestroy)||void 0===e||e.call(n),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(i=this.config)||void 0===i?void 0:i.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,i=t.onCanplay,n=t.onPlay,o=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=i.bind(this),this.onPlay=n.bind(this),this.onPause=o.bind(this),this.onEnded=r.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",i),e.addEventListener("canplaythrough",n),e.addEventListener("play",o),e.addEventListener("pause",r),e.addEventListener("ended",a),e.addEventListener("error",s)},t.prototype.removeEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",i),e.removeEventListener("play",o),e.removeEventListener("canplaythrough",n),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),v=function(t){function e(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initWebGLRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return i(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.viewport(0,0,t.width,t.height),this.vertexShader=this.initShader(e.VERTEX_SHADER,"#define GLSLIFY 1\nattribute vec4 a_Position;attribute vec2 a_Video_Texture_Position;attribute vec2 a_Alpha_Video_Texture_Position;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_Position=a_Position;v_Video_Texture_Position=a_Video_Texture_Position;v_Alpha_Video_Texture_Position=a_Alpha_Video_Texture_Position;}"),this.fragmentShader=this.initShader(e.FRAGMENT_SHADER,"precision lowp float;\n#define GLSLIFY 1\nuniform sampler2D u_Sampler;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_FragColor=vec4(texture2D(u_Sampler,v_Video_Texture_Position).rgb,texture2D(u_Sampler,v_Alpha_Video_Texture_Position).r);}"),this.program=this.initProgram(),this.texture=this.initTexture(),this.vertexBuffer=this.initVertexBuffer()},e.prototype.initShader=function(t,e){var i=this.gl,n=i.createShader(t);if(i.shaderSource(n,e),i.compileShader(n),this.config.debug){var o=i.getShaderParameter(n,i.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,o),o||console.log("[alpha-video-player-js] shader compile fail: ",t,i.getShaderInfoLog(n))}return n},e.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),this.config.debug){var i=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",i),i||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},e.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();return t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,1),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),e},e.prototype.initVertexBuffer=function(){var t=this,e=t.gl,i=t.program,n=t.config,o=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=r);var o=[-1,1,1,1,-1,-1,1,-1],a=l(t,e,i,n),s=a.rgb,h=a.alpha,u=d(s),c=d(h),p=[];return o.forEach((function(t,e){e%2==0&&(p=p.concat(o.slice(e,e+2)).concat(u.slice(e,e+2)).concat(c.slice(e,e+2)))})),new Float32Array(p)}(n.orientation,n.side,n.alphaScale,n.alphaAlign),a=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW);var s=o.BYTES_PER_ELEMENT,h=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(h,2,e.FLOAT,!1,6*s,0),e.enableVertexAttribArray(h);var u=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*s,2*s),e.enableVertexAttribArray(u);var c=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6*s,4*s),e.enableVertexAttribArray(c);var p=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(p,0),a},e.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},e.prototype.drawFrameOnce=function(){var t=this.gl,e=this.video;t&&e&&this.canPlay&&u(e)&&(t.clear(t.COLOR_BUFFER_BIT),t.texImage2D(t.TEXTURE_2D,0,t.RGB,t.RGB,t.UNSIGNED_BYTE,e),t.drawArrays(t.TRIANGLE_STRIP,0,4))},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this.gl,i=this.config;i.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),i.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,i,n=this,o=n.canvas,r=n.gl,a=n.vertexShader,s=n.fragmentShader,l=n.texture,d=n.vertexBuffer,h=n.program;o&&r&&(t.prototype.destroy.call(this),null===(e=o.parentNode)||void 0===e||e.removeChild(o),r.detachShader(h,a),r.deleteShader(a),r.detachShader(h,s),r.deleteShader(s),r.deleteTexture(l),r.deleteBuffer(d),r.deleteProgram(h),null===(i=r.getExtension("WEBGL_lose_context"))||void 0===i||i.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},e}(p),f=function(t){function e(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initCanvasRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return i(e,t),e.prototype.initCanvasRender=function(){var t=this.canvas;this.context2d=t.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.onCanvasResized=function(){this.context2d=this.canvas.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.resizeAlphaCanvas=function(){var t=this.alphaCanvas||document.createElement("canvas");t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,i=t.alphaContext2d,n=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.canvasWidth,d=t.canvasHeight,h=t.config;if(e&&i&&n&&o&&u(n)&&r&&a&&s&&d){var c=l(h.orientation,h.side,h.alphaScale,h.alphaAlign),p=c.rgb,v=c.alpha;e.drawImage(n,p.x*r,p.y*a,p.width*r,p.height*a,0,0,s,d);var f=e.getImageData(0,0,s,d),y=f.data;i.drawImage(n,v.x*r,v.y*a,v.width*r,v.height*a,0,0,s,d);for(var g=i.getImageData(0,0,s,d).data,m=3;m<y.length;m+=4)y[m]=g[m-3];e.putImageData(f,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this,i=e.context2d,n=e.canvasWidth,o=e.canvasHeight,r=e.config;r.autoClear&&i.clearRect(0,0,n,o),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,i=this.canvas;i&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),this.canvas=null,this.context2d=null,this.alphaCanvas=null,this.alphaContext2d=null)},e}(p),y=function(t){function e(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{i=t.call(this,e,!0)||this,null==n||n()}catch(t){if(!o)throw t;o(t)}return i}return i(e,t),e.prototype.onEnded=function(){var e=this.config;e.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this),e.autoDestroy&&this.destroy()},e.prototype.destroy=function(){t.prototype.destroy.call(this)},e}(p),g=function(){function t(t){var e,i=s(t.alphaScale),n=Object.assign({},t,{alphaScale:i});if(0===i)this.render=new y(n);else if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new v(n);else{if(!document.createElement("canvas").getContext("2d"))throw new Error("[alpha-video-player-js]: Your browser does not support play. Please upgrade your browser and try again.");this.render=new f(n)}}return Object.defineProperty(t.prototype,"playing",{get:function(){return this.render.playing},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){return this.render.loop},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return n(this,void 0,void 0,(function(){return o(this,(function(e){return[2,this.render.play(t)]}))}))},t.prototype.pause=function(){this.render.pause()},t.prototype.destroy=function(){this.render.destroy()},t.prototype.reset=function(){this.render.reset()},t.prototype.setSrc=function(t){this.render.setSrc(t)},t.prototype.setCurrentTime=function(t){this.render.setCurrentTime(t)},t.prototype.setMute=function(t){this.render.setMute(t)},t.prototype.setLoop=function(t){this.render.setLoop(t)},t.prototype.setPlaybackRate=function(t){this.render.setPlaybackRate(t)},t}(),m=t.extend({name:"AlphaVideoPlayer",props:{src:{type:String,default:void 0},poster:{type:String,default:void 0},width:{type:Number,default:void 0},height:{type:Number,default:void 0},crossOrigin:{type:String,default:void 0},muted:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},playbackRate:{type:Number,default:1},fps:{type:Number,default:0},orientation:{type:String,default:"landscape"},side:{type:String,default:"front"},alphaScale:{type:Number,default:1},alphaAlign:{type:String,default:r},videoFrame:{type:Boolean,default:!1},debug:{type:Boolean,default:!1},autoShow:{type:Boolean,default:!1},autoClear:{type:Boolean,default:!0},autoDestroy:{type:Boolean,default:!1},autoResize:{default:"contain"}},data:function(){return{_player:null}},render:function(t){return t("div",{ref:"container"})},mounted:function(){this._initPlayer()},beforeDestroy:function(){this._destroyPlayer()},watch:{src:function(t){var e;null!=t&&(null===(e=this._player)||void 0===e||e.setSrc(t))},muted:function(t){var e;null===(e=this._player)||void 0===e||e.setMute(t)},loop:function(t){var e;null===(e=this._player)||void 0===e||e.setLoop(t)},playbackRate:function(t){var e;null===(e=this._player)||void 0===e||e.setPlaybackRate(t)}},methods:{_initPlayer:function(){var t=this,e=t.$refs.container;e&&(t._destroyPlayer(),t._player=new g({container:e,src:t.src,poster:t.poster,width:t.width,height:t.height,crossOrigin:t.crossOrigin,muted:t.muted,loop:t.loop,playbackRate:t.playbackRate,fps:t.fps,orientation:t.orientation,side:t.side,alphaScale:t.alphaScale,alphaAlign:t.alphaAlign,videoFrame:t.videoFrame,debug:t.debug,autoShow:t.autoShow,autoClear:t.autoClear,autoDestroy:t.autoDestroy,autoResize:t.autoResize,onInitSuccess:function(){return t.$emit("init-success")},onInitError:function(e){return t.$emit("init-error",e)},onLoad:function(){return t.$emit("load")},onCanPlay:function(){return t.$emit("can-play")},onPlay:function(){return t.$emit("play")},onLoop:function(){return t.$emit("loop")},onPause:function(){return t.$emit("pause")},onEnded:function(){return t.$emit("ended")},onError:function(e){return t.$emit("error",e)},onDestroy:function(){return t.$emit("destroy")}}))},play:function(){var t;return null===(t=this._player)||void 0===t?void 0:t.play()},pause:function(){var t;null===(t=this._player)||void 0===t||t.pause()},reset:function(){var t;null===(t=this._player)||void 0===t||t.reset()},_destroyPlayer:function(){var t=this;t._player&&(t._player.destroy(),t._player=null)},destroy:function(){this._destroyPlayer()},setSrc:function(t){var e;null===(e=this._player)||void 0===e||e.setSrc(t)},setCurrentTime:function(t){var e;null===(e=this._player)||void 0===e||e.setCurrentTime(t)},setMute:function(t){var e;null===(e=this._player)||void 0===e||e.setMute(t)},setLoop:function(t){var e;null===(e=this._player)||void 0===e||e.setLoop(t)},setPlaybackRate:function(t){var e;null===(e=this._player)||void 0===e||e.setPlaybackRate(t)},getPlayer:function(){return this._player}}});export{m as default};