feat: add birdseye screen and nav button on home screen #6
Conversation
There was a problem hiding this comment.
overall seems to be working as expected though I don't explicitly have this disabled it still shows the icon but doesn't do anything. The Frigate web UI does the same thing. I'm working on the settings screen now which should allow for changing some of the config values.
| const config = useConfig(); | ||
|
|
||
| const currentCamera = useAppDataStore(state => state.currentCamera); |
There was a problem hiding this comment.
The Header Button should be defined before the actual nav component.
| const config = useConfig(); | |
| const currentCamera = useAppDataStore(state => state.currentCamera); | |
| const HeaderLeftIcon = ({tintColor}: HeaderBackButtonProps) => { | |
| const nav = useNavigation(); | |
| const config = useConfig(); | |
| if (!config.data?.birdseye.enabled) { | |
| return null; | |
| } | |
| return ( | |
| <BirdseyeIcon | |
| height={25} | |
| width={25} | |
| onPress={() => { | |
| nav.navigate('Birdseye'); | |
| }} | |
| fill={tintColor} | |
| fillSecondary={tintColor} | |
| /> | |
| ); | |
| }; |
| fillSecondary={tintColor} | ||
| /> | ||
| ); | ||
| }, | ||
| headerTintColor: isDarkMode |
There was a problem hiding this comment.
Then we can use is like this in the component.
| headerTintColor: isDarkMode | |
| headerLeft: props => HeaderLeftIcon(props), |
| @@ -98,6 +104,8 @@ const TabNavigator = () => { | |||
| }; | |||
|
|
|||
| export const NavigationWrapper = () => { | |||
| const config = useConfig(); | |||
|
|
|||
| const currentCamera = useAppDataStore(state => state.currentCamera); | |||
There was a problem hiding this comment.
FYI using tint color like this is currently causing a warning since it's sort of an HSL value, but I don't think RN knows how to parse that. I'll be addressing this soon when I try and overhaul theming a bit.
|
overall seems to be working as expected - doesn't show me the icon without birdseye enabled. |
|
Awesome, I’ll tidy up the PR and then can merge. Thanks for testing it out |
|
@billyjacoby PR I think is ready if you just want to confirm 👍 |
|
So this doesn't actually connect to BirdsEye for me. Looking at my birdseye network tab it looks like the video connection is pretty different compared to the WebRTC camera streams, for me Birdseye is a JSMpeg video. Also the icon looks a bit wonky for me: I think we should use the default background bird image for this icon. |
|
Hmm, do you have restream enabled for Birdseye? I wonder if that makes it so the go2rtc powers the webrtc part of it. I think that was added in 0.12. No problem with changing the icon, can you clarify which one you mean though? Was looking for an svg that suits ... |
Icon: I can turn it into an SVG in Figma if there isn't one readily available, just lmk. Updating the restream value now and checking again. Sidenote, if we could add jsmpeg support that would reduce our need for WebRTC and hopefully work over VPN. |
|
Yeah adding restream to my config fixed it. lgtm! |
|
If you could make it an svg that would be great, don't think I'd be able to do that. Okay, will add a check too for restream being enabled and show an appropriate error if it's not. |
|
Updated Birdseye screen so it won't try to show webrtc if restream is off. Waiting on icon and then ready to merge I think 👍 |
|
|
|
Perfect yeah, had to add a little margin on the top to make it aligned with other icons but that's fine. |
| component={BirdseyeScreen} | ||
| options={{ | ||
| headerBackTitle: 'Home', | ||
| }} |
There was a problem hiding this comment.
| }} | |
| presentation: 'modal', |
Last nit - I think this should actually be presented in a Modal since the button to access is in the nav header. It feels a bit weird that it slides in as a card now. I'm okay with adding this later too, but wanted to call it out.
|
Yeah can take a look at doing that down the line. Not sure if it makes sense with it being a camera page, but then not sure what else would ever get added to that screen anyway, as it's not like events or anything can live there. |
Added the Birdseye camera view screen and navigation via a button in the top left of the Home Screen.
Icon should be hidden if the Birdseye config is not enabled and shown if it is. This works for me with the config enabled so hoping @billyjacoby can test since his Birdseye is off.