CarPlay stuff

components/CarPlay/NowPlaying.tsx

@@ -0,0 +1,34 @@
+import React, {useEffect} from 'react';
+import {Text, View} from 'react-native';
+import {CarPlay, NowPlayingTemplate} from 'react-native-carplay';
+
+export function NowPlaying() {
+  useEffect(() => {
+    const template = new NowPlayingTemplate({
+      albumArtistButtonEnabled: true,
+      upNextButtonEnabled: false,
+      onUpNextButtonPressed() {
+        console.log('up next was pressed');
+      },
+      onButtonPressed(e) {
+        console.log(e);
+      },
+    });
+
+    CarPlay.enableNowPlaying(true);
+    CarPlay.pushTemplate(template);
+
+    return () => {};
+    
+  }, []);
+
+  return (
+    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <Text>Now Playing</Text>
+    </View>
+  );
+}
+
+NowPlaying.navigationOptions = {
+  headerTitle: 'Now Playing Template',
+};

components/carplay.tsx

@@ -0,0 +1,13 @@
+import { createStackNavigator } from "@react-navigation/stack"
+import { NowPlaying } from "./CarPlay/NowPlaying";
+
+const Stack = createStackNavigator();
+
+export default function JellifyCarplay(): React.JSX.Element {
+
+    return (
+        <Stack.Navigator>
+            <Stack.Screen name="NowPlaying" component={NowPlaying} />
+        </Stack.Navigator>
+    )
+}

components/jellify.tsx

@@ -7,11 +7,12 @@ import { JellyfinAuthenticationProvider } from "./Login/provider";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { JellifyDarkTheme, JellifyLightTheme } from "./theme";
 import { PlayerProvider } from "../player/provider";
-import { useColorScheme } from "react-native";
+import { Text, useColorScheme, View } from "react-native";
 import { PortalProvider } from "tamagui";
 import Client from "../api/client";
 import { JellifyProvider, useJellifyContext } from "./provider";
 import { CarPlay } from "react-native-carplay"
+import JellifyCarplay from "./carplay";
 
 export default function Jellify(): React.JSX.Element {
 
@@ -56,7 +57,17 @@ function App(): React.JSX.Element {
     };
   });
 
-  return (
+  return carPlayConnected ? (
+    <NavigationContainer>
+      { loggedIn ? (
+        <JellifyCarplay />
+      ) : (
+        <View>
+          <Text>Please login in the app before using CarPlay</Text>
+        </View>
+      )}
+    </NavigationContainer>
+  ) : (
     <NavigationContainer theme={isDarkMode ? JellifyDarkTheme : JellifyLightTheme}>
       <SafeAreaProvider>
         { loggedIn ? (
@@ -70,5 +81,5 @@ function App(): React.JSX.Element {
         )}
       </SafeAreaProvider>
     </NavigationContainer>
-  );
+  )
 }