fix(player): show title in default layout

vidstack · Mar 6, 2024 · 6adb7f4 · 6adb7f4
1 parent 9a10613
commit 6adb7f4
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 35 deletions.
diff --git a/packages/react/src/components/layouts/default/ui/title.tsx b/packages/react/src/components/layouts/default/ui/title.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { useActiveTextTrack } from '../../../../hooks/use-active-text-track';
+import { useMediaState } from '../../../../hooks/use-media-state';
 import { ChapterTitle } from '../../../ui/chapter-title';
 import { Title } from '../../../ui/title';
 
@@ -8,19 +10,15 @@ import { Title } from '../../../ui/title';
  * -----------------------------------------------------------------------------------------------*/
 
 function DefaultTitle() {
-  return <Title className="vds-title" />;
+  const $started = useMediaState('started'),
+    $title = useMediaState('title'),
+    $hasChapters = useActiveTextTrack('chapters');
+  return $hasChapters && ($started || !$title) ? (
+    <ChapterTitle className="vds-chapter-title" />
+  ) : (
+    <Title className="vds-chapter-title" />
+  );
 }
 
 DefaultTitle.displayName = 'DefaultTitle';
 export { DefaultTitle };
-
-/* -------------------------------------------------------------------------------------------------
- * DefaultChapterTitle
- * -----------------------------------------------------------------------------------------------*/
-
-function DefaultChapterTitle() {
-  return <ChapterTitle className="vds-chapter-title" />;
-}
-
-DefaultChapterTitle.displayName = 'DefaultChapterTitle';
-export { DefaultChapterTitle };
diff --git a/packages/react/src/components/layouts/default/video-layout.tsx b/packages/react/src/components/layouts/default/video-layout.tsx
@@ -34,7 +34,7 @@ import { DefaultChaptersMenu } from './ui/menus/chapters-menu';
 import { DefaultSettingsMenu } from './ui/menus/settings-menu';
 import { DefaultTimeSlider, DefaultVolumePopup } from './ui/sliders';
 import { DefaultTimeInfo } from './ui/time';
-import { DefaultChapterTitle } from './ui/title';
+import { DefaultTitle } from './ui/title';
 
 /* -------------------------------------------------------------------------------------------------
  * DefaultVideoLayout
@@ -128,7 +128,7 @@ function DefaultVideoLargeLayout() {
           {slot(slots, 'playButton', <DefaultPlayButton tooltip="top start" />)}
           <DefaultVolumePopup orientation="horizontal" slots={slots} />
           <DefaultTimeInfo slots={slots} />
-          {slot(slots, 'chapterTitle', <DefaultChapterTitle />)}
+          {slot(slots, 'chapterTitle', <DefaultTitle />)}
           {slot(slots, 'captionButton', <DefaultCaptionButton tooltip="top" />)}
           {menuGroup === 'bottom' && <DefaultVideoMenus slots={slots} />}
           {slot(slots, 'airPlayButton', <DefaultAirPlayButton tooltip="top" />)}
@@ -183,7 +183,7 @@ function DefaultVideoSmallLayout() {
         <DefaultControlsSpacer />
         <Controls.Group className="vds-controls-group">
           <DefaultTimeInfo slots={slots} />
-          {slot(slots, 'chapterTitle', <DefaultChapterTitle />)}
+          {slot(slots, 'chapterTitle', <DefaultTitle />)}
           {slot(slots, 'fullscreenButton', <DefaultFullscreenButton tooltip="top end" />)}
         </Controls.Group>
         <Controls.Group className="vds-controls-group">

diff --git a/packages/react/src/components/ui/chapter-title.tsx b/packages/react/src/components/ui/chapter-title.tsx
@@ -7,7 +7,12 @@ import { Primitive, type PrimitivePropsWithRef } from '../primitives/nodes';
  * Chapter Title
  * -----------------------------------------------------------------------------------------------*/
 
