feat: add playing bars to playing queue item

Author: punxaphil

src/components/group.ts

@@ -1,10 +1,10 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
 import Store from '../model/store';
 import { dispatchActivePlayerId, getSpeakerList } from '../utils/utils';
 import { SESSION_STORAGE_PLAYER_ID } from '../constants';
 import { MediaPlayer } from '../model/media-player';
+import './playing-bars';
 
 class Group extends LitElement {
   @property({ attribute: false }) store!: Store;
@@ -41,16 +41,7 @@ class Group extends LitElement {
           </div>
         </div>
 
-        ${when(
-          this.player.isPlaying(),
-          () => html`
-            <div class="bars" slot="meta">
-              <div></div>
-              <div></div>
-              <div></div>
-            </div>
-          `,
-        )}
+        <sonos-playing-bars slot="meta" .show=${this.player.isPlaying()}></sonos-playing-bars>
       </mwc-list-item>
     `;
   }
@@ -91,17 +82,6 @@ class Group extends LitElement {
 
   static get styles() {
     return css`
-      @keyframes sound {
-        0% {
-          opacity: 0.35;
-          height: 0.15rem;
-        }
-        100% {
-          opacity: 1;
-          height: 1rem;
-        }
-      }
-
       mwc-list-item {
         height: fit-content;
         margin: 1rem;
@@ -166,37 +146,6 @@ class Group extends LitElement {
       .compact div {
         margin: 0.1rem;
       }
-
-      .bars {
-        width: 0.55rem;
-        position: relative;
-        margin-left: 1rem;
-      }
-
-      .bars > div {
-        background: var(--secondary-text-color);
-        bottom: 0.05rem;
-        height: 0.15rem;
-        position: absolute;
-        width: 0.15rem;
-        animation: sound 0ms -800ms linear infinite alternate;
-        display: block;
-      }
-
-      .bars > div:first-child {
-        left: 0.05rem;
-        animation-duration: 474ms;
-      }
-
-      .bars > div:nth-child(2) {
-        left: 0.25rem;
-        animation-duration: 433ms;
-      }
-
-      .bars > div:last-child {
-        left: 0.45rem;
-        animation-duration: 407ms;
-      }
     `;
   }
 }

src/components/media-row.ts

@@ -4,11 +4,13 @@ import Store from '../model/store';
 import { MediaPlayerItem } from '../types';
 import { mediaItemTitleStyle } from '../constants';
 import { renderFavoritesItem } from '../utils/favorites-utils';
+import './playing-bars';
 
 class MediaRow extends LitElement {
   @property({ attribute: false }) store!: Store;
   @property({ attribute: false }) item!: MediaPlayerItem;
   @property({ type: Boolean }) selected = false;
+  @property({ type: Boolean }) playing = false;
 
   render() {
     const { itemBackgroundColor, itemTextColor, selectedItemBackgroundColor, selectedItemTextColor } =
@@ -21,7 +23,10 @@ class MediaRow extends LitElement {
     return html`
       <mwc-list-item hasMeta ?selected=${this.selected} ?activated=${this.selected} class="button" style="${cssVars}">
         <div class="row">${renderFavoritesItem(this.item)}</div>
-        <slot slot="meta"></slot>
+        <div class="meta-content" slot="meta">
+          <sonos-playing-bars .show=${this.playing}></sonos-playing-bars>
+          <slot></slot>
+        </div>
       </mwc-list-item>
     `;
   }
@@ -74,6 +79,12 @@ class MediaRow extends LitElement {
           align-self: center;
           flex: 1;
         }
+
+        .meta-content {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
       `,
       mediaItemTitleStyle,
     ];

src/components/playing-bars.ts

@@ -0,0 +1,73 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+
+class PlayingBars extends LitElement {
+  @property({ type: Boolean }) show = false;
+
+  render() {
+    if (!this.show) {
+      return nothing;
+    }
+    return html`
+      <div class="bars">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      @keyframes sound {
+        0% {
+          opacity: 0.35;
+          height: 0.15rem;
+        }
+        100% {
+          opacity: 1;
+          height: 1rem;
+        }
+      }
+
+      :host {
+        display: flex;
+        align-items: center;
+      }
+
+      .bars {
+        width: 0.55rem;
+        height: 1rem;
+        position: relative;
+        margin-left: 1rem;
+      }
+
+      .bars > div {
+        background: var(--secondary-text-color);
+        bottom: 0;
+        height: 0.15rem;
+        position: absolute;
+        width: 0.15rem;
+        animation: sound 0ms -800ms linear infinite alternate;
+        display: block;
+      }
+
+      .bars > div:first-child {
+        left: 0.05rem;
+        animation-duration: 474ms;
+      }
+
+      .bars > div:nth-child(2) {
+        left: 0.25rem;
+        animation-duration: 433ms;
+      }
+
+      .bars > div:last-child {
+        left: 0.45rem;
+        animation-duration: 407ms;
+      }
+    `;
+  }
+}
+
+customElements.define('sonos-playing-bars', PlayingBars);

src/sections/queue.ts

@@ -45,11 +45,14 @@ export class Queue extends LitElement {
           ${until(
             this.store.hassService.getQueue(this.store.activePlayer).then((queue) =>
               queue.map((item, index) => {
+                const isSelected = selected !== undefined && selected === index;
+                const isPlaying = isSelected && this.activePlayer.isPlaying();
                 return html`
                   <sonos-media-row
                     @click=${() => this.onMediaItemSelected(index)}
                     .item=${item}
-                    .selected=${selected !== undefined && selected === index}
+                    .selected=${isSelected}
+                    .playing=${isPlaying}
                     .store=${this.store}
                     ><ha-icon-button
                       hide=${this.editMode && nothing}