Add support for accept keyword in media selector (#25808)

src/components/ha-selector/ha-selector-media.ts

@@ -1,6 +1,6 @@
 import { mdiPlayBox, mdiPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -84,11 +84,19 @@ export class HaMediaSelector extends LitElement {
       (stateObj &&
         supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));
 
-    return html`<ha-entity-picker
+    const hasAccept = this.selector.media?.accept?.length;
+
+    return html`
+      ${hasAccept
+        ? nothing
+        : html`
+            <ha-entity-picker
               .hass=${this.hass}
               .value=${this.value?.entity_id}
               .label=${this.label ||
-        this.hass.localize("ui.components.selectors.media.pick_media_player")}
+              this.hass.localize(
+                "ui.components.selectors.media.pick_media_player"
+              )}
               .disabled=${this.disabled}
               .helper=${this.helper}
               .required=${this.required}
@@ -96,8 +104,10 @@ export class HaMediaSelector extends LitElement {
               allow-custom-entity
               @value-changed=${this._entityChanged}
             ></ha-entity-picker>
+          `}
       ${!supportsBrowse
-        ? html`<ha-alert>
+        ? html`
+            <ha-alert>
               ${this.hass.localize(
                 "ui.components.selectors.media.browse_not_supported"
               )}
@@ -107,11 +117,15 @@ export class HaMediaSelector extends LitElement {
               .data=${this.value}
               .schema=${MANUAL_SCHEMA}
               .computeLabel=${this._computeLabelCallback}
-            ></ha-form>`
+            ></ha-form>
-        : html`<ha-card
+          `
+        : html`
+            <ha-card
               outlined
               @click=${this._pickMedia}
-            class=${this.disabled || !this.value?.entity_id ? "disabled" : ""}
+              class=${this.disabled || (!this.value?.entity_id && !hasAccept)
+                ? "disabled"
+                : ""}
             >
               <div
                 class="thumbnail ${classMap({
@@ -147,8 +161,10 @@ export class HaMediaSelector extends LitElement {
                             ? mdiPlus
                             : this.value?.metadata?.media_class
                               ? MediaClassBrowserSettings[
-                                this.value.metadata.media_class === "directory"
+                                  this.value.metadata.media_class ===
-                                  ? this.value.metadata.children_media_class ||
+                                  "directory"
+                                    ? this.value.metadata
+                                        .children_media_class ||
                                       this.value.metadata.media_class
                                     : this.value.metadata.media_class
                                 ].icon
@@ -159,10 +175,14 @@ export class HaMediaSelector extends LitElement {
               </div>
               <div class="title">
                 ${!this.value?.media_content_id
-                ? this.hass.localize("ui.components.selectors.media.pick_media")
+                  ? this.hass.localize(
+                      "ui.components.selectors.media.pick_media"
+                    )
                   : this.value.metadata?.title || this.value.media_content_id}
               </div>
-          </ha-card>`}`;
+            </ha-card>
+          `}
+    `;
   }
 
   private _computeLabelCallback = (
@@ -184,8 +204,9 @@ export class HaMediaSelector extends LitElement {
   private _pickMedia() {
     showMediaBrowserDialog(this, {
       action: "pick",
-      entityId: this.value!.entity_id!,
+      entityId: this.value?.entity_id,
-      navigateIds: this.value!.metadata?.navigateIds,
+      navigateIds: this.value?.metadata?.navigateIds,
+      accept: this.selector.media?.accept,
       mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
         fireEvent(this, "value-changed", {
           value: {

src/components/ha-selector/ha-selector-selector.ts

@@ -80,7 +80,16 @@ const SELECTOR_SCHEMAS = {
   ] as const,
   icon: [] as const,
   location: [] as const,
-  media: [] as const,
+  media: [
+    {
+      name: "accept",
+      selector: {
+        text: {
+          multiple: true,
+        },
+      },
+    },
+  ] as const,
   number: [
     {
       name: "min",

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

@@ -164,6 +164,7 @@ class DialogMediaPlayerBrowse extends LitElement {
           .navigateIds=${this._navigateIds}
           .action=${this._action}
           .preferredLayout=${this._preferredLayout}
+          .accept=${this._params.accept}
           @close-dialog=${this.closeDialog}
           @media-picked=${this._mediaPicked}
           @media-browsed=${this._mediaBrowsed}

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

@@ -78,7 +78,7 @@ export interface MediaPlayerItemId {
 export class HaMediaPlayerBrowse extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public entityId!: string;
+  @property({ attribute: false }) public entityId?: string;
 
   @property() public action: MediaPlayerBrowseAction = "play";
 
@@ -89,6 +89,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @property({ attribute: false }) public navigateIds: MediaPlayerItemId[] = [];
 
+  @property({ attribute: false }) public accept?: string[];
+
   // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
@@ -250,6 +252,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           });
         } else if (
           err.code === "entity_not_found" &&
+          this.entityId &&
           isUnavailableState(this.hass.states[this.entityId]?.state)
         ) {
           this._setError({
@@ -334,7 +337,37 @@ export class HaMediaPlayerBrowse extends LitElement {
     const subtitle = this.hass.localize(
       `ui.components.media-browser.class.${currentItem.media_class}`
     );
-    const children = currentItem.children || [];
+    let children = currentItem.children || [];
+    const canPlayChildren = new Set<string>();
+
+    // Filter children based on accept property if provided
+    if (this.accept && children.length > 0) {
+      let checks: ((t: string) => boolean)[] = [];
+
+      for (const type of this.accept) {
+        if (type.endsWith("/*")) {
+          const baseType = type.slice(0, -1);
+          checks.push((t) => t.startsWith(baseType));
+        } else if (type === "*") {
+          checks = [() => true];
+          break;
+        } else {
+          checks.push((t) => t === type);
+        }
+      }
+
+      children = children.filter((child) => {
+        const contentType = child.media_content_type.toLowerCase();
+        const canPlay =
+          child.media_content_type &&
+          checks.some((check) => check(contentType));
+        if (canPlay) {
+          canPlayChildren.add(child.media_content_id);
+        }
+        return !child.media_content_type || child.can_expand || canPlay;
+      });
+    }
+
     const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
     const childrenMediaClass = currentItem.children_media_class
       ? MediaClassBrowserSettings[currentItem.children_media_class]
@@ -367,7 +400,12 @@ export class HaMediaPlayerBrowse extends LitElement {
                                     ""
                                   )}"
                                 >
-                                  ${this.narrow && currentItem?.can_play
+                                  ${this.narrow &&
+                                  currentItem?.can_play &&
+                                  (!this.accept ||
+                                    canPlayChildren.has(
+                                      currentItem.media_content_id
+                                    ))
                                     ? html`
                                         <ha-fab
                                           mini
@@ -748,11 +786,11 @@ export class HaMediaPlayerBrowse extends LitElement {
   };
 
   private async _fetchData(
-    entityId: string,
+    entityId: string | undefined,
     mediaContentId?: string,
     mediaContentType?: string
   ): Promise<MediaPlayerItem> {
-    return entityId !== BROWSER_PLAYER
+    return entityId && entityId !== BROWSER_PLAYER
       ? browseMediaPlayer(this.hass, entityId, mediaContentId, mediaContentType)
       : browseLocalMediaPlayer(this.hass, mediaContentId);
   }

src/components/media-player/show-media-browser-dialog.ts

@@ -7,10 +7,11 @@ import type { MediaPlayerItemId } from "./ha-media-player-browse";
 
 export interface MediaPlayerBrowseDialogParams {
   action: MediaPlayerBrowseAction;
-  entityId: string;
+  entityId?: string;
   mediaPickedCallback: (pickedMedia: MediaPickedEvent) => void;
   navigateIds?: MediaPlayerItemId[];
   minimumNavigateLevel?: number;
+  accept?: string[];
 }
 
 export const showMediaBrowserDialog = (

src/data/selector.ts

@@ -303,7 +303,9 @@ export interface LocationSelectorValue {
 }
 
 export interface MediaSelector {
-  media: {} | null;
+  media: {
+    accept?: string[];
+  } | null;
 }
 
 export interface MediaSelectorValue {