ui: move audio volume control to top player bar

web/src/components/MessageList.tsx

@@ -957,17 +957,14 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
   const isPlayingGlobal = useAudioPlayerStore((s) => s.isPlaying);
   const durationGlobal = useAudioPlayerStore((s) => s.duration);
   const positionGlobal = useAudioPlayerStore((s) => s.position);
-  const volumeGlobal = useAudioPlayerStore((s) => s.volume);
   const playTrack = useAudioPlayerStore((s) => s.playTrack);
   const togglePlayGlobal = useAudioPlayerStore((s) => s.togglePlay);
   const seekToGlobal = useAudioPlayerStore((s) => s.seekTo);
-  const setVolumeGlobal = useAudioPlayerStore((s) => s.setVolume);
 
   const isActiveTrack = track?.src === src;
   const isPlaying = isActiveTrack && isPlayingGlobal;
   const duration = isActiveTrack ? durationGlobal : 0;
   const position = isActiveTrack ? positionGlobal : 0;
-  const volume = volumeGlobal;
 
   async function togglePlay() {
     if (isActiveTrack) {
@@ -984,10 +981,6 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
     seekToGlobal(nextValue);
   }
 
-  function onVolume(nextValue: number) {
-    setVolumeGlobal(nextValue);
-  }
-
   return (
     <div className="rounded-lg border border-sky-500/40 bg-sky-600/20 px-2 py-1.5">
       <div className="flex items-center gap-2">
@@ -1012,17 +1005,6 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
         <span className="w-20 text-center text-xs tabular-nums text-slate-100">
           {formatAudioTime(position)} / {formatAudioTime(duration)}
         </span>
-
-        <span className="text-xs text-slate-200">🔊</span>
-        <input
-          className="h-1.5 w-16 cursor-pointer accent-slate-100"
-          max={1}
-          min={0}
-          onChange={(event) => onVolume(Number(event.target.value))}
-          step={0.05}
-          type="range"
-          value={volume}
-        />
       </div>
     </div>
   );