From ee890e517dd3688a4fd63c64592fdb6ce683d7b4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 22 Jun 2021 18:36:47 -0400 Subject: Improve poc UX --- src/components/moments/Moment.tsx | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 34b2c7ea..9bce6c74 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -5,6 +5,7 @@ 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 {useDispatch, useSelector} from 'react-redux'; import DeleteIcon from '../../assets/icons/delete-logo.svg'; import DownIcon from '../../assets/icons/down_icon.svg'; import BigPlusIcon from '../../assets/icons/plus-icon-white.svg'; @@ -16,6 +17,8 @@ import { handlePresignedURL, handleVideoUpload, } from '../../services/MomentService'; +import {loadUserMoments} from '../../store/actions'; +import {RootState} from '../../store/rootReducer'; import {MomentType, ScreenType} from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; import MomentTile from './MomentTile'; @@ -46,6 +49,10 @@ const Moment: React.FC = ({ externalStyles, }) => { const navigation = useNavigation(); + const dispatch = useDispatch(); + const { + user: {userId}, + } = useSelector((state: RootState) => state.user); /** * This function opens the ImagePicker, only lets you select video files, * formats the file extension, then makes a call to the server to get the presigned URL, @@ -62,21 +69,19 @@ const Moment: React.FC = ({ 'Screenshots', 'UserLibrary', ], - width: 580, - height: 580, - cropping: false, cropperToolbarTitle: 'select a video', mediaType: 'video', }) .then(async (vid) => { if ('path' in vid) { - let fileName = vid.filename || ''; - if (fileName.endsWith('.heic') || fileName.endsWith('.HEIC')) { - fileName = fileName.split('.')[0] + '.jpg'; + if (vid.filename) { + let presignedURL = await handlePresignedURL(vid.filename, title); + console.log('presigned' + JSON.stringify(presignedURL)); + Alert.alert('Uploading...'); + await handleVideoUpload(vid, presignedURL); + Alert.alert('Finish uploading, refreshing moments...'); + dispatch(loadUserMoments(userId)); } - let presignedURL = await handlePresignedURL(fileName, title); - console.log('presigned' + JSON.stringify(presignedURL)); - handleVideoUpload(vid, presignedURL); } }) .catch((err) => { -- cgit v1.2.3-70-g09d2 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 --- ios/Frontend/Info.plist | 4 ++++ package.json | 3 ++- src/components/profile/ProfileBody.tsx | 19 +++++++++++++++++++ 3 files changed, 25 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/ios/Frontend/Info.plist b/ios/Frontend/Info.plist index 0d75ca35..fa67d073 100644 --- a/ios/Frontend/Info.plist +++ b/ios/Frontend/Info.plist @@ -66,6 +66,8 @@ UILaunchStoryboardName LaunchScreen + NSMicrophoneUsageDescription + This lets you share video audio from your camera for a Moment post on your profile! UIRequiredDeviceCapabilities armv7 @@ -74,6 +76,8 @@ UIInterfaceOrientationPortrait + NSCameraUsageDescription + This lets you share photos/videos from your camera for a Moment post on your profile! UIViewControllerBasedStatusBarAppearance 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 +} diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index c0ee508a..34cf1870 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -1,5 +1,7 @@ import React from 'react'; import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {launchCamera} from 'react-native-image-picker'; import {useDispatch, useSelector, useStore} from 'react-redux'; import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants'; import { @@ -80,6 +82,23 @@ const ProfileBody: React.FC = ({ ); }}>{`${website}`} )} + { + launchCamera( + { + mediaType: 'video', + durationLimit: 60, + videoQuality: 'medium', + }, + (response) => { + console.log(response); + const file = response.assets[0].uri; + console.log(file); + }, + ); + }}> + foooo + {userXId && isBlocked && ( -- cgit v1.2.3-70-g09d2 From 0561794c67d827c918029f2e06572fd03b4531fd Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 22 Jun 2021 18:51:57 -0400 Subject: Finish poc for for video streaming --- ios/Podfile.lock | 18 +- src/components/moments/MomentPostContent.tsx | 41 ++- src/screens/chat/ChatListScreen.tsx | 288 +++++++++----------- src/screens/profile/IndividualMoment.tsx | 1 + yarn.lock | 382 +++++++++++++++------------ 5 files changed, 385 insertions(+), 345 deletions(-) (limited to 'src/components') diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 5679c1c7..86339554 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -333,11 +333,13 @@ PODS: - React-Core - react-native-contacts (6.0.5): - React-Core - - react-native-date-picker (3.3.1): + - react-native-date-picker (3.3.2): - React-Core - - react-native-document-picker (5.1.0): + - react-native-document-picker (5.2.0): - React-Core - - react-native-image-resizer (1.4.4): + - react-native-image-picker (4.0.4): + - React-Core + - react-native-image-resizer (1.4.5): - React-Core - react-native-netinfo (6.0.0): - React-Core @@ -532,6 +534,7 @@ DEPENDENCIES: - react-native-contacts (from `../node_modules/react-native-contacts`) - react-native-date-picker (from `../node_modules/react-native-date-picker`) - react-native-document-picker (from `../node_modules/react-native-document-picker`) + - react-native-image-picker (from `../node_modules/react-native-image-picker`) - react-native-image-resizer (from `../node_modules/react-native-image-resizer`) - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)" - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) @@ -637,6 +640,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-date-picker" react-native-document-picker: :path: "../node_modules/react-native-document-picker" + react-native-image-picker: + :path: "../node_modules/react-native-image-picker" react-native-image-resizer: :path: "../node_modules/react-native-image-resizer" react-native-netinfo: @@ -747,9 +752,10 @@ SPEC CHECKSUMS: react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c react-native-cameraroll: 88f4e62d9ecd0e1f253abe4f685474f2ea14bfa2 react-native-contacts: 931baebf460125c5a7bbce1c4521a96c69795123 - react-native-date-picker: 2dfef0fcb6c36d078bc62f5de3ca79eff7f42486 - react-native-document-picker: f2f73db94328c84e22144e369fb4a3ede47bc1f5 - react-native-image-resizer: 13ac4af788f88af36d0353a1324401ebabd04fe4 + react-native-date-picker: 96a07ca27a6225da8a3935324d85046028456b0f + react-native-document-picker: f1b5398801b332c77bc62ae0eae2116f49bdff26 + react-native-image-picker: c07b072faa83f3480b473a15ea3c19cc39b3d6fa + react-native-image-resizer: d9fb629a867335bdc13230ac2a58702bb8c8828f react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79 react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865 diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index aca2999c..27a68e47 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -3,6 +3,7 @@ import React, {useContext, useEffect, useRef, useState} from 'react'; import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; import Animated, {EasingNode} from 'react-native-reanimated'; +import Video from 'react-native-video'; import {useDispatch, useStore} from 'react-redux'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {RootState} from '../../store/rootReducer'; @@ -54,6 +55,12 @@ const MomentPostContent: React.FC = ({ useState(moment.comment_preview); const {keyboardVisible, scrollTo} = useContext(MomentContext); const [hideText, setHideText] = useState(false); + const isVideo = !( + moment.moment_url.endsWith('jpg') || + moment.moment_url.endsWith('JPG') || + moment.moment_url.endsWith('PNG') || + moment.moment_url.endsWith('png') + ); useEffect(() => { setTags(momentTags); @@ -83,12 +90,32 @@ const MomentPostContent: React.FC = ({ setVisible(!visible); setFadeValue(new Animated.Value(0)); }}> - + {isVideo ? ( +