Remove "authSig" from media player source (#11394)

src/data/media-player.ts

@@ -333,3 +333,12 @@ export const formatMediaTime = (seconds: number): string => {
       : secondsString.substring(14, 19);
   return secondsString.replace(/^0+/, "").padStart(4, "0");
 };
+
+export const cleanupMediaTitle = (title?: string): string | undefined => {
+  if (!title) {
+    return undefined;
+  }
+
+  const index = title.indexOf("?authSig=");
+  return index > 0 ? title.slice(0, index) : title;
+};

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -24,6 +24,7 @@ import "../../../components/ha-state-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import {
+  cleanupMediaTitle,
   computeMediaControls,
   computeMediaDescription,
   getCurrentProgress,
@@ -182,6 +183,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         entityState === "on");
 
     const mediaDescription = computeMediaDescription(stateObj);
+    const mediaTitleClean = cleanupMediaTitle(stateObj.attributes.media_title);
 
     return html`
       <ha-card>
@@ -244,24 +246,21 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
             </div>
           </div>
           ${!isUnavailable &&
-          (mediaDescription || stateObj.attributes.media_title || showControls)
+          (mediaDescription || mediaTitleClean || showControls)
             ? html`
                 <div>
                   <div class="title-controls">
-                    ${!mediaDescription && !stateObj.attributes.media_title
+                    ${!mediaDescription && !mediaTitleClean
                       ? ""
                       : html`
                           <div class="media-info">
                             <hui-marquee
-                              .text=${stateObj.attributes.media_title ||
+                              .text=${mediaTitleClean || mediaDescription}
-                              mediaDescription}
                               .active=${this._marqueeActive}
                               @mouseover=${this._marqueeMouseOver}
                               @mouseleave=${this._marqueeMouseLeave}
                             ></hui-marquee>
-                            ${!stateObj.attributes.media_title
+                            ${!mediaTitleClean ? "" : mediaDescription}
-                              ? ""
-                              : mediaDescription}
                           </div>
                         `}
                     ${!showControls

src/panels/media-browser/ha-bar-media-player.ts

@@ -30,6 +30,7 @@ import "../../components/ha-icon-button";
 import { UNAVAILABLE_STATES } from "../../data/entity";
 import {
   BROWSER_PLAYER,
+  cleanupMediaTitle,
   computeMediaControls,
   computeMediaDescription,
   formatMediaTime,
@@ -185,6 +186,7 @@ class BarMediaPlayer extends LitElement {
       : [{}];
     const mediaDescription = computeMediaDescription(stateObj);
     const mediaDuration = formatMediaTime(stateObj!.attributes.media_duration!);
+    const mediaTitleClean = cleanupMediaTitle(stateObj.attributes.media_title);
 
     return html`
       <div class="info">
@@ -195,7 +197,7 @@ class BarMediaPlayer extends LitElement {
           : ""}
         <div class="media-info">
           <hui-marquee
-            .text=${stateObj.attributes.media_title ||
+            .text=${mediaTitleClean ||
             mediaDescription ||
             this.hass.localize(`ui.card.media_player.nothing_playing`)}
             .active=${this._marqueeActive}
@@ -203,7 +205,7 @@ class BarMediaPlayer extends LitElement {
             @mouseleave=${this._marqueeMouseLeave}
           ></hui-marquee>
           <span class="secondary">
-            ${stateObj.attributes.media_title ? mediaDescription : ""}
+            ${mediaTitleClean ? mediaDescription : ""}
           </span>
         </div>
       </div>

src/util/hass-media-player-model.js

@@ -1,4 +1,5 @@
 import { supportsFeature } from "../common/entity/supports-feature";
+import { cleanupMediaTitle } from "../data/media-player";
 
 export default class MediaPlayerEntity {
   constructor(hass, stateObj) {
@@ -115,7 +116,7 @@ export default class MediaPlayerEntity {
   }
 
   get primaryTitle() {
-    return this._attr.media_title;
+    return cleanupMediaTitle(this._attr.media_title);
   }
 
   get secondaryTitle() {