From d9d12adfc355f2225eb266a4b513a79c70b426be Mon Sep 17 00:00:00 2001
From: Billy Jacoby <billyjacoby@gmail.com>
Date: Fri, 13 Oct 2023 19:54:07 -0400
Subject: [PATCH] feat: add recordings screen (#12)

* chore: rename navigation

* feat: add recording screens

* chore: cleanup

* fix: timezones

* cleanup: remove extra screen from events
---
 README.md                                     |   2 +-
 ios/Podfile.lock                              |  14 +-
 package.json                                  |   2 +
 src/assets/icons/index.ts                     |  21 ++
 src/assets/icons/play-rect.svg                |   4 +
 src/assets/icons/recording.svg                |  11 +
 src/components/VideoPlayer.tsx                |  12 +-
 src/components/index.ts                       |   1 +
 src/components/loadingView.tsx                |  11 +
 src/components/snapshotCard.tsx               |  56 +++--
 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         |  45 ++++
 src/navigation/RootNavigation.tsx             | 108 ++++++++++
 .../components/LeftHeaderButton.tsx           |  31 +++
 .../components/RightHeaderButton.tsx          |  16 ++
 src/navigation/components/TabBarIcon.tsx      |  44 ++++
 src/navigation/components/index.ts            |   2 +
 src/navigation/index.ts                       |   2 +-
 src/navigation/navigationContainer.tsx        | 200 ------------------
 .../EventsScreen/EventsScreen.tsx             |  21 +-
 .../EventsScreen/components/CameraEvent.tsx   |  58 ++---
 .../EventsScreen/components/EventDetails.tsx  |   0
 .../components/EventListFooter.tsx            |   0
 .../EventsScreen/components/index.ts          |   0
 .../{ => CameraScreens}/EventsScreen/index.ts |   0
 .../{ => CameraScreens}/LiveViewScreen.tsx    |   0
 .../RecordingsScreen/RecordingsScreen.tsx     |  59 ++++++
 .../RecordingsScreen/components/HourChip.tsx  |  46 ++++
 .../RecordingsScreen/components/index.ts      |   1 +
 .../CameraScreens/RecordingsScreen/index.ts   |   1 +
 .../components/SectionDateHeader.tsx          |  41 ++++
 src/screens/CameraScreens/components/index.ts |   1 +
 src/screens/CameraScreens/index.ts            |   3 +
 .../components/SectionDateHeader.tsx          |  40 ----
 src/screens/FullscreenVideo.tsx               |  43 ++++
 src/screens/HomeScreen.tsx                    |   2 +-
 src/screens/index.ts                          |   4 +-
 src/utils/urls.ts                             |  14 ++
 yarn.lock                                     |  62 +++++-
 43 files changed, 743 insertions(+), 322 deletions(-)
 create mode 100644 src/assets/icons/index.ts
 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/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 (89%)
 rename src/screens/{ => CameraScreens}/EventsScreen/components/CameraEvent.tsx (54%)
 rename src/screens/{ => CameraScreens}/EventsScreen/components/EventDetails.tsx (100%)
 rename src/screens/{ => CameraScreens}/EventsScreen/components/EventListFooter.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/RecordingsScreen/RecordingsScreen.tsx
 create mode 100644 src/screens/CameraScreens/RecordingsScreen/components/HourChip.tsx
 create mode 100644 src/screens/CameraScreens/RecordingsScreen/components/index.ts
 create mode 100644 src/screens/CameraScreens/RecordingsScreen/index.ts
 create mode 100644 src/screens/CameraScreens/components/SectionDateHeader.tsx
 create mode 100644 src/screens/CameraScreens/components/index.ts
 create mode 100644 src/screens/CameraScreens/index.ts
 delete mode 100644 src/screens/EventsScreen/components/SectionDateHeader.tsx
 create mode 100644 src/screens/FullscreenVideo.tsx

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/ios/Podfile.lock b/ios/Podfile.lock
index 04efaf5..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
@@ -801,4 +813,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: b0e3f0f7f573d264ac8c53b7b631360254dc3679
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.13.0
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/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/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..41378cd 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -6,23 +6,29 @@ export const VideoPlayer = ({
   videoURI,
   isPaused = true,
   snapshotURL,
+  isForcedFullscreen,
+  onError,
 }: {
   videoURI: string;
   isPaused?: boolean;
   snapshotURL?: string;
+  isForcedFullscreen?: boolean;
+  onError?: Video['props']['onError'];
 }) => {
   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}}
