feature: make it possible to view and manage the queue (aka playlist)

punxaphil · Nov 7, 2024 · 48fe406 · 48fe406
1 parent 7875fbd
commit 48fe406
Show file tree

Hide file tree

Showing 18 changed files with 336 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ Sonos Card for Home Assistant UI with a focus on managing multiple media players
 * Configurable styling
 * Dynamic volume level slider
 * Track progress bar
+* Show, play and remove tracks of play queue
 
 and more!
 
@@ -24,6 +25,7 @@ and more!
 ![groups.png](https://github.com/punxaphil/custom-sonos-card/raw/main/img/groups.png)
 ![grouping.png](https://github.com/punxaphil/custom-sonos-card/raw/main/img/grouping.png)
 ![volumes.png](https://github.com/punxaphil/custom-sonos-card/raw/main/img/volumes.png)
+![queue.png](https://github.com/punxaphil/custom-sonos-card/raw/main/img/queue.png)
 
 ## Support the project
 
@@ -112,6 +114,7 @@ sections: # see explanation further up
   - grouping
   - media browser
   - player
+  - queue
 widthPercentage: 75 # default is 100. Use this to change the width of the card.
 heightPercentage: 75 # default is 100. Use this to change the height of the card. Set to 'auto' to make the card height adjust to the content.
 entityId: media_player.bedroom # Forces this player to be the selected one on loading the card (overrides url param etc)
@@ -237,6 +240,9 @@ mediaBrowserTitle: My favorites # default is 'All favorites'. Use this to change
 
 # volumes specific
 hideVolumeCogwheel: true # default is false. Will hide the cogwheel for the volumes section.
+
+# queue specific
+queueTitle: Songs # default is 'Play Queue'. Use this to change the title for the queue section.
 ```
 
 ## Using individual section cards

diff --git a/img/card_mod.png b/img/card_mod.png
diff --git a/img/queue.png b/img/queue.png
diff --git a/src/card.ts b/src/card.ts
@@ -11,7 +11,7 @@ import { when } from 'lit/directives/when.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { cardDoesNotContainAllSections, getHeight, getWidth, isSonosCard } from './utils/utils';
 
-const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES } = Section;
+const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES, QUEUE } = Section;
 const TITLE_HEIGHT = 2;
 const FOOTER_HEIGHT = 5;
 
@@ -71,6 +71,11 @@ export class Card extends LitElement {
                     `,
                   ],
                   [VOLUMES, () => html` <sonos-volumes .store=${this.store}></sonos-volumes>`],
+                  [
+                    QUEUE,
+                    () =>
+                      html`<sonos-queue .store=${this.store} @item-selected=${this.onMediaItemSelected}></sonos-queue>`,
+                  ],
                 ])
               : html`<div class="no-players">No supported players found</div>`
           }
