From 6b547c4dddce138a58c46790bbe4f7fd750d0728 Mon Sep 17 00:00:00 2001
From: Loewy <loewy@chainstarters.com>
Date: Tue, 30 Jan 2024 17:05:43 -0800
Subject: [PATCH] add types, rebase

---
 component/video/camera.tsx         | 12 ++++++------
 component/video/capture-button.tsx | 15 ++++++++++++---
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/component/video/camera.tsx b/component/video/camera.tsx
index e0b619d..ce1abf1 100644
--- a/component/video/camera.tsx
+++ b/component/video/camera.tsx
@@ -7,10 +7,10 @@ import { useIsForeground } from './is-foreground'
 export default function CameraScreen(): React.ReactElement {
   const camera = useRef<Camera>(null)
   const { hasPermission, requestPermission } = useCameraPermission()
-  const [isCameraInitialized, setIsCameraInitialized] = useState(false)
+  const [isCameraInitialized, setIsCameraInitialized] = useState<boolean>(false)
 
-  const isForeground = useIsForeground()
-  const isActive = isForeground
+  const isForeground: boolean = useIsForeground()
+  const isActive: boolean = isForeground // Should be combined with isFocused hook
 
   const onError = useCallback((error: CameraRuntimeError) => {
     console.error(error)
@@ -37,7 +37,7 @@ export default function CameraScreen(): React.ReactElement {
   const format = useCameraFormat(device, [
     { videoResolution: { width: 3048, height: 2160 } },
     { fps: 60 }
-  ])
+  ]) // this sets as a target
 
   //Orientation detection
   const [orientation, setOrientation] = useState<Orientation>('portrait');
@@ -99,7 +99,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   togglePortrait: {
-    bottom: 110, // Adjust this as needed
+    bottom: 110, // needs refined
   },
   toggleLandscape: {
     transform: [{ rotate: '90deg' }],
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
     left: 50 // needs refined
   },
   portrait: {
-    bottom: 20
+    bottom: 20 // needs refined
   },
   landscape: {
     bottom: '40%', // Should come from SafeAreaProvider
diff --git a/component/video/capture-button.tsx b/component/video/capture-button.tsx
index dd8afd7..35aaa4c 100644
--- a/component/video/capture-button.tsx
+++ b/component/video/capture-button.tsx
@@ -1,10 +1,19 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { TouchableOpacity, StyleSheet, View } from 'react-native';
+import { TouchableOpacity, StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
 import { CameraRoll } from "@react-native-camera-roll/camera-roll";
+import { Camera } from 'react-native-vision-camera/lib/typescript/Camera';
+import { VideoFile } from 'react-native-vision-camera/lib/typescript/VideoFile';
+
+interface RecordingButtonProps {
+  style: StyleProp<ViewStyle>;
+  camera: React.RefObject<Camera>;
+  // eslint-disable-next-line no-unused-vars
+  onMediaCaptured: (media: VideoFile, mediaType: string) => void;
+  enabled: boolean;
+}
 
 
-export const RecordingButton = ({ style, camera, onMediaCaptured, enabled }) => {
-
+export const RecordingButton: React.FC<RecordingButtonProps> = ({ style, camera, onMediaCaptured, enabled }) => {
 	const isRecording = useRef(false)
 	// UseRef won't trigger a re-render
 	const [, setRecordingState] = useState(false);