fix(player): show buffering in default layout when stream type unknown

vidstack · Oct 3, 2023 · cfd4670 · cfd4670
1 parent 1d3427d
commit cfd4670
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 30 deletions.
diff --git a/packages/react/src/components/layouts/default/audio-layout.tsx b/packages/react/src/components/layouts/default/audio-layout.tsx
@@ -6,6 +6,13 @@ import { createDefaultMediaLayout, type DefaultMediaLayoutProps } from './shared
  * DefaultAudioLayout
  * -----------------------------------------------------------------------------------------------*/
 
+const MediaLayout = createDefaultMediaLayout({
+  type: 'audio',
+  smLayoutWhen: '(width < 576)',
+  SmallLayout: DefaultAudioLayoutSmall,
+  LargeLayout: DefaultAudioLayoutLarge,
+});
+
 export interface DefaultAudioLayoutProps extends DefaultMediaLayoutProps {}
 
 /**
@@ -23,12 +30,9 @@ export interface DefaultAudioLayoutProps extends DefaultMediaLayoutProps {}
  * </MediaPlayer>
  * ```
  */
-const DefaultAudioLayout = createDefaultMediaLayout({
-  type: 'audio',
-  smLayoutWhen: '(width < 576)',
-  SmallLayout: DefaultAudioLayoutSmall,
-  LargeLayout: DefaultAudioLayoutLarge,
-});
+function DefaultAudioLayout(props: DefaultAudioLayoutProps) {
+  return <MediaLayout {...props} />;
+}
 
 DefaultAudioLayout.displayName = 'DefaultAudioLayout';
 export { DefaultAudioLayout };
diff --git a/packages/react/src/components/layouts/default/shared-layout.tsx b/packages/react/src/components/layouts/default/shared-layout.tsx
@@ -114,15 +114,17 @@ export interface CreateDefaultMediaLayout {
   smLayoutWhen: string;
   SmallLayout: React.FC;
   LargeLayout: React.FC;
+  UnknownStreamType?: React.FC;
 }
 
