roy-image-repository 0.1.1 → 0.1.2

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export declare class ImageRepository {
 	private readonly videoUrl;
 	private static _repositories;
 	private _isInited;
+	private _isPlaying;
 	private _videoElement?;
 	/**
 	 * 视频DOM元素，使用它来渲染画布
@@ -35,11 +36,12 @@ export declare class ImageRepository {
 	static getRepository(videoUrl: string): Promise<ImageRepository>;
 	init(): Promise<void>;
 	uninit(): void;
+	private _taskQueue;
 	/**
-	 * 根据传入的微秒时间戳，获取指定位置的帧图片
+	 * 根据传入的微秒时间戳，获取指定位置的帧图片，直接返回切换到对应帧的视频对象，在并发调用的情况下，内部通过统一的串行队列，将调用的结果按照顺序返回
 	 * @param timstampInMicroseconds 微秒时间戳
 	 */
-	getImage(timstampInMicroseconds: number): Promise<void>;
+	getImage(timstampInMicroseconds: number): Promise<HTMLVideoElement>;
 	/**
 	 * 开始播放连续帧图片
 	 */

package/dist/roy-image-repository.iife.js

@@ -1 +1 @@
-var royImageRepository=(function(s){"use strict";async function d(o){return new Promise((i,t)=>{const e=document.createElement("video");e.muted=!0,e.crossOrigin="anonymous",e.preload="metadata",e.onloadedmetadata=()=>{e.width=e.videoWidth,e.height=e.videoHeight,i(e)},e.onerror=r=>{console.log("video load error",r),t(r)},e.src=o})}function l(o){return{all:o=o||new Map,on:function(i,t){var e=o.get(i);e?e.push(t):o.set(i,[t])},off:function(i,t){var e=o.get(i);e&&(t?e.splice(e.indexOf(t)>>>0,1):o.set(i,[]))},emit:function(i,t){var e=o.get(i);e&&e.slice().map(function(r){r(t)}),(e=o.get("*"))&&e.slice().map(function(r){r(i,t)})}}}function a(o){return o/1e6}function m(o){return o*1e6}class n{constructor(i){this.videoUrl=i}static _repositories={};_isInited=!1;_videoElement;get videoElement(){if(!this._videoElement)throw new Error("image repository is not inited!");return this._videoElement}_requestVideoFrameCallbackId;_emitter=l();static async getRepository(i){const t=i.toLowerCase().trim();return this._repositories[t]||(this._repositories[t]=new n(t),await this._repositories[t].init()),this._repositories[t]}async init(){if(this._isInited)return;this._isInited=!0,this._videoElement=await d(this.videoUrl);const i=(t,e)=>{this._emitter.emit("requestFrame",{frameTimestampInMicroseconds:m(e.mediaTime),originalEvent:{now:t,metadata:e}}),this._requestVideoFrameCallbackId=this._videoElement.requestVideoFrameCallback(i)};this._requestVideoFrameCallbackId=this._videoElement.requestVideoFrameCallback(i)}uninit(){this._isInited&&(this._isInited=!1,this._requestVideoFrameCallbackId&&(this._videoElement.cancelVideoFrameCallback(this._requestVideoFrameCallbackId),this._requestVideoFrameCallbackId=void 0),this._videoElement=void 0,this._emitter.all.clear())}async getImage(i){if(!this._videoElement)throw new Error("image repository is not inited!");this._videoElement.currentTime=a(i)}async play(){if(!this._videoElement)throw new Error("image repository is not inited!");return await this._videoElement.play()}stop(){if(!this._videoElement)throw new Error("image repository is not inited!");this.pause(),this._videoElement.currentTime=a(0)}pause(){if(!this._videoElement)throw new Error("image repository is not inited!");this._videoElement.pause()}on(i,t){return this._emitter.on(i,t),{off:()=>{this._emitter.off(i,t)}}}}return s.ImageRepository=n,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"}),s})({});
+var royImageRepository=(function(o){"use strict";async function u(r){return new Promise((e,t)=>{const i=document.createElement("video");i.muted=!0,i.crossOrigin="anonymous",i.preload="metadata",i.onloadedmetadata=()=>{i.width=i.videoWidth,i.height=i.videoHeight,e(i)},i.onerror=s=>{console.log("video load error",s),t(s)},i.src=r})}function l(r){return{all:r=r||new Map,on:function(e,t){var i=r.get(e);i?i.push(t):r.set(e,[t])},off:function(e,t){var i=r.get(e);i&&(t?i.splice(i.indexOf(t)>>>0,1):r.set(e,[]))},emit:function(e,t){var i=r.get(e);i&&i.slice().map(function(s){s(t)}),(i=r.get("*"))&&i.slice().map(function(s){s(e,t)})}}}function a(r){return r/1e6}function h(r){return r*1e6}class d{queue=[];running=!1;taskId=0;stopped=!1;enqueue(e){return this.stopped?Promise.reject(new Error("Queue has been stopped")):new Promise((t,i)=>{const s={id:++this.taskId,task:e,resolve:t,reject:i};this.queue.push(s),this.process()})}async process(){if(!this.running&&this.queue.length!==0){for(this.running=!0;this.queue.length>0;){const e=this.queue.shift();if(!e)break;try{const t=await e.task();e.resolve(t)}catch(t){e.reject(t)}}this.running=!1}}clear(e="Task cleared"){for(const t of this.queue)t.reject(new Error(e));this.queue=[]}stop(){this.stopped=!0,this.clear("Queue stopped")}isRunning(){return this.running}size(){return this.queue.length}}class n{constructor(e){this.videoUrl=e}static _repositories={};_isInited=!1;_isPlaying=!1;_videoElement;get videoElement(){if(!this._videoElement)throw new Error("image repository is not inited!");return this._videoElement}_requestVideoFrameCallbackId;_emitter=l();static getRepository(e){const t=e.toLowerCase().trim();return this._repositories[t]||(this._repositories[t]=(async()=>{const i=new n(t);return await i.init(),i})()),this._repositories[t]}async init(){this._isInited||(this._isInited=!0,this._videoElement=await u(this.videoUrl))}uninit(){this._isInited&&(this._isInited=!1,this._isPlaying&&this.stop(),this._taskQueue.stop(),this._videoElement=void 0,this._emitter.all.clear())}_taskQueue=new d;async getImage(e){return await this._taskQueue.enqueue(()=>new Promise((t,i)=>{if(!this._videoElement){i(new Error("image repository is not inited!"));return}if(this._isPlaying){i(new Error("image repository is playing!"));return}this._videoElement.requestVideoFrameCallback(()=>{t(this.videoElement)}),this._videoElement.currentTime=a(e)}))}async play(){if(!this._videoElement)throw new Error("image repository is not inited!");if(this._isPlaying)throw new Error("image repository is playing!");try{this._isPlaying=!0;const e=(t,i)=>{this._emitter.emit("requestFrame",{frameTimestampInMicroseconds:h(i.mediaTime),originalEvent:{now:t,metadata:i}}),this._requestVideoFrameCallbackId=this._videoElement.requestVideoFrameCallback(e)};return this._requestVideoFrameCallbackId=this._videoElement.requestVideoFrameCallback(e),await this._videoElement.play()}catch(e){throw this._isPlaying=!1,e}}stop(){if(!this._videoElement)throw new Error("image repository is not inited!");if(!this._isPlaying)throw new Error("image repository is not playing");this.pause(),this._videoElement.currentTime=a(0)}pause(){if(!this._videoElement)throw new Error("image repository is not inited!");if(!this._isPlaying)throw new Error("image repository is not playing");try{this._isPlaying=!1,this._requestVideoFrameCallbackId&&(this._videoElement.cancelVideoFrameCallback(this._requestVideoFrameCallbackId),this._requestVideoFrameCallbackId=void 0),this._videoElement.pause()}catch(e){throw this._isPlaying=!0,e}}on(e,t){return this._emitter.on(e,t),{off:()=>{this._emitter.off(e,t)}}}}return o.ImageRepository=n,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),o})({});

package/dist/roy-image-repository.js

@@ -1,41 +1,106 @@
-async function a(o) {
-  return new Promise((i, t) => {
-    const e = document.createElement("video");
-    e.muted = !0, e.crossOrigin = "anonymous", e.preload = "metadata", e.onloadedmetadata = () => {
-      e.width = e.videoWidth, e.height = e.videoHeight, i(e);
-    }, e.onerror = (r) => {
-      console.log("video load error", r), t(r);
-    }, e.src = o;
+async function a(r) {
+  return new Promise((e, t) => {
+    const i = document.createElement("video");
+    i.muted = !0, i.crossOrigin = "anonymous", i.preload = "metadata", i.onloadedmetadata = () => {
+      i.width = i.videoWidth, i.height = i.videoHeight, e(i);
+    }, i.onerror = (s) => {
+      console.log("video load error", s), t(s);
+    }, i.src = r;
   });
 }
-function d(o) {
-  return { all: o = o || /* @__PURE__ */ new Map(), on: function(i, t) {
-    var e = o.get(i);
-    e ? e.push(t) : o.set(i, [t]);
-  }, off: function(i, t) {
-    var e = o.get(i);
-    e && (t ? e.splice(e.indexOf(t) >>> 0, 1) : o.set(i, []));
-  }, emit: function(i, t) {
-    var e = o.get(i);
-    e && e.slice().map(function(r) {
-      r(t);
-    }), (e = o.get("*")) && e.slice().map(function(r) {
-      r(i, t);
+function u(r) {
+  return { all: r = r || /* @__PURE__ */ new Map(), on: function(e, t) {
+    var i = r.get(e);
+    i ? i.push(t) : r.set(e, [t]);
+  }, off: function(e, t) {
+    var i = r.get(e);
+    i && (t ? i.splice(i.indexOf(t) >>> 0, 1) : r.set(e, []));
+  }, emit: function(e, t) {
+    var i = r.get(e);
+    i && i.slice().map(function(s) {
+      s(t);
+    }), (i = r.get("*")) && i.slice().map(function(s) {
+      s(e, t);
     });
   } };
 }
-function s(o) {
-  return o / 1e6;
+function n(r) {
+  return r / 1e6;
 }
-function l(o) {
-  return o * 1e6;
+function l(r) {
+  return r * 1e6;
 }
-class n {
-  constructor(i) {
-    this.videoUrl = i;
+class h {
+  queue = [];
+  running = !1;
+  taskId = 0;
+  stopped = !1;
+  /**
+   * 添加任务（泛型自动推导）
+   */
+  enqueue(e) {
+    return this.stopped ? Promise.reject(new Error("Queue has been stopped")) : new Promise((t, i) => {
+      const s = {
+        id: ++this.taskId,
+        task: e,
+        resolve: t,
+        reject: i
+      };
+      this.queue.push(s), this.process();
+    });
+  }
+  /**
+   * 串行执行核心逻辑
+   */
+  async process() {
+    if (!this.running && this.queue.length !== 0) {
+      for (this.running = !0; this.queue.length > 0; ) {
+        const e = this.queue.shift();
+        if (!e) break;
+        try {
+          const t = await e.task();
+          e.resolve(t);
+        } catch (t) {
+          e.reject(t);
+        }
+      }
+      this.running = !1;
+    }
+  }
+  /**
+   * 清空未执行任务
+   */
+  clear(e = "Task cleared") {
+    for (const t of this.queue)
+      t.reject(new Error(e));
+    this.queue = [];
+  }
+  /**
+   * 停止队列（不可恢复）
+   */
+  stop() {
+    this.stopped = !0, this.clear("Queue stopped");
+  }
+  /**
+   * 当前是否正在执行
+   */
+  isRunning() {
+    return this.running;
+  }
+  /**
+   * 当前等待数量
+   */
+  size() {
+    return this.queue.length;
+  }
+}
+class o {
+  constructor(e) {
+    this.videoUrl = e;
   }
   static _repositories = {};
   _isInited = !1;
+  _isPlaying = !1;
   _videoElement;
   /**
    * 视频DOM元素，使用它来渲染画布
@@ -46,36 +111,39 @@ class n {
     return this._videoElement;
   }
   _requestVideoFrameCallbackId;
-  _emitter = d();
-  static async getRepository(i) {
-    const t = i.toLowerCase().trim();
-    return this._repositories[t] || (this._repositories[t] = new n(t), await this._repositories[t].init()), this._repositories[t];
+  _emitter = u();
+  static getRepository(e) {
+    const t = e.toLowerCase().trim();
+    return this._repositories[t] || (this._repositories[t] = (async () => {
+      const i = new o(t);
+      return await i.init(), i;
+    })()), this._repositories[t];
   }
   async init() {
-    if (this._isInited)
-      return;
-    this._isInited = !0, this._videoElement = await a(this.videoUrl);
-    const i = (t, e) => {
-      this._emitter.emit("requestFrame", {
-        frameTimestampInMicroseconds: l(e.mediaTime),
-        originalEvent: { now: t, metadata: e }
-      }), this._requestVideoFrameCallbackId = this._videoElement.requestVideoFrameCallback(i);
-    };
-    this._requestVideoFrameCallbackId = this._videoElement.requestVideoFrameCallback(i);
+    this._isInited || (this._isInited = !0, this._videoElement = await a(this.videoUrl));
   }
   uninit() {
-    this._isInited && (this._isInited = !1, this._requestVideoFrameCallbackId && (this._videoElement.cancelVideoFrameCallback(
-      this._requestVideoFrameCallbackId
-    ), this._requestVideoFrameCallbackId = void 0), this._videoElement = void 0, this._emitter.all.clear());
+    this._isInited && (this._isInited = !1, this._isPlaying && this.stop(), this._taskQueue.stop(), this._videoElement = void 0, this._emitter.all.clear());
   }
+  _taskQueue = new h();
   /**
-   * 根据传入的微秒时间戳，获取指定位置的帧图片
+   * 根据传入的微秒时间戳，获取指定位置的帧图片，直接返回切换到对应帧的视频对象，在并发调用的情况下，内部通过统一的串行队列，将调用的结果按照顺序返回
    * @param timstampInMicroseconds 微秒时间戳
    */
-  async getImage(i) {
-    if (!this._videoElement)
-      throw new Error("image repository is not inited!");
-    this._videoElement.currentTime = s(i);
+  async getImage(e) {
+    return await this._taskQueue.enqueue(() => new Promise((t, i) => {
+      if (!this._videoElement) {
+        i(new Error("image repository is not inited!"));
+        return;
+      }
+      if (this._isPlaying) {
+        i(new Error("image repository is playing!"));
+        return;
+      }
+      this._videoElement.requestVideoFrameCallback(() => {
+        t(this.videoElement);
+      }), this._videoElement.currentTime = n(e);
+    }));
   }
   /**
    * 开始播放连续帧图片
@@ -83,7 +151,20 @@ class n {
   async play() {
     if (!this._videoElement)
       throw new Error("image repository is not inited!");
-    return await this._videoElement.play();
+    if (this._isPlaying)
+      throw new Error("image repository is playing!");
+    try {
+      this._isPlaying = !0;
+      const e = (t, i) => {
+        this._emitter.emit("requestFrame", {
+          frameTimestampInMicroseconds: l(i.mediaTime),
+          originalEvent: { now: t, metadata: i }
+        }), this._requestVideoFrameCallbackId = this._videoElement.requestVideoFrameCallback(e);
+      };
+      return this._requestVideoFrameCallbackId = this._videoElement.requestVideoFrameCallback(e), await this._videoElement.play();
+    } catch (e) {
+      throw this._isPlaying = !1, e;
+    }
   }
   /**
    * 停止播放
@@ -91,7 +172,9 @@ class n {
   stop() {
     if (!this._videoElement)
       throw new Error("image repository is not inited!");
-    this.pause(), this._videoElement.currentTime = s(0);
+    if (!this._isPlaying)
+      throw new Error("image repository is not playing");
+    this.pause(), this._videoElement.currentTime = n(0);
   }
   /**
    * 暂停播放
@@ -99,16 +182,24 @@ class n {
   pause() {
     if (!this._videoElement)
       throw new Error("image repository is not inited!");
-    this._videoElement.pause();
+    if (!this._isPlaying)
+      throw new Error("image repository is not playing");
+    try {
+      this._isPlaying = !1, this._requestVideoFrameCallbackId && (this._videoElement.cancelVideoFrameCallback(
+        this._requestVideoFrameCallbackId
+      ), this._requestVideoFrameCallbackId = void 0), this._videoElement.pause();
+    } catch (e) {
+      throw this._isPlaying = !0, e;
+    }
   }
-  on(i, t) {
-    return this._emitter.on(i, t), {
+  on(e, t) {
+    return this._emitter.on(e, t), {
       off: () => {
-        this._emitter.off(i, t);
+        this._emitter.off(e, t);
       }
     };
   }
 }
 export {
-  n as ImageRepository
+  o as ImageRepository
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "roy-image-repository",
   "author": "roy",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "module": "./dist/roy-image-repository.js",
   "type": "module",
   "exports": {