From 49dfe6a52e09bdb218e2b1ceb5a8df9ed46873f1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 22 Jun 2021 18:37:12 -0400 Subject: Squashed commit of the following: commit b1c2002caa349dc96f81d3cc3e00ea545f4e654e Author: Ivan Chen Date: Tue Jun 22 15:28:18 2021 -0400 Add video for camerea --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'package.json') diff --git a/package.json b/package.json index ea8c946a..bc524f94 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "react-native-haptic-feedback": "^1.11.0", "react-native-hyperlink": "^0.0.19", "react-native-image-crop-picker": "^0.36.0", + "react-native-image-picker": "^4.0.4", "react-native-image-resizer": "^1.4.4", "react-native-inappbrowser-reborn": "^3.5.0", "react-native-linear-gradient": "^2.5.6", @@ -105,4 +106,4 @@ "./node_modules/react-native-gesture-handler/jestSetup.js" ] } -} \ No newline at end of file +} -- cgit v1.2.3-70-g09d2 From 457b5cf34c032e7b73f972d5ba801ff420915190 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 22 Jun 2021 18:37:20 -0400 Subject: Squashed commit of the following: commit b6e4676b6ea262580453963ed6cfd85932d32341 Author: Ivan Chen Date: Mon Jun 21 19:04:08 2021 -0400 Add library, Add sample code --- ios/Podfile.lock | 9 ++ package.json | 2 + src/screens/chat/ChatListScreen.tsx | 288 +++++++++++++++++++++--------------- yarn.lock | 34 +++++ 4 files changed, 211 insertions(+), 122 deletions(-) (limited to 'package.json') diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 7d6ce3a8..5679c1c7 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -345,6 +345,11 @@ PODS: - React-Core - react-native-splash-screen (3.2.0): - React + - react-native-video (5.1.1): + - React-Core + - react-native-video/Video (= 5.1.1) + - react-native-video/Video (5.1.1): + - React-Core - React-RCTActionSheet (0.63.3): - React-Core/RCTActionSheetHeaders (= 0.63.3) - React-RCTAnimation (0.63.3): @@ -531,6 +536,7 @@ DEPENDENCIES: - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)" - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - react-native-splash-screen (from `../node_modules/react-native-splash-screen`) + - react-native-video (from `../node_modules/react-native-video`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) @@ -639,6 +645,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-safe-area-context" react-native-splash-screen: :path: "../node_modules/react-native-splash-screen" + react-native-video: + :path: "../node_modules/react-native-video" React-RCTActionSheet: :path: "../node_modules/react-native/Libraries/ActionSheetIOS" React-RCTAnimation: @@ -745,6 +753,7 @@ SPEC CHECKSUMS: react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79 react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865 + react-native-video: 0bb76b6d6b77da3009611586c7dbf817b947f30e React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa React-RCTAnimation: 1befece0b5183c22ae01b966f5583f42e69a83c2 React-RCTBlob: 0b284339cbe4b15705a05e2313a51c6d8b51fa40 diff --git a/package.json b/package.json index bc524f94..399a40ea 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@reduxjs/toolkit": "^1.4.0", "@stream-io/flat-list-mvcp": "^0.10.1", "@types/react-native-vector-icons": "^6.4.5", + "@types/react-native-video": "^5.0.6", "moment": "^2.29.1", "patch-package": "^6.4.7", "postinstall-postinstall": "^2.1.0", @@ -59,6 +60,7 @@ "react-native-splash-screen": "^3.2.0", "react-native-svg": "^12.1.0", "react-native-vector-icons": "^7.0.0", + "react-native-video": "^5.1.1", "react-promise-tracker": "^2.1.0", "react-redux": "^7.2.2", "reanimated-bottom-sheet": "^1.0.0-alpha.22", diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 1df5c2da..08b41151 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,26 +1,10 @@ -import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useContext, useEffect, useMemo, useState} from 'react'; -import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; -import {useStore} from 'react-redux'; -import {ChannelList, Chat} from 'stream-chat-react-native'; -import {ChatContext} from '../../App'; -import {TabsGradient} from '../../components'; -import {ChannelPreview, MessagesHeader} from '../../components/messages'; +import React from 'react'; +import {StyleSheet} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import Video from 'react-native-video'; import {MainStackParams} from '../../routes'; -import {RootState} from '../../store/rootReducer'; -import EmptyContentView from '../../components/common/EmptyContentView'; -import { - LocalAttachmentType, - LocalChannelType, - LocalCommandType, - LocalEventType, - LocalMessageType, - LocalReactionType, - LocalUserType, -} from '../../types'; -import {connectChatAccount, HeaderHeight} from '../../utils'; -import NewChatModal from './NewChatModal'; +import {SCREEN_WIDTH} from '../../utils'; type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, @@ -29,114 +13,174 @@ type ChatListScreenNavigationProp = StackNavigationProp< interface ChatListScreenProps { navigation: ChatListScreenNavigationProp; } -/* - * Screen that displays all of the user's active conversations. - */ -const ChatListScreen: React.FC = () => { - const {chatClient} = useContext(ChatContext); - const [modalVisible, setChatModalVisible] = useState(false); - const state: RootState = useStore().getState(); - const loggedInUserId = state.user.user.userId; - const tabbarHeight = useBottomTabBarHeight(); - - const memoizedFilters = useMemo( - () => ({ - members: {$in: [loggedInUserId]}, - type: 'messaging', - }), - [], - ); - - const chatTheme = { - channelListMessenger: { - flatListContent: { - backgroundColor: 'white', - paddingBottom: tabbarHeight + HeaderHeight + 20, - }, - }, - }; - - useEffect(() => { - if (loggedInUserId) { - connectChatAccount(loggedInUserId, chatClient) - .then((success) => { - if (!success) { - Alert.alert('Something wrong with chat'); - } - }) - .catch((err) => { - console.log('Error connecting to chat: ', err); - Alert.alert('Something wrong with chat'); - }); - } - }, [loggedInUserId]); +const ChatListScreen: React.FC = () => { return ( - - - - { - setChatModalVisible(true); - }} - /> - - - - filters={memoizedFilters} - options={{ - presence: true, - state: true, - watch: true, - }} - sort={{last_message_at: -1}} - maxUnreadCount={99} - Preview={ChannelPreview} - EmptyStateIndicator={() => { - return ; - }} - /> - - - - - - + + ); }; const styles = StyleSheet.create({ - background: { - flex: 1, - backgroundColor: 'white', - }, - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - placeholder: { - fontSize: 14, - fontWeight: 'bold', - marginBottom: 10, - }, - button: { - backgroundColor: '#CCE4FC', - padding: 15, - borderRadius: 5, - }, - chatContainer: { - height: '100%', - marginTop: 10, + video: { + width: SCREEN_WIDTH, + aspectRatio: 2, }, }); export default ChatListScreen; + +// import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; +// import {StackNavigationProp} from '@react-navigation/stack'; +// import React, {useContext, useEffect, useMemo, useState} from 'react'; +// import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; +// import {useStore} from 'react-redux'; +// import {ChannelList, Chat} from 'stream-chat-react-native'; +// import {ChatContext} from '../../App'; +// import {TabsGradient} from '../../components'; +// import {ChannelPreview, MessagesHeader} from '../../components/messages'; +// import {MainStackParams} from '../../routes'; +// import {RootState} from '../../store/rootReducer'; +// import EmptyContentView from '../../components/common/EmptyContentView'; +// import { +// LocalAttachmentType, +// LocalChannelType, +// LocalCommandType, +// LocalEventType, +// LocalMessageType, +// LocalReactionType, +// LocalUserType, +// } from '../../types'; +// import {connectChatAccount, HeaderHeight} from '../../utils'; +// import NewChatModal from './NewChatModal'; + +// type ChatListScreenNavigationProp = StackNavigationProp< +// MainStackParams, +// 'ChatList' +// >; +// interface ChatListScreenProps { +// navigation: ChatListScreenNavigationProp; +// } +// /* +// * Screen that displays all of the user's active conversations. +// */ +// const ChatListScreen: React.FC = () => { +// const {chatClient} = useContext(ChatContext); +// const [modalVisible, setChatModalVisible] = useState(false); +// const state: RootState = useStore().getState(); +// const loggedInUserId = state.user.user.userId; +// const tabbarHeight = useBottomTabBarHeight(); + +// const memoizedFilters = useMemo( +// () => ({ +// members: {$in: [loggedInUserId]}, +// type: 'messaging', +// }), +// [], +// ); + +// const chatTheme = { +// channelListMessenger: { +// flatListContent: { +// backgroundColor: 'white', +// paddingBottom: tabbarHeight + HeaderHeight + 20, +// }, +// }, +// }; + +// useEffect(() => { +// if (loggedInUserId) { +// connectChatAccount(loggedInUserId, chatClient) +// .then((success) => { +// if (!success) { +// Alert.alert('Something wrong with chat'); +// } +// }) +// .catch((err) => { +// console.log('Error connecting to chat: ', err); +// Alert.alert('Something wrong with chat'); +// }); +// } +// }, [loggedInUserId]); + +// return ( +// +// +// +// { +// setChatModalVisible(true); +// }} +// /> +// +// +// +// filters={memoizedFilters} +// options={{ +// presence: true, +// state: true, +// watch: true, +// }} +// sort={{last_message_at: -1}} +// maxUnreadCount={99} +// Preview={ChannelPreview} +// EmptyStateIndicator={() => { +// return ; +// }} +// /> +// +// +// +// +// +// +// ); +// }; + +// const styles = StyleSheet.create({ +// background: { +// flex: 1, +// backgroundColor: 'white', +// }, +// container: { +// flex: 1, +// justifyContent: 'center', +// alignItems: 'center', +// }, +// placeholder: { +// fontSize: 14, +// fontWeight: 'bold', +// marginBottom: 10, +// }, +// button: { +// backgroundColor: '#CCE4FC', +// padding: 15, +// borderRadius: 5, +// }, +// chatContainer: { +// height: '100%', +// marginTop: 10, +// }, +// }); + +// export default ChatListScreen; diff --git a/yarn.lock b/yarn.lock index 9c1ebdf8..273dfed2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1335,6 +1335,14 @@ "@types/react" "*" "@types/react-native" "*" +"@types/react-native-video@^5.0.6": + version "5.0.6" + resolved "https://registry.yarnpkg.com/@types/react-native-video/-/react-native-video-5.0.6.tgz#1a84eff00820b8d3136dd6d6333ce471738293a6" + integrity sha512-elf7Y7qornIySK5yR9yOINtQcqXScSQoe9yz5Kuisq/IV5Kf3BprsNGHloRXT+WYVQflii6+EJwyAUs1R4izAw== + dependencies: + "@types/react" "*" + "@types/react-native" "*" + "@types/react-native@*": version "0.64.10" resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.10.tgz#5eb6a72c77ce0f7e6e14b19c61a6bc585975eef5" @@ -2784,6 +2792,11 @@ electron-to-chromium@^1.3.723: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09" integrity sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A== +eme-encryption-scheme-polyfill@^2.0.1: + version "2.0.3" + resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.3.tgz#2ca6e06480e06cceb5e50efd27943ac46c959878" + integrity sha512-44CNFMsqzHdKHrzWxlS7xZ8KUHn5XutBqpmCuWzNIynmAyFInHrrD3ozv/RvK9ZhgV6QY6Easx8EWAmxteNodg== + emoji-regex@^7.0.1: version "7.0.3" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" @@ -4860,6 +4873,11 @@ jws@^3.2.2: jwa "^1.4.1" safe-buffer "^5.0.1" +keymirror@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/keymirror/-/keymirror-0.1.1.tgz#918889ea13f8d0a42e7c557250eee713adc95c35" + integrity sha1-kYiJ6hP40KQufFVyUO7nE63JXDU= + kind-of@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44" @@ -6588,6 +6606,15 @@ react-native-vector-icons@^7.0.0: prop-types "^15.7.2" yargs "^15.0.2" +react-native-video@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.1.1.tgz#89a7989efeb8d404611c06154d1da227a745d7d8" + integrity sha512-zee8gRUrjPWRoZSEBiMebClqu1iAuCQNLjzqpmXFrRWEoJj7azM3BPqLQWJgsnfLiYUYGySeApC/G60THM5+tw== + dependencies: + keymirror "^0.1.1" + prop-types "^15.7.2" + shaka-player "^2.5.9" + react-native@0.63.3: version "0.63.3" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.63.3.tgz#4a7f6540e049ff41810887bbd1125abc4672f3bf" @@ -7130,6 +7157,13 @@ setprototypeof@1.1.1: resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683" integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw== +shaka-player@^2.5.9: + version "2.5.23" + resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.23.tgz#db92d1c6cf2314f0180a2cec11b0e2f2560336f5" + integrity sha512-3MC9k0OXJGw8AZ4n/ZNCZS2yDxx+3as5KgH6Tx4Q5TRboTBBCu6dYPI5vp1DxKeyU12MBN1Zcbs7AKzXv2EnCg== + dependencies: + eme-encryption-scheme-polyfill "^2.0.1" + shallow-clone@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060" -- cgit v1.2.3-70-g09d2 From 2f3244dfa11cc23b804930ad448222bbff4f022a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 30 Jun 2021 13:55:28 -0400 Subject: Squashed commit of the following: commit 66c974161b59f1e3570e2a4a42334fabc16c2129 Merge: 53bdc94c d4b21051 Author: Ivan Chen Date: Tue Jun 29 17:06:19 2021 -0400 Merge pull request #476 from shravyaramesh/tma937-tagg-camera [TMA-937] Tagg Camera commit d4b210518eaffd3bf1320ca7ce7fa4a6d611528f Author: Ivan Chen Date: Tue Jun 29 17:04:10 2021 -0400 Cleanup code, Update camera options commit 3f826ec0741d3f0d0c85a17e5d0a09eef402dbf2 Author: Ivan Chen Date: Tue Jun 29 16:45:45 2021 -0400 Set to only allow photos commit 9d30c0c211e6b0b1b87e5de93a043e6e9f06beb3 Author: Ivan Chen Date: Tue Jun 29 16:44:41 2021 -0400 Cleanup code, Fix gallery icon bug commit f6fdd5d913c29855644f226d09d6cba60faf6e21 Author: Ivan Chen Date: Tue Jun 29 16:32:19 2021 -0400 Add error handling commit 5fcffd40746b2074d523f53dc82c824d147444e5 Author: Ivan Chen Date: Tue Jun 29 16:29:06 2021 -0400 Refactor buttons commit f273a7aa1c2e27692c2a03ae1e2fc9b81360558d Author: Shravya Ramesh Date: Fri Jun 25 17:18:47 2021 -0700 Fix lint errors commit 448e91ed0b6c7519c02bbe1ac32a9d51989679db Author: Shravya Ramesh Date: Fri Jun 25 16:58:05 2021 -0700 Fix lint errors commit 6f94f0bb6dbe12e23f4222a0d0e3ffb09af965d7 Author: Shravya Ramesh Date: Fri Jun 25 16:50:13 2021 -0700 Add missing description for permissions commit 727c6384a2a07c42cd132d02da8c7dbb5757ea4f Author: Shravya Ramesh Date: Fri Jun 25 16:50:00 2021 -0700 Refactor code, Fix orientation bug commit f596a0246a9b9453df3a93c8c3fc5c9137bb50fc Author: Shravya Ramesh Date: Fri Jun 25 03:26:00 2021 -0700 Create camera screen, Add to Navigator commit 0646d38547319200f7f725cdd76b1ed9b531a188 Author: Shravya Ramesh Date: Fri Jun 25 03:24:54 2021 -0700 Navigate to camera screen, Move image picker funct commit f0762b7a3171f99833eb3c3f5e723c472dbc4879 Author: Shravya Ramesh Date: Fri Jun 25 03:23:56 2021 -0700 Add assets for camera screen commit 3c4676b7646fbddc43bf5d9796b7cbac185b6664 Author: Shravya Ramesh Date: Fri Jun 25 03:23:33 2021 -0700 Add package, install for camera lib --- ios/Frontend/Info.plist | 6 + ios/Podfile.lock | 12 ++ package.json | 1 + src/assets/icons/camera/flash-off.svg | 1 + src/assets/icons/camera/flash-on.svg | 1 + src/assets/icons/camera/flip.svg | 1 + src/assets/icons/camera/save.svg | 1 + src/components/camera/FlashButton.tsx | 42 +++++++ src/components/camera/FlipButton.tsx | 29 +++++ src/components/camera/GalleryIcon.tsx | 43 +++++++ src/components/camera/SaveButton.tsx | 26 ++++ src/components/camera/index.ts | 4 + src/components/camera/styles.tsx | 53 ++++++++ src/components/index.ts | 9 +- src/components/moments/Moment.tsx | 13 +- src/routes/main/MainStackNavigator.tsx | 4 + src/routes/main/MainStackScreen.tsx | 8 ++ src/screens/moments/CameraScreen.tsx | 215 +++++++++++++++++++++++++++++++++ src/screens/moments/index.ts | 1 + src/utils/camera.ts | 65 ++++++++++ yarn.lock | 7 ++ 21 files changed, 533 insertions(+), 9 deletions(-) create mode 100644 src/assets/icons/camera/flash-off.svg create mode 100644 src/assets/icons/camera/flash-on.svg create mode 100644 src/assets/icons/camera/flip.svg create mode 100644 src/assets/icons/camera/save.svg create mode 100644 src/components/camera/FlashButton.tsx create mode 100644 src/components/camera/FlipButton.tsx create mode 100644 src/components/camera/GalleryIcon.tsx create mode 100644 src/components/camera/SaveButton.tsx create mode 100644 src/components/camera/index.ts create mode 100644 src/components/camera/styles.tsx create mode 100644 src/screens/moments/CameraScreen.tsx create mode 100644 src/utils/camera.ts (limited to 'package.json') diff --git a/ios/Frontend/Info.plist b/ios/Frontend/Info.plist index fa67d073..94734c40 100644 --- a/ios/Frontend/Info.plist +++ b/ios/Frontend/Info.plist @@ -56,6 +56,12 @@ LaunchScreen NSPhotoLibraryUsageDescription This lets you share photos from your library and select profile displays + NSPhotoLibraryAddUsageDescription + This lets you save photos captured on Tagg, to your library + NSCameraUsageDescription + Enable camera access to capture and share moment with your friends + NSMicrophoneUsageDescription + Enable microphone access to record and listen to videos UIAppFonts Feather.ttf diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 15ec026f..8eed7569 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -329,6 +329,14 @@ PODS: - React-jsinspector (0.63.3) - react-native-blur (0.8.0): - React + - react-native-camera (3.44.1): + - React-Core + - react-native-camera/RCT (= 3.44.1) + - react-native-camera/RN (= 3.44.1) + - react-native-camera/RCT (3.44.1): + - React-Core + - react-native-camera/RN (3.44.1): + - React-Core - react-native-cameraroll (4.0.4): - React-Core - react-native-contacts (6.0.5): @@ -534,6 +542,7 @@ DEPENDENCIES: - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) - "react-native-blur (from `../node_modules/@react-native-community/blur`)" + - react-native-camera (from `../node_modules/react-native-camera`) - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)" - react-native-contacts (from `../node_modules/react-native-contacts`) - react-native-date-picker (from `../node_modules/react-native-date-picker`) @@ -638,6 +647,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/jsinspector" react-native-blur: :path: "../node_modules/@react-native-community/blur" + react-native-camera: + :path: "../node_modules/react-native-camera" react-native-cameraroll: :path: "../node_modules/@react-native-community/cameraroll" react-native-contacts: @@ -758,6 +769,7 @@ SPEC CHECKSUMS: React-jsiexecutor: b56c03e61c0dd5f5801255f2160a815f4a53d451 React-jsinspector: 8e68ffbfe23880d3ee9bafa8be2777f60b25cbe2 react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c + react-native-camera: 7bf59f2728ffb019fa25e60a225d2c57e1a8f0f6 react-native-cameraroll: 88f4e62d9ecd0e1f253abe4f685474f2ea14bfa2 react-native-contacts: 931baebf460125c5a7bbce1c4521a96c69795123 react-native-date-picker: 96a07ca27a6225da8a3935324d85046028456b0f diff --git a/package.json b/package.json index 09ed6fc5..63203775 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react-moment": "^1.0.0", "react-native": "0.63.3", "react-native-animatable": "^1.3.3", + "react-native-camera": "^3.44.1", "react-native-confirmation-code-field": "^6.5.0", "react-native-contacts": "^6.0.4", "react-native-controlled-mentions": "^2.2.5", diff --git a/src/assets/icons/camera/flash-off.svg b/src/assets/icons/camera/flash-off.svg new file mode 100644 index 00000000..fb04efd2 --- /dev/null +++ b/src/assets/icons/camera/flash-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/camera/flash-on.svg b/src/assets/icons/camera/flash-on.svg new file mode 100644 index 00000000..b4608b75 --- /dev/null +++ b/src/assets/icons/camera/flash-on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/camera/flip.svg b/src/assets/icons/camera/flip.svg new file mode 100644 index 00000000..e2ef1a0c --- /dev/null +++ b/src/assets/icons/camera/flip.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/camera/save.svg b/src/assets/icons/camera/save.svg new file mode 100644 index 00000000..6a28fb55 --- /dev/null +++ b/src/assets/icons/camera/save.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx new file mode 100644 index 00000000..06a4e44e --- /dev/null +++ b/src/components/camera/FlashButton.tsx @@ -0,0 +1,42 @@ +import React, {Dispatch, SetStateAction} from 'react'; +import {Text, TouchableOpacity} from 'react-native'; +import {FlashMode} from 'react-native-camera'; +import FlashOffIcon from '../../assets/icons/camera/flash-off.svg'; +import FlashOnIcon from '../../assets/icons/camera/flash-on.svg'; +import {styles} from './styles'; + +interface FlashButtonProps { + flashMode: keyof FlashMode; + setFlashMode: Dispatch>; +} + +/* + * Toggles between flash on/off modes + */ +export const FlashButton: React.FC = ({ + flashMode, + setFlashMode, +}) => ( + setFlashMode(flashMode === 'on' ? 'off' : 'on')} + style={styles.flashButtonContainer}> + {flashMode === 'on' ? ( + + ) : ( + + )} + Flash + +); + +export default FlashButton; diff --git a/src/components/camera/FlipButton.tsx b/src/components/camera/FlipButton.tsx new file mode 100644 index 00000000..c6f710a9 --- /dev/null +++ b/src/components/camera/FlipButton.tsx @@ -0,0 +1,29 @@ +import React, {Dispatch, SetStateAction} from 'react'; +import {Text, TouchableOpacity} from 'react-native'; +import {CameraType} from 'react-native-camera'; +import FlipIcon from '../../assets/icons/camera/flip.svg'; +import {styles} from './styles'; + +interface FlipButtonProps { + setCameraType: Dispatch>; + cameraType: keyof CameraType; +} + +/* + * Toggles between back camera and front camera + * Appears only when user has not taken a picture yet + * Once user takes a picture, this button disappears to reveal the save button + */ +export const FlipButton: React.FC = ({ + setCameraType, + cameraType, +}) => ( + setCameraType(cameraType === 'front' ? 'back' : 'front')} + style={styles.saveButton}> + + Flip + +); + +export default FlipButton; diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx new file mode 100644 index 00000000..c49ace7d --- /dev/null +++ b/src/components/camera/GalleryIcon.tsx @@ -0,0 +1,43 @@ +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; +import {Image, Text, TouchableOpacity, View} from 'react-native'; +import {ScreenType} from '../../types'; +import {navigateToImagePicker} from '../../utils/camera'; +import {styles} from './styles'; + +interface GalleryIconProps { + screenType: ScreenType; + title: string; + mostRecentPhotoUri: string; +} + +/* + * Displays the most recent photo in the user's gallery + * On click, navigates to the image picker + */ +export const GalleryIcon: React.FC = ({ + screenType, + title, + mostRecentPhotoUri, +}) => { + const navigation = useNavigation(); + return ( + navigateToImagePicker(navigation, screenType, title)} + style={styles.saveButton}> + {mostRecentPhotoUri !== '' ? ( + + ) : ( + + )} + Gallery + + ); +}; + +export default GalleryIcon; diff --git a/src/components/camera/SaveButton.tsx b/src/components/camera/SaveButton.tsx new file mode 100644 index 00000000..840cc804 --- /dev/null +++ b/src/components/camera/SaveButton.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import {Text, TouchableOpacity} from 'react-native'; +import SaveIcon from '../../assets/icons/camera/save.svg'; +import {downloadImage} from '../../utils/camera'; +import {styles} from './styles'; + +interface SaveButtonProps { + capturedImageURI: string; +} + +/* + * Appears when a picture has been taken, + * On click, saves the captured image to "Recents" album on device gallery + */ +export const SaveButton: React.FC = ({capturedImageURI}) => ( + { + downloadImage(capturedImageURI); + }} + style={styles.saveButton}> + + Save + +); + +export default SaveButton; diff --git a/src/components/camera/index.ts b/src/components/camera/index.ts new file mode 100644 index 00000000..d33d1e4a --- /dev/null +++ b/src/components/camera/index.ts @@ -0,0 +1,4 @@ +export {default as GalleryIcon} from './GalleryIcon'; +export {default as FlashButton} from './FlashButton'; +export {default as FlipButton} from './FlipButton'; +export {default as SaveButton} from './SaveButton'; diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx new file mode 100644 index 00000000..33b47cc4 --- /dev/null +++ b/src/components/camera/styles.tsx @@ -0,0 +1,53 @@ +import {StyleSheet} from 'react-native'; +import {normalize, SCREEN_WIDTH} from '../../utils/layouts'; + +export const styles = StyleSheet.create({ + saveButton: { + zIndex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: (SCREEN_WIDTH - 100) / 2, + }, + saveButtonLabel: { + color: 'white', + fontWeight: '700', + fontSize: normalize(12), + lineHeight: normalize(14.32), + marginTop: 5, + zIndex: 999, + }, + flashButtonContainer: { + position: 'absolute', + backgroundColor: '#808080', + opacity: 0.25, + zIndex: 1, + top: normalize(50), + right: 0, + marginRight: normalize(18), + height: 86, + width: 49, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + borderRadius: 30, + }, + galleryIcon: { + borderWidth: 2, + borderColor: 'white', + borderRadius: 5, + width: 40, + height: 40, + }, + galleryIconEmpty: { + borderWidth: 2, + borderColor: 'white', + borderRadius: 5, + width: 40, + height: 40, + backgroundColor: 'grey', + }, + flashIcon: { + zIndex: 2, + }, +}); diff --git a/src/components/index.ts b/src/components/index.ts index 47dc583b..c2f50118 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,9 +1,10 @@ +export * from './camera'; +export * from './comments'; export * from './common'; +export * from './messages'; +export * from './moments'; export * from './onboarding'; export * from './profile'; export * from './search'; -export * from './taggs'; -export * from './comments'; -export * from './moments'; export * from './suggestedPeople'; -export * from './messages'; +export * from './taggs'; diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index a43a2830..b080ca4a 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -1,9 +1,8 @@ import {useNavigation} from '@react-navigation/native'; import React from 'react'; -import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; import {Text} from 'react-native-animatable'; import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler'; -import ImagePicker from 'react-native-image-crop-picker'; import LinearGradient from 'react-native-linear-gradient'; import DeleteIcon from '../../assets/icons/delete-logo.svg'; import DownIcon from '../../assets/icons/down_icon.svg'; @@ -11,7 +10,6 @@ import BigPlusIcon from '../../assets/icons/plus-icon-white.svg'; import PlusIcon from '../../assets/icons/plus-icon.svg'; import UpIcon from '../../assets/icons/up_icon.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; -import {ERROR_UPLOAD} from '../../constants/strings'; import {MomentType, ScreenType} from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; import MomentTile from './MomentTile'; @@ -108,6 +106,11 @@ const Moment: React.FC = ({ Alert.alert(ERROR_UPLOAD); } }); + const navigateToCameraScreen = () => { + navigation.navigate('CameraScreen', { + title, + screenType, + }); }; return ( @@ -174,7 +177,7 @@ const Moment: React.FC = ({ navigateToImagePicker()} + onPress={() => navigateToCameraScreen()} color={TAGG_LIGHT_BLUE} style={styles.horizontalMargin} /> @@ -204,7 +207,7 @@ const Moment: React.FC = ({ /> ))} {(images === undefined || images.length === 0) && !userXId && ( - navigateToImagePicker()}> + navigateToCameraScreen()}> diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index c518d75e..21430d7a 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -115,6 +115,10 @@ export type MainStackParams = { screenType: ScreenType; title: string; }; + CameraScreen: { + title: string; + screenType: ScreenType; + }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 9e3747f9..f6adeab1 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -34,6 +34,7 @@ import { SuggestedPeopleWelcomeScreen, TagSelectionScreen, TagFriendsScreen, + CameraScreen, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -334,6 +335,13 @@ const MainStackScreen: React.FC = ({route}) => { gestureEnabled: false, }} /> + ); }; diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx new file mode 100644 index 00000000..c6ed1116 --- /dev/null +++ b/src/screens/moments/CameraScreen.tsx @@ -0,0 +1,215 @@ +import CameraRoll from '@react-native-community/cameraroll'; +import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; +import {RouteProp, useFocusEffect} from '@react-navigation/core'; +import {StackNavigationProp} from '@react-navigation/stack'; +import React, {createRef, useCallback, useEffect, useState} from 'react'; +import {StyleSheet, TouchableOpacity, View} from 'react-native'; +import {CameraType, FlashMode, RNCamera} from 'react-native-camera'; +import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import { + FlashButton, + FlipButton, + GalleryIcon, + SaveButton, + TaggSquareButton, +} from '../../components'; +import {MainStackParams} from '../../routes'; +import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils'; +import {takePicture} from '../../utils/camera'; + +type CameraScreenRouteProps = RouteProp; +export type CameraScreenNavigationProps = StackNavigationProp< + MainStackParams, + 'CameraScreen' +>; +interface CameraScreenProps { + route: CameraScreenRouteProps; + navigation: CameraScreenNavigationProps; +} +const CameraScreen: React.FC = ({route, navigation}) => { + const {title, screenType} = route.params; + const cameraRef = createRef(); + const tabBarHeight = useBottomTabBarHeight(); + const [cameraType, setCameraType] = useState('front'); + const [flashMode, setFlashMode] = useState('off'); + const [capturedImage, setCapturedImage] = useState(''); + const [mostRecentPhoto, setMostRecentPhoto] = useState(''); + const [showSaveButton, setShowSaveButton] = useState(false); + + /* + * Removes bottom navigation bar on current screen and add it back when navigating away + */ + useFocusEffect( + useCallback(() => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: false, + }); + return () => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: true, + }); + }; + }, [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'), + ); + }, [capturedImage]); + + /* + * Appears once a picture has been captured to navigate to the caption screen + */ + const handleNext = () => { + navigation.navigate('CaptionScreen', { + screenType, + title, + image: { + filename: capturedImage, + path: capturedImage, + }, + }); + }; + + /* + * If picture is not taken yet, exists from camera screen to profile view + * If picture is taken, exists from captured image's preview to camera + * */ + const handleClose = () => { + if (showSaveButton) { + cameraRef.current?.resumePreview(); + setShowSaveButton(false); + setCapturedImage(''); + } else { + navigation.goBack(); + } + }; + + return ( + + + + + + + + {showSaveButton ? ( + + ) : ( + + )} + + takePicture(cameraRef, setShowSaveButton, setCapturedImage) + } + style={styles.captureButtonContainer}> + + + + {capturedImage ? ( + + ) : ( + + )} + + + + ); +}; + +const styles = StyleSheet.create({ + camera: { + flex: 1, + justifyContent: 'space-between', + }, + container: { + flex: 1, + flexDirection: 'column', + backgroundColor: 'black', + }, + preview: { + flex: 1, + justifyContent: 'flex-end', + alignItems: '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, + }, + nextButton: { + zIndex: 1, + width: normalize(100), + height: normalize(37), + borderRadius: 10, + }, + nextButtonLabel: { + fontWeight: '700', + fontSize: normalize(15), + lineHeight: normalize(17.8), + letterSpacing: normalize(1.3), + textAlign: 'center', + }, +}); + +export default CameraScreen; diff --git a/src/screens/moments/index.ts b/src/screens/moments/index.ts index aac2ddeb..07d55192 100644 --- a/src/screens/moments/index.ts +++ b/src/screens/moments/index.ts @@ -1,2 +1,3 @@ export {default as TagSelectionScreen} from './TagSelectionScreen'; export {default as TagFriendsScreen} from './TagFriendsScreen'; +export {default as CameraScreen} from './CameraScreen'; diff --git a/src/utils/camera.ts b/src/utils/camera.ts new file mode 100644 index 00000000..73461ad7 --- /dev/null +++ b/src/utils/camera.ts @@ -0,0 +1,65 @@ +import CameraRoll from '@react-native-community/cameraroll'; +import {Dispatch, RefObject, SetStateAction} from 'react'; +import {Alert} from 'react-native'; +import {RNCamera} from 'react-native-camera'; +import ImagePicker from 'react-native-image-crop-picker'; +import {ScreenType} from 'src/types'; +import {ERROR_UPLOAD} from '../constants/strings'; + +/* + * Captures a photo and pauses to shoe the preview of the picture taken + */ +export const takePicture = ( + cameraRef: RefObject, + setShowSaveButton: Dispatch>, + setCapturedImage: Dispatch>, +) => { + if (cameraRef !== null) { + cameraRef.current?.pausePreview(); + const options = { + forceUpOrientation: true, + writeExif: false, + }; + cameraRef.current?.takePictureAsync(options).then((response) => { + setShowSaveButton(true); + setCapturedImage(response.uri); + }); + } +}; + +export const downloadImage = (capturedImageURI: string) => { + CameraRoll.save(capturedImageURI, {album: 'Recents', type: 'photo'}) + .then((_res) => Alert.alert('Saved to device!')) + .catch((_err) => Alert.alert('Failed to save to device!')); +}; + +export const navigateToImagePicker = ( + navigation: any, + screenType: ScreenType, + title: string, +) => { + ImagePicker.openPicker({ + smartAlbums: [ + 'Favorites', + 'RecentlyAdded', + 'SelfPortraits', + 'Screenshots', + 'UserLibrary', + ], + mediaType: 'photo', + }) + .then((picture) => { + if ('path' in picture) { + navigation.navigate('ZoomInCropper', { + screenType, + title, + image: picture, + }); + } + }) + .catch((err) => { + if (err.code && err.code !== 'E_PICKER_CANCELLED') { + Alert.alert(ERROR_UPLOAD); + } + }); +}; diff --git a/yarn.lock b/yarn.lock index 9b425078..716b345a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6427,6 +6427,13 @@ react-native-animatable@^1.3.3: dependencies: prop-types "^15.7.2" +react-native-camera@^3.44.1: + version "3.44.1" + resolved "https://registry.yarnpkg.com/react-native-camera/-/react-native-camera-3.44.1.tgz#60e7d60fe778c1fc59d0579b64c63c3c1a59865a" + integrity sha512-B95RL3laK2v8R7L/37v28MYcEcwsM/mS94h6EZuRMLH5HFolkAwh7zJo+UAn7FG9eFtAdBwIM6s9OqYudTVO4Q== + dependencies: + prop-types "^15.6.2" + react-native-confirmation-code-field@^6.5.0: version "6.7.0" resolved "https://registry.yarnpkg.com/react-native-confirmation-code-field/-/react-native-confirmation-code-field-6.7.0.tgz#81f5e646898addb3243cf89d41d884b0762ae962" -- cgit v1.2.3-70-g09d2