now playing styling adjustment

fix sorting for playlist items

api/queries/tracks.ts

@@ -4,20 +4,27 @@ import { ItemSortBy } from "@jellyfin/sdk/lib/generated-client/models/item-sort-
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api";
 import { useQuery } from "@tanstack/react-query";
 
-export const useItemTracks = (itemId: string, api: Api) => useQuery({
-    queryKey: [QueryKeys.ItemTracks, itemId, api],
+export const useItemTracks = (itemId: string, api: Api, sort: boolean = false) => useQuery({
+    queryKey: [QueryKeys.ItemTracks, itemId, api, sort],
     queryFn: ({ queryKey }) => {
 
         const itemId : string = queryKey[1] as string;
         const api : Api = queryKey[2] as Api;
+        const sort : boolean = queryKey[3] as boolean;
 
-        return getItemsApi(api).getItems({
-            parentId: itemId,
-            sortBy: [
+        let sortBy: ItemSortBy[] = [];
+
+        if (sort) {
+            sortBy = [
                 ItemSortBy.ParentIndexNumber,
                 ItemSortBy.IndexNumber,
                 ItemSortBy.SortName
             ]
+        }
+
+        return getItemsApi(api).getItems({
+            parentId: itemId,
+            sortBy
         })
         .then((response) => {
             return response.data.Items ? response.data.Items! : [];

components/Album/component.tsx

@@ -24,7 +24,7 @@ export default function Album(props: AlbumProps): React.JSX.Element {
 
     const { nowPlaying } = usePlayerContext();
 
-    const { data: tracks, isLoading } = useItemTracks(props.album.Id!, apiClient!);
+    const { data: tracks, isLoading } = useItemTracks(props.album.Id!, apiClient!, true);
 
     return (
         <ScrollView>

components/Player/mini-player.tsx

@@ -36,8 +36,7 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                 >
                     <YStack
                         alignContent="flex-start"
-                        paddingRight={5}
-                        flex={1}>
+                        flex={2}>
                         <CachedImage
                             source={getImageApi(apiClient!)
                                 .getItemImageUrlById(
@@ -57,7 +56,7 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                     </YStack>
 
 
-                    <YStack alignContent="flex-start" flex={3}>
+                    <YStack alignContent="flex-start" flex={4}>
                         <TextTicker 
                             duration={5000}
                             loop