fix(thumbnail): [PKG-TOOL-THUMB-03] own input resources and separate sheet export

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

@@ -1,19 +1,35 @@
 import Emitter from './emitter'
-import { clamp, getFileName, runPromisesInSeries, sleep } from './utils'
+import { connectInput, releaseInput, setupInput } from './input'
+import { createSheet, downloadSheet, screenshotPoints } from './sheet'
+import { clamp, runPromisesInSeries, sleep } from './utils'
+
+const destroyed = new WeakSet()
 
 export default class ArtplayerToolThumbnail extends Emitter {
   constructor(option = {}) {
     super()
     this.processing = false
     this.option = {}
-    this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option))
-    this.video = ArtplayerToolThumbnail.creatVideo()
-    this.duration = 0
-    this.inputChange = this.inputChange.bind(this)
-    this.ondrop = this.ondrop.bind(this)
-    this.option.fileInput.addEventListener('change', this.inputChange)
-    this.option.fileInput.addEventListener('dragover', ArtplayerToolThumbnail.ondragover)
-    this.option.fileInput.addEventListener('drop', ArtplayerToolThumbnail.ondrop)
+    try {
+      this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option))
+      this.video = ArtplayerToolThumbnail.creatVideo()
+      this.duration = 0
+      this.inputChange = this.inputChange.bind(this)
+      this.ondrop = this.ondrop.bind(this)
+      connectInput(this, ArtplayerToolThumbnail.ondragover)
+    }
+    catch (error) {
+      try {
+        releaseInput(this)
+      }
+      catch {}
+      try {
+        if (this.video?.parentNode)
+          this.video.parentNode.removeChild(this.video)
+      }
+      catch {}
+      throw error
+    }
   }
 
   static get DEFAULTS() {
@@ -32,40 +48,16 @@ export default class ArtplayerToolThumbnail extends Emitter {
   }
 
   ondrop(event) {
+    if (destroyed.has(this))
+      return
     event.preventDefault()
     const file = event.dataTransfer.files[0]
     this.loadVideo(file)
   }
 
   setup(option = {}) {
-    this.option = Object.assign({}, this.option, option)
-    const { fileInput, number, width, column } = this.option
-
-    this.errorHandle(fileInput instanceof Element, 'The \'fileInput\' is not a Element')
-
-    if (!(fileInput.tagName === 'INPUT' && fileInput.type === 'file')) {
-      fileInput.style.position = 'relative'
-      const newFileInput = document.createElement('input')
-      newFileInput.type = 'file'
-      newFileInput.style.position = 'absolute'
-      newFileInput.style.width = '100%'
-      newFileInput.style.height = '100%'
-      newFileInput.style.left = '0'
-      newFileInput.style.top = '0'
-      newFileInput.style.right = '0'
-      newFileInput.style.bottom = '0'
-      newFileInput.style.opacity = '0'
-      fileInput.appendChild(newFileInput)
-      this.option.fileInput = newFileInput
-    }
-
-    ['number', 'width', 'column', 'begin', 'end'].forEach((item) => {
-      this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`)
-    })
-
-    this.option.number = clamp(number, 10, 1000)
-    this.option.width = clamp(width, 10, 1000)
-    this.option.column = clamp(column, 1, 1000)
+    if (!destroyed.has(this))
+      this.option = setupInput(this, option)
     return this
   }
 
@@ -76,18 +68,27 @@ export default class ArtplayerToolThumbnail extends Emitter {
     video.style.left = '-9999px'
     video.muted = true
     video.controls = true
-    document.body.appendChild(video)
+    try {
+      document.body.appendChild(video)
+    }
+    catch (error) {
+      if (video.parentNode)
+        video.parentNode.removeChild(video)
+      throw error
+    }
     return video
   }
 
   inputChange(event) {
+    if (destroyed.has(this))
+      return
     const file = this.option.fileInput.files[0]
     this.loadVideo(file)
     event.target.value = ''
   }
 
   loadVideo(file) {
-    if (file) {
+    if (file && !destroyed.has(this)) {
       const canPlayType = this.video.canPlayType(file.type)
       this.errorHandle(
         canPlayType === 'maybe' || canPlayType === 'probably',
@@ -151,36 +152,11 @@ export default class ArtplayerToolThumbnail extends Emitter {
   }
 
   creatScreenshotDate() {
-    const { number, width, height, column, begin } = this.option
-    const timeGap = this.duration / number
-    const timePoints = [begin + timeGap]
-    while (timePoints.length < number) {
-      const last = timePoints[timePoints.length - 1]
-      timePoints.push(last + timeGap)
-    }
-    return timePoints.map((item, index) => ({
-      time: item - timeGap / 2,
-      x: (index % column) * width,
-      y: Math.floor(index / column) * height,
-    }))
+    return screenshotPoints(this.option, this.duration)
   }
 
   creatCanvas() {
-    const { number, width, height, column } = this.option
-    const canvas = document.createElement('canvas')
-    const context2D = canvas.getContext('2d')
-    canvas.width = width * column
-    canvas.height = Math.ceil(number / column) * height + 30
-    context2D.fillStyle = 'black'
-    context2D.fillRect(0, 0, canvas.width, canvas.height)
-    context2D.font = '14px Georgia'
-    context2D.fillStyle = '#fff'
-    context2D.fillText(
-      `From: https://artplayer.org/, Number: ${number}, Width: ${width}, Height: ${height}, Column: ${column}`,
-      10,
-      canvas.height - 11,
-    )
-    return canvas
+    return createSheet(this.option)
   }
 
   download() {
@@ -189,13 +165,7 @@ export default class ArtplayerToolThumbnail extends Emitter {
       'Download does not seem to be ready, please create preview first',
     )
     this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...')
-    const elink = document.createElement('a')
-    const name = `${getFileName(this.file.name)}.png`
-    elink.download = name
-    elink.href = this.thumbnailUrl
-    document.body.appendChild(elink)
-    elink.click()
-    document.body.removeChild(elink)
+    const name = downloadSheet(this.file, this.thumbnailUrl)
     this.emit('download', name)
     return this
   }
@@ -208,16 +178,23 @@ export default class ArtplayerToolThumbnail extends Emitter {
   }
 
   destroy() {
-    this.option.fileInput.removeEventListener('change', this.inputChange)
-    this.option.fileInput.removeEventListener('dragover', ArtplayerToolThumbnail.ondragover)
-    this.option.fileInput.removeEventListener('drop', ArtplayerToolThumbnail.ondrop)
-    document.body.removeChild(this.video)
-    if (this.videoUrl) {
-      URL.revokeObjectURL(this.videoUrl)
+    if (destroyed.has(this))
+      return
+    destroyed.add(this)
+    let failure
+    for (const cleanup of [
+      () => releaseInput(this),
+      () => this.video.parentNode?.removeChild(this.video),
+      () => this.videoUrl && URL.revokeObjectURL(this.videoUrl),
+      () => this.thumbnailUrl && URL.revokeObjectURL(this.thumbnailUrl),
+      () => this.emit('destroy'),
+    ]) {
+      try {
+        cleanup()
+      }
+      catch (error) { failure ||= error }
     }
-    if (this.thumbnailUrl) {
-      URL.revokeObjectURL(this.thumbnailUrl)
-    }
-    this.emit('destroy')
+    if (failure)
+      throw failure
   }
 }

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

@@ -0,0 +1,102 @@
+import { clamp } from './utils'
+
+const inputs = new WeakMap()
+
+function release(record) {
+  let failure
+  for (const [name, callback] of record.listeners.splice(0)) {
+    try {
+      record.input.removeEventListener(name, callback)
+    }
+    catch (error) {
+      failure ||= error
+    }
+  }
+  if (record.wrapper) {
+    try {
+      if (record.input.parentNode)
+        record.input.parentNode.removeChild(record.input)
+    }
+    catch (error) {
+      failure ||= error
+    }
+    if (record.wrapper.style.position === 'relative')
+      record.wrapper.style.position = record.position
+  }
+  if (failure)
+    throw failure
+}
+
+function connect(record, callbacks) {
+  try {
+    for (const [name, callback] of callbacks) {
+      record.listeners.push([name, callback])
+      record.input.addEventListener(name, callback)
+    }
+  }
+  catch (error) {
+    try {
+      release(record)
+    }
+    catch {}
+    throw error
+  }
+}
+
+export function setupInput(tool, patch) {
+  const option = Object.assign({}, tool.option, patch)
+  const target = option.fileInput
+  tool.errorHandle(target instanceof Element, 'The \'fileInput\' is not a Element')
+  for (const name of ['number', 'width', 'column', 'begin', 'end'])
+    tool.errorHandle(typeof option[name] === 'number', `The '${name}' is not a number`)
+  option.number = clamp(option.number, 10, 1000)
+  option.width = clamp(option.width, 10, 1000)
+  option.column = clamp(option.column, 1, 1000)
+
+  const previous = inputs.get(tool)
+  if (previous && (target === previous.input || target === previous.wrapper)) {
+    option.fileInput = previous.input
+    return option
+  }
+  const record = { input: target, wrapper: null, position: '', listeners: [], callbacks: previous?.callbacks || null }
+  try {
+    if (!(target.tagName === 'INPUT' && target.type === 'file')) {
+      record.wrapper = target
+      record.position = target.style.position
+      record.input = document.createElement('input')
+      record.input.type = 'file'
+      Object.assign(record.input.style, { position: 'absolute', width: '100%', height: '100%', left: '0', top: '0', right: '0', bottom: '0', opacity: '0' })
+      target.style.position = 'relative'
+      target.appendChild(record.input)
+    }
+    if (record.callbacks)
+      connect(record, record.callbacks)
+  }
+  catch (error) {
+    try {
+      release(record)
+    }
+    catch {}
+    throw error
+  }
+  option.fileInput = record.input
+  inputs.set(tool, record)
+  tool.option = option
+  if (previous)
+    release(previous)
+  return option
+}
+
+export function connectInput(tool, dragover) {
+  const record = inputs.get(tool)
+  record.callbacks = [['change', tool.inputChange], ['dragover', dragover], ['drop', tool.ondrop]]
+  connect(record, record.callbacks)
+}
+
+export function releaseInput(tool) {
+  const record = inputs.get(tool)
+  if (!record)
+    return
+  inputs.delete(tool)
+  release(record)
+}

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

@@ -0,0 +1,50 @@
+import { getFileName } from './utils'
+
+export function screenshotPoints(option, duration) {
+  const { number, width, height, column, begin } = option
+  const timeGap = duration / number
+  const timePoints = [begin + timeGap]
+  while (timePoints.length < number) {
+    const last = timePoints[timePoints.length - 1]
+    timePoints.push(last + timeGap)
+  }
+  return timePoints.map((item, index) => ({
+    time: item - timeGap / 2,
+    x: (index % column) * width,
+    y: Math.floor(index / column) * height,
+  }))
+}
+
+export function createSheet(option) {
+  const { number, width, height, column } = option
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  canvas.width = width * column
+  canvas.height = Math.ceil(number / column) * height + 30
+  context.fillStyle = 'black'
+  context.fillRect(0, 0, canvas.width, canvas.height)
+  context.font = '14px Georgia'
+  context.fillStyle = '#fff'
+  context.fillText(
+    `From: https://artplayer.org/, Number: ${number}, Width: ${width}, Height: ${height}, Column: ${column}`,
+    10,
+    canvas.height - 11,
+  )
+  return canvas
+}
+
+export function downloadSheet(file, url) {
+  const link = document.createElement('a')
+  const name = `${getFileName(file.name)}.png`
+  link.download = name
+  link.href = url
+  try {
+    document.body.appendChild(link)
+    link.click()
+  }
+  finally {
+    if (link.parentNode)
+      link.parentNode.removeChild(link)
+  }
+  return name
+}