refactor(core): CORE-06 type media surfaces and playback hosts

packages/artplayer/src/player/durationMix.js

@@ -1,12 +0,0 @@
-import { def } from '../utils'
-
-export default function durationMix(art) {
-  def(art, 'duration', {
-    get: () => {
-      const { duration } = art.template.$video
-      if (duration === Infinity)
-        return 0
-      return duration || 0
-    },
-  })
-}

packages/artplayer/src/player/durationMix.ts

@@ -0,0 +1,14 @@
+import type { MediaHost } from '../media/hosts'
+import type { MediaState } from '../media/types'
+import { def } from '../utils'
+
+export default function durationMix(art: MediaHost<Pick<MediaState, 'duration'>>): asserts art is MediaHost<Pick<MediaState, 'duration'>> & { readonly duration: number } {
+  def(art, 'duration', {
+    get: () => {
+      const { duration } = art.template.$video
+      if (duration === Infinity)
+        return 0
+      return duration || 0
+    },
+  })
+}

packages/artplayer/src/player/pauseMix.js

@@ -1,18 +0,0 @@
-import { def } from '../utils'
-
-export default function pauseMix(art) {
-  const {
-    template: { $video },
-    i18n,
-    notice,
-  } = art
-
-  def(art, 'pause', {
-    value() {
-      const result = $video.pause()
-      notice.show = i18n.get('Pause')
-      art.emit('pause')
-      return result
-    },
-  })
-}

packages/artplayer/src/player/pauseMix.ts

@@ -0,0 +1,20 @@
+import type { PauseHost } from '../media/hosts'
+import type { PlaybackMethods } from '../media/types'
+import { def } from '../utils'
+
+export default function pauseMix<Media extends Pick<PlaybackMethods, 'pause'>>(art: PauseHost<Media>): asserts art is PauseHost<Media> & { pause: () => ReturnType<Media['pause']> } {
+  const {
+    template: { $video },
+    i18n,
+    notice,
+  } = art
+
+  def(art, 'pause', {
+    value() {
+      const result = $video.pause()
+      notice.show = i18n.get('Pause')
+      art.emit('pause')
+      return result
+    },
+  })
+}

packages/artplayer/src/player/playMix.ts

@@ -1,6 +1,8 @@
+import type { PlayHost } from '../media/hosts'
+import type { PlaybackMethods } from '../media/types'
 import { def } from '../utils'
 
-export default function playMix(art) {
+export default function playMix<Media extends Pick<PlaybackMethods, 'play'>>(art: PlayHost<Media>): asserts art is PlayHost<Media> & { play: () => Promise<Awaited<ReturnType<Media['play']>>> } {
   const {
     i18n,
     notice,
@@ -17,7 +19,7 @@ export default function playMix(art) {
 
       if (option.mutex) {
         for (let index = 0; index < instances.length; index++) {
-          const instance = instances[index]
+          const instance = instances[index]!
           if (instance !== art) {
             instance.pause()
           }

packages/artplayer/src/player/playingMix.ts

@@ -1,6 +1,8 @@
+import type { MediaHost } from '../media/hosts'
+import type { MediaState } from '../media/types'
 import { def } from '../utils'
 
-export default function playingMix(art) {
+export default function playingMix(art: MediaHost<Omit<MediaState, 'duration'>>): asserts art is MediaHost<Omit<MediaState, 'duration'>> & { readonly playing: boolean } {
   const { $video } = art.template
   def(art, 'playing', {
     get: () => {

packages/artplayer/src/player/rectMix.js

@@ -1,31 +0,0 @@
-import { def, getRect } from '../utils'
-
-export default function rectMix(art) {
-  def(art, 'rect', {
-    get: () => {
-      return getRect(art.template.$player)
-    },
-  })
-
-  const keys = ['bottom', 'height', 'left', 'right', 'top', 'width']
-  for (let index = 0; index < keys.length; index++) {
-    const key = keys[index]
-    def(art, key, {
-      get: () => {
-        return art.rect[key]
-      },
-    })
-  }
-
-  def(art, 'x', {
-    get: () => {
-      return art.left + window.pageXOffset
-    },
-  })
-
-  def(art, 'y', {
-    get: () => {
-      return art.top + window.pageYOffset
-    },
-  })
-}

packages/artplayer/src/player/rectMix.ts

@@ -0,0 +1,34 @@
+import type { LayoutHost, RectState } from '../media/hosts'
+import { def, getRect } from '../utils'
+
+export default function rectMix(art: LayoutHost): asserts art is LayoutHost & RectState {
+  // These properties are installed below; no native media element is asserted.
+  const host = art as LayoutHost & RectState
+  def(art, 'rect', {
+    get: () => {
+      return getRect(art.template.$player)
+    },
+  })
+
+  const keys = ['bottom', 'height', 'left', 'right', 'top', 'width'] as const
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index]!
+    def(art, key, {
+      get: () => {
+        return host.rect[key]
+      },
+    })
+  }
+
+  def(art, 'x', {
+    get: () => {
+      return host.left + window.pageXOffset
+    },
+  })
+
+  def(art, 'y', {
+    get: () => {
+      return host.top + window.pageYOffset
+    },
+  })
+}