fix(player): title not updating after init

closes #1028
vidstack · Dec 1, 2023 · 1c82248 · 1c82248
1 parent b58616a
commit 1c82248
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/packages/vidstack/src/components/player.ts b/packages/vidstack/src/components/player.ts
@@ -240,14 +240,18 @@ export class MediaPlayer
     this.canPlayQueue._reset();
   }
 
+  private _skipTitleUpdate = false;
   private _watchTitle() {
-    const { title, providedTitle, live, viewType } = this.$state,
+    if (this._skipTitleUpdate) {
+      this._skipTitleUpdate = false;
+      return;
+    }
+
+    const { title, live, viewType } = this.$state,
       isLive = live(),
       type = uppercaseFirstChar(viewType()),
       typeText = type !== 'Unknown' ? `${isLive ? 'Live ' : ''}${type}` : isLive ? 'Live' : 'Media';
 
-    this.el?.setAttribute('data-title', providedTitle());
-
     const currentTitle = title();
 
     setAttribute(
@@ -256,6 +260,11 @@ export class MediaPlayer
       currentTitle ? `${typeText} - ${currentTitle}` : typeText + ' Player',
     );
 
+    // Title attribute is removed to prevent popover interfering with user hovering over player.
+    if (!__SERVER__ && this.el && customElements.get(this.el.localName)) {
+      this._skipTitleUpdate = true;
+    }
+
     this.el?.removeAttribute('title');
   }
 
@@ -377,6 +386,19 @@ export class MediaPlayer
   @prop
   readonly orientation: ScreenOrientationController;
 
+  /**
+   * The title of the current media.
+   */
+  @prop
+  get title() {
+    return peek(this.$state.providedTitle);
+  }
+
+  set title(newTitle) {
+    if (this._skipTitleUpdate) return;
+    this.$state.providedTitle.set(newTitle);
+  }
+
   /**
    * A list of all `VideoQuality` objects representing the set of available video renditions.
    *

diff --git a/packages/vidstack/src/core/api/player-props.ts b/packages/vidstack/src/core/api/player-props.ts
@@ -22,6 +22,7 @@ export const mediaPlayerProps: MediaPlayerProps = {
   preload: 'metadata',
   preferNativeHLS: false,
   src: '',
+  title: '',
   controlsDelay: 2000,
   viewType: 'unknown',
   streamType: 'unknown',
@@ -31,7 +32,6 @@ export const mediaPlayerProps: MediaPlayerProps = {
   keyDisabled: false,
   keyTarget: 'player',
   keyShortcuts: MEDIA_KEY_SHORTCUTS,
-  title: '',
 };
 
 export interface MediaStateAccessors
@@ -56,9 +56,9 @@ export interface MediaPlayerProps
     | 'poster'
     | 'preload'
     | 'playbackRate'
-    | 'title'
     | 'viewType'
     | 'volume'
+    | 'title'
     // live
     | 'streamType'
     | 'liveEdgeTolerance'

diff --git a/packages/vidstack/src/core/state/media-state-sync.ts b/packages/vidstack/src/core/state/media-state-sync.ts
@@ -47,10 +47,7 @@ export class MediaStateSync extends MediaPlayerController {
     this.$state.providedPoster.set(poster());
     this.$state.providedStreamType.set(streamType());
     this.$state.providedViewType.set(viewType());
-    this.$state.providedTitle.set(
-      // Title attribute is removed to prevent popover interfering with user hovering over player.
-      this.el?.getAttribute('data-title') || title(),
-    );
+    this.$state.providedTitle.set(title());
   }
 
   private _watchLogLevel() {