version 1.0.5

Added pick random episode button.

Update screenshot.

Author: machineinteractive

index.html

@@ -775,6 +775,7 @@ <h3 id="currently-playing-title" style="padding-bottom: 8px;">
           <img id="button-play" class="player-controls-disabled" src="play.svg" alt="Play">
           <img id="button-stop" class="hidden" src="stop.svg" alt="Stop">
           <img id="button-seek-forward" class="player-controls-disabled" src="seek_forward.svg" alt="Seek back 30s">
+          <img id="button-random" src="random.svg" alt="Random">
         </div>
       </div>
     </footer>

package.json

@@ -1,13 +1,13 @@
 {
   "name": "mfp-app",
   "private": true,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "mfp-fetch-and-build": "source .venv/bin/activate && python mfp-fetch-and-build.py",
+    "mfp-fetch-and-build": "source .venv/bin/activate && python mfp-fetch-and-build.p5",
     "icons": "pwa-asset-generator public/mfp.svg ./public/assets --icon-only --favicon --type png --opaque --background '#000000'",
     "splash": "pwa-asset-generator public/mfp.svg ./public/splash --splash-only --background '#000000' --type png"
   },

public/random.svg

@@ -17,13 +17,15 @@ const header = document.querySelector<HTMLElement>('header')!
 const aboutButton = document.querySelector<HTMLImageElement>('#about-button')!
 const closeButton = document.querySelector<HTMLImageElement>('#close-button')!
 const playlist = document.querySelector<HTMLDivElement>('#playlist')!
+const episodes = document.querySelectorAll('A')
 const about = document.querySelector<HTMLDivElement>('#about')!
 const main = document.querySelector<HTMLElement>('main')!
 const mfpAudioPlayer = document.querySelector<HTMLAudioElement>('#mfp-audio-player')!
 const buttonPlay = document.querySelector<HTMLButtonElement>('#button-play')!
 const buttonStop = document.querySelector<HTMLButtonElement>('#button-stop')!
 const buttonSeekBack = document.querySelector<HTMLButtonElement>('#button-seek-back')!
 const buttonSeekForward = document.querySelector<HTMLButtonElement>('#button-seek-forward')!
+const buttonRandom = document.querySelector<HTMLButtonElement>('#button-random')!
 
 const miniPlayerTitle = document.querySelector<HTMLParagraphElement>('#mini-player-title')!
 const miniPlayerDuration = document.querySelector<HTMLParagraphElement>('#mini-player-duration')!
@@ -140,6 +142,10 @@ buttonSeekForward.addEventListener('click', () => {
   _seekForward(SEEK_30_SECONDS)
 })
 
+buttonRandom.addEventListener('click', () => {
+  _playRandomEpisode()
+})
+
 function _enableSeekButtons() {
   console.log('Enabling seek buttons')
   buttonSeekBack.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
@@ -236,13 +242,23 @@ function _seekBackward(offset: number) {
   console.log('Seeking backward:', currentTime, ' offset:', offset)
   mfpAudioPlayer.currentTime = Math.max(0, currentTime)
 }
+
 function _seekForward(offset: number) {
   const duration = Math.floor(mfpAudioPlayer.duration - 1)
   const currentTime = Math.floor(mfpAudioPlayer.currentTime + offset)
   console.log('Seeking forward:', currentTime, ' offset:', offset, ' duration:', duration)
   mfpAudioPlayer.currentTime = Math.min(duration, currentTime)
 }
 
+const _playRandomEpisode = () => {
+  console.log("play random episode...")
+  if (episodes.length > 0) {
+    const index = Math.floor(Math.random() * episodes.length)
+    const episode = episodes[index] as HTMLAnchorElement
+    episode.click()
+  }
+}
+
 if (hasMediaSession()) {
   function _updatePositionState() {
     navigator.mediaSession.setPositionState({

public/screenshot.png

@@ -206,37 +206,18 @@
       padding-right: 16px;
     }
 
-    @media (max-height: 500px) {
-      #mini-player p {
-        margin: 0;
-      }
-
-      #button-seek-back,
-      #button-seek-forward {
-        width: 16px;
-        height: 16px;
-      }
 
-      #button-play,
-      #button-stop {
-        width: 24px;
-        height: 24px;
-      }
+    #button-seek-back,
+    #button-seek-forward {
+      width: 36px;
+      height: 36px;
     }
 
-    @media (min-height: 501px) {
-
-      #button-seek-back,
-      #button-seek-forward {
-        width: 36px;
-        height: 36px;
-      }
-
-      #button-play,
-      #button-stop {
-        width: 56px;
-        height: 56px;
-      }
+    #button-play,
+    #button-stop,
+    #button-random {
+      width: 56px;
+      height: 56px;
     }
 
     /* 

src/main.ts

@@ -175,6 +175,7 @@ <h3 id="currently-playing-title" style="padding-bottom: 8px;">
           <img id="button-play" class="player-controls-disabled" src="play.svg" alt="Play">
           <img id="button-stop" class="hidden" src="stop.svg" alt="Stop">
           <img id="button-seek-forward" class="player-controls-disabled" src="seek_forward.svg" alt="Seek back 30s">
+          <img id="button-random" src="random.svg" alt="Random">
         </div>
       </div>
     </footer>