version 1.2.1

Refactor styles for improved responsive layouts.

Update player controls: added pause icon; added fullscreen button;
and updated styles for improve responsive layouts.

Update Open Graph image url.

Author: machineinteractive

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [1.2.1] - 2026-01-17
+
+## Added
+
+- Fullscreen button to mini-player controls
+
+
+### Changed
+
+- Refactor styles for improved responsive layouts
+- Change player controls stop button to pause button
+- Update Open Graph image url
+
 ## [1.2.0] - 2026-01-13
 
 ### Added

index.html

@@ -20,7 +20,7 @@
   <meta property="og:description" content="A PWA remix of musicforprogramming.net" />
   <meta property="og:image:width" content="512" />
   <meta property="og:image:height" content="512" />
-  <meta property="og:image" content="https://mfp-app.pages.dev/mfp.png" />
+  <meta property="og:image" content="https://mfp-app.netlify.app//mfp.png" />
   <meta name="apple-mobile-web-app-capable" content="yes">
   <link rel="apple-touch-startup-image" href="/splash/apple-splash-2048-2732.png"
     media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
@@ -106,11 +106,10 @@
   <main>
     <header>
       <div class="header-nav">
-        <div style="display: inline; width:24px; height: 24px;"></div>
+        <div class="header-button header-button-spacer"></div>
         <p class="ibm-plex-mono-semibold">mfp;</p>
         <div class="stacked-button-container">
-          <img id="about-button" src="about.svg" alt="About Screen Open Button" width="24" height="24">
-
+          <img class="header-button" id="about-button" src="about.svg" alt="About Screen Open Button">
         </div>
       </div>
     </header>
@@ -901,10 +900,12 @@
           <img id="mp-button-seek-back" class="player-button-small player-controls-disabled" src="seek_back.svg"
             alt="Seek back 30s">
           <img id="mp-button-play" class="player-button-large player-controls-disabled" src="play.svg" alt="Play">
-          <img id="mp-button-stop" class="player-button-large hidden" src="stop.svg" alt="Stop">
+          <img id="mp-button-pause" class="player-button-large hidden" src="pause_circle.svg" alt="Pause">
           <img id="mp-button-seek-forward" class="player-button-small player-controls-disabled" src="seek_forward.svg"
             alt="Seek back 30s">
           <img id="mp-button-random" class="player-button-small" src="random.svg" alt="Pick Random Episode">
+          <img id="mp-button-fullscreen" src="keyboard_arrow_up.svg" class="player-button-small"
+            alt="Open Fullscreen Player">
         </div>
       </div>
     </footer>
@@ -917,7 +918,7 @@
       </div>
 
       <h2>About</h2>
-      <h4>mfp; version: 1.2.0</h4>
+      <h4>mfp; version: 1.2.1</h4>
 
       <p>
         mfp; is a PWA remix of
@@ -947,9 +948,11 @@ <h4>mfp; version: 1.2.0</h4>
 
   <div id="fullscreen-player">
     <div class="fullscreen-container">
-      <div id="fullscreen-player-header">
-        <img id="fullscreen-close-button" src="keyboard_arrow_down.svg" alt="Fullscreen Close Button" width="24"
-          height="24">
+
+      <div class="fullscreen-header">
+        <img class="header-button" id="fullscreen-close-button" src="keyboard_arrow_down.svg"
+          alt="Fullscreen Close Button">
+        <div class="header-button header-button-spacer"></div>
       </div>
 
       <div id="fullscreen-player-main">
@@ -972,7 +975,7 @@ <h4>mfp; version: 1.2.0</h4>
         <img id="fs-button-seek-back" class="player-button-small player-controls-disabled" src="seek_back.svg"
           alt="Seek back 30s">
         <img id="fs-button-play" class="player-button-large player-controls-disabled" src="play.svg" alt="Play">
