styling fixes

punxaphil · Oct 27, 2024 · ce819ee · ce819ee
1 parent 7ca9807
commit ce819ee
Showing 1 changed file with 38 additions and 31 deletions.
diff --git a/src/sections/queue.ts b/src/sections/queue.ts
@@ -3,44 +3,49 @@ import { property, state } from 'lit/decorators.js';
 import Store from '../model/store';
 import { MediaPlayer } from '../model/media-player';
 import { listStyle, MEDIA_ITEM_SELECTED } from '../constants';
-import { until } from 'lit-html/directives/until.js';
 import { customEvent } from '../utils/utils';
 import { mdiPlaylistEdit, mdiTrashCanOutline } from '@mdi/js';
 import '../components/media-row';
 import { MediaPlayerEntityFeature } from '../types';
+import { until } from 'lit-html/directives/until.js';
 
 const { SHUFFLE_SET, REPEAT_SET } = MediaPlayerEntityFeature;
 
 export class Queue extends LitElement {
   @property() store!: Store;
   @state() activePlayer!: MediaPlayer;
   @state() editMode = false;
+  @state() firstRender = true;
 
   render() {
     this.activePlayer = this.store.activePlayer;
     const selected = this.activePlayer.attributes.queue_position - 1;
-    return html`${until(
-      this.store.hassService.getQueue(this.activePlayer).then(
-        (queue) => html`
-          <div class="header">
-            <div class="title">
-              ${this.store.config.queueTitle ??
-              (this.activePlayer.attributes.media_playlist
-                ? `Playlist: ${this.activePlayer.attributes.media_playlist}`
-                : `Play Queue`) + (this.activePlayer.attributes.media_channel ? ' (not active)' : '')}
-            </div>
-            <div class="header-icons">
-              <sonos-ha-player .store=${this.store} .features=${[SHUFFLE_SET, REPEAT_SET]}></sonos-ha-player>
-              <ha-icon-button
-                .path=${mdiPlaylistEdit}
-                @click=${this.toggleEditMode}
-                selected=${this.editMode || nothing}
-              ></ha-icon-button>
-            </div>
-          </div>
-          <div class="list">
-            <mwc-list multi>
-              ${queue.map((item, index) => {
+    return html`${this.renderQueue(selected)}`;
+  }
+
+  private renderQueue(selected: number) {
+    this.firstRender = false;
+    return html`
+      <div class="header">
+        <div class="title">
+          ${this.store.config.queueTitle ??
+          (this.activePlayer.attributes.media_playlist ?? `Play Queue`) +
+            (this.activePlayer.attributes.media_channel ? ' (not active)' : '')}
+        </div>
+        <div class="header-icons">
+          <sonos-ha-player .store=${this.store} .features=${[SHUFFLE_SET, REPEAT_SET]}></sonos-ha-player>
+          <ha-icon-button
+            .path=${mdiPlaylistEdit}
+            @click=${this.toggleEditMode}
+            selected=${this.editMode || nothing}
+          ></ha-icon-button>
+        </div>
+      </div>
+      <div class="list">
+        <mwc-list multi>
+          ${until(
+            this.store.hassService.getQueue(this.store.activePlayer).then((queue) =>
+              queue.map((item, index) => {
                 return html`
                   <sonos-media-row
                     @click=${() => this.onMediaItemSelected(index)}
@@ -56,12 +61,12 @@ export class Queue extends LitElement {
                     ></ha-icon-button
                   ></sonos-media-row>
                 `;
-              })}
-            </mwc-list>
-          </div>
-        `,
-      ),
-    )}`;
+              }),
+            ),
+          )}
+        </mwc-list>
+      </div>
+    `;
   }
 
   private onMediaItemSelected = async (index: number) => {
@@ -92,8 +97,12 @@ export class Queue extends LitElement {
         .header {
           display: flex;
           justify-content: space-between;
+          align-items: center;
           padding: 0.5rem;
         }
+        .header-icons {
+          white-space: nowrap;
+        }
         .header-icons > * {
           display: inline-block;
         }
@@ -110,11 +119,9 @@ export class Queue extends LitElement {
           --mdc-icon-button-size: 1.5rem;
           --mdc-icon-size: 1rem;
         }
-
         *[selected] {
           color: var(--accent-color);
         }
-
         *[hide] {
           display: none;
         }