alpha-video-player-js 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -115,6 +115,7 @@ Callbacks: `onInitSuccess`, `onInitError`, `onLoad`, `onCanPlay`, `onPlay`, `onL
115
115
  | `playing` | Read-only boolean that reports whether playback is active. |
116
116
  | `loop` | Read-only boolean that reports loop state. |
117
117
  | `play(config?)` | Starts or resumes playback and returns a `Promise`. The optional config overrides applicable settings. |
118
+ | `updateConfig(config)` | Applies runtime options. Layout/render-mode changes rebuild internal resources while preserving the public player instance. |
118
119
  | `pause()` | Pauses playback and stops the frame loop. |
119
120
  | `reset()` | Resets playback progress. |
120
121
  | `setSrc(src)` | Changes the video source. |
@@ -124,11 +125,35 @@ Callbacks: `onInitSuccess`, `onInitError`, `onLoad`, `onCanPlay`, `onPlay`, `onL
124
125
  | `setPlaybackRate(rate)` | Changes playback speed. |
125
126
  | `destroy()` | Releases DOM, canvas, and rendering resources. Do not reuse the instance afterward. |
126
127
 
127
- `play()` rejects with the browser's original error (for example, a `DOMException` from autoplay restrictions) and also invokes `onError` with that same value. Media load/decode failures are delivered through `onError` and then destroy the instance.
128
+ `updateConfig()` incrementally overlays the supplied fields on the current configuration. Media options, transparent layout coordinates, output dimensions, `fps`, and `videoFrame` update in place; switching between positive `alphaScale` values reuses the same video, canvas, and WebGL context. Native-video source changes, `crossOrigin` changes, and switches between `alphaScale=0` and a positive value use a double-buffered transition: the old output remains visible while the replacement loads off-flow and hidden, then the SDK swaps outputs only after the replacement is playable and its first frame is ready. Active playback resumes automatically. If replacement loading fails, the previous renderer is restored. Internal transitions do not emit `onDestroy`; that callback remains reserved for destroying the public player.
129
+
130
+ When the player is paused with `autoShow=false`, a prepared replacement stays hidden and the previous frame remains visible until the next `play()` call activates it.
131
+
132
+ ```ts
133
+ player.updateConfig({
134
+ src: nextVideo.src,
135
+ alphaScale: nextVideo.alphaScale,
136
+ orientation: nextVideo.orientation,
137
+ side: nextVideo.side,
138
+ alphaAlign: nextVideo.alphaAlign,
139
+ })
140
+
141
+ await player.play()
142
+ ```
143
+
144
+ `play()` rejects with the browser's original error (for example, a `DOMException` from autoplay restrictions). The current play request also invokes `onError` with that value; requests superseded by pause, source changes, destruction, or a newer play request do not deliver stale error callbacks. Media load/decode failures and frame-rendering errors are delivered through `onError` and then destroy the instance.
145
+
146
+ ### Multiple players on one page
147
+
148
+ Create each player with its own container (or mount separate framework components). Video elements, callbacks, render resources, and frame loops belong to their instances. Pausing or destroying one player does not stop another. Repeated `play()` calls maintain one frame loop; `pause()`, `setSrc()`, and `destroy()` invalidate pending playback starts. Call `play()` again after changing the source when playback is desired.
149
+
150
+ Each WebGL player allocates one context on its output canvas. If WebGL returns no context, the same canvas is used for Canvas 2D. A `webglcontextlost` event is forwarded to `onError`, after which the affected player is destroyed; it does not automatically restore or switch renderers mid-playback. Remount the component or create a new core instance to retry. Initialization failures clean up partial resources before invoking `onInitError` (or throwing if no handler is provided).
151
+
152
+ `destroy()` is idempotent and calls `onDestroy` only after resource cleanup. Browser GPU-context and video-decoder limits still apply: pause offscreen effects, destroy unused instances, and measure concurrency on target devices. The SDK does not impose or guarantee a universal instance limit.
128
153
 
129
154
  ## Framework components
130
155
 
131
- All component packages expose the same player options except `container`, which the component owns. Their refs expose `play`, `pause`, `destroy`, `reset`, `setSrc`, `setCurrentTime`, `setMute`, `setLoop`, `setPlaybackRate`, and `getPlayer`.
156
+ All component packages expose the same player options except `container`, which the component owns. Runtime prop changes are forwarded through `updateConfig()`, including layout and render-mode changes. Their refs expose `play`, `updateConfig`, `pause`, `destroy`, `reset`, `setSrc`, `setCurrentTime`, `setMute`, `setLoop`, `setPlaybackRate`, and `getPlayer`.
132
157
 
133
158
  ### Vue 3
134
159
 
@@ -198,7 +223,7 @@ export function Effect() {
198
223
  }
199
224
  ```
200
225
 
201
- The React component also accepts `className` and `style`. Components reactively synchronize changes to `src`, `muted`, `loop`, and `playbackRate`; changing packing options (`orientation`, `side`, `alphaScale`, `alphaAlign`) requires remounting.
226
+ The React component also accepts `className` and `style`. Media, size, and packing props synchronize reactively; switching `alphaScale` among native and transparent modes does not require remounting.
202
227
 
203
228
  ### TypeScript exports
204
229
 
@@ -215,6 +240,7 @@ If you need both a framework ref and the core instance type, import them from th
215
240
  ```bash
216
241
  npm run dev # Watch with Rollup
217
242
  npm run build # Production bundles and declarations
243
+ npm test # Build, then run lifecycle regressions (Node.js 18+)
218
244
  ```
219
245
 
220
246
  ## License
package/README.zh-CN.md CHANGED
@@ -83,6 +83,7 @@ new AlphaVideoPlayer({
83
83
 
84
84
  ```ts
85
85
  player.play(config?)
86
+ player.updateConfig(config)
86
87
  player.pause()
87
88
  player.reset()
88
89
  player.setSrc(src)
@@ -93,11 +94,37 @@ player.setPlaybackRate(rate)
93
94
  player.destroy()
94
95
  ```
95
96
 
96
- `play()` 失败时会 reject 浏览器的原始错误,并以相同值调用 `onError`。媒体加载、解码或跨域失败也会通过 `onError` 上报,然后销毁实例。`destroy()` 后不要复用该实例。
97
+ `updateConfig()` 会把传入字段增量覆盖到当前配置。媒体属性、透明布局坐标、输出尺寸、`fps` 和 `videoFrame` 均原地更新;正数 `alphaScale` 之间切换会复用同一个 video、Canvas 和 WebGL 上下文。普通视频换源、`crossOrigin` 变化以及 `alphaScale=0` 与正数之间切换时使用双缓冲:旧输出保持可见,新 renderer 在脱离文档流的隐藏状态下加载,确认可播放并准备好首帧后再原子替换;切换前正在播放时会自动续播。新资源加载失败则恢复旧 renderer。内部切换不会触发 `onDestroy`,`onDestroy` 仍只表示公共播放器被真正销毁。
98
+
99
+ 播放器暂停且 `autoShow=false` 时,新 renderer 准备完成后仍保持隐藏,旧画面会保留到下一次调用 `play()` 再完成替换。
100
+
101
+ ```ts
102
+ player.updateConfig({
103
+ src: nextVideo.src,
104
+ alphaScale: nextVideo.alphaScale,
105
+ orientation: nextVideo.orientation,
106
+ side: nextVideo.side,
107
+ alphaAlign: nextVideo.alphaAlign,
108
+ })
109
+
110
+ await player.play()
111
+ ```
112
+
113
+ `play()` 失败时会 reject 浏览器的原始错误,当前有效请求还会以相同值调用 `onError`。被暂停、换源、销毁或后续播放请求取代的旧请求不再触发过期错误回调。媒体加载、解码、跨域或逐帧渲染失败会通过 `onError` 上报,然后销毁实例。`destroy()` 后不要复用该实例。
114
+
115
+ ### 同页多实例
116
+
117
+ 每个播放器使用独立容器,或分别挂载框架组件。video、事件、渲染资源和帧循环均归各自实例所有,暂停或销毁一个不会停止另一个。重复调用 `play()` 只保留一个帧循环;`pause()`、`setSrc()`、`destroy()` 会使尚未完成的播放启动请求失效。换源后如需播放,重新调用 `play()`。
118
+
119
+ 每个 WebGL 播放器只在输出画布上申请一个上下文。WebGL 返回空上下文时,同一画布回退到 Canvas 2D。浏览器触发 `webglcontextlost` 时,SDK 通过 `onError` 传出该事件并销毁受影响的实例,不在播放中自动恢复或切换渲染器;需要重试时重新创建实例或挂载组件。初始化失败会先清理部分资源,再调用 `onInitError`;未提供回调时抛出异常。
120
+
121
+ `destroy()` 可重复调用,`onDestroy` 只在资源清理完成后执行一次。浏览器的 GPU 上下文和视频解码器仍有设备相关限制,建议暂停不可见动效、销毁不用的实例,并在目标设备验证并发量。SDK 不设定或保证统一的最大实例数量。
122
+
123
+ 实现问题与验证边界见[多实例隐患分析与修复记录](./docs/multi-instance-lifecycle.md)。
97
124
 
98
125
  ## 框架组件
99
126
 
100
- 组件入口分别为 `alpha-video-player-js/vue3`、`alpha-video-player-js/vue2` 和 `alpha-video-player-js/react`。组件接收除 `container` 外的全部核心配置,ref 暴露 `play`、`pause`、`destroy`、`reset`、`setSrc`、`setCurrentTime`、`setMute`、`setLoop`、`setPlaybackRate` 与 `getPlayer`。
127
+ 组件入口分别为 `alpha-video-player-js/vue3`、`alpha-video-player-js/vue2` 和 `alpha-video-player-js/react`。组件接收除 `container` 外的全部核心配置,运行时 props 变化会通过 `updateConfig()` 自动同步,包括布局与渲染模式切换。ref 暴露 `play`、`updateConfig`、`pause`、`destroy`、`reset`、`setSrc`、`setCurrentTime`、`setMute`、`setLoop`、`setPlaybackRate` 与 `getPlayer`。
101
128
 
102
129
  ### Vue 3
103
130
 
@@ -130,15 +157,15 @@ export function Effect({ src }: { src: string }) {
130
157
  }
131
158
  ```
132
159
 
133
- React 组件额外支持 `className` 与 `style`。`src`、`muted`、`loop`、`playbackRate` 会响应式同步;`orientation`、`side`、`alphaScale`、`alphaAlign` 变更时需要重新挂载。
160
+ React 组件额外支持 `className` 与 `style`。媒体、尺寸和布局 props 都会响应式同步;`alphaScale` 在 `0`、`0.5`、`1` 等模式之间变化时不需要重新挂载组件。
134
161
 
135
162
  ## 类型导入
136
163
 
137
164
  | 导入路径 | 类型 |
138
165
  | --- | --- |
139
- | `alpha-video-player-js` | `IAlphaVideoPlayer`、`IConfig`、`IOptionalConfig`、`IOrientation`、`ISide`、`IAlphaAlign` |
140
- | `.../vue3`、`.../vue2` | `IAlphaVideoPlayer`、`IAlphaVideoPlayerRef` |
141
- | `.../react` | `IAlphaVideoPlayerProps`、`IAlphaVideoPlayerRef` |
166
+ | `alpha-video-player-js` | `IAlphaVideoPlayer`、`IConfig`、`IOptionalConfig`、`IUpdateConfig`、`IOrientation`、`ISide`、`IAlphaAlign` |
167
+ | `.../vue3`、`.../vue2` | `IAlphaVideoPlayer`、`IAlphaVideoPlayerRef`、`IUpdateConfig` |
168
+ | `.../react` | `IAlphaVideoPlayerProps`、`IAlphaVideoPlayerRef`、`IUpdateConfig` |
142
169
 
143
170
  同时使用框架 ref 与核心实例类型时,请从同一个框架子路径导入,避免生成声明文件被拆分解析时的类型不兼容。
144
171
 
@@ -147,6 +174,7 @@ React 组件额外支持 `className` 与 `style`。`src`、`muted`、`loop`、`p
147
174
  ```bash
148
175
  npm run dev
149
176
  npm run build
