From 121c4b51971c39452dcb0db7d002cf0455bd66fa Mon Sep 17 00:00:00 2001
From: Billy Jacoby <billyjacoby@gmail.com>
Date: Sun, 24 Sep 2023 21:01:02 -0400
Subject: [PATCH 1/2] chore: adjust lib versions

---
 .vscode/settings.json |  1 +
 ios/Podfile.lock      | 16 ++++------------
 package.json          |  2 +-
 yarn.lock             | 30 ++++++++++++++++++++++--------
 4 files changed, 28 insertions(+), 21 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..d4602f4
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{"tailwindCSS.classAttributes": ["className", "tw", "addtlClasses"]}
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index e311660..04efaf5 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -79,9 +79,6 @@ PODS:
     - MMKVCore (~> 1.3.1)
   - MMKVCore (1.3.1)
   - OpenSSL-Universal (1.1.1100)
-  - PromisesObjC (2.3.1)
-  - PromisesSwift (2.3.1):
-    - PromisesObjC (= 2.3.1)
   - RCT-Folly (2021.07.22.00):
     - boost
     - DoubleConversion
@@ -387,11 +384,10 @@ PODS:
     - React-Core
   - react-native-safe-area-context (4.7.1):
     - React-Core
-  - react-native-video (6.0.0-alpha.8):
+  - react-native-video (5.2.1):
     - React-Core
-    - react-native-video/Video (= 6.0.0-alpha.8)
-  - react-native-video/Video (6.0.0-alpha.8):
-    - PromisesSwift
+    - react-native-video/Video (= 5.2.1)
+  - react-native-video/Video (5.2.1):
     - React-Core
   - react-native-webrtc (111.0.3):
     - JitsiWebRTC (~> 111.0.0)
@@ -637,8 +633,6 @@ SPEC REPOS:
     - MMKV
     - MMKVCore
     - OpenSSL-Universal
-    - PromisesObjC
-    - PromisesSwift
     - SocketRocket
     - YogaKit
 
@@ -761,8 +755,6 @@ SPEC CHECKSUMS:
   MMKV: 5a07930c70c70b86cd87761a42c8f3836fb681d7
   MMKVCore: e50135dbd33235b6ab390635991bab437ab873c0
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
-  PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
-  PromisesSwift: 28dca69a9c40779916ac2d6985a0192a5cb4a265
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: c0569ecc035894e4a68baecb30fe6a7ea6e399f9
   RCTTypeSafety: e90354072c21236e0bcf1699011e39acd25fea2f
@@ -780,7 +772,7 @@ SPEC CHECKSUMS:
   React-logger: da1ebe05ae06eb6db4b162202faeafac4b435e77
   react-native-mmkv: 9ae7ca3977e8ef48dbf7f066974eb844c20b5fd7
   react-native-safe-area-context: 9697629f7b2cda43cf52169bb7e0767d330648c2
-  react-native-video: 86950ad481cec184d7c9420ec3bca0c27904bbcd
+  react-native-video: c26780b224543c62d5e1b2a7244a5cd1b50e8253
   react-native-webrtc: 4d1669c2ed29767fe70b0169428b4466589ecf8b
   React-NativeModulesApple: edb5ace14f73f4969df6e7b1f3e41bef0012740f
   React-perflogger: 496a1a3dc6737f964107cb3ddae7f9e265ddda58
diff --git a/package.json b/package.json
index 5e8f5b1..ff2e077 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "react-native-safe-area-context": "^4.7.1",
     "react-native-screens": "^3.24.0",
     "react-native-svg": "^13.13.0",
-    "react-native-video": "alpha",
+    "react-native-video": "latest",
     "react-native-webrtc": "^111.0.3",
     "react-query": "^3.39.3",
     "superjson": "^1.13.1",
diff --git a/yarn.lock b/yarn.lock
index 5a75ddb..d13b199 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4015,7 +4015,7 @@ __metadata:
     react-native-screens: ^3.24.0
     react-native-svg: ^13.13.0
     react-native-svg-transformer: ^1.1.0
-    react-native-video: alpha
+    react-native-video: latest
     react-native-webrtc: ^111.0.3
     react-query: ^3.39.3
     react-test-renderer: 18.2.0
