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

test/types/media-hosts.ts

@@ -0,0 +1,64 @@
+import type { LayoutHost, PauseHost, PlayHost } from '../../packages/artplayer/src/media/hosts'
+import type { CanvasMedia, MediaSurface, NativeMedia } from '../../packages/artplayer/src/media/types'
+import durationMix from '../../packages/artplayer/src/player/durationMix'
+import pauseMix from '../../packages/artplayer/src/player/pauseMix'
+import playingMix from '../../packages/artplayer/src/player/playingMix'
+import playMix from '../../packages/artplayer/src/player/playMix'
+import rectMix from '../../packages/artplayer/src/player/rectMix'
+
+const native: NativeMedia = document.createElement('video')
+const canvas: CanvasMedia = Object.assign(document.createElement('canvas'), {
+  src: null,
+  currentSrc: null,
+  currentTime: 0,
+  duration: 10,
+  paused: true,
+  ended: false,
+  readyState: 0,
+  videoWidth: 320,
+  videoHeight: 180,
+  buffered: { length: 0, start: (_index: number) => 0, end: (_index: number) => 0 },
+  volume: 1,
+  muted: false,
+  playbackRate: 1,
+  play: () => 'sync-result',
+  pause: () => 42,
+  load: () => {},
+})
+function useSurface(media: MediaSurface) {
+  // @ts-expect-error Proxy capability is optional, including on older native browsers.
+  media.requestPictureInPicture()
+  media.requestPictureInPicture?.()
+  void media.textTracks?.[0]?.activeCues
+  // @ts-expect-error A media surface cannot be passed off as a complete native video.
+  const video: HTMLVideoElement = media
+  void video
+}
+useSurface(native)
+useSurface(canvas)
+// @ts-expect-error A raw canvas lacks the proxy's media implementation.
+const incomplete: MediaSurface = document.createElement('canvas')
+void incomplete
+
+const shared = { i18n: { get: (key: string) => key }, notice: { show: '' }, emit: (_name: 'play' | 'pause') => {} }
+const playHost: PlayHost<{ play: () => string }> = { ...shared, template: { $video: { play: () => 'sync-result' } }, option: { mutex: false }, constructor: { instances: [] } }
+playMix(playHost)
+const result: Promise<string> = playHost.play()
+const pauseHost: PauseHost<{ pause: () => number }> = { ...shared, template: { $video: { pause: () => 42 } } }
+pauseMix(pauseHost)
+const paused: number = pauseHost.pause()
+// @ts-expect-error Pausing is not forced to return a Promise.
+const wrong: Promise<void> = pauseHost.pause()
+void [result, paused, wrong]
+
+const mediaHost = { template: { $video: canvas } }
+playingMix(mediaHost)
+durationMix(mediaHost)
+const state: boolean = mediaHost.playing
+const duration: number = mediaHost.duration
+const layout: LayoutHost = { template: { $player: document.createElement('div') } }
+rectMix(layout)
+const width: number = layout.width
+// @ts-expect-error Read-only getter properties cannot be assigned.
+layout.width = 2
+void [state, duration, width]