177
+ npm test # 先构建再运行生命周期回归(Node.js 18+)
150
178
  ```
151
179
 
152
180
  ## 许可证
@@ -42,17 +42,34 @@ interface IConfig {
42
42
  onError?: (e: unknown) => void;
43
43
  onDestroy?: () => void;
44
44
  }
45
- type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
45
+ /** 运行时可更新配置;container 由现有播放器实例持有,不支持迁移。 */
46
+ type IUpdateConfig = Partial<Omit<IConfig, 'container'>>;
47
+ /** play(config) 的历史参数类型,保留可选 container 以维持类型兼容。 */
48
+ type IOptionalConfig = IUpdateConfig & Partial<Pick<IConfig, 'container'>>;
46
49
  type IOrientation = 'landscape' | 'portrait';
47
50
  type ISide = 'front' | 'back';
48
51
  type IAlphaAlign = 'start' | 'end';
49
52
 
50
53
  declare class Render {
51
54
  private render;
55
+ private config;
56
+ private outgoingRender;
57
+ private outgoingConfig;
58
+ private transitionWasPlaying;
59
+ private transitionGeneration;
52
60
  constructor(config: IConfig);
61
+ private createRenderer;
62
+ private rendererUpdates;
63
+ private finishTransition;
64
+ private rollbackTransition;
65
+ private cancelTransition;
66
+ private activateTransition;
67
+ private startTransition;
68
+ private getRenderer;
53
69
  get playing(): boolean;
54
70
  get loop(): boolean;
55
71
  play(config?: IOptionalConfig): Promise<void>;
72
+ updateConfig(config: IUpdateConfig): void;
56
73
  pause(): void;
57
74
  destroy(): void;
58
75
  reset(): void;
@@ -65,4 +82,4 @@ declare class Render {
65
82
  /** 核心类实例类型(`new Render(...)` 的实例),便于业务侧标注 ref / getPlayer() 等 */
66
83
  type IAlphaVideoPlayer = InstanceType<typeof Render>;
67
84
 
68
- export { type IAlphaAlign, type IAlphaVideoPlayer, type IConfig, type IOptionalConfig, type IOrientation, type ISide, Render as default };
85
+ export { type IAlphaAlign, type IAlphaVideoPlayer, type IConfig, type IOptionalConfig, type IOrientation, type ISide, type IUpdateConfig, Render as default };
@@ -1 +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{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};
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{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 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(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 o="start",r={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},a="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",s=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},l=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){var i,n,a,s,h,d,u,c,p,v,f,y,g,m=Object.assign({},r,e||{},t);return m.playbackRate=null!==(i=m.playbackRate)&&void 0!==i?i:r.playbackRate,m.muted=null!==(n=m.muted)&&void 0!==n?n:r.muted,m.loop=null!==(a=m.loop)&&void 0!==a?a:r.loop,m.fps=null!==(s=m.fps)&&void 0!==s?s:r.fps,m.orientation=null!==(h=m.orientation)&&void 0!==h?h:r.orientation,m.side=null!==(d=m.side)&&void 0!==d?d:r.side,m.alphaScale=l(m.alphaScale),m.alphaAlign=null!==(u=m.alphaAlign)&&void 0!==u?u:o,m.autoShow=null!==(c=m.autoShow)&&void 0!==c?c:r.autoShow,m.autoClear=null!==(p=m.autoClear)&&void 0!==p?p:r.autoClear,m.autoDestroy=null!==(v=m.autoDestroy)&&void 0!==v?v:r.autoDestroy,m.autoResize=null!==(f=m.autoResize)&&void 0!==f?f:r.autoResize,m.debug=null!==(y=m.debug)&&void 0!==y?y:r.debug,m.videoFrame=null!==(g=m.videoFrame)&&void 0!==g?g:r.videoFrame,m},d=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=o);var r=l(i);if("landscape"===t){var a=1/(1+r),s=r/(1+r);return{rgb:{x:"front"===e?0:s,y:0,width:a,height:1},alpha:{x:"front"===e?a:0,y:"start"===n?0:1-r,width:s,height:r}}}var h=1/(1+r),d=r/(1+r);return{rgb:{x:0,y:"front"===e?0:d,width:1,height:h},alpha:{x:"start"===n?0:1-r,y:"front"===e?h:0,width:r,height:d}}},u=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]},c=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},p=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},v=function(){function t(t,e,i){if(void 0===e&&(e=!1),void 0===i&&(i=null),this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=null,this.animationGeneration=0,this.playRequestId=0,this.sourceGeneration=0,this.resumeOnReady=!1,this.destroyed=!1,this.onCanPlayTimes=1,this.readyPromise=Promise.resolve(),this.resolveReady=null,this.transitionStyle=null,this.canPlay=!1,this.cancelAnimation=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,this.canvas=i,i){var n=this.canvas,o=n.width,r=n.height;this.canvasWidth=o,this.canvasHeight=r}try{t.src&&this.initVideo()}catch(t){throw this.destroy(!1),t}}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.whenReady=function(){return this.canPlay?Promise.resolve():this.readyPromise},t.prototype.setOutputVisible=function(t){var e=this.renderVideoDirectly?this.video:this.canvas;e&&(e.style.visibility=t?"visible":"hidden")},t.prototype.setOutputTransitioning=function(t){var e=this.renderVideoDirectly?this.video:this.canvas;if(e)return t?(this.transitionStyle||(this.transitionStyle={position:e.style.position||"",left:e.style.left||"",top:e.style.top||"",zIndex:e.style.zIndex||""}),e.style.position="absolute",e.style.left="0",e.style.top="0",void(e.style.zIndex="1")):void(this.transitionStyle&&(e.style.position=this.transitionStyle.position,e.style.left=this.transitionStyle.left,e.style.top=this.transitionStyle.top,e.style.zIndex=this.transitionStyle.zIndex,this.transitionStyle=null))},t.prototype.prepareOutput=function(){!this.renderVideoDirectly&&this.canPlay&&this.drawFrameOnce()},t.prototype.setConfig=function(t){t&&(this.config=h(t,this.config))},t.prototype.updateConfig=function(t){var e=this;if(this.destroyed||!this.config)throw new Error("[alpha-video-player-js]: player has been destroyed.");var i=this.config,n=this.playing,o=void 0!==t.src&&t.src!==i.src,r=o&&(n||this.resumeOnReady),a=void 0!==t.fps&&t.fps!==i.fps||void 0!==t.videoFrame&&t.videoFrame!==i.videoFrame;this.setConfig(t);var s=this.config;if(o&&this.setSrc(t.src),this.video){if(void 0!==t.muted&&this.setMute(s.muted),void 0!==t.loop&&this.setLoop(s.loop),void 0!==t.playbackRate&&this.setPlaybackRate(s.playbackRate),r){this.resumeOnReady=!0;var l=this.sourceGeneration;this.whenReady().then((function(){if(!e.destroyed&&l===e.sourceGeneration&&e.resumeOnReady)return e.resumeOnReady=!1,e.play()})).catch((function(){}))}!a||o||!n||this.renderVideoDirectly||this.video.paused||(this.cancelDrawFrame(),this.playing=!0,this.drawFrame()),this.onConfigUpdated(i,s)}},t.prototype.onConfigUpdated=function(t,e){this.video&&t.poster!==e.poster&&(this.video.poster=e.poster||a),t.width===e.width&&t.height===e.height&&t.autoResize===e.autoResize&&t.orientation===e.orientation&&t.alphaScale===e.alphaScale&&t.alphaAlign===e.alphaAlign||this.resizeOutput(),t.autoShow!==e.autoShow&&this.video&&(this.renderVideoDirectly?this.setNativeVideoVisible(this.playing||!!e.autoShow):e.autoShow&&this.canPlay&&this.drawFrameOnce())},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.poster,n=t.playbackRate,o=t.muted,r=t.loop,s=t.crossOrigin;this.resetReady();var l=this.video=document.createElement("video");if(l.crossOrigin=null!=s?s:"anonymous",l.poster=i||a,l.src=e,l.autoplay=!1,l.preload="auto",l.playbackRate=n,l.loop=r,l.muted=o,o&&l.setAttribute("muted",""),l.setAttribute("playsinline",""),l.setAttribute("webkit-playsinline",""),l.setAttribute("x-webkit-airplay",""),this.renderVideoDirectly){var h=this.config.width||this.container.offsetWidth,d=this.config.height||this.container.offsetHeight;l.style.display="block",l.style.width=h?"".concat(h,"px"):"100%",l.style.height=d?"".concat(d,"px"):"100%",l.style.visibility=this.config.autoShow?"visible":"hidden",l.style.pointerEvents="none",this.container.appendChild(l)}else l.style.position="absolute",l.style.width="0",l.style.height="0",l.style.overflow="hidden",l.style.pointerEvents="none",document.body.appendChild(l);this.bindInstance(),this.addEvent(),l.load()},t.prototype.resetReady=function(){var t,e=this;null===(t=this.resolveReady)||void 0===t||t.call(this),this.readyPromise=new Promise((function(t){e.resolveReady=t}))},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this;if(!this.destroyed&&this.playing&&null===this.animationId){var e=this.animationGeneration,i=this.initAdaptAnimation(),n=i.request,o=i.cancel;this.cancelAnimation=o;var r,a=this.config.fps>0?1e3/this.config.fps:0,s=function(){return!t.destroyed&&t.playing&&e===t.animationGeneration&&t.video&&!t.video.paused&&!t.video.ended},l=function(e){if(s()){t.animationId=null;try{(void 0===e||void 0===r||e-r>=a)&&(t.drawFrameOnce(),r=void 0!==r&&void 0!==e&&a?e-(e-r)%a:e)}catch(e){return void t.onError(e)}s()&&(t.animationId=n(l))}};l()}},t.prototype.initAdaptAnimation=function(){var t=this.config,e=t.videoFrame,i=t.fps,n=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}(),o=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}(),r=this.video;if(e&&r.requestVideoFrameCallback&&r.cancelVideoFrameCallback)return{request:function(t){return r.requestVideoFrameCallback(t)},cancel:function(t){return r.cancelVideoFrameCallback(t)}};if(n&&o)return{request:function(t){return n.call(window,t)},cancel:function(t){return o.call(window,t)}};var a=i>0?1e3/i:16;return{request:function(t){return window.setTimeout((function(){return t(Date.now())}),a)},cancel:function(t){return window.clearTimeout(t)}}},t.prototype.cancelDrawFrame=function(){var t;this.animationGeneration++;try{null!==this.animationId&&(null===(t=this.cancelAnimation)||void 0===t||t.call(this,this.animationId))}finally{this.animationId=null,this.cancelAnimation=null,this.playing=!1}},t.prototype.play=function(t){var e,o;return i(this,void 0,void 0,(function(){var i,r,a,s;return n(this,(function(n){switch(n.label){case 0:c(this.video),t&&this.setConfig(t),this.resumeOnReady=!1,i=this.video,r=++this.playRequestId,n.label=1;case 1:return n.trys.push([1,3,,4]),[4,i.play()];case 2:return a=n.sent(),this.destroyed||r!==this.playRequestId||i!==this.video||i.paused||i.ended?[2,a]:(this.cancelDrawFrame(),this.playing=!0,this.renderVideoDirectly?this.setNativeVideoVisible(!0):this.drawFrame(),[2,a]);case 3:s=n.sent();try{this.destroyed||r!==this.playRequestId||null===(o=null===(e=this.config)||void 0===e?void 0:e.onError)||void 0===o||o.call(e,s)}finally{throw s}case 4:return[2]}}))}))},t.prototype.pause=function(){c(this.video),this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.video.pause()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){if(this.destroyed)throw new Error("[alpha-video-player-js]: player has been destroyed.");this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.resetReady(),this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){c(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){c(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){c(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){c(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t=this,e=t.video,i=t.config;t.canvas,this.videoWidth=e.videoWidth,this.videoHeight=e.videoHeight,this.resizeOutput(),i.onLoad&&i.onLoad()},t.prototype.resizeOutput=function(){var t=this,e=t.video,i=t.config,n=t.canvas,r=t.container;if(e&&i){var a=s(),l=i.width||(null==r?void 0:r.offsetWidth)||(n?n.width/a:e.videoWidth),h=i.height||(null==r?void 0:r.offsetHeight)||(n?n.height/a:e.videoHeight),u=l,c=h;if(i.autoResize&&(n||this.renderVideoDirectly)&&e.videoWidth>0&&e.videoHeight>0){var p=function(t,e,i,n,r){if(void 0===n&&(n=1),void 0===r&&(r=o),0===n)return t/e;var a=d(i,"front",n,r).rgb;return t*a.width/(e*a.height)}(e.videoWidth,e.videoHeight,i.orientation,i.alphaScale,i.alphaAlign),v=l||e.videoWidth,f=h||e.videoHeight,y=void 0;if("width"===i.autoResize||"height"===i.autoResize)y=i.autoResize;else y=p>=v/f?"width":"height";u="width"===y?v:Math.round(f*p),c="width"===y?Math.round(v/p):f}var g=c*a;n&&u&&c&&(u*a!==this.canvasWidth||g!==this.canvasHeight)?(!function(t,e,i){var n=s();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(n,u,c),this.canvasWidth=n.width,this.canvasHeight=n.height,this.onCanvasResized()):this.renderVideoDirectly&&(e.style.width=u?"".concat(u,"px"):"100%",e.style.height=c?"".concat(c,"px"):"100%")}},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t,e=this.config;this.canPlay=!0,null===(t=this.resolveReady)||void 0===t||t.call(this),this.resolveReady=null;try{this.renderVideoDirectly?e.autoShow&&this.setNativeVideoVisible(!0):e.autoShow&&this.drawFrameOnce()}catch(t){return void this.onError(t)}1===this.onCanPlayTimes&&e.onCanPlay&&e.onCanPlay(),1!==this.onCanPlayTimes&&e.loop&&e.onLoop&&e.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t,e,i=this.config;(null===(t=this.video)||void 0===t?void 0:t.paused)&&(this.playRequestId++,this.cancelDrawFrame()),null===(e=null==i?void 0:i.onPause)||void 0===e||e.call(i)},t.prototype.onEnded=function(){var t,e=this.config,i=this.video;this.playRequestId++,i.currentTime=0,this.cancelDrawFrame();try{null===(t=e.onEnded)||void 0===t||t.call(e)}finally{e.autoDestroy&&this.destroy()}},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;if(n&&!this.destroyed){n.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t);try{null===(i=n.onError)||void 0===i||i.call(n,t)}finally{this.destroy()}}},t.prototype.destroy=function(t){var e=this;if(void 0===t&&(t=!0),!this.destroyed){this.destroyed=!0,this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1;var i,n=this,o=n.config,r=n.video,a=n.canvas,s=function(t){try{t()}catch(t){null!=i||(i=t)}};s((function(){return e.cancelDrawFrame()})),s((function(){var t;return null===(t=e.resolveReady)||void 0===t?void 0:t.call(e)})),this.resolveReady=null,s((function(){return e.removeEvent()})),s((function(){r&&(r.pause(),r.removeAttribute("src"),r.load())})),s((function(){var t;return null===(t=null==r?void 0:r.parentNode)||void 0===t?void 0:t.removeChild(r)})),s((function(){return e.releaseRenderResources()})),s((function(){var t;return null===(t=null==a?void 0:a.parentNode)||void 0===t?void 0:t.removeChild(a)})),s((function(){a&&(a.width=a.height=0)})),this.config=null,this.container=null,this.video=null,this.canvas=null,this.transitionStyle=null,this.canPlay=!1,t&&s((function(){var t;return null===(t=null==o?void 0:o.onDestroy)||void 0===t?void 0:t.call(o)})),i&&(null==o?void 0:o.debug)&&console.error("[alpha-video-player-js] destroy error:",i)}},t.prototype.releaseRenderResources=function(){},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}(),f=function(t){function i(e,i,n){var o=t.call(this,e,!1,i)||this;o.onContextLost=function(t){return o.onError(t)},o.gl=n;try{o.initWebGLRender(),i.addEventListener("webglcontextlost",o.onContextLost)}catch(t){throw o.destroy(!1),t}return o}return e(i,t),i.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl;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(!n)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL shader.");if(t===i.VERTEX_SHADER?this.vertexShader=n:this.fragmentShader=n,i.shaderSource(n,e),i.compileShader(n),!i.getShaderParameter(n,i.COMPILE_STATUS))throw new Error("[alpha-video-player-js]: WebGL shader compilation failed: ".concat(i.getShaderInfoLog(n)||""));return n},i.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(!e)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL program.");if(this.program=e,t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),!t.getProgramParameter(e,t.LINK_STATUS))throw new Error("[alpha-video-player-js]: WebGL program linking failed: ".concat(t.getProgramInfoLog(e)||""));return t.useProgram(e),e},i.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();if(!e)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL texture.");return this.texture=e,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=this.computeVertexCoords(n),r=e.createBuffer();if(!r)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL buffer.");this.vertexBuffer=r,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 h=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(h,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(h);var d=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(d,0),r},i.prototype.computeVertexCoords=function(t){return 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=d(t,e,i,n),s=a.rgb,l=a.alpha,h=u(s),c=u(l),p=[];return r.forEach((function(t,e){e%2==0&&(p=p.concat(r.slice(e,e+2)).concat(h.slice(e,e+2)).concat(c.slice(e,e+2)))})),new Float32Array(p)}(t.orientation,t.side,t.alphaScale,t.alphaAlign)},i.prototype.onConfigUpdated=function(e,i){if(t.prototype.onConfigUpdated.call(this,e,i),(e.orientation!==i.orientation||e.side!==i.side||e.alphaScale!==i.alphaScale||e.alphaAlign!==i.alphaAlign)&&this.gl&&this.vertexBuffer){var n=this.computeVertexCoords(i);this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.vertexBuffer),this.gl.bufferData(this.gl.ARRAY_BUFFER,n,this.gl.STATIC_DRAW)}},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&&!t.isContextLost()&&e&&this.canPlay&&p(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.onEnded=function(){var e=this.gl;this.config.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this)},i.prototype.releaseRenderResources=function(){var t,e=this,i=this,n=i.canvas,o=i.gl,r=i.vertexShader,a=i.fragmentShader,s=i.texture,l=i.vertexBuffer,h=i.program,d=function(e){try{e()}catch(e){null!=t||(t=e)}};if(d((function(){return null==n?void 0:n.removeEventListener("webglcontextlost",e.onContextLost)})),o&&(h&&r&&d((function(){return o.detachShader(h,r)})),h&&a&&d((function(){return o.detachShader(h,a)})),r&&d((function(){return o.deleteShader(r)})),a&&d((function(){return o.deleteShader(a)})),s&&d((function(){return o.deleteTexture(s)})),l&&d((function(){return o.deleteBuffer(l)})),h&&d((function(){return o.deleteProgram(h)})),d((function(){var t;return null===(t=o.getExtension("WEBGL_lose_context"))||void 0===t?void 0:t.loseContext()}))),this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null,t)throw t},i}(v),y=function(t){function i(e,i){var n=t.call(this,e,!1,i)||this;try{n.initCanvasRender()}catch(t){throw n.destroy(!1),t}return n}return e(i,t),i.prototype.initCanvasRender=function(){var t=this.canvas;if(this.context2d=t.getContext("2d"),!this.context2d)throw new Error("[alpha-video-player-js]: Your browser does not support canvas rendering.");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");if(t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d"),!this.alphaContext2d)throw new Error("[alpha-video-player-js]: Unable to allocate the alpha canvas.")},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,s=t.canvasWidth,l=t.canvasHeight,h=t.config;if(e&&i&&n&&o&&p(n)&&r&&a&&s&&l){var u=d(h.orientation,h.side,h.alphaScale,h.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 f=e.getImageData(0,0,s,l),y=f.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(f,0,0)}},i.prototype.onEnded=function(){var e=this,i=e.context2d,n=e.canvasWidth,o=e.canvasHeight;e.config.autoClear&&i.clearRect(0,0,n,o),t.prototype.onEnded.call(this)},i.prototype.releaseRenderResources=function(){try{this.alphaCanvas&&(this.alphaCanvas.width=this.alphaCanvas.height=0)}finally{this.context2d=null,this.alphaCanvas=null,this.alphaContext2d=null}},i}(v),g=function(t){function i(e){return t.call(this,e,!0)||this}return e(i,t),i.prototype.onEnded=function(){this.config.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this)},i}(v),m=["crossOrigin"],R=function(){function t(t){this.render=null,this.config=null,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,this.transitionGeneration=0,this.config=h(t),this.render=this.createRenderer(this.config,!0)}return t.prototype.createRenderer=function(t,e){var i,n,o;void 0===e&&(e=!1);var r=null,a=null,l=null;try{if(!t.container)throw new Error("[alpha-video-player-js]: container can not be empty!");return r=0===t.alphaScale?new g(t):(l=(a=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=s(),a=e||n,l=i||o;a&&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 h=document.createElement("canvas");return h.width=a*r,h.height=l*r,h.style.width="100%",h.style.height="100%",h.style.pointerEvents="none",t.appendChild(h),h}(t.container,t.width,t.height)).getContext("webgl")||a.getContext("experimental-webgl"))?new f(t,a,l):new y(t,a),e&&(null===(i=t.onInitSuccess)||void 0===i||i.call(t)),r}catch(e){if(null==r||r.destroy(!1),l&&!l.isContextLost()&&(null===(n=l.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext()),a&&(null===(o=a.parentNode)||void 0===o||o.removeChild(a),a.width=a.height=0),!t.onInitError)throw e;return t.onInitError(e),null}},t.prototype.rendererUpdates=function(t){var e=Object.assign({},t);return delete e.container,e},t.prototype.finishTransition=function(t,e){if(e===this.transitionGeneration&&this.render===t&&this.outgoingRender){var i=this.outgoingRender,n=this.config;t.prepareOutput(),t.setOutputTransitioning(!1),t.setOutputVisible(!0),t.updateConfig({onError:null==n?void 0:n.onError,onDestroy:null==n?void 0:n.onDestroy}),this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,i.destroy(!1)}},t.prototype.rollbackTransition=function(t,e){if(e===this.transitionGeneration&&this.render===t&&this.outgoingRender){var i=this.outgoingRender,n=this.outgoingConfig,o=this.transitionWasPlaying;this.transitionGeneration++,this.render=i,this.config=n,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,t.destroy(!1),n&&i.updateConfig(this.rendererUpdates(n)),i.setOutputVisible(!0),o&&i.play().catch((function(){}))}},t.prototype.cancelTransition=function(){if(!this.outgoingRender)return!1;var t=this.render,e=this.outgoingRender,i=this.outgoingConfig,n=this.transitionWasPlaying;return this.transitionGeneration++,null==t||t.destroy(!1),this.render=e,this.config=i,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,i&&e.updateConfig(this.rendererUpdates(i)),e.setOutputVisible(!0),n},t.prototype.activateTransition=function(t,e,o){var r,a=this;(null===(r=this.config)||void 0===r?void 0:r.src)&&t.whenReady().then((function(){return i(a,void 0,void 0,(function(){var i;return n(this,(function(n){switch(n.label){case 0:return e!==this.transitionGeneration||this.render!==t?[2]:o?[4,t.play()]:[3,2];case 1:n.sent(),n.label=2;case 2:return e!==this.transitionGeneration||this.render!==t||(o||(null===(i=this.config)||void 0===i?void 0:i.autoShow))&&this.finishTransition(t,e),[2]}}))}))})).catch((function(){a.rollbackTransition(t,e)}))},t.prototype.startTransition=function(t,e,i){var n=this,o=this.render;if(!o)return this.config=t,void(this.render=this.createRenderer(t));var r=++this.transitionGeneration,a=null,s=Object.assign({},t,{onDestroy:void 0,onError:function(e){try{var i=n.config?n.config.onError:t.onError;null==i||i(e)}finally{a&&n.rollbackTransition(a,n.transitionGeneration)}}});if(a=this.createRenderer(s)){a.setOutputTransitioning(!0),a.setOutputVisible(!1);var l=null!=i?i:o.playing;l&&(o.updateConfig({onPause:void 0}),o.pause()),this.outgoingRender=o,this.outgoingConfig=e,this.transitionWasPlaying=l,this.render=a,this.config=t,this.activateTransition(a,r,l)}},t.prototype.getRenderer=function(){if(!this.render)throw new Error("[alpha-video-player-js]: player is not initialized.");return this.render},Object.defineProperty(t.prototype,"playing",{get:function(){var t;return(null===(t=this.render)||void 0===t?void 0:t.playing)||!1},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.render)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return i(this,void 0,void 0,(function(){var e,i;return n(this,(function(n){switch(n.label){case 0:return t&&this.updateConfig(t),[4,(e=this.getRenderer()).play()];case 1:return i=n.sent(),this.outgoingRender&&this.render===e?[4,e.whenReady()]:[3,3];case 2:n.sent(),this.finishTransition(e,this.transitionGeneration),n.label=3;case 3:return[2,i]}}))}))},t.prototype.updateConfig=function(t){if(!this.config)throw new Error("[alpha-video-player-js]: player has been destroyed.");var e=this.config,i=Object.assign({},t);void 0===i.src&&delete i.src;var n=h(Object.assign({},i,{container:e.container}),e),o=function(t){return 0===t.alphaScale!=(0===n.alphaScale)||0===t.alphaScale&&t.src!==n.src||m.some((function(e){return t[e]!==n[e]}))};if(this.outgoingRender&&o(e)){var r=this.cancelTransition();return o(e=this.config)?void this.startTransition(n,e,r):(this.config=n,this.getRenderer().updateConfig(this.rendererUpdates(n)),void(r&&this.getRenderer().play().catch((function(){}))))}if(this.render&&!o(e)){this.config=n;var a=Object.assign({},i);if(this.outgoingRender&&(delete a.onError,delete a.onDestroy),this.getRenderer().updateConfig(a),this.outgoingRender&&e.src!==n.src){var s=++this.transitionGeneration;this.activateTransition(this.getRenderer(),s,this.transitionWasPlaying)}}else this.startTransition(n,e)},t.prototype.pause=function(){var t;this.getRenderer().pause(),null===(t=this.outgoingRender)||void 0===t||t.pause()},t.prototype.destroy=function(){var t,e,i,n;this.transitionGeneration++,this.outgoingRender&&this.render&&this.render.updateConfig({onError:null===(t=this.config)||void 0===t?void 0:t.onError,onDestroy:null===(e=this.config)||void 0===e?void 0:e.onDestroy}),null===(i=this.render)||void 0===i||i.destroy(),null===(n=this.outgoingRender)||void 0===n||n.destroy(!1),this.render=null,this.outgoingRender=null,this.outgoingConfig=null,this.config=null},t.prototype.reset=function(){this.getRenderer().reset()},t.prototype.setSrc=function(t){if(this.getRenderer().setSrc(t),this.config&&(this.config.src=t),this.outgoingRender){var e=++this.transitionGeneration;this.activateTransition(this.getRenderer(),e,this.transitionWasPlaying)}},t.prototype.setCurrentTime=function(t){this.getRenderer().setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer().setMute(t),this.config&&(this.config.muted=t)},t.prototype.setLoop=function(t){this.getRenderer().setLoop(t),this.config&&(this.config.loop=t)},t.prototype.setPlaybackRate=function(t){this.getRenderer().setPlaybackRate(t),this.config&&(this.config.playbackRate=t)},t}();export{R as default};
package/dist/react.d.ts CHANGED
@@ -44,17 +44,34 @@ interface IConfig {
44
44
  onError?: (e: unknown) => void;
45
45
  onDestroy?: () => void;
46
46
  }
47
- type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
47
+ /** 运行时可更新配置;container 由现有播放器实例持有,不支持迁移。 */
48
+ type IUpdateConfig = Partial<Omit<IConfig, 'container'>>;
49
+ /** play(config) 的历史参数类型,保留可选 container 以维持类型兼容。 */
50
+ type IOptionalConfig = IUpdateConfig & Partial<Pick<IConfig, 'container'>>;
48
51
  type IOrientation = 'landscape' | 'portrait';
49
52
  type ISide = 'front' | 'back';
50
53
  type IAlphaAlign = 'start' | 'end';
51
54
 
52
55
  declare class Render {
53
56
  private render;
57
+ private config;
58
+ private outgoingRender;
59
+ private outgoingConfig;
60
+ private transitionWasPlaying;
61
+ private transitionGeneration;
54
62
  constructor(config: IConfig);
63
+ private createRenderer;
64
+ private rendererUpdates;
65
+ private finishTransition;
66
+ private rollbackTransition;
67
+ private cancelTransition;
68
+ private activateTransition;
69
+ private startTransition;
70
+ private getRenderer;
55
71
  get playing(): boolean;
56
72
  get loop(): boolean;
57
73
  play(config?: IOptionalConfig): Promise<void>;
74
+ updateConfig(config: IUpdateConfig): void;
58
75
  pause(): void;
59
76
  destroy(): void;
60
77
  reset(): void;
@@ -72,6 +89,7 @@ type IAlphaVideoPlayer = InstanceType<typeof Render>;
72
89
  */
73
90
  type IAlphaVideoPlayerRef = {
74
91
  play: () => Promise<void> | undefined;
92
+ updateConfig: (config: IUpdateConfig) => void;
75
93
  pause: () => void;
76
94
  destroy: () => void;
77
95
  reset: () => void;
@@ -118,4 +136,4 @@ interface IAlphaVideoPlayerProps {
118
136
  }
119
137
  declare const AlphaVideoPlayer: React.ForwardRefExoticComponent<IAlphaVideoPlayerProps & React.RefAttributes<IAlphaVideoPlayerRef>>;
120
138
 
121
- export { type IAlphaVideoPlayerProps, type IAlphaVideoPlayerRef, AlphaVideoPlayer as default };
139
+ export { type IAlphaVideoPlayerProps, type IAlphaVideoPlayerRef, type IUpdateConfig, AlphaVideoPlayer as default };
package/dist/react.js CHANGED
@@ -1 +1 @@
1
- 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};
1
+ 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)}var s=function(){return s=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},s.apply(this,arguments)};function l(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 u(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",h={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},c="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",v=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},p=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},f=function(t,e){var i,n,o,r,a,s,l,u,c,v,f,y,g,m=Object.assign({},h,e||{},t);return m.playbackRate=null!==(i=m.playbackRate)&&void 0!==i?i:h.playbackRate,m.muted=null!==(n=m.muted)&&void 0!==n?n:h.muted,m.loop=null!==(o=m.loop)&&void 0!==o?o:h.loop,m.fps=null!==(r=m.fps)&&void 0!==r?r:h.fps,m.orientation=null!==(a=m.orientation)&&void 0!==a?a:h.orientation,m.side=null!==(s=m.side)&&void 0!==s?s:h.side,m.alphaScale=p(m.alphaScale),m.alphaAlign=null!==(l=m.alphaAlign)&&void 0!==l?l:d,m.autoShow=null!==(u=m.autoShow)&&void 0!==u?u:h.autoShow,m.autoClear=null!==(c=m.autoClear)&&void 0!==c?c:h.autoClear,m.autoDestroy=null!==(v=m.autoDestroy)&&void 0!==v?v:h.autoDestroy,m.autoResize=null!==(f=m.autoResize)&&void 0!==f?f:h.autoResize,m.debug=null!==(y=m.debug)&&void 0!==y?y:h.debug,m.videoFrame=null!==(g=m.videoFrame)&&void 0!==g?g:h.videoFrame,m},y=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=d);var o=p(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}}},g=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]},m=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},R=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},w=function(){function t(t,e,i){if(void 0===e&&(e=!1),void 0===i&&(i=null),this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=null,this.animationGeneration=0,this.playRequestId=0,this.sourceGeneration=0,this.resumeOnReady=!1,this.destroyed=!1,this.onCanPlayTimes=1,this.readyPromise=Promise.resolve(),this.resolveReady=null,this.transitionStyle=null,this.canPlay=!1,this.cancelAnimation=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,this.canvas=i,i){var n=this.canvas,o=n.width,r=n.height;this.canvasWidth=o,this.canvasHeight=r}try{t.src&&this.initVideo()}catch(t){throw this.destroy(!1),t}}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.whenReady=function(){return this.canPlay?Promise.resolve():this.readyPromise},t.prototype.setOutputVisible=function(t){var e=this.renderVideoDirectly?this.video:this.canvas;e&&(e.style.visibility=t?"visible":"hidden")},t.prototype.setOutputTransitioning=function(t){var e=this.renderVideoDirectly?this.video:this.canvas;if(e)return t?(this.transitionStyle||(this.transitionStyle={position:e.style.position||"",left:e.style.left||"",top:e.style.top||"",zIndex:e.style.zIndex||""}),e.style.position="absolute",e.style.left="0",e.style.top="0",void(e.style.zIndex="1")):void(this.transitionStyle&&(e.style.position=this.transitionStyle.position,e.style.left=this.transitionStyle.left,e.style.top=this.transitionStyle.top,e.style.zIndex=this.transitionStyle.zIndex,this.transitionStyle=null))},t.prototype.prepareOutput=function(){!this.renderVideoDirectly&&this.canPlay&&this.drawFrameOnce()},t.prototype.setConfig=function(t){t&&(this.config=f(t,this.config))},t.prototype.updateConfig=function(t){var e=this;if(this.destroyed||!this.config)throw new Error("[alpha-video-player-js]: player has been destroyed.");var i=this.config,n=this.playing,o=void 0!==t.src&&t.src!==i.src,r=o&&(n||this.resumeOnReady),a=void 0!==t.fps&&t.fps!==i.fps||void 0!==t.videoFrame&&t.videoFrame!==i.videoFrame;this.setConfig(t);var s=this.config;if(o&&this.setSrc(t.src),this.video){if(void 0!==t.muted&&this.setMute(s.muted),void 0!==t.loop&&this.setLoop(s.loop),void 0!==t.playbackRate&&this.setPlaybackRate(s.playbackRate),r){this.resumeOnReady=!0;var l=this.sourceGeneration;this.whenReady().then((function(){if(!e.destroyed&&l===e.sourceGeneration&&e.resumeOnReady)return e.resumeOnReady=!1,e.play()})).catch((function(){}))}!a||o||!n||this.renderVideoDirectly||this.video.paused||(this.cancelDrawFrame(),this.playing=!0,this.drawFrame()),this.onConfigUpdated(i,s)}},t.prototype.onConfigUpdated=function(t,e){this.video&&t.poster!==e.poster&&(this.video.poster=e.poster||c),t.width===e.width&&t.height===e.height&&t.autoResize===e.autoResize&&t.orientation===e.orientation&&t.alphaScale===e.alphaScale&&t.alphaAlign===e.alphaAlign||this.resizeOutput(),t.autoShow!==e.autoShow&&this.video&&(this.renderVideoDirectly?this.setNativeVideoVisible(this.playing||!!e.autoShow):e.autoShow&&this.canPlay&&this.drawFrameOnce())},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;this.resetReady();var s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i||c,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,u=this.config.height||this.container.offsetHeight;s.style.display="block",s.style.width=l?"".concat(l,"px"):"100%",s.style.height=u?"".concat(u,"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.resetReady=function(){var t,e=this;null===(t=this.resolveReady)||void 0===t||t.call(this),this.readyPromise=new Promise((function(t){e.resolveReady=t}))},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this;if(!this.destroyed&&this.playing&&null===this.animationId){var e=this.animationGeneration,i=this.initAdaptAnimation(),n=i.request,o=i.cancel;this.cancelAnimation=o;var r,a=this.config.fps>0?1e3/this.config.fps:0,s=function(){return!t.destroyed&&t.playing&&e===t.animationGeneration&&t.video&&!t.video.paused&&!t.video.ended},l=function(e){if(s()){t.animationId=null;try{(void 0===e||void 0===r||e-r>=a)&&(t.drawFrameOnce(),r=void 0!==r&&void 0!==e&&a?e-(e-r)%a:e)}catch(e){return void t.onError(e)}s()&&(t.animationId=n(l))}};l()}},t.prototype.initAdaptAnimation=function(){var t=this.config,e=t.videoFrame,i=t.fps,n=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}(),o=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}(),r=this.video;if(e&&r.requestVideoFrameCallback&&r.cancelVideoFrameCallback)return{request:function(t){return r.requestVideoFrameCallback(t)},cancel:function(t){return r.cancelVideoFrameCallback(t)}};if(n&&o)return{request:function(t){return n.call(window,t)},cancel:function(t){return o.call(window,t)}};var a=i>0?1e3/i:16;return{request:function(t){return window.setTimeout((function(){return t(Date.now())}),a)},cancel:function(t){return window.clearTimeout(t)}}},t.prototype.cancelDrawFrame=function(){var t;this.animationGeneration++;try{null!==this.animationId&&(null===(t=this.cancelAnimation)||void 0===t||t.call(this,this.animationId))}finally{this.animationId=null,this.cancelAnimation=null,this.playing=!1}},t.prototype.play=function(t){var e,i;return l(this,void 0,void 0,(function(){var n,o,r,a;return u(this,(function(s){switch(s.label){case 0:m(this.video),t&&this.setConfig(t),this.resumeOnReady=!1,n=this.video,o=++this.playRequestId,s.label=1;case 1:return s.trys.push([1,3,,4]),[4,n.play()];case 2:return r=s.sent(),this.destroyed||o!==this.playRequestId||n!==this.video||n.paused||n.ended?[2,r]:(this.cancelDrawFrame(),this.playing=!0,this.renderVideoDirectly?this.setNativeVideoVisible(!0):this.drawFrame(),[2,r]);case 3:a=s.sent();try{this.destroyed||o!==this.playRequestId||null===(i=null===(e=this.config)||void 0===e?void 0:e.onError)||void 0===i||i.call(e,a)}finally{throw a}case 4:return[2]}}))}))},t.prototype.pause=function(){m(this.video),this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.video.pause()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){if(this.destroyed)throw new Error("[alpha-video-player-js]: player has been destroyed.");this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.resetReady(),this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){m(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){m(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){m(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){m(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t=this,e=t.video,i=t.config;t.canvas,this.videoWidth=e.videoWidth,this.videoHeight=e.videoHeight,this.resizeOutput(),i.onLoad&&i.onLoad()},t.prototype.resizeOutput=function(){var t=this,e=t.video,i=t.config,n=t.canvas,o=t.container;if(e&&i){var r=v(),a=i.width||(null==o?void 0:o.offsetWidth)||(n?n.width/r:e.videoWidth),s=i.height||(null==o?void 0:o.offsetHeight)||(n?n.height/r:e.videoHeight),l=a,u=s;if(i.autoResize&&(n||this.renderVideoDirectly)&&e.videoWidth>0&&e.videoHeight>0){var h=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=d),0===n)return t/e;var r=y(i,"front",n,o).rgb;return t*r.width/(e*r.height)}(e.videoWidth,e.videoHeight,i.orientation,i.alphaScale,i.alphaAlign),c=a||e.videoWidth,p=s||e.videoHeight,f=void 0;if("width"===i.autoResize||"height"===i.autoResize)f=i.autoResize;else f=h>=c/p?"width":"height";l="width"===f?c:Math.round(p*h),u="width"===f?Math.round(c/h):p}var g=u*r;n&&l&&u&&(l*r!==this.canvasWidth||g!==this.canvasHeight)?(!function(t,e,i){var n=v();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(n,l,u),this.canvasWidth=n.width,this.canvasHeight=n.height,this.onCanvasResized()):this.renderVideoDirectly&&(e.style.width=l?"".concat(l,"px"):"100%",e.style.height=u?"".concat(u,"px"):"100%")}},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t,e=this.config;this.canPlay=!0,null===(t=this.resolveReady)||void 0===t||t.call(this),this.resolveReady=null;try{this.renderVideoDirectly?e.autoShow&&this.setNativeVideoVisible(!0):e.autoShow&&this.drawFrameOnce()}catch(t){return void this.onError(t)}1===this.onCanPlayTimes&&e.onCanPlay&&e.onCanPlay(),1!==this.onCanPlayTimes&&e.loop&&e.onLoop&&e.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t,e,i=this.config;(null===(t=this.video)||void 0===t?void 0:t.paused)&&(this.playRequestId++,this.cancelDrawFrame()),null===(e=null==i?void 0:i.onPause)||void 0===e||e.call(i)},t.prototype.onEnded=function(){var t,e=this.config,i=this.video;this.playRequestId++,i.currentTime=0,this.cancelDrawFrame();try{null===(t=e.onEnded)||void 0===t||t.call(e)}finally{e.autoDestroy&&this.destroy()}},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;if(n&&!this.destroyed){n.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t);try{null===(i=n.onError)||void 0===i||i.call(n,t)}finally{this.destroy()}}},t.prototype.destroy=function(t){var e=this;if(void 0===t&&(t=!0),!this.destroyed){this.destroyed=!0,this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1;var i,n=this,o=n.config,r=n.video,a=n.canvas,s=function(t){try{t()}catch(t){null!=i||(i=t)}};s((function(){return e.cancelDrawFrame()})),s((function(){var t;return null===(t=e.resolveReady)||void 0===t?void 0:t.call(e)})),this.resolveReady=null,s((function(){return e.removeEvent()})),s((function(){r&&(r.pause(),r.removeAttribute("src"),r.load())})),s((function(){var t;return null===(t=null==r?void 0:r.parentNode)||void 0===t?void 0:t.removeChild(r)})),s((function(){return e.releaseRenderResources()})),s((function(){var t;return null===(t=null==a?void 0:a.parentNode)||void 0===t?void 0:t.removeChild(a)})),s((function(){a&&(a.width=a.height=0)})),this.config=null,this.container=null,this.video=null,this.canvas=null,this.transitionStyle=null,this.canPlay=!1,t&&s((function(){var t;return null===(t=null==o?void 0:o.onDestroy)||void 0===t?void 0:t.call(o)})),i&&(null==o?void 0:o.debug)&&console.error("[alpha-video-player-js] destroy error:",i)}},t.prototype.releaseRenderResources=function(){},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}(),b=function(t){function e(e,i,n){var o=t.call(this,e,!1,i)||this;o.onContextLost=function(t){return o.onError(t)},o.gl=n;try{o.initWebGLRender(),i.addEventListener("webglcontextlost",o.onContextLost)}catch(t){throw o.destroy(!1),t}return o}return a(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl;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(!n)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL shader.");if(t===i.VERTEX_SHADER?this.vertexShader=n:this.fragmentShader=n,i.shaderSource(n,e),i.compileShader(n),!i.getShaderParameter(n,i.COMPILE_STATUS))throw new Error("[alpha-video-player-js]: WebGL shader compilation failed: ".concat(i.getShaderInfoLog(n)||""));return n},e.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(!e)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL program.");if(this.program=e,t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),!t.getProgramParameter(e,t.LINK_STATUS))throw new Error("[alpha-video-player-js]: WebGL program linking failed: ".concat(t.getProgramInfoLog(e)||""));return t.useProgram(e),e},e.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();if(!e)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL texture.");return this.texture=e,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=this.computeVertexCoords(n),r=e.createBuffer();if(!r)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL buffer.");this.vertexBuffer=r,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 d=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(d,0),r},e.prototype.computeVertexCoords=function(t){return 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=y(t,e,i,n),a=r.rgb,s=r.alpha,l=g(a),u=g(s),h=[];return o.forEach((function(t,e){e%2==0&&(h=h.concat(o.slice(e,e+2)).concat(l.slice(e,e+2)).concat(u.slice(e,e+2)))})),new Float32Array(h)}(t.orientation,t.side,t.alphaScale,t.alphaAlign)},e.prototype.onConfigUpdated=function(e,i){if(t.prototype.onConfigUpdated.call(this,e,i),(e.orientation!==i.orientation||e.side!==i.side||e.alphaScale!==i.alphaScale||e.alphaAlign!==i.alphaAlign)&&this.gl&&this.vertexBuffer){var n=this.computeVertexCoords(i);this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.vertexBuffer),this.gl.bufferData(this.gl.ARRAY_BUFFER,n,this.gl.STATIC_DRAW)}},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&&!t.isContextLost()&&e&&this.canPlay&&R(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.onEnded=function(){var e=this.gl;this.config.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this)},e.prototype.releaseRenderResources=function(){var t,e=this,i=this,n=i.canvas,o=i.gl,r=i.vertexShader,a=i.fragmentShader,s=i.texture,l=i.vertexBuffer,u=i.program,d=function(e){try{e()}catch(e){null!=t||(t=e)}};if(d((function(){return null==n?void 0:n.removeEventListener("webglcontextlost",e.onContextLost)})),o&&(u&&r&&d((function(){return o.detachShader(u,r)})),u&&a&&d((function(){return o.detachShader(u,a)})),r&&d((function(){return o.deleteShader(r)})),a&&d((function(){return o.deleteShader(a)})),s&&d((function(){return o.deleteTexture(s)})),l&&d((function(){return o.deleteBuffer(l)})),u&&d((function(){return o.deleteProgram(u)})),d((function(){var t;return null===(t=o.getExtension("WEBGL_lose_context"))||void 0===t?void 0:t.loseContext()}))),this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null,t)throw t},e}(w),E=function(t){function e(e,i){var n=t.call(this,e,!1,i)||this;try{n.initCanvasRender()}catch(t){throw n.destroy(!1),t}return n}return a(e,t),e.prototype.initCanvasRender=function(){var t=this.canvas;if(this.context2d=t.getContext("2d"),!this.context2d)throw new Error("[alpha-video-player-js]: Your browser does not support canvas rendering.");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");if(t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d"),!this.alphaContext2d)throw new Error("[alpha-video-player-js]: Unable to allocate the alpha canvas.")},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,u=t.config;if(e&&i&&n&&o&&R(n)&&r&&a&&s&&l){var d=y(u.orientation,u.side,u.alphaScale,u.alphaAlign),h=d.rgb,c=d.alpha;e.drawImage(n,h.x*r,h.y*a,h.width*r,h.height*a,0,0,s,l);var v=e.getImageData(0,0,s,l),p=v.data;i.drawImage(n,c.x*r,c.y*a,c.width*r,c.height*a,0,0,s,l);for(var f=i.getImageData(0,0,s,l).data,g=3;g<p.length;g+=4)p[g]=f[g-3];e.putImageData(v,0,0)}},e.prototype.onEnded=function(){var e=this,i=e.context2d,n=e.canvasWidth,o=e.canvasHeight;e.config.autoClear&&i.clearRect(0,0,n,o),t.prototype.onEnded.call(this)},e.prototype.releaseRenderResources=function(){try{this.alphaCanvas&&(this.alphaCanvas.width=this.alphaCanvas.height=0)}finally{this.context2d=null,this.alphaCanvas=null,this.alphaContext2d=null}},e}(w),A=function(t){function e(e){return t.call(this,e,!0)||this}return a(e,t),e.prototype.onEnded=function(){this.config.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this)},e}(w),C=["crossOrigin"],_=function(){function t(t){this.render=null,this.config=null,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,this.transitionGeneration=0,this.config=f(t),this.render=this.createRenderer(this.config,!0)}return t.prototype.createRenderer=function(t,e){var i,n,o;void 0===e&&(e=!1);var r=null,a=null,s=null;try{if(!t.container)throw new Error("[alpha-video-player-js]: container can not be empty!");return r=0===t.alphaScale?new A(t):(s=(a=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=v(),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}(t.container,t.width,t.height)).getContext("webgl")||a.getContext("experimental-webgl"))?new b(t,a,s):new E(t,a),e&&(null===(i=t.onInitSuccess)||void 0===i||i.call(t)),r}catch(e){if(null==r||r.destroy(!1),s&&!s.isContextLost()&&(null===(n=s.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext()),a&&(null===(o=a.parentNode)||void 0===o||o.removeChild(a),a.width=a.height=0),!t.onInitError)throw e;return t.onInitError(e),null}},t.prototype.rendererUpdates=function(t){var e=Object.assign({},t);return delete e.container,e},t.prototype.finishTransition=function(t,e){if(e===this.transitionGeneration&&this.render===t&&this.outgoingRender){var i=this.outgoingRender,n=this.config;t.prepareOutput(),t.setOutputTransitioning(!1),t.setOutputVisible(!0),t.updateConfig({onError:null==n?void 0:n.onError,onDestroy:null==n?void 0:n.onDestroy}),this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,i.destroy(!1)}},t.prototype.rollbackTransition=function(t,e){if(e===this.transitionGeneration&&this.render===t&&this.outgoingRender){var i=this.outgoingRender,n=this.outgoingConfig,o=this.transitionWasPlaying;this.transitionGeneration++,this.render=i,this.config=n,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,t.destroy(!1),n&&i.updateConfig(this.rendererUpdates(n)),i.setOutputVisible(!0),o&&i.play().catch((function(){}))}},t.prototype.cancelTransition=function(){if(!this.outgoingRender)return!1;var t=this.render,e=this.outgoingRender,i=this.outgoingConfig,n=this.transitionWasPlaying;return this.transitionGeneration++,null==t||t.destroy(!1),this.render=e,this.config=i,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,i&&e.updateConfig(this.rendererUpdates(i)),e.setOutputVisible(!0),n},t.prototype.activateTransition=function(t,e,i){var n,o=this;(null===(n=this.config)||void 0===n?void 0:n.src)&&t.whenReady().then((function(){return l(o,void 0,void 0,(function(){var n;return u(this,(function(o){switch(o.label){case 0:return e!==this.transitionGeneration||this.render!==t?[2]:i?[4,t.play()]:[3,2];case 1:o.sent(),o.label=2;case 2:return e!==this.transitionGeneration||this.render!==t||(i||(null===(n=this.config)||void 0===n?void 0:n.autoShow))&&this.finishTransition(t,e),[2]}}))}))})).catch((function(){o.rollbackTransition(t,e)}))},t.prototype.startTransition=function(t,e,i){var n=this,o=this.render;if(!o)return this.config=t,void(this.render=this.createRenderer(t));var r=++this.transitionGeneration,a=null,s=Object.assign({},t,{onDestroy:void 0,onError:function(e){try{var i=n.config?n.config.onError:t.onError;null==i||i(e)}finally{a&&n.rollbackTransition(a,n.transitionGeneration)}}});if(a=this.createRenderer(s)){a.setOutputTransitioning(!0),a.setOutputVisible(!1);var l=null!=i?i:o.playing;l&&(o.updateConfig({onPause:void 0}),o.pause()),this.outgoingRender=o,this.outgoingConfig=e,this.transitionWasPlaying=l,this.render=a,this.config=t,this.activateTransition(a,r,l)}},t.prototype.getRenderer=function(){if(!this.render)throw new Error("[alpha-video-player-js]: player is not initialized.");return this.render},Object.defineProperty(t.prototype,"playing",{get:function(){var t;return(null===(t=this.render)||void 0===t?void 0:t.playing)||!1},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.render)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return l(this,void 0,void 0,(function(){var e,i;return u(this,(function(n){switch(n.label){case 0:return t&&this.updateConfig(t),[4,(e=this.getRenderer()).play()];case 1:return i=n.sent(),this.outgoingRender&&this.render===e?[4,e.whenReady()]:[3,3];case 2:n.sent(),this.finishTransition(e,this.transitionGeneration),n.label=3;case 3:return[2,i]}}))}))},t.prototype.updateConfig=function(t){if(!this.config)throw new Error("[alpha-video-player-js]: player has been destroyed.");var e=this.config,i=Object.assign({},t);void 0===i.src&&delete i.src;var n=f(Object.assign({},i,{container:e.container}),e),o=function(t){return 0===t.alphaScale!=(0===n.alphaScale)||0===t.alphaScale&&t.src!==n.src||C.some((function(e){return t[e]!==n[e]}))};if(this.outgoingRender&&o(e)){var r=this.cancelTransition();return o(e=this.config)?void this.startTransition(n,e,r):(this.config=n,this.getRenderer().updateConfig(this.rendererUpdates(n)),void(r&&this.getRenderer().play().catch((function(){}))))}if(this.render&&!o(e)){this.config=n;var a=Object.assign({},i);if(this.outgoingRender&&(delete a.onError,delete a.onDestroy),this.getRenderer().updateConfig(a),this.outgoingRender&&e.src!==n.src){var s=++this.transitionGeneration;this.activateTransition(this.getRenderer(),s,this.transitionWasPlaying)}}else this.startTransition(n,e)},t.prototype.pause=function(){var t;this.getRenderer().pause(),null===(t=this.outgoingRender)||void 0===t||t.pause()},t.prototype.destroy=function(){var t,e,i,n;this.transitionGeneration++,this.outgoingRender&&this.render&&this.render.updateConfig({onError:null===(t=this.config)||void 0===t?void 0:t.onError,onDestroy:null===(e=this.config)||void 0===e?void 0:e.onDestroy}),null===(i=this.render)||void 0===i||i.destroy(),null===(n=this.outgoingRender)||void 0===n||n.destroy(!1),this.render=null,this.outgoingRender=null,this.outgoingConfig=null,this.config=null},t.prototype.reset=function(){this.getRenderer().reset()},t.prototype.setSrc=function(t){if(this.getRenderer().setSrc(t),this.config&&(this.config.src=t),this.outgoingRender){var e=++this.transitionGeneration;this.activateTransition(this.getRenderer(),e,this.transitionWasPlaying)}},t.prototype.setCurrentTime=function(t){this.getRenderer().setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer().setMute(t),this.config&&(this.config.muted=t)},t.prototype.setLoop=function(t){this.getRenderer().setLoop(t),this.config&&(this.config.loop=t)},t.prototype.setPlaybackRate=function(t){this.getRenderer().setPlaybackRate(t),this.config&&(this.config.playbackRate=t)},t}(),P=e((function(e,r){var a=i(null),l=i(null),u=i(e);return u.current=e,n((function(){var t,e,i,n,o,r,s,h,c,v,p,f,y;if(a.current){var g=u.current;return l.current=new _({container:a.current,src:g.src,poster:g.poster,width:g.width,height:g.height,crossOrigin:g.crossOrigin,muted:null===(t=g.muted)||void 0===t||t,loop:null!==(e=g.loop)&&void 0!==e&&e,playbackRate:null!==(i=g.playbackRate)&&void 0!==i?i:1,fps:g.fps,orientation:null!==(n=g.orientation)&&void 0!==n?n:"landscape",side:null!==(o=g.side)&&void 0!==o?o:"front",alphaScale:null!==(r=g.alphaScale)&&void 0!==r?r:1,alphaAlign:null!==(s=g.alphaAlign)&&void 0!==s?s:d,videoFrame:null!==(h=g.videoFrame)&&void 0!==h&&h,debug:null!==(c=g.debug)&&void 0!==c&&c,autoShow:null!==(v=g.autoShow)&&void 0!==v&&v,autoClear:null===(p=g.autoClear)||void 0===p||p,autoDestroy:null!==(f=g.autoDestroy)&&void 0!==f&&f,autoResize:null!==(y=g.autoResize)&&void 0!==y?y:"contain",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,i;return null===(i=(e=u.current).onInitError)||void 0===i?void 0:i.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,i;return null===(i=(e=u.current).onError)||void 0===i?void 0:i.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=l.current)||void 0===t||t.destroy(),l.current=null}}}),[]),n((function(){var t,e,i,n,o,r,a,h,c,v,p,f,y,g,m=u.current,R=s(s({},null!=m.src?{src:m.src}:{}),{poster:m.poster,width:m.width,height:m.height,crossOrigin:m.crossOrigin,muted:null===(t=m.muted)||void 0===t||t,loop:null!==(e=m.loop)&&void 0!==e&&e,playbackRate:null!==(i=m.playbackRate)&&void 0!==i?i:1,fps:m.fps,orientation:null!==(n=m.orientation)&&void 0!==n?n:"landscape",side:null!==(o=m.side)&&void 0!==o?o:"front",alphaScale:null!==(r=m.alphaScale)&&void 0!==r?r:1,alphaAlign:null!==(a=m.alphaAlign)&&void 0!==a?a:d,videoFrame:null!==(h=m.videoFrame)&&void 0!==h&&h,debug:null!==(c=m.debug)&&void 0!==c&&c,autoShow:null!==(v=m.autoShow)&&void 0!==v&&v,autoClear:null===(p=m.autoClear)||void 0===p||p,autoDestroy:null!==(f=m.autoDestroy)&&void 0!==f&&f,autoResize:null!==(y=m.autoResize)&&void 0!==y?y:"contain"});null===(g=l.current)||void 0===g||g.updateConfig(R)}),[e.src,e.poster,e.width,e.height,e.crossOrigin,e.muted,e.loop,e.playbackRate,e.fps,e.orientation,e.side,e.alphaScale,e.alphaAlign,e.videoFrame,e.debug,e.autoShow,e.autoClear,e.autoDestroy,e.autoResize]),o(r,(function(){return{play:function(){var t;return null===(t=l.current)||void 0===t?void 0:t.play()},updateConfig:function(t){var e;return null===(e=l.current)||void 0===e?void 0:e.updateConfig(t)},pause:function(){var t;return null===(t=l.current)||void 0===t?void 0:t.pause()},destroy:function(){var t;null===(t=l.current)||void 0===t||t.destroy(),l.current=null},reset:function(){var t;return null===(t=l.current)||void 0===t?void 0:t.reset()},setSrc:function(t){var e;return null===(e=l.current)||void 0===e?void 0:e.setSrc(t)},setCurrentTime:function(t){var e;return null===(e=l.current)||void 0===e?void 0:e.setCurrentTime(t)},setMute:function(t){var e;return null===(e=l.current)||void 0===e?void 0:e.setMute(t)},setLoop:function(t){var e;return null===(e=l.current)||void 0===e?void 0:e.setLoop(t)},setPlaybackRate:function(t){var e;return null===(e=l.current)||void 0===e?void 0:e.setPlaybackRate(t)},getPlayer:function(){return l.current}}})),t.createElement("div",{ref:a,className:e.className,style:e.style})}));P.displayName="AlphaVideoPlayer";export{P as default};
package/dist/vue2.d.ts CHANGED
@@ -44,17 +44,34 @@ interface IConfig {
44
44
  onError?: (e: unknown) => void;
45
45
  onDestroy?: () => void;
46
46
  }
47
- type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
47
+ /** 运行时可更新配置;container 由现有播放器实例持有,不支持迁移。 */
48
+ type IUpdateConfig = Partial<Omit<IConfig, 'container'>>;
49
+ /** play(config) 的历史参数类型,保留可选 container 以维持类型兼容。 */
50
+ type IOptionalConfig = IUpdateConfig & Partial<Pick<IConfig, 'container'>>;
48
51
  type IOrientation = 'landscape' | 'portrait';
49
52
  type ISide = 'front' | 'back';
50
53
  type IAlphaAlign = 'start' | 'end';
51
54
 
52
55
  declare class Render {
53
56
  private render;
57
+ private config;
58
+ private outgoingRender;
59
+ private outgoingConfig;
60
+ private transitionWasPlaying;
61
+ private transitionGeneration;
54
62
  constructor(config: IConfig);
63
+ private createRenderer;
64
+ private rendererUpdates;
65
+ private finishTransition;
66
+ private rollbackTransition;
67
+ private cancelTransition;
68
+ private activateTransition;
69
+ private startTransition;
70
+ private getRenderer;
55
71
  get playing(): boolean;
56
72
  get loop(): boolean;
57
73
  play(config?: IOptionalConfig): Promise<void>;
74
+ updateConfig(config: IUpdateConfig): void;
58
75
  pause(): void;
59
76
  destroy(): void;
60
77
  reset(): void;
@@ -72,6 +89,7 @@ type IAlphaVideoPlayer = InstanceType<typeof Render>;
72
89
  */
73
90
  type IAlphaVideoPlayerRef = {
74
91
  play: () => Promise<void> | undefined;
92
+ updateConfig: (config: IUpdateConfig) => void;
75
93
  pause: () => void;
76
94
  destroy: () => void;
77
95
  reset: () => void;
@@ -83,4 +101,4 @@ type IAlphaVideoPlayerRef = {
83
101
  getPlayer: () => IAlphaVideoPlayer | null;
84
102
  };
85
103
 
86
- export { type IAlphaVideoPlayer, type IAlphaVideoPlayerRef, AlphaVideoPlayer as default };
104
+ export { type IAlphaVideoPlayer, type IAlphaVideoPlayerRef, type IUpdateConfig, AlphaVideoPlayer as default };
package/dist/vue2.js CHANGED
@@ -1 +1 @@
1
- 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};
1
+ 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)}var n=function(){return n=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},n.apply(this,arguments)};function o(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 r(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 a="start",s={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:a,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},l="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",h=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},u=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},d=function(t,e){var i,n,o,r,l,h,d,c,p,f,v,y,g,m=Object.assign({},s,e||{},t);return m.playbackRate=null!==(i=m.playbackRate)&&void 0!==i?i:s.playbackRate,m.muted=null!==(n=m.muted)&&void 0!==n?n:s.muted,m.loop=null!==(o=m.loop)&&void 0!==o?o:s.loop,m.fps=null!==(r=m.fps)&&void 0!==r?r:s.fps,m.orientation=null!==(l=m.orientation)&&void 0!==l?l:s.orientation,m.side=null!==(h=m.side)&&void 0!==h?h:s.side,m.alphaScale=u(m.alphaScale),m.alphaAlign=null!==(d=m.alphaAlign)&&void 0!==d?d:a,m.autoShow=null!==(c=m.autoShow)&&void 0!==c?c:s.autoShow,m.autoClear=null!==(p=m.autoClear)&&void 0!==p?p:s.autoClear,m.autoDestroy=null!==(f=m.autoDestroy)&&void 0!==f?f:s.autoDestroy,m.autoResize=null!==(v=m.autoResize)&&void 0!==v?v:s.autoResize,m.debug=null!==(y=m.debug)&&void 0!==y?y:s.debug,m.videoFrame=null!==(g=m.videoFrame)&&void 0!==g?g:s.videoFrame,m},c=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=a);var o=u(i);if("landscape"===t){var r=1/(1+o),s=o/(1+o);return{rgb:{x:"front"===e?0:s,y:0,width:r,height:1},alpha:{x:"front"===e?r:0,y:"start"===n?0:1-o,width:s,height:o}}}var l=1/(1+o),h=o/(1+o);return{rgb:{x:0,y:"front"===e?0:h,width:1,height:l},alpha:{x:"start"===n?0:1-o,y:"front"===e?l:0,width:o,height:h}}},p=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]},f=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},v=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},y=function(){function t(t,e,i){if(void 0===e&&(e=!1),void 0===i&&(i=null),this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=null,this.animationGeneration=0,this.playRequestId=0,this.sourceGeneration=0,this.resumeOnReady=!1,this.destroyed=!1,this.onCanPlayTimes=1,this.readyPromise=Promise.resolve(),this.resolveReady=null,this.transitionStyle=null,this.canPlay=!1,this.cancelAnimation=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,this.canvas=i,i){var n=this.canvas,o=n.width,r=n.height;this.canvasWidth=o,this.canvasHeight=r}try{t.src&&this.initVideo()}catch(t){throw this.destroy(!1),t}}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.whenReady=function(){return this.canPlay?Promise.resolve():this.readyPromise},t.prototype.setOutputVisible=function(t){var e=this.renderVideoDirectly?this.video:this.canvas;e&&(e.style.visibility=t?"visible":"hidden")},t.prototype.setOutputTransitioning=function(t){var e=this.renderVideoDirectly?this.video:this.canvas;if(e)return t?(this.transitionStyle||(this.transitionStyle={position:e.style.position||"",left:e.style.left||"",top:e.style.top||"",zIndex:e.style.zIndex||""}),e.style.position="absolute",e.style.left="0",e.style.top="0",void(e.style.zIndex="1")):void(this.transitionStyle&&(e.style.position=this.transitionStyle.position,e.style.left=this.transitionStyle.left,e.style.top=this.transitionStyle.top,e.style.zIndex=this.transitionStyle.zIndex,this.transitionStyle=null))},t.prototype.prepareOutput=function(){!this.renderVideoDirectly&&this.canPlay&&this.drawFrameOnce()},t.prototype.setConfig=function(t){t&&(this.config=d(t,this.config))},t.prototype.updateConfig=function(t){var e=this;if(this.destroyed||!this.config)throw new Error("[alpha-video-player-js]: player has been destroyed.");var i=this.config,n=this.playing,o=void 0!==t.src&&t.src!==i.src,r=o&&(n||this.resumeOnReady),a=void 0!==t.fps&&t.fps!==i.fps||void 0!==t.videoFrame&&t.videoFrame!==i.videoFrame;this.setConfig(t);var s=this.config;if(o&&this.setSrc(t.src),this.video){if(void 0!==t.muted&&this.setMute(s.muted),void 0!==t.loop&&this.setLoop(s.loop),void 0!==t.playbackRate&&this.setPlaybackRate(s.playbackRate),r){this.resumeOnReady=!0;var l=this.sourceGeneration;this.whenReady().then((function(){if(!e.destroyed&&l===e.sourceGeneration&&e.resumeOnReady)return e.resumeOnReady=!1,e.play()})).catch((function(){}))}!a||o||!n||this.renderVideoDirectly||this.video.paused||(this.cancelDrawFrame(),this.playing=!0,this.drawFrame()),this.onConfigUpdated(i,s)}},t.prototype.onConfigUpdated=function(t,e){this.video&&t.poster!==e.poster&&(this.video.poster=e.poster||l),t.width===e.width&&t.height===e.height&&t.autoResize===e.autoResize&&t.orientation===e.orientation&&t.alphaScale===e.alphaScale&&t.alphaAlign===e.alphaAlign||this.resizeOutput(),t.autoShow!==e.autoShow&&this.video&&(this.renderVideoDirectly?this.setNativeVideoVisible(this.playing||!!e.autoShow):e.autoShow&&this.canPlay&&this.drawFrameOnce())},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;this.resetReady();var s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i||l,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,u=this.config.height||this.container.offsetHeight;s.style.display="block",s.style.width=h?"".concat(h,"px"):"100%",s.style.height=u?"".concat(u,"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.resetReady=function(){var t,e=this;null===(t=this.resolveReady)||void 0===t||t.call(this),this.readyPromise=new Promise((function(t){e.resolveReady=t}))},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this;if(!this.destroyed&&this.playing&&null===this.animationId){var e=this.animationGeneration,i=this.initAdaptAnimation(),n=i.request,o=i.cancel;this.cancelAnimation=o;var r,a=this.config.fps>0?1e3/this.config.fps:0,s=function(){return!t.destroyed&&t.playing&&e===t.animationGeneration&&t.video&&!t.video.paused&&!t.video.ended},l=function(e){if(s()){t.animationId=null;try{(void 0===e||void 0===r||e-r>=a)&&(t.drawFrameOnce(),r=void 0!==r&&void 0!==e&&a?e-(e-r)%a:e)}catch(e){return void t.onError(e)}s()&&(t.animationId=n(l))}};l()}},t.prototype.initAdaptAnimation=function(){var t=this.config,e=t.videoFrame,i=t.fps,n=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}(),o=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}(),r=this.video;if(e&&r.requestVideoFrameCallback&&r.cancelVideoFrameCallback)return{request:function(t){return r.requestVideoFrameCallback(t)},cancel:function(t){return r.cancelVideoFrameCallback(t)}};if(n&&o)return{request:function(t){return n.call(window,t)},cancel:function(t){return o.call(window,t)}};var a=i>0?1e3/i:16;return{request:function(t){return window.setTimeout((function(){return t(Date.now())}),a)},cancel:function(t){return window.clearTimeout(t)}}},t.prototype.cancelDrawFrame=function(){var t;this.animationGeneration++;try{null!==this.animationId&&(null===(t=this.cancelAnimation)||void 0===t||t.call(this,this.animationId))}finally{this.animationId=null,this.cancelAnimation=null,this.playing=!1}},t.prototype.play=function(t){var e,i;return o(this,void 0,void 0,(function(){var n,o,a,s;return r(this,(function(r){switch(r.label){case 0:f(this.video),t&&this.setConfig(t),this.resumeOnReady=!1,n=this.video,o=++this.playRequestId,r.label=1;case 1:return r.trys.push([1,3,,4]),[4,n.play()];case 2:return a=r.sent(),this.destroyed||o!==this.playRequestId||n!==this.video||n.paused||n.ended?[2,a]:(this.cancelDrawFrame(),this.playing=!0,this.renderVideoDirectly?this.setNativeVideoVisible(!0):this.drawFrame(),[2,a]);case 3:s=r.sent();try{this.destroyed||o!==this.playRequestId||null===(i=null===(e=this.config)||void 0===e?void 0:e.onError)||void 0===i||i.call(e,s)}finally{throw s}case 4:return[2]}}))}))},t.prototype.pause=function(){f(this.video),this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.video.pause()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){if(this.destroyed)throw new Error("[alpha-video-player-js]: player has been destroyed.");this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.resetReady(),this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){f(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){f(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){f(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){f(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t=this,e=t.video,i=t.config;t.canvas,this.videoWidth=e.videoWidth,this.videoHeight=e.videoHeight,this.resizeOutput(),i.onLoad&&i.onLoad()},t.prototype.resizeOutput=function(){var t=this,e=t.video,i=t.config,n=t.canvas,o=t.container;if(e&&i){var r=h(),s=i.width||(null==o?void 0:o.offsetWidth)||(n?n.width/r:e.videoWidth),l=i.height||(null==o?void 0:o.offsetHeight)||(n?n.height/r:e.videoHeight),u=s,d=l;if(i.autoResize&&(n||this.renderVideoDirectly)&&e.videoWidth>0&&e.videoHeight>0){var p=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=a),0===n)return t/e;var r=c(i,"front",n,o).rgb;return t*r.width/(e*r.height)}(e.videoWidth,e.videoHeight,i.orientation,i.alphaScale,i.alphaAlign),f=s||e.videoWidth,v=l||e.videoHeight,y=void 0;if("width"===i.autoResize||"height"===i.autoResize)y=i.autoResize;else y=p>=f/v?"width":"height";u="width"===y?f:Math.round(v*p),d="width"===y?Math.round(f/p):v}var g=d*r;n&&u&&d&&(u*r!==this.canvasWidth||g!==this.canvasHeight)?(!function(t,e,i){var n=h();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(n,u,d),this.canvasWidth=n.width,this.canvasHeight=n.height,this.onCanvasResized()):this.renderVideoDirectly&&(e.style.width=u?"".concat(u,"px"):"100%",e.style.height=d?"".concat(d,"px"):"100%")}},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t,e=this.config;this.canPlay=!0,null===(t=this.resolveReady)||void 0===t||t.call(this),this.resolveReady=null;try{this.renderVideoDirectly?e.autoShow&&this.setNativeVideoVisible(!0):e.autoShow&&this.drawFrameOnce()}catch(t){return void this.onError(t)}1===this.onCanPlayTimes&&e.onCanPlay&&e.onCanPlay(),1!==this.onCanPlayTimes&&e.loop&&e.onLoop&&e.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t,e,i=this.config;(null===(t=this.video)||void 0===t?void 0:t.paused)&&(this.playRequestId++,this.cancelDrawFrame()),null===(e=null==i?void 0:i.onPause)||void 0===e||e.call(i)},t.prototype.onEnded=function(){var t,e=this.config,i=this.video;this.playRequestId++,i.currentTime=0,this.cancelDrawFrame();try{null===(t=e.onEnded)||void 0===t||t.call(e)}finally{e.autoDestroy&&this.destroy()}},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;if(n&&!this.destroyed){n.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t);try{null===(i=n.onError)||void 0===i||i.call(n,t)}finally{this.destroy()}}},t.prototype.destroy=function(t){var e=this;if(void 0===t&&(t=!0),!this.destroyed){this.destroyed=!0,this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1;var i,n=this,o=n.config,r=n.video,a=n.canvas,s=function(t){try{t()}catch(t){null!=i||(i=t)}};s((function(){return e.cancelDrawFrame()})),s((function(){var t;return null===(t=e.resolveReady)||void 0===t?void 0:t.call(e)})),this.resolveReady=null,s((function(){return e.removeEvent()})),s((function(){r&&(r.pause(),r.removeAttribute("src"),r.load())})),s((function(){var t;return null===(t=null==r?void 0:r.parentNode)||void 0===t?void 0:t.removeChild(r)})),s((function(){return e.releaseRenderResources()})),s((function(){var t;return null===(t=null==a?void 0:a.parentNode)||void 0===t?void 0:t.removeChild(a)})),s((function(){a&&(a.width=a.height=0)})),this.config=null,this.container=null,this.video=null,this.canvas=null,this.transitionStyle=null,this.canPlay=!1,t&&s((function(){var t;return null===(t=null==o?void 0:o.onDestroy)||void 0===t?void 0:t.call(o)})),i&&(null==o?void 0:o.debug)&&console.error("[alpha-video-player-js] destroy error:",i)}},t.prototype.releaseRenderResources=function(){},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}(),g=function(t){function e(e,i,n){var o=t.call(this,e,!1,i)||this;o.onContextLost=function(t){return o.onError(t)},o.gl=n;try{o.initWebGLRender(),i.addEventListener("webglcontextlost",o.onContextLost)}catch(t){throw o.destroy(!1),t}return o}return i(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl;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(!n)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL shader.");if(t===i.VERTEX_SHADER?this.vertexShader=n:this.fragmentShader=n,i.shaderSource(n,e),i.compileShader(n),!i.getShaderParameter(n,i.COMPILE_STATUS))throw new Error("[alpha-video-player-js]: WebGL shader compilation failed: ".concat(i.getShaderInfoLog(n)||""));return n},e.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(!e)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL program.");if(this.program=e,t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),!t.getProgramParameter(e,t.LINK_STATUS))throw new Error("[alpha-video-player-js]: WebGL program linking failed: ".concat(t.getProgramInfoLog(e)||""));return t.useProgram(e),e},e.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();if(!e)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL texture.");return this.texture=e,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=this.computeVertexCoords(n),r=e.createBuffer();if(!r)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL buffer.");this.vertexBuffer=r,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 h=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(h,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(h);var u=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(u,0),r},e.prototype.computeVertexCoords=function(t){return function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=a);var o=[-1,1,1,1,-1,-1,1,-1],r=c(t,e,i,n),s=r.rgb,l=r.alpha,h=p(s),u=p(l),d=[];return o.forEach((function(t,e){e%2==0&&(d=d.concat(o.slice(e,e+2)).concat(h.slice(e,e+2)).concat(u.slice(e,e+2)))})),new Float32Array(d)}(t.orientation,t.side,t.alphaScale,t.alphaAlign)},e.prototype.onConfigUpdated=function(e,i){if(t.prototype.onConfigUpdated.call(this,e,i),(e.orientation!==i.orientation||e.side!==i.side||e.alphaScale!==i.alphaScale||e.alphaAlign!==i.alphaAlign)&&this.gl&&this.vertexBuffer){var n=this.computeVertexCoords(i);this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.vertexBuffer),this.gl.bufferData(this.gl.ARRAY_BUFFER,n,this.gl.STATIC_DRAW)}},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&&!t.isContextLost()&&e&&this.canPlay&&v(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.onEnded=function(){var e=this.gl;this.config.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this)},e.prototype.releaseRenderResources=function(){var t,e=this,i=this,n=i.canvas,o=i.gl,r=i.vertexShader,a=i.fragmentShader,s=i.texture,l=i.vertexBuffer,h=i.program,u=function(e){try{e()}catch(e){null!=t||(t=e)}};if(u((function(){return null==n?void 0:n.removeEventListener("webglcontextlost",e.onContextLost)})),o&&(h&&r&&u((function(){return o.detachShader(h,r)})),h&&a&&u((function(){return o.detachShader(h,a)})),r&&u((function(){return o.deleteShader(r)})),a&&u((function(){return o.deleteShader(a)})),s&&u((function(){return o.deleteTexture(s)})),l&&u((function(){return o.deleteBuffer(l)})),h&&u((function(){return o.deleteProgram(h)})),u((function(){var t;return null===(t=o.getExtension("WEBGL_lose_context"))||void 0===t?void 0:t.loseContext()}))),this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null,t)throw t},e}(y),m=function(t){function e(e,i){var n=t.call(this,e,!1,i)||this;try{n.initCanvasRender()}catch(t){throw n.destroy(!1),t}return n}return i(e,t),e.prototype.initCanvasRender=function(){var t=this.canvas;if(this.context2d=t.getContext("2d"),!this.context2d)throw new Error("[alpha-video-player-js]: Your browser does not support canvas rendering.");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");if(t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d"),!this.alphaContext2d)throw new Error("[alpha-video-player-js]: Unable to allocate the alpha canvas.")},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,h=t.config;if(e&&i&&n&&o&&v(n)&&r&&a&&s&&l){var u=c(h.orientation,h.side,h.alphaScale,h.alphaAlign),d=u.rgb,p=u.alpha;e.drawImage(n,d.x*r,d.y*a,d.width*r,d.height*a,0,0,s,l);var f=e.getImageData(0,0,s,l),y=f.data;i.drawImage(n,p.x*r,p.y*a,p.width*r,p.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(f,0,0)}},e.prototype.onEnded=function(){var e=this,i=e.context2d,n=e.canvasWidth,o=e.canvasHeight;e.config.autoClear&&i.clearRect(0,0,n,o),t.prototype.onEnded.call(this)},e.prototype.releaseRenderResources=function(){try{this.alphaCanvas&&(this.alphaCanvas.width=this.alphaCanvas.height=0)}finally{this.context2d=null,this.alphaCanvas=null,this.alphaContext2d=null}},e}(y),b=function(t){function e(e){return t.call(this,e,!0)||this}return i(e,t),e.prototype.onEnded=function(){this.config.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this)},e}(y),w=["crossOrigin"],R=function(){function t(t){this.render=null,this.config=null,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,this.transitionGeneration=0,this.config=d(t),this.render=this.createRenderer(this.config,!0)}return t.prototype.createRenderer=function(t,e){var i,n,o;void 0===e&&(e=!1);var r=null,a=null,s=null;try{if(!t.container)throw new Error("[alpha-video-player-js]: container can not be empty!");return r=0===t.alphaScale?new b(t):(s=(a=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=h(),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}(t.container,t.width,t.height)).getContext("webgl")||a.getContext("experimental-webgl"))?new g(t,a,s):new m(t,a),e&&(null===(i=t.onInitSuccess)||void 0===i||i.call(t)),r}catch(e){if(null==r||r.destroy(!1),s&&!s.isContextLost()&&(null===(n=s.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext()),a&&(null===(o=a.parentNode)||void 0===o||o.removeChild(a),a.width=a.height=0),!t.onInitError)throw e;return t.onInitError(e),null}},t.prototype.rendererUpdates=function(t){var e=Object.assign({},t);return delete e.container,e},t.prototype.finishTransition=function(t,e){if(e===this.transitionGeneration&&this.render===t&&this.outgoingRender){var i=this.outgoingRender,n=this.config;t.prepareOutput(),t.setOutputTransitioning(!1),t.setOutputVisible(!0),t.updateConfig({onError:null==n?void 0:n.onError,onDestroy:null==n?void 0:n.onDestroy}),this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,i.destroy(!1)}},t.prototype.rollbackTransition=function(t,e){if(e===this.transitionGeneration&&this.render===t&&this.outgoingRender){var i=this.outgoingRender,n=this.outgoingConfig,o=this.transitionWasPlaying;this.transitionGeneration++,this.render=i,this.config=n,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,t.destroy(!1),n&&i.updateConfig(this.rendererUpdates(n)),i.setOutputVisible(!0),o&&i.play().catch((function(){}))}},t.prototype.cancelTransition=function(){if(!this.outgoingRender)return!1;var t=this.render,e=this.outgoingRender,i=this.outgoingConfig,n=this.transitionWasPlaying;return this.transitionGeneration++,null==t||t.destroy(!1),this.render=e,this.config=i,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,i&&e.updateConfig(this.rendererUpdates(i)),e.setOutputVisible(!0),n},t.prototype.activateTransition=function(t,e,i){var n,a=this;(null===(n=this.config)||void 0===n?void 0:n.src)&&t.whenReady().then((function(){return o(a,void 0,void 0,(function(){var n;return r(this,(function(o){switch(o.label){case 0:return e!==this.transitionGeneration||this.render!==t?[2]:i?[4,t.play()]:[3,2];case 1:o.sent(),o.label=2;case 2:return e!==this.transitionGeneration||this.render!==t||(i||(null===(n=this.config)||void 0===n?void 0:n.autoShow))&&this.finishTransition(t,e),[2]}}))}))})).catch((function(){a.rollbackTransition(t,e)}))},t.prototype.startTransition=function(t,e,i){var n=this,o=this.render;if(!o)return this.config=t,void(this.render=this.createRenderer(t));var r=++this.transitionGeneration,a=null,s=Object.assign({},t,{onDestroy:void 0,onError:function(e){try{var i=n.config?n.config.onError:t.onError;null==i||i(e)}finally{a&&n.rollbackTransition(a,n.transitionGeneration)}}});if(a=this.createRenderer(s)){a.setOutputTransitioning(!0),a.setOutputVisible(!1);var l=null!=i?i:o.playing;l&&(o.updateConfig({onPause:void 0}),o.pause()),this.outgoingRender=o,this.outgoingConfig=e,this.transitionWasPlaying=l,this.render=a,this.config=t,this.activateTransition(a,r,l)}},t.prototype.getRenderer=function(){if(!this.render)throw new Error("[alpha-video-player-js]: player is not initialized.");return this.render},Object.defineProperty(t.prototype,"playing",{get:function(){var t;return(null===(t=this.render)||void 0===t?void 0:t.playing)||!1},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.render)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return o(this,void 0,void 0,(function(){var e,i;return r(this,(function(n){switch(n.label){case 0:return t&&this.updateConfig(t),[4,(e=this.getRenderer()).play()];case 1:return i=n.sent(),this.outgoingRender&&this.render===e?[4,e.whenReady()]:[3,3];case 2:n.sent(),this.finishTransition(e,this.transitionGeneration),n.label=3;case 3:return[2,i]}}))}))},t.prototype.updateConfig=function(t){if(!this.config)throw new Error("[alpha-video-player-js]: player has been destroyed.");var e=this.config,i=Object.assign({},t);void 0===i.src&&delete i.src;var n=d(Object.assign({},i,{container:e.container}),e),o=function(t){return 0===t.alphaScale!=(0===n.alphaScale)||0===t.alphaScale&&t.src!==n.src||w.some((function(e){return t[e]!==n[e]}))};if(this.outgoingRender&&o(e)){var r=this.cancelTransition();return o(e=this.config)?void this.startTransition(n,e,r):(this.config=n,this.getRenderer().updateConfig(this.rendererUpdates(n)),void(r&&this.getRenderer().play().catch((function(){}))))}if(this.render&&!o(e)){this.config=n;var a=Object.assign({},i);if(this.outgoingRender&&(delete a.onError,delete a.onDestroy),this.getRenderer().updateConfig(a),this.outgoingRender&&e.src!==n.src){var s=++this.transitionGeneration;this.activateTransition(this.getRenderer(),s,this.transitionWasPlaying)}}else this.startTransition(n,e)},t.prototype.pause=function(){var t;this.getRenderer().pause(),null===(t=this.outgoingRender)||void 0===t||t.pause()},t.prototype.destroy=function(){var t,e,i,n;this.transitionGeneration++,this.outgoingRender&&this.render&&this.render.updateConfig({onError:null===(t=this.config)||void 0===t?void 0:t.onError,onDestroy:null===(e=this.config)||void 0===e?void 0:e.onDestroy}),null===(i=this.render)||void 0===i||i.destroy(),null===(n=this.outgoingRender)||void 0===n||n.destroy(!1),this.render=null,this.outgoingRender=null,this.outgoingConfig=null,this.config=null},t.prototype.reset=function(){this.getRenderer().reset()},t.prototype.setSrc=function(t){if(this.getRenderer().setSrc(t),this.config&&(this.config.src=t),this.outgoingRender){var e=++this.transitionGeneration;this.activateTransition(this.getRenderer(),e,this.transitionWasPlaying)}},t.prototype.setCurrentTime=function(t){this.getRenderer().setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer().setMute(t),this.config&&(this.config.muted=t)},t.prototype.setLoop=function(t){this.getRenderer().setLoop(t),this.config&&(this.config.loop=t)},t.prototype.setPlaybackRate=function(t){this.getRenderer().setPlaybackRate(t),this.config&&(this.config.playbackRate=t)},t}(),_=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:a},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(){this._syncConfig()},poster:function(){this._syncConfig()},width:function(){this._syncConfig()},height:function(){this._syncConfig()},crossOrigin:function(){this._syncConfig()},muted:function(){this._syncConfig()},loop:function(){this._syncConfig()},playbackRate:function(){this._syncConfig()},fps:function(){this._syncConfig()},orientation:function(){this._syncConfig()},side:function(){this._syncConfig()},alphaScale:function(){this._syncConfig()},alphaAlign:function(){this._syncConfig()},videoFrame:function(){this._syncConfig()},debug:function(){this._syncConfig()},autoShow:function(){this._syncConfig()},autoClear:function(){this._syncConfig()},autoDestroy:function(){this._syncConfig()},autoResize:function(){this._syncConfig()}},methods:{_initPlayer:function(){var t=this,e=t.$refs.container;e&&(t._destroyPlayer(),t._player=new R({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")}}))},_currentConfig:function(){var t=this;return n(n({},null!=t.src?{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})},_syncConfig:function(){var t;null===(t=this._player)||void 0===t||t.updateConfig(this._currentConfig())},play:function(){var t;return null===(t=this._player)||void 0===t?void 0:t.play()},updateConfig:function(t){var e;null===(e=this._player)||void 0===e||e.updateConfig(t)},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{_ as default};
package/dist/vue3.d.ts CHANGED
@@ -45,7 +45,10 @@ interface IConfig {
45
45
  onError?: (e: unknown) => void;
46
46
  onDestroy?: () => void;
47
47
  }
48
- type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
48
+ /** 运行时可更新配置;container 由现有播放器实例持有,不支持迁移。 */
49
+ type IUpdateConfig = Partial<Omit<IConfig, 'container'>>;
50
+ /** play(config) 的历史参数类型,保留可选 container 以维持类型兼容。 */
51
+ type IOptionalConfig = IUpdateConfig & Partial<Pick<IConfig, 'container'>>;
49
52
  type IOrientation = 'landscape' | 'portrait';
50
53
  type ISide = 'front' | 'back';
51
54
  type IAlphaAlign = 'start' | 'end';
@@ -241,10 +244,24 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
241
244
 
242
245
  declare class Render {
243
246
  private render;
247
+ private config;
248
+ private outgoingRender;
249
+ private outgoingConfig;
250
+ private transitionWasPlaying;
251
+ private transitionGeneration;
244
252
  constructor(config: IConfig);
253
+ private createRenderer;
254
+ private rendererUpdates;
255
+ private finishTransition;
256
+ private rollbackTransition;
257
+ private cancelTransition;
258
+ private activateTransition;
259
+ private startTransition;
260
+ private getRenderer;
245
261
  get playing(): boolean;
246
262
  get loop(): boolean;
247
263
  play(config?: IOptionalConfig): Promise<void>;
264
+ updateConfig(config: IUpdateConfig): void;
248
265
  pause(): void;
249
266
  destroy(): void;
250
267
  reset(): void;
@@ -262,6 +279,7 @@ type IAlphaVideoPlayer = InstanceType<typeof Render>;
262
279
  */
263
280
  type IAlphaVideoPlayerRef = {
264
281
  play: () => Promise<void> | undefined;
282
+ updateConfig: (config: IUpdateConfig) => void;
265
283
  pause: () => void;
266
284
  destroy: () => void;
267
285
  reset: () => void;
@@ -273,4 +291,4 @@ type IAlphaVideoPlayerRef = {
273
291
  getPlayer: () => IAlphaVideoPlayer | null;
274
292
  };
275
293
 
276
- export { type IAlphaVideoPlayer, type IAlphaVideoPlayerRef, _default as default };
294
+ export { type IAlphaVideoPlayer, type IAlphaVideoPlayerRef, type IUpdateConfig, _default as default };
package/dist/vue3.js CHANGED
@@ -1 +1 @@
1
- import{defineComponent as t,ref as e,watch as i,onMounted as n,onBeforeUnmount as o,h as r}from"vue";var a=function(t,e){return a=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])},a(t,e)};function s(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}a(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}function l(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 d(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 u="start",h=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},p=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=u);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]},f=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},y=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},g={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:u,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},m=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=h(),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({},g,this.config||{},t);e.alphaScale=c(e.alphaScale),e.alphaAlign=e.alphaAlign||u,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 l(this,void 0,void 0,(function(){var n,o;return d(this,(function(r){switch(r.label){case 0:f(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(){f(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){f(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){f(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){f(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){f(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=h(),s=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=u),0===n)return t/e;var r=p(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,d=r?r.height/a:o.height||(null===(e=this.container)||void 0===e?void 0:e.offsetHeight)||n.videoHeight,c=void 0;if("width"===o.autoResize||"height"===o.autoResize)c=o.autoResize;else c=s>=l/d?"width":"height";var v="width"===c?l:Math.round(d*s),f="width"===c?Math.round(l/s):d,y=f*a;!r||v*a===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=h();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(r,v,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}(),b=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 s(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=u);var o=[-1,1,1,1,-1,-1,1,-1],r=p(t,e,i,n),a=r.rgb,s=r.alpha,l=v(a),d=v(s),h=[];return o.forEach((function(t,e){e%2==0&&(h=h.concat(o.slice(e,e+2)).concat(l.slice(e,e+2)).concat(d.slice(e,e+2)))})),new Float32Array(h)}(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 d=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(d);var h=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(h,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&&y(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}(m),w=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 s(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&&y(n)&&r&&a&&s&&l){var u=p(d.orientation,d.side,d.alphaScale,d.alphaAlign),h=u.rgb,c=u.alpha;e.drawImage(n,h.x*r,h.y*a,h.width*r,h.height*a,0,0,s,l);var v=e.getImageData(0,0,s,l),f=v.data;i.drawImage(n,c.x*r,c.y*a,c.width*r,c.height*a,0,0,s,l);for(var g=i.getImageData(0,0,s,l).data,m=3;m<f.length;m+=4)f[m]=g[m-3];e.putImageData(v,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}(m),A=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 s(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}(m),E=function(){function t(t){var e,i=c(t.alphaScale),n=Object.assign({},t,{alphaScale:i});if(0===i)this.render=new A(n);else if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new b(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 w(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 l(this,void 0,void 0,(function(){return d(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}(),_=t({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:u},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:{type:[String,Boolean],default:"contain"}},emits:["initSuccess","initError","load","canPlay","play","loop","pause","ended","error","destroy"],setup:function(t,a){var s=a.emit,l=a.expose,d=e(),u=null,h=function(){u&&(u.destroy(),u=null)};return i((function(){return t.src}),(function(t){return null!=t&&(null==u?void 0:u.setSrc(t))})),i((function(){return t.muted}),(function(t){return null==u?void 0:u.setMute(t)})),i((function(){return t.loop}),(function(t){return null==u?void 0:u.setLoop(t)})),i((function(){return t.playbackRate}),(function(t){return null==u?void 0:u.setPlaybackRate(t)})),n((function(){d.value&&(h(),u=new E({container:d.value,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 s("initSuccess")},onInitError:function(t){return s("initError",t)},onLoad:function(){return s("load")},onCanPlay:function(){return s("canPlay")},onPlay:function(){return s("play")},onLoop:function(){return s("loop")},onPause:function(){return s("pause")},onEnded:function(){return s("ended")},onError:function(t){return s("error",t)},onDestroy:function(){return s("destroy")}}))})),o(h),l({play:function(){return null==u?void 0:u.play()},pause:function(){return null==u?void 0:u.pause()},destroy:h,reset:function(){return null==u?void 0:u.reset()},setSrc:function(t){return null==u?void 0:u.setSrc(t)},setCurrentTime:function(t){return null==u?void 0:u.setCurrentTime(t)},setMute:function(t){return null==u?void 0:u.setMute(t)},setLoop:function(t){return null==u?void 0:u.setLoop(t)},setPlaybackRate:function(t){return null==u?void 0:u.setPlaybackRate(t)},getPlayer:function(){return u}}),function(){return r("div",{ref:d})}}});export{_ as default};
1
+ import{defineComponent as t,ref as e,watch as i,onMounted as n,onBeforeUnmount as o,h as r}from"vue";var a=function(t,e){return a=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])},a(t,e)};function s(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}a(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}var l=function(){return l=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},l.apply(this,arguments)};function d(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 u(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 h="start",c={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:h,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},p="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",f=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},v=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},y=function(t,e){var i,n,o,r,a,s,l,d,u,p,f,y,g,m=Object.assign({},c,e||{},t);return m.playbackRate=null!==(i=m.playbackRate)&&void 0!==i?i:c.playbackRate,m.muted=null!==(n=m.muted)&&void 0!==n?n:c.muted,m.loop=null!==(o=m.loop)&&void 0!==o?o:c.loop,m.fps=null!==(r=m.fps)&&void 0!==r?r:c.fps,m.orientation=null!==(a=m.orientation)&&void 0!==a?a:c.orientation,m.side=null!==(s=m.side)&&void 0!==s?s:c.side,m.alphaScale=v(m.alphaScale),m.alphaAlign=null!==(l=m.alphaAlign)&&void 0!==l?l:h,m.autoShow=null!==(d=m.autoShow)&&void 0!==d?d:c.autoShow,m.autoClear=null!==(u=m.autoClear)&&void 0!==u?u:c.autoClear,m.autoDestroy=null!==(p=m.autoDestroy)&&void 0!==p?p:c.autoDestroy,m.autoResize=null!==(f=m.autoResize)&&void 0!==f?f:c.autoResize,m.debug=null!==(y=m.debug)&&void 0!==y?y:c.debug,m.videoFrame=null!==(g=m.videoFrame)&&void 0!==g?g:c.videoFrame,m},g=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=h);var o=v(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}}},m=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]},b=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},R=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},w=function(){function t(t,e,i){if(void 0===e&&(e=!1),void 0===i&&(i=null),this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=null,this.animationGeneration=0,this.playRequestId=0,this.sourceGeneration=0,this.resumeOnReady=!1,this.destroyed=!1,this.onCanPlayTimes=1,this.readyPromise=Promise.resolve(),this.resolveReady=null,this.transitionStyle=null,this.canPlay=!1,this.cancelAnimation=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,this.canvas=i,i){var n=this.canvas,o=n.width,r=n.height;this.canvasWidth=o,this.canvasHeight=r}try{t.src&&this.initVideo()}catch(t){throw this.destroy(!1),t}}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.whenReady=function(){return this.canPlay?Promise.resolve():this.readyPromise},t.prototype.setOutputVisible=function(t){var e=this.renderVideoDirectly?this.video:this.canvas;e&&(e.style.visibility=t?"visible":"hidden")},t.prototype.setOutputTransitioning=function(t){var e=this.renderVideoDirectly?this.video:this.canvas;if(e)return t?(this.transitionStyle||(this.transitionStyle={position:e.style.position||"",left:e.style.left||"",top:e.style.top||"",zIndex:e.style.zIndex||""}),e.style.position="absolute",e.style.left="0",e.style.top="0",void(e.style.zIndex="1")):void(this.transitionStyle&&(e.style.position=this.transitionStyle.position,e.style.left=this.transitionStyle.left,e.style.top=this.transitionStyle.top,e.style.zIndex=this.transitionStyle.zIndex,this.transitionStyle=null))},t.prototype.prepareOutput=function(){!this.renderVideoDirectly&&this.canPlay&&this.drawFrameOnce()},t.prototype.setConfig=function(t){t&&(this.config=y(t,this.config))},t.prototype.updateConfig=function(t){var e=this;if(this.destroyed||!this.config)throw new Error("[alpha-video-player-js]: player has been destroyed.");var i=this.config,n=this.playing,o=void 0!==t.src&&t.src!==i.src,r=o&&(n||this.resumeOnReady),a=void 0!==t.fps&&t.fps!==i.fps||void 0!==t.videoFrame&&t.videoFrame!==i.videoFrame;this.setConfig(t);var s=this.config;if(o&&this.setSrc(t.src),this.video){if(void 0!==t.muted&&this.setMute(s.muted),void 0!==t.loop&&this.setLoop(s.loop),void 0!==t.playbackRate&&this.setPlaybackRate(s.playbackRate),r){this.resumeOnReady=!0;var l=this.sourceGeneration;this.whenReady().then((function(){if(!e.destroyed&&l===e.sourceGeneration&&e.resumeOnReady)return e.resumeOnReady=!1,e.play()})).catch((function(){}))}!a||o||!n||this.renderVideoDirectly||this.video.paused||(this.cancelDrawFrame(),this.playing=!0,this.drawFrame()),this.onConfigUpdated(i,s)}},t.prototype.onConfigUpdated=function(t,e){this.video&&t.poster!==e.poster&&(this.video.poster=e.poster||p),t.width===e.width&&t.height===e.height&&t.autoResize===e.autoResize&&t.orientation===e.orientation&&t.alphaScale===e.alphaScale&&t.alphaAlign===e.alphaAlign||this.resizeOutput(),t.autoShow!==e.autoShow&&this.video&&(this.renderVideoDirectly?this.setNativeVideoVisible(this.playing||!!e.autoShow):e.autoShow&&this.canPlay&&this.drawFrameOnce())},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;this.resetReady();var s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i||p,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.resetReady=function(){var t,e=this;null===(t=this.resolveReady)||void 0===t||t.call(this),this.readyPromise=new Promise((function(t){e.resolveReady=t}))},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this;if(!this.destroyed&&this.playing&&null===this.animationId){var e=this.animationGeneration,i=this.initAdaptAnimation(),n=i.request,o=i.cancel;this.cancelAnimation=o;var r,a=this.config.fps>0?1e3/this.config.fps:0,s=function(){return!t.destroyed&&t.playing&&e===t.animationGeneration&&t.video&&!t.video.paused&&!t.video.ended},l=function(e){if(s()){t.animationId=null;try{(void 0===e||void 0===r||e-r>=a)&&(t.drawFrameOnce(),r=void 0!==r&&void 0!==e&&a?e-(e-r)%a:e)}catch(e){return void t.onError(e)}s()&&(t.animationId=n(l))}};l()}},t.prototype.initAdaptAnimation=function(){var t=this.config,e=t.videoFrame,i=t.fps,n=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}(),o=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}(),r=this.video;if(e&&r.requestVideoFrameCallback&&r.cancelVideoFrameCallback)return{request:function(t){return r.requestVideoFrameCallback(t)},cancel:function(t){return r.cancelVideoFrameCallback(t)}};if(n&&o)return{request:function(t){return n.call(window,t)},cancel:function(t){return o.call(window,t)}};var a=i>0?1e3/i:16;return{request:function(t){return window.setTimeout((function(){return t(Date.now())}),a)},cancel:function(t){return window.clearTimeout(t)}}},t.prototype.cancelDrawFrame=function(){var t;this.animationGeneration++;try{null!==this.animationId&&(null===(t=this.cancelAnimation)||void 0===t||t.call(this,this.animationId))}finally{this.animationId=null,this.cancelAnimation=null,this.playing=!1}},t.prototype.play=function(t){var e,i;return d(this,void 0,void 0,(function(){var n,o,r,a;return u(this,(function(s){switch(s.label){case 0:b(this.video),t&&this.setConfig(t),this.resumeOnReady=!1,n=this.video,o=++this.playRequestId,s.label=1;case 1:return s.trys.push([1,3,,4]),[4,n.play()];case 2:return r=s.sent(),this.destroyed||o!==this.playRequestId||n!==this.video||n.paused||n.ended?[2,r]:(this.cancelDrawFrame(),this.playing=!0,this.renderVideoDirectly?this.setNativeVideoVisible(!0):this.drawFrame(),[2,r]);case 3:a=s.sent();try{this.destroyed||o!==this.playRequestId||null===(i=null===(e=this.config)||void 0===e?void 0:e.onError)||void 0===i||i.call(e,a)}finally{throw a}case 4:return[2]}}))}))},t.prototype.pause=function(){b(this.video),this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.video.pause()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){if(this.destroyed)throw new Error("[alpha-video-player-js]: player has been destroyed.");this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.resetReady(),this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){b(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){b(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){b(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){b(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t=this,e=t.video,i=t.config;t.canvas,this.videoWidth=e.videoWidth,this.videoHeight=e.videoHeight,this.resizeOutput(),i.onLoad&&i.onLoad()},t.prototype.resizeOutput=function(){var t=this,e=t.video,i=t.config,n=t.canvas,o=t.container;if(e&&i){var r=f(),a=i.width||(null==o?void 0:o.offsetWidth)||(n?n.width/r:e.videoWidth),s=i.height||(null==o?void 0:o.offsetHeight)||(n?n.height/r:e.videoHeight),l=a,d=s;if(i.autoResize&&(n||this.renderVideoDirectly)&&e.videoWidth>0&&e.videoHeight>0){var u=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=h),0===n)return t/e;var r=g(i,"front",n,o).rgb;return t*r.width/(e*r.height)}(e.videoWidth,e.videoHeight,i.orientation,i.alphaScale,i.alphaAlign),c=a||e.videoWidth,p=s||e.videoHeight,v=void 0;if("width"===i.autoResize||"height"===i.autoResize)v=i.autoResize;else v=u>=c/p?"width":"height";l="width"===v?c:Math.round(p*u),d="width"===v?Math.round(c/u):p}var y=d*r;n&&l&&d&&(l*r!==this.canvasWidth||y!==this.canvasHeight)?(!function(t,e,i){var n=f();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(n,l,d),this.canvasWidth=n.width,this.canvasHeight=n.height,this.onCanvasResized()):this.renderVideoDirectly&&(e.style.width=l?"".concat(l,"px"):"100%",e.style.height=d?"".concat(d,"px"):"100%")}},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t,e=this.config;this.canPlay=!0,null===(t=this.resolveReady)||void 0===t||t.call(this),this.resolveReady=null;try{this.renderVideoDirectly?e.autoShow&&this.setNativeVideoVisible(!0):e.autoShow&&this.drawFrameOnce()}catch(t){return void this.onError(t)}1===this.onCanPlayTimes&&e.onCanPlay&&e.onCanPlay(),1!==this.onCanPlayTimes&&e.loop&&e.onLoop&&e.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t,e,i=this.config;(null===(t=this.video)||void 0===t?void 0:t.paused)&&(this.playRequestId++,this.cancelDrawFrame()),null===(e=null==i?void 0:i.onPause)||void 0===e||e.call(i)},t.prototype.onEnded=function(){var t,e=this.config,i=this.video;this.playRequestId++,i.currentTime=0,this.cancelDrawFrame();try{null===(t=e.onEnded)||void 0===t||t.call(e)}finally{e.autoDestroy&&this.destroy()}},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;if(n&&!this.destroyed){n.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t);try{null===(i=n.onError)||void 0===i||i.call(n,t)}finally{this.destroy()}}},t.prototype.destroy=function(t){var e=this;if(void 0===t&&(t=!0),!this.destroyed){this.destroyed=!0,this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1;var i,n=this,o=n.config,r=n.video,a=n.canvas,s=function(t){try{t()}catch(t){null!=i||(i=t)}};s((function(){return e.cancelDrawFrame()})),s((function(){var t;return null===(t=e.resolveReady)||void 0===t?void 0:t.call(e)})),this.resolveReady=null,s((function(){return e.removeEvent()})),s((function(){r&&(r.pause(),r.removeAttribute("src"),r.load())})),s((function(){var t;return null===(t=null==r?void 0:r.parentNode)||void 0===t?void 0:t.removeChild(r)})),s((function(){return e.releaseRenderResources()})),s((function(){var t;return null===(t=null==a?void 0:a.parentNode)||void 0===t?void 0:t.removeChild(a)})),s((function(){a&&(a.width=a.height=0)})),this.config=null,this.container=null,this.video=null,this.canvas=null,this.transitionStyle=null,this.canPlay=!1,t&&s((function(){var t;return null===(t=null==o?void 0:o.onDestroy)||void 0===t?void 0:t.call(o)})),i&&(null==o?void 0:o.debug)&&console.error("[alpha-video-player-js] destroy error:",i)}},t.prototype.releaseRenderResources=function(){},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}(),E=function(t){function e(e,i,n){var o=t.call(this,e,!1,i)||this;o.onContextLost=function(t){return o.onError(t)},o.gl=n;try{o.initWebGLRender(),i.addEventListener("webglcontextlost",o.onContextLost)}catch(t){throw o.destroy(!1),t}return o}return s(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl;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(!n)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL shader.");if(t===i.VERTEX_SHADER?this.vertexShader=n:this.fragmentShader=n,i.shaderSource(n,e),i.compileShader(n),!i.getShaderParameter(n,i.COMPILE_STATUS))throw new Error("[alpha-video-player-js]: WebGL shader compilation failed: ".concat(i.getShaderInfoLog(n)||""));return n},e.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(!e)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL program.");if(this.program=e,t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),!t.getProgramParameter(e,t.LINK_STATUS))throw new Error("[alpha-video-player-js]: WebGL program linking failed: ".concat(t.getProgramInfoLog(e)||""));return t.useProgram(e),e},e.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();if(!e)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL texture.");return this.texture=e,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=this.computeVertexCoords(n),r=e.createBuffer();if(!r)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL buffer.");this.vertexBuffer=r,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 d=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(d);var u=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(u,0),r},e.prototype.computeVertexCoords=function(t){return function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=h);var o=[-1,1,1,1,-1,-1,1,-1],r=g(t,e,i,n),a=r.rgb,s=r.alpha,l=m(a),d=m(s),u=[];return o.forEach((function(t,e){e%2==0&&(u=u.concat(o.slice(e,e+2)).concat(l.slice(e,e+2)).concat(d.slice(e,e+2)))})),new Float32Array(u)}(t.orientation,t.side,t.alphaScale,t.alphaAlign)},e.prototype.onConfigUpdated=function(e,i){if(t.prototype.onConfigUpdated.call(this,e,i),(e.orientation!==i.orientation||e.side!==i.side||e.alphaScale!==i.alphaScale||e.alphaAlign!==i.alphaAlign)&&this.gl&&this.vertexBuffer){var n=this.computeVertexCoords(i);this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.vertexBuffer),this.gl.bufferData(this.gl.ARRAY_BUFFER,n,this.gl.STATIC_DRAW)}},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&&!t.isContextLost()&&e&&this.canPlay&&R(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.onEnded=function(){var e=this.gl;this.config.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this)},e.prototype.releaseRenderResources=function(){var t,e=this,i=this,n=i.canvas,o=i.gl,r=i.vertexShader,a=i.fragmentShader,s=i.texture,l=i.vertexBuffer,d=i.program,u=function(e){try{e()}catch(e){null!=t||(t=e)}};if(u((function(){return null==n?void 0:n.removeEventListener("webglcontextlost",e.onContextLost)})),o&&(d&&r&&u((function(){return o.detachShader(d,r)})),d&&a&&u((function(){return o.detachShader(d,a)})),r&&u((function(){return o.deleteShader(r)})),a&&u((function(){return o.deleteShader(a)})),s&&u((function(){return o.deleteTexture(s)})),l&&u((function(){return o.deleteBuffer(l)})),d&&u((function(){return o.deleteProgram(d)})),u((function(){var t;return null===(t=o.getExtension("WEBGL_lose_context"))||void 0===t?void 0:t.loseContext()}))),this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null,t)throw t},e}(w),A=function(t){function e(e,i){var n=t.call(this,e,!1,i)||this;try{n.initCanvasRender()}catch(t){throw n.destroy(!1),t}return n}return s(e,t),e.prototype.initCanvasRender=function(){var t=this.canvas;if(this.context2d=t.getContext("2d"),!this.context2d)throw new Error("[alpha-video-player-js]: Your browser does not support canvas rendering.");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");if(t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d"),!this.alphaContext2d)throw new Error("[alpha-video-player-js]: Unable to allocate the alpha canvas.")},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&&R(n)&&r&&a&&s&&l){var u=g(d.orientation,d.side,d.alphaScale,d.alphaAlign),h=u.rgb,c=u.alpha;e.drawImage(n,h.x*r,h.y*a,h.width*r,h.height*a,0,0,s,l);var p=e.getImageData(0,0,s,l),f=p.data;i.drawImage(n,c.x*r,c.y*a,c.width*r,c.height*a,0,0,s,l);for(var v=i.getImageData(0,0,s,l).data,y=3;y<f.length;y+=4)f[y]=v[y-3];e.putImageData(p,0,0)}},e.prototype.onEnded=function(){var e=this,i=e.context2d,n=e.canvasWidth,o=e.canvasHeight;e.config.autoClear&&i.clearRect(0,0,n,o),t.prototype.onEnded.call(this)},e.prototype.releaseRenderResources=function(){try{this.alphaCanvas&&(this.alphaCanvas.width=this.alphaCanvas.height=0)}finally{this.context2d=null,this.alphaCanvas=null,this.alphaContext2d=null}},e}(w),S=function(t){function e(e){return t.call(this,e,!0)||this}return s(e,t),e.prototype.onEnded=function(){this.config.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this)},e}(w),C=["crossOrigin"],_=function(){function t(t){this.render=null,this.config=null,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,this.transitionGeneration=0,this.config=y(t),this.render=this.createRenderer(this.config,!0)}return t.prototype.createRenderer=function(t,e){var i,n,o;void 0===e&&(e=!1);var r=null,a=null,s=null;try{if(!t.container)throw new Error("[alpha-video-player-js]: container can not be empty!");return r=0===t.alphaScale?new S(t):(s=(a=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=f(),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}(t.container,t.width,t.height)).getContext("webgl")||a.getContext("experimental-webgl"))?new E(t,a,s):new A(t,a),e&&(null===(i=t.onInitSuccess)||void 0===i||i.call(t)),r}catch(e){if(null==r||r.destroy(!1),s&&!s.isContextLost()&&(null===(n=s.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext()),a&&(null===(o=a.parentNode)||void 0===o||o.removeChild(a),a.width=a.height=0),!t.onInitError)throw e;return t.onInitError(e),null}},t.prototype.rendererUpdates=function(t){var e=Object.assign({},t);return delete e.container,e},t.prototype.finishTransition=function(t,e){if(e===this.transitionGeneration&&this.render===t&&this.outgoingRender){var i=this.outgoingRender,n=this.config;t.prepareOutput(),t.setOutputTransitioning(!1),t.setOutputVisible(!0),t.updateConfig({onError:null==n?void 0:n.onError,onDestroy:null==n?void 0:n.onDestroy}),this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,i.destroy(!1)}},t.prototype.rollbackTransition=function(t,e){if(e===this.transitionGeneration&&this.render===t&&this.outgoingRender){var i=this.outgoingRender,n=this.outgoingConfig,o=this.transitionWasPlaying;this.transitionGeneration++,this.render=i,this.config=n,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,t.destroy(!1),n&&i.updateConfig(this.rendererUpdates(n)),i.setOutputVisible(!0),o&&i.play().catch((function(){}))}},t.prototype.cancelTransition=function(){if(!this.outgoingRender)return!1;var t=this.render,e=this.outgoingRender,i=this.outgoingConfig,n=this.transitionWasPlaying;return this.transitionGeneration++,null==t||t.destroy(!1),this.render=e,this.config=i,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,i&&e.updateConfig(this.rendererUpdates(i)),e.setOutputVisible(!0),n},t.prototype.activateTransition=function(t,e,i){var n,o=this;(null===(n=this.config)||void 0===n?void 0:n.src)&&t.whenReady().then((function(){return d(o,void 0,void 0,(function(){var n;return u(this,(function(o){switch(o.label){case 0:return e!==this.transitionGeneration||this.render!==t?[2]:i?[4,t.play()]:[3,2];case 1:o.sent(),o.label=2;case 2:return e!==this.transitionGeneration||this.render!==t||(i||(null===(n=this.config)||void 0===n?void 0:n.autoShow))&&this.finishTransition(t,e),[2]}}))}))})).catch((function(){o.rollbackTransition(t,e)}))},t.prototype.startTransition=function(t,e,i){var n=this,o=this.render;if(!o)return this.config=t,void(this.render=this.createRenderer(t));var r=++this.transitionGeneration,a=null,s=Object.assign({},t,{onDestroy:void 0,onError:function(e){try{var i=n.config?n.config.onError:t.onError;null==i||i(e)}finally{a&&n.rollbackTransition(a,n.transitionGeneration)}}});if(a=this.createRenderer(s)){a.setOutputTransitioning(!0),a.setOutputVisible(!1);var l=null!=i?i:o.playing;l&&(o.updateConfig({onPause:void 0}),o.pause()),this.outgoingRender=o,this.outgoingConfig=e,this.transitionWasPlaying=l,this.render=a,this.config=t,this.activateTransition(a,r,l)}},t.prototype.getRenderer=function(){if(!this.render)throw new Error("[alpha-video-player-js]: player is not initialized.");return this.render},Object.defineProperty(t.prototype,"playing",{get:function(){var t;return(null===(t=this.render)||void 0===t?void 0:t.playing)||!1},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.render)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return d(this,void 0,void 0,(function(){var e,i;return u(this,(function(n){switch(n.label){case 0:return t&&this.updateConfig(t),[4,(e=this.getRenderer()).play()];case 1:return i=n.sent(),this.outgoingRender&&this.render===e?[4,e.whenReady()]:[3,3];case 2:n.sent(),this.finishTransition(e,this.transitionGeneration),n.label=3;case 3:return[2,i]}}))}))},t.prototype.updateConfig=function(t){if(!this.config)throw new Error("[alpha-video-player-js]: player has been destroyed.");var e=this.config,i=Object.assign({},t);void 0===i.src&&delete i.src;var n=y(Object.assign({},i,{container:e.container}),e),o=function(t){return 0===t.alphaScale!=(0===n.alphaScale)||0===t.alphaScale&&t.src!==n.src||C.some((function(e){return t[e]!==n[e]}))};if(this.outgoingRender&&o(e)){var r=this.cancelTransition();return o(e=this.config)?void this.startTransition(n,e,r):(this.config=n,this.getRenderer().updateConfig(this.rendererUpdates(n)),void(r&&this.getRenderer().play().catch((function(){}))))}if(this.render&&!o(e)){this.config=n;var a=Object.assign({},i);if(this.outgoingRender&&(delete a.onError,delete a.onDestroy),this.getRenderer().updateConfig(a),this.outgoingRender&&e.src!==n.src){var s=++this.transitionGeneration;this.activateTransition(this.getRenderer(),s,this.transitionWasPlaying)}}else this.startTransition(n,e)},t.prototype.pause=function(){var t;this.getRenderer().pause(),null===(t=this.outgoingRender)||void 0===t||t.pause()},t.prototype.destroy=function(){var t,e,i,n;this.transitionGeneration++,this.outgoingRender&&this.render&&this.render.updateConfig({onError:null===(t=this.config)||void 0===t?void 0:t.onError,onDestroy:null===(e=this.config)||void 0===e?void 0:e.onDestroy}),null===(i=this.render)||void 0===i||i.destroy(),null===(n=this.outgoingRender)||void 0===n||n.destroy(!1),this.render=null,this.outgoingRender=null,this.outgoingConfig=null,this.config=null},t.prototype.reset=function(){this.getRenderer().reset()},t.prototype.setSrc=function(t){if(this.getRenderer().setSrc(t),this.config&&(this.config.src=t),this.outgoingRender){var e=++this.transitionGeneration;this.activateTransition(this.getRenderer(),e,this.transitionWasPlaying)}},t.prototype.setCurrentTime=function(t){this.getRenderer().setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer().setMute(t),this.config&&(this.config.muted=t)},t.prototype.setLoop=function(t){this.getRenderer().setLoop(t),this.config&&(this.config.loop=t)},t.prototype.setPlaybackRate=function(t){this.getRenderer().setPlaybackRate(t),this.config&&(this.config.playbackRate=t)},t}(),P=t({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:h},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:{type:[String,Boolean],default:"contain"}},emits:["initSuccess","initError","load","canPlay","play","loop","pause","ended","error","destroy"],setup:function(t,a){var s=a.emit,d=a.expose,u=e(),h=null,c=function(){h&&(h.destroy(),h=null)};return i((function(){return[t.src,t.poster,t.width,t.height,t.crossOrigin,t.muted,t.loop,t.playbackRate,t.fps,t.orientation,t.side,t.alphaScale,t.alphaAlign,t.videoFrame,t.debug,t.autoShow,t.autoClear,t.autoDestroy,t.autoResize]}),(function(){return null==h?void 0:h.updateConfig(l(l({},null!=t.src?{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}))})),n((function(){u.value&&(c(),h=new _({container:u.value,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 s("initSuccess")},onInitError:function(t){return s("initError",t)},onLoad:function(){return s("load")},onCanPlay:function(){return s("canPlay")},onPlay:function(){return s("play")},onLoop:function(){return s("loop")},onPause:function(){return s("pause")},onEnded:function(){return s("ended")},onError:function(t){return s("error",t)},onDestroy:function(){return s("destroy")}}))})),o(c),d({play:function(){return null==h?void 0:h.play()},updateConfig:function(t){return null==h?void 0:h.updateConfig(t)},pause:function(){return null==h?void 0:h.pause()},destroy:c,reset:function(){return null==h?void 0:h.reset()},setSrc:function(t){return null==h?void 0:h.setSrc(t)},setCurrentTime:function(t){return null==h?void 0:h.setCurrentTime(t)},setMute:function(t){return null==h?void 0:h.setMute(t)},setLoop:function(t){return null==h?void 0:h.setLoop(t)},setPlaybackRate:function(t){return null==h?void 0:h.setPlaybackRate(t)},getPlayer:function(){return h}}),function(){return r("div",{ref:u})}}});export{P as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "alpha-video-player-js",
3
- "version": "1.3.1",
3
+ "version": "1.4.0",
4
4
  "description": "Web 视频动画特效播放 sdk",
5
5
  "main": "dist/alpha-video-player-js.js",
6
6
  "types": "dist/alpha-video-player-js.d.ts",
@@ -26,6 +26,7 @@
26
26
  "scripts": {
27
27
  "dev": "rollup -c -w",
28
28
  "build": "cross-env NODE_ENV=production rollup -c",
29
+ "test": "npm run build && node --test tests/*.test.mjs",
29
30
  "release": "bash ./scripts/release.sh",
30
31
  "postpublish": "git push && git push --tags"
31
32
  },
@@ -44,7 +45,7 @@
44
45
  "type": "git",
45
46
  "url": "git+https://github.com/trp1119/alpha-video-player-js.git"
46
47
  },
47
- "homepage": "https://trp1119.github.io/alpha-video-player-js-demo",
48
+ "homepage": "https://alpha-video-player-js.musecode.dev",
48
49
  "files": [
49
50
  "dist",
50
51
  "package.json"