Update AudioPlayer.mjs

mythz · mythz · commit 2be37550dd00 · 2025-08-09T22:05:32.000+08:00
diff --git a/MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs b/MyApp/wwwroot/pages/podcasts/AudioPlayer.mjs
@@ -13,18 +13,18 @@ const ForwardIcon = {
 const ForwardButton = {
     components: { ForwardIcon },
     template: `
-    <button type="button"
-      class="group relative rounded-full focus:outline-none"
-      @click="player.seekBy(amount ?? 10)" :aria-label="'Fast-forward ' + (amount ?? 10) + ' seconds'">
-      <div class="absolute -inset-4 -left-2 md:hidden" />
-      <ForwardIcon class="h-6 w-6 stroke-slate-500 group-hover:stroke-slate-700" />
-    </button>`,
+      <button type="button"
+              class="group relative rounded-full focus:outline-none"
+              @click="player.seekBy(amount ?? 10)" :aria-label="'Fast-forward ' + (amount ?? 10) + ' seconds'">
+        <div class="absolute -inset-4 -left-2 md:hidden" />
+        <ForwardIcon class="h-6 w-6 stroke-slate-500 group-hover:stroke-slate-700" />
+      </button>`,
     props: { player:Object, amount:Number },
 }
 
 const MuteIcon = {
     template:`
-    <svg aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke-line-cap="round" stroke-line-join="round">
+      <svg aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke-line-cap="round" stroke-line-join="round">
         <template v-if="muted">
           <path d="M12 6L8 10H6C5.44772 10 5 10.4477 5 11V13C5 13.5523 5.44772 14 6 14H8L12 18V6Z" />
           <path d="M16 10L19 13" fill="none" />
@@ -35,19 +35,19 @@ const MuteIcon = {
           <path d="M17 7C17 7 19 9 19 12C19 15 17 17 17 17" fill="none" />
           <path d="M15.5 10.5C15.5 10.5 16 10.9998 16 11.9999C16 13 15.5 13.5 15.5 13.5" fill="none" />
         </template>
-    </svg>`,
+      </svg>`,
     props: { muted:Boolean }
 }
 const MuteButton = {
     components: { MuteIcon },
     template:`
-        <button type="button" :aria-label="player.muted ? 'Unmute' : 'Mute'"
-              class="group relative rounded-md hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 md:order-none"
+      <button type="button" :aria-label="player.muted ? 'Unmute' : 'Mute'"
+              class="group relative rounded-md hover:bg-slate-100 dark:hover:bg-slate-800 md:order-none focus:outline-none focus:ring-2 focus:ring-slate-400 dark:focus:ring-slate-700 focus:ring-offset-2 ring-offset-slate-400 dark:ring-offset-slate-700"
               @click="player.toggleMute()">
-          <div class="absolute -inset-4 md:hidden" />
-          <MuteIcon :muted="player.muted"
-            class="h-6 w-6 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700" />
-        </button>
+        <div class="absolute -inset-4 md:hidden" />
+        <MuteIcon :muted="player.muted"
+                  class="h-6 w-6 fill-slate-500 dark:fill-slate-400 stroke-slate-500 dark:stroke-slate-400 group-hover:fill-slate-700 dark:group-hover:fill-slate-300 group-hover:stroke-slate-700 dark:group-hover:stroke-slate-300" />
+      </button>
     `,
     props: { player:Object },
 }
@@ -99,13 +99,13 @@ const playbackRates = [
 ]
 const PlaybackRateButton = {
     template:`
-    <button type="button"
-          class="relative flex h-6 w-6 items-center justify-center rounded-md text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-700 dark:hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
-          @click="nextPlaybackRate()"
-          aria-label="Playback rate">
-      <div class="absolute -inset-4 md:hidden"></div>
-      <component :is="playbackRate.icon" class="h-4 w-4" />
-    </button>    
+      <button type="button"
+              class="relative flex h-6 w-6 items-center justify-center rounded-md text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-700 dark:hover:text-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:focus:ring-slate-700 focus:ring-offset-2 ring-offset-slate-400 dark:ring-offset-slate-700"
+              @click="nextPlaybackRate()"
+              aria-label="Playback rate">
+        <div class="absolute -inset-4 md:hidden"></div>
+        <component :is="playbackRate.icon" class="h-4 w-4" />
+      </button>
     `,
     props: { player:Object },
     setup(props) {
@@ -123,17 +123,17 @@ const PlaybackRateButton = {
 
 const PlayButton = {
     template:`
-        <button type="button" :aria-label="player.isPlaying ? 'Pause' : 'Play'"
+      <button type="button" :aria-label="player.isPlaying ? 'Pause' : 'Play'"
               class="group relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-slate-700 dark:bg-slate-200 hover:bg-slate-900 dark:hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-700 dark:focus:ring-slate-200 focus:ring-offset-2 dark:ring-offset-black md:h-14 md:w-14"
               @click="player.toggle()">
-          <div class="absolute -inset-3 md:hidden" />
-            <svg v-if="player.isPlaying" viewBox="0 0 36 36" aria-hidden="true" class="h-5 w-5 fill-white dark:fill-black group-active:fill-white/80 dark:group-active:fill-black/80 md:h-7 md:w-7">
-              <path d="M8.5 4C7.67157 4 7 4.67157 7 5.5V30.5C7 31.3284 7.67157 32 8.5 32H11.5C12.3284 32 13 31.3284 13 30.5V5.5C13 4.67157 12.3284 4 11.5 4H8.5ZM24.5 4C23.6716 4 23 4.67157 23 5.5V30.5C23 31.3284 23.6716 32 24.5 32H27.5C28.3284 32 29 31.3284 29 30.5V5.5C29 4.67157 28.3284 4 27.5 4H24.5Z" />
-            </svg>    
-            <svg v-else viewBox="0 0 36 36" aria-hidden="true" class="h-5 w-5 fill-white dark:fill-black group-active:fill-white/80 dark:group-active:fill-black/80 md:h-7 md:w-7">
-              <path d="M33.75 16.701C34.75 17.2783 34.75 18.7217 33.75 19.299L11.25 32.2894C10.25 32.8668 9 32.1451 9 30.9904L9 5.00962C9 3.85491 10.25 3.13323 11.25 3.71058L33.75 16.701Z" />
-            </svg>
-        </button>    
+        <div class="absolute -inset-3 md:hidden" />
+        <svg v-if="player.isPlaying" viewBox="0 0 36 36" aria-hidden="true" class="h-5 w-5 fill-white dark:fill-black group-active:fill-white/80 dark:group-active:fill-black/80 md:h-7 md:w-7">
+          <path d="M8.5 4C7.67157 4 7 4.67157 7 5.5V30.5C7 31.3284 7.67157 32 8.5 32H11.5C12.3284 32 13 31.3284 13 30.5V5.5C13 4.67157 12.3284 4 11.5 4H8.5ZM24.5 4C23.6716 4 23 4.67157 23 5.5V30.5C23 31.3284 23.6716 32 24.5 32H27.5C28.3284 32 29 31.3284 29 30.5V5.5C29 4.67157 28.3284 4 27.5 4H24.5Z" />
+        </svg>
+        <svg v-else viewBox="0 0 36 36" aria-hidden="true" class="h-5 w-5 fill-white dark:fill-black group-active:fill-white/80 dark:group-active:fill-black/80 md:h-7 md:w-7">
+          <path d="M33.75 16.701C34.75 17.2783 34.75 18.7217 33.75 19.299L11.25 32.2894C10.25 32.8668 9 32.1451 9 30.9904L9 5.00962C9 3.85491 10.25 3.13323 11.25 3.71058L33.75 16.701Z" />
+        </svg>
+      </button>
     `,
     props: { player:Object },
 }
@@ -149,37 +149,37 @@ const RewindIcon = {
 const RewindButton = {
     components: { RewindIcon },
     template:`
-        <button type="button"
+      <button type="button"
               class="group relative rounded-full focus:outline-none"
               @click="player.seekBy(-(amount??10))"
               :aria-label="'Rewind ' + (amount??10) + ' seconds'">
-          <div class="absolute -inset-4 -right-2 md:hidden" />
-          <RewindIcon class="h-6 w-6 stroke-slate-500 group-hover:stroke-slate-700" />
-        </button>`,
+        <div class="absolute -inset-4 -right-2 md:hidden" />
+        <RewindIcon class="h-6 w-6 stroke-slate-500 group-hover:stroke-slate-700" />
+      </button>`,
     props: { player:Object, amount:Number },
 }
 
 const Slider = {
     template:`
       <div class="w-full flex items-center">
         <div ref="sliderRef"
-          class="relative flex-grow h-2 bg-gray-200 dark:bg-gray-700 rounded-full cursor-pointer"
-          @click="handleClick"
-          @mousedown="startDrag"
-          @mousemove="handleDrag"
-          @mouseup="stopDrag"
-          @mouseleave="stopDrag">
-          <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full" 
-            :style="{ width: progress + '%' }"></div>
+             class="relative flex-grow h-2 bg-gray-200 dark:bg-gray-700 rounded-full cursor-pointer"
+             @click="handleClick"
+             @mousedown="startDrag"
+             @mousemove="handleDrag"
+             @mouseup="stopDrag"
+             @mouseleave="stopDrag">
+          <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"
+               :style="{ width: progress + '%' }"></div>
           <div class="absolute top-1/2 -mt-2 w-4 h-4 bg-white dark:bg-black border-2 border-blue-500 rounded-full shadow"
-            :style="{ left: 'calc(' + progress + '% - 0.5rem)' }"></div>
+               :style="{ left: 'calc(' + progress + '% - 0.5rem)' }"></div>
         </div>
         <div class="hidden ml-2 items-center gap-2 md:flex whitespace-nowrap">
-            <span class="hidden rounded-md px-1 py-0.5 font-mono text-sm leading-6 md:block text-slate-500 dark:text-slate-400">{{ formatTime(currentTime) }}</span>
-            <span class="text-sm leading-6 text-slate-300 dark:text-slate-600" aria-hidden="true">/</span>
-            <span class="hidden rounded-md px-1 py-0.5 font-mono text-sm leading-6 text-slate-500 dark:text-slate-400 md:block">{{ formatTime(duration) }}</span>
-        </div>                    
-      </div>    
+          <span class="hidden rounded-md px-1 py-0.5 font-mono text-sm leading-6 md:block text-slate-500 dark:text-slate-400">{{ formatTime(currentTime) }}</span>
+          <span class="text-sm leading-6 text-slate-300 dark:text-slate-600" aria-hidden="true">/</span>
+          <span class="hidden rounded-md px-1 py-0.5 font-mono text-sm leading-6 text-slate-500 dark:text-slate-400 md:block">{{ formatTime(duration) }}</span>
+        </div>
+      </div>
     `,
     emits: ['update:currentTime'],
     props: {
@@ -253,46 +253,50 @@ const AudioPlayer = {
         Slider,
     },
     template:`
-        <div v-if="src" :class="v.cls">
-            <audio ref="refPlayer"
-                @play="onPlay()" @pause="onPause()"
-                @timeupdate="onTimeUpdate(Math.floor($event.currentTarget.currentTime))"
-                @durationchange="onDurationChange(Math.floor($event.currentTarget.duration))"
-                :muted="muted"
-            />
-            <div class="hidden md:block">
+      <div v-if="src" :class="v.cls">
+        <button v-if="showClose" type="button" @click="$emit('close')" title="Close Audio Player">
+          <svg class="size-4 absolute top-1 right-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>
+        </button>
+        <audio ref="refPlayer"
+               @play="onPlay()" @pause="onPause()"
+               @timeupdate="onTimeUpdate(Math.floor($event.currentTarget.currentTime))"
+               @durationchange="onDurationChange(Math.floor($event.currentTarget.duration))"
+               :muted="muted"
+        />
+        <div class="hidden md:block">
+          <PlayButton :player="player"/>
+        </div>
+        <div :class="v.innerCls">
+          <a :href="'/podcasts/' + id"
+             class="truncate text-center text-sm font-bold leading-6 md:text-left"
+             :title="title">
+            {{title}}
+          </a>
+          <div :class="v.controlsCls">
+            <div :class="v.startControlsCls">
+              <MuteButton :player="player"/>
+            </div>
+            <div :class="v.midControlsCls">
+              <RewindButton :player="player"/>
+              <div class="md:hidden">
                 <PlayButton :player="player"/>
+              </div>
+              <ForwardButton :player="player"/>
             </div>
-            <div :class="v.innerCls">
-                <a :href="'/podcasts/' + id"
-                    class="truncate text-center text-sm font-bold leading-6 md:text-left"
-                    :title="title">
-                    {{title}}
-                </a>
-                <div :class="v.controlsCls">
-                    <div :class="v.startControlsCls">
-                        <MuteButton :player="player"/>
-                    </div>
-                    <div :class="v.midControlsCls">
-                        <RewindButton :player="player"/>
-                        <div class="md:hidden">
-                            <PlayButton :player="player"/>
-                        </div>
-                        <ForwardButton :player="player"/>
-                    </div>
-                    <Slider :currentTime="currentTime" :duration="duration" @update:currentTime="player.currentTime=$event" />
-                    <div :class="v.endControlsCls">
-                        <div class="flex items-center">
-                            <PlaybackRateButton :player="player"/>
-                        </div>
-                        <div class="hidden items-center md:flex">
-                            <MuteButton :player="player"/>
-                        </div>
-                    </div>
-                </div>
+            <Slider :currentTime="currentTime" :duration="duration" @update:currentTime="player.currentTime=$event" />
+            <div :class="v.endControlsCls">
+              <div class="flex items-center">
+                <PlaybackRateButton :player="player"/>
+              </div>
+              <div class="hidden items-center md:flex">
+                <MuteButton :player="player"/>
+              </div>
             </div>
-        </div>    
+          </div>
+        </div>
+      </div>
     `,
+    emits: ['close'],
     props: {
         bus: Object,
         id: String,
@@ -303,9 +307,10 @@ const AudioPlayer = {
         autoPlay: Boolean,
         variant: String,
         beaconUrl: String,
-        cls: { 
+        showClose: Boolean,
+        cls: {
             type: String,
-            default: 'flex items-center gap-6 bg-white/90 dark:bg-black/90 px-4 py-4 shadow shadow-slate-200/80 dark:shadow-slate-700/80 ring-1 ring-slate-900/5 dark:ring-slate-50/5 backdrop-blur-sm md:px-6'
+            default: 'flex items-center gap-6 bg-white/90 dark:bg-black/70 px-4 py-4 shadow shadow-slate-200/80 dark:shadow-slate-700/80 ring-1 ring-slate-900/5 dark:ring-slate-50/5 backdrop-blur-sm md:px-6'
         },
         innerCls: {
             type: String,
@@ -375,7 +380,7 @@ const AudioPlayer = {
         function onDurationChange(value) {
             duration.value = value
         }
-        
+
         const player = globalThis.player = {
             get url() { return props.url },
             get id() { return props.id },
@@ -436,7 +441,7 @@ const AudioPlayer = {
         })
         onUnmounted(() => sub?.unsubscribe())
         // console.log('AudioPlayer.mjs', globalThis.player)
-        
+
         return {
             v,
             refPlayer,