+      source={{uri: videoURI, type: 'm3u8'}}
+      fullscreen={isForcedFullscreen}
+      onError={onError || console.error}
     />
   );
 };
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/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/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
new file mode 100644
index 0000000..a22371a
--- /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, RecordingsScreen} 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={RecordingsScreen} />
+    </CameraTabStack.Navigator>
+  );
+};
diff --git a/src/navigation/RootNavigation.tsx b/src/navigation/RootNavigation.tsx
new file mode 100644
index 0000000..f06913c
--- /dev/null
+++ b/src/navigation/RootNavigation.tsx
@@ -0,0 +1,108 @@
+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,
+  FullscreenVideoPlayer,
+  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;
+  'Fullscreen Video': {
+    videoURI: string;
+    title?: string;
+  };
+};
+
+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.Screen
+          name="Fullscreen Video"
+          component={FullscreenVideoPlayer}
+          options={{
+            animation: 'slide_from_bottom',
+            headerBackTitleVisible: false,
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
diff --git a/src/navigation/components/LeftHeaderButton.tsx b/src/navigation/components/LeftHeaderButton.tsx
new file mode 100644
index 0000000..ec7afa7
--- /dev/null
+++ b/src/navigation/components/LeftHeaderButton.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+
+import {useNavigation} from '@react-navigation/native';
+
+import {useConfig} from '@api';
+import {Birdseye} from '@icons';
+
+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');
+      }}>
+      <Birdseye
+        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..80734f0
--- /dev/null
+++ b/src/navigation/components/RightHeaderButton.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+
+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')}>
+      <Settings 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..e873e81
--- /dev/null
+++ b/src/navigation/components/TabBarIcon.tsx
@@ -0,0 +1,44 @@
+import {RouteProp} from '@react-navigation/native';
+
+import {Event, Live, Recording} from '@icons';
+
+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 (
+      <Recording
+        height={size}
+        width={size}
+        fill={color}
+        fillSecondary={color}
+      />
+    );
+  }
+  if (route.name === 'Events') {
+    return (
+      <Event height={size} width={size} fill={color} fillSecondary={color} />
+    );
+  }
+  if (route.name === 'Live') {
+    return (
+      <Live
+        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 89%
rename from src/screens/EventsScreen/EventsScreen.tsx
rename to src/screens/CameraScreens/EventsScreen/EventsScreen.tsx
index e16af7b..b837d84 100644
--- a/src/screens/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)}
           />
@@ -122,7 +114,6 @@ export const EventsScreen = () => {
           );
         }}
       />
-      {/* // TODO: Get total event info and group by date. Add pagination heree */}
     </View>
   );
 };
diff --git a/src/screens/EventsScreen/components/CameraEvent.tsx b/src/screens/CameraScreens/EventsScreen/components/CameraEvent.tsx
similarity index 54%
rename from src/screens/EventsScreen/components/CameraEvent.tsx
rename to src/screens/CameraScreens/EventsScreen/components/CameraEvent.tsx
index d2f9589..64378df 100644
--- a/src/screens/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/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/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/RecordingsScreen/RecordingsScreen.tsx b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
new file mode 100644
index 0000000..1fda668
--- /dev/null
+++ b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
@@ -0,0 +1,59 @@
+import {FlashList} from '@shopify/flash-list';
+
+import {HourChip} from './components';
+import {useRecordingSummary} from '@api';
+import {BaseView, LoadingView} from '@components';
+import {useAppDataStore} from '@stores';
+
+import {SectionDateHeader} from '../components';
+
+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 tzOffsetMinutes = date.getTimezoneOffset();
+
+            date.setUTCMinutes(tzOffsetMinutes);
+            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/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
new file mode 100644
index 0000000..2257d52
--- /dev/null
+++ b/src/screens/CameraScreens/RecordingsScreen/components/index.ts
@@ -0,0 +1 @@
+export * from './HourChip';
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/components/SectionDateHeader.tsx b/src/screens/CameraScreens/components/SectionDateHeader.tsx
new file mode 100644
index 0000000..fe9eb82
--- /dev/null
+++ b/src/screens/CameraScreens/components/SectionDateHeader.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import {Pressable, useColorScheme, View} from 'react-native';
+
+import clsx from 'clsx';
+
+import {BaseText, Label} from '@components';
+import {DownSquare} from '@icons';
+import {getFgColorHex} from '@utils';
+
+export const SectionDateHeader = ({
+  title,
+  handleHeaderPress,
+  isCollapsed,
+}: {
+  title: string;
+  handleHeaderPress?: (s: string) => void;
+  isCollapsed?: boolean;
+}) => {
+  const isDarkMode = useColorScheme() === 'dark';
+  const shouldShowCollapse = typeof isCollapsed !== 'undefined';
+  return (
+    <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">{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
new file mode 100644
index 0000000..e01550d
--- /dev/null
+++ b/src/screens/CameraScreens/index.ts
@@ -0,0 +1,3 @@
+export * from './LiveViewScreen';
+export * from './EventsScreen';
+export * from './RecordingsScreen';
diff --git a/src/screens/EventsScreen/components/SectionDateHeader.tsx b/src/screens/EventsScreen/components/SectionDateHeader.tsx
deleted file mode 100644
index 5a4c9f3..0000000
--- a/src/screens/EventsScreen/components/SectionDateHeader.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-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,
-  handleHeaderPress,
-  isCollapsed,
-}: {
-  section: {
-    title: string;
-    data: FrigateEvent[];
-  };
-  handleHeaderPress: (s: string) => void;
-  isCollapsed: boolean;
-}) => {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <Pressable onPress={() => handleHeaderPress(section.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'}]}}
-          />
-        </View>
-      </Label>
-    </Pressable>
-  );
-};
diff --git a/src/screens/FullscreenVideo.tsx b/src/screens/FullscreenVideo.tsx
new file mode 100644
index 0000000..cd60453
--- /dev/null
+++ b/src/screens/FullscreenVideo.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import {NativeStackScreenProps} from '@react-navigation/native-stack';
+
+import {BaseText, 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 || '';
+  const [hasError, setHasError] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    navigation.setOptions({title});
+  }, [navigation, title]);
+
+  return (
+    <BaseView className="flex-1">
+      {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>
+  );
+};
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..490cb40 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -1,7 +1,7 @@
 export * from './HomeScreen';
-export * from './LiveViewScreen';
-export * from './EventsScreen';
+export * from './CameraScreens';
 export * from './SettingsScreen';
 //
 export * from './onboardingScreen';
 export * from './BirdseyeScreen';
+export * from './FullscreenVideo';
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`;
+};
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"