Fix progress resetting to zero when switching books

bun.lock.tree

@@ -1,4 +1,3 @@
-/home/chris/src/ambry/next/ambry-mobile-next node_modules
 ├── @0no-co/[email protected]
 ├── @0no-co/[email protected]
 ├── @ampproject/[email protected]
@@ -213,7 +212,7 @@
 ├── @eslint/[email protected]
 ├── @eslint/[email protected]
 ├── @expo/[email protected]
-├── @expo/[email protected].5
+├── @expo/[email protected].6
 │   ├── [email protected]
 │   │   └── [email protected]
 │   │       └── [email protected]
@@ -255,7 +254,7 @@
 │       └── [email protected]
 │           └── [email protected]
 ├── @expo/[email protected]
-├── @expo/[email protected].3
+├── @expo/[email protected].4
 │   └── [email protected]
 ├── @expo/[email protected]
 │   ├── [email protected]
@@ -265,7 +264,7 @@
 │   └── [email protected]
 ├── @expo/[email protected]
 │   └── @babel/[email protected]
-├── @expo/[email protected].7
+├── @expo/[email protected].8
 │   ├── [email protected]
 │   │   ├── [email protected]
 │   │   └── [email protected]
@@ -850,7 +849,7 @@
 ├── [email protected]
 ├── [email protected]
 ├── [email protected]
-├── [email protected].18
+├── [email protected].19
 ├── [email protected]
 ├── [email protected]
 ├── [email protected]
@@ -865,7 +864,7 @@
 ├── [email protected]
 ├── [email protected]
 ├── [email protected]
-├── [email protected].5
+├── [email protected].6
 ├── [email protected]
 ├── [email protected]
 ├── [email protected]
@@ -878,8 +877,8 @@
 │   └── [email protected]
 │       ├── [email protected]
 │       └── [email protected]
-├── [email protected].1
-├── [email protected].11
+├── [email protected].2
+├── [email protected].13
 │   └── [email protected]
 ├── [email protected]
 ├── [email protected]

package.json

@@ -47,17 +47,17 @@
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/native": "^7.0.0",
     "drizzle-orm": "^0.38.0",
-    "expo": "~52.0.18",
+    "expo": "~52.0.19",
     "expo-blur": "~14.0.1",
     "expo-build-properties": "~0.13.1",
     "expo-constants": "~17.0.3",
     "expo-dev-client": "~5.0.6",
     "expo-drizzle-studio-plugin": "^0.1.0",
-    "expo-file-system": "~18.0.5",
+    "expo-file-system": "~18.0.6",
     "expo-haptics": "~14.0.0",
     "expo-image": "~2.0.3",
     "expo-linking": "~7.0.3",
-    "expo-router": "~4.0.11",
+    "expo-router": "~4.0.13",
     "expo-secure-store": "~14.0.0",
     "expo-splash-screen": "~0.29.18",
     "expo-sqlite": "~15.0.3",

src/components/MediaDetailsScreen/ActionBar.tsx

@@ -1,13 +1,8 @@
 import { IconButton } from "@/src/components";
 import { Download, useDownload } from "@/src/db/downloads";
 import { ActionBarMedia, useMediaActionBarInfo } from "@/src/db/library";
-import { syncDownUser } from "@/src/db/sync";
+import useLoadMediaCallback from "@/src/hooks/use.load.media.callback";
 import { startDownload, useDownloads } from "@/src/stores/downloads";
-import {
-  loadMedia,
-  prepareToLoadMedia,
-  requestExpandPlayer,
-} from "@/src/stores/player";
 import { Session } from "@/src/stores/session";
 import { Colors } from "@/src/styles";
 import { router } from "expo-router";
