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

packages/artplayer-tool-thumbnail/src/extraction.js

@@ -0,0 +1,243 @@
+import { cancellation, cleanupAll, stateFor } from './lifecycle'
+import { replaceThumbnail } from './source'
+import { clamp } from './utils'
+
+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
+  })
+  // Consumers still receive the rejecting promise; ignored cancellation is owned.
+  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 ||= 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 !== undefined && 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(), 1000)
+      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
+}
+
+export 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)
+}

packages/artplayer-tool-thumbnail/src/index.js

@@ -1,9 +1,9 @@
 import Emitter from './emitter'
+import { startExtraction } from './extraction'
 import { connectInput, releaseInput, setupInput } from './input'
+import { cleanupAll, closeState, releaseMedia, stateFor } from './lifecycle'
 import { createSheet, downloadSheet, screenshotPoints } from './sheet'
-import { clamp, runPromisesInSeries, sleep } from './utils'
-
-const destroyed = new WeakSet()
+import { loadSource } from './source'
 
 export default class ArtplayerToolThumbnail extends Emitter {
   constructor(option = {}) {
@@ -13,19 +13,20 @@ export default 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
@@ -48,7 +49,7 @@ export default class ArtplayerToolThumbnail extends Emitter {
   }
 
   ondrop(event) {
-    if (destroyed.has(this))
+    if (stateFor(this).closed)
       return
     event.preventDefault()
     const file = event.dataTransfer.files[0]
@@ -56,8 +57,8 @@ export default class ArtplayerToolThumbnail extends Emitter {
   }
 
   setup(option = {}) {
-    if (!destroyed.has(this))
-      this.option = setupInput(this, option)
+    if (!stateFor(this).closed)
+      setupInput(this, option)
     return this
   }
 
@@ -80,7 +81,7 @@ export default class ArtplayerToolThumbnail extends Emitter {
   }
 
   inputChange(event) {
-    if (destroyed.has(this))
+    if (stateFor(this).closed)
       return
     const file = this.option.fileInput.files[0]
     this.loadVideo(file)
@@ -88,67 +89,11 @@ export default class ArtplayerToolThumbnail extends Emitter {
   }
 
   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(1000).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() {
@@ -160,6 +105,8 @@ export default class ArtplayerToolThumbnail extends Emitter {
   }
 
   download() {
+    if (stateFor(this).closed)
+      return this
     this.errorHandle(
       this.file && this.thumbnailUrl,
       'Download does not seem to be ready, please create preview first',
@@ -178,23 +125,12 @@ export default 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 ||= error }
-    }
-    if (failure)
-      throw failure
+    ])
   }
 }

packages/artplayer-tool-thumbnail/src/input.js

@@ -1,3 +1,4 @@
+import { cancellation, stateFor } from './lifecycle'
 import { clamp } from './utils'
 
 const inputs = new WeakMap()
@@ -44,6 +45,9 @@ function connect(record, callbacks) {
 }
 
 export 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')
@@ -52,10 +56,13 @@ export function setupInput(tool, patch) {
   option.number = clamp(option.number, 10, 1000)
   option.width = clamp(option.width, 10, 1000)
   option.column = clamp(option.column, 1, 1000)
+  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 }
@@ -69,8 +76,12 @@ export 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 {

packages/artplayer-tool-thumbnail/src/lifecycle.js

@@ -0,0 +1,80 @@
+const states = new WeakMap()
+
+export 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: new Set(),
+      thumbnailUrls: new Set(),
+      sourceListeners: [],
+      loading: false,
+    })
+  }
+  return states.get(tool)
+}
+
+export function cancellation(reason) {
+  const error = new Error(`Thumbnail task cancelled: ${reason}`)
+  error.name = 'AbortError'
+  return error
+}
+
+export function revoke(urls, url) {
+  if (!url)
+    return
+  urls.delete(url)
+  URL.revokeObjectURL(url)
+}
+
+export function cleanupAll(callbacks) {
+  let failure
+  for (const callback of callbacks) {
+    try {
+      callback()
+    }
+    catch (error) {
+      failure ||= error
+    }
+  }
+  if (failure)
+    throw failure
+}
+
+export 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
+}
+
+export function releaseMedia(tool) {
+  const state = stateFor(tool)
+  const sources = new Set([...state.sourceUrls, tool.videoUrl])
+  const thumbnails = new Set([...state.thumbnailUrls, tool.thumbnailUrl])
+  const media = []
+  for (const video of 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)),
+  ])
+}

packages/artplayer-tool-thumbnail/src/source.js

@@ -0,0 +1,113 @@
+import { cleanupAll, revoke, stateFor } from './lifecycle'
+
+export 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 (error) {
+    if (current()) {
+      state.loading = false
+      state.job?.cancel('source setup failed')
+    }
+    try {
+      cleanupAll([pendingCleanup, ...listeners.splice(0)])
+    }
+    catch {}
+    revoke(state.sourceUrls, url)
+    throw error
+  }
+}
+
+export 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 = 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
+}