added a couple more favs, minor fixes

site/partial/home.html

@@ -8,7 +8,7 @@
   <p>The home of streaming on-demand Old Time Radio.</p>
   <h3>What is Old Time Radio?</h3>
   <p>Old Time Radio shows are commercial audio programs that were broadcast over the air during the "Golden Age of Radio," an era that spans from the 1920s through the 1950s. Audio shows that were broadcast in the USA prior to 1972 were not subject to federal copyright protections, so as a result many of these old shows are available in the public domain.</p>
-  <p>To give you a concrete example, here are a couple of my favorite episodes that you can listen to right now:</p>
+  <p>To give you a concrete example, here are a few of my favorite episodes that you can listen to right now:</p>
   <div class='seriesList'>
     <section class='episode'
         title='The Green Hills of Earth'
@@ -44,6 +44,43 @@
           <span>1939-01-08</span>
       </div>
     </section>
+    <section class='episode'
+        title='Stage Smash'
+        data-cover='/cover/sm/gunsmoke.jpg'
+        data-series='Gunsmoke'
+        data-file='otr/gunsmoke/00434.mp3'>
+      <img alt='cover image' title='The Maltese Falcon'
+           src='/cover/sm/gunsmoke.jpg'>
+      <div>
+        <ul>
+          <li>Adventure</li>
+          <li>Western</li>
+        </ul>
+        <label>Stage Smash</label>
+        <aside>
+          <span>Gunsmoke</span>
+          <span>1960-07-31</span>
+        </aside>
+      </div>
+    </section>
+    <section class='episode'
+        title='The Maltese Falcon'
+        data-cover='/cover/sm/academy-award-theater.jpg'
+        data-series='Academy Award Theater'
+        data-file='otr/academy-award-theater/00015.mp3'>
+      <img alt='cover image' title='The Maltese Falcon'
+           src='/cover/sm/academy-award-theater.jpg'>
+      <div>
+        <ul>
+          <li>Drama</li>
+        </ul>
+        <label>The Maltese Falcon</label>
+        <aside>
+          <span>Academy Award Theater</span>
+          <span>1946-07-03</span>
+        </aside>
+      </div>
+    </section>
   </div>
   <h3>What is Radiostasis?</h3>
   <p>Radiostasis started as an Android application back in 2017, but has since been shut down and rebooted here as a web-based Old Time Radio player. All of the episodes have been sourced from the <a href='https://archive.org' target='_blank'>Internet Archive</a>, cataloged, and made available for on-demand playing. Click the <a href='#' hx-get='/partial/series.html' hx-push-url='/series' hx-target='main' hx-swap='innerHTML show:top'>All Series</a> link in the sidebar, or select a specific genre to begin exploring the library.</p>

site/radiostasis.js

@@ -75,6 +75,10 @@ class Player {
         () => player.fastForward());
       navigator.mediaSession.setActionHandler('seekbackward',
         () => player.rewind());
+      navigator.mediaSession.setActionHandler('nexttrack',
+        () => player.fastForward());
+      navigator.mediaSession.setActionHandler('previoustrack',
+        () => player.rewind());
     }
   }
 
@@ -121,7 +125,7 @@ class Player {
 
   setMetadata(series, episode, cover) {
     if ('mediaSession' in navigator) {
-      navigator.mediaSession.metadata = new MediaMetadata({
+      this.metadata = new MediaMetadata({
         title: episode,
         album: series,
         artist: 'Radiostasis',
@@ -134,6 +138,12 @@ class Player {
     }
   }
 
+  sendMetadata() {
+    if ('mediaSession' in navigator) {
+      navigator.mediaSession.metadata = this.metadata;
+    }
+  }
+
   clearMetadata() {
     if ('mediaSession' in navigator) {
       navigator.mediaSession.metadata = null;
@@ -178,6 +188,7 @@ class Player {
     this.nowPlaying.classList.remove('error');
     this.disableControls(true);
     this.stopTicker();
+    this.metadata = null;
   }
 
   error(message) {
@@ -216,6 +227,7 @@ class Player {
       this.howl.stop();
     }
 
+    this.reset();
     this.setPause();
     this.disableControls(true);
     this.setSeries('Loading episode', '/loading.gif');
@@ -235,9 +247,10 @@ class Player {
         volume: this.getVolume(),
         onload: () => {
           player.setTime();
+          player.setMetadata(series, episode, cover);
         },
         onplay: () => {
-          player.setMetadata(series, episode, cover);
+          player.sendMetadata();
           player.setSeries(series, cover);
           player.setPause();
           player.disableControls(false);

site/style.css

@@ -333,7 +333,6 @@ footer > div {
 
 #timeVolume span {
   white-space: nowrap;
-  font-size: 0.8rem;
 }
 
 #timeVolume > * {
@@ -422,4 +421,7 @@ h2 svg {
   .seriesList label {
     font-size: 1em;
   }
+  #timeVolume span {
+    font-size: 0.8rem;
+  }
 }