Adjust local media error messages (#7017)

src/components/media-player/ha-media-player-browse.ts

@@ -22,7 +22,6 @@ import { styleMap } from "lit-html/directives/style-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
-import type { MediaPlayerItem } from "../../data/media-player";
 import {
   browseLocalMediaPlayer,
   browseMediaPlayer,
@@ -31,6 +30,7 @@ import {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
 } from "../../data/media-player";
+import type { MediaPlayerItem } from "../../data/media-player";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
@@ -357,7 +357,31 @@ export class HaMediaPlayerBrowse extends LitElement {
             `
         : html`
             <div class="container">
-              ${this.hass.localize("ui.components.media-browser.no_items")}
+              ${this.hass.localize("ui.components.media-browser.no_items")}<br />
+
+              ${currentItem.media_content_id.startsWith(
+                "media-source://media_source/local_source"
+              )
+                ? html`${this.hass.localize(
+                      "ui.components.media-browser.learn_adding_local_media",
+                      "documentation",
+                      html`<a
+                        href="${documentationUrl(
+                          this.hass,
+                          "/more-info/local-media/add-media"
+                        )}"
+                        target="_blank"
+                        rel="noreferrer"
+                        >${this.hass.localize(
+                          "ui.components.media-browser.documentation"
+                        )}</a
+                      >`
+                    )}
+                    <br />
+                    ${this.hass.localize(
+                      "ui.components.media-browser.local_media_files"
+                    )}.`
+                : ""}
             </div>
           `}
     `;
@@ -501,28 +525,31 @@ export class HaMediaPlayerBrowse extends LitElement {
   private _renderError(err: { message: string; code: string }) {
     if (err.message === "Media directory does not exist.") {
       return html`
-        <h2>No local media found.</h2>
+        <h2>
+          ${this.hass.localize(
+            "ui.components.media-browser.no_local_media_found"
+          )}
+        </h2>
         <p>
-          It looks like you have not yet created a media directory.
+          ${this.hass.localize("ui.components.media-browser.no_media_folder")}
-          <br />Create a directory with the name <b>"media"</b> in the
+          <br />
-          configuration directory of Home Assistant
+          ${this.hass.localize(
-          (${this.hass.config.config_dir}). <br />Place your video, audio and
+            "ui.components.media-browser.setup_local_help",
-          image files in this directory to be able to browse and play them in
+            "documentation",
-          the browser or on supported media players.
+            html`<a
-        </p>
+              href="${documentationUrl(
-
+                this.hass,
-        <p>
+                "/more-info/local-media/setup-media"
-          Check the
+              )}"
-          <a
+              target="_blank"
-            href="${documentationUrl(
+              rel="noreferrer"
-              this.hass,
+              >${this.hass.localize(
-              "/integrations/media_source/#local-media"
+                "ui.components.media-browser.documentation"
-            )}"
+              )}</a
-            target="_blank"
+            >`
-            rel="noreferrer"
+          )}
-            >documentation</a
+          <br />
-          >
+          ${this.hass.localize("ui.components.media-browser.local_media_files")}
-          for more info
         </p>
       `;
     }

src/translations/en.json

@@ -374,6 +374,12 @@
         "video_not_supported": "Your browser does not support the video element.",
         "media_not_supported": "The Browser Media Player does not support this type of media",
         "media_browsing_error": "Media Browsing Error",
+        "learn_adding_local_media": "Learn more about adding media in the {documentation}.",
+        "local_media_files": "Place your video, audio and image files in the media directory to be able to browse and play them in the browser or on supported media players.",
+        "documentation": "documentation",
+        "no_local_media_found": "No local media found",
+        "no_media_folder": "It looks like you have not yet created a media directory.",
+        "setup_local_help": "Check the {documentation} on how to setup local media.",
         "class": {
           "album": "Album",
           "app": "App",

src/util/documentation-url.ts

@@ -2,6 +2,10 @@ import { HomeAssistant } from "../types";
 
 export const documentationUrl = (hass: HomeAssistant, path: string) => {
   return `https://${
-    hass.config.version.includes("b") ? "rc" : "www"
+    hass.config.version.includes("b")
+      ? "rc"
+      : hass.config.version.includes("dev")
+      ? "next"
+      : "www"
   }.home-assistant.io${path}`;
 };