From d91c7ae3f54ad94b21a07bd56edc25ded44d7593 Mon Sep 17 00:00:00 2001 From: Dom Needham <=> Date: Tue, 19 Sep 2023 21:23:51 +0100 Subject: [PATCH 1/6] Add birdseye screen and nav button on home screen --- src/assets/icons/birdseye.svg | 1 + src/navigation/navigationContainer.tsx | 35 ++++++++++++++++++- src/screens/BirdseyeScreen/BirdseyeScreen.tsx | 16 +++++++++ src/screens/BirdseyeScreen/index.ts | 1 + src/screens/index.ts | 1 + 5 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 src/assets/icons/birdseye.svg create mode 100644 src/screens/BirdseyeScreen/BirdseyeScreen.tsx create mode 100644 src/screens/BirdseyeScreen/index.ts diff --git a/src/assets/icons/birdseye.svg b/src/assets/icons/birdseye.svg new file mode 100644 index 0000000..b57a632 --- /dev/null +++ b/src/assets/icons/birdseye.svg @@ -0,0 +1 @@ +camera-document \ No newline at end of file diff --git a/src/navigation/navigationContainer.tsx b/src/navigation/navigationContainer.tsx index 3be32a1..45da62c 100644 --- a/src/navigation/navigationContainer.tsx +++ b/src/navigation/navigationContainer.tsx @@ -1,12 +1,14 @@ -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'; @@ -15,6 +17,7 @@ import { HomeScreen, LiveViewScreen, OnBoardingScreen, + BirdseyeScreen, } from '@screens'; import {useAppDataStore} from '@stores'; @@ -22,9 +25,11 @@ import {useAppDataStore} from '@stores'; // 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; Onboarding: undefined; }; @@ -41,6 +46,7 @@ const TabStack = createBottomTabNavigator(); const TabNavigator = () => { const isDarkMode = useColorScheme() === 'dark'; + //TODO: make work with tailwind theme... return ( { }; export const NavigationWrapper = () => { + const config = useConfig(); + const currentCamera = useAppDataStore(state => state.currentCamera); const isDarkMode = useColorScheme() === 'dark'; @@ -117,6 +125,24 @@ export const NavigationWrapper = () => { options={{ headerBackTitle: 'Back', headerTitle: 'Bird Watcher - Frigate', + headerLeft: () => { + const nav = useNavigation(); + + if (!config.data?.birdseye.enabled) { + return null; + } + + return ( + { + nav.navigate('Birdseye'); + }} + color="#000" + /> + ); + }, headerTintColor: isDarkMode ? colors.dark.accent : colors.light.accent, @@ -132,6 +158,13 @@ export const NavigationWrapper = () => { }} /> + ); diff --git a/src/screens/BirdseyeScreen/BirdseyeScreen.tsx b/src/screens/BirdseyeScreen/BirdseyeScreen.tsx new file mode 100644 index 0000000..0d60697 --- /dev/null +++ b/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 Loading ...; + } + + if (config.data?.birdseye.enabled) { + return ; + } + + return Birdseye is not enabled; +}; diff --git a/src/screens/BirdseyeScreen/index.ts b/src/screens/BirdseyeScreen/index.ts new file mode 100644 index 0000000..607326c --- /dev/null +++ b/src/screens/BirdseyeScreen/index.ts @@ -0,0 +1 @@ +export * from './BirdseyeScreen'; diff --git a/src/screens/index.ts b/src/screens/index.ts index 80e1ad3..f8e8060 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -3,3 +3,4 @@ export * from './LiveViewScreen'; export * from './EventsScreen'; // export * from './onboardingScreen'; +export * from './BirdseyeScreen'; From e7233b847c078e9abfa49f8563389fa3f048fad0 Mon Sep 17 00:00:00 2001 From: Dom Needham <=> Date: Tue, 19 Sep 2023 21:33:04 +0100 Subject: [PATCH 2/6] support dark mode --- src/navigation/navigationContainer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/navigation/navigationContainer.tsx b/src/navigation/navigationContainer.tsx index 45da62c..7de5790 100644 --- a/src/navigation/navigationContainer.tsx +++ b/src/navigation/navigationContainer.tsx @@ -139,7 +139,8 @@ export const NavigationWrapper = () => { onPress={() => { nav.navigate('Birdseye'); }} - color="#000" + fill={tintColor} + fillSecondary={tintColor} /> ); }, From e279969b88c8ef5e4a62cdf2f65013cb8e1c7504 Mon Sep 17 00:00:00 2001 From: Dom Needham <=> Date: Wed, 20 Sep 2023 08:35:22 +0100 Subject: [PATCH 3/6] Code cleanup --- .../components/BirdseyeNavigationButton.tsx | 29 ++++++++++++++++++ src/navigation/index.ts | 2 ++ src/navigation/navigationContainer.tsx | 30 +++---------------- src/screens/index.ts | 2 +- 4 files changed, 36 insertions(+), 27 deletions(-) create mode 100644 src/navigation/components/BirdseyeNavigationButton.tsx diff --git a/src/navigation/components/BirdseyeNavigationButton.tsx b/src/navigation/components/BirdseyeNavigationButton.tsx new file mode 100644 index 0000000..05737a6 --- /dev/null +++ b/src/navigation/components/BirdseyeNavigationButton.tsx @@ -0,0 +1,29 @@ +import BirdseyeIcon from '@icons/birdseye.svg'; +import {useNavigation} from '@react-navigation/native'; + +import {useConfig} from '@api'; + +interface BirdseyeIconProps { + fill?: string; +} + +export const BirdseyeNavigationButton = (props: BirdseyeIconProps) => { + const nav = useNavigation(); + const config = useConfig(); + + if (!config.data?.birdseye.enabled) { + return null; + } + + return ( + { + nav.navigate('Birdseye'); + }} + fill={props.fill} + fillSecondary={props.fill} + /> + ); +}; diff --git a/src/navigation/index.ts b/src/navigation/index.ts index b5551dd..3b9fee3 100644 --- a/src/navigation/index.ts +++ b/src/navigation/index.ts @@ -1 +1,3 @@ export * from './navigationContainer'; + +export * from './components/BirdseyeNavigationButton'; diff --git a/src/navigation/navigationContainer.tsx b/src/navigation/navigationContainer.tsx index 7de5790..52fed27 100644 --- a/src/navigation/navigationContainer.tsx +++ b/src/navigation/navigationContainer.tsx @@ -1,23 +1,22 @@ -import {Button, useColorScheme} from 'react-native'; +import {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 {BirdseyeNavigationButton} from '@navigation'; import { + BirdseyeScreen, EventsScreen, HomeScreen, LiveViewScreen, OnBoardingScreen, - BirdseyeScreen, } from '@screens'; import {useAppDataStore} from '@stores'; @@ -25,7 +24,6 @@ import {useAppDataStore} from '@stores'; // 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; @@ -104,8 +102,6 @@ const TabNavigator = () => { }; export const NavigationWrapper = () => { - const config = useConfig(); - const currentCamera = useAppDataStore(state => state.currentCamera); const isDarkMode = useColorScheme() === 'dark'; @@ -125,25 +121,7 @@ export const NavigationWrapper = () => { options={{ headerBackTitle: 'Back', headerTitle: 'Bird Watcher - Frigate', - headerLeft: () => { - const nav = useNavigation(); - - if (!config.data?.birdseye.enabled) { - return null; - } - - return ( - { - nav.navigate('Birdseye'); - }} - fill={tintColor} - fillSecondary={tintColor} - /> - ); - }, + headerLeft: () => , headerTintColor: isDarkMode ? colors.dark.accent : colors.light.accent, diff --git a/src/screens/index.ts b/src/screens/index.ts index f8e8060..eb887d3 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -1,4 +1,4 @@ -export * from './HomeScreen'; +export * from './homeScreen'; export * from './LiveViewScreen'; export * from './EventsScreen'; // From b241fbd6e303307aac5c59de7bbc6a7a9dbea72a Mon Sep 17 00:00:00 2001 From: Dom Needham <=> Date: Wed, 20 Sep 2023 08:48:17 +0100 Subject: [PATCH 4/6] Align icon size with settings --- src/navigation/navigationContainer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/navigation/navigationContainer.tsx b/src/navigation/navigationContainer.tsx index 07a6df2..ecea592 100644 --- a/src/navigation/navigationContainer.tsx +++ b/src/navigation/navigationContainer.tsx @@ -117,8 +117,8 @@ const LeftHeaderButton = ({tintColor}: {tintColor?: string}) => { nav.navigate('Birdseye'); }}> From 9fe97ca9a603ccb99cd0466b69345206d0a4fc5b Mon Sep 17 00:00:00 2001 From: Dom Needham <=> Date: Wed, 20 Sep 2023 12:14:14 +0100 Subject: [PATCH 5/6] Handle non correct birdseye settings --- src/screens/BirdseyeScreen/BirdseyeScreen.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/screens/BirdseyeScreen/BirdseyeScreen.tsx b/src/screens/BirdseyeScreen/BirdseyeScreen.tsx index 0d60697..66c5e86 100644 --- a/src/screens/BirdseyeScreen/BirdseyeScreen.tsx +++ b/src/screens/BirdseyeScreen/BirdseyeScreen.tsx @@ -8,9 +8,22 @@ export const BirdseyeScreen = () => { return Loading ...; } - if (config.data?.birdseye.enabled) { - return ; + if (config.isError) { + return Failed to load frigate config; } - return Birdseye is not enabled; + if (!config.data?.birdseye.enabled) { + return Birdseye is not enabled; + } + + if (!config.data?.birdseye.restream) { + return ( + + Restream must be enabled so that the birdseye feed is served through + WebRTC. Please update your Frigate config. + + ); + } + + return ; }; From 8f62dc47c9d80f9d04324c15b7699cec68115e46 Mon Sep 17 00:00:00 2001 From: Dom Needham <=> Date: Wed, 20 Sep 2023 13:21:45 +0100 Subject: [PATCH 6/6] Use new birdseye icon --- src/assets/icons/birdseye.svg | 4 +++- src/navigation/navigationContainer.tsx | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/assets/icons/birdseye.svg b/src/assets/icons/birdseye.svg index b57a632..d7d8817 100644 --- a/src/assets/icons/birdseye.svg +++ b/src/assets/icons/birdseye.svg @@ -1 +1,3 @@ -camera-document \ No newline at end of file + + + \ No newline at end of file diff --git a/src/navigation/navigationContainer.tsx b/src/navigation/navigationContainer.tsx index ecea592..0495ba5 100644 --- a/src/navigation/navigationContainer.tsx +++ b/src/navigation/navigationContainer.tsx @@ -121,6 +121,7 @@ const LeftHeaderButton = ({tintColor}: {tintColor?: string}) => { width={24} fill={tintColor} fillSecondary={tintColor} + style={{marginTop: 2}} /> );