Add a play button when browing to playable element

* Add a play button when browing to playable element
pathofleastresistor · Jan 21, 2024 · 20f7b08 · 20f7b08
1 parent c87b23b
commit 20f7b08
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 0 deletions.
diff --git a/polr-ytube-media-card.js b/polr-ytube-media-card.js
@@ -4699,6 +4699,7 @@ let PoLRYTubeBrowser = class PoLRYTubeBrowser extends s$1 {
         return x `
             <div class="container">
                 ${this._renderSearch()} ${this._renderNavigation()}
+                ${this._renderPlay()}
                 <polr-ytube-list
                     .hass=${this.hass}
                     .entity=${this.entity}
@@ -4849,6 +4850,28 @@ let PoLRYTubeBrowser = class PoLRYTubeBrowser extends s$1 {
             </div>
         `;
     }
+    _renderPlay() {
+        const element = this._browseHistory[this._browseHistory.length - 1];
+        console.log(element);
+        if (element === null || element === void 0 ? void 0 : element.can_play) {
+            return x `
+                <div class="playable_result">
+                    ${element.title}
+                    <mwc-button
+                        raised
+                        dense
+                        @click=${() => this.hass.callService("media_player", "play_media", {
+                entity_id: this.entity["entity_id"],
+                media_content_id: element.media_content_id,
+                media_content_type: element.media_content_type,
+            })}
+                    >
+                        Play
+                    </mwc-button>
+                </div>
+            `;
+        }
+    }
     _handleSearchInput(ev) {
         if (ev.keyCode == 13) {
             this._search();
@@ -4930,6 +4953,12 @@ let PoLRYTubeBrowser = class PoLRYTubeBrowser extends s$1 {
                     gap: 4px;
                 }
 
+                .playable_result {
+                    display: inline-flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+
                 polr-ytube-list {
                     overflow: auto;
                 }

diff --git a/src/elements/polr-ytube-browser.ts b/src/elements/polr-ytube-browser.ts
@@ -47,6 +47,7 @@ export class PoLRYTubeBrowser extends LitElement {
         return html`
             <div class="container">
                 ${this._renderSearch()} ${this._renderNavigation()}
+                ${this._renderPlay()}
                 <polr-ytube-list
                     .hass=${this.hass}
                     .entity=${this.entity}
@@ -220,6 +221,35 @@ export class PoLRYTubeBrowser extends LitElement {
         `;
     }
 
+    private _renderPlay() {
+        const element = this._browseHistory[this._browseHistory.length - 1];
+        console.log(element);
+        if (element?.can_play) {
+            return html`
+                <div class="playable_result">
+                    ${element.title}
+                    <mwc-button
+                        raised
+                        dense
+                        @click=${() =>
+                            this.hass.callService(
+                                "media_player",
+                                "play_media",
+                                {
+                                    entity_id: this.entity["entity_id"],
+                                    media_content_id: element.media_content_id,
+                                    media_content_type:
+                                        element.media_content_type,
+                                }
+                            )}
+                    >
+                        Play
+                    </mwc-button>
+                </div>
+            `;
+        }
+    }
+
     private _handleSearchInput(ev) {
         if (ev.keyCode == 13) {
             this._search();
@@ -304,6 +334,12 @@ export class PoLRYTubeBrowser extends LitElement {
                     gap: 4px;
                 }
 
+                .playable_result {
+                    display: inline-flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+
                 polr-ytube-list {
                     overflow: auto;
                 }