fix(player): improve stream type detection

vidstack · Oct 17, 2023 · 7659ac1 · 7659ac1
1 parent b1f2bc5
commit 7659ac1
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 26 deletions.
diff --git a/packages/vidstack/src/components/provider/source-select.ts b/packages/vidstack/src/components/provider/source-select.ts
@@ -7,7 +7,7 @@ import {
   type ReadSignal,
   type WriteSignal,
 } from 'maverick.js';
-import { isArray, isString } from 'maverick.js/std';
+import { isArray, isString, noop } from 'maverick.js/std';
 
 import type { MediaContext, MediaPlayerProps, MediaSrc } from '../../core';
 import {
@@ -16,7 +16,10 @@ import {
   VideoProviderLoader,
   type MediaProviderLoader,
 } from '../../providers';
+import { resolveStreamTypeFromHLSManifest } from '../../utils/hls';
+import { isHLSSrc } from '../../utils/mime';
 import { getRequestCredentials, preconnect } from '../../utils/network';
+import { isHLSSupported } from '../../utils/support';
 
 let warned = __DEV__ ? new Set<any>() : undefined;
 
@@ -184,15 +187,39 @@ export class SourceSelection {
 
   private _onLoadSource() {
     const provider = this._media.$provider(),
-      source = this._media.$state.source();
+      source = this._media.$state.source(),
+      crossorigin = peek(this._media.$state.crossorigin);
 
     if (isSameSrc(provider?.currentSrc, source)) {
       return;
     }
 
     if (this._media.$state.canLoad()) {
+      const abort = new AbortController();
+
+      if (isHLSSrc(source)) {
+        // Determined using `HLSProvider` if `hls.js` supported.
+        if (!isHLSSupported()) {
+          resolveStreamTypeFromHLSManifest(source.src as string, {
+            credentials: getRequestCredentials(crossorigin),
+            signal: abort.signal,
+          })
+            .then((streamType) => {
+              this._media.delegate._dispatch('stream-type-change', {
+                detail: streamType,
+              });
+            })
+            .catch(noop);
+        }
+      } else {
+        this._media.delegate._dispatch('stream-type-change', {
+          detail: 'on-demand',
+        });
+      }
+
       peek(() => provider?.loadSource(source, peek(this._media.$state.preload)));
-      return;
+
+      return () => abort.abort();
     }
 
     try {

diff --git a/packages/vidstack/src/components/ui/thumbnails/thumbnail-loader.ts b/packages/vidstack/src/components/ui/thumbnails/thumbnail-loader.ts
@@ -1,6 +1,7 @@
 import { effect, onDispose, peek, signal, type ReadSignal } from 'maverick.js';
 import { noop } from 'maverick.js/std';
 import type { VTTCue } from 'media-captions';
+
 import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
 import { getRequestCredentials } from '../../../utils/network';
 
@@ -73,6 +74,7 @@ export class ThumbnailsLoader {
     }
 
     return () => {
+      controller.abort();
       this.$cues.set([]);
     };
   }

diff --git a/packages/vidstack/src/core/state/media-state-manager.ts b/packages/vidstack/src/core/state/media-state-manager.ts
@@ -203,10 +203,20 @@ export class MediaStateManager extends MediaPlayerController {
   ['provider-change'](event: ME.MediaProviderChangeEvent) {
     const prevProvider = this._media.$provider(),
       newProvider = event.detail;
+
     if (prevProvider?.type === newProvider?.type) return;
+
     prevProvider?.destroy?.();
     this._media.$provider.set(event.detail);
+
     if (prevProvider && event.detail === null) this._resetMediaState(event);
+
+    this['stream-type-change'](
+      this.createEvent('stream-type-change', {
+        detail: 'unknown',
+        trigger: event,
+      }),
+    );
   }
 
   ['provider-loader-change'](event: ME.MediaProviderLoaderChangeEvent) {

diff --git a/packages/vidstack/src/providers/hls/hls.ts b/packages/vidstack/src/providers/hls/hls.ts
@@ -144,12 +144,12 @@ export class HLSController {
   private _onLevelLoaded(eventType: string, data: HLS.LevelLoadedData): void {
     if (this._ctx.$state.canPlay()) return;
 
-    const { type, live, totalduration: duration } = data.details;
+    const { type, live, totalduration: duration, targetduration } = data.details;
     const event = new DOMEvent(eventType, { detail: data });
 
     this._ctx.delegate._dispatch('stream-type-change', {
       detail: live
-        ? type === 'EVENT' && Number.isFinite(duration)
+        ? type === 'EVENT' && Number.isFinite(duration) && targetduration >= 10
           ? 'live:dvr'
           : 'live'
         : 'on-demand',

diff --git a/packages/vidstack/src/providers/hls/loader.ts b/packages/vidstack/src/providers/hls/loader.ts
@@ -1,7 +1,5 @@
-import { isString } from 'maverick.js/std';
-
 import type { MediaSrc } from '../../core';
-import { HLS_VIDEO_EXTENSIONS, HLS_VIDEO_TYPES } from '../../utils/mime';
+import { isHLSSrc } from '../../utils/mime';
 import { preconnect } from '../../utils/network';
 import { isHLSSupported } from '../../utils/support';
 import type { MediaProviderLoader } from '../types';
@@ -18,12 +16,8 @@ export class HLSProviderLoader
     preconnect('https://cdn.jsdelivr.net', 'preconnect');
   }
 
-  override canPlay({ src, type }: MediaSrc) {
-    return (
-      HLSProviderLoader.supported &&
-      isString(src) &&
-      (HLS_VIDEO_EXTENSIONS.test(src) || HLS_VIDEO_TYPES.has(type))
-    );
+  override canPlay(src: MediaSrc) {
+    return HLSProviderLoader.supported && isHLSSrc(src);
   }
 
   override async load(context) {

diff --git a/packages/vidstack/src/providers/html/html–media-events.ts b/packages/vidstack/src/providers/html/html–media-events.ts
@@ -165,7 +165,6 @@ export class HTMLMediaEvents {
   }
 
   private _onLoadedMetadata(event: Event) {
-    this._onStreamTypeChange();
     this._attachCanPlayListeners();
 
     // Sync volume state before metadata.
@@ -192,14 +191,6 @@ export class HTMLMediaEvents {
     };
   }
 
-  private _onStreamTypeChange() {
-    if (this._ctx.$state.live()) return;
-    const isLive = !Number.isFinite(this._media.duration);
-    this._delegate._dispatch('stream-type-change', {
-      detail: isLive ? 'live' : 'on-demand',
-    });
-  }
-
   private _onPlay(event: Event) {
     if (!this._ctx.$state.canPlay) return;
     this._delegate._dispatch('play', { trigger: event });
@@ -214,7 +205,6 @@ export class HTMLMediaEvents {
   }
 
   private _onCanPlay(event: Event) {
-    this._onStreamTypeChange();
     this._delegate._ready(this._getCanPlayDetail(), event);
   }
 

diff --git a/packages/vidstack/src/utils/hls.ts b/packages/vidstack/src/utils/hls.ts
@@ -0,0 +1,45 @@
+import type { MediaStreamType } from '../core';
+
+export function resolveStreamTypeFromHLSManifest(
+  manifestSrc: string,
+  requestInit?: RequestInit,
+): Promise<MediaStreamType> {
+  return fetch(manifestSrc, requestInit)
+    .then((res) => res.text())
+    .then((manifest) => {
+      const renditionURI = resolveHLSRenditionURI(manifest);
+      if (renditionURI) return resolveStreamTypeFromHLSManifest(renditionURI, requestInit);
+
+      const streamType = /EXT-X-PLAYLIST-TYPE:\s*VOD/.test(manifest) ? 'on-demand' : 'live';
+
+      if (
+        streamType === 'live' &&
+        resolveTargetDuration(manifest) >= 10 &&
+        (/#EXT-X-DVR-ENABLED:\s*true/.test(manifest) || manifest.includes('#EXT-X-DISCONTINUITY'))
+      ) {
+        return 'live:dvr';
+      }
+
+      return streamType;
+    });
+}
+
+function resolveHLSRenditionURI(manifest: string) {
+  const matches = manifest.match(/#EXT-X-STREAM-INF:[^\n]+(\n[^\n]+)*/g);
+  return matches ? matches[0].split('\n')[1].trim() : null;
+}
+
+function resolveTargetDuration(manifest: string): number {
+  const lines = manifest.split('\n');
+
+  for (const line of lines) {
+    if (line.startsWith('#EXT-X-TARGETDURATION')) {
+      const duration = parseFloat(line.split(':')[1]);
+      if (!isNaN(duration)) {
+        return duration;
+      }
+    }
+  }
+
+  return -1;
+}
diff --git a/packages/vidstack/src/utils/mime.ts b/packages/vidstack/src/utils/mime.ts
@@ -1,3 +1,5 @@
+import { isString } from 'maverick.js/std';
+
 import type { MediaSrc } from '../core';
 
 // https://github.com/cookpete/react-player/blob/master/src/patterns.js#L16
@@ -46,7 +48,7 @@ export const HLS_VIDEO_TYPES = new Set<string>([
 ]);
 
 export function isHLSSrc({ src, type }: MediaSrc): boolean {
-  return (typeof src === 'string' && HLS_VIDEO_EXTENSIONS.test(src)) || HLS_VIDEO_TYPES.has(type);
+  return (isString(src) && HLS_VIDEO_EXTENSIONS.test(src)) || HLS_VIDEO_TYPES.has(type);
 }
 
 export function isMediaStream(src: unknown): src is MediaStream {

diff --git a/packages/vidstack/src/utils/support.ts b/packages/vidstack/src/utils/support.ts
@@ -107,6 +107,8 @@ export function getSourceBuffer(): typeof SourceBuffer | undefined {
   return __SERVER__ ? undefined : window?.SourceBuffer ?? window?.WebKitSourceBuffer;
 }
 
+let _isHLSSupported: boolean | null = null;
+
 /**
  * Whether `hls.js` is supported in this environment.
  *
@@ -115,6 +117,8 @@ export function getSourceBuffer(): typeof SourceBuffer | undefined {
 export function isHLSSupported(): boolean {
   if (__SERVER__) return false;
 
+  if (_isHLSSupported !== null) return _isHLSSupported;
+
   const MediaSource = getMediaSource();
 
   if (isUndefined(MediaSource)) return false;
@@ -134,5 +138,5 @@ export function isHLSSupported(): boolean {
       isFunction(SourceBuffer.prototype.appendBuffer) &&
       isFunction(SourceBuffer.prototype.remove));
 
-  return !!isTypeSupported && !!isSourceBufferValid;
+  return (_isHLSSupported = !!isTypeSupported && !!isSourceBufferValid);
 }