@@ -25,15 +20,6 @@ export default function ActionBar({ mediaId, session }: ActionBarProps) {
 
   if (!media) return null;
 
-  const onPressPlay = async () => {
-    requestExpandPlayer();
-    prepareToLoadMedia();
-    setTimeout(async () => {
-      await syncDownUser(session, true);
-      await loadMedia(session, media.id);
-    }, 400);
-  };
-
   return (
     <Animated.View style={[styles.container, { opacity }]}>
       <View style={styles.buttonsContainer}>
@@ -50,14 +36,7 @@ export default function ActionBar({ mediaId, session }: ActionBarProps) {
             );
           }}
         />
-        <IconButton
-          icon="play"
-          size={32}
-          style={styles.playButton}
-          iconStyle={styles.playButtonIcon}
-          color={Colors.black}
-          onPress={onPressPlay}
-        />
+        <PlayButton session={session} media={media} />
         <IconButton
           icon="share"
           size={24}
@@ -87,6 +66,26 @@ export default function ActionBar({ mediaId, session }: ActionBarProps) {
   );
 }
 
+type PlayButtonProps = {
+  media: ActionBarMedia;
+  session: Session;
+};
+
+function PlayButton({ session, media }: PlayButtonProps) {
+  const loadMedia = useLoadMediaCallback(session, media.id);
+
+  return (
+    <IconButton
+      icon="play"
+      size={32}
+      style={styles.playButton}
+      iconStyle={styles.playButtonIcon}
+      color={Colors.black}
+      onPress={loadMedia}
+    />
+  );
+}
+
 type DownloadButtonProps = {
   media: ActionBarMedia;
   download: Download;

src/components/Tiles.tsx

@@ -243,13 +243,13 @@ export function PlayerStateTile(props: PlayerStateTileProps) {
             color={Colors.zinc[100]}
           />
         </View>
-        {duration && (
+        {duration !== false && (
           <ProgressBar
             position={media.playerState.position}
             duration={duration}
           />
         )}
-        {percent && (
+        {percent !== false && (
           <Text style={styles.progressText} numberOfLines={1}>
             {percent.toFixed(1)}%
           </Text>

src/hooks/use.load.media.callback.ts

@@ -1,6 +1,7 @@
 import { syncDownUser } from "@/src/db/sync";
 import {
   loadMedia,
+  pause,
   prepareToLoadMedia,
   requestExpandPlayer,
 } from "@/src/stores/player";
@@ -12,6 +13,7 @@ export default function useLoadMediaCallback(
   mediaId: string,
 ) {
   const loadMediaCallback = useCallback(async () => {
+    await pause();
     requestExpandPlayer();
     prepareToLoadMedia();
     setTimeout(async () => {

src/services/PlaybackService.ts

@@ -10,42 +10,47 @@ import TrackPlayer, { Event } from "react-native-track-player";
 
 export const PlaybackService = async function () {
   TrackPlayer.addEventListener(Event.RemoteStop, () => {
-    console.debug("[TrackPlayer Service] remote stop");
+    console.debug("[TrackPlayer Service] RemoteStop");
     pause();
   });
 
   TrackPlayer.addEventListener(Event.RemotePause, () => {
-    console.debug("[TrackPlayer Service] remote pause");
+    console.debug("[TrackPlayer Service] RemotePause");
     pause();
   });
 
   TrackPlayer.addEventListener(Event.RemotePlay, () => {
-    console.debug("[TrackPlayer Service] remote play");
+    console.debug("[TrackPlayer Service] RemotePlay");
     play();
   });
 
   TrackPlayer.addEventListener(Event.RemoteJumpBackward, ({ interval }) => {
-    console.debug("[TrackPlayer Service] remote jump backward", -interval);
+    console.debug("[TrackPlayer Service] RemoteJumpBackward", -interval);
     seekRelative(-interval);
   });
 
   TrackPlayer.addEventListener(Event.RemoteJumpForward, ({ interval }) => {
-    console.debug("[TrackPlayer Service] remote jump forward", interval);
+    console.debug("[TrackPlayer Service] RemoteJumpForward", interval);
     seekRelative(interval);
   });
 
   TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, (args) => {
     const { position, duration } = args;
+    console.debug(
+      "[TrackPlayer Service] PlaybackProgressUpdated",
+      position,
+      duration,
+    );
     onPlaybackProgressUpdated(position, duration);
   });
 
   TrackPlayer.addEventListener(Event.PlaybackState, ({ state }) => {
-    console.debug("[TrackPlayer Service] playback state changed", state);
+    console.debug("[TrackPlayer Service] PlaybackState", state);
     onPlaybackState(state);
   });
 
   TrackPlayer.addEventListener(Event.PlaybackQueueEnded, () => {
-    console.debug("[TrackPlayer Service] playback ended");
+    console.debug("[TrackPlayer Service] PlaybackQueueEnded");
     onPlaybackQueueEnded();
   });
 };

src/stores/player.ts

@@ -217,7 +217,7 @@ export async function pause() {
 export function onPlaybackProgressUpdated(position: number, duration: number) {
   updateProgress(position, duration);
   if (maybeHandleSleepTimer()) return Promise.resolve();
-  return savePosition();
+  if (duration !== 0) return savePosition();
 }
 
 export function onPlaybackState(state: State) {
@@ -520,7 +520,10 @@ async function loadMediaIntoTrackPlayer(
     // neither a synced playerState nor a local playerState exists
     // create a new local playerState and load it into the player
 
-    console.debug("[Player] No state found; creating new local state", 0);
+    console.debug(
+      "[Player] No state found; creating new local state; new position =",
+      0,
+    );
 
     const newLocalPlayerState = await createInitialPlayerState(
       session,
@@ -535,7 +538,7 @@ async function loadMediaIntoTrackPlayer(
     // create a new local playerState by copying the synced playerState
 
     console.debug(
-      "[Player] Synced state found; creating new local state",
+      "[Player] Synced state found; creating new local state; synced position =",
       syncedPlayerState.position,
     );
 
@@ -548,7 +551,7 @@ async function loadMediaIntoTrackPlayer(
     );
 
     console.debug(
-      "[Player] Loading new local state into player",
+      "[Player] Loading new local state into player; local position =",
       newLocalPlayerState.position,
     );
 
@@ -560,7 +563,7 @@ async function loadMediaIntoTrackPlayer(
     // use it as is (we haven't had a chance to sync it to the server yet)
 
     console.debug(
-      "[Player] Local state found (but no synced state); loading into player",
+      "[Player] Local state found (but no synced state); loading into player; local position =",
       localPlayerState.position,
     );
 
@@ -571,8 +574,9 @@ async function loadMediaIntoTrackPlayer(
 
   // both a synced playerState and a local playerState exist
   console.debug(
-    "[Player] Both synced and local states found",
-    localPlayerState.position,
+    "[Player] Both synced and local states found; local position =",
+    localPlayerState.position + ";",
+    "synced position =",
     syncedPlayerState.position,
   );
 
@@ -581,7 +585,7 @@ async function loadMediaIntoTrackPlayer(
     // use it as is (the server is out of date)
 
     console.debug(
-      "[Player] Local state is newer; loading into player",
+      "[Player] Local state is newer; loading into player; local position =",
       localPlayerState.position,
     );
 
@@ -592,7 +596,7 @@ async function loadMediaIntoTrackPlayer(
   // update the local playerState by copying the synced playerState
 
   console.debug(
-    "[Player] Synced state is newer; updating local state",
+    "[Player] Synced state is newer; updating local state; synced position =",
     syncedPlayerState.position,
   );
 
@@ -603,7 +607,7 @@ async function loadMediaIntoTrackPlayer(
   });
 
   console.debug(
-    "[Player] Loading updated local state into player",
+    "[Player] Loading updated local state into player; local position =",
     updatedLocalPlayerState.position,
   );