From 6f6b0964441024671545b85a7ad7f46d893b8d5b Mon Sep 17 00:00:00 2001
From: Billy Jacoby <billyjacoby@gmail.com>
Date: Sun, 8 Oct 2023 08:03:01 -0400
Subject: [PATCH 1/5] chore: rename navigation

---
 ios/Podfile.lock                              |   2 +-
 src/navigation/CameraTabNavigator.tsx         |  45 ++++
 src/navigation/RootNavigation.tsx             |  95 +++++++++
 .../components/LeftHeaderButton.tsx           |  31 +++
 .../components/RightHeaderButton.tsx          |  15 ++
 src/navigation/components/TabBarIcon.tsx      |  50 +++++
 src/navigation/components/index.ts            |   2 +
 src/navigation/index.ts                       |   2 +-
 src/navigation/navigationContainer.tsx        | 200 ------------------
 .../EventsScreen/EventsScreen.tsx             |   0
 .../EventsScreen/components/CameraEvent.tsx   |   0
 .../EventsScreen/components/EventDetails.tsx  |   0
 .../components/EventListFooter.tsx            |   0
 .../components/SectionDateHeader.tsx          |   0
 .../EventsScreen/components/index.ts          |   0
 .../{ => CameraScreens}/EventsScreen/index.ts |   0
 .../{ => CameraScreens}/LiveViewScreen.tsx    |   0
 src/screens/CameraScreens/index.ts            |   2 +
 src/screens/HomeScreen.tsx                    |   2 +-
 src/screens/index.ts                          |   3 +-
 20 files changed, 244 insertions(+), 205 deletions(-)
 create mode 100644 src/navigation/CameraTabNavigator.tsx
 create mode 100644 src/navigation/RootNavigation.tsx
 create mode 100644 src/navigation/components/LeftHeaderButton.tsx
 create mode 100644 src/navigation/components/RightHeaderButton.tsx
 create mode 100644 src/navigation/components/TabBarIcon.tsx
 create mode 100644 src/navigation/components/index.ts
 delete mode 100644 src/navigation/navigationContainer.tsx
 rename src/screens/{ => CameraScreens}/EventsScreen/EventsScreen.tsx (100%)
 rename src/screens/{ => CameraScreens}/EventsScreen/components/CameraEvent.tsx (100%)
 rename src/screens/{ => CameraScreens}/EventsScreen/components/EventDetails.tsx (100%)
 rename src/screens/{ => CameraScreens}/EventsScreen/components/EventListFooter.tsx (100%)
 rename src/screens/{ => CameraScreens}/EventsScreen/components/SectionDateHeader.tsx (100%)
 rename src/screens/{ => CameraScreens}/EventsScreen/components/index.ts (100%)
 rename src/screens/{ => CameraScreens}/EventsScreen/index.ts (100%)
 rename src/screens/{ => CameraScreens}/LiveViewScreen.tsx (100%)
 create mode 100644 src/screens/CameraScreens/index.ts

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 04efaf5..8405143 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -801,4 +801,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: b0e3f0f7f573d264ac8c53b7b631360254dc3679
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.13.0
diff --git a/src/navigation/CameraTabNavigator.tsx b/src/navigation/CameraTabNavigator.tsx
new file mode 100644
index 0000000..3e45799
--- /dev/null
+++ b/src/navigation/CameraTabNavigator.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {useColorScheme} from 'react-native';
+
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+
+import {EventsScreen, LiveViewScreen} from '@screens';
+import {hslToHex} from '@utils';
+
+import {colors} from '../../themeColors.js';
+
+import {TabBarIcon} from './components/TabBarIcon';
+
+export type CameraTabsStackParamList = {
+  Events: undefined;
+  Live: undefined;
+  Recordings: undefined;
+};
+
+const CameraTabStack = createBottomTabNavigator<CameraTabsStackParamList>();
+
+export const CameraTabNavigator = () => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  return (
+    <CameraTabStack.Navigator
+      screenOptions={({route}) => ({
+        headerTitle: '',
+        tabBarIcon: ({color, size}) =>
+          TabBarIcon({color, size, route, isDarkMode}),
+        tabBarActiveTintColor: isDarkMode ? 'white' : 'black',
+        tabBarInactiveTintColor: 'gray',
+        tabBarStyle: {
+          borderTopWidth: 0,
+          backgroundColor: isDarkMode
+            ? hslToHex(colors.dark.background)
+            : hslToHex(colors.light.background),
+        },
+        header: () => null,
+      })}>
+      <CameraTabStack.Screen name="Live" component={LiveViewScreen} />
+      <CameraTabStack.Screen name="Events" component={EventsScreen} />
+      <CameraTabStack.Screen name="Recordings" component={EventsScreen} />
+    </CameraTabStack.Navigator>
+  );
+};
diff --git a/src/navigation/RootNavigation.tsx b/src/navigation/RootNavigation.tsx
new file mode 100644
index 0000000..436856d
--- /dev/null
+++ b/src/navigation/RootNavigation.tsx
@@ -0,0 +1,95 @@
+import {useColorScheme} from 'react-native';
+
+import {
+  NavigationContainer,
+  NavigatorScreenParams,
+} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+
+import {
+  CameraTabNavigator,
+  CameraTabsStackParamList,
+} from './CameraTabNavigator';
+import {LeftHeaderButton, RightHeaderButton} from './components';
+import {
+  BirdseyeScreen,
+  HomeScreen,
+  OnBoardingScreen,
+  SettingsScreen,
+} from '@screens';
+import {useAppDataStore} from '@stores';
+import {hslToHex} from '@utils';
+
+import {colors} from '../../themeColors.js';
+
+export type MainStackParamList = {
+  Home: undefined;
+  Birdseye: undefined;
+  CameraTabs: NavigatorScreenParams<CameraTabsStackParamList>;
+  Settings: undefined;
+  Onboarding: undefined;
+};
+
+const Stack = createNativeStackNavigator<MainStackParamList>();
+
+export const RootNavigation = () => {
+  const currentCamera = useAppDataStore(state => state.currentCamera);
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const tintColor = isDarkMode
+    ? hslToHex(colors.dark.foreground)
+    : hslToHex(colors.light.foreground);
+
+  const backgroundColor = isDarkMode
+    ? hslToHex(colors.dark.background)
+    : hslToHex(colors.light.background);
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{
+          headerStyle: {backgroundColor: backgroundColor},
+          headerShadowVisible: false,
+          headerTintColor: tintColor,
+        }}>
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{
+            headerBackTitle: 'Back',
+            headerTitle: 'Bird Watcher - Frigate',
+            headerLeft: props => LeftHeaderButton(props as {tintColor: string}),
+            headerRight: props =>
+              RightHeaderButton(props as {tintColor: string}),
+            headerTintColor: isDarkMode
+              ? hslToHex(colors.dark.foreground)
+              : hslToHex(colors.light.foreground),
+          }}
+        />
+        <Stack.Screen
+          name="CameraTabs"
+          component={CameraTabNavigator}
+          options={{
+            headerBackTitle: 'Home',
+            headerTitle: currentCamera?.replaceAll('_', ' '),
+            headerTintColor: tintColor,
+          }}
+        />
+        <Stack.Screen
+          name="Settings"
+          component={SettingsScreen}
+          options={{presentation: 'modal', headerTransparent: false}}
+        />
+        <Stack.Screen name="Onboarding" component={OnBoardingScreen} />
+        <Stack.Screen
+          name="Birdseye"
+          component={BirdseyeScreen}
+          options={{
+            headerBackTitle: 'Home',
+            presentation: 'modal',
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
diff --git a/src/navigation/components/LeftHeaderButton.tsx b/src/navigation/components/LeftHeaderButton.tsx
new file mode 100644
index 0000000..5737c7c
--- /dev/null
+++ b/src/navigation/components/LeftHeaderButton.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+
+import BirdseyeIcon from '@icons/birdseye.svg';
+import {useNavigation} from '@react-navigation/native';
+
+import {useConfig} from '@api';
+
+export const LeftHeaderButton = ({tintColor}: {tintColor?: string}) => {
+  const nav = useNavigation();
+  const config = useConfig();
+
+  if (!config.data?.birdseye.enabled) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        nav.navigate('Birdseye');
+      }}>
+      <BirdseyeIcon
+        height={24}
+        width={24}
+        fill={tintColor}
+        fillSecondary={tintColor}
+        style={{marginTop: 2}}
+      />
+    </TouchableOpacity>
+  );
+};
diff --git a/src/navigation/components/RightHeaderButton.tsx b/src/navigation/components/RightHeaderButton.tsx
new file mode 100644
index 0000000..3ddc2d6
--- /dev/null
+++ b/src/navigation/components/RightHeaderButton.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+
+import SettingsIcon from '@icons/settings.svg';
+import {useNavigation} from '@react-navigation/native';
+
+export const RightHeaderButton = ({tintColor}: {tintColor?: string}) => {
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
+      <SettingsIcon height={22} width={22} fill={tintColor} />
+    </TouchableOpacity>
+  );
+};
diff --git a/src/navigation/components/TabBarIcon.tsx b/src/navigation/components/TabBarIcon.tsx
new file mode 100644
index 0000000..55f2f2a
--- /dev/null
+++ b/src/navigation/components/TabBarIcon.tsx
@@ -0,0 +1,50 @@
+import EventIcon from '@icons/event.svg';
+import RecordingIcon from '@icons/recording.svg';
+import VideoIcon from '@icons/video-waveform.svg';
+import {RouteProp} from '@react-navigation/native';
+
+import {CameraTabsStackParamList} from '../CameraTabNavigator';
+
+export const TabBarIcon = ({
+  color,
+  size,
+  route,
+  isDarkMode,
+}: {
+  color: string;
+  size: number;
+  isDarkMode: boolean;
+  route: RouteProp<CameraTabsStackParamList, keyof CameraTabsStackParamList>;
+}) => {
+  if (route.name === 'Recordings') {
+    return (
+      <RecordingIcon
+        height={size}
+        width={size}
+        fill={color}
+        fillSecondary={color}
+      />
+    );
+  }
+  if (route.name === 'Events') {
+    return (
+      <EventIcon
+        height={size}
+        width={size}
+        fill={color}
+        fillSecondary={color}
+      />
+    );
+  }
+  if (route.name === 'Live') {
+    return (
+      <VideoIcon
+        height={size}
+        width={size}
+        fill={color}
+        fillSecondary={isDarkMode ? 'black' : 'white'}
+      />
+    );
+  }
+  return null;
+};
diff --git a/src/navigation/components/index.ts b/src/navigation/components/index.ts
new file mode 100644
index 0000000..d21232f
--- /dev/null
+++ b/src/navigation/components/index.ts
@@ -0,0 +1,2 @@
+export * from './LeftHeaderButton';
+export * from './RightHeaderButton';
diff --git a/src/navigation/index.ts b/src/navigation/index.ts
index b5551dd..96e9fff 100644
--- a/src/navigation/index.ts
+++ b/src/navigation/index.ts
@@ -1 +1 @@
-export * from './navigationContainer';
+export * from './RootNavigation';
diff --git a/src/navigation/navigationContainer.tsx b/src/navigation/navigationContainer.tsx
deleted file mode 100644
index d57e600..0000000
--- a/src/navigation/navigationContainer.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import {TouchableOpacity, useColorScheme} from 'react-native';
-
-import BirdseyeIcon from '@icons/birdseye.svg';
-import EventIcon from '@icons/event.svg';
-import HomeIcon from '@icons/home.svg';
-import SettingsIcon from '@icons/settings.svg';
-import VideoIcon from '@icons/video-waveform.svg';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {
-  NavigationContainer,
-  NavigatorScreenParams,
-  useNavigation,
-} from '@react-navigation/native';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
-
-import {useConfig} from '@api';
-import {
-  BirdseyeScreen,
-  EventsScreen,
-  HomeScreen,
-  LiveViewScreen,
-  OnBoardingScreen,
-  SettingsScreen,
-} from '@screens';
-import {useAppDataStore} from '@stores';
-import {hslToHex} from '@utils';
-
-import {colors} from '../../themeColors.js';
-
-export type MainStackParamList = {
-  Home: undefined;
-  Birdseye: undefined;
-  Tabs: NavigatorScreenParams<TabsStackParamList>;
-  Settings: undefined;
-  Onboarding: undefined;
-};
-
-const Stack = createNativeStackNavigator<MainStackParamList>();
-
-export type TabsStackParamList = {
-  Events: undefined;
-  Live: undefined;
-  Recordings: undefined;
-};
-
-const TabStack = createBottomTabNavigator<TabsStackParamList>();
-
-const TabNavigator = () => {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  return (
-    <TabStack.Navigator
-      screenOptions={({route}) => ({
-        headerTitle: '',
-        // eslint-disable-next-line react/no-unstable-nested-components
-        tabBarIcon: ({color, size}) => {
-          if (route.name === 'Recordings') {
-            // TODO
-            return (
-              <HomeIcon
-                height={size}
-                width={size}
-                fill={color}
-                fillSecondary={color}
-              />
-            );
-          }
-          if (route.name === 'Events') {
-            return (
-              <EventIcon
-                height={size}
-                width={size}
-                fill={color}
-                fillSecondary={color}
-              />
-            );
-          }
-          if (route.name === 'Live') {
-            return (
-              <VideoIcon
-                height={size}
-                width={size}
-                fill={color}
-                fillSecondary={isDarkMode ? 'black' : 'white'}
-              />
-            );
-          }
-          return null;
-        },
-        tabBarActiveTintColor: isDarkMode ? 'white' : 'black',
-        tabBarInactiveTintColor: 'gray',
-        tabBarStyle: {
-          borderTopWidth: 0,
-          backgroundColor: isDarkMode
-            ? hslToHex(colors.dark.background)
-            : hslToHex(colors.light.background),
-        },
-        header: () => null,
-      })}>
-      <TabStack.Screen name="Events" component={EventsScreen} />
-      <TabStack.Screen name="Live" component={LiveViewScreen} />
-    </TabStack.Navigator>
-  );
-};
-
-const LeftHeaderButton = ({tintColor}: {tintColor?: string}) => {
-  const nav = useNavigation();
-  const config = useConfig();
-
-  if (!config.data?.birdseye.enabled) {
-    return null;
-  }
-
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        nav.navigate('Birdseye');
-      }}>
-      <BirdseyeIcon
-        height={24}
-        width={24}
-        fill={tintColor}
-        fillSecondary={tintColor}
-        style={{marginTop: 2}}
-      />
-    </TouchableOpacity>
-  );
-};
-
-const RightHeaderButton = ({tintColor}: {tintColor?: string}) => {
-  const navigation = useNavigation();
-
-  return (
-    <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
-      <SettingsIcon height={22} width={22} fill={tintColor} />
-    </TouchableOpacity>
-  );
-};
-
-export const RootNavigation = () => {
-  const currentCamera = useAppDataStore(state => state.currentCamera);
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const tintColor = isDarkMode
-    ? hslToHex(colors.dark.foreground)
-    : hslToHex(colors.light.foreground);
-
-  const backgroundColor = isDarkMode
-    ? hslToHex(colors.dark.background)
-    : hslToHex(colors.light.background);
-
-  return (
-    <NavigationContainer>
-      <Stack.Navigator
-        screenOptions={{
-          headerStyle: {backgroundColor: backgroundColor},
-          headerShadowVisible: false,
-          headerTintColor: tintColor,
-        }}>
-        <Stack.Screen
-          name="Home"
-          component={HomeScreen}
-          options={{
-            headerBackTitle: 'Back',
-            headerTitle: 'Bird Watcher - Frigate',
-            headerLeft: props => LeftHeaderButton(props as {tintColor: string}),
-            headerRight: props =>
-              RightHeaderButton(props as {tintColor: string}),
-            headerTintColor: isDarkMode
-              ? hslToHex(colors.dark.foreground)
-              : hslToHex(colors.light.foreground),
-          }}
-        />
-        <Stack.Screen
-          name="Tabs"
-          component={TabNavigator}
-          options={{
-            headerBackTitle: 'Home',
-            headerTitle: currentCamera?.replaceAll('_', ' '),
-            headerTintColor: tintColor,
-          }}
-        />
-        <Stack.Screen
-          name="Settings"
-          component={SettingsScreen}
-          options={{presentation: 'modal', headerTransparent: false}}
-        />
-        <Stack.Screen name="Onboarding" component={OnBoardingScreen} />
-        <Stack.Screen
-          name="Birdseye"
-          component={BirdseyeScreen}
-          options={{
-            headerBackTitle: 'Home',
-            presentation: 'modal',
-          }}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-};
diff --git a/src/screens/EventsScreen/EventsScreen.tsx b/src/screens/CameraScreens/EventsScreen/EventsScreen.tsx
similarity index 100%
rename from src/screens/EventsScreen/EventsScreen.tsx
rename to src/screens/CameraScreens/EventsScreen/EventsScreen.tsx
diff --git a/src/screens/EventsScreen/components/CameraEvent.tsx b/src/screens/CameraScreens/EventsScreen/components/CameraEvent.tsx
similarity index 100%
rename from src/screens/EventsScreen/components/CameraEvent.tsx
rename to src/screens/CameraScreens/EventsScreen/components/CameraEvent.tsx
diff --git a/src/screens/EventsScreen/components/EventDetails.tsx b/src/screens/CameraScreens/EventsScreen/components/EventDetails.tsx
similarity index 100%
rename from src/screens/EventsScreen/components/EventDetails.tsx
rename to src/screens/CameraScreens/EventsScreen/components/EventDetails.tsx
diff --git a/src/screens/EventsScreen/components/EventListFooter.tsx b/src/screens/CameraScreens/EventsScreen/components/EventListFooter.tsx
similarity index 100%
rename from src/screens/EventsScreen/components/EventListFooter.tsx
rename to src/screens/CameraScreens/EventsScreen/components/EventListFooter.tsx
diff --git a/src/screens/EventsScreen/components/SectionDateHeader.tsx b/src/screens/CameraScreens/EventsScreen/components/SectionDateHeader.tsx
similarity index 100%
rename from src/screens/EventsScreen/components/SectionDateHeader.tsx
rename to src/screens/CameraScreens/EventsScreen/components/SectionDateHeader.tsx
diff --git a/src/screens/EventsScreen/components/index.ts b/src/screens/CameraScreens/EventsScreen/components/index.ts
similarity index 100%
rename from src/screens/EventsScreen/components/index.ts
rename to src/screens/CameraScreens/EventsScreen/components/index.ts
diff --git a/src/screens/EventsScreen/index.ts b/src/screens/CameraScreens/EventsScreen/index.ts
similarity index 100%
rename from src/screens/EventsScreen/index.ts
rename to src/screens/CameraScreens/EventsScreen/index.ts
diff --git a/src/screens/LiveViewScreen.tsx b/src/screens/CameraScreens/LiveViewScreen.tsx
similarity index 100%
rename from src/screens/LiveViewScreen.tsx
rename to src/screens/CameraScreens/LiveViewScreen.tsx
diff --git a/src/screens/CameraScreens/index.ts b/src/screens/CameraScreens/index.ts
new file mode 100644
index 0000000..3e2cef7
--- /dev/null
+++ b/src/screens/CameraScreens/index.ts
@@ -0,0 +1,2 @@
+export * from './LiveViewScreen';
+export * from './EventsScreen';
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
index 040cec1..ec6d239 100644
--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@@ -18,7 +18,7 @@ export const HomeScreen = () => {
 
   const onCameraPress = (cameraName: string) => {
     setCurrentCamera(cameraName);
-    navigation.navigate('Tabs', {screen: 'Events'});
+    navigation.navigate('CameraTabs', {screen: 'Events'});
   };
 
   if (isLoading) {
diff --git a/src/screens/index.ts b/src/screens/index.ts
index 4e907bd..69a516c 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -1,6 +1,5 @@
 export * from './HomeScreen';
-export * from './LiveViewScreen';
-export * from './EventsScreen';
+export * from './CameraScreens';
 export * from './SettingsScreen';
 //
 export * from './onboardingScreen';

From d7e3af9d503407c3bf9ed5f0b452a99331004b42 Mon Sep 17 00:00:00 2001
From: Billy Jacoby <billyjacoby@gmail.com>
Date: Fri, 13 Oct 2023 17:32:04 -0400
Subject: [PATCH 2/5] feat: add recording screens

---
 ios/Podfile.lock                              |  12 ++
 package.json                                  |   2 +
 src/assets/icons/play-rect.svg                |   4 +
 src/assets/icons/recording.svg                |  11 ++
 src/components/VideoPlayer.tsx                |   7 +-
 src/components/index.ts                       |   1 +
 src/components/loadingView.tsx                |  11 ++
 src/lib/api/hooks/index.ts                    |   4 +
 src/lib/api/hooks/useRecordingSummary.ts      |  33 ++++++
 src/lib/api/hooks/useRecordings.ts            |  34 ++++++
 src/lib/api/index.ts                          |   3 +-
 src/lib/api/types/recordings.ts               |  13 +++
 src/navigation/CameraTabNavigator.tsx         |   4 +-
 src/navigation/RootNavigation.tsx             |  13 +++
 .../EventsScreen/EventsScreen.tsx             |  20 +---
 .../RecordingsScreen/RecordingsScreen.tsx     | 108 ++++++++++++++++++
 .../RecordingsScreen/components/index.ts      |   0
 .../CameraScreens/RecordingsScreen/index.ts   |   1 +
 .../components/SectionDateHeader.tsx          |  33 +++---
 src/screens/CameraScreens/components/index.ts |   1 +
 src/screens/CameraScreens/index.ts            |   1 +
 src/screens/FullscreenVideo.tsx               |  32 ++++++
 src/screens/index.ts                          |   1 +
 yarn.lock                                     |  62 +++++++++-
 24 files changed, 373 insertions(+), 38 deletions(-)
 create mode 100644 src/assets/icons/play-rect.svg
 create mode 100644 src/assets/icons/recording.svg
 create mode 100644 src/components/loadingView.tsx
 create mode 100644 src/lib/api/hooks/index.ts
 create mode 100644 src/lib/api/hooks/useRecordingSummary.ts
 create mode 100644 src/lib/api/hooks/useRecordings.ts
 create mode 100644 src/lib/api/types/recordings.ts
 create mode 100644 src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
 create mode 100644 src/screens/CameraScreens/RecordingsScreen/components/index.ts
 create mode 100644 src/screens/CameraScreens/RecordingsScreen/index.ts
 rename src/screens/CameraScreens/{EventsScreen => }/components/SectionDateHeader.tsx (50%)
 create mode 100644 src/screens/CameraScreens/components/index.ts
 create mode 100644 src/screens/FullscreenVideo.tsx

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 8405143..f6da4af 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -502,8 +502,12 @@ PODS:
     - React-jsi (= 0.72.4)
     - React-logger (= 0.72.4)
     - React-perflogger (= 0.72.4)
+  - RNFlashList (1.6.1):
+    - React-Core
   - RNGestureHandler (2.12.1):
     - React-Core
+  - RNLocalize (3.0.2):
+    - React-Core
   - RNReanimated (3.5.0):
     - DoubleConversion
     - FBLazyVector
@@ -610,7 +614,9 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNLocalize (from `../node_modules/react-native-localize`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
@@ -722,8 +728,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNFlashList:
+    :path: "../node_modules/@shopify/flash-list"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNLocalize:
+    :path: "../node_modules/react-native-localize"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
@@ -791,7 +801,9 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 4941cc1b3cf08b792fbf666342c9fc95f1969035
   React-utils: b79f2411931f9d3ea5781404dcbb2fa8a837e13a
   ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
+  RNFlashList: 236646d48f224a034f35baa0242e1b77db063b1e
   RNGestureHandler: c0d04458598fcb26052494ae23dda8f8f5162b13
+  RNLocalize: dbea38dcb344bf80ff18a1757b1becf11f70cae4
   RNReanimated: fd0dc9a5889bfac6c45a922b26c902dc6185b4dc
   RNScreens: b21dc57dfa2b710c30ec600786a3fc223b1b92e7
   RNSVG: ed492aaf3af9ca01bc945f7a149d76d62e73ec82
diff --git a/package.json b/package.json
index ff2e077..ea220d1 100644
--- a/package.json
+++ b/package.json
@@ -18,12 +18,14 @@
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
+    "@shopify/flash-list": "^1.6.1",
     "@types/react-native-video": "^5.0.15",
     "clsx": "^2.0.0",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.72.4",
     "react-native-gesture-handler": "^2.12.1",
+    "react-native-localize": "^3.0.2",
     "react-native-mmkv": "^2.10.2",
     "react-native-reanimated": "^3.5.0",
     "react-native-safe-area-context": "^4.7.1",
diff --git a/src/assets/icons/play-rect.svg b/src/assets/icons/play-rect.svg
new file mode 100644
index 0000000..cd5ebc8
--- /dev/null
+++ b/src/assets/icons/play-rect.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.67969 21.5742H23.9531C26.4141 21.5742 27.6328 20.3672 27.6328 17.9531V3.63281C27.6328 1.21875 26.4141 0 23.9531 0H3.67969C1.23047 0 0 1.21875 0 3.63281V17.9531C0 20.3672 1.23047 21.5742 3.67969 21.5742ZM3.70312 19.6875C2.53125 19.6875 1.88672 19.0664 1.88672 17.8477V3.73828C1.88672 2.51953 2.53125 1.88672 3.70312 1.88672H23.9297C25.0898 1.88672 25.7461 2.51953 25.7461 3.73828V17.8477C25.7461 19.0664 25.0898 19.6875 23.9297 19.6875H3.70312Z" fill="#000" fill-opacity="0.85"/>
+<path d="M11.6367 15.3633L18.3164 11.4141C18.8086 11.1328 18.7969 10.4531 18.3164 10.1602L11.6367 6.21092C11.1445 5.91795 10.4648 6.1406 10.4648 6.71482V14.8594C10.4648 15.4219 11.0977 15.6914 11.6367 15.3633Z" fill="#000" fill-opacity="0.85"/>
+</svg>
diff --git a/src/assets/icons/recording.svg b/src/assets/icons/recording.svg
new file mode 100644
index 0000000..6529574
--- /dev/null
+++ b/src/assets/icons/recording.svg
@@ -0,0 +1,11 @@
+<svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2124_24856)">
+<path d="M3.01172 21.4648H26.2852C28.1602 21.4648 29.2969 20.3164 29.2969 18.4531V5.01172C29.2969 3.14844 28.1602 2 26.2852 2H3.01172C1.14844 2 0 3.14844 0 5.01172V18.4531C0 20.3164 1.14844 21.4648 3.01172 21.4648ZM3.04688 19.5781C2.32031 19.5781 1.88672 19.1445 1.88672 18.4297V5.03516C1.88672 4.32031 2.32031 3.88672 3.04688 3.88672H26.25C26.9766 3.88672 27.4102 4.32031 27.4102 5.03516V18.4297C27.4102 19.1445 26.9766 19.5781 26.25 19.5781H3.04688ZM8.75391 25.4375H20.543C21.0586 25.4375 21.4922 25.0156 21.4922 24.4883C21.4922 23.9609 21.0586 23.5391 20.543 23.5391H8.75391C8.23828 23.5391 7.80469 23.9609 7.80469 24.4883C7.80469 25.0156 8.23828 25.4375 8.75391 25.4375Z" fill="#000" fill-opacity="0.85"/>
+<path d="M10.8516 16.5898C10.8516 17.2227 11.5195 17.4453 12.0234 17.1523L20.1562 12.3594C20.6484 12.0664 20.6367 11.3984 20.1445 11.1172L12.0234 6.33593C11.5195 6.04296 10.8516 6.26561 10.8516 6.89843V16.5898Z" fill="#000" fill-opacity="0.85"/>
+</g>
+<defs>
+<clipPath id="clip0_2124_24856">
+<rect width="29.2969" height="23.4492" fill="#000" transform="translate(0 2)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index d64d7f9..c209c68 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -6,23 +6,26 @@ export const VideoPlayer = ({
   videoURI,
   isPaused = true,
   snapshotURL,
+  isForcedFullscreen,
 }: {
   videoURI: string;
   isPaused?: boolean;
   snapshotURL?: string;
+  isForcedFullscreen?: boolean;
 }) => {
   React.useEffect(() => {}, []);
   return (
     <Video
       poster={snapshotURL}
       posterResizeMode="cover"
-      className="w-full h-full rounded-md"
-      resizeMode="cover"
+      className="w-full h-full"
+      resizeMode="contain"
       ignoreSilentSwitch="ignore"
       paused={isPaused}
       pictureInPicture={true}
       controls
       source={{uri: videoURI}}
+      fullscreen={isForcedFullscreen}
     />
   );
 };
diff --git a/src/components/index.ts b/src/components/index.ts
index 42b56f8..8b0c4f5 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,3 +4,4 @@ export * from './WebRTCView';
 export * from './label';
 export * from './snapshotCard';
 export * from './VideoPlayer';
+export * from './loadingView';
diff --git a/src/components/loadingView.tsx b/src/components/loadingView.tsx
new file mode 100644
index 0000000..54e9be8
--- /dev/null
+++ b/src/components/loadingView.tsx
@@ -0,0 +1,11 @@
+import {ActivityIndicator} from 'react-native';
+
+import {BaseView} from './baseView';
+
+export const LoadingView = () => {
+  return (
+    <BaseView className="flex-1">
+      <ActivityIndicator size={'large'} />
+    </BaseView>
+  );
+};
diff --git a/src/lib/api/hooks/index.ts b/src/lib/api/hooks/index.ts
new file mode 100644
index 0000000..e3121d4
--- /dev/null
+++ b/src/lib/api/hooks/index.ts
@@ -0,0 +1,4 @@
+export * from './useCameraEvents';
+export * from './useConfig';
+export * from './useRecordings';
+export * from './useRecordingSummary';
diff --git a/src/lib/api/hooks/useRecordingSummary.ts b/src/lib/api/hooks/useRecordingSummary.ts
new file mode 100644
index 0000000..d3bdfec
--- /dev/null
+++ b/src/lib/api/hooks/useRecordingSummary.ts
@@ -0,0 +1,33 @@
+import {getTimeZone} from 'react-native-localize';
+import {useQuery} from 'react-query';
+
+import {API_BASE} from '@env';
+
+import {RecordingResponse} from '../types/recordings';
+
+const URL = `${API_BASE}api/:camera/recordings/summary?timezone=:tz`;
+
+const fetchRecordingSummary = async (cameraName: string) => {
+  const url = URL.replace(':camera', cameraName).replace(':tz', getTimeZone());
+  try {
+    const response = await fetch(url, {method: 'get'});
+    const data = await response.json();
+    if (response.ok) {
+      if (data) {
+        return Promise.resolve(data as RecordingResponse[]);
+      }
+    } else {
+      return Promise.reject(new Error('ResNotOK'));
+    }
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+export const useRecordingSummary = (cameraName?: string) => {
+  return useQuery({
+    queryFn: () => fetchRecordingSummary(cameraName || ''),
+    queryKey: ['recordings', cameraName],
+    enabled: !!cameraName,
+  });
+};
diff --git a/src/lib/api/hooks/useRecordings.ts b/src/lib/api/hooks/useRecordings.ts
new file mode 100644
index 0000000..b38ccc3
--- /dev/null
+++ b/src/lib/api/hooks/useRecordings.ts
@@ -0,0 +1,34 @@
+import {useQuery} from 'react-query';
+
+import {API_BASE} from '@env';
+
+// const buildEventUrl = (eventId: string) => {
+//   const REC_URL = `${API_BASE}vod/event/${eventId}/index.m3u8`;
+//   return REC_URL;
+// };
+
+const URL = `${API_BASE}api/:camera/recordings`;
+
+const fetchRecordings = async (cameraName: string) => {
+  const url = URL.replace(':camera', cameraName);
+  try {
+    const response = await fetch(url, {method: 'get'});
+    const data = await response.json();
+    if (response.ok) {
+      if (data) {
+        return Promise.resolve(data);
+      }
+    } else {
+      return Promise.reject(new Error('ResNotOK'));
+    }
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+export const useRecordings = (cameraName?: string) =>
+  useQuery({
+    queryFn: () => fetchRecordings(cameraName || ''),
+    queryKey: ['recordings', cameraName],
+    enabled: !!cameraName,
+  });
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 1bd5473..ca32b09 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -1,5 +1,4 @@
-export * from './hooks/useCameraEvents';
-export * from './hooks/useConfig';
+export * from './hooks';
 export * from './getLatestCameraFrame';
 
 //? Types
diff --git a/src/lib/api/types/recordings.ts b/src/lib/api/types/recordings.ts
new file mode 100644
index 0000000..e97a9f9
--- /dev/null
+++ b/src/lib/api/types/recordings.ts
@@ -0,0 +1,13 @@
+export interface RecordingResponse {
+  day: string;
+  events: number;
+  hours?: HoursEntity[] | null;
+}
+
+export interface HoursEntity {
+  duration: number;
+  events: number;
+  hour: string;
+  motion: number;
+  objects: number;
+}
diff --git a/src/navigation/CameraTabNavigator.tsx b/src/navigation/CameraTabNavigator.tsx
index 3e45799..a22371a 100644
--- a/src/navigation/CameraTabNavigator.tsx
+++ b/src/navigation/CameraTabNavigator.tsx
@@ -3,7 +3,7 @@ import {useColorScheme} from 'react-native';
 
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 
-import {EventsScreen, LiveViewScreen} from '@screens';
+import {EventsScreen, LiveViewScreen, RecordingsScreen} from '@screens';
 import {hslToHex} from '@utils';
 
 import {colors} from '../../themeColors.js';
@@ -39,7 +39,7 @@ export const CameraTabNavigator = () => {
       })}>
       <CameraTabStack.Screen name="Live" component={LiveViewScreen} />
       <CameraTabStack.Screen name="Events" component={EventsScreen} />
-      <CameraTabStack.Screen name="Recordings" component={EventsScreen} />
+      <CameraTabStack.Screen name="Recordings" component={RecordingsScreen} />
     </CameraTabStack.Navigator>
   );
 };
diff --git a/src/navigation/RootNavigation.tsx b/src/navigation/RootNavigation.tsx
index 436856d..f06913c 100644
--- a/src/navigation/RootNavigation.tsx
+++ b/src/navigation/RootNavigation.tsx
@@ -13,6 +13,7 @@ import {
 import {LeftHeaderButton, RightHeaderButton} from './components';
 import {
   BirdseyeScreen,
+  FullscreenVideoPlayer,
   HomeScreen,
   OnBoardingScreen,
   SettingsScreen,
@@ -28,6 +29,10 @@ export type MainStackParamList = {
   CameraTabs: NavigatorScreenParams<CameraTabsStackParamList>;
   Settings: undefined;
   Onboarding: undefined;
+  'Fullscreen Video': {
+    videoURI: string;
+    title?: string;
+  };
 };
 
 const Stack = createNativeStackNavigator<MainStackParamList>();
@@ -89,6 +94,14 @@ export const RootNavigation = () => {
             presentation: 'modal',
           }}
         />
+        <Stack.Screen
+          name="Fullscreen Video"
+          component={FullscreenVideoPlayer}
+          options={{
+            animation: 'slide_from_bottom',
+            headerBackTitleVisible: false,
+          }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
diff --git a/src/screens/CameraScreens/EventsScreen/EventsScreen.tsx b/src/screens/CameraScreens/EventsScreen/EventsScreen.tsx
index e16af7b..9d1bad6 100644
--- a/src/screens/CameraScreens/EventsScreen/EventsScreen.tsx
+++ b/src/screens/CameraScreens/EventsScreen/EventsScreen.tsx
@@ -1,21 +1,17 @@
 import React from 'react';
-import {
-  ActivityIndicator,
-  LayoutAnimation,
-  SectionList,
-  View,
-} from 'react-native';
+import {LayoutAnimation, SectionList, View} from 'react-native';
 
 import clsx from 'clsx';
 
 import {CameraEvent} from './components';
 import {FrigateEvent, useCameraEvents} from '@api';
-import {BaseText, BaseView} from '@components';
+import {BaseText, BaseView, LoadingView} from '@components';
 import {useAppDataStore} from '@stores';
 import {bgBackground} from '@utils';
 
+import {SectionDateHeader} from '../components';
+
 import {EventListFooter} from './components/EventListFooter';
-import {SectionDateHeader} from './components/SectionDateHeader';
 
 export const EventsScreen = () => {
   const currentCamera = useAppDataStore(state => state.currentCamera);
@@ -63,11 +59,7 @@ export const EventsScreen = () => {
   };
 
   if (isLoading) {
-    return (
-      <BaseView>
-        <ActivityIndicator size={'large'} />
-      </BaseView>
-    );
+    return <LoadingView />;
   }
 
   if (error || !groupedEvents || (!isLoading && !currentCamera)) {
@@ -104,7 +96,7 @@ export const EventsScreen = () => {
         sections={groupedEvents}
         renderSectionHeader={props => (
           <SectionDateHeader
-            {...props}
+            title={props.section.title}
             handleHeaderPress={handleHeaderPress}
             isCollapsed={collapsedSections.has(props.section.title)}
           />
diff --git a/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
new file mode 100644
index 0000000..70b6213
--- /dev/null
+++ b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
@@ -0,0 +1,108 @@
+import {Pressable} from 'react-native';
+
+import PlayRect from '@icons/play-rect.svg';
+import {useNavigation} from '@react-navigation/native';
+import {FlashList} from '@shopify/flash-list';
+import clsx from 'clsx';
+import {getTimeZone} from 'react-native-localize';
+
+import {useRecordingSummary} from '@api';
+import {BaseText, BaseView, Label, LoadingView} from '@components';
+import {API_BASE} from '@env';
+import {useAppDataStore} from '@stores';
+
+import {SectionDateHeader} from '../components';
+
+const getRecordingUrl = (cameraName: string, dateTime: Date): string => {
+  const dateString = `${dateTime.getFullYear()}-${
+    dateTime.getMonth() + 1
+  }/${dateTime.getDate()}/${dateTime.getHours()}`;
+  return `${API_BASE}vod/${dateString}/${cameraName}/${getTimeZone().replace(
+    '/',
+    ',',
+  )}/master.m3u8`;
+};
+
+const HourChip = ({
+  numEvents,
+  date,
+  cameraName,
+}: {
+  numEvents: number;
+  date: Date;
+  cameraName: string;
+}) => {
+  const navigation = useNavigation();
+  const hourString = date.getHours() + ':00';
+  const vodUrl = getRecordingUrl(cameraName, date);
+  const videoTitle = `${date.toLocaleDateString(undefined, {
+    weekday: undefined,
+  })} - ${hourString}`;
+
+  return (
+    <Pressable
+      onPress={() => {
+        navigation.navigate('Fullscreen Video', {
+          videoURI: vodUrl,
+          title: videoTitle,
+        });
+      }}>
+      <Label
+        className={clsx(
+          'mx-1 my-2 justify-between p-2 items-center border border-transparent',
+          numEvents > 0 && 'border-destructive dark:border-destructive-dark',
+        )}>
+        <BaseText className="mb-1">{hourString}</BaseText>
+        <PlayRect className="h-8 w-8" fill={'white'} />
+        <BaseText>{numEvents} Events</BaseText>
+      </Label>
+    </Pressable>
+  );
+};
+
+export const RecordingsScreen = () => {
+  const currentCamera = useAppDataStore(state => state.currentCamera);
+  const {data, isLoading} = useRecordingSummary(currentCamera);
+
+  if (isLoading) {
+    return <LoadingView />;
+  }
+
+  return (
+    <BaseView className="flex-1">
+      <BaseView isScrollview>
+        <FlashList
+          estimatedItemSize={288}
+          data={data}
+          renderItem={({item: recording}) => {
+            const date = new Date(recording.day);
+            const dateString = date.toLocaleDateString();
+            return (
+              <BaseView key={recording.day}>
+                <SectionDateHeader title={dateString} />
+                <FlashList
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  estimatedItemSize={147}
+                  data={recording.hours}
+                  renderItem={({item: hour}) => {
+                    const hourlyDate = new Date(date);
+                    hourlyDate.setHours(parseInt(hour.hour, 10));
+                    return (
+                      <HourChip
+                        cameraName={currentCamera || ''}
+                        key={hour.hour}
+                        numEvents={hour.events}
+                        date={hourlyDate}
+                      />
+                    );
+                  }}
+                />
+              </BaseView>
+            );
+          }}
+        />
+      </BaseView>
+    </BaseView>
+  );
+};
diff --git a/src/screens/CameraScreens/RecordingsScreen/components/index.ts b/src/screens/CameraScreens/RecordingsScreen/components/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/screens/CameraScreens/RecordingsScreen/index.ts b/src/screens/CameraScreens/RecordingsScreen/index.ts
new file mode 100644
index 0000000..0ea4e60
--- /dev/null
+++ b/src/screens/CameraScreens/RecordingsScreen/index.ts
@@ -0,0 +1 @@
+export * from './RecordingsScreen';
diff --git a/src/screens/CameraScreens/EventsScreen/components/SectionDateHeader.tsx b/src/screens/CameraScreens/components/SectionDateHeader.tsx
similarity index 50%
rename from src/screens/CameraScreens/EventsScreen/components/SectionDateHeader.tsx
rename to src/screens/CameraScreens/components/SectionDateHeader.tsx
index 5a4c9f3..f4a96fb 100644
--- a/src/screens/CameraScreens/EventsScreen/components/SectionDateHeader.tsx
+++ b/src/screens/CameraScreens/components/SectionDateHeader.tsx
@@ -4,35 +4,36 @@ import {Pressable, useColorScheme, View} from 'react-native';
 import DownSquare from '@icons/downSquare.svg';
 import clsx from 'clsx';
 
-import {FrigateEvent} from '@api';
 import {BaseText, Label} from '@components';
 import {getFgColorHex} from '@utils';
 
 export const SectionDateHeader = ({
-  section,
+  title,
   handleHeaderPress,
   isCollapsed,
 }: {
-  section: {
-    title: string;
-    data: FrigateEvent[];
-  };
-  handleHeaderPress: (s: string) => void;
-  isCollapsed: boolean;
+  title: string;
+  handleHeaderPress?: (s: string) => void;
+  isCollapsed?: boolean;
 }) => {
   const isDarkMode = useColorScheme() === 'dark';
+  const shouldShowCollapse = typeof isCollapsed !== 'undefined';
   return (
-    <Pressable onPress={() => handleHeaderPress(section.title)}>
+    <Pressable onPress={() => handleHeaderPress?.(title)}>
       <Label
         className={clsx('px-4 py-2 rounded-t-none', isCollapsed && 'mb-1')}>
         <View className="flex-row items-center justify-between">
-          <BaseText className="font-semibold">{section.title}</BaseText>
-          <DownSquare
-            fill={getFgColorHex(isDarkMode)}
-            height={28}
-            width={28}
-            style={isCollapsed && {transform: [{rotate: '180deg'}]}}
-          />
+          <BaseText className="font-semibold">{title}</BaseText>
+          {shouldShowCollapse ? (
+            <DownSquare
+              fill={getFgColorHex(isDarkMode)}
+              height={28}
+              width={28}
+              style={isCollapsed && {transform: [{rotate: '180deg'}]}}
+            />
+          ) : (
+            <View className="h-7 w-7" />
+          )}
         </View>
       </Label>
     </Pressable>
diff --git a/src/screens/CameraScreens/components/index.ts b/src/screens/CameraScreens/components/index.ts
new file mode 100644
index 0000000..8f599a2
--- /dev/null
+++ b/src/screens/CameraScreens/components/index.ts
@@ -0,0 +1 @@
+export * from './SectionDateHeader';
diff --git a/src/screens/CameraScreens/index.ts b/src/screens/CameraScreens/index.ts
index 3e2cef7..e01550d 100644
--- a/src/screens/CameraScreens/index.ts
+++ b/src/screens/CameraScreens/index.ts
@@ -1,2 +1,3 @@
 export * from './LiveViewScreen';
 export * from './EventsScreen';
+export * from './RecordingsScreen';
diff --git a/src/screens/FullscreenVideo.tsx b/src/screens/FullscreenVideo.tsx
new file mode 100644
index 0000000..31651bc
--- /dev/null
+++ b/src/screens/FullscreenVideo.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {NativeStackScreenProps} from '@react-navigation/native-stack';
+
+import {BaseView, VideoPlayer} from '@components';
+import {MainStackParamList} from '@navigation';
+
+type FullscreenVideoProps = NativeStackScreenProps<
+  MainStackParamList,
+  'Fullscreen Video'
+>;
+
+export const FullscreenVideoPlayer = ({
+  route,
+  navigation,
+}: FullscreenVideoProps) => {
+  const title = route.params.title || '';
+
+  React.useEffect(() => {
+    navigation.setOptions({title});
+  }, [navigation, title]);
+
+  return (
+    <BaseView className="flex-1">
+      <VideoPlayer
+        videoURI={route.params.videoURI}
+        isForcedFullscreen
+        isPaused={false}
+      />
+    </BaseView>
+  );
+};
diff --git a/src/screens/index.ts b/src/screens/index.ts
index 69a516c..490cb40 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -4,3 +4,4 @@ export * from './SettingsScreen';
 //
 export * from './onboardingScreen';
 export * from './BirdseyeScreen';
+export * from './FullscreenVideo';
diff --git a/yarn.lock b/yarn.lock
index d13b199..ebad84f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2706,6 +2706,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shopify/flash-list@npm:^1.6.1":
+  version: 1.6.1
+  resolution: "@shopify/flash-list@npm:1.6.1"
+  dependencies:
+    recyclerlistview: 4.2.0
+    tslib: 2.4.0
+  peerDependencies:
+    "@babel/runtime": "*"
+    react: "*"
+    react-native: "*"
+  checksum: cde67dc83738b0d4e48bc17328dedc521321fca0e466bd35f6f8f51b20c9cb06148022733bbf52e72f9a0a4201dfff6e89f0b781d7e2bd912844ca5362d0a850
+  languageName: node
+  linkType: hard
+
 "@sideway/address@npm:^4.1.3":
   version: 4.1.4
   resolution: "@sideway/address@npm:4.1.4"
@@ -3986,6 +4000,7 @@ __metadata:
     "@react-navigation/bottom-tabs": ^6.5.8
     "@react-navigation/native": ^6.1.7
     "@react-navigation/native-stack": ^6.9.13
+    "@shopify/flash-list": ^1.6.1
     "@tsconfig/react-native": ^3.0.0
     "@types/react": ^18.0.24
     "@types/react-native-vector-icons": ^6.4.14
@@ -4009,6 +4024,7 @@ __metadata:
     react-native: 0.72.4
     react-native-dotenv: ^3.4.9
     react-native-gesture-handler: ^2.12.1
+    react-native-localize: ^3.0.2
     react-native-mmkv: ^2.10.2
     react-native-reanimated: ^3.5.0
     react-native-safe-area-context: ^4.7.1
@@ -7665,7 +7681,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.debounce@npm:^4.0.8":
+"lodash.debounce@npm:4.0.8, lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
   checksum: a3f527d22c548f43ae31c861ada88b2637eb48ac6aa3eb56e82d44917971b8aa96fbb37aa60efea674dc4ee8c42074f90f7b1f772e9db375435f6c83a19b3bc6
@@ -9571,7 +9587,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:*, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:*, prop-types@npm:15.8.1, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -9698,6 +9714,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-localize@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "react-native-localize@npm:3.0.2"
+  peerDependencies:
+    react: ">=18.1.0"
+    react-native: ">=0.70.0"
+    react-native-macos: ">=0.70.0"
+  peerDependenciesMeta:
+    react-native-macos:
+      optional: true
+  checksum: 46abd6046dfb1fb5426f9e51971894e893556646206b7fa387c5eb9394a3f3b9ddce190bc94ffc9c51c65326f60bbad57219d8330b4a1dcfaf46dd2eb4ef43ae
+  languageName: node
+  linkType: hard
+
 "react-native-mmkv@npm:^2.10.2":
   version: 2.10.2
   resolution: "react-native-mmkv@npm:2.10.2"
@@ -9975,6 +10005,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"recyclerlistview@npm:4.2.0":
+  version: 4.2.0
+  resolution: "recyclerlistview@npm:4.2.0"
+  dependencies:
+    lodash.debounce: 4.0.8
+    prop-types: 15.8.1
+    ts-object-utils: 0.0.5
+  peerDependencies:
+    react: ">= 15.2.1"
+    react-native: ">= 0.30.0"
+  checksum: 6cba6a99fb487067c509112b94e3d4d3905d782bbcb7af2cffbd57c601a4650d670e4eee5fec18d195d58ff6ec01a47288c5510379a2f37da3c5fc0a58860441
+  languageName: node
+  linkType: hard
+
 "reflect.getprototypeof@npm:^1.0.3":
   version: 1.0.3
   resolution: "reflect.getprototypeof@npm:1.0.3"
@@ -11072,6 +11116,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-object-utils@npm:0.0.5":
+  version: 0.0.5
+  resolution: "ts-object-utils@npm:0.0.5"
+  checksum: 83c48fbdaba392fb2c01cea53b267ed5538d2bb44fc6c3eecc10bcfabc1780bfa6ec8569b52bbf0140d9b521d9049d5f15884e12286918244d463d854dbc73cb
+  languageName: node
+  linkType: hard
+
 "tsc@npm:^2.0.4":
   version: 2.0.4
   resolution: "tsc@npm:2.0.4"
@@ -11093,6 +11144,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.4.0":
+  version: 2.4.0
+  resolution: "tslib@npm:2.4.0"
+  checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.8.1":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"

From a4c092241262cb66948083f1730f4aa9504befbf Mon Sep 17 00:00:00 2001
From: Billy Jacoby <billyjacoby@gmail.com>
Date: Fri, 13 Oct 2023 17:37:57 -0400
Subject: [PATCH 3/5] chore: cleanup

---
 src/assets/icons/index.ts                     | 21 +++++++
 .../components/LeftHeaderButton.tsx           |  4 +-
 .../components/RightHeaderButton.tsx          |  5 +-
 src/navigation/components/TabBarIcon.tsx      | 16 ++----
 .../RecordingsScreen/RecordingsScreen.tsx     | 57 +------------------
 .../RecordingsScreen/components/HourChip.tsx  | 46 +++++++++++++++
 .../RecordingsScreen/components/index.ts      |  1 +
 .../components/SectionDateHeader.tsx          |  2 +-
 src/utils/urls.ts                             | 14 +++++
 9 files changed, 95 insertions(+), 71 deletions(-)
 create mode 100644 src/assets/icons/index.ts
 create mode 100644 src/screens/CameraScreens/RecordingsScreen/components/HourChip.tsx

diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
new file mode 100644
index 0000000..7f45dae
--- /dev/null
+++ b/src/assets/icons/index.ts
@@ -0,0 +1,21 @@
+import Birdseye from './birdseye.svg';
+import Camera from './camera.svg';
+import DownSquare from './downSquare.svg';
+import Event from './event.svg';
+import Home from './home.svg';
+import PlayRect from './play-rect.svg';
+import Recording from './recording.svg';
+import Settings from './settings.svg';
+import Live from './video-waveform.svg';
+
+export {
+  PlayRect,
+  Camera,
+  Birdseye,
+  DownSquare,
+  Event,
+  Home,
+  Recording,
+  Settings,
+  Live,
+};
diff --git a/src/navigation/components/LeftHeaderButton.tsx b/src/navigation/components/LeftHeaderButton.tsx
index 5737c7c..ec7afa7 100644
--- a/src/navigation/components/LeftHeaderButton.tsx
+++ b/src/navigation/components/LeftHeaderButton.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import {TouchableOpacity} from 'react-native';
 
-import BirdseyeIcon from '@icons/birdseye.svg';
 import {useNavigation} from '@react-navigation/native';
 
 import {useConfig} from '@api';
+import {Birdseye} from '@icons';
 
 export const LeftHeaderButton = ({tintColor}: {tintColor?: string}) => {
   const nav = useNavigation();
@@ -19,7 +19,7 @@ export const LeftHeaderButton = ({tintColor}: {tintColor?: string}) => {
       onPress={() => {
         nav.navigate('Birdseye');
       }}>
-      <BirdseyeIcon
+      <Birdseye
         height={24}
         width={24}
         fill={tintColor}
diff --git a/src/navigation/components/RightHeaderButton.tsx b/src/navigation/components/RightHeaderButton.tsx
index 3ddc2d6..80734f0 100644
--- a/src/navigation/components/RightHeaderButton.tsx
+++ b/src/navigation/components/RightHeaderButton.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import {TouchableOpacity} from 'react-native';
 
-import SettingsIcon from '@icons/settings.svg';
 import {useNavigation} from '@react-navigation/native';
 
+import {Settings} from '@icons';
+
 export const RightHeaderButton = ({tintColor}: {tintColor?: string}) => {
   const navigation = useNavigation();
 
   return (
     <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
-      <SettingsIcon height={22} width={22} fill={tintColor} />
+      <Settings height={22} width={22} fill={tintColor} />
     </TouchableOpacity>
   );
 };
diff --git a/src/navigation/components/TabBarIcon.tsx b/src/navigation/components/TabBarIcon.tsx
index 55f2f2a..e873e81 100644
--- a/src/navigation/components/TabBarIcon.tsx
+++ b/src/navigation/components/TabBarIcon.tsx
@@ -1,8 +1,7 @@
-import EventIcon from '@icons/event.svg';
-import RecordingIcon from '@icons/recording.svg';
-import VideoIcon from '@icons/video-waveform.svg';
 import {RouteProp} from '@react-navigation/native';
 
+import {Event, Live, Recording} from '@icons';
+
 import {CameraTabsStackParamList} from '../CameraTabNavigator';
 
 export const TabBarIcon = ({
@@ -18,7 +17,7 @@ export const TabBarIcon = ({
 }) => {
   if (route.name === 'Recordings') {
     return (
-      <RecordingIcon
+      <Recording
         height={size}
         width={size}
         fill={color}
@@ -28,17 +27,12 @@ export const TabBarIcon = ({
   }
   if (route.name === 'Events') {
     return (
-      <EventIcon
-        height={size}
-        width={size}
-        fill={color}
-        fillSecondary={color}
-      />
+      <Event height={size} width={size} fill={color} fillSecondary={color} />
     );
   }
   if (route.name === 'Live') {
     return (
-      <VideoIcon
+      <Live
         height={size}
         width={size}
         fill={color}
diff --git a/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
index 70b6213..a9b68da 100644
--- a/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
+++ b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
@@ -1,65 +1,12 @@
-import {Pressable} from 'react-native';
-
-import PlayRect from '@icons/play-rect.svg';
-import {useNavigation} from '@react-navigation/native';
 import {FlashList} from '@shopify/flash-list';
-import clsx from 'clsx';
-import {getTimeZone} from 'react-native-localize';
 
+import {HourChip} from './components';
 import {useRecordingSummary} from '@api';
-import {BaseText, BaseView, Label, LoadingView} from '@components';
-import {API_BASE} from '@env';
+import {BaseView, LoadingView} from '@components';
 import {useAppDataStore} from '@stores';
 
 import {SectionDateHeader} from '../components';
 
-const getRecordingUrl = (cameraName: string, dateTime: Date): string => {
-  const dateString = `${dateTime.getFullYear()}-${
-    dateTime.getMonth() + 1
-  }/${dateTime.getDate()}/${dateTime.getHours()}`;
-  return `${API_BASE}vod/${dateString}/${cameraName}/${getTimeZone().replace(
-    '/',
-    ',',
-  )}/master.m3u8`;
-};
-
-const HourChip = ({
-  numEvents,
-  date,
-  cameraName,
-}: {
-  numEvents: number;
-  date: Date;
-  cameraName: string;
-}) => {
-  const navigation = useNavigation();
-  const hourString = date.getHours() + ':00';
-  const vodUrl = getRecordingUrl(cameraName, date);
-  const videoTitle = `${date.toLocaleDateString(undefined, {
-    weekday: undefined,
-  })} - ${hourString}`;
-
-  return (
-    <Pressable
-      onPress={() => {
-        navigation.navigate('Fullscreen Video', {
-          videoURI: vodUrl,
-          title: videoTitle,
-        });
-      }}>
-      <Label
-        className={clsx(
-          'mx-1 my-2 justify-between p-2 items-center border border-transparent',
-          numEvents > 0 && 'border-destructive dark:border-destructive-dark',
-        )}>
-        <BaseText className="mb-1">{hourString}</BaseText>
-        <PlayRect className="h-8 w-8" fill={'white'} />
-        <BaseText>{numEvents} Events</BaseText>
-      </Label>
-    </Pressable>
-  );
-};
-
 export const RecordingsScreen = () => {
   const currentCamera = useAppDataStore(state => state.currentCamera);
   const {data, isLoading} = useRecordingSummary(currentCamera);
diff --git a/src/screens/CameraScreens/RecordingsScreen/components/HourChip.tsx b/src/screens/CameraScreens/RecordingsScreen/components/HourChip.tsx
new file mode 100644
index 0000000..a1fb95b
--- /dev/null
+++ b/src/screens/CameraScreens/RecordingsScreen/components/HourChip.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Pressable} from 'react-native';
+
+import {useNavigation} from '@react-navigation/native';
+import clsx from 'clsx';
+
+import {BaseText, Label} from '@components';
+import {PlayRect} from '@icons';
+import {getRecordingUrl} from '@utils';
+
+export const HourChip = ({
+  numEvents,
+  date,
+  cameraName,
+}: {
+  numEvents: number;
+  date: Date;
+  cameraName: string;
+}) => {
+  const navigation = useNavigation();
+  const hourString = date.getHours() + ':00';
+  const vodUrl = getRecordingUrl(cameraName, date);
+  const videoTitle = `${date.toLocaleDateString(undefined, {
+    weekday: undefined,
+  })} - ${hourString}`;
+
+  return (
+    <Pressable
+      onPress={() => {
+        navigation.navigate('Fullscreen Video', {
+          videoURI: vodUrl,
+          title: videoTitle,
+        });
+      }}>
+      <Label
+        className={clsx(
+          'mx-1 my-2 justify-between p-2 items-center border border-transparent',
+          numEvents > 0 && 'border-destructive dark:border-destructive-dark',
+        )}>
+        <BaseText className="mb-1">{hourString}</BaseText>
+        <PlayRect className="h-8 w-8" fill={'white'} />
+        <BaseText>{numEvents} Events</BaseText>
+      </Label>
+    </Pressable>
+  );
+};
diff --git a/src/screens/CameraScreens/RecordingsScreen/components/index.ts b/src/screens/CameraScreens/RecordingsScreen/components/index.ts
index e69de29..2257d52 100644
--- a/src/screens/CameraScreens/RecordingsScreen/components/index.ts
+++ b/src/screens/CameraScreens/RecordingsScreen/components/index.ts
@@ -0,0 +1 @@
+export * from './HourChip';
diff --git a/src/screens/CameraScreens/components/SectionDateHeader.tsx b/src/screens/CameraScreens/components/SectionDateHeader.tsx
index f4a96fb..fe9eb82 100644
--- a/src/screens/CameraScreens/components/SectionDateHeader.tsx
+++ b/src/screens/CameraScreens/components/SectionDateHeader.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import {Pressable, useColorScheme, View} from 'react-native';
 
-import DownSquare from '@icons/downSquare.svg';
 import clsx from 'clsx';
 
 import {BaseText, Label} from '@components';
+import {DownSquare} from '@icons';
 import {getFgColorHex} from '@utils';
 
 export const SectionDateHeader = ({
diff --git a/src/utils/urls.ts b/src/utils/urls.ts
index fe40132..41afda6 100644
--- a/src/utils/urls.ts
+++ b/src/utils/urls.ts
@@ -1,3 +1,7 @@
+import {getTimeZone} from 'react-native-localize';
+
+import {API_BASE} from '@env';
+
 export const showIPOnly = (url: string) => {
   url = url.replace('http://', '');
   if (url[url.length - 1] === '/') {
@@ -10,3 +14,13 @@ export const ipToAPIBase = (ip: string) => {
   ip = 'http://' + ip + '/';
   return ip;
 };
+
+export const getRecordingUrl = (cameraName: string, dateTime: Date): string => {
+  const dateString = `${dateTime.getFullYear()}-${
+    dateTime.getMonth() + 1
+  }/${dateTime.getDate()}/${dateTime.getHours()}`;
+  return `${API_BASE}vod/${dateString}/${cameraName}/${getTimeZone().replace(
+    '/',
+    ',',
+  )}/master.m3u8`;
+};

From f1d2adc1ee73862c537e06588f5c31862701db9a Mon Sep 17 00:00:00 2001
From: Billy Jacoby <billyjacoby@gmail.com>
Date: Fri, 13 Oct 2023 18:07:13 -0400
Subject: [PATCH 4/5] fix: timezones

---
 src/screens/CameraScreens/EventsScreen/EventsScreen.tsx       | 1 -
 .../CameraScreens/RecordingsScreen/RecordingsScreen.tsx       | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/screens/CameraScreens/EventsScreen/EventsScreen.tsx b/src/screens/CameraScreens/EventsScreen/EventsScreen.tsx
index 9d1bad6..b837d84 100644
--- a/src/screens/CameraScreens/EventsScreen/EventsScreen.tsx
+++ b/src/screens/CameraScreens/EventsScreen/EventsScreen.tsx
@@ -114,7 +114,6 @@ export const EventsScreen = () => {
           );
         }}
       />
-      {/* // TODO: Get total event info and group by date. Add pagination heree */}
     </View>
   );
 };
diff --git a/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
index a9b68da..1fda668 100644
--- a/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
+++ b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
@@ -23,7 +23,11 @@ export const RecordingsScreen = () => {
           data={data}
           renderItem={({item: recording}) => {
             const date = new Date(recording.day);
+            const tzOffsetMinutes = date.getTimezoneOffset();
+
+            date.setUTCMinutes(tzOffsetMinutes);
             const dateString = date.toLocaleDateString();
+
             return (
               <BaseView key={recording.day}>
                 <SectionDateHeader title={dateString} />

From 7ce133001eb90303b1f5e7160120a8351d934265 Mon Sep 17 00:00:00 2001
From: Billy Jacoby <billyjacoby@gmail.com>
Date: Fri, 13 Oct 2023 19:45:36 -0400
Subject: [PATCH 5/5] cleanup: remove extra screen from events

---
 README.md                                     |  2 +-
 src/components/VideoPlayer.tsx                |  5 +-
 src/components/snapshotCard.tsx               | 56 ++++++++++++++----
 .../EventsScreen/components/CameraEvent.tsx   | 58 +++++--------------
 src/screens/FullscreenVideo.tsx               | 23 ++++++--
 5 files changed, 82 insertions(+), 62 deletions(-)

diff --git a/README.md b/README.md
index 0a54bca..34561ea 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ Though this is built in React Native, the immediate focus is to build an iOS nat
 Though this project is still in the very early stages, it is maturing quickly. The items below are what is next on the roadmap for feature implementation:
 
 - [x] Event viewing
-- [ ] Recording viewing
+- [x] Recording viewing
 - [ ] View & update config
 - [ ] Local user settings
 - [ ] User onboarding
diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index c209c68..41378cd 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -7,11 +7,13 @@ export const VideoPlayer = ({
   isPaused = true,
   snapshotURL,
   isForcedFullscreen,
+  onError,
 }: {
   videoURI: string;
   isPaused?: boolean;
   snapshotURL?: string;
   isForcedFullscreen?: boolean;
+  onError?: Video['props']['onError'];
 }) => {
   React.useEffect(() => {}, []);
   return (
@@ -24,8 +26,9 @@ export const VideoPlayer = ({
       paused={isPaused}
       pictureInPicture={true}
       controls
-      source={{uri: videoURI}}
+      source={{uri: videoURI, type: 'm3u8'}}
       fullscreen={isForcedFullscreen}
+      onError={onError || console.error}
     />
   );
 };
diff --git a/src/components/snapshotCard.tsx b/src/components/snapshotCard.tsx
index ca043cc..46ff4a3 100644
--- a/src/components/snapshotCard.tsx
+++ b/src/components/snapshotCard.tsx
@@ -1,26 +1,40 @@
-import {Image, ImageURISource, useWindowDimensions, View} from 'react-native';
+import {
+  Image,
+  ImageURISource,
+  TouchableOpacity,
+  useColorScheme,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 
 import clsx from 'clsx';
 
 import {BaseText} from './baseText';
 import {Label} from './label';
 import {FrigateEvent} from '@api';
+import {PlayRect} from '@icons';
+
+import {colors, hslFunction} from '../../themeColors';
 
 export const SnapshotCard = ({
   imageSource,
   camEvent,
   imageOverlay,
   addtlClasses,
+  onPlayPress,
 }: {
   imageSource: ImageURISource['uri'];
   camEvent?: FrigateEvent & {lastEventEnded: string};
   imageOverlay?: React.ReactNode;
   addtlClasses?: string;
+  onPlayPress?: () => void;
 }) => {
   const {width} = useWindowDimensions();
   const imageWidth = width;
   const imageHeight = imageWidth * 0.75;
 
+  const isDarkMode = useColorScheme() === 'dark';
+
   return (
     <View className={clsx('rounded-xl', addtlClasses)}>
       <Image
@@ -31,20 +45,38 @@ export const SnapshotCard = ({
       />
       {!!imageOverlay && imageOverlay}
       {!!camEvent && (
-        <View
-          className="justify-between flex-row absolute p-1"
-          style={{width: imageWidth}}>
-          <Label>
-            <BaseText className="text-md font-semibold">
-              {camEvent.label.replaceAll('_', ' ').toLocaleUpperCase()}
-            </BaseText>
-          </Label>
-          {!!camEvent.lastEventEnded && (
+        <View className="absolute w-full h-full">
+          <View
+            className="flex-row justify-between absolute p-1"
+            style={{width: imageWidth}}>
             <Label>
-              <BaseText className="text-xs text-mutedForeground dark:text-mutedForeground-dark">
-                {camEvent.lastEventEnded}
+              <BaseText className="text-md font-semibold">
+                {camEvent.label.replaceAll('_', ' ').toLocaleUpperCase()}
               </BaseText>
             </Label>
+            {!!camEvent.lastEventEnded && (
+              <Label>
+                <BaseText className="text-xs text-mutedForeground dark:text-mutedForeground-dark">
+                  {camEvent.lastEventEnded}
+                </BaseText>
+              </Label>
+            )}
+          </View>
+          {!!onPlayPress && (
+            <TouchableOpacity
+              className="mt-auto ml-auto mr-2 mb-2 rounded-lg p-2 bg-background dark:bg-background-dark opacity-60 items-center justify-center flex"
+              onPress={onPlayPress}>
+              <PlayRect
+                height={64}
+                width={64}
+                className="-mb-3.5"
+                fill={
+                  isDarkMode
+                    ? hslFunction(colors.dark.foreground)
+                    : hslFunction(colors.light.foreground)
+                }
+              />
+            </TouchableOpacity>
           )}
         </View>
       )}
diff --git a/src/screens/CameraScreens/EventsScreen/components/CameraEvent.tsx b/src/screens/CameraScreens/EventsScreen/components/CameraEvent.tsx
index d2f9589..64378df 100644
--- a/src/screens/CameraScreens/EventsScreen/components/CameraEvent.tsx
+++ b/src/screens/CameraScreens/EventsScreen/components/CameraEvent.tsx
@@ -1,17 +1,12 @@
 import React from 'react';
-import {
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  Pressable,
-  ScrollView,
-  useWindowDimensions,
-} from 'react-native';
+import {ScrollView, useWindowDimensions} from 'react-native';
 
+import {useNavigation} from '@react-navigation/native';
 import clsx from 'clsx';
 
 import {EventDetails} from './EventDetails';
 import {FrigateEvent} from '@api';
-import {BaseView, SnapshotCard, VideoPlayer} from '@components';
+import {BaseView, SnapshotCard} from '@components';
 
 export const CameraEvent = ({
   camEvent,
@@ -24,9 +19,9 @@ export const CameraEvent = ({
   const imageWidth = width * 0.97;
   const imageHeight = imageWidth * 0.75;
 
-  const scrollviewRef = React.useRef<ScrollView>(null);
+  const navigation = useNavigation();
 
-  const [videoIsPaused, setVideoIsPaused] = React.useState(true);
+  const scrollviewRef = React.useRef<ScrollView>(null);
 
   const getDateString = (date: Date) => {
     return (
@@ -40,21 +35,12 @@ export const CameraEvent = ({
     );
   };
 
-  const onEventPress = () => {
-    scrollviewRef?.current?.scrollToEnd();
-    setVideoIsPaused(false);
-  };
-
-  const onScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (scrollviewRef.current) {
-      const xOffset = event.nativeEvent.contentOffset.x;
-      const scrollIndex = Math.round(xOffset / width);
-      if (scrollIndex === 2) {
-        setVideoIsPaused(false);
-      } else {
-        setVideoIsPaused(true);
-      }
-    }
+  const onPlayPress = () => {
+    // Open fullscreen player
+    navigation.navigate('Fullscreen Video', {
+      videoURI: camEvent.vodURL,
+      title: 'Event',
+    });
   };
 
   const lastEventEnded = getDateString(new Date(camEvent?.end_time * 1000));
@@ -65,7 +51,6 @@ export const CameraEvent = ({
   return (
     <ScrollView
       ref={scrollviewRef}
-      onMomentumScrollEnd={onScrollEnd}
       horizontal
       contentOffset={{x: width, y: 0}}
       showsHorizontalScrollIndicator={false}
@@ -81,24 +66,13 @@ export const CameraEvent = ({
       {/* //? snapshot in middle, default view */}
       <BaseView style={{width, height: imageHeight}}>
         {(lastEventImage || lastThumbnail) && (
-          <Pressable onPress={onEventPress}>
-            <SnapshotCard
-              camEvent={{...camEvent, lastEventEnded}}
-              imageSource={lastEventImage || lastThumbnail}
-            />
-          </Pressable>
+          <SnapshotCard
+            camEvent={{...camEvent, lastEventEnded}}
+            imageSource={lastEventImage || lastThumbnail}
+            onPlayPress={onPlayPress}
+          />
         )}
       </BaseView>
-
-      {/* //? if there's a video, show that to the right */}
-      <BaseView style={{width, height: imageHeight}}>
-        <VideoPlayer
-          key={camEvent.id}
-          videoURI={camEvent.vodURL}
-          isPaused={videoIsPaused}
-          snapshotURL={lastEventImage || lastThumbnail}
-        />
-      </BaseView>
     </ScrollView>
   );
 };
diff --git a/src/screens/FullscreenVideo.tsx b/src/screens/FullscreenVideo.tsx
index 31651bc..cd60453 100644
--- a/src/screens/FullscreenVideo.tsx
+++ b/src/screens/FullscreenVideo.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {NativeStackScreenProps} from '@react-navigation/native-stack';
 
-import {BaseView, VideoPlayer} from '@components';
+import {BaseText, BaseView, VideoPlayer} from '@components';
 import {MainStackParamList} from '@navigation';
 
 type FullscreenVideoProps = NativeStackScreenProps<
@@ -15,6 +15,7 @@ export const FullscreenVideoPlayer = ({
   navigation,
 }: FullscreenVideoProps) => {
   const title = route.params.title || '';
+  const [hasError, setHasError] = React.useState<boolean>(false);
 
   React.useEffect(() => {
     navigation.setOptions({title});
@@ -22,11 +23,21 @@ export const FullscreenVideoPlayer = ({
 
   return (
     <BaseView className="flex-1">
-      <VideoPlayer
-        videoURI={route.params.videoURI}
-        isForcedFullscreen
-        isPaused={false}
-      />
+      {hasError ? (
+        <BaseText className="text-destructive dark:text-destructive-dark">
+          Error loading video.
+        </BaseText>
+      ) : (
+        <VideoPlayer
+          videoURI={route.params.videoURI}
+          isForcedFullscreen
+          isPaused={false}
+          onError={data => {
+            setHasError(true);
+            console.error(data, route.params.videoURI);
+          }}
+        />
+      )}
     </BaseView>
   );
 };