Handle resolve media and cannot play errors (#11878)

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

@@ -9,6 +9,8 @@ import {
 import { ResolvedMediaSource } from "../../data/media_source";
 import { HomeAssistant } from "../../types";
 
+export const ERR_UNSUPPORTED_MEDIA = "Unsupported Media";
+
 export class BrowserMediaPlayer {
   private player: HTMLAudioElement;
 
@@ -25,6 +27,9 @@ export class BrowserMediaPlayer {
     private onChange: () => void
   ) {
     const player = new Audio(this.resolved.url);
+    if (player.canPlayType(resolved.mime_type) === "") {
+      throw new Error(ERR_UNSUPPORTED_MEDIA);
+    }
     player.autoplay = true;
     player.volume = volume;
     player.addEventListener("play", this._handleChange);

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

@@ -49,9 +49,13 @@ import {
   SUPPORT_VOLUME_SET,
 } from "../../data/media-player";
 import { ResolvedMediaSource } from "../../data/media_source";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../types";
 import "../lovelace/components/hui-marquee";
-import { BrowserMediaPlayer } from "./browser-media-player";
+import {
+  BrowserMediaPlayer,
+  ERR_UNSUPPORTED_MEDIA,
+} from "./browser-media-player";
 
 declare global {
   interface HASSDomEvents {
@@ -125,13 +129,25 @@ export class BarMediaPlayer extends LitElement {
       throw Error("Only browser supported");
     }
     this._tearDownBrowserPlayer();
-    this._browserPlayer = new BrowserMediaPlayer(
-      this.hass,
-      item,
-      resolved,
-      this._browserPlayerVolume,
-      () => this.requestUpdate("_browserPlayer")
-    );
+    try {
+      this._browserPlayer = new BrowserMediaPlayer(
+        this.hass,
+        item,
+        resolved,
+        this._browserPlayerVolume,
+        () => this.requestUpdate("_browserPlayer")
+      );
+    } catch (err: any) {
+      if (err.message === ERR_UNSUPPORTED_MEDIA) {
+        showAlertDialog(this, {
+          text: this.hass.localize(
+            "ui.components.media-browser.media_not_supported"
+          ),
+        });
+      } else {
+        throw err;
+      }
+    }
     this._newMediaExpected = false;
   }
 

src/panels/media-browser/ha-panel-media-browser.ts

@@ -27,7 +27,10 @@ import {
   MediaPickedEvent,
   MediaPlayerItem,
 } from "../../data/media-player";
-import { resolveMediaSource } from "../../data/media_source";
+import {
+  ResolvedMediaSource,
+  resolveMediaSource,
+} from "../../data/media_source";
 import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, Route } from "../../types";
@@ -224,11 +227,19 @@ class PanelMediaBrowser extends LitElement {
     }
 
     this._player.showResolvingNewMediaPicked();
-
-    const resolvedUrl = await resolveMediaSource(
-      this.hass,
-      item.media_content_id
-    );
+    let resolvedUrl: ResolvedMediaSource;
+    try {
+      resolvedUrl = await resolveMediaSource(this.hass, item.media_content_id);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.components.media-browser.media_browsing_error"
+        ),
+        text: err.message,
+      });
+      this._player.hideResolvingNewMediaPicked();
+      return;
+    }
 
     if (resolvedUrl.mime_type.startsWith("audio/")) {
       this._player.playItem(item, resolvedUrl);