-export interface ChapterTitleProps extends PrimitivePropsWithRef<'span'> {}
+export interface ChapterTitleProps extends PrimitivePropsWithRef<'span'> {
+  /**
+   * Specify text to be displayed when no chapter title is available.
+   */
+  defaultText?: string;
+}
 
 /**
  * This component is used to load and display the current chapter title based on the text tracks
@@ -20,11 +25,11 @@ export interface ChapterTitleProps extends PrimitivePropsWithRef<'span'> {}
  * ```
  */
 const ChapterTitle = React.forwardRef<HTMLElement, ChapterTitleProps>(
-  ({ children, ...props }, forwardRef) => {
+  ({ defaultText = '', children, ...props }, forwardRef) => {
     const $chapterTitle = useChapterTitle();
     return (
       <Primitive.span {...props} ref={forwardRef as any}>
-        {$chapterTitle}
+        {$chapterTitle || defaultText}
         {children}
       </Primitive.span>
     );

diff --git a/packages/vidstack/mangle.json b/packages/vidstack/mangle.json
@@ -819,5 +819,7 @@
   "_watchQuality": "lo",
   "_observeSliders": "mo",
   "_roots": "oo",
-  "_submenu": "no"
+  "_submenu": "no",
+  "_watchChapterTitle": "po",
+  "_watchColorScheme": "qo"
 }
diff --git a/packages/vidstack/src/elements/define/chapter-title-element.ts b/packages/vidstack/src/elements/define/chapter-title-element.ts
@@ -4,7 +4,18 @@ import { Host } from 'maverick.js/element';
 import { watchCueTextChange, type MediaContext } from '../../core';
 import { useMediaContext } from '../../core/api/media-context';
 
-class ChapterTitle extends Component {}
+interface ChapterTitleProps {
+  /**
+   * Specify text to be displayed when no chapter title is available.
+   */
+  defaultText: string;
+}
+
+class ChapterTitle extends Component<ChapterTitleProps> {
+  static props: ChapterTitleProps = {
+    defaultText: '',
+  };
+}
 
 /**
  * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/chapter-title}
@@ -27,10 +38,12 @@ export class MediaChapterTitleElement extends Host(HTMLElement, ChapterTitle) {
   protected onConnect() {
     const tracks = this._media.textTracks;
     watchCueTextChange(tracks, 'chapters', this._chapterTitle.set);
+    effect(this._watchChapterTitle.bind(this));
+  }
 
-    effect(() => {
-      this.textContent = this._chapterTitle();
-    });
+  private _watchChapterTitle() {
+    const { defaultText } = this.$props;
+    this.textContent = this._chapterTitle() || defaultText();
   }
 }
 

diff --git a/packages/vidstack/src/elements/define/layouts/default/ui/title.ts b/packages/vidstack/src/elements/define/layouts/default/ui/title.ts
@@ -1,13 +1,25 @@
 import { html } from 'lit-html';
+import { signal } from 'maverick.js';
+
+import { useMediaContext, useMediaState } from '../../../../../core/api/media-context';
+import type { TextTrack } from '../../../../../core/tracks/text/text-track';
+import { watchActiveTextTrack } from '../../../../../core/tracks/text/utils';
+import { $signal } from '../../../../lit/directives/signal';
 
 export function DefaultTitle() {
-  return html`<media-title class="vds-title"></media-title>`;
+  return $signal(() => {
+    const { textTracks } = useMediaContext(),
+      { title, started } = useMediaState(),
+      $hasChapters = signal<TextTrack | null>(null);
+
+    watchActiveTextTrack(textTracks, 'chapters', $hasChapters.set);
+
+    return $hasChapters() && (started() || !title())
+      ? DefaultChapterTitle()
+      : html`<media-title class="vds-chapter-title"></media-title>`;
+  });
 }
 
 export function DefaultChapterTitle() {
   return html`<media-chapter-title class="vds-chapter-title"></media-chapter-title>`;
 }
-
-export function DefaultTitleGroup() {
-  return html`<div class="vds-title-group">${DefaultTitle()}${DefaultChapterTitle()}</div>`;
-}
diff --git a/packages/vidstack/src/elements/define/layouts/default/video-layout.ts b/packages/vidstack/src/elements/define/layouts/default/video-layout.ts
@@ -21,7 +21,7 @@ import { DefaultChaptersMenu } from './ui/menu/chapters-menu';
 import { DefaultSettingsMenu } from './ui/menu/settings-menu';
 import { DefaultTimeSlider, DefaultVolumePopup } from './ui/slider';
 import { DefaultTimeInfo } from './ui/time';
-import { DefaultChapterTitle } from './ui/title';
+import { DefaultTitle } from './ui/title';
 
 export function DefaultVideoLayoutLarge() {
   return [
@@ -49,7 +49,7 @@ export function DefaultVideoLayoutLarge() {
                 DefaultPlayButton({ tooltip: 'top start' }),
                 DefaultVolumePopup({ orientation: 'horizontal' }),
                 DefaultTimeInfo(),
-                DefaultChapterTitle(),
+                DefaultTitle(),
                 DefaultCaptionButton({ tooltip: 'top' }),
                 DefaultBottomMenuGroup(),
                 DefaultAirPlayButton({ tooltip: 'top' }),
@@ -117,11 +117,7 @@ export function DefaultVideoLayoutSmall() {
         ${DefaultControlsSpacer()}
 
         <media-controls-group class="vds-controls-group">
-          ${[
-            DefaultTimeInfo(),
-            DefaultChapterTitle(),
-            DefaultFullscreenButton({ tooltip: 'top end' }),
-          ]}
+          ${[DefaultTimeInfo(), DefaultTitle(), DefaultFullscreenButton({ tooltip: 'top end' })]}
         </media-controls-group>
 
         <media-controls-group class="vds-controls-group">