carplay rework

components/CarPlay/Discover.tsx

@@ -0,0 +1,7 @@
+import { ListTemplate } from "react-native-carplay";
+
+const CarPlayDiscover = new ListTemplate({
+    tabTitle: "Discover"
+})
+
+export default CarPlayDiscover;

components/CarPlay/Home.tsx

@@ -1,11 +1,10 @@
 import { QueryKeys } from "../../enums/query-keys";
 import Client from "../../api/client";
-import { fetchRecentlyPlayed, fetchRecentlyPlayedArtists } from "../../api/queries/functions/recents";
+import { fetchRecentlyPlayed } from "../../api/queries/functions/recents";
 import { CarPlay, ListTemplate } from "react-native-carplay";
-import { CarPlayRecentlyPlayed } from "./RecentlyPlayed";
-import { CarPlayRecentArtists } from "./RecentArtists";
 import { queryClient } from "../../constants/query-client";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import ListItemTemplate from "./ListTemplate";
 
 const CarPlayHome : ListTemplate = new ListTemplate({
     id: 'Home',
@@ -26,14 +25,15 @@ const CarPlayHome : ListTemplate = new ListTemplate({
         switch (index) {
             case 0: 
                 const artists = queryClient.getQueryData<BaseItemDto[]>([QueryKeys.RecentlyPlayedArtists]);
-                CarPlay.pushTemplate(CarPlayRecentArtists(artists))
+                CarPlay.pushTemplate(ListItemTemplate(artists))
                 break;
             case 1:
                 const tracks = await fetchRecentlyPlayed()
-                CarPlay.pushTemplate(CarPlayRecentlyPlayed(tracks))
+                CarPlay.pushTemplate(ListItemTemplate(tracks))
                 break;
             case 2:
-
+                const playlists = queryClient.getQueryData<BaseItemDto[]>([QueryKeys.UserPlaylists])
+                CarPlay.pushTemplate(ListItemTemplate(playlists))
                 break;
 
         }

components/CarPlay/ListTemplate.tsx

@@ -0,0 +1,17 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { ListTemplate } from "react-native-carplay";
+
+const ListItemTemplate = (items: BaseItemDto[] | undefined) => new ListTemplate({
+    sections: [
+        {
+            items: items?.map(item => {
+                return {
+                    id: item.Id!,
+                    text: item.Name ?? "Untitled"
+                }
+            }) ?? []
+        }
+    ]
+})
+
+export default ListItemTemplate;

components/CarPlay/Navigation.tsx

@@ -1,10 +1,12 @@
 import { CarPlay, TabBarTemplate } from "react-native-carplay";
 import CarPlayHome from "./Home";
+import CarPlayDiscover from "./Discover";
 
 const CarPlayNavigation : TabBarTemplate = new TabBarTemplate({
     title: 'Navigation',
     templates: [
-        CarPlayHome
+        CarPlayHome,
+        CarPlayDiscover
     ],
     onTemplateSelect(template, e) {
         if (template)

components/CarPlay/RecentArtists.tsx

@@ -1,21 +0,0 @@
-import { queryClient } from "../../constants/query-client"
-import { BaseItemDto, ImageType } from "@jellyfin/sdk/lib/generated-client/models"
-import { ListTemplate } from "react-native-carplay"
-import { QueryKeys } from "../../enums/query-keys"
-
-export const CarPlayRecentArtists = (artists : BaseItemDto[] | undefined) => new ListTemplate({
-    title: "Recently Played",
-    sections: [
-        {
-            items: artists ? artists.map(artist => {
-                return {
-                    id: artist.Id!,
-                    text: artist.Name ? artist.Name : "Untitled Track",
-                    image: {
-                        uri: queryClient.getQueryData([ QueryKeys.ItemImage, ImageType.Primary ])
-                    }
-                }
-            }) : []
-        }
-    ]
-})

components/CarPlay/RecentlyPlayed.tsx

@@ -1,19 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { ListTemplate } from "react-native-carplay";
-
-export const CarPlayRecentlyPlayed = (recentTracks : BaseItemDto[]) => new ListTemplate({
-    title: "Recently Played",
-    sections: [
-        {
-            items: recentTracks.map(track => {
-                return {
-                    id: track.Id!,
-                    text: track.Name ? track.Name : "Untitled Track",
-                    // image: {
-                    //     uri: `file://${getImageFilePath(track.Id!, 150, 150, ImageType.Primary)}`
-                    // }
-                }
-            })
-        }
-    ]     
-})