added some simple transitions in audio player

src/assets/styles/main.scss

@@ -23,3 +23,9 @@ body {
 
   --box-shadow: 0 0 6px 2px #00000010;
 }
+
+@media screen and (min-width: 1280px) {
+  body {
+    font-size: 32px;
+  }
+}

src/components/AudioCard.js

@@ -1,6 +1,6 @@
 import { LitElement, css, html, unsafeCSS } from 'lit'
 
-import MainCSS from '../assets/styles/main.scss'
+import MainCSS from '../assets/styles/main.scss?inline'
 
 import './SvgIcon.js'
 

src/components/ModularPlayer.js

@@ -2,7 +2,6 @@ import { LitElement, html, css,unsafeCSS } from 'lit'
 import { Task } from '@lit-labs/task'
 import { formatSeconds } from '../api/utils'
 
-import Photo from '/images/Meredith Monk (1974) Photo Lauretta Harris.jpg'
 import MainCSS from '../assets/styles/main.scss?inline'
 
 import './RangeSlider.js'
@@ -203,7 +202,7 @@ ${ this.details ?
           </ul>
         </div>
       </div>
-      ` : html`<img class="bg-img" src=${Photo} />`}
+      ` : html``}
 
       <header>
         <h2>${this.details.tracks ? this.details?.tracks[this.track] : this.details.title}</h2>
@@ -231,7 +230,7 @@ ${ this.details ?
                   @input=${this.seekTrack}
                   class="progress"
                   ></mm-range>
-                <img class="wav-img" src="/media${this.details.media}.png">
+                <img class="wav-img" loading="eager" src="/media${this.details.media}.png">
               </div>
               `
             }
@@ -306,18 +305,6 @@ ${ this.details ?
       }
     }
 
-    .bg-img {
-      position: absolute;
-      inset: 0;
-      object-fit: cover;
-      object-position: center 25%;
-      opacity: 0.2;
-      mix-blend-mode: overlay;
-      scale: 1.1;
-      width: 100%;
-      height: 100%;
-    }
-
     header {
       color: var(--netural-100, white);
       font-size: 1.5em;

src/components/VideoPlayer.js

@@ -46,10 +46,12 @@ class VideoPlayer extends LitElement {
 
   willUpdate(att) {
     if (att.has('media')) {
+      console.log(this.media)
       this.videoEl.src = this.media
 
       if (this.autoplay) {
-        this.togglePlay()
+        this.playing = true
+        this.videoEl.play()
         this.interact()
       }
     }

src/views/audio.js

@@ -1,7 +1,7 @@
-import { LitElement, css, html, unsafeCSS } from 'lit'
+import { LitElement, css, html } from 'lit'
 import { Task } from '@lit-labs/task'
 
-import MainCSS from '../assets/styles/main.scss?inline'
+import Photo from '/images/Meredith Monk (1974) Photo Lauretta Harris.jpg'
 
 // components
 import '../components/Header.js'
@@ -26,7 +26,14 @@ class AudioView extends LitElement {
 
   firstUpdated() {
     this.addEventListener('select-audio', ({ detail }) => {
-      this.selected =  { ...detail, media: `${Router.route.path}/${detail.media}` }
+      const div = this.shadowRoot.querySelector('mm-audio-player')
+
+      div.addEventListener('transitionend', () => {
+        this.selected =  { ...detail, media: `${Router.route.path}/${detail.media}` }
+        div.classList.remove('unloading')
+      })
+
+      div.classList.add('unloading')
     })
 
     this.addEventListener('next-track', () => {
@@ -53,10 +60,10 @@ class AudioView extends LitElement {
   )
 
   _skipTrack(direction) {
-      const idx = (this.selected.idx + direction) % this.tracks.length
+    const idx = (this.selected.idx + direction) % this.tracks.length
-      const detail = { ...this.tracks[idx], idx }
+    const detail = { ...this.tracks[idx], idx }
 
-      this.selected =  { ...detail, media: `${Router.route.path}/${detail.media}` }
+    this.selected =  { ...detail, media: `${Router.route.path}/${detail.media}` }
   }
 
   render() {
@@ -68,7 +75,13 @@ class AudioView extends LitElement {
           <div class="scroll-items">
             ${this._getAudio.render({
               pending: () => html`<mm-loading style="--fill-color: grey"></mm-loading>`,
-              complete: () => html`${this.tracks.map((t, i) => html`<mm-acard idx=${i} icon=${t.album ? 'album' : 'play-circle'} ?selected=${t.title == this.selected.title && t.details == this.selected.details} .details=${t}></mm-acard>`)}`,
+              complete: () => html`${this.tracks.map((t, i) => html`
+                 <mm-acard
+                   idx=${i}
+                   icon=${t.album ? 'album' : 'play-circle'}
+                   ?selected=${t.title == this.selected.title && t.details == this.selected.details}
+                   .details=${t}
+                 ></mm-acard>`)}`,
               error: (err) => html`Error: ${err}`
             })}
           </div>
@@ -76,6 +89,7 @@ class AudioView extends LitElement {
 
         <div class="player">
           <div>
+            ${this.selected.tracks ? '' : html`<img class="bg-img" src=${Photo} />` }
             <mm-audio-player .details=${this.selected}></mm-audio-player>
           </div>
         </div>
@@ -85,7 +99,7 @@ class AudioView extends LitElement {
     `
   }
 
-  static styles = [ css`${unsafeCSS(MainCSS)}`, css`
+  static styles = css`
     :host {
       display: flex;
       flex-direction: column;
@@ -125,20 +139,42 @@ class AudioView extends LitElement {
 
     .player {
       position: relative;
+
+      > div {
+        position: absolute;
+        inset: 0;
+        border-radius: 0.75em 0 0 0.75em;
+        background: var(--green-gradient-400, lightgrey);
+        margin-block-end: 1em;
+        overflow: hidden;
+
+        .bg-img {
+          position: absolute;
+          inset: 0;
+          object-fit: cover;
+          object-position: center 25%;
+          opacity: 0.2;
+          scale: 1.1;
+          width: 100%;
+          height: 100%;
+        }
+      }
     }
 
-    .player > div {
+
-      position: absolute;
+    mm-audio-player {
-      inset: 0;
+      transition: opacity 0.125s 0.125s ease-in-out;
-      border-radius: 0.75em 0 0 0.75em;
+    }
-      background: var(--green-gradient-400, lightgrey);
+
-      margin-block-end: 1em;
+    .unloading {
+      opacity: 0;
+      transition: opacity 0.125s ease-in-out;
     }
 
     mm-footer {
       z-index: 1;
     }
-  ` ]
+  `
 }
 
 

src/views/images.js

@@ -2,7 +2,7 @@ import { LitElement, css, html, unsafeCSS } from 'lit'
 import { Task } from '@lit-labs/task'
 import Router from '../api/Router.js'
 
-import MainCSS from '../assets/styles/main.scss'
+import MainCSS from '../assets/styles/main.scss?inline'
 
 import '../components/Header.js'
 import '../components/Footer.js'