From b5a7d83885e0bad505efa063b5ceab37b53a4357 Mon Sep 17 00:00:00 2001
From: suroh <mx@suroh.tk>
Date: Thu, 12 Oct 2023 11:44:20 +0200
Subject: [PATCH] updated modular player to have fixed columns

---
 src/components/ModularPlayer.js | 129 ++++++++++++++++++++------------
 1 file changed, 82 insertions(+), 47 deletions(-)

diff --git a/src/components/ModularPlayer.js b/src/components/ModularPlayer.js
index 5912f43..95ec69b 100644
--- a/src/components/ModularPlayer.js
+++ b/src/components/ModularPlayer.js
@@ -176,9 +176,10 @@ class ModularPlayer extends LitElement {
 
 
   render() {
-    return html`
-${ this.details ?
-    html`<div class="player">
+    return this.details ? html`
+    <div class="player ${this.details.tracks ? 'tracks' : 'single'}">
+
+      <!-- render the tracklist -->
       ${this.details.tracks ? html`
       <div class="tracklist">
         <header>
@@ -200,56 +201,65 @@ ${ this.details ?
       </div>
       ` : html``}
 
-      <header>
-        <h2>${this.details.tracks ? this.details?.tracks[this.track].title : this.details.title}</h2>
-        ${this.details.tracks ? '' : html`<p class="details">${this.details.details}</p>`}
-      </header>
+      <!-- start of green -->
+      <div class="player-controls">
+        <!-- header -->
+        <header>
+          <h2>${this.details.tracks ? this.details?.tracks[this.track].title : this.details.title}</h2>
+          ${this.details.tracks ? '' : html`<p class="details">${this.details.details}</p>`}
+        </header>
 
-      <div class="info">
-        ${this._getTrack.render({
-          complete: () => html`
-            <span class="time_pos">${formatSeconds(this.position)}</span>
+        <!-- start of playback indicator -->
+        <div class="info">
+          ${this._getTrack.render({
+            complete: () => html`
+              <span class="time_pos">${formatSeconds(this.position)}</span>
 
-            ${this.details?.tracks ?
-              html`<mm-range
-                value=${this.position}
-                max=${this.duration}
-                step="0.1"
-                @input=${this._seekTrack}
-              ></mm-range>`
-              : html`
-              <div class="waveform">
-                <mm-range
+              ${this.details?.tracks ?
+                html`<mm-range
                   value=${this.position}
                   max=${this.duration}
                   step="0.1"
                   @input=${this._seekTrack}
-                  class="progress"
-                  ></mm-range>
-                <img class="wav-img" loading="eager" src="${this.details.image}">
-              </div>
-              `
-            }
+                ></mm-range>`
+                : html`
+                <div class="waveform">
+                  <mm-range
+                    value=${this.position}
+                    max=${this.duration}
+                    step="0.1"
+                    @input=${this._seekTrack}
+                    class="progress"
+                    ></mm-range>
+                  <img class="wav-img" loading="eager" src="${this.details.image}">
+                </div>
+                `
+              }
 
-            <span class="time_dur">${formatSeconds(this.duration)}</span>
-          `,
-          error: (err) => err
-        })}
+              <span class="time_dur">${formatSeconds(this.duration)}</span>
+            `,
+            error: (err) => err
+          })}
 
-        ${this.audio}
-      </div>
-
-      <div class="controls">
-        <div class="buttons">
-          <mm-icon name="skip-prev" @click=${this._prevTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
-          <mm-icon name="skip-b15" @click=${this._skipBackward} ?disabled=${!this.duration || this.getAudio?.status == 1} class="skip15"></mm-icon>
-          <mm-icon name="${this.playing ? 'pause' : 'play'}" @click=${this._togglePlay} ?disabled=${!this.duration || this.getAudio?.status == 1} class=${this.playing ? 'pause' : 'play'}></mm-icon>
-          <mm-icon name="skip-f15" @click=${this._skipForward} ?disabled=${!this.duration || this.getAudio?.status == 1} class="skip15"></mm-icon>
-          <mm-icon name="skip-next" @click=${this._nextTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
+          ${this.audio}
         </div>
+
+        <!-- controls -->
+        <div class="controls">
+          <div class="buttons">
+            <mm-icon name="skip-prev" @click=${this._prevTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
+            <mm-icon name="skip-b15" @click=${this._skipBackward} ?disabled=${!this.duration || this.getAudio?.status == 1} class="skip15"></mm-icon>
+            <mm-icon name="${this.playing ? 'pause' : 'play'}" @click=${this._togglePlay} ?disabled=${!this.duration || this.getAudio?.status == 1} class=${this.playing ? 'pause' : 'play'}></mm-icon>
+            <mm-icon name="skip-f15" @click=${this._skipForward} ?disabled=${!this.duration || this.getAudio?.status == 1} class="skip15"></mm-icon>
+            <mm-icon name="skip-next" @click=${this._nextTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
+          </div>
+        </div>
+        <!-- end of green -->
       </div>
     </div>
-      ` : ''}`
+    <!-- end of player -->
+      `
+      : ''
   }
 
   static styles = [ css`${unsafeCSS(MainCSS)}`, css`
@@ -273,8 +283,7 @@ ${ this.details ?
     }
 
     .player:has(.tracklist) {
-      grid-template-rows: 67% 1fr 1fr 1fr;
-      padding-block-end: 2em;
+      grid-template-rows: 60% 40%;
       gap: 0;
 
       & > header {
@@ -284,10 +293,38 @@ ${ this.details ?
       & .info {
         padding-block-end: 1.5em;
       }
+
+      & .player-controls {
+        display: grid;
+        grid-template-rows: 5em repeat(2, 1fr);
+        padding: 1em;
+
+        & header {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          font-size: 1.3em;
+        }
+      }
+    }
+
+    @container (min-width: 800px) {
+       header h2 {
+        color: pink;
+        background: red;
+      }
     }
 
     .player:has(.waveform) {
-      grid-template-rows: 0.7fr 0.7fr 1fr;
+      display: flex;
+      flex-direction: column;
+
+      & .player-controls {
+        flex-grow: 1;
+        display: grid;
+        grid-template-rows: repeat(3, 1fr);
+      }
 
       & header {
         padding-block-start: 1em;
@@ -307,8 +344,6 @@ ${ this.details ?
     }
 
     .tracklist + header {
-      text-align: center;
-      font-size: 1.25em;
     }
 
     .tracklist {