carplay recent tracks playback, add some docs

components/CarPlay/RecentTracks.tsx

@@ -1,6 +1,9 @@
+import { mapDtoToTrack } from '../..//helpers/mappings'
 import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models'
-import { ListTemplate } from 'react-native-carplay'
+import { CarPlay, ListTemplate } from 'react-native-carplay'
+import TrackPlayer from 'react-native-track-player'
 import uuid from 'react-native-uuid'
+import CarPlayNowPlaying from './NowPlaying'
 
 const RecentTracksTemplate = (items: BaseItemDto[]) =>
 	new ListTemplate({
@@ -16,7 +19,15 @@ const RecentTracksTemplate = (items: BaseItemDto[]) =>
 					}) ?? [],
 			},
 		],
-		onItemSelect: async (item) => {},
+		onItemSelect: async (item) => {
+			await TrackPlayer.setQueue(items.map((item) => mapDtoToTrack(item)))
+
+			await TrackPlayer.skip(item.index)
+
+			await TrackPlayer.play()
+
+			CarPlay.pushTemplate(CarPlayNowPlaying())
+		},
 	})
 
 export default RecentTracksTemplate

components/provider.tsx

@@ -27,7 +27,7 @@ const JellifyContextInitializer = () => {
 			setCarPlayConnected(true)
 
 			if (loggedIn) {
-				CarPlay.setRootTemplate(CarPlayNavigation, true)
+				CarPlay.setRootTemplate(CarPlayNavigation)
 				CarPlay.enableNowPlaying(true) // https://github.com/birkir/react-native-carplay/issues/185
 				CarPlay.pushTemplate(CarPlayNowPlaying())
 			}

enums/query-keys.ts

@@ -5,6 +5,11 @@ export enum QueryKeys {
 	ArtistAlbums = 'ARTIST_ALBUMS',
 	ArtistById = 'ARTIST_BY_ID',
 	Credentials = 'CREDENTIALS',
+
+	/**
+	 * @deprecated Expo Image is being used instead of
+	 * querying for the images with Tanstack
+	 */
 	ItemImage = 'IMAGE_BY_ITEM_ID',
 	Libraries = 'LIBRARIES',
 	Pause = 'PAUSE',