alpha-video-player-js 1.3.2 → 1.4.1
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 +48 -2
- package/README.zh-CN.md +51 -5
- package/dist/alpha-video-player-js.d.ts +26 -2
- package/dist/alpha-video-player-js.js +1 -1
- package/dist/react.d.ts +27 -2
- package/dist/react.js +1 -1
- package/dist/vue2.d.ts +27 -2
- package/dist/vue2.js +1 -1
- package/dist/vue3.d.ts +28 -3
- package/dist/vue3.js +1 -1
- package/package.json +1 -1
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,8 +125,53 @@ 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
|
|
|
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
|
+
|
|
127
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.
|
|
128
145
|
|
|
146
|
+
### Operational errors and monitoring
|
|
147
|
+
|
|
148
|
+
Incorrect call timing uses `AlphaVideoPlayerError` with a stable `code` and the attempted `action`:
|
|
149
|
+
|
|
150
|
+
| Code | Meaning |
|
|
151
|
+
| --- | --- |
|
|
152
|
+
| `VIDEO_SOURCE_MISSING` | The operation needs a video, but no `src` has been set yet. |
|
|
153
|
+
| `PLAYER_DESTROYED` | The public player or its renderer has already been destroyed and cannot be reused. |
|
|
154
|
+
| `PLAYER_NOT_INITIALIZED` | Renderer initialization failed; inspect the earlier `onInitError` value. |
|
|
155
|
+
|
|
156
|
+
These operational errors do **not** invoke the player's `onError` callback. Synchronous methods can be handled with `try/catch`; because `play()` is asynchronous, it must be awaited or given a rejection handler:
|
|
157
|
+
|
|
158
|
+
```ts
|
|
159
|
+
import { isAlphaVideoPlayerError } from 'alpha-video-player-js'
|
|
160
|
+
|
|
161
|
+
try {
|
|
162
|
+
player.setMute(true)
|
|
163
|
+
await player.play()
|
|
164
|
+
} catch (error) {
|
|
165
|
+
if (isAlphaVideoPlayerError(error)) {
|
|
166
|
+
if (error.code === 'VIDEO_SOURCE_MISSING') return
|
|
167
|
+
if (error.code === 'PLAYER_DESTROYED') return
|
|
168
|
+
}
|
|
169
|
+
throw error
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
A handled exception/rejection does not reach the browser's global `error` / `unhandledrejection` hooks, so normal global monitoring will not report it. A monitoring SDK explicitly configured to capture handled exceptions may still record it; filter `AlphaVideoPlayerError` by `code` in that SDK's `beforeSend` hook. Browser playback, media decoding, CORS, and frame-rendering failures are different: they still invoke `onError`, and catching the returned `play()` promise does not cancel reporting performed inside your own `onError` callback.
|
|
174
|
+
|
|
129
175
|
### Multiple players on one page
|
|
130
176
|
|
|
131
177
|
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.
|
|
@@ -136,7 +182,7 @@ Each WebGL player allocates one context on its output canvas. If WebGL returns n
|
|
|
136
182
|
|
|
137
183
|
## Framework components
|
|
138
184
|
|
|
139
|
-
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`.
|
|
185
|
+
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`.
|
|
140
186
|
|
|
141
187
|
### Vue 3
|
|
142
188
|
|
|
@@ -206,7 +252,7 @@ export function Effect() {
|
|
|
206
252
|
}
|
|
207
253
|
```
|
|
208
254
|
|
|
209
|
-
The React component also accepts `className` and `style`.
|
|
255
|
+
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.
|
|
210
256
|
|
|
211
257
|
### TypeScript exports
|
|
212
258
|
|
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,8 +94,53 @@ player.setPlaybackRate(rate)
|
|
|
93
94
|
player.destroy()
|
|
94
95
|
```
|
|
95
96
|
|
|
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
|
+
|
|
96
113
|
`play()` 失败时会 reject 浏览器的原始错误,当前有效请求还会以相同值调用 `onError`。被暂停、换源、销毁或后续播放请求取代的旧请求不再触发过期错误回调。媒体加载、解码、跨域或逐帧渲染失败会通过 `onError` 上报,然后销毁实例。`destroy()` 后不要复用该实例。
|
|
97
114
|
|
|
115
|
+
### 可识别错误与监控过滤
|
|
116
|
+
|
|
117
|
+
调用时机不正确时会抛出 `AlphaVideoPlayerError`,其中包含稳定的 `code` 和本次操作 `action`:
|
|
118
|
+
|
|
119
|
+
| 错误码 | 真实原因 |
|
|
120
|
+
| --- | --- |
|
|
121
|
+
| `VIDEO_SOURCE_MISSING` | 当前还没有设置 `src`,但调用的方法需要 video。 |
|
|
122
|
+
| `PLAYER_DESTROYED` | 公共播放器或底层 renderer 已销毁,实例不能继续复用。 |
|
|
123
|
+
| `PLAYER_NOT_INITIALIZED` | renderer 初始化失败,应查看更早的 `onInitError`。 |
|
|
124
|
+
|
|
125
|
+
这些播放器状态错误不会调用配置中的 `onError`。同步方法可以直接 `try/catch`;`play()` 是异步方法,必须配合 `await`,或显式调用 `.catch()`:
|
|
126
|
+
|
|
127
|
+
```ts
|
|
128
|
+
import { isAlphaVideoPlayerError } from 'alpha-video-player-js'
|
|
129
|
+
|
|
130
|
+
try {
|
|
131
|
+
player.setMute(true)
|
|
132
|
+
await player.play()
|
|
133
|
+
} catch (error) {
|
|
134
|
+
if (isAlphaVideoPlayerError(error)) {
|
|
135
|
+
if (error.code === 'VIDEO_SOURCE_MISSING') return
|
|
136
|
+
if (error.code === 'PLAYER_DESTROYED') return
|
|
137
|
+
}
|
|
138
|
+
throw error
|
|
139
|
+
}
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
被正确捕获的异常或 Promise rejection 不会进入浏览器全局 `error` / `unhandledrejection`,常规全局监控不会上报。但如果监控 SDK 被配置为采集“已捕获异常”,仍可能记录;可在其 `beforeSend` 等过滤入口按 `AlphaVideoPlayerError.code` 忽略。浏览器播放失败、媒体解码、CORS 和逐帧渲染失败仍会调用 `onError`;业务即使捕获了 `play()` 的 rejection,也不会撤销自己在 `onError` 中执行的监控上报。
|
|
143
|
+
|
|
98
144
|
### 同页多实例
|
|
99
145
|
|
|
100
146
|
每个播放器使用独立容器,或分别挂载框架组件。video、事件、渲染资源和帧循环均归各自实例所有,暂停或销毁一个不会停止另一个。重复调用 `play()` 只保留一个帧循环;`pause()`、`setSrc()`、`destroy()` 会使尚未完成的播放启动请求失效。换源后如需播放,重新调用 `play()`。
|
|
@@ -107,7 +153,7 @@ player.destroy()
|
|
|
107
153
|
|
|
108
154
|
## 框架组件
|
|
109
155
|
|
|
110
|
-
组件入口分别为 `alpha-video-player-js/vue3`、`alpha-video-player-js/vue2` 和 `alpha-video-player-js/react`。组件接收除 `container`
|
|
156
|
+
组件入口分别为 `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`。
|
|
111
157
|
|
|
112
158
|
### Vue 3
|
|
113
159
|
|
|
@@ -140,15 +186,15 @@ export function Effect({ src }: { src: string }) {
|
|
|
140
186
|
}
|
|
141
187
|
```
|
|
142
188
|
|
|
143
|
-
React 组件额外支持 `className` 与 `style
|
|
189
|
+
React 组件额外支持 `className` 与 `style`。媒体、尺寸和布局 props 都会响应式同步;`alphaScale` 在 `0`、`0.5`、`1` 等模式之间变化时不需要重新挂载组件。
|
|
144
190
|
|
|
145
191
|
## 类型导入
|
|
146
192
|
|
|
147
193
|
| 导入路径 | 类型 |
|
|
148
194
|
| --- | --- |
|
|
149
|
-
| `alpha-video-player-js` | `IAlphaVideoPlayer`、`IConfig`、`IOptionalConfig`、`IOrientation`、`ISide`、`IAlphaAlign` |
|
|
150
|
-
| `.../vue3`、`.../vue2` | `IAlphaVideoPlayer`、`IAlphaVideoPlayerRef` |
|
|
151
|
-
| `.../react` | `IAlphaVideoPlayerProps`、`IAlphaVideoPlayerRef` |
|
|
195
|
+
| `alpha-video-player-js` | `AlphaVideoPlayerError`、`isAlphaVideoPlayerError`、`IAlphaVideoPlayerErrorCode`、`IAlphaVideoPlayer`、`IConfig`、`IOptionalConfig`、`IUpdateConfig`、`IOrientation`、`ISide`、`IAlphaAlign` |
|
|
196
|
+
| `.../vue3`、`.../vue2` | 上述错误导出,以及 `IAlphaVideoPlayer`、`IAlphaVideoPlayerRef`、`IUpdateConfig` |
|
|
197
|
+
| `.../react` | 上述错误导出,以及 `IAlphaVideoPlayerProps`、`IAlphaVideoPlayerRef`、`IUpdateConfig` |
|
|
152
198
|
|
|
153
199
|
同时使用框架 ref 与核心实例类型时,请从同一个框架子路径导入,避免生成声明文件被拆分解析时的类型不兼容。
|
|
154
200
|
|
|
@@ -42,18 +42,42 @@ interface IConfig {
|
|
|
42
42
|
onError?: (e: unknown) => void;
|
|
43
43
|
onDestroy?: () => void;
|
|
44
44
|
}
|
|
45
|
-
|
|
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
|
|
|
53
|
+
type IAlphaVideoPlayerErrorCode = 'PLAYER_DESTROYED' | 'PLAYER_NOT_INITIALIZED' | 'VIDEO_SOURCE_MISSING';
|
|
54
|
+
declare class AlphaVideoPlayerError extends Error {
|
|
55
|
+
readonly code: IAlphaVideoPlayerErrorCode;
|
|
56
|
+
readonly action: string;
|
|
57
|
+
constructor(code: IAlphaVideoPlayerErrorCode, action: string, message: string);
|
|
58
|
+
}
|
|
59
|
+
declare const isAlphaVideoPlayerError: (error: unknown) => error is AlphaVideoPlayerError;
|
|
60
|
+
|
|
50
61
|
declare class Render {
|
|
51
62
|
private render;
|
|
63
|
+
private config;
|
|
64
|
+
private outgoingRender;
|
|
65
|
+
private outgoingConfig;
|
|
66
|
+
private transitionWasPlaying;
|
|
67
|
+
private transitionGeneration;
|
|
52
68
|
constructor(config: IConfig);
|
|
69
|
+
private createRenderer;
|
|
70
|
+
private rendererUpdates;
|
|
71
|
+
private finishTransition;
|
|
72
|
+
private rollbackTransition;
|
|
73
|
+
private cancelTransition;
|
|
74
|
+
private activateTransition;
|
|
75
|
+
private startTransition;
|
|
53
76
|
private getRenderer;
|
|
54
77
|
get playing(): boolean;
|
|
55
78
|
get loop(): boolean;
|
|
56
79
|
play(config?: IOptionalConfig): Promise<void>;
|
|
80
|
+
updateConfig(config: IUpdateConfig): void;
|
|
57
81
|
pause(): void;
|
|
58
82
|
destroy(): void;
|
|
59
83
|
reset(): void;
|
|
@@ -66,4 +90,4 @@ declare class Render {
|
|
|
66
90
|
/** 核心类实例类型(`new Render(...)` 的实例),便于业务侧标注 ref / getPlayer() 等 */
|
|
67
91
|
type IAlphaVideoPlayer = InstanceType<typeof Render>;
|
|
68
92
|
|
|
69
|
-
export { type IAlphaAlign, type IAlphaVideoPlayer, type IConfig, type IOptionalConfig, type IOrientation, type ISide, Render as default };
|
|
93
|
+
export { AlphaVideoPlayerError, type IAlphaAlign, type IAlphaVideoPlayer, type IAlphaVideoPlayerErrorCode, type IConfig, type IOptionalConfig, type IOrientation, type ISide, type IUpdateConfig, Render as default, isAlphaVideoPlayerError };
|
|
@@ -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{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=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),l=r/(1+r);return{rgb:{x:"front"===e?0:l,y:0,width:s,height:1},alpha:{x:"front"===e?s:0,y:"start"===n?0:1-r,width:l,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}}},l=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!")},d=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,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.destroyed=!1,this.onCanPlayTimes=1,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.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 l=this.config.width||this.container.offsetWidth,h=this.config.height||this.container.offsetHeight;s.style.display="block",s.style.width=l?"".concat(l,"px"):"100%",s.style.height=h?"".concat(h,"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;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:h(this.video),t&&this.setConfig(t),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(){h(this.video),this.playRequestId++,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.cancelDrawFrame(),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,a=i.config,l=i.canvas;if(this.videoWidth=n.videoWidth,this.videoHeight=n.videoHeight,a.autoResize&&(l||this.renderVideoDirectly)&&n.videoWidth>0&&n.videoHeight>0){var h=r(),d=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=l?l.width/h:a.width||(null===(t=this.container)||void 0===t?void 0:t.offsetWidth)||n.videoWidth,u=l?l.height/h: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=d>=c/u?"width":"height";var v="width"===p?c:Math.round(u*d),f="width"===p?Math.round(c/d):u,y=f*h;!l||v*h===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"}(l,v,f),this.canvasWidth=l.width,this.canvasHeight=l.height,this.onCanvasResized())}a.onLoad&&a.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0;try{this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!0):t.autoShow&&this.drawFrameOnce()}catch(t){return void this.onError(t)}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,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++;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(){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.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}(),p=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,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),h=a.rgb,d=a.alpha,c=l(h),u=l(d),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();if(!a)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL buffer.");this.vertexBuffer=a,e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,r,e.STATIC_DRAW);var h=r.BYTES_PER_ELEMENT,d=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*h,0),e.enableVertexAttribArray(d);var c=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6*h,2*h),e.enableVertexAttribArray(c);var u=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*h,4*h),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&&!t.isContextLost()&&e&&this.canPlay&&d(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}(u),v=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,l=t.canvasWidth,h=t.canvasHeight,c=t.config;if(e&&i&&n&&o&&d(n)&&r&&a&&l&&h){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,l,h);var f=e.getImageData(0,0,l,h),y=f.data;i.drawImage(n,v.x*r,v.y*a,v.width*r,v.height*a,0,0,l,h);for(var g=i.getImageData(0,0,l,h).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}(u),f=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}(u),y=function(){function t(t){var e,i,n,o;this.render=null;var s=a(t.alphaScale),l=Object.assign({},t,{alphaScale:s}),h=null,d=null;try{if(!t.container)throw new Error("[alpha-video-player-js]: container can not be empty!");0===s?this.render=new f(l):(d=(h=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,a=r(),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 h=document.createElement("canvas");return h.width=s*a,h.height=l*a,h.style.width="100%",h.style.height="100%",h.style.pointerEvents="none",t.appendChild(h),h}(t.container,t.width,t.height)).getContext("webgl")||h.getContext("experimental-webgl"),this.render=d?new p(l,h,d):new v(l,h)),null===(e=t.onInitSuccess)||void 0===e||e.call(t)}catch(e){if(null===(i=this.render)||void 0===i||i.destroy(!1),d&&!d.isContextLost()&&(null===(n=d.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext()),h&&(null===(o=h.parentNode)||void 0===o||o.removeChild(h),h.width=h.height=0),!t.onInitError)throw e;return void t.onInitError(e)}}return 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(){return n(this,(function(e){return[2,this.getRenderer().play(t)]}))}))},t.prototype.pause=function(){this.getRenderer().pause()},t.prototype.destroy=function(){var t;null===(t=this.render)||void 0===t||t.destroy(),this.render=null},t.prototype.reset=function(){this.getRenderer().reset()},t.prototype.setSrc=function(t){this.getRenderer().setSrc(t)},t.prototype.setCurrentTime=function(t){this.getRenderer().setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer().setMute(t)},t.prototype.setLoop=function(t){this.getRenderer().setLoop(t)},t.prototype.setPlaybackRate=function(t){this.getRenderer().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(t){function i(e,n,o){var r=t.call(this,"[alpha-video-player-js]: ".concat(o))||this;return r.name="AlphaVideoPlayerError",r.code=e,r.action=n,Object.setPrototypeOf(r,i.prototype),r}return e(i,t),i}(Error),l=function(t){return t instanceof s||!!t&&"object"==typeof t&&"AlphaVideoPlayerError"===t.name&&"string"==typeof t.code},h=function(t){return new s("PLAYER_DESTROYED",t,"cannot ".concat(t," because this player has been destroyed. Create a new player instance before calling ").concat(t,"()."))},d=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},c=function(t,e){var i,n,a,s,l,h,d,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!==(l=m.orientation)&&void 0!==l?l:r.orientation,m.side=null!==(h=m.side)&&void 0!==h?h:r.side,m.alphaScale=u(m.alphaScale),m.alphaAlign=null!==(d=m.alphaAlign)&&void 0!==d?d: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},p=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=o);var r=u(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 l=1/(1+r),h=r/(1+r);return{rgb:{x:0,y:"front"===e?0:h,width:1,height:l},alpha:{x:"start"===n?0:1-r,y:"front"===e?l:0,width:r,height:h}}},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,e,i){if(void 0===i&&(i=!1),i)throw h(e);if(!t)throw function(t){return new s("VIDEO_SOURCE_MISSING",t,"cannot ".concat(t," because no video source has been set. Provide src, call setSrc(src), or call updateConfig({ src }) first."))}(e)},y=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},g=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=c(t,this.config))},t.prototype.updateConfig=function(t){var e=this;if(this.destroyed||!this.config)throw h("updateConfig");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:f(this.video,"play",this.destroyed),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(){f(this.video,"pause",this.destroyed),this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.video.pause()},t.prototype.reset=function(){f(this.video,"reset",this.destroyed),this.video.currentTime=0},t.prototype.setSrc=function(t){if(this.destroyed)throw h("setSrc");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,"setCurrentTime",this.destroyed),this.video.currentTime=t},t.prototype.setMute=function(t){f(this.video,"setMute",this.destroyed),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){f(this.video,"setLoop",this.destroyed),this.video.loop=t},t.prototype.setPlaybackRate=function(t){f(this.video,"setPlaybackRate",this.destroyed),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=d(),s=i.width||(null==r?void 0:r.offsetWidth)||(n?n.width/a:e.videoWidth),l=i.height||(null==r?void 0:r.offsetHeight)||(n?n.height/a:e.videoHeight),h=s,u=l;if(i.autoResize&&(n||this.renderVideoDirectly)&&e.videoWidth>0&&e.videoHeight>0){var c=function(t,e,i,n,r){if(void 0===n&&(n=1),void 0===r&&(r=o),0===n)return t/e;var a=p(i,"front",n,r).rgb;return t*a.width/(e*a.height)}(e.videoWidth,e.videoHeight,i.orientation,i.alphaScale,i.alphaAlign),v=s||e.videoWidth,f=l||e.videoHeight,y=void 0;if("width"===i.autoResize||"height"===i.autoResize)y=i.autoResize;else y=c>=v/f?"width":"height";h="width"===y?v:Math.round(f*c),u="width"===y?Math.round(v/c):f}var g=u*a;n&&h&&u&&(h*a!==this.canvasWidth||g!==this.canvasHeight)?(!function(t,e,i){var n=d();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(n,h,u),this.canvasWidth=n.width,this.canvasHeight=n.height,this.onCanvasResized()):this.renderVideoDirectly&&(e.style.width=h?"".concat(h,"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}(),m=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=p(t,e,i,n),s=a.rgb,l=a.alpha,h=v(s),d=v(l),u=[];return r.forEach((function(t,e){e%2==0&&(u=u.concat(r.slice(e,e+2)).concat(h.slice(e,e+2)).concat(d.slice(e,e+2)))})),new Float32Array(u)}(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&&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))},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}(g),R=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&&y(n)&&r&&a&&s&&l){var d=p(h.orientation,h.side,h.alphaScale,h.alphaAlign),u=d.rgb,c=d.alpha;e.drawImage(n,u.x*r,u.y*a,u.width*r,u.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)}},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}(g),b=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}(g),w=["crossOrigin"],E=function(){function t(t){this.render=null,this.config=null,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,this.transitionGeneration=0,this.config=c(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=d(),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 m(t,a,s):new R(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,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(t){if(void 0===t&&(t="use the player"),!this.config)throw h(t);if(!this.render)throw function(t){return new s("PLAYER_NOT_INITIALIZED",t,"cannot ".concat(t," because the renderer was not initialized. Check onInitError for the initialization failure."))}(t);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")).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 h("updateConfig");var e=this.config,i=Object.assign({},t);void 0===i.src&&delete i.src;var n=c(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").updateConfig(this.rendererUpdates(n)),void(r&&this.getRenderer("play").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").updateConfig(a),this.outgoingRender&&e.src!==n.src){var s=++this.transitionGeneration;this.activateTransition(this.getRenderer("updateConfig"),s,this.transitionWasPlaying)}}else this.startTransition(n,e)},t.prototype.pause=function(){var t;this.getRenderer("pause").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").reset()},t.prototype.setSrc=function(t){if(this.getRenderer("setSrc").setSrc(t),this.config&&(this.config.src=t),this.outgoingRender){var e=++this.transitionGeneration;this.activateTransition(this.getRenderer("setSrc"),e,this.transitionWasPlaying)}},t.prototype.setCurrentTime=function(t){this.getRenderer("setCurrentTime").setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer("setMute").setMute(t),this.config&&(this.config.muted=t)},t.prototype.setLoop=function(t){this.getRenderer("setLoop").setLoop(t),this.config&&(this.config.loop=t)},t.prototype.setPlaybackRate=function(t){this.getRenderer("setPlaybackRate").setPlaybackRate(t),this.config&&(this.config.playbackRate=t)},t}();export{s as AlphaVideoPlayerError,E as default,l as isAlphaVideoPlayerError};
|
package/dist/react.d.ts
CHANGED
|
@@ -44,18 +44,42 @@ interface IConfig {
|
|
|
44
44
|
onError?: (e: unknown) => void;
|
|
45
45
|
onDestroy?: () => void;
|
|
46
46
|
}
|
|
47
|
-
|
|
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
|
|
|
55
|
+
type IAlphaVideoPlayerErrorCode = 'PLAYER_DESTROYED' | 'PLAYER_NOT_INITIALIZED' | 'VIDEO_SOURCE_MISSING';
|
|
56
|
+
declare class AlphaVideoPlayerError extends Error {
|
|
57
|
+
readonly code: IAlphaVideoPlayerErrorCode;
|
|
58
|
+
readonly action: string;
|
|
59
|
+
constructor(code: IAlphaVideoPlayerErrorCode, action: string, message: string);
|
|
60
|
+
}
|
|
61
|
+
declare const isAlphaVideoPlayerError: (error: unknown) => error is AlphaVideoPlayerError;
|
|
62
|
+
|
|
52
63
|
declare class Render {
|
|
53
64
|
private render;
|
|
65
|
+
private config;
|
|
66
|
+
private outgoingRender;
|
|
67
|
+
private outgoingConfig;
|
|
68
|
+
private transitionWasPlaying;
|
|
69
|
+
private transitionGeneration;
|
|
54
70
|
constructor(config: IConfig);
|
|
71
|
+
private createRenderer;
|
|
72
|
+
private rendererUpdates;
|
|
73
|
+
private finishTransition;
|
|
74
|
+
private rollbackTransition;
|
|
75
|
+
private cancelTransition;
|
|
76
|
+
private activateTransition;
|
|
77
|
+
private startTransition;
|
|
55
78
|
private getRenderer;
|
|
56
79
|
get playing(): boolean;
|
|
57
80
|
get loop(): boolean;
|
|
58
81
|
play(config?: IOptionalConfig): Promise<void>;
|
|
82
|
+
updateConfig(config: IUpdateConfig): void;
|
|
59
83
|
pause(): void;
|
|
60
84
|
destroy(): void;
|
|
61
85
|
reset(): void;
|
|
@@ -73,6 +97,7 @@ type IAlphaVideoPlayer = InstanceType<typeof Render>;
|
|
|
73
97
|
*/
|
|
74
98
|
type IAlphaVideoPlayerRef = {
|
|
75
99
|
play: () => Promise<void> | undefined;
|
|
100
|
+
updateConfig: (config: IUpdateConfig) => void;
|
|
76
101
|
pause: () => void;
|
|
77
102
|
destroy: () => void;
|
|
78
103
|
reset: () => void;
|
|
@@ -119,4 +144,4 @@ interface IAlphaVideoPlayerProps {
|
|
|
119
144
|
}
|
|
120
145
|
declare const AlphaVideoPlayer: React.ForwardRefExoticComponent<IAlphaVideoPlayerProps & React.RefAttributes<IAlphaVideoPlayerRef>>;
|
|
121
146
|
|
|
122
|
-
export { type IAlphaVideoPlayerProps, type IAlphaVideoPlayerRef, AlphaVideoPlayer as default };
|
|
147
|
+
export { AlphaVideoPlayerError, type IAlphaVideoPlayerErrorCode, type IAlphaVideoPlayerProps, type IAlphaVideoPlayerRef, type IUpdateConfig, AlphaVideoPlayer as default, isAlphaVideoPlayerError };
|
package/dist/react.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{forwardRef as e,useRef as n,useEffect as i,useImperativeHandle as r}from"react";var o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},o(t,e)};function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function l(t,e,n,i){return new(n||(n=Promise))((function(r,o){function a(t){try{s(i.next(t))}catch(t){o(t)}}function l(t){try{s(i.throw(t))}catch(t){o(t)}}function s(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,l)}s((i=i.apply(t,e||[])).next())}))}function s(t,e){var n,i,r,o,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return o={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function l(l){return function(s){return function(l){if(n)throw new TypeError("Generator is already executing.");for(;o&&(o=0,l[0]&&(a=0)),a;)try{if(n=1,i&&(r=2&l[0]?i.return:l[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,l[1])).done)return r;switch(i=0,r&&(l=[2&l[0],r.value]),l[0]){case 0:case 1:r=l;break;case 4:return a.label++,{value:l[1],done:!1};case 5:a.label++,i=l[1],l=[0];continue;case 7:l=a.ops.pop(),a.trys.pop();continue;default:if(!(r=a.trys,(r=r.length>0&&r[r.length-1])||6!==l[0]&&2!==l[0])){a=0;continue}if(3===l[0]&&(!r||l[1]>r[0]&&l[1]<r[3])){a.label=l[1];break}if(6===l[0]&&a.label<r[1]){a.label=r[1],r=l;break}if(r&&a.label<r[2]){a.label=r[2],a.ops.push(l);break}r[2]&&a.ops.pop(),a.trys.pop();continue}l=e.call(t,a)}catch(t){l=[6,t],i=0}finally{n=r=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,s])}}}"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,n,i){void 0===n&&(n=1),void 0===i&&(i=d);var r=c(n);if("landscape"===t){var o=1/(1+r),a=r/(1+r);return{rgb:{x:"front"===e?0:a,y:0,width:o,height:1},alpha:{x:"front"===e?o:0,y:"start"===i?0:1-r,width:a,height:r}}}var l=1/(1+r),s=r/(1+r);return{rgb:{x:0,y:"front"===e?0:s,width:1,height:l},alpha:{x:"start"===i?0:1-r,y:"front"===e?l:0,width:r,height:s}}},v=function(t){var e=t.x,n=t.y,i=t.width,r=t.height;return[e,1-n,e+i,1-n,e,1-n-r,e+i,1-n-r]},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,n){if(void 0===e&&(e=!1),void 0===n&&(n=null),this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=null,this.animationGeneration=0,this.playRequestId=0,this.destroyed=!1,this.onCanPlayTimes=1,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=n,n){var i=this.canvas,r=i.width,o=i.height;this.canvasWidth=r,this.canvasHeight=o}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.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,n=t.poster,i=t.playbackRate,r=t.muted,o=t.loop,a=t.crossOrigin,l=this.video=document.createElement("video");if(l.crossOrigin=null!=a?a:"anonymous",l.poster=n||"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",l.src=e,l.autoplay=!1,l.preload="auto",l.playbackRate=i,l.loop=o,l.muted=r,r&&l.setAttribute("muted",""),l.setAttribute("playsinline",""),l.setAttribute("webkit-playsinline",""),l.setAttribute("x-webkit-airplay",""),this.renderVideoDirectly){var s=this.config.width||this.container.offsetWidth,d=this.config.height||this.container.offsetHeight;l.style.display="block",l.style.width=s?"".concat(s,"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.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this;if(!this.destroyed&&this.playing&&null===this.animationId){var e=this.animationGeneration,n=this.initAdaptAnimation(),i=n.request,r=n.cancel;this.cancelAnimation=r;var o,a=this.config.fps>0?1e3/this.config.fps:0,l=function(){return!t.destroyed&&t.playing&&e===t.animationGeneration&&t.video&&!t.video.paused&&!t.video.ended},s=function(e){if(l()){t.animationId=null;try{(void 0===e||void 0===o||e-o>=a)&&(t.drawFrameOnce(),o=void 0!==o&&void 0!==e&&a?e-(e-o)%a:e)}catch(e){return void t.onError(e)}l()&&(t.animationId=i(s))}};s()}},t.prototype.initAdaptAnimation=function(){var t=this.config,e=t.videoFrame,n=t.fps,i=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}(),r=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}(),o=this.video;if(e&&o.requestVideoFrameCallback&&o.cancelVideoFrameCallback)return{request:function(t){return o.requestVideoFrameCallback(t)},cancel:function(t){return o.cancelVideoFrameCallback(t)}};if(i&&r)return{request:function(t){return i.call(window,t)},cancel:function(t){return r.call(window,t)}};var a=n>0?1e3/n: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,n;return l(this,void 0,void 0,(function(){var i,r,o,a;return s(this,(function(l){switch(l.label){case 0:p(this.video),t&&this.setConfig(t),i=this.video,r=++this.playRequestId,l.label=1;case 1:return l.trys.push([1,3,,4]),[4,i.play()];case 2:return o=l.sent(),this.destroyed||r!==this.playRequestId||i!==this.video||i.paused||i.ended?[2,o]:(this.cancelDrawFrame(),this.playing=!0,this.renderVideoDirectly?this.setNativeVideoVisible(!0):this.drawFrame(),[2,o]);case 3:a=l.sent();try{this.destroyed||r!==this.playRequestId||null===(n=null===(e=this.config)||void 0===e?void 0:e.onError)||void 0===n||n.call(e,a)}finally{throw a}case 4:return[2]}}))}))},t.prototype.pause=function(){p(this.video),this.playRequestId++,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.cancelDrawFrame(),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,n=this,i=n.video,r=n.config,o=n.canvas;if(this.videoWidth=i.videoWidth,this.videoHeight=i.videoHeight,r.autoResize&&(o||this.renderVideoDirectly)&&i.videoWidth>0&&i.videoHeight>0){var a=u(),l=function(t,e,n,i,r){if(void 0===i&&(i=1),void 0===r&&(r=d),0===i)return t/e;var o=h(n,"front",i,r).rgb;return t*o.width/(e*o.height)}(i.videoWidth,i.videoHeight,r.orientation,r.alphaScale,r.alphaAlign),s=o?o.width/a:r.width||(null===(t=this.container)||void 0===t?void 0:t.offsetWidth)||i.videoWidth,c=o?o.height/a:r.height||(null===(e=this.container)||void 0===e?void 0:e.offsetHeight)||i.videoHeight,v=void 0;if("width"===r.autoResize||"height"===r.autoResize)v=r.autoResize;else v=l>=s/c?"width":"height";var p="width"===v?s:Math.round(c*l),f="width"===v?Math.round(s/l):c,y=f*a;!o||p*a===this.canvasWidth&&y===this.canvasHeight?this.renderVideoDirectly&&(i.style.width="".concat(p,"px"),i.style.height="".concat(f,"px")):(!function(t,e,n){var i=u();t.width=e*i,t.height=n*i,t.style.width=e+"px",t.style.height=n+"px"}(o,p,f),this.canvasWidth=o.width,this.canvasHeight=o.height,this.onCanvasResized())}r.onLoad&&r.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0;try{this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!0):t.autoShow&&this.drawFrameOnce()}catch(t){return void this.onError(t)}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,e,n=this.config;(null===(t=this.video)||void 0===t?void 0:t.paused)&&(this.playRequestId++,this.cancelDrawFrame()),null===(e=null==n?void 0:n.onPause)||void 0===e||e.call(n)},t.prototype.onEnded=function(){var t,e=this.config,n=this.video;this.playRequestId++,n.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,n,i=this.config,r=this.video;if(i&&!this.destroyed){i.debug&&console.error(null!==(e=null==r?void 0:r.error)&&void 0!==e?e:t);try{null===(n=i.onError)||void 0===n||n.call(i,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++;var n,i=this,r=i.config,o=i.video,a=i.canvas,l=function(t){try{t()}catch(t){null!=n||(n=t)}};l((function(){return e.cancelDrawFrame()})),l((function(){return e.removeEvent()})),l((function(){o&&(o.pause(),o.removeAttribute("src"),o.load())})),l((function(){var t;return null===(t=null==o?void 0:o.parentNode)||void 0===t?void 0:t.removeChild(o)})),l((function(){return e.releaseRenderResources()})),l((function(){var t;return null===(t=null==a?void 0:a.parentNode)||void 0===t?void 0:t.removeChild(a)})),l((function(){a&&(a.width=a.height=0)})),this.config=null,this.container=null,this.video=null,this.canvas=null,this.canPlay=!1,t&&l((function(){var t;return null===(t=null==r?void 0:r.onDestroy)||void 0===t?void 0:t.call(r)})),n&&(null==r?void 0:r.debug)&&console.error("[alpha-video-player-js] destroy error:",n)}},t.prototype.releaseRenderResources=function(){},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,n=t.onCanplay,i=t.onPlay,r=t.onPause,o=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=n.bind(this),this.onPlay=i.bind(this),this.onPause=r.bind(this),this.onEnded=o.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,n=t.onLoad,i=t.onCanplay,r=t.onPlay,o=t.onPause,a=t.onEnded,l=t.onError;e.addEventListener("loadedmetadata",n),e.addEventListener("canplaythrough",i),e.addEventListener("play",r),e.addEventListener("pause",o),e.addEventListener("ended",a),e.addEventListener("error",l)},t.prototype.removeEvent=function(){var t=this,e=t.video,n=t.onLoad,i=t.onCanplay,r=t.onPlay,o=t.onPause,a=t.onEnded,l=t.onError;e&&(e.removeEventListener("loadedmetadata",n),e.removeEventListener("play",r),e.removeEventListener("canplaythrough",i),e.removeEventListener("pause",o),e.removeEventListener("ended",a),e.removeEventListener("error",l))},t}(),m=function(t){function e(e,n,i){var r=t.call(this,e,!1,n)||this;r.onContextLost=function(t){return r.onError(t)},r.gl=i;try{r.initWebGLRender(),n.addEventListener("webglcontextlost",r.onContextLost)}catch(t){throw r.destroy(!1),t}return r}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 n=this.gl,i=n.createShader(t);if(!i)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL shader.");if(t===n.VERTEX_SHADER?this.vertexShader=i:this.fragmentShader=i,n.shaderSource(i,e),n.compileShader(i),!n.getShaderParameter(i,n.COMPILE_STATUS))throw new Error("[alpha-video-player-js]: WebGL shader compilation failed: ".concat(n.getShaderInfoLog(i)||""));return i},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,n=t.program,i=t.config,r=function(t,e,n,i){void 0===n&&(n=1),void 0===i&&(i=d);var r=[-1,1,1,1,-1,-1,1,-1],o=h(t,e,n,i),a=o.rgb,l=o.alpha,s=v(a),u=v(l),c=[];return r.forEach((function(t,e){e%2==0&&(c=c.concat(r.slice(e,e+2)).concat(s.slice(e,e+2)).concat(u.slice(e,e+2)))})),new Float32Array(c)}(i.orientation,i.side,i.alphaScale,i.alphaAlign),o=e.createBuffer();if(!o)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL buffer.");this.vertexBuffer=o,e.bindBuffer(e.ARRAY_BUFFER,o),e.bufferData(e.ARRAY_BUFFER,r,e.STATIC_DRAW);var a=r.BYTES_PER_ELEMENT,l=e.getAttribLocation(n,"a_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6*a,0),e.enableVertexAttribArray(l);var s=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(s,2,e.FLOAT,!1,6*a,2*a),e.enableVertexAttribArray(s);var u=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(u);var c=e.getUniformLocation(n,"u_Sampler");return e.uniform1i(c,0),o},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&&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.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,n=this,i=n.canvas,r=n.gl,o=n.vertexShader,a=n.fragmentShader,l=n.texture,s=n.vertexBuffer,d=n.program,u=function(e){try{e()}catch(e){null!=t||(t=e)}};if(u((function(){return null==i?void 0:i.removeEventListener("webglcontextlost",e.onContextLost)})),r&&(d&&o&&u((function(){return r.detachShader(d,o)})),d&&a&&u((function(){return r.detachShader(d,a)})),o&&u((function(){return r.deleteShader(o)})),a&&u((function(){return r.deleteShader(a)})),l&&u((function(){return r.deleteTexture(l)})),s&&u((function(){return r.deleteBuffer(s)})),d&&u((function(){return r.deleteProgram(d)})),u((function(){var t;return null===(t=r.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}(g),w=function(t){function e(e,n){var i=t.call(this,e,!1,n)||this;try{i.initCanvasRender()}catch(t){throw i.destroy(!1),t}return i}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,n=t.alphaContext2d,i=t.video,r=t.canPlay,o=t.videoWidth,a=t.videoHeight,l=t.canvasWidth,s=t.canvasHeight,d=t.config;if(e&&n&&i&&r&&f(i)&&o&&a&&l&&s){var u=h(d.orientation,d.side,d.alphaScale,d.alphaAlign),c=u.rgb,v=u.alpha;e.drawImage(i,c.x*o,c.y*a,c.width*o,c.height*a,0,0,l,s);var p=e.getImageData(0,0,l,s),y=p.data;n.drawImage(i,v.x*o,v.y*a,v.width*o,v.height*a,0,0,l,s);for(var g=n.getImageData(0,0,l,s).data,m=3;m<y.length;m+=4)y[m]=g[m-3];e.putImageData(p,0,0)}},e.prototype.onEnded=function(){var e=this,n=e.context2d,i=e.canvasWidth,r=e.canvasHeight;e.config.autoClear&&n.clearRect(0,0,i,r),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}(g),b=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}(g),E=function(){function t(t){var e,n,i,r;this.render=null;var o=c(t.alphaScale),a=Object.assign({},t,{alphaScale:o}),l=null,s=null;try{if(!t.container)throw new Error("[alpha-video-player-js]: container can not be empty!");0===o?this.render=new b(a):(s=(l=function(t,e,n){var i=t.offsetWidth,r=t.offsetHeight,o=u(),a=e||i,l=n||r;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 s=document.createElement("canvas");return s.width=a*o,s.height=l*o,s.style.width="100%",s.style.height="100%",s.style.pointerEvents="none",t.appendChild(s),s}(t.container,t.width,t.height)).getContext("webgl")||l.getContext("experimental-webgl"),this.render=s?new m(a,l,s):new w(a,l)),null===(e=t.onInitSuccess)||void 0===e||e.call(t)}catch(e){if(null===(n=this.render)||void 0===n||n.destroy(!1),s&&!s.isContextLost()&&(null===(i=s.getExtension("WEBGL_lose_context"))||void 0===i||i.loseContext()),l&&(null===(r=l.parentNode)||void 0===r||r.removeChild(l),l.width=l.height=0),!t.onInitError)throw e;return void t.onInitError(e)}}return 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(){return s(this,(function(e){return[2,this.getRenderer().play(t)]}))}))},t.prototype.pause=function(){this.getRenderer().pause()},t.prototype.destroy=function(){var t;null===(t=this.render)||void 0===t||t.destroy(),this.render=null},t.prototype.reset=function(){this.getRenderer().reset()},t.prototype.setSrc=function(t){this.getRenderer().setSrc(t)},t.prototype.setCurrentTime=function(t){this.getRenderer().setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer().setMute(t)},t.prototype.setLoop=function(t){this.getRenderer().setLoop(t)},t.prototype.setPlaybackRate=function(t){this.getRenderer().setPlaybackRate(t)},t}(),A=e((function(e,o){var a=n(null),l=n(null),s=n(e);return s.current=e,i((function(){var t,e,n,i,r,o,u;if(a.current){var c=s.current;return l.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!==(n=c.playbackRate)&&void 0!==n?n:1,fps:c.fps,orientation:null!==(i=c.orientation)&&void 0!==i?i:"landscape",side:null!==(r=c.side)&&void 0!==r?r:"front",alphaScale:null!==(o=c.alphaScale)&&void 0!==o?o: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=s.current).onInitSuccess)||void 0===e?void 0:e.call(t)},onInitError:function(t){var e,n;return null===(n=(e=s.current).onInitError)||void 0===n?void 0:n.call(e,t)},onLoad:function(){var t,e;return null===(e=(t=s.current).onLoad)||void 0===e?void 0:e.call(t)},onCanPlay:function(){var t,e;return null===(e=(t=s.current).onCanPlay)||void 0===e?void 0:e.call(t)},onPlay:function(){var t,e;return null===(e=(t=s.current).onPlay)||void 0===e?void 0:e.call(t)},onLoop:function(){var t,e;return null===(e=(t=s.current).onLoop)||void 0===e?void 0:e.call(t)},onPause:function(){var t,e;return null===(e=(t=s.current).onPause)||void 0===e?void 0:e.call(t)},onEnded:function(){var t,e;return null===(e=(t=s.current).onEnded)||void 0===e?void 0:e.call(t)},onError:function(t){var e,n;return null===(n=(e=s.current).onError)||void 0===n?void 0:n.call(e,t)},onDestroy:function(){var t,e;return null===(e=(t=s.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}}}),[]),i((function(){var t;null!=e.src&&(null===(t=l.current)||void 0===t||t.setSrc(e.src))}),[e.src]),i((function(){var t,n;null===(t=l.current)||void 0===t||t.setMute(null===(n=e.muted)||void 0===n||n)}),[e.muted]),i((function(){var t,n;null===(t=l.current)||void 0===t||t.setLoop(null!==(n=e.loop)&&void 0!==n&&n)}),[e.loop]),i((function(){var t,n;null===(t=l.current)||void 0===t||t.setPlaybackRate(null!==(n=e.playbackRate)&&void 0!==n?n:1)}),[e.playbackRate]),r(o,(function(){return{play:function(){var t;return null===(t=l.current)||void 0===t?void 0:t.play()},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})}));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(t){function e(i,n,o){var r=t.call(this,"[alpha-video-player-js]: ".concat(o))||this;return r.name="AlphaVideoPlayerError",r.code=i,r.action=n,Object.setPrototypeOf(r,e.prototype),r}return a(e,t),e}(Error),p=function(t){return t instanceof v||!!t&&"object"==typeof t&&"AlphaVideoPlayerError"===t.name&&"string"==typeof t.code},f=function(t){return new v("PLAYER_DESTROYED",t,"cannot ".concat(t," because this player has been destroyed. Create a new player instance before calling ").concat(t,"()."))},y=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},g=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},m=function(t,e){var i,n,o,r,a,s,l,u,c,v,p,f,y,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=g(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!==(p=m.autoResize)&&void 0!==p?p:h.autoResize,m.debug=null!==(f=m.debug)&&void 0!==f?f:h.debug,m.videoFrame=null!==(y=m.videoFrame)&&void 0!==y?y:h.videoFrame,m},R=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=d);var o=g(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}}},b=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]},w=function(t,e,i){if(void 0===i&&(i=!1),i)throw f(e);if(!t)throw function(t){return new v("VIDEO_SOURCE_MISSING",t,"cannot ".concat(t," because no video source has been set. Provide src, call setSrc(src), or call updateConfig({ src }) first."))}(e)},E=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},A=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=m(t,this.config))},t.prototype.updateConfig=function(t){var e=this;if(this.destroyed||!this.config)throw f("updateConfig");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:w(this.video,"play",this.destroyed),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(){w(this.video,"pause",this.destroyed),this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.video.pause()},t.prototype.reset=function(){w(this.video,"reset",this.destroyed),this.video.currentTime=0},t.prototype.setSrc=function(t){if(this.destroyed)throw f("setSrc");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){w(this.video,"setCurrentTime",this.destroyed),this.video.currentTime=t},t.prototype.setMute=function(t){w(this.video,"setMute",this.destroyed),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){w(this.video,"setLoop",this.destroyed),this.video.loop=t},t.prototype.setPlaybackRate=function(t){w(this.video,"setPlaybackRate",this.destroyed),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=y(),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=R(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,v=s||e.videoHeight,p=void 0;if("width"===i.autoResize||"height"===i.autoResize)p=i.autoResize;else p=h>=c/v?"width":"height";l="width"===p?c:Math.round(v*h),u="width"===p?Math.round(c/h):v}var f=u*r;n&&l&&u&&(l*r!==this.canvasWidth||f!==this.canvasHeight)?(!function(t,e,i){var n=y();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}(),C=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=R(t,e,i,n),a=r.rgb,s=r.alpha,l=b(a),u=b(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&&E(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}(A),P=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&&E(n)&&r&&a&&s&&l){var d=R(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,y=3;y<p.length;y+=4)p[y]=f[y-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}(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}(A),S=["crossOrigin"],x=function(){function t(t){this.render=null,this.config=null,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,this.transitionGeneration=0,this.config=m(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 _(t):(s=(a=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=y(),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 C(t,a,s):new P(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(t){if(void 0===t&&(t="use the player"),!this.config)throw f(t);if(!this.render)throw function(t){return new v("PLAYER_NOT_INITIALIZED",t,"cannot ".concat(t," because the renderer was not initialized. Check onInitError for the initialization failure."))}(t);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")).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 f("updateConfig");var e=this.config,i=Object.assign({},t);void 0===i.src&&delete i.src;var n=m(Object.assign({},i,{container:e.container}),e),o=function(t){return 0===t.alphaScale!=(0===n.alphaScale)||0===t.alphaScale&&t.src!==n.src||S.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").updateConfig(this.rendererUpdates(n)),void(r&&this.getRenderer("play").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").updateConfig(a),this.outgoingRender&&e.src!==n.src){var s=++this.transitionGeneration;this.activateTransition(this.getRenderer("updateConfig"),s,this.transitionWasPlaying)}}else this.startTransition(n,e)},t.prototype.pause=function(){var t;this.getRenderer("pause").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").reset()},t.prototype.setSrc=function(t){if(this.getRenderer("setSrc").setSrc(t),this.config&&(this.config.src=t),this.outgoingRender){var e=++this.transitionGeneration;this.activateTransition(this.getRenderer("setSrc"),e,this.transitionWasPlaying)}},t.prototype.setCurrentTime=function(t){this.getRenderer("setCurrentTime").setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer("setMute").setMute(t),this.config&&(this.config.muted=t)},t.prototype.setLoop=function(t){this.getRenderer("setLoop").setLoop(t),this.config&&(this.config.loop=t)},t.prototype.setPlaybackRate=function(t){this.getRenderer("setPlaybackRate").setPlaybackRate(t),this.config&&(this.config.playbackRate=t)},t}(),T=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 x({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})}));T.displayName="AlphaVideoPlayer";export{v as AlphaVideoPlayerError,T as default,p as isAlphaVideoPlayerError};
|
package/dist/vue2.d.ts
CHANGED
|
@@ -44,18 +44,42 @@ interface IConfig {
|
|
|
44
44
|
onError?: (e: unknown) => void;
|
|
45
45
|
onDestroy?: () => void;
|
|
46
46
|
}
|
|
47
|
-
|
|
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
|
|
|
55
|
+
type IAlphaVideoPlayerErrorCode = 'PLAYER_DESTROYED' | 'PLAYER_NOT_INITIALIZED' | 'VIDEO_SOURCE_MISSING';
|
|
56
|
+
declare class AlphaVideoPlayerError extends Error {
|
|
57
|
+
readonly code: IAlphaVideoPlayerErrorCode;
|
|
58
|
+
readonly action: string;
|
|
59
|
+
constructor(code: IAlphaVideoPlayerErrorCode, action: string, message: string);
|
|
60
|
+
}
|
|
61
|
+
declare const isAlphaVideoPlayerError: (error: unknown) => error is AlphaVideoPlayerError;
|
|
62
|
+
|
|
52
63
|
declare class Render {
|
|
53
64
|
private render;
|
|
65
|
+
private config;
|
|
66
|
+
private outgoingRender;
|
|
67
|
+
private outgoingConfig;
|
|
68
|
+
private transitionWasPlaying;
|
|
69
|
+
private transitionGeneration;
|
|
54
70
|
constructor(config: IConfig);
|
|
71
|
+
private createRenderer;
|
|
72
|
+
private rendererUpdates;
|
|
73
|
+
private finishTransition;
|
|
74
|
+
private rollbackTransition;
|
|
75
|
+
private cancelTransition;
|
|
76
|
+
private activateTransition;
|
|
77
|
+
private startTransition;
|
|
55
78
|
private getRenderer;
|
|
56
79
|
get playing(): boolean;
|
|
57
80
|
get loop(): boolean;
|
|
58
81
|
play(config?: IOptionalConfig): Promise<void>;
|
|
82
|
+
updateConfig(config: IUpdateConfig): void;
|
|
59
83
|
pause(): void;
|
|
60
84
|
destroy(): void;
|
|
61
85
|
reset(): void;
|
|
@@ -73,6 +97,7 @@ type IAlphaVideoPlayer = InstanceType<typeof Render>;
|
|
|
73
97
|
*/
|
|
74
98
|
type IAlphaVideoPlayerRef = {
|
|
75
99
|
play: () => Promise<void> | undefined;
|
|
100
|
+
updateConfig: (config: IUpdateConfig) => void;
|
|
76
101
|
pause: () => void;
|
|
77
102
|
destroy: () => void;
|
|
78
103
|
reset: () => void;
|
|
@@ -84,4 +109,4 @@ type IAlphaVideoPlayerRef = {
|
|
|
84
109
|
getPlayer: () => IAlphaVideoPlayer | null;
|
|
85
110
|
};
|
|
86
111
|
|
|
87
|
-
export { type IAlphaVideoPlayer, type IAlphaVideoPlayerRef, AlphaVideoPlayer as default };
|
|
112
|
+
export { AlphaVideoPlayerError, type IAlphaVideoPlayer, type IAlphaVideoPlayerErrorCode, type IAlphaVideoPlayerRef, type IUpdateConfig, AlphaVideoPlayer as default, isAlphaVideoPlayerError };
|
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,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.destroyed=!1,this.onCanPlayTimes=1,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.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;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 n(this,void 0,void 0,(function(){var n,r,a,s;return o(this,(function(o){switch(o.label){case 0:h(this.video),t&&this.setConfig(t),n=this.video,r=++this.playRequestId,o.label=1;case 1:return o.trys.push([1,3,,4]),[4,n.play()];case 2:return a=o.sent(),this.destroyed||r!==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=o.sent();try{this.destroyed||r!==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(){h(this.video),this.playRequestId++,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.cancelDrawFrame(),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;try{this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!0):t.autoShow&&this.drawFrameOnce()}catch(t){return void this.onError(t)}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,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++;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(){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.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}(),v=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=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();if(!a)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL buffer.");this.vertexBuffer=a,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&&!t.isContextLost()&&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.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,h=function(e){try{e()}catch(e){null!=t||(t=e)}};if(h((function(){return null==n?void 0:n.removeEventListener("webglcontextlost",e.onContextLost)})),o&&(d&&r&&h((function(){return o.detachShader(d,r)})),d&&a&&h((function(){return o.detachShader(d,a)})),r&&h((function(){return o.deleteShader(r)})),a&&h((function(){return o.deleteShader(a)})),s&&h((function(){return o.deleteTexture(s)})),l&&h((function(){return o.deleteBuffer(l)})),d&&h((function(){return o.deleteProgram(d)})),h((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}(p),f=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,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.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}(p),y=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}(p),g=function(){function t(t){var e,i,n,o;this.render=null;var r=s(t.alphaScale),l=Object.assign({},t,{alphaScale:r}),d=null,h=null;try{if(!t.container)throw new Error("[alpha-video-player-js]: container can not be empty!");0===r?this.render=new y(l):(h=(d=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}(t.container,t.width,t.height)).getContext("webgl")||d.getContext("experimental-webgl"),this.render=h?new v(l,d,h):new f(l,d)),null===(e=t.onInitSuccess)||void 0===e||e.call(t)}catch(e){if(null===(i=this.render)||void 0===i||i.destroy(!1),h&&!h.isContextLost()&&(null===(n=h.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext()),d&&(null===(o=d.parentNode)||void 0===o||o.removeChild(d),d.width=d.height=0),!t.onInitError)throw e;return void t.onInitError(e)}}return 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 n(this,void 0,void 0,(function(){return o(this,(function(e){return[2,this.getRenderer().play(t)]}))}))},t.prototype.pause=function(){this.getRenderer().pause()},t.prototype.destroy=function(){var t;null===(t=this.render)||void 0===t||t.destroy(),this.render=null},t.prototype.reset=function(){this.getRenderer().reset()},t.prototype.setSrc=function(t){this.getRenderer().setSrc(t)},t.prototype.setCurrentTime=function(t){this.getRenderer().setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer().setMute(t)},t.prototype.setLoop=function(t){this.getRenderer().setLoop(t)},t.prototype.setPlaybackRate=function(t){this.getRenderer().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(t){function e(i,n,o){var r=t.call(this,"[alpha-video-player-js]: ".concat(o))||this;return r.name="AlphaVideoPlayerError",r.code=i,r.action=n,Object.setPrototypeOf(r,e.prototype),r}return i(e,t),e}(Error),u=function(t){return t instanceof h||!!t&&"object"==typeof t&&"AlphaVideoPlayerError"===t.name&&"string"==typeof t.code},d=function(t){return new h("PLAYER_DESTROYED",t,"cannot ".concat(t," because this player has been destroyed. Create a new player instance before calling ").concat(t,"()."))},c=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,l,h,u,d,c,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=p(m.alphaScale),m.alphaAlign=null!==(u=m.alphaAlign)&&void 0!==u?u:a,m.autoShow=null!==(d=m.autoShow)&&void 0!==d?d:s.autoShow,m.autoClear=null!==(c=m.autoClear)&&void 0!==c?c: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},v=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=a);var o=p(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}}},y=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]},g=function(t,e,i){if(void 0===i&&(i=!1),i)throw d(e);if(!t)throw function(t){return new h("VIDEO_SOURCE_MISSING",t,"cannot ".concat(t," because no video source has been set. Provide src, call setSrc(src), or call updateConfig({ src }) first."))}(e)},m=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},b=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 d("updateConfig");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:g(this.video,"play",this.destroyed),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(){g(this.video,"pause",this.destroyed),this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.video.pause()},t.prototype.reset=function(){g(this.video,"reset",this.destroyed),this.video.currentTime=0},t.prototype.setSrc=function(t){if(this.destroyed)throw d("setSrc");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){g(this.video,"setCurrentTime",this.destroyed),this.video.currentTime=t},t.prototype.setMute=function(t){g(this.video,"setMute",this.destroyed),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){g(this.video,"setLoop",this.destroyed),this.video.loop=t},t.prototype.setPlaybackRate=function(t){g(this.video,"setPlaybackRate",this.destroyed),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=c(),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),h=s,u=l;if(i.autoResize&&(n||this.renderVideoDirectly)&&e.videoWidth>0&&e.videoHeight>0){var d=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=a),0===n)return t/e;var r=v(i,"front",n,o).rgb;return t*r.width/(e*r.height)}(e.videoWidth,e.videoHeight,i.orientation,i.alphaScale,i.alphaAlign),p=s||e.videoWidth,f=l||e.videoHeight,y=void 0;if("width"===i.autoResize||"height"===i.autoResize)y=i.autoResize;else y=d>=p/f?"width":"height";h="width"===y?p:Math.round(f*d),u="width"===y?Math.round(p/d):f}var g=u*r;n&&h&&u&&(h*r!==this.canvasWidth||g!==this.canvasHeight)?(!function(t,e,i){var n=c();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(n,h,u),this.canvasWidth=n.width,this.canvasHeight=n.height,this.onCanvasResized()):this.renderVideoDirectly&&(e.style.width=h?"".concat(h,"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}(),R=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=v(t,e,i,n),s=r.rgb,l=r.alpha,h=y(s),u=y(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&&m(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}(b),w=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&&m(n)&&r&&a&&s&&l){var u=v(h.orientation,h.side,h.alphaScale,h.alphaAlign),d=u.rgb,c=u.alpha;e.drawImage(n,d.x*r,d.y*a,d.width*r,d.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 y=i.getImageData(0,0,s,l).data,g=3;g<f.length;g+=4)f[g]=y[g-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}(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}(b),C=["crossOrigin"],E=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 _(t):(s=(a=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=c(),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 R(t,a,s):new w(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(t){if(void 0===t&&(t="use the player"),!this.config)throw d(t);if(!this.render)throw function(t){return new h("PLAYER_NOT_INITIALIZED",t,"cannot ".concat(t," because the renderer was not initialized. Check onInitError for the initialization failure."))}(t);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")).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 d("updateConfig");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").updateConfig(this.rendererUpdates(n)),void(r&&this.getRenderer("play").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").updateConfig(a),this.outgoingRender&&e.src!==n.src){var s=++this.transitionGeneration;this.activateTransition(this.getRenderer("updateConfig"),s,this.transitionWasPlaying)}}else this.startTransition(n,e)},t.prototype.pause=function(){var t;this.getRenderer("pause").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").reset()},t.prototype.setSrc=function(t){if(this.getRenderer("setSrc").setSrc(t),this.config&&(this.config.src=t),this.outgoingRender){var e=++this.transitionGeneration;this.activateTransition(this.getRenderer("setSrc"),e,this.transitionWasPlaying)}},t.prototype.setCurrentTime=function(t){this.getRenderer("setCurrentTime").setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer("setMute").setMute(t),this.config&&(this.config.muted=t)},t.prototype.setLoop=function(t){this.getRenderer("setLoop").setLoop(t),this.config&&(this.config.loop=t)},t.prototype.setPlaybackRate=function(t){this.getRenderer("setPlaybackRate").setPlaybackRate(t),this.config&&(this.config.playbackRate=t)},t}(),A=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 E({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{h as AlphaVideoPlayerError,A as default,u as isAlphaVideoPlayerError};
|
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
|
-
|
|
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';
|
|
@@ -129,7 +132,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
129
132
|
};
|
|
130
133
|
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
131
134
|
[key: string]: any;
|
|
132
|
-
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("loop" | "
|
|
135
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("loop" | "play" | "pause" | "ended" | "error" | "load" | "canPlay" | "initSuccess" | "initError" | "destroy")[], "loop" | "play" | "pause" | "ended" | "error" | "load" | "canPlay" | "initSuccess" | "initError" | "destroy", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
133
136
|
src: {
|
|
134
137
|
type: StringConstructor;
|
|
135
138
|
default: any;
|
|
@@ -239,13 +242,34 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
239
242
|
autoResize: false | "width" | "height" | "contain";
|
|
240
243
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
241
244
|
|
|
245
|
+
type IAlphaVideoPlayerErrorCode = 'PLAYER_DESTROYED' | 'PLAYER_NOT_INITIALIZED' | 'VIDEO_SOURCE_MISSING';
|
|
246
|
+
declare class AlphaVideoPlayerError extends Error {
|
|
247
|
+
readonly code: IAlphaVideoPlayerErrorCode;
|
|
248
|
+
readonly action: string;
|
|
249
|
+
constructor(code: IAlphaVideoPlayerErrorCode, action: string, message: string);
|
|
250
|
+
}
|
|
251
|
+
declare const isAlphaVideoPlayerError: (error: unknown) => error is AlphaVideoPlayerError;
|
|
252
|
+
|
|
242
253
|
declare class Render {
|
|
243
254
|
private render;
|
|
255
|
+
private config;
|
|
256
|
+
private outgoingRender;
|
|
257
|
+
private outgoingConfig;
|
|
258
|
+
private transitionWasPlaying;
|
|
259
|
+
private transitionGeneration;
|
|
244
260
|
constructor(config: IConfig);
|
|
261
|
+
private createRenderer;
|
|
262
|
+
private rendererUpdates;
|
|
263
|
+
private finishTransition;
|
|
264
|
+
private rollbackTransition;
|
|
265
|
+
private cancelTransition;
|
|
266
|
+
private activateTransition;
|
|
267
|
+
private startTransition;
|
|
245
268
|
private getRenderer;
|
|
246
269
|
get playing(): boolean;
|
|
247
270
|
get loop(): boolean;
|
|
248
271
|
play(config?: IOptionalConfig): Promise<void>;
|
|
272
|
+
updateConfig(config: IUpdateConfig): void;
|
|
249
273
|
pause(): void;
|
|
250
274
|
destroy(): void;
|
|
251
275
|
reset(): void;
|
|
@@ -263,6 +287,7 @@ type IAlphaVideoPlayer = InstanceType<typeof Render>;
|
|
|
263
287
|
*/
|
|
264
288
|
type IAlphaVideoPlayerRef = {
|
|
265
289
|
play: () => Promise<void> | undefined;
|
|
290
|
+
updateConfig: (config: IUpdateConfig) => void;
|
|
266
291
|
pause: () => void;
|
|
267
292
|
destroy: () => void;
|
|
268
293
|
reset: () => void;
|
|
@@ -274,4 +299,4 @@ type IAlphaVideoPlayerRef = {
|
|
|
274
299
|
getPlayer: () => IAlphaVideoPlayer | null;
|
|
275
300
|
};
|
|
276
301
|
|
|
277
|
-
export { type IAlphaVideoPlayer, type IAlphaVideoPlayerRef, _default as default };
|
|
302
|
+
export { AlphaVideoPlayerError, type IAlphaVideoPlayer, type IAlphaVideoPlayerErrorCode, type IAlphaVideoPlayerRef, type IUpdateConfig, _default as default, isAlphaVideoPlayerError };
|
package/dist/vue3.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as t,ref as e,watch as n,onMounted as i,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 n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},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 n(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function l(t,e,n,i){return new(n||(n=Promise))((function(o,r){function a(t){try{l(i.next(t))}catch(t){r(t)}}function s(t){try{l(i.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}l((i=i.apply(t,e||[])).next())}))}function d(t,e){var n,i,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(n)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(n=1,i&&(o=2&s[0]?i.return:s[0]?i.throw||((o=i.return)&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;switch(i=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++,i=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],i=0}finally{n=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,n,i){void 0===n&&(n=1),void 0===i&&(i=u);var o=c(n);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"===i?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"===i?0:1-o,y:"front"===e?s:0,width:o,height:l}}},v=function(t){var e=t.x,n=t.y,i=t.width,o=t.height;return[e,1-n,e+i,1-n,e,1-n-o,e+i,1-n-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,n){if(void 0===e&&(e=!1),void 0===n&&(n=null),this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=null,this.animationGeneration=0,this.playRequestId=0,this.destroyed=!1,this.onCanPlayTimes=1,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=n,n){var i=this.canvas,o=i.width,r=i.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.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,n=t.poster,i=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=n||"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",s.src=e,s.autoplay=!1,s.preload="auto",s.playbackRate=i,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;if(!this.destroyed&&this.playing&&null===this.animationId){var e=this.animationGeneration,n=this.initAdaptAnimation(),i=n.request,o=n.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=i(l))}};l()}},t.prototype.initAdaptAnimation=function(){var t=this.config,e=t.videoFrame,n=t.fps,i=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(i&&o)return{request:function(t){return i.call(window,t)},cancel:function(t){return o.call(window,t)}};var a=n>0?1e3/n: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,n;return l(this,void 0,void 0,(function(){var i,o,r,a;return d(this,(function(s){switch(s.label){case 0:f(this.video),t&&this.setConfig(t),i=this.video,o=++this.playRequestId,s.label=1;case 1:return s.trys.push([1,3,,4]),[4,i.play()];case 2:return r=s.sent(),this.destroyed||o!==this.playRequestId||i!==this.video||i.paused||i.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===(n=null===(e=this.config)||void 0===e?void 0:e.onError)||void 0===n||n.call(e,a)}finally{throw a}case 4:return[2]}}))}))},t.prototype.pause=function(){f(this.video),this.playRequestId++,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.cancelDrawFrame(),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,n=this,i=n.video,o=n.config,r=n.canvas;if(this.videoWidth=i.videoWidth,this.videoHeight=i.videoHeight,o.autoResize&&(r||this.renderVideoDirectly)&&i.videoWidth>0&&i.videoHeight>0){var a=h(),s=function(t,e,n,i,o){if(void 0===i&&(i=1),void 0===o&&(o=u),0===i)return t/e;var r=p(n,"front",i,o).rgb;return t*r.width/(e*r.height)}(i.videoWidth,i.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)||i.videoWidth,d=r?r.height/a:o.height||(null===(e=this.container)||void 0===e?void 0:e.offsetHeight)||i.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&&(i.style.width="".concat(v,"px"),i.style.height="".concat(f,"px")):(!function(t,e,n){var i=h();t.width=e*i,t.height=n*i,t.style.width=e+"px",t.style.height=n+"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;try{this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!0):t.autoShow&&this.drawFrameOnce()}catch(t){return void this.onError(t)}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,e,n=this.config;(null===(t=this.video)||void 0===t?void 0:t.paused)&&(this.playRequestId++,this.cancelDrawFrame()),null===(e=null==n?void 0:n.onPause)||void 0===e||e.call(n)},t.prototype.onEnded=function(){var t,e=this.config,n=this.video;this.playRequestId++,n.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,n,i=this.config,o=this.video;if(i&&!this.destroyed){i.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t);try{null===(n=i.onError)||void 0===n||n.call(i,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++;var n,i=this,o=i.config,r=i.video,a=i.canvas,s=function(t){try{t()}catch(t){null!=n||(n=t)}};s((function(){return e.cancelDrawFrame()})),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.canPlay=!1,t&&s((function(){var t;return null===(t=null==o?void 0:o.onDestroy)||void 0===t?void 0:t.call(o)})),n&&(null==o?void 0:o.debug)&&console.error("[alpha-video-player-js] destroy error:",n)}},t.prototype.releaseRenderResources=function(){},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,n=t.onCanplay,i=t.onPlay,o=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=n.bind(this),this.onPlay=i.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,n=t.onLoad,i=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",n),e.addEventListener("canplaythrough",i),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,n=t.onLoad,i=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",n),e.removeEventListener("play",o),e.removeEventListener("canplaythrough",i),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),w=function(t){function e(e,n,i){var o=t.call(this,e,!1,n)||this;o.onContextLost=function(t){return o.onError(t)},o.gl=i;try{o.initWebGLRender(),n.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 n=this.gl,i=n.createShader(t);if(!i)throw new Error("[alpha-video-player-js]: Unable to allocate a WebGL shader.");if(t===n.VERTEX_SHADER?this.vertexShader=i:this.fragmentShader=i,n.shaderSource(i,e),n.compileShader(i),!n.getShaderParameter(i,n.COMPILE_STATUS))throw new Error("[alpha-video-player-js]: WebGL shader compilation failed: ".concat(n.getShaderInfoLog(i)||""));return i},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,n=t.program,i=t.config,o=function(t,e,n,i){void 0===n&&(n=1),void 0===i&&(i=u);var o=[-1,1,1,1,-1,-1,1,-1],r=p(t,e,n,i),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)}(i.orientation,i.side,i.alphaScale,i.alphaAlign),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(n,"a_Position");e.vertexAttribPointer(s,2,e.FLOAT,!1,6*a,0),e.enableVertexAttribArray(s);var l=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6*a,2*a),e.enableVertexAttribArray(l);var d=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(d);var h=e.getUniformLocation(n,"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&&!t.isContextLost()&&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.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,n=this,i=n.canvas,o=n.gl,r=n.vertexShader,a=n.fragmentShader,s=n.texture,l=n.vertexBuffer,d=n.program,u=function(e){try{e()}catch(e){null!=t||(t=e)}};if(u((function(){return null==i?void 0:i.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}(m),b=function(t){function e(e,n){var i=t.call(this,e,!1,n)||this;try{i.initCanvasRender()}catch(t){throw i.destroy(!1),t}return i}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,n=t.alphaContext2d,i=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.canvasWidth,l=t.canvasHeight,d=t.config;if(e&&n&&i&&o&&y(i)&&r&&a&&s&&l){var u=p(d.orientation,d.side,d.alphaScale,d.alphaAlign),h=u.rgb,c=u.alpha;e.drawImage(i,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;n.drawImage(i,c.x*r,c.y*a,c.width*r,c.height*a,0,0,s,l);for(var g=n.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.onEnded=function(){var e=this,n=e.context2d,i=e.canvasWidth,o=e.canvasHeight;e.config.autoClear&&n.clearRect(0,0,i,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}(m),E=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}(m),A=function(){function t(t){var e,n,i,o;this.render=null;var r=c(t.alphaScale),a=Object.assign({},t,{alphaScale:r}),s=null,l=null;try{if(!t.container)throw new Error("[alpha-video-player-js]: container can not be empty!");0===r?this.render=new E(a):(l=(s=function(t,e,n){var i=t.offsetWidth,o=t.offsetHeight,r=h(),a=e||i,s=n||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")||s.getContext("experimental-webgl"),this.render=l?new w(a,s,l):new b(a,s)),null===(e=t.onInitSuccess)||void 0===e||e.call(t)}catch(e){if(null===(n=this.render)||void 0===n||n.destroy(!1),l&&!l.isContextLost()&&(null===(i=l.getExtension("WEBGL_lose_context"))||void 0===i||i.loseContext()),s&&(null===(o=s.parentNode)||void 0===o||o.removeChild(s),s.width=s.height=0),!t.onInitError)throw e;return void t.onInitError(e)}}return 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(){return d(this,(function(e){return[2,this.getRenderer().play(t)]}))}))},t.prototype.pause=function(){this.getRenderer().pause()},t.prototype.destroy=function(){var t;null===(t=this.render)||void 0===t||t.destroy(),this.render=null},t.prototype.reset=function(){this.getRenderer().reset()},t.prototype.setSrc=function(t){this.getRenderer().setSrc(t)},t.prototype.setCurrentTime=function(t){this.getRenderer().setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer().setMute(t)},t.prototype.setLoop=function(t){this.getRenderer().setLoop(t)},t.prototype.setPlaybackRate=function(t){this.getRenderer().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 n((function(){return t.src}),(function(t){return null!=t&&(null==u?void 0:u.setSrc(t))})),n((function(){return t.muted}),(function(t){return null==u?void 0:u.setMute(t)})),n((function(){return t.loop}),(function(t){return null==u?void 0:u.setLoop(t)})),n((function(){return t.playbackRate}),(function(t){return null==u?void 0:u.setPlaybackRate(t)})),i((function(){d.value&&(h(),u=new A({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 u(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 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(t){function e(i,n,o){var r=t.call(this,"[alpha-video-player-js]: ".concat(o))||this;return r.name="AlphaVideoPlayerError",r.code=i,r.action=n,Object.setPrototypeOf(r,e.prototype),r}return s(e,t),e}(Error),v=function(t){return t instanceof f||!!t&&"object"==typeof t&&"AlphaVideoPlayerError"===t.name&&"string"==typeof t.code},y=function(t){return new f("PLAYER_DESTROYED",t,"cannot ".concat(t," because this player has been destroyed. Create a new player instance before calling ").concat(t,"()."))},g=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},m=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},b=function(t,e){var i,n,o,r,a,s,l,u,d,p,f,v,y,g=Object.assign({},c,e||{},t);return g.playbackRate=null!==(i=g.playbackRate)&&void 0!==i?i:c.playbackRate,g.muted=null!==(n=g.muted)&&void 0!==n?n:c.muted,g.loop=null!==(o=g.loop)&&void 0!==o?o:c.loop,g.fps=null!==(r=g.fps)&&void 0!==r?r:c.fps,g.orientation=null!==(a=g.orientation)&&void 0!==a?a:c.orientation,g.side=null!==(s=g.side)&&void 0!==s?s:c.side,g.alphaScale=m(g.alphaScale),g.alphaAlign=null!==(l=g.alphaAlign)&&void 0!==l?l:h,g.autoShow=null!==(u=g.autoShow)&&void 0!==u?u:c.autoShow,g.autoClear=null!==(d=g.autoClear)&&void 0!==d?d:c.autoClear,g.autoDestroy=null!==(p=g.autoDestroy)&&void 0!==p?p:c.autoDestroy,g.autoResize=null!==(f=g.autoResize)&&void 0!==f?f:c.autoResize,g.debug=null!==(v=g.debug)&&void 0!==v?v:c.debug,g.videoFrame=null!==(y=g.videoFrame)&&void 0!==y?y:c.videoFrame,g},R=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=h);var o=m(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}}},w=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]},E=function(t,e,i){if(void 0===i&&(i=!1),i)throw y(e);if(!t)throw function(t){return new f("VIDEO_SOURCE_MISSING",t,"cannot ".concat(t," because no video source has been set. Provide src, call setSrc(src), or call updateConfig({ src }) first."))}(e)},A=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},C=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=b(t,this.config))},t.prototype.updateConfig=function(t){var e=this;if(this.destroyed||!this.config)throw y("updateConfig");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,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 u(this,void 0,void 0,(function(){var n,o,r,a;return d(this,(function(s){switch(s.label){case 0:E(this.video,"play",this.destroyed),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(){E(this.video,"pause",this.destroyed),this.playRequestId++,this.sourceGeneration++,this.resumeOnReady=!1,this.cancelDrawFrame(),this.video.pause()},t.prototype.reset=function(){E(this.video,"reset",this.destroyed),this.video.currentTime=0},t.prototype.setSrc=function(t){if(this.destroyed)throw y("setSrc");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){E(this.video,"setCurrentTime",this.destroyed),this.video.currentTime=t},t.prototype.setMute=function(t){E(this.video,"setMute",this.destroyed),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){E(this.video,"setLoop",this.destroyed),this.video.loop=t},t.prototype.setPlaybackRate=function(t){E(this.video,"setPlaybackRate",this.destroyed),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=g(),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 d=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=h),0===n)return t/e;var r=R(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=d>=c/p?"width":"height";l="width"===f?c:Math.round(p*d),u="width"===f?Math.round(c/d):p}var v=u*r;n&&l&&u&&(l*r!==this.canvasWidth||v!==this.canvasHeight)?(!function(t,e,i){var n=g();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}(),S=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 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=h);var o=[-1,1,1,1,-1,-1,1,-1],r=R(t,e,i,n),a=r.rgb,s=r.alpha,l=w(a),u=w(s),d=[];return o.forEach((function(t,e){e%2==0&&(d=d.concat(o.slice(e,e+2)).concat(l.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&&A(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}(C),P=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,u=t.config;if(e&&i&&n&&o&&A(n)&&r&&a&&s&&l){var d=R(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 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}(C),_=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}(C),x=["crossOrigin"],T=function(){function t(t){this.render=null,this.config=null,this.outgoingRender=null,this.outgoingConfig=null,this.transitionWasPlaying=!1,this.transitionGeneration=0,this.config=b(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 _(t):(s=(a=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=g(),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 S(t,a,s):new P(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 u(o,void 0,void 0,(function(){var n;return d(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(t){if(void 0===t&&(t="use the player"),!this.config)throw y(t);if(!this.render)throw function(t){return new f("PLAYER_NOT_INITIALIZED",t,"cannot ".concat(t," because the renderer was not initialized. Check onInitError for the initialization failure."))}(t);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 u(this,void 0,void 0,(function(){var e,i;return d(this,(function(n){switch(n.label){case 0:return t&&this.updateConfig(t),[4,(e=this.getRenderer("play")).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 y("updateConfig");var e=this.config,i=Object.assign({},t);void 0===i.src&&delete i.src;var n=b(Object.assign({},i,{container:e.container}),e),o=function(t){return 0===t.alphaScale!=(0===n.alphaScale)||0===t.alphaScale&&t.src!==n.src||x.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").updateConfig(this.rendererUpdates(n)),void(r&&this.getRenderer("play").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").updateConfig(a),this.outgoingRender&&e.src!==n.src){var s=++this.transitionGeneration;this.activateTransition(this.getRenderer("updateConfig"),s,this.transitionWasPlaying)}}else this.startTransition(n,e)},t.prototype.pause=function(){var t;this.getRenderer("pause").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").reset()},t.prototype.setSrc=function(t){if(this.getRenderer("setSrc").setSrc(t),this.config&&(this.config.src=t),this.outgoingRender){var e=++this.transitionGeneration;this.activateTransition(this.getRenderer("setSrc"),e,this.transitionWasPlaying)}},t.prototype.setCurrentTime=function(t){this.getRenderer("setCurrentTime").setCurrentTime(t)},t.prototype.setMute=function(t){this.getRenderer("setMute").setMute(t),this.config&&(this.config.muted=t)},t.prototype.setLoop=function(t){this.getRenderer("setLoop").setLoop(t),this.config&&(this.config.loop=t)},t.prototype.setPlaybackRate=function(t){this.getRenderer("setPlaybackRate").setPlaybackRate(t),this.config&&(this.config.playbackRate=t)},t}(),L=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,u=a.expose,d=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(){d.value&&(c(),h=new T({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(c),u({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:d})}}});export{f as AlphaVideoPlayerError,L as default,v as isAlphaVideoPlayerError};
|