feat: add birdseye screen and nav button on home screen

src/navigation/navigationContainer.tsx

@@ -1,30 +1,35 @@
-import {useColorScheme} from 'react-native';
+import {Button, useColorScheme} from 'react-native';
 
 import EventIcon from '@icons/event.svg';
 import HomeIcon from '@icons/home.svg';
 import VideoIcon from '@icons/video-waveform.svg';
+import BirdseyeIcon from '@icons/birdseye.svg';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {
   NavigationContainer,
   NavigatorScreenParams,
+  useNavigation,
 } from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
 import {
   EventsScreen,
   HomeScreen,
   LiveViewScreen,
   OnBoardingScreen,
+  BirdseyeScreen,
 } from '@screens';
 import {useAppDataStore} from '@stores';
 
 //? Can't figure out how to properly type this
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 import {colors, hslFunction} from '../../themeColors.js';
+import {useConfig} from '@api';
 
 export type MainStackParamList = {
   Home: undefined;
+  Birdseye: undefined;
   Tabs: NavigatorScreenParams<TabsStackParamList>;
   Onboarding: undefined;
 };
@@ -41,6 +46,7 @@
 
 const TabNavigator = () => {
   const isDarkMode = useColorScheme() === 'dark';
+
   //TODO: make work with tailwind theme...
   return (
     <TabStack.Navigator
@@ -98,6 +104,8 @@
 };
 
 export const NavigationWrapper = () => {
+  const config = useConfig();
+
   const currentCamera = useAppDataStore(state => state.currentCamera);
   const isDarkMode = useColorScheme() === 'dark';
 
@@ -117,6 +125,25 @@
           options={{
             headerBackTitle: 'Back',
             headerTitle: 'Bird Watcher - Frigate',
+            headerLeft: () => {
+              const nav = useNavigation();
+
+              if (!config.data?.birdseye.enabled) {
+                return null;
+              }
+
+              return (
+                <BirdseyeIcon
+                  height={25}
+                  width={25}
+                  onPress={() => {
+                    nav.navigate('Birdseye');
+                  }}
+                  fill={tintColor}
+                  fillSecondary={tintColor}
+                />
+              );
+            },
             headerTintColor: isDarkMode
               ? colors.dark.accent
               : colors.light.accent,
@@ -132,6 +159,13 @@
           }}
         />
         <Stack.Screen name="Onboarding" component={OnBoardingScreen} />
+        <Stack.Screen
+          name="Birdseye"
+          component={BirdseyeScreen}
+          options={{
+            headerBackTitle: 'Home',
+          }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/screens/BirdseyeScreen/BirdseyeScreen.tsx

@@ -0,0 +1,16 @@
+import {useConfig} from '@api';
+import {BaseText, WebRTCView} from '@components';
+
+export const BirdseyeScreen = () => {
+  const config = useConfig();
+
+  if (config.isLoading) {
+    return <BaseText>Loading ...</BaseText>;
+  }
+
+  if (config.data?.birdseye.enabled) {
+    return <WebRTCView cameraName="birdseye" />;
+  }
+
+  return <BaseText>Birdseye is not enabled</BaseText>;
+};

src/screens/BirdseyeScreen/index.ts

@@ -0,0 +1 @@
+export * from './BirdseyeScreen';

src/screens/index.ts

@@ -1,5 +1,6 @@
 export * from './HomeScreen';
 export * from './LiveViewScreen';
 export * from './EventsScreen';
 //
 export * from './onboardingScreen';
+export * from './BirdseyeScreen';