ts-video-player 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-video-player",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A modern, framework-agnostic video player with deep stx integration",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -8,9 +8,7 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "sideEffects": [
-    "./dist/cdn.min.js"
-  ],
+  "sideEffects": true,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -62,7 +60,7 @@
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "typescript": "^5.7.0"
+    "typescript": "^7.0.2"
   },
   "peerDependencies": {
     "stx": ">=0.65.0"

package/src/providers/html5.ts

@@ -65,7 +65,7 @@ function getExtension(src: string): string {
 /**
  * Get MIME type for a source
  */
-function getMimeType(src: string): string {
+export function getMimeType(src: string): string {
   const ext = getExtension(src)
   const mimeTypes: Record<string, string> = {
     mp4: 'video/mp4',

package/src/providers/index.ts

@@ -35,7 +35,7 @@ export type { Provider, ProviderLoader, ProviderType } from '../types'
 // =============================================================================
 
 import type { ProviderLoader, Src } from '../types'
-import { html5Loader } from './html5'
+import { getMimeType, html5Loader } from './html5'
 import { youtubeLoader } from './youtube'
 import { vimeoLoader } from './vimeo'
 import { hlsLoader } from './hls'
@@ -52,6 +52,32 @@ export const defaultLoaders: ProviderLoader[] = [
   html5Loader, // HTML5 as fallback
 ]
 
+/**
+ * The URL of a source object that says nothing about its kind: `{ src }`,
+ * perhaps with a quality or size, but no `type`. Only its URL can tell a
+ * YouTube link from an MP4, so that is what the loaders are asked about.
+ */
+function untypedUrl(src: Src): string | null {
+  if (!src || typeof src !== 'object' || typeof src.src !== 'string')
+    return null
+  return 'type' in src && src.type ? null : src.src
+}
+
+/** What a loader's source type is written as, for a source it matched by URL alone. */
+const TYPE_FOR_LOADER: Record<string, (url: string) => string> = {
+  youtube: () => 'youtube',
+  vimeo: () => 'vimeo',
+  hls: () => 'application/x-mpegurl',
+  dash: () => 'dash',
+  video: url => getMimeType(url),
+}
+
+function withType(src: Src, loader: ProviderLoader): Src {
+  const url = untypedUrl(src)
+  const type = url && TYPE_FOR_LOADER[loader.type]
+  return url && type ? { ...(src as object), type: type(url) } as Src : src
+}
+
 /**
  * Find the appropriate provider loader for a source
  */
@@ -61,6 +87,13 @@ export function findLoader(src: Src, loaders: ProviderLoader[] = defaultLoaders)
       return loader
     }
   }
+  const url = untypedUrl(src)
+  if (url) {
+    for (const loader of loaders) {
+      if (loader.canPlay(url))
+        return loader
+    }
+  }
   return null
 }
 
@@ -75,7 +108,8 @@ export function findSourceCandidates(sources: readonly Src[], loaders: ProviderL
   const candidates: SourceCandidate[] = []
   sources.forEach((src, index) => {
     const loader = findLoader(src, loaders)
-    if (loader) candidates.push({ src, index, loader })
+    // Typed for the provider that claimed it, which reads `type` to know how.
+    if (loader) candidates.push({ src: withType(src, loader), index, loader })
   })
   return candidates
 }

package/src/providers/youtube.ts

@@ -145,6 +145,8 @@ declare global {
         elementId: string | HTMLElement,
         options: {
           videoId?: string
+          /** Where the iframe is served from, e.g. https://www.youtube-nocookie.com. */
+          host?: string
           width?: number | string
           height?: number | string
           playerVars?: Record<string, string | number>
@@ -184,6 +186,8 @@ export class YouTubeProvider extends BaseProvider {
   private player: YTPlayer | null = null
   private iframe: HTMLIFrameElement | null = null
   private pendingVideoId: string | null = null
+  /** YouTube's own ready event: the player's methods exist only after it. */
+  private playerReady = false
   private startTime?: number
   private endTime?: number
   private timeUpdateInterval: ReturnType<typeof setInterval> | null = null
@@ -227,11 +231,14 @@ export class YouTubeProvider extends BaseProvider {
       Object.assign(playerVars, this.options.youtubeParams)
     }
 
-    // Use privacy-enhanced mode
-    playerVars.host = 'https://www.youtube-nocookie.com'
 
-    // Create player
-    this.player = new window.YT!.Player(playerDiv.id, {
+    // Create player. The element, not its id: the API looks an id up with
+    // document.getElementById, which cannot see into the shadow root the
+    // <video-player> element renders into, so an id found nothing there.
+    this.player = new window.YT!.Player(playerDiv, {
+      // Privacy-enhanced mode. A top-level option: set among playerVars, the
+      // API ignored it and embedded from youtube.com.
+      host: 'https://www.youtube-nocookie.com',
       width: '100%',
       height: '100%',
       playerVars,
@@ -287,12 +294,15 @@ export class YouTubeProvider extends BaseProvider {
 
     this.player?.destroy()
     this.player = null
+    this.playerReady = false
     this.iframe = null
   }
 
   // === Event Handlers ===
 
   private onReady(): void {
+    this.playerReady = true
+
     // Start time update polling
     this.timeUpdateInterval = setInterval(() => {
       if (this.player && this.lastState === 1) {
@@ -383,7 +393,10 @@ export class YouTubeProvider extends BaseProvider {
     this.startTime = parsed.startTime
     this.endTime = parsed.endTime
 
-    if (!this.player || !this._ready) {
+    // `_ready` means setup finished, which is before YouTube has attached
+    // cueVideoById and friends to the player: calling one then threw, and the
+    // source was reported as unplayable. onReady loads the pending video.
+    if (!this.player || !this._ready || !this.playerReady) {
       this.pendingVideoId = parsed.videoId
       return
     }