Typing lessons like duolingo & musicmouse cleanup

web/src/components/PlayView.tsx

@@ -2,7 +2,7 @@
 
 import type { Album, PlayerState } from "../api/types";
 import { usePlaybackClock } from "../hooks/usePlaybackClock";
-import { albumLine, isBook } from "../lib/covers";
+import { isBook, nowPlayingText } from "../lib/covers";
 import { clock, remainingInAlbum } from "../lib/format";
 import { groupOf } from "../lib/search";
 import { SHOW_DECORATIVE_ANIMATIONS } from "../lib/theme";
@@ -41,6 +41,7 @@ export function PlayView({
   assignPending,
 }: Props) {
   const position = usePlaybackClock(state.position, state.playing);
+  const now = nowPlayingText(state, album);
   const book = album ? isBook(album) : false;
   const podcast = album ? groupOf(album) === "podcasts" : false;
   const remaining = album
@@ -138,7 +139,7 @@ export function PlayView({
               textWrap: "pretty",
             }}
           >
-            {state.track_title ?? "Wähl ein Album!"}
+            {now.title}
           </div>
           <div
             style={{
@@ -148,7 +149,7 @@ export function PlayView({
               marginTop: 8,
             }}
           >
-            {album ? albumLine(album) : "Tippen oder klicken"}
+            {now.subtitle}
           </div>
           {album && (
             <div
@@ -159,7 +160,7 @@ export function PlayView({
                 marginTop: 6,
               }}
             >
-              {book ? "Kapitel" : "Song"} {state.track_index + 1} von {state.track_count}
+              {now.progress}
             </div>
           )}
         </div>
@@ -169,7 +170,7 @@ export function PlayView({
             position={position}
             duration={state.duration}
             onSeek={onSeek}
-            resetKey={`${state.album_id ?? ""}:${state.track_index}`}
+            resetKey={now.resetKey}
             height={14}
             interactive
           />