refactor(core): CORE-12 type template resources and verify bundled notices

packages/artplayer/src/template/html.ts

@@ -0,0 +1,61 @@
+import { version } from '../../package.json'
+
+export default `
+          <div class="art-video-player art-subtitle-show art-layer-show art-control-show art-mask-show">
+            <video class="art-video">
+              <track default kind="metadata" src=""></track>
+            </video>
+            <div class="art-poster"></div>
+            <div class="art-subtitle"></div>
+            <div class="art-danmuku"></div>
+            <div class="art-layers"></div>
+            <div class="art-mask">
+              <div class="art-state"></div>
+            </div>
+            <div class="art-bottom">
+              <div class="art-progress"></div>
+              <div class="art-controls">
+                <div class="art-controls-left"></div>
+                <div class="art-controls-center"></div>
+                <div class="art-controls-right"></div>
+              </div>
+            </div>
+            <div class="art-loading"></div>
+            <div class="art-notice">
+              <div class="art-notice-inner"></div>
+            </div>
+            <div class="art-settings"></div>
+            <div class="art-info">
+              <div class="art-info-panel">
+                <div class="art-info-item">
+                  <div class="art-info-title">Player version:</div>
+                  <div class="art-info-content">${version}</div>
+                </div>
+                <div class="art-info-item">
+                  <div class="art-info-title">Video url:</div>
+                  <div class="art-info-content" data-video="currentSrc"></div>
+                </div>
+                <div class="art-info-item">
+                  <div class="art-info-title">Video volume:</div>
+                  <div class="art-info-content" data-video="volume"></div>
+                </div>
+                <div class="art-info-item">
+                  <div class="art-info-title">Video time:</div>
+                  <div class="art-info-content" data-video="currentTime"></div>
+                </div>
+                <div class="art-info-item">
+                  <div class="art-info-title">Video duration:</div>
+                  <div class="art-info-content" data-video="duration"></div>
+                </div>
+                <div class="art-info-item">
+                  <div class="art-info-title">Video resolution:</div>
+                  <div class="art-info-content">
+                    <span data-video="videoWidth"></span> x <span data-video="videoHeight"></span>
+                  </div>
+                </div>
+              </div>
+              <div class="art-info-close">[x]</div>
+            </div>
+            <div class="art-contextmenus"></div>
+          </div>
+        `

packages/artplayer/src/template/nodes.ts

@@ -0,0 +1,27 @@
+import type { TemplateNodes } from './types'
+
+export default function bindNodes(target: TemplateNodes & { query: <T extends Element = Element>(selector: string) => T | null }): void {
+  target.$player = target.query<HTMLDivElement>('.art-video-player')
+  target.$video = target.query<HTMLVideoElement>('.art-video')
+  target.$track = target.query<HTMLTrackElement>('track')
+  target.$poster = target.query<HTMLDivElement>('.art-poster')
+  target.$subtitle = target.query<HTMLDivElement>('.art-subtitle')
+  target.$danmuku = target.query<HTMLDivElement>('.art-danmuku')
+  target.$bottom = target.query<HTMLDivElement>('.art-bottom')
+  target.$progress = target.query<HTMLDivElement>('.art-progress')
+  target.$controls = target.query<HTMLDivElement>('.art-controls')
+  target.$controlsLeft = target.query<HTMLDivElement>('.art-controls-left')
+  target.$controlsCenter = target.query<HTMLDivElement>('.art-controls-center')
+  target.$controlsRight = target.query<HTMLDivElement>('.art-controls-right')
+  target.$layer = target.query<HTMLDivElement>('.art-layers')
+  target.$loading = target.query<HTMLDivElement>('.art-loading')
+  target.$notice = target.query<HTMLDivElement>('.art-notice')
+  target.$noticeInner = target.query<HTMLDivElement>('.art-notice-inner')
+  target.$mask = target.query<HTMLDivElement>('.art-mask')
+  target.$state = target.query<HTMLDivElement>('.art-state')
+  target.$setting = target.query<HTMLDivElement>('.art-settings')
+  target.$info = target.query<HTMLDivElement>('.art-info')
+  target.$infoPanel = target.query<HTMLDivElement>('.art-info-panel')
+  target.$infoClose = target.query<HTMLDivElement>('.art-info-close')
+  target.$contextmenu = target.query<HTMLDivElement>('.art-contextmenus')
+}

packages/artplayer/src/template/types.ts

@@ -0,0 +1,37 @@
+export interface TemplateHost<Host> {
+  id: number
+  option: {
+    container: string | HTMLElement
+    useSSR: boolean
+    proxy?: (this: Host, art: Host) => unknown
+    backdrop: boolean
+  }
+  constructor: { instances: readonly { template: { $container: Element } }[] }
+}
+
+// Missing SSR nodes remain nullable; mounting does not synthesize replacements.
+export interface TemplateNodes {
+  $player: HTMLDivElement | null
+  $video: HTMLVideoElement | HTMLCanvasElement | null
+  $track: HTMLTrackElement | null
+  $poster: HTMLDivElement | null
+  $subtitle: HTMLDivElement | null
+  $danmuku: HTMLDivElement | null
+  $bottom: HTMLDivElement | null
+  $progress: HTMLDivElement | null
+  $controls: HTMLDivElement | null
+  $controlsLeft: HTMLDivElement | null
+  $controlsCenter: HTMLDivElement | null
+  $controlsRight: HTMLDivElement | null
+  $layer: HTMLDivElement | null
+  $loading: HTMLDivElement | null
+  $notice: HTMLDivElement | null
+  $noticeInner: HTMLDivElement | null
+  $mask: HTMLDivElement | null
+  $state: HTMLDivElement | null
+  $setting: HTMLDivElement | null
+  $info: HTMLDivElement | null
+  $infoPanel: HTMLDivElement | null
+  $infoClose: HTMLDivElement | null
+  $contextmenu: HTMLDivElement | null
+}