From 9876f01f7c06d6c839859a022f2b344f534a396b Mon Sep 17 00:00:00 2001
From: Rudis Muiznieks <rudis@sitosis.com>
Date: Sun, 26 Mar 2023 19:32:39 -0500
Subject: [PATCH] added a couple more favs, minor fixes

---
 site/partial/home.html | 39 ++++++++++++++++++++++++++++++++++++++-
 site/radiostasis.js    | 17 +++++++++++++++--
 site/style.css         |  4 +++-
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/site/partial/home.html b/site/partial/home.html
index f59d61e..f142ad5 100644
--- a/site/partial/home.html
+++ b/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>
diff --git a/site/radiostasis.js b/site/radiostasis.js
index 94c9b59..b6b3d68 100644
--- a/site/radiostasis.js
+++ b/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);
diff --git a/site/style.css b/site/style.css
index 1b6b4b3..36bcce1 100644
--- a/site/style.css
+++ b/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;
+  }
 }