align the tracknumber correctly plz

components/Album/component.tsx

@@ -68,7 +68,7 @@ export default function Album(props: AlbumProps): React.JSX.Element {
                                     paddingVertical={"$4"}
                                     paddingHorizontal={"$1"}
                                 >
-                                    <XStack alignContent="flex-end" flex={1}>
+                                    <XStack alignItems="flex-end" flex={1}>
                                         <Text>{ track.IndexNumber?.toString() ?? "" }</Text>
                                     </XStack>
 

player/handlers.ts

@@ -4,22 +4,31 @@ import { useQuery } from "@tanstack/react-query";
 import { QueryKeys } from "../enums/query-keys";
 import { PlaystateApi } from "@jellyfin/sdk/lib/generated-client/api/playstate-api";
 
-export const handlePlaybackStateChange(state: State, playStateApi: PlaystateApi, activeTrack: JellifyTrack) => useQuery({
-    queryKey: [QueryKeys.PlaybackStateChange, state, activeTrack, playStateApi],
+export const handlePlaybackStateChange = (state: State, sessionId: string, playStateApi: PlaystateApi, activeTrack: JellifyTrack) => useQuery({
+    queryKey: [QueryKeys.PlaybackStateChange, state, sessionId, activeTrack, playStateApi],
     queryFn: ({ queryKey }) => {
-        let state : State = queryKey[1] as State;
-        let activeTrack : JellifyTrack = queryKey[2] as JellifyTrack;
-        let api : PlaystateApi = queryKey[3] as PlaystateApi;
-
-        switch (state) {
-            case (State.Ended) :
-            case (State.Paused) :
-            case (State.Stopped) : {
-
-            }
+        const state : State = queryKey[1] as State;
+        const sessionId : string = queryKey[2] as string;
+        const activeTrack : JellifyTrack = queryKey[3] as JellifyTrack;
+        const playStateApi : PlaystateApi = queryKey[4] as PlaystateApi;
 
+        switch (state) {            
             case (State.Playing) : {
-                
+                playStateApi.reportPlaybackStart({
+                    playbackStartInfo: {
+                        SessionId: sessionId,
+                        ItemId: activeTrack.ItemId
+                    }
+                })
+            }
+            
+            default: {
+                playStateApi.reportPlaybackStopped({
+                    playbackStopInfo: {
+                        SessionId: sessionId,
+                        ItemId: activeTrack.ItemId
+                    }
+                })
             }
         }
     }

player/provider.tsx

@@ -8,6 +8,7 @@ import _ from "lodash";
 import { buildNewQueue } from "./helpers/queue";
 import { useApiClientContext } from "../components/jellyfin-api-provider";
 import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
+import { handlePlaybackStateChange } from "./handlers";
 
 interface PlayerContext {
     showPlayer: boolean;
@@ -103,21 +104,12 @@ const PlayerContextInitializer = () => {
             case (Event.PlaybackState) : {
                 console.debug(`PlaybackState changed: ${event}`)
 
-                
+                handlePlaybackStateChange(event.state, sessionId, playStateApi, nowPlaying!)
             }
 
             case (Event.PlaybackActiveTrackChanged) : {
                 const activeTrack = await TrackPlayer.getActiveTrack() as JellifyTrack;
 
-                // If we have a queue, report the previous one as played
-
-                playStateApi.reportPlaybackStart({
-                    playbackStartInfo: {
-                        SessionId: sessionId,
-                        ItemId: activeTrack.ItemId
-                    }
-                })
-
                 setNowPlaying(activeTrack);        
             }
         }