path: root/src/screens/moments/CameraScreen.tsx

import CameraRoll from '@react-native-community/cameraroll';
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
import {RouteProp} from '@react-navigation/core';
import {useFocusEffect} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useRef, useCallback, useEffect, useState} from 'react';
import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native';
import {CameraType, FlashMode, RNCamera} from 'react-native-camera';
import {AnimatedCircularProgress} from 'react-native-circular-progress';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {FlashButton, FlipButton, GalleryIcon} from '../../components';
import {MAX_VIDEO_RECORDING_DURATION, TAGG_PURPLE} from '../../constants';
import {MainStackParams} from '../../routes';
import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {showGIFFailureAlert, takePicture, takeVideo} from '../../utils/camera';

type CameraScreenRouteProps = RouteProp<MainStackParams, 'CameraScreen'>;
export type CameraScreenNavigationProps = StackNavigationProp<
  MainStackParams,
  'CameraScreen'
>;
interface CameraScreenProps {
  route: CameraScreenRouteProps;
  navigation: CameraScreenNavigationProps;
}
const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
  const {screenType, selectedCategory} = route.params;
  const cameraRef = useRef<RNCamera>(null);
  const tabBarHeight = useBottomTabBarHeight();
  const [cameraType, setCameraType] = useState<keyof CameraType>('back');
  const [flashMode, setFlashMode] = useState<keyof FlashMode>('off');
  const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
  const [isRecording, setIsRecording] = useState<boolean>(false);
  const [pictureProcessing, setPictureProcessing] = useState<boolean>(false);
  const [mounted, setMounted] = useState<boolean>(false);
  const [vidUri, setVidUri] = useState<string>();
  const [videoRecordStart, setVideoRecordStart] = useState<boolean>(false);

  useFocusEffect(
    useCallback(() => {
      navigation.dangerouslyGetParent()?.setOptions({
        tabBarVisible: false,
      });

      // reset in case we have returned to this screen
      setPictureProcessing(false);

      // reset in case this wasn't properly called
      setIsRecording(false);

      // in case the preview image gets stuck
      if (mounted) {
        cameraRef?.current?.resumePreview();
      }

      return () => setIsRecording(false);
    }, [navigation]),
  );

  /*
   *  Chooses the last picture from gallery to display as the gallery button icon
   */
  useEffect(() => {
    CameraRoll.getPhotos({first: 1})
      .then((lastPhoto) => {
        if (lastPhoto.edges.length > 0) {
          const image = lastPhoto.edges[0].node.image;
          setMostRecentPhoto(image.uri);
        }
      })
      .catch((_err) =>
        console.log('Unable to fetch preview photo for gallery'),
      );

    setMounted(true);
  }, []);

  const navigateToEditMedia = (uri: string) => {
    cameraRef?.current?.resumePreview();
    navigation.navigate('EditMedia', {
      screenType,
      media: {
        uri,
        isVideo: !(
          uri.endsWith('jpg') ||
          uri.endsWith('JPG') ||
          uri.endsWith('PNG') ||
          uri.endsWith('png') ||
          uri.endsWith('GIF') ||
          uri.endsWith('gif')
        ),
      },
      selectedCategory,
    });
  };

  const handleClose = () => {
    navigation.dangerouslyGetParent()?.setOptions({
      tabBarVisible: true,
    });
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      <Modal
        transparent={true}
        visible={isRecording && cameraType === 'front' && flashMode === 'on'}>
        <View style={styles.flashView} />
      </Modal>
      <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
        <CloseIcon height={25} width={25} color={'white'} />
      </TouchableOpacity>
      <FlashButton flashMode={flashMode} setFlashMode={setFlashMode} />
      <RNCamera
        ref={cameraRef}
        style={styles.camera}
        type={cameraType}
        flashMode={
          flashMode === 'on' && isRecording && cameraType === 'back'
            ? 'torch'
            : flashMode
        }
        onDoubleTap={() => {
          if (!pictureProcessing) {
            setCameraType(cameraType === 'front' ? 'back' : 'front');
          }
        }}
        onRecordingStart={(event: {
          nativeEvent: {
            uri: string;
            videoOrientation: number;
            deviceOrientation: number;
          };
        }) => {
          console.log('start', event.nativeEvent.uri);
          setIsRecording(true);
          setVidUri(event.nativeEvent.uri);
          setVideoRecordStart(true);
        }}
        onRecordingEnd={() => {
          if (videoRecordStart && vidUri) {
            navigateToEditMedia(vidUri);
          }
          setVideoRecordStart(false);
          setIsRecording(false);
        }}
      />
      {!pictureProcessing && (
        <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}>
          <FlipButton cameraType={cameraType} setCameraType={setCameraType} />
          <TouchableOpacity
            style={
              isRecording
                ? styles.captureButtonVideoContainer
                : styles.captureButtonContainer
            }
            activeOpacity={1}
            onLongPress={async () => {
              const resetAndStartCameraRecording = async () => {
                if (await cameraRef.current?.isRecording()) {
                  cameraRef.current?.stopRecording();
                }
              };

              await resetAndStartCameraRecording();
              takeVideo(cameraRef, (vid) => setVidUri(vid.uri));
            }}
            onPressOut={async () => {
              const cancelRecording = async () => {
                if (isRecording && (await cameraRef.current?.isRecording())) {
                  cameraRef.current?.stopRecording();
                } else {
                  takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
                }
                setIsRecording(false);
              };
              setPictureProcessing(true);
              cancelRecording();
              // tmp fix for when the animation glitches during the beginning of
              // recording causing onPressOut to not be detected.
              // setTimeout(() => {
              //   cancelRecording();
              // }, 500);
              // setTimeout(() => {
              //   cancelRecording();
              // }, 1000);
              // setTimeout(() => {
              //   cancelRecording();
              // }, 1500);
            }}
            onPress={() => {
              if (!pictureProcessing) {
                setPictureProcessing(true);
              }
              takePicture(cameraRef, (pic) => navigateToEditMedia(pic.uri));
            }}>
            <View style={styles.captureButton} />
          </TouchableOpacity>
          {isRecording && (
            <AnimatedCircularProgress
              size={95}
              width={6}
              fill={100}
              rotation={0}
              duration={(MAX_VIDEO_RECORDING_DURATION + 1) * 1000} // an extra second for UI to load
              tintColor={TAGG_PURPLE}
              style={styles.bottomContainer}
              lineCap={'round'}
            />
          )}
          <View style={styles.bottomRightContainer}>
            <GalleryIcon
              mostRecentPhotoUri={mostRecentPhoto}
              callback={(media) => {
                const filename = media.filename;
                if (
                  filename &&
                  (filename.endsWith('gif') || filename.endsWith('GIF'))
                ) {
                  showGIFFailureAlert(() => navigateToEditMedia(media.path));
                } else {
                  navigateToEditMedia(media.path);
                }
              }}
            />
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  camera: {
    flex: 1,
    justifyContent: 'space-between',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  flashView: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    backgroundColor: '#fff',
    opacity: 0.5,
  },
  captureButtonVideoContainer: {
    alignSelf: 'center',
    backgroundColor: 'transparent',
    borderRadius: 100,
    borderWidth: 15,
    borderColor: 'rgba(255,255,255,0.3)',
    width: 93,
    height: 93,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  captureButtonContainer: {
    alignSelf: 'center',
    backgroundColor: 'transparent',
    borderRadius: 100,
    borderWidth: 4,
    borderColor: '#fff',
    width: 93,
    height: 93,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  captureButton: {
    backgroundColor: '#fff',
    width: 68,
    height: 68,
    borderRadius: 74,
  },
  closeButton: {
    position: 'absolute',
    top: 0,
    paddingTop: HeaderHeight,
    zIndex: 1,
    marginLeft: '5%',
  },
  bottomContainer: {
    position: 'absolute',
    width: SCREEN_WIDTH,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  bottomRightContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: (SCREEN_WIDTH - 100) / 2,
  },
});

export default CameraScreen;