@@ -5022,6 +5022,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eme-encryption-scheme-polyfill@npm:^2.0.1":
+  version: 2.1.1
+  resolution: "eme-encryption-scheme-polyfill@npm:2.1.1"
+  checksum: 5d67fac0f95cc7e2066c68a15d8ecfb508d0c3774d3b8a37013da1a3a6a25ce86d6f8e185d885aa802c1fca48a3348f13dd310e54966fb96faba833a1e62000b
+  languageName: node
+  linkType: hard
+
 "emittery@npm:^0.13.1":
   version: 0.13.1
   resolution: "emittery@npm:0.13.1"
@@ -9773,17 +9780,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-video@npm:alpha":
-  version: 6.0.0-alpha.8
-  resolution: "react-native-video@npm:6.0.0-alpha.8"
+"react-native-video@npm:latest":
+  version: 5.2.1
+  resolution: "react-native-video@npm:5.2.1"
   dependencies:
     deprecated-react-native-prop-types: ^2.2.0
     keymirror: ^0.1.1
     prop-types: ^15.7.2
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: cfbfd7dcf450f6ddd825409bf87c25ba5423fc7b16f5e42ca9fbadd891d9c47afc68fb167cf2222ad6194cd13cebbabd53fc28447bbbda31f282fa46fae0f23f
+    shaka-player: ^2.5.9
+  checksum: efbc09a47e3080dde2986a3a1ea3f32b815317f99013c015522fd2e6ed937ed02244761f4dd5c8f5bf0260bf8a1d518315025cae499c16a6c3b1cd0fa6935d2d
   languageName: node
   linkType: hard
 
@@ -10376,6 +10381,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shaka-player@npm:^2.5.9":
+  version: 2.5.23
+  resolution: "shaka-player@npm:2.5.23"
+  dependencies:
+    eme-encryption-scheme-polyfill: ^2.0.1
+  checksum: 219c5ab073edd0f70582809df533d29f0369a5d8e31507ea76ddc71f3c8e11e9b63b61671ce19d7d3c464d7f3035581a4820903535ce24d4d5da7a94a98ca064
+  languageName: node
+  linkType: hard
+
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"

From 0505212d00c8058c7d141ab9a881064cc9c2c209 Mon Sep 17 00:00:00 2001
From: Billy Jacoby <billyjacoby@gmail.com>
Date: Sun, 24 Sep 2023 21:03:16 -0400
Subject: [PATCH 2/2] feat: add section data headers

---
 src/assets/icons/downSquare.svg               |  4 +
 src/components/VideoPlayer.tsx                | 11 ++-
 src/components/snapshotCard.tsx               | 15 +--
 src/screens/EventsScreen/EventsScreen.tsx     | 94 +++++++++++++++----
 .../EventsScreen/components/CameraEvent.tsx   | 31 +++---
 .../EventsScreen/components/EventDetails.tsx  |  4 +-
 .../components/SectionDateHeader.tsx          | 40 ++++++++
 .../{homeScreen.tsx => HomeScreen.tsx}        |  0
 src/utils/colors.ts                           |  8 ++
 9 files changed, 170 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/icons/downSquare.svg
 create mode 100644 src/screens/EventsScreen/components/SectionDateHeader.tsx
 rename src/screens/{homeScreen.tsx => HomeScreen.tsx} (100%)

