updated layout for homepage, added disabling of more buttons

public/data/music_sound_various.json

@@ -188,11 +188,11 @@
     ]
   },
   {
-    "title": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD1)",
+    "title": "MONK MIX (CD1)",
-    "details": "The House Foundation for the Arts, 2012",
+    "details": "Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012",
     "parent_dir": "music_sound_various",
-    "media": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD1)_The House Foundation for the Arts, 2012",
+    "media": "MONK MIX (CD1)_Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012",
-    "image": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD1)_The House Foundation for the Arts, 2012.jpg",
+    "image": "MONK MIX (CD1)_Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012.jpg",
     "album": true,
     "tracks": [
       {
@@ -250,11 +250,11 @@
     ]
   },
   {
-    "title": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD2)",
+    "title": "MONK MIX (CD2)",
-    "details": "The House Foundation for the Arts, 2012",
+    "details": "Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012",
     "parent_dir": "music_sound_various",
-    "media": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD2)_The House Foundation for the Arts, 2012",
+    "media": "MONK MIX (CD2)_Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012",
-    "image": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD2)_The House Foundation for the Arts, 2012.jpg",
+    "image": "MONK MIX (CD2)_Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012.jpg",
     "album": true,
     "tracks": [
       {

src/api/Router.js

@@ -52,6 +52,7 @@ export default new Router({
       short: 'ECM',
       icon: 'headphones',
       group: 'Music & Sound',
+      disabled: true,
       plugins: [
         lazy(() => import('../views/audio.js'))
       ],

src/components/Footer.js

@@ -43,7 +43,7 @@ class Footer extends LitElement {
 
   renderLink(r, first = false) {
     return html`
-      ${first && !r.disabled ? html`<span class="break"></span>` : '' }
+      ${first ? html`<span class="break"></span>` : '' }
       ${!r.disabled ? html`<a href=${r.path} class="${r.path == this.path ? 'selected' : ''}">
         <mm-icon name=${r.icon}></mm-icon>
         <span>
@@ -60,9 +60,12 @@ class Footer extends LitElement {
         ${this.navigation?.map(r => {
           if (!r.hide) {
             if (Array.isArray(r)) {
-              return r.map((r, i) => this.renderLink(r, i == 0))
+              return r.map((r, i) =>
+                html`${i == 0 ? html`<span class="break"></span>` : ''}
+                ${this.renderLink(r, false)}`
+              )
             } else {
-              return this.renderLink(r, r.path != '/')
+              return this.renderLink(r, r.path != '/' && !r.disabled)
             }
           }
         })}

src/components/ModularPlayer.js

@@ -5,7 +5,6 @@ import { formatSeconds } from '../api/utils'
 import MainCSS from '../assets/styles/main.scss?inline'
 
 import './RangeSlider.js'
-import './Loading.js'
 
 class ModularPlayer extends LitElement {
   static properties = {
@@ -17,7 +16,6 @@ class ModularPlayer extends LitElement {
     position: { state: true },
     playing: { state: true },
     track: { state: true },
-    loading: { state: true },
 
     // audio element
     audio: { state: true },
@@ -32,13 +30,16 @@ class ModularPlayer extends LitElement {
     this.track = 0
     this.position = 0
     this.duration = 0
-    this.loading = true
 
     this._initAudio()
   }
 
-  firstUpdated() {
+  willUpdate(att) {
-    console.log(this.details)
+    if (att.has('details')) {
+      this.track = 0
+    }
+
+    this.requestUpdate()
   }
 
   _getTrack = new Task(
@@ -66,16 +67,6 @@ class ModularPlayer extends LitElement {
   _initAudio() {
     this.audio = document.createElement('audio')
 
-    this.audio.addEventListener('loadstart', () => {
-      this.loading = true
-    })
-
-    this.audio.addEventListener('canplay', () => {
-      if (this.details.tracks) {
-        this.loading = false
-      }
-    })
-
     this.audio.addEventListener('play', () => {
       this.playing = true
     })
@@ -282,13 +273,16 @@ ${ this.details ?
     }
 
     .player:has(.tracklist) {
-      grid-template-rows: 67% 0.5fr 0.3fr 1fr;
+      grid-template-rows: 67% 1fr 1fr 1fr;
       padding-block-end: 2em;
       gap: 0;
 
       & > header {
-        margin-block-start: 1.5em;
+        margin-block: 1.25em;
-        margin-block-end: 2em;
+      }
+
+      & .info {
+        padding-block-end: 1.5em;
       }
     }
 

src/components/NavCard.js

@@ -15,19 +15,10 @@ class NavCard extends LitElement {
     this.route = {}
   }
 
-  firstUpdated() {
+  navigate(route) {
-    console.log(this.route)
+    route = route || this.route
-    this.shadowRoot.host.addEventListener('click', () => {
+    if (!route.disabled) {
-      if (!this.route.disabled) {
+      Router.navigate(route.path)
-        Router.navigate(this.route.path)
-      }
-    })
-  }
-
-  navigate(path) {
-    if (!this.route.disabled) {
-      path = path || this.route.path
-      Router.navigate(path)
     }
   }
 
@@ -38,23 +29,30 @@ class NavCard extends LitElement {
         <header class="title">
           <span>${this.route[0].group}</span>
         </header>
+        <div class="buttons">
           ${this.route.map(r =>
-          !r.disabled ? html`
+            html`
-            <button @click=${() => this.navigate(r.path)}>
+              <button @click=${() => this.navigate(r)}>
-              <mm-icon name=${r.icon}></mm-icon>
+                ${!r.disabled ?
-              ${r.title}
+                html`<mm-icon name=${r.icon}></mm-icon>
+                ${r.title}`
+                : html`<span class="disabled">${r.title} coming soon.</span>`
+                }
               </button>
-          ` : ''
+            `
           )}
+        </div>
       `
       :
       html`
         <header class="title">
           <span>${this.route?.title}</span>
         </header>
-        <button class="iconOnly" @click=${this.navigate}>
+        <div class="buttons single">
-          ${!this.route.disabled ? html`<mm-icon name=${this.route.icon}></mm-icon>` : html`<span>coming soon...</span>`}
+          <button class="iconOnly" @click=${() => this.navigate()}>
+            ${!this.route.disabled ? html`<mm-icon name=${this.route.icon}></mm-icon>` : html`<span class="disabled">coming soon</span>` }
           </button>
+        </div>
       `
       }
     </div>
@@ -76,11 +74,28 @@ class NavCard extends LitElement {
 
     .card {
       display: grid;
-      grid-auto-flow: rows;
+      grid-template-rows: auto 1fr;
-      gap: 0.5em;
+      gap: 0.4em;
       margin-inline: var(--inline-padding);
       cursor: pointer;
       font-size: 1.65em;
+      height: 100%;
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      gap: 0.4em;
+      padding-block-end: 0.75em;
+
+      &:not(.single) > * {
+        flex-grow: 1;
+      }
+
+      &.single {
+        justify-content: center;
+        padding-block-end: 2em;
+      }
     }
 
     mm-icon {
@@ -91,14 +106,14 @@ class NavCard extends LitElement {
     }
 
     .title {
-      padding-bottom: 0.75em;
+      padding-bottom: 0.25em;
-      margin-block-start: 1em;
+      margin-block-start: 0.75em;
       font-size: 0.75em;
       text-align: center;
       border-bottom: thin solid var(--highlight-color);
       display: flex;
       align-items: center;
-      min-height: 2.5em;
+      min-height: 2em;
 
       & > span {
         display: block;
@@ -122,8 +137,12 @@ class NavCard extends LitElement {
       text-shadow: 0 0 5px #ffffff;
       margin: 0;
 
-      &:has(span) {
+      &:has(.disabled) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         background: var(--neutral-gradient-600);
+        text-align: center;
       }
 
       &.iconOnly {

src/views/audio.js

@@ -91,7 +91,7 @@ class AudioView extends LitElement {
         </div>
       </nav>
 
-      <div class="player ${this.selected.tracks ? '' : 'single'}">
+      <div class="player ${this.selected?.tracks ? '' : 'single'}">
         <div>
           <mm-audio-player .details=${this.selected}></mm-audio-player>
         </div>