fix(player/react): initialize sources correctly during ssr

Author: mihar-22

apps/site/package.json

@@ -34,7 +34,7 @@
     "@astrojs/tailwind": "^5.0.0",
     "@astrojs/vercel": "^5.0.0",
     "@iconify-json/lucide": "^1.1.112",
-    "@maverick-js/cli": "0.40.3",
+    "@maverick-js/cli": "0.40.4",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/markdown-it": "^12.2.0",
     "@types/mdast": "^4.0.0",

packages/react/package.json

@@ -35,14 +35,14 @@
     "media-captions": "^1.0.0"
   },
   "devDependencies": {
-    "@maverick-js/cli": "0.40.3",
+    "@maverick-js/cli": "0.40.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@types/fs-extra": "^11.0.1",
     "@types/react": "^18.0.0",
     "@vitejs/plugin-react": "^4.1.0",
     "esbuild": "^0.16.17",
     "fs-extra": "^11.0.0",
-    "maverick.js": "0.40.3",
+    "maverick.js": "0.40.4",
     "media-icons": "^1.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

packages/vidstack/package.json

@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@floating-ui/dom": "^1.4.4",
-    "@maverick-js/cli": "0.40.3",
+    "@maverick-js/cli": "0.40.4",
     "@open-wc/semantic-dom-diff": "^0.19.5",
     "@open-wc/testing-helpers": "^2.1.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
@@ -66,7 +66,7 @@
     "just-debounce-it": "^3.2.0",
     "just-throttle": "^4.2.0",
     "lit-html": "^2.7.4",
-    "maverick.js": "0.40.3",
+    "maverick.js": "0.40.4",
     "media-icons": "^1.0.0",
     "postcss": "^8.4.0",
     "rimraf": "^3.0.0",

packages/vidstack/src/components/player.ts

@@ -195,6 +195,7 @@ export class MediaPlayer
     el.setAttribute('data-media-player', '');
     setAttributeIfEmpty(el, 'tabindex', '0');
     setAttributeIfEmpty(el, 'role', 'region');
+    setAttribute(el, 'data-view-type', this.$state.viewType());
 
     if (__SERVER__) this._watchTitle();
     else effect(this._watchTitle.bind(this));
@@ -207,6 +208,7 @@ export class MediaPlayer
 
   protected override onConnect(el: HTMLElement) {
     if (IS_IPHONE) setAttribute(el, 'data-iphone', '');
+    setAttribute(el, 'data-view-type', this.$state.viewType());
 
     canChangeVolume().then(this.$state.canSetVolume.set);
 

packages/vidstack/src/components/provider/provider.ts

@@ -26,22 +26,23 @@ export class MediaProvider extends Component<MediaProviderProps, MediaProviderSt
   });
 
   private _media!: MediaContext;
+  private _sources!: SourceSelection;
   private _domSources = signal<MediaSrc[]>([]);
   private _domTracks = signal<TextTrackInit[]>([]);
 
   private _loader: MediaProviderLoader | null = null;
 
   protected override onSetup() {
     this._media = useMediaContext();
-    if (__SERVER__) this._watchSources();
+    this._sources = new SourceSelection(this._domSources, this._media, this.$state.loader);
   }
 
   protected override onAttach(el: HTMLElement) {
     el.setAttribute('data-media-provider', '');
   }
 
   protected override onConnect(el: HTMLElement) {
-    this._watchSources();
+    this._sources.connect();
     new Tracks(this._domTracks, this._media);
 
     const resize = new ResizeObserver(animationFrameThrottle(this._onResize.bind(this)));
@@ -64,10 +65,6 @@ export class MediaProvider extends Component<MediaProviderProps, MediaProviderSt
     });
   }
 
-  private _watchSources() {
-    new SourceSelection(this._domSources, this._media, this.$state.loader);
-  }
-
   protected _loadRafId = -1;
 
   @method

packages/vidstack/src/components/provider/source-select.ts