-        <img id="fs-button-stop" class="player-button-large hidden" src="stop.svg" alt="Stop">
+        <img id="fs-button-pause" class="player-button-large hidden" src="pause_circle.svg" alt="Pause">
         <img id="fs-button-seek-forward" class="player-button-small player-controls-disabled" src="seek_forward.svg"
           alt="Seek back 30s">
         <img id="fs-button-skip-next" class="player-button-small player-controls-disabled" src="skip_next.svg"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mfp-app",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

public/keyboard_arrow_up.svg

@@ -22,10 +22,11 @@ const episodes = episodesContainer.querySelectorAll('A')
 const about = document.querySelector<HTMLDialogElement>('#about')!
 const mfpAudioPlayer = document.querySelector<HTMLAudioElement>('#mfp-audio-player')!
 const miniPlayerPlayButton = document.querySelector<HTMLButtonElement>('#mp-button-play')!
-const miniPlayerStopButton = document.querySelector<HTMLButtonElement>('#mp-button-stop')!
+const miniPlayerPauseButton = document.querySelector<HTMLButtonElement>('#mp-button-pause')!
 const miniPlayerSeekBackButton = document.querySelector<HTMLButtonElement>('#mp-button-seek-back')!
 const miniPlayerSeekForwardButton = document.querySelector<HTMLButtonElement>('#mp-button-seek-forward')!
 const miniPlayerRandomEpisodeButton = document.querySelector<HTMLButtonElement>('#mp-button-random')!
+const miniPlayerFullscreenButton = document.querySelector<HTMLButtonElement>('#mp-button-fullscreen')!
 
 const miniPlayerTitle = document.querySelector<HTMLParagraphElement>('#mini-player-title')!
 const miniPlayerDuration = document.querySelector<HTMLParagraphElement>('#mini-player-duration')!
