feat(ui): add adaptive video player controls

Author: chrisbbreuer

storage/framework/core/video/package.json

@@ -1 +1 @@
-{"name":"@stacksjs/video","type":"module","sideEffects":false,"version":"0.70.162","description":"Native video delivery planning for Stacks.","author":"Chris Breuer","license":"MIT","funding":"https://github.com/sponsors/chrisbbreuer","repository":{"type":"git","url":"git+https://github.com/stacksjs/stacks.git","directory":"./storage/framework/core/video"},"exports":{".":{"types":"./dist/index.d.ts","development":"./src/index.ts","bun":"./dist/index.js","import":"./dist/index.js"}},"module":"dist/index.js","types":"dist/index.d.ts","files":["README.md","dist"],"scripts":{"build":"bun build.ts","typecheck":"bun tsc --noEmit","prepublishOnly":"bun run build"},"devDependencies":{"better-dx":"catalog:"}}
+{"name":"@stacksjs/video","type":"module","sideEffects":false,"version":"0.70.162","description":"Native video delivery planning for Stacks.","author":"Chris Breuer","license":"MIT","funding":"https://github.com/sponsors/chrisbbreuer","repository":{"type":"git","url":"git+https://github.com/stacksjs/stacks.git","directory":"./storage/framework/core/video"},"exports":{".":{"types":"./dist/index.d.ts","development":"./src/index.ts","bun":"./dist/index.js","import":"./dist/index.js"}},"module":"dist/index.js","types":"dist/index.d.ts","files":["README.md","dist"],"scripts":{"build":"bun build.ts","typecheck":"bun tsc --noEmit","prepublishOnly":"bun run build"},"dependencies":{"ts-video-player":"^0.1.0"},"devDependencies":{"better-dx":"catalog:"}}

storage/framework/defaults/resources/components/Video.stx

@@ -1,9 +1,15 @@
 <script server>
 interface VideoSource { src: string, type?: string }
+interface VideoDrm {
+  widevine?: { url: string, headers?: Record<string, string> }
+  playready?: { url: string, headers?: Record<string, string> }
+  fairplay?: { url: string, certificateUrl: string, headers?: Record<string, string> }
+}
 interface VideoTrack { src: string, kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata', srclang?: string, label?: string, default?: boolean }
 interface VideoProps {
   src: string
   sources?: VideoSource[]
+  drm?: VideoDrm
   tracks?: VideoTrack[]
   poster?: string
   title?: string
@@ -36,11 +42,19 @@ const preload = props.preload || 'metadata'
 const crossorigin = props.crossorigin || ''
 const controlslist = props.controlslist || 'nodownload'
 const className = props.class || ''
+const playerSources = (sources.length ? sources : src ? [{ src }] : []).map(source => props.drm && (source.type === 'application/dash+xml' || source.src.split(/[?#]/, 1)[0].toLowerCase().endsWith('.mpd')) ? { ...source, type: 'application/dash+xml', drm: props.drm } : source)
+const playerConfig = JSON.stringify({ sources: playerSources, ...(props.drm ? { drm: props.drm } : {}) }).replaceAll('<', '\\u003c').replaceAll('>', '\\u003e').replaceAll('&', '\\u0026')
+</script>
+
+<script client>
+import { registerElements } from 'ts-video-player/elements'
+registerElements()
 </script>
 
 <figure class="m-0 {{ className }}">
   <video-player
     src="{{ src }}"
+    data-media-config="{{ playerConfig }}"
     @if(poster) poster="{{ poster }}" @endif
     @if(controls) controls @endif
     @if(props.autoplay) autoplay @endif
@@ -56,6 +70,7 @@ const className = props.class || ''
     class="block overflow-hidden relative w-full bg-black ring-1 ring-black/10 rounded-2xl dark:ring-white/10 focus-within:ring-2 focus-within:ring-sky-500 shadow-sm group"
     style="aspect-ratio: {{ ratio }};"
   >
+    <media-error-display></media-error-display>
     <video data-native-fallback src="{{ src }}" @if(poster) poster="{{ poster }}" @endif @if(width) width="{{ width }}" @endif @if(height) height="{{ height }}" @endif @if(controls) controls @endif @if(props.autoplay) autoplay @endif @if(props.loop) loop @endif @if(props.muted) muted @endif @if(inline) playsinline @endif preload="{{ preload }}" @if(crossorigin) crossorigin="{{ crossorigin }}" @endif controlslist="{{ controlslist }}" @if(props.disablePictureInPicture) disablepictureinpicture @endif aria-label="{{ title }}" class="object-contain h-full w-full">
       @foreach (sources as source)
         <source src="{{ source.src }}" @if(source.type) type="{{ source.type }}" @endif>
@@ -69,12 +84,14 @@ const className = props.class || ''
       <media-seek-button slot="left" seconds="-10" aria-label="Back 10 seconds"></media-seek-button>
       <media-play-button slot="left" aria-label="Play or pause"></media-play-button>
       <media-seek-button slot="left" seconds="10" aria-label="Forward 10 seconds"></media-seek-button>
+      <media-live-button slot="left" aria-label="Go to live edge"></media-live-button>
       <media-time-group slot="center" class="font-mono tabular-nums text-xs"></media-time-group>
       <media-progress-bar slot="center" previews="metadata" aria-label="Video progress"></media-progress-bar>
       <media-mute-button slot="right" aria-label="Mute or unmute"></media-mute-button>
       <media-volume-slider slot="right" aria-label="Volume"></media-volume-slider>
       <media-playback-rate-button slot="right" rates="0.5,0.75,1,1.25,1.5,2" aria-label="Playback speed"></media-playback-rate-button>
       <media-settings-menu slot="right" aria-label="Video settings"></media-settings-menu>
+      <media-airplay-button slot="right" aria-label="Play on AirPlay"></media-airplay-button>
       <media-pip-button slot="right" aria-label="Picture in Picture"></media-pip-button>
       <media-fullscreen-button slot="right" aria-label="Fullscreen"></media-fullscreen-button>
     </video-skin>