Merge pull request #137 from anultravioletaurora/59-improve-onboarding-experience

59 improve onboarding experience

README.md

@@ -72,15 +72,15 @@ Playlist
 <img src="screenshots/search.png" alt="Search" width="275" height="600">
 
 ### Player
-<img src="screenshots/player.png" alt="Player">
+<img src="screenshots/player.png" alt="Player" width="275" height="600">
 
-<img src="screenshots/player_queue.png" alt="Queue">
+<img src="screenshots/player_queue.png" alt="Queue" width="275" height="600">
 
 ### CarPlay (Sneak Preview)
-<img src="screenshots/carplay_nowplaying.jpeg" alt="Now Playing (CarPlay)">
+<img src="screenshots/carplay_nowplaying.jpeg" alt="Now Playing (CarPlay)" width="500" height="350">
 
 ### On the Server
-<img src="https://github.com/user-attachments/assets/741884a2-b9b7-4081-b3a0-6655d08071dc" alt="Playback Tracking">
+<img src="https://github.com/user-attachments/assets/741884a2-b9b7-4081-b3a0-6655d08071dc" alt="Playback Tracking" width="300" height="200">
 
 ## 🏗 Built with:
 ### 🎨 Frontend

components/Global/components/blurhashed-image.tsx

@@ -32,9 +32,7 @@ export default function BlurhashedImage({
             Math.ceil(height ?? width / 100) * 100 // So these keys need to match
         ],
         queryFn: () => fetchItemImage(item.AlbumId ? item.AlbumId : item.Id!, type ?? ImageType.Primary, width, height ?? width),
-        staleTime: (1000 * 60 * 60) * 24, // 1 day, images probably don't refresh that often
-        gcTime: (1000 * 1 * 1) * 1 // 1 second, these are stored on disk anyways so refetching is cheap
-    });;
+    });
 
     const blurhash = !isEmpty(item.ImageBlurHashes) 
         && !isEmpty(type ? item.ImageBlurHashes[type] : item.ImageBlurHashes.Primary) 

components/Login/screens/server-library.tsx

@@ -75,8 +75,8 @@ export default function ServerLibrary(): React.JSX.Element {
                         musicLibraryId: libraryId!,
                         musicLibraryName: libraries?.filter((library) => library.Id == libraryId)[0].Name ?? "No library name",
                         musicLibraryPrimaryImageId: libraries?.filter((library) => library.Id == libraryId)[0].ImageTags!.Primary,
-                        playlistLibraryId: playlistLibrary!.Id!,
-                        playlistLibraryPrimaryImageId: playlistLibrary!.ImageTags!.Primary,
+                        playlistLibraryId: playlistLibrary?.Id!,
+                        playlistLibraryPrimaryImageId: playlistLibrary?.ImageTags!.Primary,
                     });
                     setLoggedIn(true);
                 }}>

components/Player/screens/index.tsx

@@ -90,28 +90,22 @@ export default function PlayerScreen({
                             />
                         </YStack>
 
-                        { useMemo(() => {
+                        <YStack 
+                        alignItems="center"
+                        alignContent="center"
+                        flex={3}
+                        >
 
-                            <YStack 
-                            alignItems="center"
-                            alignContent="center"
-                            flex={3}
-                            >
-                                <Text>Playing from</Text>
-                                <TextTicker {...TextTickerConfig}>
-                                    <Text bold>
-                                        { 
-                                            // If the Queue is a BaseItemDto, display the name of it
-                                            typeof(queue) === 'object' 
-                                            ? (queue as BaseItemDto).Name ?? "Untitled"
-                                            : queue
-                                        }
-                                    </Text>
-                                </TextTicker>
-                            </YStack>
-                        }, [
-                            queue
-                        ])}
+                            <Text>Playing from</Text>
+                            <Text bold>
+                                { 
+                                    // If the Queue is a BaseItemDto, display the name of it
+                                    typeof(queue) === 'object' 
+                                    ? (queue as BaseItemDto).Name ?? "Untitled"
+                                    : queue
+                                }
+                            </Text>
+                        </YStack>
 
                         <Spacer flex={1} />
                     </XStack>

components/Playlist/component.tsx

@@ -213,7 +213,7 @@ export default function Playlist({
                         color={"$borderColor"} 
                         style={{ display: "block"}}
                     >
-                        Total Runtime:
+                        Total Runtime: 
                     </Text>
                     <RunTimeTicks>{ playlist.RunTimeTicks }</RunTimeTicks>
                 </XStack>

constants/query-client.ts

@@ -3,8 +3,9 @@ import { QueryClient } from "@tanstack/react-query";
 export const queryClient = new QueryClient({
     defaultOptions: {
         queries: {
+            refetchOnWindowFocus: false,
             gcTime: (1000 * 60 * 60 * 24) * 5, // 5 days, for maximum cache-age
-            staleTime: (1000 * 60 * 30), // 30 minutes, this can be refreshed manually anyways
+            staleTime: (1000 * 60 * 60 * 1), // 1 hour, this can be refreshed manually anyways
         }
     }
 });

types/JellifyLibrary.ts

@@ -1,8 +1,8 @@
 
 export interface JellifyLibrary {
     musicLibraryId: string;
-    musicLibraryName?: string;
-    musicLibraryPrimaryImageId?: string;
-    playlistLibraryId: string;
-    playlistLibraryPrimaryImageId?: string;
+    musicLibraryName?: string | undefined;
+    musicLibraryPrimaryImageId?: string | undefined;
+    playlistLibraryId?: string | undefined;
+    playlistLibraryPrimaryImageId?: string | undefined;
 }