refactor(thumbnail): [PKG-TOOL-THUMB-03] own extraction jobs and source cancellation

docs/compiled/artplayer-tool-thumbnail.mjs

@@ -44,11 +44,188 @@ class Emitter {
     return this;
   }
 }
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+const states = /* @__PURE__ */ new WeakMap();
+function stateFor(tool) {
+  if (!states.has(tool)) {
+    states.set(tool, {
+      closed: false,
+      epoch: 0,
+      inputEpoch: 0,
+      job: null,
+      video: null,
+      sourceUrl: null,
+      thumbnailUrl: null,
+      sourceUrls: /* @__PURE__ */ new Set(),
+      thumbnailUrls: /* @__PURE__ */ new Set(),
+      sourceListeners: [],
+      loading: false
+    });
+  }
+  return states.get(tool);
 }
-function runPromisesInSeries(ps) {
-  return ps.reduce((p, next) => p.then(next), Promise.resolve());
+function cancellation(reason) {
+  const error = new Error(`Thumbnail task cancelled: ${reason}`);
+  error.name = "AbortError";
+  return error;
+}
+function revoke(urls, url) {
+  if (!url)
+    return;
+  urls.delete(url);
+  URL.revokeObjectURL(url);
+}
+function cleanupAll(callbacks) {
+  let failure;
+  for (const callback of callbacks) {
+    try {
+      callback();
+    } catch (error) {
+      failure || (failure = error);
+    }
+  }
+  if (failure)
+    throw failure;
+}
+function closeState(tool, reason = "destroyed") {
+  const state = stateFor(tool);
+  if (state.closed)
+    return false;
+  state.closed = true;
+  state.epoch++;
+  state.job?.cancel(reason);
+  return true;
+}
+function releaseMedia(tool) {
+  const state = stateFor(tool);
+  const sources = /* @__PURE__ */ new Set([...state.sourceUrls, tool.videoUrl]);
+  const thumbnails = /* @__PURE__ */ new Set([...state.thumbnailUrls, tool.thumbnailUrl]);
+  const media = [];
+  for (const video of /* @__PURE__ */ new Set([state.video, tool.video])) {
+    if (video) {
+      media.push(
+        () => video.pause?.(),
+        () => video.removeAttribute?.("src"),
+        () => video.load?.(),
+        () => video.parentNode?.removeChild(video)
+      );
+    }
+  }
+  cleanupAll([
+    ...state.sourceListeners.splice(0),
+    ...media,
+    ...[...sources].map((url) => () => revoke(state.sourceUrls, url)),
+    ...[...thumbnails].map((url) => () => revoke(state.thumbnailUrls, url))
+  ]);
+}
+function loadSource(tool, file) {
+  const state = stateFor(tool);
+  if (!file || state.closed)
+    return;
+  const initialEpoch = state.epoch;
+  const video = tool.video;
+  const support = video.canPlayType(file.type);
+  tool.errorHandle(support === "maybe" || support === "probably", `Playback of this file format is not supported: ${file.type}`);
+  if (state.closed || state.epoch !== initialEpoch)
+    return;
+  const url = URL.createObjectURL(file);
+  state.sourceUrls.add(url);
+  if (state.closed || state.epoch !== initialEpoch) {
+    revoke(state.sourceUrls, url);
+    return;
+  }
+  const epoch = ++state.epoch;
+  const initialWait = !state.sourceUrl && !tool.file && state.job?.adopt(epoch);
+  if (!initialWait)
+    state.job?.cancel("source changed");
+  state.loading = true;
+  const current = () => !state.closed && state.epoch === epoch;
+  const previousListeners = state.sourceListeners;
+  const listeners = [];
+  state.sourceListeners = listeners;
+  let pendingCleanup = () => {
+  };
+  let reported = false;
+  const error = () => {
+    if (!current() || reported || video.currentSrc && video.currentSrc !== url)
+      return;
+    reported = true;
+    state.loading = false;
+    const failure = new Error(`Unable to load video: media error ${video.error?.code || 0}`);
+    if (state.job)
+      state.job.fail(failure);
+    else
+      tool.emit("error", failure.message);
+  };
+  const ready = () => {
+    if (current() && (!video.currentSrc || video.currentSrc === url)) {
+      state.loading = false;
+      state.job?.ready();
+    }
+  };
+  try {
+    cleanupAll(previousListeners.splice(0));
+    if (!current()) {
+      revoke(state.sourceUrls, url);
+      return;
+    }
+    for (const [name, callback] of [["error", error], ["loadedmetadata", ready]]) {
+      pendingCleanup = () => video.removeEventListener(name, callback);
+      listeners.push(pendingCleanup);
+      video.addEventListener(name, callback);
+      if (!current()) {
+        cleanupAll([pendingCleanup, ...listeners.splice(0)]);
+        revoke(state.sourceUrls, url);
+        return;
+      }
+    }
+    tool.videoUrl = url;
+    tool.file = file;
+    tool.emit("file", file);
+    if (!current()) {
+      revoke(state.sourceUrls, url);
+      return;
+    }
+    video.src = url;
+    if (!current()) {
+      revoke(state.sourceUrls, url);
+      return;
+    }
+    state.sourceUrl = url;
+    for (const previous of [...state.sourceUrls]) {
+      if (previous !== url)
+        revoke(state.sourceUrls, previous);
+    }
+    if (current())
+      tool.emit("video", video);
+  } catch (error2) {
+    if (current()) {
+      state.loading = false;
+      state.job?.cancel("source setup failed");
+    }
+    try {
+      cleanupAll([pendingCleanup, ...listeners.splice(0)]);
+    } catch {
+    }
+    revoke(state.sourceUrls, url);
+    throw error2;
+  }
+}
+function replaceThumbnail(tool, blob, live) {
+  const state = stateFor(tool);
+  const url = URL.createObjectURL(blob);
+  state.thumbnailUrls.add(url);
+  if (!live()) {
+    revoke(state.thumbnailUrls, url);
+    return null;
+  }
+  const previous = /* @__PURE__ */ new Set([...state.thumbnailUrls, tool.thumbnailUrl]);
+  state.thumbnailUrl = url;
+  tool.thumbnailUrl = url;
+  for (const old of previous) {
+    if (old && old !== url)
+      revoke(state.thumbnailUrls, old);
+  }
+  return live() ? url : null;
 }
 function getFileName(name) {
   const nameArray = name.split(".");
@@ -58,6 +235,236 @@ function getFileName(name) {
 function clamp(num, a, b) {
   return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
 }
+function prepare(tool, job) {
+  const { video } = job;
+  const { width, number, begin, end } = tool.option;
+  const height = video.videoHeight / video.videoWidth * width;
+  const guard = (condition, message) => {
+    try {
+      tool.errorHandle(condition, message);
+    } catch (error) {
+      job.reported = error;
+      job.wasReported = true;
+      throw error;
+    }
+  };
+  tool.option.height = height;
+  tool.option.begin = clamp(begin, 0, video.duration);
+  tool.option.end = clamp(end || video.duration, begin, video.duration);
+  guard(tool.option.end > tool.option.begin, "End time must be greater than the start time");
+  guard(Number.isFinite(video.duration), "Video duration must be finite");
+  tool.duration = tool.option.end - tool.option.begin;
+  tool.density = number / tool.duration;
+  guard(tool.file && video, "Please select the video file first");
+  guard(!tool.processing, "There is currently a task in progress, please wait a moment...");
+  guard(tool.density <= 1, `The preview density cannot be greater than 1, but got ${tool.density}`);
+  const points = tool.creatScreenshotDate();
+  const canvas = tool.creatCanvas();
+  const context = canvas.getContext("2d");
+  tool.emit("canvas", canvas);
+  return { width, height, number, points, canvas, context };
+}
+function createJob(tool, state) {
+  let epoch = state.epoch;
+  const video = tool.video;
+  let resolve;
+  let reject;
+  let timer;
+  let settled = false;
+  let running = false;
+  let job;
+  let frameCleanup = () => {
+  };
+  const listeners = [];
+  const promise = new Promise((yes, no) => {
+    resolve = yes;
+    reject = no;
+  });
+  promise.catch(() => {
+  });
+  const live = () => !settled && !state.closed && state.epoch === epoch && state.job === job;
+  function finish() {
+    if (settled)
+      return false;
+    settled = true;
+    if (state.job === job) {
+      state.job = null;
+      tool.processing = false;
+    }
+    cleanupAll([() => clearTimeout(timer), frameCleanup, ...listeners.splice(0)]);
+    return true;
+  }
+  function fail(error, report = true) {
+    if (settled)
+      return;
+    try {
+      finish();
+    } catch (cleanupError) {
+      error || (error = cleanupError);
+    }
+    if (report) {
+      try {
+        tool.emit("error", error?.message);
+      } catch (listenerError) {
+        error = listenerError;
+      }
+    }
+    reject(error);
+  }
+  function complete() {
+    if (!live())
+      return;
+    try {
+      finish();
+      tool.emit("done");
+      resolve();
+    } catch (error) {
+      let failure = error;
+      try {
+        tool.emit("error", error?.message);
+      } catch (listenerError) {
+        failure = listenerError;
+      }
+      reject(failure);
+    }
+  }
+  function extract(plan) {
+    if (!live())
+      return;
+    running = true;
+    tool.processing = true;
+    let index = 0;
+    const next = () => {
+      if (!live())
+        return;
+      if (index === plan.points.length) {
+        complete();
+        return;
+      }
+      const point = plan.points[index];
+      let drawing = false;
+      let encoded = false;
+      const previous = video.oncanplay;
+      const draw = () => {
+        if (!live() || drawing || video.seeking || video.readyState !== void 0 && video.readyState < 2)
+          return;
+        drawing = true;
+        try {
+          frameCleanup();
+          plan.context.drawImage(video, point.x, point.y, plan.width, plan.height);
+          if (!live())
+            return;
+          plan.canvas.toBlob((blob) => {
+            if (!live() || encoded)
+              return;
+            encoded = true;
+            try {
+              if (!blob)
+                throw new Error("Unable to create thumbnail image");
+              const url = replaceThumbnail(tool, blob, live);
+              if (!url)
+                return;
+              tool.emit("update", url, (index + 1) / plan.number);
+              index++;
+              Promise.resolve().then(next);
+            } catch (error) {
+              fail(error);
+            }
+          });
+        } catch (error) {
+          fail(error);
+        }
+      };
+      frameCleanup = () => {
+        if (video.oncanplay === draw)
+          video.oncanplay = previous;
+        video.removeEventListener("seeked", draw);
+      };
+      try {
+        video.oncanplay = draw;
+        video.addEventListener("seeked", draw);
+        video.currentTime = point.time;
+        if (video.readyState >= 2 && !video.seeking)
+          Promise.resolve().then(draw);
+      } catch (error) {
+        fail(error);
+      }
+    };
+    Promise.resolve().then(next);
+  }
+  function ready(synchronous = false) {
+    if (!live() || running)
+      return;
+    clearTimeout(timer);
+    if (!state.loading && video.duration) {
+      running = true;
+      try {
+        const plan = prepare(tool, job);
+        extract(plan);
+      } catch (error) {
+        fail(error, !synchronous && !(job.wasReported && error === job.reported));
+        if (synchronous)
+          throw error;
+      }
+    } else {
+      timer = setTimeout(() => ready(), 1e3);
+      if (!live())
+        clearTimeout(timer);
+    }
+  }
+  job = {
+    video,
+    promise,
+    ready,
+    fail,
+    cancel(reason) {
+      fail(cancellation(reason), false);
+    },
+    adopt(sourceEpoch) {
+      if (settled || running || video !== tool.video)
+        return false;
+      epoch = sourceEpoch;
+      return true;
+    }
+  };
+  state.job = job;
+  try {
+    for (const [name, callback] of [
+      ["error", () => {
+        if (live())
+          fail(new Error(`Unable to load video: media error ${video.error?.code || 0}`));
+      }],
+      ["loadedmetadata", () => ready()],
+      ["durationchange", () => ready()]
+    ]) {
+      listeners.push(() => video.removeEventListener(name, callback));
+      video.addEventListener(name, callback);
+      if (!live()) {
+        cleanupAll([() => video.removeEventListener(name, callback), ...listeners.splice(0)]);
+        return promise;
+      }
+    }
+    if (video.error)
+      fail(new Error(`Unable to load video: media error ${video.error.code}`));
+    else
+      ready(true);
+  } catch (error) {
+    fail(error, false);
+    throw error;
+  }
+  return promise;
+}
+function startExtraction(tool) {
+  const state = stateFor(tool);
+  if (state.closed) {
+    const promise = Promise.reject(cancellation("destroyed"));
+    promise.catch(() => {
+    });
+    return promise;
+  }
+  tool.errorHandle(!state.job, "There is currently a task in progress, please wait a moment...");
+  return createJob(tool, state);
+}
 const inputs = /* @__PURE__ */ new WeakMap();
 function release(record) {
   let failure;
@@ -96,6 +503,9 @@ function connect(record, callbacks) {
   }
 }
 function setupInput(tool, patch) {
+  const state = stateFor(tool);
+  const epoch = ++state.inputEpoch;
+  const current = () => !state.closed && state.inputEpoch === epoch;
   const option = Object.assign({}, tool.option, patch);
   const target = option.fileInput;
   tool.errorHandle(target instanceof Element, "The 'fileInput' is not a Element");
@@ -104,9 +514,12 @@ function setupInput(tool, patch) {
   option.number = clamp(option.number, 10, 1e3);
   option.width = clamp(option.width, 10, 1e3);
   option.column = clamp(option.column, 1, 1e3);
+  if (!current())
+    throw cancellation("input setup superseded");
   const previous = inputs.get(tool);
   if (previous && (target === previous.input || target === previous.wrapper)) {
     option.fileInput = previous.input;
+    tool.option = option;
     return option;
   }
   const record = { input: target, wrapper: null, position: "", listeners: [], callbacks: previous?.callbacks || null };
@@ -120,8 +533,12 @@ function setupInput(tool, patch) {
       target.style.position = "relative";
       target.appendChild(record.input);
     }
+    if (!current())
+      throw cancellation("input setup superseded");
     if (record.callbacks)
       connect(record, record.callbacks);
+    if (!current())
+      throw cancellation("input setup superseded");
   } catch (error) {
     try {
       release(record);
@@ -193,7 +610,6 @@ function downloadSheet(file, url) {
   }
   return name;
 }
-const destroyed = /* @__PURE__ */ new WeakSet();
 class ArtplayerToolThumbnail extends Emitter {
   constructor(option = {}) {
     super();
@@ -202,18 +618,19 @@ class ArtplayerToolThumbnail extends Emitter {
     try {
       this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option));
       this.video = ArtplayerToolThumbnail.creatVideo();
+      stateFor(this).video = this.video;
       this.duration = 0;
       this.inputChange = this.inputChange.bind(this);
       this.ondrop = this.ondrop.bind(this);
       connectInput(this, ArtplayerToolThumbnail.ondragover);
     } catch (error) {
+      closeState(this, "construction failed");
       try {
         releaseInput(this);
       } catch {
       }
       try {
-        if (this.video?.parentNode)
-          this.video.parentNode.removeChild(this.video);
+        releaseMedia(this);
       } catch {
       }
       throw error;
@@ -233,15 +650,15 @@ class ArtplayerToolThumbnail extends Emitter {
     event.preventDefault();
   }
   ondrop(event) {
-    if (destroyed.has(this))
+    if (stateFor(this).closed)
       return;
     event.preventDefault();
     const file = event.dataTransfer.files[0];
     this.loadVideo(file);
   }
   setup(option = {}) {
-    if (!destroyed.has(this))
-      this.option = setupInput(this, option);
+    if (!stateFor(this).closed)
+      setupInput(this, option);
     return this;
   }
   static creatVideo() {
@@ -261,71 +678,17 @@ class ArtplayerToolThumbnail extends Emitter {
     return video;
   }
   inputChange(event) {
-    if (destroyed.has(this))
+    if (stateFor(this).closed)
       return;
     const file = this.option.fileInput.files[0];
     this.loadVideo(file);
     event.target.value = "";
   }
   loadVideo(file) {
-    if (file && !destroyed.has(this)) {
-      const canPlayType = this.video.canPlayType(file.type);
-      this.errorHandle(
-        canPlayType === "maybe" || canPlayType === "probably",
-        `Playback of this file format is not supported: ${file.type}`
-      );
-      const videoUrl = URL.createObjectURL(file);
-      this.videoUrl = videoUrl;
-      this.file = file;
-      this.emit("file", this.file);
-      this.video.src = videoUrl;
-      this.emit("video", this.video);
-    }
+    loadSource(this, file);
   }
   start() {
-    if (!this.video.duration)
-      return sleep(1e3).then(() => this.start());
-    const { width, number, begin, end } = this.option;
-    const height = this.video.videoHeight / this.video.videoWidth * width;
-    this.option.height = height;
-    this.option.begin = clamp(begin, 0, this.video.duration);
-    this.option.end = clamp(end || this.video.duration, begin, this.video.duration);
-    this.errorHandle(this.option.end > this.option.begin, `End time must be greater than the start time`);
-    this.duration = this.option.end - this.option.begin;
-    this.density = number / this.duration;
-    this.errorHandle(this.file && this.video, "Please select the video file first");
-    this.errorHandle(!this.processing, "There is currently a task in progress, please wait a moment...");
-    this.errorHandle(this.density <= 1, `The preview density cannot be greater than 1, but got ${this.density}`);
-    const screenshotDate = this.creatScreenshotDate();
-    const canvas = this.creatCanvas();
-    const context2D = canvas.getContext("2d");
-    this.emit("canvas", canvas);
-    const promiseList = screenshotDate.map((item, index) => () => {
-      return new Promise((resolve) => {
-        this.video.oncanplay = () => {
-          context2D.drawImage(this.video, item.x, item.y, width, height);
-          canvas.toBlob((blob) => {
-            if (this.thumbnailUrl) {
-              URL.revokeObjectURL(this.thumbnailUrl);
-            }
-            this.thumbnailUrl = URL.createObjectURL(blob);
-            this.emit("update", this.thumbnailUrl, (index + 1) / number);
-            this.video.oncanplay = null;
-            resolve();
-          });
-        };
-        this.video.currentTime = item.time;
-      });
-    });
-    this.processing = true;
-    return runPromisesInSeries(promiseList).then(() => {
-      this.processing = false;
-      this.emit("done");
-    }).catch((err) => {
-      this.processing = false;
-      this.emit("error", err.message);
-      throw err;
-    });
+    return startExtraction(this);
   }
   creatScreenshotDate() {
     return screenshotPoints(this.option, this.duration);
@@ -334,6 +697,8 @@ class ArtplayerToolThumbnail extends Emitter {
     return createSheet(this.option);
   }
   download() {
+    if (stateFor(this).closed)
+      return this;
     this.errorHandle(
       this.file && this.thumbnailUrl,
       "Download does not seem to be ready, please create preview first"
@@ -350,25 +715,13 @@ class ArtplayerToolThumbnail extends Emitter {
     }
   }
   destroy() {
-    if (destroyed.has(this))
+    if (!closeState(this))
       return;
-    destroyed.add(this);
-    let failure;
-    for (const cleanup of [
+    cleanupAll([
       () => releaseInput(this),
-      () => this.video.parentNode?.removeChild(this.video),
-      () => this.videoUrl && URL.revokeObjectURL(this.videoUrl),
-      () => this.thumbnailUrl && URL.revokeObjectURL(this.thumbnailUrl),
+      () => releaseMedia(this),
       () => this.emit("destroy")
-    ]) {
-      try {
-        cleanup();
-      } catch (error) {
-        failure || (failure = error);
-      }
-    }
-    if (failure)
-      throw failure;
+    ]);
   }
 }
 export {