diff --git a/src/assets/icons/downSquare.svg b/src/assets/icons/downSquare.svg
new file mode 100644
index 0000000..1d3b177
--- /dev/null
+++ b/src/assets/icons/downSquare.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="M6.67969 24.5977H20.8945C23.3555 24.5977 24.5742 23.3789 24.5742 20.9648V6.65625C24.5742 4.24219 23.3555 3.02344 20.8945 3.02344H6.67969C4.23047 3.02344 3 4.23047 3 6.65625V20.9648C3 23.3906 4.23047 24.5977 6.67969 24.5977ZM6.70312 22.7109C5.53125 22.7109 4.88672 22.0898 4.88672 20.8711V6.75C4.88672 5.53125 5.53125 4.91016 6.70312 4.91016H20.8711C22.0312 4.91016 22.6875 5.53125 22.6875 6.75V20.8711C22.6875 22.0898 22.0312 22.7109 20.8711 22.7109H6.70312Z" fill="#000" fill-opacity="0.85"/>
+<path d="M14.9664 17.5664L19.5602 12.6914C19.9118 12.3164 19.9235 11.7773 19.5954 11.4492C19.2438 11.0859 18.6696 11.0742 18.3414 11.4258L13.8063 16.2305L9.27117 11.4258C8.93133 11.0742 8.35711 11.0742 8.00555 11.4492C7.70086 11.7891 7.70086 12.3164 8.0407 12.6914L12.6462 17.5664C13.3727 18.3516 14.2282 18.3516 14.9664 17.5664Z" fill="#000" fill-opacity="0.85"/>
+</svg>
diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index 2a5bc5b..d64d7f9 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -1,18 +1,25 @@
+import React from 'react';
+
 import Video from 'react-native-video';
 
 export const VideoPlayer = ({
   videoURI,
   isPaused = true,
+  snapshotURL,
 }: {
   videoURI: string;
   isPaused?: boolean;
+  snapshotURL?: string;
 }) => {
+  React.useEffect(() => {}, []);
   return (
     <Video
+      poster={snapshotURL}
+      posterResizeMode="cover"
       className="w-full h-full rounded-md"
+      resizeMode="cover"
+      ignoreSilentSwitch="ignore"
       paused={isPaused}
-      bufferConfig={{minBufferMs: 1000}}
-      fullscreen={true}
       pictureInPicture={true}
       controls
       source={{uri: videoURI}}
diff --git a/src/components/snapshotCard.tsx b/src/components/snapshotCard.tsx
index 8516560..ca043cc 100644
--- a/src/components/snapshotCard.tsx
+++ b/src/components/snapshotCard.tsx
@@ -1,5 +1,7 @@
 import {Image, ImageURISource, useWindowDimensions, View} from 'react-native';
 
+import clsx from 'clsx';
+
 import {BaseText} from './baseText';
 import {Label} from './label';
 import {FrigateEvent} from '@api';
@@ -8,23 +10,24 @@ export const SnapshotCard = ({
   imageSource,
   camEvent,
   imageOverlay,
+  addtlClasses,
 }: {
   imageSource: ImageURISource['uri'];
   camEvent?: FrigateEvent & {lastEventEnded: string};
   imageOverlay?: React.ReactNode;
+  addtlClasses?: string;
 }) => {
   const {width} = useWindowDimensions();
-  const imageWidth = width * 0.97;
+  const imageWidth = width;
   const imageHeight = imageWidth * 0.75;
 
   return (
-    <View className="self-center border border-accent dark:border-accent-dark relative rounded-lg">
+    <View className={clsx('rounded-xl', addtlClasses)}>
       <Image
         source={{uri: imageSource}}
-        resizeMode="contain"
-        // eslint-disable-next-line react-native/no-inline-styles
-        style={{height: imageHeight, width: imageWidth, borderRadius: 8}}
-        className="top-0"
+        resizeMode="cover"
+        style={{height: imageHeight, width: imageWidth}}
+        className="top-0 rounded-lg"
       />
       {!!imageOverlay && imageOverlay}
       {!!camEvent && (
diff --git a/src/screens/EventsScreen/EventsScreen.tsx b/src/screens/EventsScreen/EventsScreen.tsx
index 2c39956..c4140f4 100644
--- a/src/screens/EventsScreen/EventsScreen.tsx
+++ b/src/screens/EventsScreen/EventsScreen.tsx
@@ -1,21 +1,33 @@
-import {ActivityIndicator, FlatList, View} from 'react-native';
+import React from 'react';
+import {
+  ActivityIndicator,
+  LayoutAnimation,
+  SectionList,
+  View,
+} from 'react-native';
 
 import clsx from 'clsx';
 
 import {CameraEvent} from './components';
-import {useCameraEvents} from '@api';
+import {FrigateEvent, useCameraEvents} from '@api';
 import {BaseText, BaseView} from '@components';
 import {useAppDataStore} from '@stores';
 import {bgBackground} from '@utils';
 
-const FooterComponent = ({length}: {length: number}) => (
-  //? I don't know why but we get some layout shift and that requires adding this height value here
-  <BaseView className="h-[250]">
-    <BaseText className="text-center text-mutedForeground dark:text-mutedForeground-dark pt-2">
-      Showing {length} event{length > 1 && 's'}.
-    </BaseText>
-  </BaseView>
-);
+import {SectionDateHeader} from './components/SectionDateHeader';
+
+const FooterComponent = ({length}: {length?: number}) => {
+  return (
+    //? I don't know why but we get some layout shift and that requires adding this height value here
+    <BaseView className="">
+      {!!length && (
+        <BaseText className="text-center text-mutedForeground dark:text-mutedForeground-dark pt-2">
+          Showing {length} event{length > 1 && 's'}.
+        </BaseText>
+      )}
+    </BaseView>
+  );
+};
 
 export const EventsScreen = () => {
   const currentCamera = useAppDataStore(state => state.currentCamera);
@@ -31,6 +43,36 @@ export const EventsScreen = () => {
     {enabled: !!currentCamera},
   );
 
+  const [collapsedSections, setCollapsedSections] = React.useState(new Set());
+
+  //? PERF: I could see this getting real expensive with more events. Consider moving into a RQ Select function?
+  const groupedEvents = React.useMemo(
+    () =>
+      events?.reduce<{title: string; data: FrigateEvent[]}[]>((acc, evt) => {
+        const evtDate = new Date(evt.start_time * 1000).toLocaleDateString();
+        const prevEventsIdx = acc.findIndex(grp => grp.title === evtDate);
+        const prevEvents = acc[prevEventsIdx]?.data;
+        if (prevEventsIdx > -1 && prevEvents?.length) {
+          acc[prevEventsIdx] = {title: evtDate, data: [...prevEvents, evt]};
+        } else {
+          acc.push({title: evtDate, data: [evt]});
+        }
+        return acc;
+      }, []),
+    [events],
+  );
+
+  const handleHeaderPress = (title: string) => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    const newCollapsed = new Set(collapsedSections);
+    if (collapsedSections.has(title)) {
+      newCollapsed.delete(title);
+    } else {
+      newCollapsed.add(title);
+    }
+    setCollapsedSections(newCollapsed);
+  };
+
   if (isLoading) {
     return (
       <BaseView>
@@ -39,7 +81,7 @@ export const EventsScreen = () => {
     );
   }
 
-  if (error || !events || (!isLoading && !currentCamera)) {
+  if (error || !groupedEvents || (!isLoading && !currentCamera)) {
     return (
       <BaseView>
         <BaseText className="text-red-800 text-lg">
@@ -49,7 +91,7 @@ export const EventsScreen = () => {
     );
   }
 
-  if (!events.length) {
+  if (!groupedEvents?.length) {
     return (
       <BaseView isScrollview showsVerticalScrollIndicator={false}>
         <BaseText>No events found.</BaseText>
@@ -59,14 +101,32 @@ export const EventsScreen = () => {
 
   return (
     <View className="flex-1">
-      <FlatList
+      <SectionList
         className={clsx(bgBackground)}
-        ListFooterComponent={<FooterComponent length={events.length} />}
+        extraData={collapsedSections}
+        keyExtractor={(item, index) => item.id + index}
+        ListFooterComponent={<FooterComponent length={events?.length} />}
         showsVerticalScrollIndicator={false}
-        data={events}
-        renderItem={({item: camEvent}) => (
-          <CameraEvent camEvent={camEvent} key={camEvent.id} />
+        sections={groupedEvents}
+        renderSectionHeader={props => (
+          <SectionDateHeader
+            {...props}
+            handleHeaderPress={handleHeaderPress}
+            isCollapsed={collapsedSections.has(props.section.title)}
+          />
         )}
+        renderItem={({item: camEvent, index, section}) => {
+          if (collapsedSections.has(section.title)) {
+            return null;
+          }
+          return (
+            <CameraEvent
+              camEvent={camEvent}
+              key={camEvent.id}
+              isFirst={index === 0}
+            />
+          );
+        }}
       />
       {/* // 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/EventsScreen/components/CameraEvent.tsx
index c8ec077..d2f9589 100644
--- a/src/screens/EventsScreen/components/CameraEvent.tsx
+++ b/src/screens/EventsScreen/components/CameraEvent.tsx
@@ -7,11 +7,19 @@ import {
   useWindowDimensions,
 } from 'react-native';
 
+import clsx from 'clsx';
+
 import {EventDetails} from './EventDetails';
 import {FrigateEvent} from '@api';
 import {BaseView, SnapshotCard, VideoPlayer} from '@components';
 
-export const CameraEvent = ({camEvent}: {camEvent: FrigateEvent}) => {
+export const CameraEvent = ({
+  camEvent,
+  isFirst,
+}: {
+  camEvent: FrigateEvent;
+  isFirst?: boolean;
+}) => {
   const {width} = useWindowDimensions();
   const imageWidth = width * 0.97;
   const imageHeight = imageWidth * 0.75;
@@ -44,9 +52,7 @@ export const CameraEvent = ({camEvent}: {camEvent: FrigateEvent}) => {
       if (scrollIndex === 2) {
         setVideoIsPaused(false);
       } else {
-        if (videoIsPaused === false) {
-          setVideoIsPaused(true);
-        }
+        setVideoIsPaused(true);
       }
     }
   };
@@ -64,8 +70,7 @@ export const CameraEvent = ({camEvent}: {camEvent: FrigateEvent}) => {
       contentOffset={{x: width, y: 0}}
       showsHorizontalScrollIndicator={false}
       pagingEnabled
-      style={{flex: 1}}
-      className="py-2">
+      className={clsx('py-2', isFirst && 'pt-1 rounded-t-none')}>
       {/* //? Details on left */}
       <BaseView
         style={{width, height: imageHeight}}
@@ -86,11 +91,15 @@ export const CameraEvent = ({camEvent}: {camEvent: FrigateEvent}) => {
       </BaseView>
 
       {/* //? if there's a video, show that to the right */}
-      {camEvent.has_clip && (
-        <BaseView style={{width, height: imageHeight}} className="py-2">
-          <VideoPlayer videoURI={camEvent.vodURL} isPaused={videoIsPaused} />
-        </BaseView>
-      )}
+      <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/EventsScreen/components/EventDetails.tsx
index 3664d53..d79ed74 100644
--- a/src/screens/EventsScreen/components/EventDetails.tsx
+++ b/src/screens/EventsScreen/components/EventDetails.tsx
@@ -36,7 +36,9 @@ export const EventDetails = ({camEvent}: {camEvent: FrigateEvent}) => {
       </Row>
       <Row>
         <BaseText>Event Duration</BaseText>
-        <BaseText>{eventDuration} seconds</BaseText>
+        <BaseText>
+          {eventDuration > 0 ? eventDuration : 'In Progress'} seconds
+        </BaseText>
       </Row>
       <Row>
         <BaseText>Object Label</BaseText>
diff --git a/src/screens/EventsScreen/components/SectionDateHeader.tsx b/src/screens/EventsScreen/components/SectionDateHeader.tsx
new file mode 100644
index 0000000..5a4c9f3
--- /dev/null
+++ b/src/screens/EventsScreen/components/SectionDateHeader.tsx
@@ -0,0 +1,40 @@
+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/homeScreen.tsx b/src/screens/HomeScreen.tsx
similarity index 100%
rename from src/screens/homeScreen.tsx
rename to src/screens/HomeScreen.tsx
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
index 5f89023..79e9609 100644
--- a/src/utils/colors.ts
+++ b/src/utils/colors.ts
@@ -1,3 +1,5 @@
+import {colors} from '../../themeColors';
+
 export const hslToHex = (HSL: string) => {
   HSL = HSL.replaceAll('%', '');
   const [_h, _s, _l]: (string | number)[] = HSL.split(' ');
@@ -19,3 +21,9 @@ export const hslToHex = (HSL: string) => {
 };
 
 export const bgBackground = 'bg-background dark:bg-background-dark';
+export const getFgColorHex = (isDarkMode: boolean) => {
+  if (isDarkMode) {
+    return hslToHex(colors.dark.foreground);
+  }
+  return hslToHex(colors.light.foreground);
+};