refactor(core): CORE-19 type capture and preserve progress lifetimes

packages/artplayer/src/control/progress/interactions.ts

@@ -1,4 +1,7 @@
 import type { ControlHost } from '../types'
+import { entryScope } from '../../component/resources'
+import { isClosing } from '../../lifecycle/instance'
+import { captureSource } from '../../source/operation'
 import { isMobile } from '../../utils'
 import { controlEvents } from '../resources'
 import { getPosFromEvent, setCurrentTime } from './position'
@@ -7,17 +10,30 @@ export function installProgressInteractions(art: ControlHost, $control: HTMLDivE
   const { $progress } = art.template
   const $indicator = $control.querySelector('.art-progress-indicator')
   const { on, proxy } = controlEvents(art, $control)
+  const scope = entryScope($control)
+  let action = 0
+  const capture = () => {
+    const sourceActive = captureSource(art)
+    return () => !scope.closed && !isClosing(art) && sourceActive()
+  }
+  const captureAction = () => {
+    const revision = ++action
+    const active = capture()
+    return () => revision === action && active()
+  }
   if (!isMobile) {
-    let isDragging = false
+    let dragging: (() => boolean) | undefined
     proxy($progress, 'click', (event) => {
       if (event.target !== $indicator) {
-        setCurrentTime(art, event)
+        setCurrentTime(art, event, captureAction())
       }
     })
 
     proxy($progress, 'mousemove', (event) => {
+      const active = capture()
       const { percentage } = getPosFromEvent(art, event)
-      art.emit('setBar', 'hover', percentage, event)
+      if (active())
+        art.emit('setBar', 'hover', percentage, event)
     })
 
     proxy($progress, 'mouseleave', (event) => {
@@ -25,21 +41,26 @@ export function installProgressInteractions(art: ControlHost, $control: HTMLDivE
     })
 
     proxy($progress, 'mousedown', (event) => {
-      isDragging = event.button === 0
+      dragging = event.button === 0 ? captureAction() : undefined
     })
 
     on('document:mousemove', (event) => {
-      if (isDragging) {
+      const active = dragging
+      if (active?.()) {
         const { second, percentage } = getPosFromEvent(art, event)
+        if (!active() || dragging !== active)
+          return
         art.emit('setBar', 'played', percentage, event)
-        art.seek = second
+        if (active() && dragging === active)
+          art.seek = second
+      }
+      else {
+        dragging = undefined
       }
     })
 
     on('document:mouseup', () => {
-      if (isDragging) {
-        isDragging = false
-      }
+      dragging = undefined
     })
   }
 }

packages/artplayer/src/control/progress/position.ts

@@ -23,15 +23,21 @@ export function getPosFromEvent(art: ProgressPositionHost, event: ProgressEvent)
 }
 
 export function setCurrentTime(art: ProgressPositionHost, event: ProgressEvent, active: () => boolean = () => true) {
+  if (!active())
+    return
   if (art.isRotate) {
     const percentage = ((event as TouchEvent).touches[0]!.clientY - art.top) / art.height
     const second = percentage * art.duration
+    if (!active())
+      return
     art.emit('setBar', 'played', percentage, event)
     if (active())
       art.seek = second
   }
   else {
     const { second, percentage } = getPosFromEvent(art, event)
+    if (!active())
+      return
     art.emit('setBar', 'played', percentage, event)
     if (active())
       art.seek = second

packages/artplayer/src/control/screenshot.ts

@@ -1,5 +1,6 @@
 import type { ControlFactory, ControlOption } from './types'
 import { appendElement } from '../component/dom'
+import { silencePromise } from '../utils'
 import { controlEvents } from './resources'
 
 export default function screenshot(option: ControlOption): ControlFactory {
@@ -12,7 +13,7 @@ export default function screenshot(option: ControlOption): ControlFactory {
 
       appendElement($control, icons.screenshot)
       proxy($control, 'click', () => {
-        art.screenshot()
+        silencePromise(art.screenshot())
       })
     },
   })