cleanup: remove extra screen from events

billyjacoby · Oct 13, 2023 · 9015fb3 · 9015fb3
1 parent f1d2adc
commit 9015fb3
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,18 +15,29 @@ export const FullscreenVideoPlayer = ({
   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">
-      <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>
   );
 };