Generalise Media Library selection dialog

Allows other components and custom components to prompt for users to select an item from the library

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

@@ -22,29 +22,29 @@ import {
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
 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 { 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,
   BROWSER_PLAYER,
   MediaClassBrowserSettings,
   MediaPickedEvent,
   MediaPlayerBrowseAction,
-} 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";
-import type { HomeAssistant } from "../../types";
-import { documentationUrl } from "../../util/documentation-url";
-import "../entity/ha-entity-picker";
-import "../ha-button-menu";
-import "../ha-card";
-import "../ha-circular-progress";
-import "../ha-paper-dropdown-menu";
-import "../ha-svg-icon";
+} 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";
+import type { HomeAssistant } from "../types";
+import { documentationUrl } from "../util/documentation-url";
+import "./entity/ha-entity-picker";
+import "./ha-button-menu";
+import "./ha-card";
+import "./ha-circular-progress";
+import "./ha-paper-dropdown-menu";
+import "./ha-svg-icon";
 
 declare global {
   interface HASSDomEvents {

src/components/media-player/dialog-media-player-browse.ts → src/dialogs/media-browse/media-player-browse-dialog.ts

@@ -15,12 +15,12 @@ import type {
 } from "../../data/media-player";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import "../ha-dialog";
-import "./ha-media-player-browse";
+import "../../components/ha-dialog";
+import "../../components/ha-media-player-browse";
 import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
 
-@customElement("dialog-media-player-browse")
-class DialogMediaPlayerBrowse extends LitElement {
+@customElement("media-player-browse-dialog")
+class MediaPlayerBrowseDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @internalProperty() private _entityId!: string;
@@ -114,6 +114,6 @@ class DialogMediaPlayerBrowse extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dialog-media-player-browse": DialogMediaPlayerBrowse;
+    "media-player-browse-dialog": MediaPlayerBrowseDialog;
   }
 }

src/components/media-player/show-media-browser-dialog.ts → src/dialogs/media-browse/show-media-browser-dialog.ts

@@ -16,12 +16,5 @@ export const showMediaBrowserDialog = (
   element: HTMLElement,
   dialogParams: MediaPlayerBrowseDialogParams
 ): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-media-player-browse",
-    dialogImport: () =>
-      import(
-        /* webpackChunkName: "dialog-media-player-browse" */ "./dialog-media-player-browse"
-      ),
-    dialogParams,
-  });
+  fireEvent(element, "hass-media-browse", dialogParams);
 };

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -22,7 +22,7 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-paper-dropdown-menu";
 import "../../../components/ha-slider";
 import "../../../components/ha-svg-icon";
-import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
+import { showMediaBrowserDialog } from "../../media-browse/show-media-browser-dialog";
 import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
 import {
   ControlButton,

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

@@ -28,7 +28,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
-import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
+import { showMediaBrowserDialog } from "../../../dialogs/media-browse/show-media-browser-dialog";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import {
   computeMediaDescription,

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

@@ -15,7 +15,7 @@ import { HASSDomEvent } from "../../common/dom/fire_event";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import "../../components/ha-menu-button";
-import "../../components/media-player/ha-media-player-browse";
+import "../../components/ha-media-player-browse";
 import {
   BROWSER_PLAYER,
   MediaPickedEvent,

src/state/hass-element.ts

@@ -5,6 +5,7 @@ import { dialogManagerMixin } from "./dialog-manager-mixin";
 import DisconnectToastMixin from "./disconnect-toast-mixin";
 import { hapticMixin } from "./haptic-mixin";
 import { HassBaseEl } from "./hass-base-mixin";
+import MediaBrowserMixin from "./media-browser-mixin";
 import MoreInfoMixin from "./more-info-mixin";
 import NotificationMixin from "./notification-mixin";
 import { panelTitleMixin } from "./panel-title-mixin";
@@ -21,6 +22,7 @@ export class HassElement extends ext(HassBaseEl, [
   AuthMixin,
   ThemesMixin,
   TranslationsMixin,
+  MediaBrowserMixin,
   MoreInfoMixin,
   SidebarMixin,
   DisconnectToastMixin,

src/state/media-browser-mixin.ts

@@ -0,0 +1,48 @@
+import { showDialog } from "../dialogs/make-dialog-manager";
+import type { Constructor } from "../types";
+import type { HassBaseEl } from "./hass-base-mixin";
+import type { MediaPlayerBrowseDialogParams } from "../dialogs/media-browse/show-media-browser-dialog";
+import type { PropertyValues } from "lit-element";
+import type { HASSDomEvent } from "../common/dom/fire_event";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "hass-media-browse": MediaPlayerBrowseDialogParams;
+  }
+}
+
+let mediaBrowseImportPromise;
+const importMediaBrowse = () => {
+  if (!mediaBrowseImportPromise) {
+    mediaBrowseImportPromise = import(
+      /* webpackChunkName: "media-player-browse-dialog" */ "../dialogs/media-browse/media-player-browse-dialog"
+    );
+  }
+  return mediaBrowseImportPromise;
+};
+
+export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
+  class extends superClass {
+    protected firstUpdated(changedProps: PropertyValues) {
+      super.firstUpdated(changedProps);
+      this.addEventListener("hass-media-browse", (ev) =>
+        this._handleMediaBrowse(ev)
+      );
+
+      // Load it once we are having the initial rendering done.
+      importMediaBrowse();
+    }
+
+    private async _handleMediaBrowse(
+      ev: HASSDomEvent<MediaPlayerBrowseDialogParams>
+    ) {
+      showDialog(
+        this,
+        this.shadowRoot!,
+        "media-player-browse-dialog",
+        ev.detail,
+        importMediaBrowse
+      );
+    }
+  };