feat(#17) Full screen preview

piwko28 · piwko28 · commit 1d96c3dfcb24 · 2024-10-09T22:05:13.000+02:00
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -80,8 +80,8 @@ android {
         applicationId "com.frigateviewer"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 13
-        versionName "14.0.1"
+        versionCode 14
+        versionName "14.1.0"
     }
     signingConfigs {
         debug {
diff --git a/i18n/de.ts b/i18n/de.ts
@@ -110,6 +110,9 @@ export default {
   'cameras.liveView.disclaimer':
     'Beachten Sie, dass die Aktualisierungsfrequenz von Ihrer Netzwerklatenz abhängt',
   'settings.cameras.numberOfColumns.label': 'Anzahl der Spalten',
+  'settings.cameras.actionWhenPressed.label': 'Aktion beim Drücken',
+  'settings.cameras.actionWhenPressed.option.events': 'Ereignisliste',
+  'settings.cameras.actionWhenPressed.option.preview': 'Kameravorschau',
   'settings.events.header': 'Ereignisse',
   'settings.events.numberOfColumns.label': 'Anzahl der Spalten',
   'settings.events.photoPreference.label': 'Fotopräferenz',
diff --git a/i18n/en.ts b/i18n/en.ts
@@ -109,6 +109,9 @@ export default {
   'cameras.liveView.disclaimer':
     'Keep in mind that refresh frequency depends on your network latency',
   'settings.cameras.numberOfColumns.label': 'Number of columns',
+  'settings.cameras.actionWhenPressed.label': 'Action when pressed',
+  'settings.cameras.actionWhenPressed.option.events': 'List of events',
+  'settings.cameras.actionWhenPressed.option.preview': 'Camera preview',
   'settings.events.header': 'Events',
   'settings.events.numberOfColumns.label': 'Number of columns',
   'settings.events.photoPreference.label': 'Photo preference',
diff --git a/i18n/es.ts b/i18n/es.ts
@@ -110,6 +110,10 @@ export default {
   'cameras.liveView.disclaimer':
     'Tenga en cuenta que la frecuencia de actualización depende de la latencia de su red',
   'settings.cameras.numberOfColumns.label': 'Número de columnas',
+  'settings.cameras.actionWhenPressed.label': 'Acción al presionar',
+  'settings.cameras.actionWhenPressed.option.events': 'Lista de eventos',
+  'settings.cameras.actionWhenPressed.option.preview':
+    'Vista previa de la cámara',
   'settings.events.header': 'Eventos',
   'settings.events.numberOfColumns.label': 'Número de columnas',
   'settings.events.photoPreference.label': 'Preferencias de las imagen',
diff --git a/i18n/fr.ts b/i18n/fr.ts
@@ -110,6 +110,9 @@ export default {
   'cameras.liveView.disclaimer':
     'Gardez à l’esprit que la fréquence de rafraîchissement dépend de la latence de votre réseau',
   'settings.cameras.numberOfColumns.label': 'Nombre de colonnes',
+  'settings.cameras.actionWhenPressed.label': 'Action lorsque pressé',
+  'settings.cameras.actionWhenPressed.option.events': 'Liste des événements',
+  'settings.cameras.actionWhenPressed.option.preview': 'Aperçu de la caméra',
   'settings.events.header': 'Événements',
   'settings.events.numberOfColumns.label': 'Nombre de colonnes',
   'settings.events.photoPreference.label': 'Préférences de photo',
diff --git a/i18n/it.ts b/i18n/it.ts
@@ -110,6 +110,10 @@ export default {
   'cameras.liveView.disclaimer':
     'Tieni presente che la frequenza di aggiornamento dipende dalla latenza della tua rete',
   'settings.cameras.numberOfColumns.label': 'Numero di colonne',
+  'settings.cameras.actionWhenPressed.label': 'Azione quando premuto',
+  'settings.cameras.actionWhenPressed.option.events': 'Elenco degli eventi',
+  'settings.cameras.actionWhenPressed.option.preview':
+    'Anteprima della telecamera',
   'settings.events.header': 'Eventi',
   'settings.events.numberOfColumns.label': 'Numero di colonne',
   'settings.events.photoPreference.label': 'Preferenza fotografica',
diff --git a/i18n/pl.ts b/i18n/pl.ts
@@ -110,6 +110,9 @@ export default {
   'cameras.liveView.disclaimer':
     'Weź pod uwagę, że częstotliwość odświeżania zależy od opóźnień w twojej sieci',
   'settings.cameras.numberOfColumns.label': 'Liczba kolumn',
+  'settings.cameras.actionWhenPressed.label': 'Akcja po naciśnięciu',
+  'settings.cameras.actionWhenPressed.option.events': 'Lista zdarzeń',
+  'settings.cameras.actionWhenPressed.option.preview': 'Podgląd kamery',
   'settings.events.header': 'Zdarzenia',
   'settings.events.numberOfColumns.label': 'Liczba kolumn',
   'settings.events.photoPreference.label': 'Preferowane zdjęcie',
diff --git a/i18n/pt.ts b/i18n/pt.ts
@@ -110,6 +110,9 @@ export default {
   'cameras.liveView.disclaimer':
     'Lembre-se que a frequência de atualização depende da latência da sua rede',
   'settings.cameras.numberOfColumns.label': 'Número de colunas',
+  'settings.cameras.actionWhenPressed.label': 'Ação quando pressionado',
+  'settings.cameras.actionWhenPressed.option.events': 'Lista de eventos',
+  'settings.cameras.actionWhenPressed.option.preview': 'Visualização da câmara',
   'settings.events.header': 'Eventos',
   'settings.events.numberOfColumns.label': 'Número de colunas',
   'settings.events.photoPreference.label': 'Preferência de imagem',
diff --git a/i18n/sv.ts b/i18n/sv.ts
@@ -110,6 +110,10 @@ export default {
   'cameras.liveView.disclaimer':
     'Tänk på att uppdateringsfrekvensen beror på nätverkets latens',
   'settings.cameras.numberOfColumns.label': 'Antal kolumner',
+  'settings.cameras.actionWhenPressed.label': 'Åtgärd när du trycker',
+  'settings.cameras.actionWhenPressed.option.events': 'Lista över händelser',
+  'settings.cameras.actionWhenPressed.option.preview':
+    'Förhandsvisning av kamera',
   'settings.events.header': 'Händelser',
   'settings.events.numberOfColumns.label': 'Antal kolumner',
   'settings.events.photoPreference.label': 'Fotoinställning',
diff --git a/i18n/uk.ts b/i18n/uk.ts
@@ -110,6 +110,10 @@ export default {
   'cameras.liveView.disclaimer':
     'Майте на увазі, що частота оновлення залежить від затримки мережі',
   'settings.cameras.numberOfColumns.label': 'Кількість стовпців',
+  'settings.cameras.actionWhenPressed.label': 'Дія при натисканні',
+  'settings.cameras.actionWhenPressed.option.events': 'Список подій',
+  'settings.cameras.actionWhenPressed.option.preview':
+    'Попередній перегляд камери',
   'settings.events.header': 'Події',
   'settings.events.numberOfColumns.label': 'Кількість стовпців',
   'settings.events.photoPreference.label': 'Перевага фото',
diff --git a/index.js b/index.js
@@ -3,16 +3,17 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {TopBarButton} from './components/icons/TopBarButton';
 import {Author} from './views/author/Author';
 import {CameraEventClip} from './views/camera-event-clip/CameraEventClip';
+import {CameraPreview} from './views/camera-preview/CameraPreview';
 import {CameraEvents} from './views/camera-events/CameraEvents';
 import {CamerasList} from './views/cameras-list/CamerasList';
 import {EventsFilters} from './views/events-filters/EventsFilters';
 import {Menu} from './views/menu/Menu';
 import {Settings} from './views/settings/Settings';
 import {withRedux} from './helpers/redux';
 import {withTranslations} from './helpers/locale';
-import { Logs } from './views/logs/Logs';
-import { Storage } from './views/storage/Storage';
-import { System } from './views/system/System';
+import {Logs} from './views/logs/Logs';
+import {Storage} from './views/storage/Storage';
+import {System} from './views/system/System';
 
 const registerComponent = (name, component, decorators = []) => {
   Navigation.registerComponent(
@@ -31,13 +32,18 @@ const viewDecorators = [gestureHandlerRootHOC, withTranslations, withRedux];
 registerComponent('CamerasList', CamerasList, viewDecorators);
 registerComponent('CameraEvents', CameraEvents, viewDecorators);
 registerComponent('CameraEventClip', CameraEventClip, viewDecorators);
+registerComponent('CameraPreview', CameraPreview, viewDecorators);
 registerComponent('Storage', Storage, viewDecorators);
 registerComponent('System', System, viewDecorators);
 registerComponent('Logs', Logs, viewDecorators);
 registerComponent('Settings', Settings, viewDecorators);
 registerComponent('Author', Author, viewDecorators);
 
-registerComponent('Menu', Menu, [gestureHandlerRootHOC, withTranslations, withRedux]);
+registerComponent('Menu', Menu, [
+  gestureHandlerRootHOC,
+  withTranslations,
+  withRedux,
+]);
 registerComponent('EventsFilters', EventsFilters, [
   withTranslations,
   withRedux,
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "FrigateViewer",
-  "version": "14.0.1",
+  "version": "14.1.0",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
@@ -59,4 +59,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}
diff --git a/store/settings.ts b/store/settings.ts
@@ -71,6 +71,7 @@ export interface ISettings {
     liveView: boolean;
     numColumns: number;
     previewHeight: number;
+    actionWhenPressed: 'events' | 'preview';
   };
   events: {
     numColumns: number;
@@ -103,6 +104,7 @@ export const initialSettings: ISettings = {
     liveView: false,
     numColumns: 1,
     previewHeight: 222,
+    actionWhenPressed: 'events',
   },
   events: {
     numColumns: 1,
@@ -233,6 +235,9 @@ export const selectCamerasNumColumns = (state: RootState) =>
 export const selectCamerasPreviewHeight = (state: RootState) =>
   selectCameras(state).previewHeight;
 
+export const selectCamerasactionWhenPressed = (state: RootState) =>
+  selectCameras(state).actionWhenPressed;
+
 /* events */
 
 export const selectEvents = (state: RootState) => selectSettings(state).events;
diff --git a/views/camera-event-clip/CameraEventClip.tsx b/views/camera-event-clip/CameraEventClip.tsx
@@ -103,6 +103,14 @@ const VideoPlayer: FC<IVideoPlayerProps> = ({
     setProgressInfo(info);
   }, []);
 
+  const onEnd = () => {
+    setProgressInfo({
+      duration: 0,
+      ...progressInfo,
+      currentTime: progressInfo?.duration || 0,
+    });
+  };
+
   const onStopped = useCallback(() => {
     setStopped(true);
   }, []);
@@ -184,6 +192,7 @@ const VideoPlayer: FC<IVideoPlayerProps> = ({
               style={[styles.player]}
               onProgress={onProgress}
               onStopped={onStopped}
+              onEnd={onEnd}
             />
           </VideoHUD>
         </ZoomableView>
diff --git a/views/camera-events/Share.tsx b/views/camera-events/Share.tsx
@@ -11,21 +11,15 @@ import {
   selectServerApiUrl,
   selectServerCredentials,
 } from '../../store/settings';
-import {ActivityIndicator, StyleSheet, Text, ToastAndroid} from 'react-native';
+import {ActivityIndicator, Text, ToastAndroid} from 'react-native';
 import {clipFilename, snapshotFilename} from './eventHelpers';
+import {useStyles} from '../../helpers/colors';
 
 interface ShareProps {
   event?: ICameraEvent;
   onDismiss?: () => void;
 }
 
-const styles = StyleSheet.create({
-  loadingText: {
-    textAlign: 'center',
-    color: 'white',
-  },
-});
-
 const stall = (ms: number = 0) =>
   new Promise(resolve => setTimeout(resolve, ms));
 
@@ -37,6 +31,13 @@ export const Share: FC<ShareProps> = ({event, onDismiss}) => {
   const apiUrl = useAppSelector(selectServerApiUrl);
   const credentials = useAppSelector(selectServerCredentials);
 
+  const styles = useStyles(({theme}) => ({
+    loadingText: {
+      textAlign: 'center',
+      color: 'white',
+    },
+  }));
+
   useEffect(() => {
     if (event) {
       setIsVisible(true);
diff --git a/views/camera-preview/CameraPreview.tsx b/views/camera-preview/CameraPreview.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import {NavigationFunctionComponent} from 'react-native-navigation';
+import {useStyles} from '../../helpers/colors';
+import {LivePreview} from './LivePreview';
+import {View} from 'react-native-ui-lib';
+
+interface CameraPreviewProps {
+  cameraName: string;
+}
+
+export const CameraPreview: NavigationFunctionComponent<CameraPreviewProps> = ({
+  cameraName,
+}) => {
+  const styles = useStyles(({theme}) => ({
+    wrapper: {
+      backgroundColor: theme.background,
+    },
+  }));
+
+  return (
+    <View style={styles.wrapper}>
+      <LivePreview cameraName={cameraName} />
+    </View>
+  );
+};
diff --git a/views/camera-preview/LivePreview.tsx b/views/camera-preview/LivePreview.tsx
@@ -0,0 +1,79 @@
+import React, {FC, useEffect, useRef, useState} from 'react';
+import type {PropsWithChildren} from 'react';
+import {Image, ImageStyle, View} from 'react-native';
+import {useAppSelector} from '../../store/store';
+import {
+  selectCamerasRefreshFrequency,
+  selectServerApiUrl,
+  selectServerCredentials,
+} from '../../store/settings';
+import {authorizationHeader} from '../../helpers/rest';
+import {ZoomableImage} from '../../components/ZoomableImage';
+import {useStyles} from '../../helpers/colors';
+
+type LivePreviewProps = PropsWithChildren<{
+  cameraName: string;
+}>;
+
+export const LivePreview: FC<LivePreviewProps> = ({cameraName}) => {
+  const styles = useStyles(() => ({
+    image: {
+      width: '100%',
+      height: '100%',
+    },
+  }));
+
+  const [lastImageSrc, setLastImageSrc] = useState<string | undefined>(
+    undefined,
+  );
+  const apiUrl = useAppSelector(selectServerApiUrl);
+  const credentials = useAppSelector(selectServerCredentials);
+  const refreshFrequency = useAppSelector(selectCamerasRefreshFrequency);
+  const interval = useRef<NodeJS.Timeout>();
+
+  const getLastImageUrl = () =>
+    `${apiUrl}/${cameraName}/latest.jpg?bbox=1&ts=${new Date().toISOString()}`;
+
+  const updateLastImageUrl = async () => {
+    const lastImageUrl = getLastImageUrl();
+    Image.getSizeWithHeaders(
+      lastImageUrl,
+      authorizationHeader(credentials),
+      () => {
+        setLastImageSrc(lastImageUrl);
+      },
+    );
+  };
+
+  useEffect(() => {
+    updateLastImageUrl();
+    const removeRefreshing = () => {
+      if (interval.current) {
+        clearInterval(interval.current);
+      }
+    };
+    removeRefreshing();
+    interval.current = setInterval(async () => {
+      updateLastImageUrl();
+    }, refreshFrequency * 1000);
+    return removeRefreshing;
+  }, [cameraName, setLastImageSrc, apiUrl, refreshFrequency]);
+
+  return (
+    <View>
+      {lastImageSrc && (
+        <ZoomableImage
+          source={{
+            uri: lastImageSrc,
+            headers: authorizationHeader(credentials),
+          }}
+          style={styles.image as ImageStyle}
+          fadeDuration={0}
+          resizeMode="contain"
+          resizeMethod="scale"
+          onLoad={updateLastImageUrl}
+        />
+      )}
+    </View>
+  );
+};
diff --git a/views/cameras-list/CameraTile.tsx b/views/cameras-list/CameraTile.tsx
diff --git a/views/settings/Settings.tsx b/views/settings/Settings.tsx
diff --git a/views/settings/messages.ts b/views/settings/messages.ts
