updates

web/src/components/PlayView.tsx

@@ -1,8 +1,10 @@
 /** The full-screen now-playing view. */
 
 import type { Album, PlayerState } from "../api/types";
+import { usePlaybackClock } from "../hooks/usePlaybackClock";
 import { albumLine, isBook } from "../lib/covers";
 import { clock, remainingInAlbum } from "../lib/format";
+import { groupOf } from "../lib/search";
 import { Cover } from "./Cover";
 import { ProgressBar } from "./ProgressBar";
 import { Transport } from "./Transport";
@@ -11,7 +13,6 @@ import { VolumeBars } from "./VolumeBars";
 interface Props {
   state: PlayerState;
   album: Album | null;
-  position: number;
   onToggle: () => void;
   onNext: () => void;
   onPrevious: () => void;
@@ -19,12 +20,12 @@ interface Props {
   onVolume: (percent: number) => void;
   onMute: () => void;
   onBrowse: () => void;
+  onOpenAlbum: () => void;
 }
 
 export function PlayView({
   state,
   album,
-  position,
   onToggle,
   onNext,
   onPrevious,
@@ -32,8 +33,11 @@ export function PlayView({
   onVolume,
   onMute,
   onBrowse,
+  onOpenAlbum,
 }: Props) {
+  const position = usePlaybackClock(state.position, state.playing);
   const book = album ? isBook(album) : false;
+  const podcast = album ? groupOf(album) === "podcasts" : false;
   const remaining = album
     ? remainingInAlbum(
         album.tracks.map((track) => track.duration),
@@ -84,13 +88,26 @@ export function PlayView({
           }}
         >
           {album ? (
-            <Cover
-              album={album}
-              size={340}
-              fit="height"
-              radius={book ? "18px 34px 34px 18px" : "28px"}
-              label
-            />
+            <button
+              onClick={onOpenAlbum}
+              aria-label="Titelliste anzeigen"
+              style={{
+                border: "none",
+                background: "none",
+                padding: 0,
+                cursor: "pointer",
+                display: "flex",
+                height: "100%",
+              }}
+            >
+              <Cover
+                album={album}
+                size={340}
+                fit="height"
+                radius={book ? "18px 34px 34px 18px" : "28px"}
+                label
+              />
+            </button>
           ) : (
             <div
               style={{
@@ -144,6 +161,7 @@ export function PlayView({
             position={position}
             duration={state.duration}
             onSeek={onSeek}
+            resetKey={`${state.album_id ?? ""}:${state.track_index}`}
             height={14}
             interactive
           />
@@ -163,7 +181,7 @@ export function PlayView({
               {state.duration ? `−${clock(state.duration - position)}` : ""}
             </span>
             <span>
-              {album ? `Noch ${clock(remaining)} ${book ? "im Hörbuch" : "im Album"}` : ""}
+              {album && !podcast ? `Noch ${clock(remaining)} ${book ? "im Hörbuch" : "im Album"}` : ""}
             </span>
           </div>
         </div>