@@ -13,6 +13,7 @@ import { getRequestCredentials, preconnect } from '../../utils/network';
 let warned = __DEV__ ? new Set<any>() : undefined;
 
 export class SourceSelection {
+  private _initialize = false;
   private _loaders: ReadSignal<MediaProviderLoader[]>;
 
   constructor(
@@ -30,23 +31,36 @@ export class SourceSelection {
         : [HLS_LOADER, VIDEO_LOADER, AUDIO_LOADER];
     });
 
-    if (__SERVER__) {
-      const { $state } = _media;
-      $state.sources.set(normalizeSrc(_media.$props.src()));
-      for (const src of $state.sources()) {
-        const loader = this._loaders().find((loader) => loader.canPlay(src));
-        if (loader) {
-          $state.source.set(src);
-          $state.mediaType.set(loader.mediaType(src));
-          this._loader.set(loader);
-        }
-      }
-      return;
+    const { $state } = _media;
+
+    $state.sources.set(normalizeSrc(_media.$props.src()));
+
+    // Initialize.
+    for (const src of $state.sources()) {
+      const loader = this._loaders().find((loader) => loader.canPlay(src));
+      if (!loader) continue;
+
+      const mediaType = loader.mediaType(src);
+      this._media.$state.source.set(src);
+      this._media.$state.mediaType.set(mediaType);
+      this._media.$state.inferredViewType.set(mediaType);
+
+      this._loader.set(loader);
+      this._initialize = true;
+    }
+  }
+
+  connect() {
+    const loader = this._loader();
+    if (this._initialize) {
+      this._notifySourceChange(this._media.$state.source(), loader);
+      this._notifyLoaderChange(loader);
+      this._initialize = false;
     }
 
     effect(this._onSourcesChange.bind(this));
     effect(this._onSourceChange.bind(this));
-    effect(this._onPreconnect.bind(this));
+    effect(this._onConnect.bind(this));
     effect(this._onLoadSource.bind(this));
   }
 
@@ -120,36 +134,32 @@ export class SourceSelection {
       }
     }
 
-    this._notifySourceChange(currentSource, newSource, newLoader);
-    this._notifyLoaderChange(peek(this._loader), newLoader);
+    if (newSource.src !== currentSource.src || newSource.type !== currentSource.type) {
+      this._notifySourceChange(newSource, newLoader);
+    }
+
+    if (newLoader !== peek(this._loader)) {
+      this._notifyLoaderChange(newLoader);
+    }
 
     return newSource;
   }
 
-  protected _notifySourceChange(
-    currentSource: MediaSrc,
-    newSource: MediaSrc,
-    newLoader: MediaProviderLoader | null,
-  ) {
-    if (newSource.src === currentSource.src && newSource.type === currentSource.type) return;
-    this._media.delegate._dispatch('source-change', { detail: newSource });
+  protected _notifySourceChange(src: MediaSrc, loader: MediaProviderLoader | null) {
+    this._media.delegate._dispatch('source-change', { detail: src });
     this._media.delegate._dispatch('media-type-change', {
-      detail: newLoader?.mediaType(newSource) || 'unknown',
+      detail: loader?.mediaType(src) || 'unknown',
     });
   }
 
-  protected _notifyLoaderChange(
-    currentLoader: MediaProviderLoader | null,
-    newLoader: MediaProviderLoader | null,
-  ) {
-    if (newLoader === currentLoader) return;
+  protected _notifyLoaderChange(loader: MediaProviderLoader | null) {
     this._media.delegate._dispatch('provider-change', { detail: null });
-    newLoader && peek(() => newLoader!.preconnect?.(this._media));
-    this._loader.set(newLoader);
-    this._media.delegate._dispatch('provider-loader-change', { detail: newLoader });
+    loader && peek(() => loader!.preconnect?.(this._media));
+    this._loader.set(loader);
+    this._media.delegate._dispatch('provider-loader-change', { detail: loader });
   }
 
-  private _onPreconnect() {
+  private _onConnect() {
     const provider = this._media.$provider();
     if (!provider) return;