@@ -181,7 +186,7 @@ export class Card extends LitElement {
   footerStyle() {
     return styleMap({
       height: `${FOOTER_HEIGHT}rem`,
-      paddingBottom: '1rem',
+      padding: '0 1rem',
     });
   }
 
@@ -209,10 +214,13 @@ export class Card extends LitElement {
             ? GROUPS
             : sections.includes(GROUPING)
               ? GROUPING
-              : VOLUMES;
+              : sections.includes(QUEUE)
+                ? QUEUE
+                : VOLUMES;
     } else {
       this.section = PLAYER;
     }
+
     newConfig.mediaBrowserItemsPerRow = newConfig.mediaBrowserItemsPerRow || 4;
     // support custom:auto-entities
     if (newConfig.entities?.length && newConfig.entities[0].entity) {

diff --git a/src/components/footer.ts b/src/components/footer.ts
@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { CardConfig, Section } from '../types';
 import './section-button';
 
-const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES } = Section;
+const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES, QUEUE } = Section;
 
 class Footer extends LitElement {
   @property({ attribute: false }) config!: CardConfig;
@@ -16,6 +16,7 @@ class Footer extends LitElement {
       [MEDIA_BROWSER, icons?.mediaBrowser ?? 'mdi:star-outline'],
       [GROUPS, icons?.groups ?? 'mdi:speaker-multiple'],
       [GROUPING, icons?.grouping ?? 'mdi:checkbox-multiple-marked-circle-outline'],
+      [QUEUE, icons?.queue ?? 'mdi:queue-first-in-last-out'],
       [VOLUMES, icons?.volumes ?? 'mdi:tune'],
     ];
     sections = sections.filter(([section]) => !this.config.sections || this.config.sections?.includes(section));
@@ -40,7 +41,7 @@ class Footer extends LitElement {
         justify-content: space-between;
       }
       :host > * {
-        padding: 1rem;
+        padding: 1rem 0;
       }
     `;
   }

diff --git a/src/components/media-browser-icons.ts b/src/components/media-browser-icons.ts
@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import Store from '../model/store';
 import { CardConfig, MediaPlayerItem } from '../types';
 import { customEvent } from '../utils/utils';
-import { MEDIA_ITEM_SELECTED, mediaBrowserTitleStyle } from '../constants';
+import { MEDIA_ITEM_SELECTED, mediaItemTitleStyle } from '../constants';
 import { itemsWithFallbacks, renderMediaBrowserItem } from '../utils/media-browser-utils';
 import { styleMap } from 'lit-html/directives/style-map.js';
 
@@ -43,7 +43,7 @@ export class MediaBrowserIcons extends LitElement {
 
   static get styles() {
     return [
-      mediaBrowserTitleStyle,
+      mediaItemTitleStyle,
       css`
         .icons {
           display: flex;

diff --git a/src/components/media-browser-list.ts b/src/components/media-browser-list.ts
@@ -1,10 +1,10 @@
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import Store from '../model/store';
 import { CardConfig, MediaPlayerItem } from '../types';
 import { customEvent } from '../utils/utils';
-import { listStyle, MEDIA_ITEM_SELECTED, mediaBrowserTitleStyle } from '../constants';
-import { itemsWithFallbacks, renderMediaBrowserItem } from '../utils/media-browser-utils';
+import { listStyle, MEDIA_ITEM_SELECTED } from '../constants';
+import { itemsWithFallbacks } from '../utils/media-browser-utils';
 
 export class MediaBrowserList extends LitElement {
   @property({ attribute: false }) store!: Store;
@@ -18,44 +18,18 @@ export class MediaBrowserList extends LitElement {
       <mwc-list multi class="list">
         ${itemsWithFallbacks(this.items, this.config).map((item) => {
           return html`
-            <mwc-list-item class="button" @click=${() => this.dispatchEvent(customEvent(MEDIA_ITEM_SELECTED, item))}>
-              <div class="row">${renderMediaBrowserItem(item)}</div>
-            </mwc-list-item>
+            <sonos-media-row
+              @click=${() => this.dispatchEvent(customEvent(MEDIA_ITEM_SELECTED, item))}
+              .item=${item}
+            ></sonos-media-row>
           `;
         })}
       </mwc-list>
     `;
   }
 
   static get styles() {
-    return [
-      css`
-        .button {
-          --icon-width: 35px;
-          height: 40px;
-        }
-
-        .row {
-          display: flex;
-        }
-
-        .thumbnail {
-          width: var(--icon-width);
-          height: var(--icon-width);
-          background-size: contain;
-          background-repeat: no-repeat;
-          background-position: left;
-        }
-
-        .title {
-          font-size: 1.1rem;
-          align-self: center;
-          flex: 1;
-        }
-      `,
-      mediaBrowserTitleStyle,
-      listStyle,
-    ];
+    return listStyle;
   }
 }
 

diff --git a/src/components/media-row.ts b/src/components/media-row.ts
@@ -0,0 +1,76 @@
+import { css, html, LitElement, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import Store from '../model/store';
+import { MediaPlayerItem } from '../types';
+import { mediaItemTitleStyle } from '../constants';
+import { renderMediaBrowserItem } from '../utils/media-browser-utils';
+
+class MediaRow extends LitElement {
+  @property({ attribute: false }) store!: Store;
+  @property({ attribute: false }) item!: MediaPlayerItem;
+  @property({ type: Boolean }) selected = false;
+
+  render() {
+    return html`
+      <mwc-list-item hasMeta ?selected=${this.selected} ?activated=${this.selected} class="button">
+        <div class="row">${renderMediaBrowserItem(this.item)}</div>
+        <slot slot="meta"></slot>
+      </mwc-list-item>
+    `;
+  }
+
+  protected async firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    await this.scrollToSelected(_changedProperties);
+  }
+
+  protected async updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+    await this.scrollToSelected(_changedProperties);
+  }
+
+  private async scrollToSelected(_changedProperties: PropertyValues) {
+    await new Promise((r) => setTimeout(r, 0));
+    if (this.selected && _changedProperties.has('selected')) {
+      this.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }
+
+  static get styles() {
+    return [
+      css`
+        .mdc-deprecated-list-item__text {
+          width: 100%;
+        }
+        .button {
+          margin: 0.3rem;
+          border-radius: 0.3rem;
+          background: var(--secondary-background-color);
+          --icon-width: 35px;
+          height: 40px;
+        }
+
+        .row {
+          display: flex;
+        }
+
+        .thumbnail {
+          width: var(--icon-width);
+          height: var(--icon-width);
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: left;
+        }
+
+        .title {
+          font-size: 1.1rem;
+          align-self: center;
+          flex: 1;
+        }
+      `,
+      mediaItemTitleStyle,
+    ];
+  }
+}
+
+customElements.define('sonos-media-row', MediaRow);
diff --git a/src/constants.ts b/src/constants.ts
@@ -21,7 +21,7 @@ export const listStyle = css`
   }
 `;
 
-export const mediaBrowserTitleStyle = css`
+export const mediaItemTitleStyle = css`
   .title {
     color: var(--secondary-text-color);
     font-weight: bold;

diff --git a/src/editor/advanced-editor.ts b/src/editor/advanced-editor.ts
@@ -56,6 +56,10 @@ export const ADVANCED_SCHEMA = [
     name: 'mediaBrowserTitle',
     type: 'string',
   },
+  {
+    name: 'queueTitle',
+    type: 'string',
+  },
   {
     name: 'artworkHostname',
     type: 'string',

diff --git a/src/editor/editor.ts b/src/editor/editor.ts
@@ -19,7 +19,14 @@ class CardEditor extends BaseEditor {
 
   protected render(): TemplateResult {
     if (!this.config.sections || this.config.sections.length === 0) {
-      this.config.sections = [Section.PLAYER, Section.VOLUMES, Section.GROUPS, Section.GROUPING, Section.MEDIA_BROWSER];
+      this.config.sections = [
+        Section.PLAYER,
+        Section.VOLUMES,
+        Section.GROUPS,
+        Section.GROUPING,
+        Section.MEDIA_BROWSER,
+        Section.QUEUE,
+      ];
     }
 
     return html`

diff --git a/src/editor/general-editor.ts b/src/editor/general-editor.ts
@@ -1,16 +1,18 @@
 import { html, TemplateResult } from 'lit';
 import { BaseEditor } from './base-editor';
 
+const options = {
+  player: 'Player',
+  'media browser': 'Media Browser',
+  groups: 'Groups',
+  grouping: 'Grouping',
+  volumes: 'Volumes',
+  queue: 'Queue',
+};
 export const GENERAL_SCHEMA = [
   {
     type: 'multi_select',
-    options: {
-      player: 'Player',
-      'media browser': 'Media Browser',
-      groups: 'Groups',
-      grouping: 'Grouping',
-      volumes: 'Volumes',
-    },
+    options: options,
     name: 'sections',
   },
   {

diff --git a/src/main.ts b/src/main.ts
@@ -5,6 +5,8 @@ import { Groups } from './sections/groups';
 import { MediaBrowser } from './sections/media-browser';
 import './sections/volumes';
 import './components/ha-player';
+import { Queue } from './sections/queue';
+import { Volumes } from './sections/volumes';
 
 window.customCards.push({
   type: 'sonos-card',
@@ -18,3 +20,5 @@ customElements.define('sonos-grouping', Grouping);
 customElements.define('sonos-groups', Groups);
 customElements.define('sonos-media-browser', MediaBrowser);
 customElements.define('sonos-player', Player);
+customElements.define('sonos-volumes', Volumes);
+customElements.define('sonos-queue', Queue);