@@ -38,7 +39,7 @@ const fullscreenPlayerDuration = document.querySelector<HTMLParagraphElement>('#
 const fullscreenPlayerPlaylistButton = document.querySelector<HTMLButtonElement>('#fs-button-playlist')!
 
 const fullscreenPlayerPlayButton = document.querySelector<HTMLButtonElement>('#fs-button-play')!
-const fullscreenPlayerStopButton = document.querySelector<HTMLButtonElement>('#fs-button-stop')!
+const fullscreenPlayerPauseButton = document.querySelector<HTMLButtonElement>('#fs-button-pause')!
 const fullscreenPlayerSeekBackButton = document.querySelector<HTMLButtonElement>('#fs-button-seek-back')!
 const fullscreenPlayerSeekForwardButton = document.querySelector<HTMLButtonElement>('#fs-button-seek-forward')!
 const fullscreenPlayerSkipPrevButton = document.querySelector<HTMLButtonElement>('#fs-button-skip-prev')!
@@ -60,16 +61,16 @@ const hasMediaSession = (): boolean => {
 
 const showPlayButton = () => {
   miniPlayerPlayButton.classList.remove(HIDDEN_CLASS)
-  miniPlayerStopButton.classList.add(HIDDEN_CLASS)
+  miniPlayerPauseButton.classList.add(HIDDEN_CLASS)
   fullscreenPlayerPlayButton.classList.remove(HIDDEN_CLASS)
-  fullscreenPlayerStopButton.classList.add(HIDDEN_CLASS)
+  fullscreenPlayerPauseButton.classList.add(HIDDEN_CLASS)
 }
 
-const showStopButton = () => {
+const showPauseButton = () => {
   miniPlayerPlayButton.classList.add(HIDDEN_CLASS)
-  miniPlayerStopButton.classList.remove(HIDDEN_CLASS)
+  miniPlayerPauseButton.classList.remove(HIDDEN_CLASS)
   fullscreenPlayerPlayButton.classList.add(HIDDEN_CLASS)
-  fullscreenPlayerStopButton.classList.remove(HIDDEN_CLASS)
+  fullscreenPlayerPauseButton.classList.remove(HIDDEN_CLASS)
 }
 
 mfpAudioPlayer.addEventListener('play', () => {
@@ -119,24 +120,24 @@ mfpAudioPlayer.addEventListener('timeupdate', () => {
   //console.log('Audio player time update:', mfpAudioPlayer.currentTime, duration.textContent)
 })
 
-const _handlePlayerStop = (e: MouseEvent, button: HTMLButtonElement) => {
+const _handlePlayerPause = (e: MouseEvent, button: HTMLButtonElement) => {
   e.preventDefault()
 
   if (button.classList.contains(PLAYER_CONTROLS_DISABLED_CLASS)) {
     console.log('Play button is disabled, ignoring click')
     return
   }
-  console.log('Stop button clicked')
+  console.log('Pause button clicked')
   mfpAudioPlayer.pause()
   showPlayButton()
 }
 
-miniPlayerStopButton.addEventListener('click', (e: MouseEvent) => {
-  _handlePlayerStop(e, miniPlayerPlayButton)
+miniPlayerPauseButton.addEventListener('click', (e: MouseEvent) => {
+  _handlePlayerPause(e, miniPlayerPlayButton)
 })
 
-fullscreenPlayerStopButton.addEventListener('click', (e: MouseEvent) => {
-  _handlePlayerStop(e, fullscreenPlayerStopButton)
+fullscreenPlayerPauseButton.addEventListener('click', (e: MouseEvent) => {
+  _handlePlayerPause(e, fullscreenPlayerPauseButton)
 })
 
 const _handlePlayerPlay = (e: MouseEvent, button: HTMLButtonElement) => {
@@ -145,7 +146,7 @@ const _handlePlayerPlay = (e: MouseEvent, button: HTMLButtonElement) => {
     return
   }
   mfpAudioPlayer.play()
-  showStopButton()
+  showPauseButton()
 }
 
 miniPlayerPlayButton.addEventListener('click', (e: MouseEvent) => {
@@ -276,18 +277,18 @@ const _enablePlayerControls = () => {
   miniPlayerSeekBackButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
   miniPlayerSeekForwardButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
   miniPlayerPlayButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
-  miniPlayerStopButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
+  miniPlayerPauseButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
   miniPlayerPlayButton.classList.add(HIDDEN_CLASS)
-  miniPlayerStopButton.classList.remove(HIDDEN_CLASS)
+  miniPlayerPauseButton.classList.remove(HIDDEN_CLASS)
 
   fullscreenPlayerSeekBackButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
   fullscreenPlayerSeekForwardButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
   fullscreenPlayerSkipPrevButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
   fullscreenPlayerSkipNextButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
   fullscreenPlayerPlayButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
-  fullscreenPlayerStopButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
+  fullscreenPlayerPauseButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
   fullscreenPlayerPlayButton.classList.add(HIDDEN_CLASS)
-  fullscreenPlayerStopButton.classList.remove(HIDDEN_CLASS)
+  fullscreenPlayerPauseButton.classList.remove(HIDDEN_CLASS)
   fullscreenPlayerPlaylistButton.classList.remove(PLAYER_CONTROLS_DISABLED_CLASS)
 }
 
@@ -400,7 +401,7 @@ if (hasMediaSession()) {
 
   navigator.mediaSession.setActionHandler('play', async () => {
     await mfpAudioPlayer.play()
-    showStopButton()
+    showPauseButton()
   })
 
   navigator.mediaSession.setActionHandler('pause', async () => {
@@ -443,11 +444,19 @@ fullscreenCloseButton.addEventListener('click', (e: MouseEvent) => {
   }
 })
 
-miniPlayerTitle.addEventListener('click', (e: MouseEvent) => {
+const _handleFullscreenOpen = (e: MouseEvent) => {
   e.preventDefault()
   if (fullscreenPlayer) {
     fullscreenPlayer.style.display = "grid"
   }
+}
+
+miniPlayerTitle.addEventListener('click', (e: MouseEvent) => {
+  _handleFullscreenOpen(e)
+})
+
+miniPlayerFullscreenButton.addEventListener('click', (e: MouseEvent) => {
+  _handleFullscreenOpen(e)
 })
 
 header.addEventListener('click', (e: MouseEvent) => {