-export const createDefaultMediaLayout = ({
+export function createDefaultMediaLayout({
   type,
   smLayoutWhen,
   SmallLayout,
   LargeLayout,
-}: CreateDefaultMediaLayout) =>
-  React.forwardRef<HTMLDivElement, DefaultMediaLayoutProps>(
+  UnknownStreamType,
+}: CreateDefaultMediaLayout) {
+  const Layout = React.forwardRef<HTMLDivElement, DefaultMediaLayoutProps>(
     (
       {
         className,
@@ -143,7 +145,7 @@ export const createDefaultMediaLayout = ({
       const $canLoad = useMediaState('canLoad'),
         $viewType = useMediaState('viewType'),
         $streamType = useMediaState('streamType'),
-        isMatch = $viewType === type && $streamType !== 'unknown',
+        isMatch = $viewType === type,
         isForcedLayout = typeof smallLayoutWhen === 'boolean',
         isSmallLayoutMatch = usePlayerQuery(isString(smallLayoutWhen) ? smallLayoutWhen : ''),
         isSmallLayout = isForcedLayout ? smallLayoutWhen : isSmallLayoutMatch;
@@ -169,7 +171,15 @@ export const createDefaultMediaLayout = ({
                 Icons: icons,
               }}
             >
-              {isSmallLayout ? <SmallLayout /> : <LargeLayout />}
+              {$streamType === 'unknown' ? (
+                UnknownStreamType ? (
+                  <UnknownStreamType />
+                ) : null
+              ) : isSmallLayout ? (
+                <SmallLayout />
+              ) : (
+                <LargeLayout />
+              )}
               {children}
             </DefaultLayoutContext.Provider>
           ) : null}
@@ -178,6 +188,10 @@ export const createDefaultMediaLayout = ({
     },
   );
 
+  Layout.displayName = 'DefaultMediaLayout';
+  return Layout;
+}
+
 /* -------------------------------------------------------------------------------------------------
  * DefaultTooltip
  * -----------------------------------------------------------------------------------------------*/

diff --git a/packages/react/src/components/layouts/default/video-layout.tsx b/packages/react/src/components/layouts/default/video-layout.tsx
@@ -26,6 +26,14 @@ import {
  * DefaultVideoLayout
  * -----------------------------------------------------------------------------------------------*/
 
+const MediaLayout = createDefaultMediaLayout({
+  type: 'video',
+  smLayoutWhen: '(width < 576) or (height < 380)',
+  SmallLayout: DefaultVideoLayoutSmall,
+  LargeLayout: DefaultVideoLayoutLarge,
+  UnknownStreamType: DefaultBufferingIndicator,
+});
+
 export interface DefaultVideoLayoutProps extends DefaultMediaLayoutProps {}
 
 /**
@@ -44,12 +52,9 @@ export interface DefaultVideoLayoutProps extends DefaultMediaLayoutProps {}
  * </MediaPlayer>
  * ```
  */
-const DefaultVideoLayout = createDefaultMediaLayout({
-  type: 'video',
-  smLayoutWhen: '(width < 576) or (height < 380)',
-  SmallLayout: DefaultVideoLayoutSmall,
-  LargeLayout: DefaultVideoLayoutLarge,
-});
+function DefaultVideoLayout(props: DefaultVideoLayoutProps) {
+  return <MediaLayout {...props} />;
+}
 
 DefaultVideoLayout.displayName = 'DefaultVideoLayout';
 export { DefaultVideoLayout };

diff --git a/packages/vidstack/player/styles/default/layouts/video.css b/packages/vidstack/player/styles/default/layouts/video.css
@@ -398,6 +398,7 @@
 
 /* center big play button inside buffering indicator. */
 :where(.vds-video-layout[data-size='sm'] .vds-buffering-indicator) {
+  --media-buffering-size: 64px;
   transform: translate(-2px, -4px);
 }
 

diff --git a/packages/vidstack/src/components/layouts/default-layout.ts b/packages/vidstack/src/components/layouts/default-layout.ts
@@ -7,8 +7,7 @@ import {
   type ReadSignal,
 } from 'maverick.js';
 
-import { PlayerQueryList, type MediaContext } from '../../core';
-import { useMediaContext } from '../../core/api/media-context';
+import { PlayerQueryList } from '../../core';
 
 export class DefaultLayout extends Component<DefaultLayoutProps> {
   static props: DefaultLayoutProps = {
@@ -21,7 +20,6 @@ export class DefaultLayout extends Component<DefaultLayoutProps> {
     noModal: false,
   };
 
-  private _media!: MediaContext;
   private _whenQueryList!: PlayerQueryList;
   private _whenSmQueryList!: PlayerQueryList;
 
@@ -30,8 +28,7 @@ export class DefaultLayout extends Component<DefaultLayoutProps> {
 
   @prop
   get isMatch() {
-    const { streamType } = this._media.$state;
-    return this._whenQueryList.matches && streamType() !== 'unknown';
+    return this._whenQueryList.matches;
   }
 
   @prop
@@ -40,8 +37,6 @@ export class DefaultLayout extends Component<DefaultLayoutProps> {
   }
 
   protected override onSetup(): void {
-    this._media = useMediaContext();
-
     const { when, smallWhen, thumbnails, translations, menuGroup, noModal } = this.$props;
 
     this._whenQueryList = PlayerQueryList.create(when);

diff --git a/packages/vidstack/src/elements/define/layouts/default/audio-layout-element.ts b/packages/vidstack/src/elements/define/layouts/default/audio-layout-element.ts
@@ -4,6 +4,8 @@ import { Host } from 'maverick.js/element';
 import { setAttribute } from 'maverick.js/std';
 
 import { DefaultAudioLayout } from '../../../../components/layouts/default-layout';
+import type { MediaContext } from '../../../../core';
+import { useMediaContext } from '../../../../core/api/media-context';
 import { $computed } from '../../../lit/directives/signal';
 import { LitElement, type LitRenderer } from '../../../lit/lit-element';
 import { SlotManager } from '../slot-manager';
@@ -27,7 +29,11 @@ export class MediaAudioLayoutElement
 {
   static tagName = 'media-audio-layout';
 
+  private _media!: MediaContext;
+
   protected onSetup() {
+    this._media = useMediaContext();
+
     this.classList.add('vds-audio-layout');
     this.menuContainer = createMenuContainer('vds-audio-layout');
 
@@ -50,7 +56,8 @@ export class MediaAudioLayoutElement
   }
 
   private _render() {
-    return this.isMatch
+    const { streamType } = this._media.$state;
+    return this.isMatch && streamType() !== 'unknown'
       ? this.isSmallLayout
         ? DefaultAudioLayoutSmall()
         : DefaultAudioLayoutLarge()

diff --git a/packages/vidstack/src/elements/define/layouts/default/video-layout-element.ts b/packages/vidstack/src/elements/define/layouts/default/video-layout-element.ts
@@ -1,15 +1,21 @@
 import { html } from 'lit-html';
-import { computed, effect, onDispose } from 'maverick.js';
+import { effect, onDispose } from 'maverick.js';
 import { Host } from 'maverick.js/element';
 import { setAttribute } from 'maverick.js/std';
 
 import { DefaultVideoLayout } from '../../../../components/layouts/default-layout';
-import { $computed, $signal } from '../../../lit/directives/signal';
+import type { MediaContext } from '../../../../core';
+import { useMediaContext } from '../../../../core/api/media-context';
+import { $computed } from '../../../lit/directives/signal';
 import { LitElement, type LitRenderer } from '../../../lit/lit-element';
 import { SlotManager } from '../slot-manager';
 import { DefaultLayoutIconsLoader } from './icons-loader';
 import { createMenuContainer } from './shared-layout';
-import { DefaultVideoLayoutLarge, DefaultVideoLayoutSmall } from './video-layout';
+import {
+  DefaultBufferingIndicator,
+  DefaultVideoLayoutLarge,
+  DefaultVideoLayoutSmall,
+} from './video-layout';
 
 /**
  * @docs {@link https://www.vidstack.io/docs/player/core-concepts/layouts/default}
@@ -27,7 +33,11 @@ export class MediaVideoLayoutElement
 {
   static tagName = 'media-video-layout';
 
+  private _media!: MediaContext;
+
   protected onSetup() {
+    this._media = useMediaContext();
+
     this.classList.add('vds-video-layout');
     this.menuContainer = createMenuContainer('vds-video-layout');
 
@@ -50,8 +60,11 @@ export class MediaVideoLayoutElement
   }
 
   private _render() {
+    const { streamType } = this._media.$state;
     return this.isMatch
-      ? this.isSmallLayout
+      ? streamType() === 'unknown'
+        ? DefaultBufferingIndicator()
+        : this.isSmallLayout
         ? DefaultVideoLayoutSmall()
         : DefaultVideoLayoutLarge()
       : null;

diff --git a/packages/vidstack/src/elements/define/layouts/default/video-layout.ts b/packages/vidstack/src/elements/define/layouts/default/video-layout.ts
@@ -103,7 +103,7 @@ function StartDuration() {
   `;
 }
 
-function DefaultBufferingIndicator() {
+export function DefaultBufferingIndicator() {
   return html`
     <div class="vds-buffering-indicator">
       <svg class="vds-buffering-icon" fill="none" viewBox="0 0 120 120" aria-hidden="true">