From f4eeafb44902b0e5caa4cdfcb8077550df3706b5 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Thu, 28 Dec 2023 17:42:38 +0530 Subject: [PATCH 01/31] Update: added 3 new audio recording and playing related packages --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 7bb6f53..f51c474 100644 --- a/package.json +++ b/package.json @@ -36,10 +36,12 @@ "patch-package": "^8.0.0", "react": "18.2.0", "react-native": "0.72.6", + "react-native-audio-recorder-player": "^3.6.5", "react-native-blob-util": "^0.19.2", "react-native-calendars": "^1.1302.0", "react-native-document-picker": "^9.0.1", "react-native-dotenv": "^3.4.9", + "react-native-fs": "^2.20.0", "react-native-gesture-bottom-sheet": "^1.1.0", "react-native-gesture-handler": "^2.14.0", "react-native-gifted-chat": "^2.4.0", @@ -60,6 +62,7 @@ "react-native-select-dropdown": "^3.4.0", "react-native-size-matters": "^0.4.2", "react-native-slider": "^0.11.0", + "react-native-sound": "^0.11.2", "react-native-splash-screen": "^3.3.0", "react-native-svg": "^13.14.0", "react-native-svg-transformer": "^1.1.0", From 5efce1792fd1e17d2bdfd037100be9c669210bf0 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Thu, 28 Dec 2023 17:44:25 +0530 Subject: [PATCH 02/31] Updated the width of the text container --- src/Components/Chat/FileTransfer.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Components/Chat/FileTransfer.jsx b/src/Components/Chat/FileTransfer.jsx index 467d6de..bc61868 100644 --- a/src/Components/Chat/FileTransfer.jsx +++ b/src/Components/Chat/FileTransfer.jsx @@ -57,6 +57,7 @@ const styles = StyleSheet.create({ lineHeight: 20, marginLeft: 5, marginRight: 5, + width: moderateScale(130), }, textType: { color: 'black', From 0b47351d7497c0e70520ed9dd6642efa0d7d4f69 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Thu, 28 Dec 2023 18:03:55 +0530 Subject: [PATCH 03/31] Feat: Voice Message recorder & player in chat bubble: Completed --- src/Containers/Chats/Chat.jsx | 362 +++++++++++++++++++++++++++++----- 1 file changed, 318 insertions(+), 44 deletions(-) diff --git a/src/Containers/Chats/Chat.jsx b/src/Containers/Chats/Chat.jsx index c3616ae..6dbfc88 100644 --- a/src/Containers/Chats/Chat.jsx +++ b/src/Containers/Chats/Chat.jsx @@ -1,26 +1,25 @@ -import { - View, - Text, - StyleSheet, - TouchableOpacity, - Image, - Button, - Platform, -} from 'react-native'; -import React, {useCallback, useEffect, useLayoutEffect, useState} from 'react'; +import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native'; +import React, {useCallback, useEffect, useState} from 'react'; import {colors} from '../../Utils/colors'; import {GiftedChat, Bubble, Send, InputToolbar} from 'react-native-gifted-chat'; import HeaderWithBackaction from '../../Components/Header/HeaderWithBackaction'; -import {user_1, user_2, user_3} from '../../Data/ChatRoom'; import {useRoute} from '@react-navigation/native'; import {Icon} from 'react-native-paper'; import {moderateScale} from 'react-native-size-matters'; -import DocumentPicker from 'react-native-document-picker'; import FileTransfer from '../../Components/Chat/FileTransfer'; import ViewFile from '../../Components/Chat/ViewFile'; import Plus from 'react-native-vector-icons/AntDesign'; import FontAwesome from 'react-native-vector-icons/FontAwesome'; import ChatLogic from '../../Functions/Chat/Chat'; +import Mic from 'react-native-vector-icons/Entypo'; +import {fonts} from '../../Utils/fonts'; +import PlayPause from 'react-native-vector-icons/AntDesign'; +import Delete from 'react-native-vector-icons/MaterialCommunityIcons'; +import Slider from '@react-native-community/slider'; +import TrackPlayer, {useProgress} from 'react-native-track-player'; +import {usePlaybackState} from 'react-native-track-player'; +import _ from 'lodash'; +import Wave from 'react-native-vector-icons/MaterialIcons'; const Chat = () => { const { @@ -37,20 +36,104 @@ const Chat = () => { pickDocument, navigation, currentTime, + setAudioURL, + audioURL, + recordingActive, + setRecordingActive, + time, + setTime, + StartRecording, + StopRecording, + DeleteRecording, + isRecordingPaused, + toggleRecording, + playingAudio, + setPlayingAudio, + Format, } = ChatLogic(); + // voice message player + const {position, duration} = useProgress(0); + + const [currentPositionSec, setCurrentPositionSec] = useState(0); + const [currentDurationSec, setCurrentDurationSec] = useState(null); + const [currentAudioId, setCurrentAudioId] = useState(null); + + const {state} = usePlaybackState(); + + useEffect(() => { + TrackPlayer.setupPlayer(); + }, []); + + useEffect(() => { + // console.log(position, duration, ' ]]]]'); + setCurrentPositionSec(position); + setCurrentDurationSec(duration); + + if (position == duration) { + TrackPlayer.seekTo(0); + TrackPlayer.pause(); + setPlayingAudio(false); + } + }, [position, duration]); + + const playAudio = message => { + TrackPlayer.add({ + id: message._id, + url: message.audio.url, + title: message.text, + }); + TrackPlayer.play(); + setPlayingAudio(true); + setCurrentAudioId(message._id); + }; + + const TogglePlayback = message => { + if (state === 'playing') { + TrackPlayer.pause(); + setPlayingAudio(false); + setCurrentAudioId(null); + } else { + playAudio(message); + } + }; + + const onSliderValueChange = useCallback( + _.debounce(value => { + TrackPlayer.seekTo(value); + }, 300), // Adjust the debounce delay as needed + [], + ); + const route = useRoute(); const renderSend = props => { return ( - - - - - + {!recordingActive && ( + + + + )} + + ); @@ -58,13 +141,16 @@ const Chat = () => { const renderBubble = props => { const {currentMessage} = props; + if (currentMessage.file && currentMessage.file.url) { return ( { ); + } else if (currentMessage.audio && currentMessage.audio.url) { + const audioDurationString = currentMessage.audio.duration || '0:00'; + const [minutes, seconds] = audioDurationString.split(':'); + const audioDuration = parseInt(minutes, 10) * 60 + parseInt(seconds, 10); + // console.log(audioDuration, ' 00'); + return ( + + TogglePlayback(currentMessage)}> + + + + + + {currentAudioId === currentMessage._id && playingAudio + ? Format(position) + : currentMessage.audio.duration} + + + + ); } return ( { const modifiedProps = {...props}; if (props.text.length === 0 && attachments[0] !== undefined) { modifiedProps.text = ' '; + } else if (audioURL !== '') { + modifiedProps.text = ' '; } return ( - + + + + + + ); }; @@ -195,10 +349,39 @@ const Chat = () => { ))} ); - } else { - return null; + } else if (recordingActive) { + return ( + + + + + Recording Voice {' '} {time} + + + {/* toggleRecording()}> + + */} + audioURL !== '' && DeleteRecording()}> + + + + ); } - }, [attachments]); + }, [attachments, time, recordingActive, audioURL]); return ( @@ -223,10 +406,8 @@ const Chat = () => { scrollToBottomComponent={scrollToBottomComponent} renderChatFooter={renderChatFooter} renderInputToolbar={renderInputToolbar} - messagesContainerStyle={{ - paddingBottom: - Platform.OS === 'ios' ? moderateScale(40) : moderateScale(15), - }} + messagesContainerStyle={styles.messagesContainer} + placeholder="Say something..." /> ); @@ -241,8 +422,7 @@ const styles = StyleSheet.create({ shareContainer: { flexDirection: 'row', marginBottom: 12, - marginRight: moderateScale(10), - width: moderateScale(70), + marginRight: moderateScale(-40), height: moderateScale(40), justifyContent: 'space-between', }, @@ -317,6 +497,13 @@ const styles = StyleSheet.create({ fileShare: { marginTop: moderateScale(16), + marginRight: moderateScale(10), + borderWidth: 1, + borderColor: colors.TRANSPARENT, + width: moderateScale(40), + height: moderateScale(30), + // justifyContent: 'center', + // alignItems: 'center', }, timeText: { @@ -329,15 +516,102 @@ const styles = StyleSheet.create({ input: { borderRadius: moderateScale(30), backgroundColor: colors.GRAY10, - marginBottom: moderateScale(10), borderTopWidth: 0, marginHorizontal: moderateScale(10), - marginRight: moderateScale(4), + marginRight: moderateScale(60), alignItems: 'center', + marginBottom: moderateScale(5), + width: moderateScale(280), }, messagesContainer: { paddingBottom: moderateScale(15), + fontFamily: fonts.MEDIUM, + }, + + microphone: { + borderWidth: 1, + justifyContent: 'center', + alignSelf: 'flex-end', + alignItems: 'center', + marginRight: moderateScale(10), + marginTop: moderateScale(-5), + backgroundColor: colors.APP_PRIMARY, + width: moderateScale(50), + height: moderateScale(52), + borderRadius: moderateScale(30), + bottom: moderateScale(5), + }, + + inputWrapper: { + alignItems: 'center', + justifyContent: 'space-between', + bottom: moderateScale(10), + }, + + recordContainer: { + width: moderateScale(300), + height: moderateScale(50), + borderRadius: moderateScale(30), + backgroundColor: colors.GRAY10, + alignSelf: 'flex-start', + justifyContent: 'center', + marginHorizontal: moderateScale(10), + bottom: moderateScale(15), + paddingHorizontal: moderateScale(15), + }, + + audioFooter: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + elevation: 2, + borderBottomLeftRadius: moderateScale(10), + borderBottomRightRadius: moderateScale(10), + borderTopLeftRadius: 10, + borderTopRightRadius: 10, + borderWidth: 1, + borderColor: 'rgba(255, 255, 255, 0.18)', + height: moderateScale(60), + marginVertical: moderateScale(10), + marginHorizontal: moderateScale(10), + paddingTop: moderateScale(5), + paddingHorizontal: moderateScale(10), + }, + + recorderText: { + fontFamily: fonts.BOLD, + fontSize: moderateScale(14), + marginHorizontal: moderateScale(10), + }, + + audioInnerContainer: { + flexDirection: 'row', + alignItems: 'center', + }, + + audioBubble: { + flexDirection: 'row', + padding: moderateScale(10), + justifyContent: 'center', + alignItems: 'center', + maxWidth: moderateScale(250), + }, + + audioText: { + fontFamily: fonts.BOLD, + color: colors.WHITE, + paddingHorizontal: moderateScale(10), + }, + + sliderContainer: { + paddingHorizontal: moderateScale(5), + marginBottom: moderateScale(10), + }, + + PlayPauseButton: { + paddingTop: moderateScale(1), + paddingHorizontal: moderateScale(1), }, }); From 8af639d6d3cbb3797cdec278686fca6049ec9f97 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Thu, 28 Dec 2023 18:08:43 +0530 Subject: [PATCH 04/31] Feat: Voice message recorder and player methods: Completed --- src/Functions/Chat/Chat.js | 222 ++++++++++++++++++++++++++++++++++++- 1 file changed, 219 insertions(+), 3 deletions(-) diff --git a/src/Functions/Chat/Chat.js b/src/Functions/Chat/Chat.js index 3c44768..3731437 100644 --- a/src/Functions/Chat/Chat.js +++ b/src/Functions/Chat/Chat.js @@ -1,12 +1,30 @@ -import {useCallback, useState} from 'react'; +import {useCallback, useEffect, useRef, useState} from 'react'; import DocumentPicker from 'react-native-document-picker'; import {GiftedChat, InputToolbar} from 'react-native-gifted-chat'; +import AudioRecorderPlayer, { + AVEncoderAudioQualityIOSType, + AVEncodingOption, + AudioEncoderAndroidType, + AudioSourceAndroidType, + OutputFormatAndroidType, +} from 'react-native-audio-recorder-player'; +import {Dimensions, PanResponder, PermissionsAndroid} from 'react-native'; +import TrackPlayer, { + useProgress, + usePlaybackState, +} from 'react-native-track-player'; +import _ from 'lodash'; const ChatLogic = navigation => { const [messages, setMessages] = useState([]); const [attachments, setAttachments] = useState([]); const [fileVisible, setFileVisible] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); + const [audioURL, setAudioURL] = useState(''); + const [recordingActive, setRecordingActive] = useState(false); + const [time, setTime] = useState(null); + const [isRecordingPaused, setIsRecordingPaused] = useState(false); + const [playingAudio, setPlayingAudio] = useState(false); // current time retrieving const currentTime = new Date().toLocaleTimeString('en-US', { @@ -24,8 +42,9 @@ const ChatLogic = navigation => { }, []); const onSend = useCallback( - (messages = []) => { + async (messages = []) => { const [messageToSend] = messages; + // console.log(messages[0], ' TYU'); if (attachments.length > 0) { const newMessages = attachments.map((attachment, index) => ({ _id: messageToSend._id + index + 1, @@ -47,6 +66,39 @@ const ChatLogic = navigation => { // Clear selected files after sending setAttachments([]); + // console.log(messages, ' MESS'); + } else if (audioURL !== '') { + try { + // Stop recording + await StopRecording(); + + // Create a new audio message + const newMessage = { + _id: messageToSend._id, + text: messages[0].text, + createdAt: new Date(), + user: { + _id: 2, + avatar: '', + }, + audio: { + url: audioURL, + duration: time, + }, + }; + + // Update messages state + setMessages(previousMessages => + GiftedChat.append(previousMessages, newMessage), + ); + + // Clear recording states + setTime(''); + setRecordingActive(false); + setAudioURL(''); + } catch (error) { + console.error('Error while stopping recording:', error); + } } else { // Send regular text message setMessages(previousMessages => @@ -54,7 +106,7 @@ const ChatLogic = navigation => { ); } }, - [attachments], + [attachments, audioURL, time], ); const pickDocument = async () => { @@ -102,6 +154,156 @@ const ChatLogic = navigation => { return {modifiedProps}; }; + // voice message + const [recordSecs, setRecordSecs] = useState(0); + const [recordTime, setRecordTime] = useState('00:00:00'); + const [currentPositionSec, setCurrentPositionSec] = useState(0); + const [currentDurationSec, setCurrentDurationSec] = useState(0); + const [playTime, setPlayTime] = useState('00:00:00'); + const [duration, setDuration] = useState('00:00:00'); + + const intervalIdRef = useRef(null); + + const path = Platform.select({ + ios: undefined, + android: undefined, + }); + + const audioRecorderPlayer = useRef(new AudioRecorderPlayer()); + + useEffect(() => { + const initAudioRecorder = async () => { + try { + await audioRecorderPlayer.current.setSubscriptionDuration(0.1); // optional. Default is 0.5 + } catch (error) { + console.error('Error initializing AudioRecorderPlayer:', error); + } + }; + + initAudioRecorder(); + }, []); + + let startTime = null; + let intervalId = null; + let updateInterval = 100; + + const StartTimer = () => { + // Clear the interval if it's already running + clearInterval(intervalIdRef.current); + + startTime = Date.now(); + intervalIdRef.current = setInterval(() => { + const elapsedTimeInSeconds = (Date.now() - startTime) / 1000; + const minutes = Math.floor(elapsedTimeInSeconds / 60); + const seconds = Math.floor(elapsedTimeInSeconds % 60); + const formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`; + setTime(formattedTime); + }, updateInterval); + }; + + const StopTimer = () => { + console.log(' Stopped'); + clearInterval(intervalIdRef.current); + setTime(''); + }; + + const StartRecording = async () => { + if (Platform.OS === 'android') { + try { + const grants = await PermissionsAndroid.requestMultiple([ + PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, + PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, + PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, + ]); + + console.log('write external storage', grants); + + if ( + grants['android.permission.WRITE_EXTERNAL_STORAGE'] === + PermissionsAndroid.RESULTS.GRANTED && + grants['android.permission.READ_EXTERNAL_STORAGE'] === + PermissionsAndroid.RESULTS.GRANTED && + grants['android.permission.RECORD_AUDIO'] === + PermissionsAndroid.RESULTS.GRANTED + ) { + console.log('permissions granted'); + } else { + console.log('All required permissions not granted'); + return; + } + } catch (err) { + console.warn(err); + return; + } + } + + const audioSet = { + AudioEncoderAndroid: AudioEncoderAndroidType.AAC, + AudioSourceAndroid: AudioSourceAndroidType.MIC, + AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, + AVNumberOfChannelsKeyIOS: 2, + AVFormatIDKeyIOS: AVEncodingOption.aac, + OutputFormatAndroid: OutputFormatAndroidType.AAC_ADTS, + }; + + console.log('audioSet', audioSet); + + setRecordingActive(true); + StartTimer(); + const uri = await audioRecorderPlayer.current.startRecorder(path, audioSet); + + console.log(`uri: ${uri}`); + setAudioURL(uri); + }; + + const StopRecording = async () => { + if (recordingActive) { + try { + console.log('HH'); + await audioRecorderPlayer.current.stopRecorder(); + // Additional cleanup or operations after stopping the recorder + clearInterval(intervalIdRef.current); + } catch (error) { + console.error('Error stopping recorder:', error); + } + } + }; + + function DeleteRecording() { + StopRecording(); + setRecordingActive(false); + setAudioURL(''); + } + + const toggleRecording = async () => { + try { + if (!recordingActive) { + // Start recording + await StartRecording(); + } else if (isRecordingPaused) { + // Resume recording + await audioRecorderPlayer.current.resumeRecorder(); + setIsRecordingPaused(false); + StartTimer(); + } else { + // Pause recording + StopRecording(); + setIsRecordingPaused(true); + StopTimer(); + } + } catch (error) { + console.error(error); + } + }; + + const Format = seconds => { + let mins = (parseInt(seconds / 60) % 60).toString(); + let secs = Math.trunc(seconds % 60) + .toString() + .padStart(2, '0'); + return `${mins}:${secs}`; + }; + return { messages, setMessages, @@ -118,6 +320,20 @@ const ChatLogic = navigation => { renderInputToolbar, renderInputToolbar, currentTime, + audioURL, + setAudioURL, + recordingActive, + setRecordingActive, + time, + setTime, + StartRecording, + StopRecording, + DeleteRecording, + isRecordingPaused, + toggleRecording, + playingAudio, + setPlayingAudio, + Format, }; }; From f80d865fbaa0f745c92398b2dc8aca9fb838b95f Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Thu, 28 Dec 2023 18:09:51 +0530 Subject: [PATCH 05/31] Updated the slider color with color constants --- src/Containers/VideoPlayer/VideoPlayer.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Containers/VideoPlayer/VideoPlayer.jsx b/src/Containers/VideoPlayer/VideoPlayer.jsx index aa453d1..229438e 100644 --- a/src/Containers/VideoPlayer/VideoPlayer.jsx +++ b/src/Containers/VideoPlayer/VideoPlayer.jsx @@ -171,8 +171,9 @@ const VideoPlayer = () => { value={progress.currentTime} minimumValue={0} maximumValue={progress.seekableDuration} - minimumTrackTintColor="#FFFFFF" - maximumTrackTintColor="#fff" + minimumTrackTintColor={colors.WHITE} + maximumTrackTintColor={colors.WHITE} + thumbTintColor={colors.WHITE} onValueChange={x => { ref.current.seek(x); setProgress({...progress, currentTime: x}); From a0543de1b73d98236340d7753dc84623cd3c74ee Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Thu, 28 Dec 2023 18:10:39 +0530 Subject: [PATCH 06/31] Packages dependencies added --- android/build.gradle | 3 +++ android/settings.gradle | 2 ++ 2 files changed, 5 insertions(+) diff --git a/android/build.gradle b/android/build.gradle index a2a87f4..c3c5d0f 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -6,6 +6,8 @@ buildscript { minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 + + // kotlinVersion = '1.5.0' // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. ndkVersion = "23.1.7779620" @@ -18,5 +20,6 @@ buildscript { classpath("com.android.tools.build:gradle") classpath("com.facebook.react:react-native-gradle-plugin") classpath ('com.google.gms:google-services:4.4.0') + // classpath ("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion") } } diff --git a/android/settings.gradle b/android/settings.gradle index b52bc8b..d571339 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -2,3 +2,5 @@ rootProject.name = 'kit_box' apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app' includeBuild('../node_modules/@react-native/gradle-plugin') +include ':react-native-audio-recorder-player' +project(':react-native-audio-recorder-player').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audio-recorder-player/android') From d3bbae01ff8c2870c8b1be978c11160f62a718e2 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 29 Dec 2023 13:22:40 +0530 Subject: [PATCH 07/31] Updated header color and profile pic render --- src/Components/Header/HeaderWithBackaction.jsx | 10 +++++++--- src/Components/Header/HeaderWithSearch.jsx | 1 - 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Components/Header/HeaderWithBackaction.jsx b/src/Components/Header/HeaderWithBackaction.jsx index 708c40b..21695b0 100644 --- a/src/Components/Header/HeaderWithBackaction.jsx +++ b/src/Components/Header/HeaderWithBackaction.jsx @@ -9,7 +9,7 @@ import MenuPopup from '../Menu/Menu'; import {useNavigation} from '@react-navigation/native'; import Icon from 'react-native-vector-icons/Feather'; -const HeaderWithBackaction = ({title, openMenu, isChat, profile}) => { +const HeaderWithBackaction = ({title, openMenu, isChat, profile_pic}) => { const navigation = useNavigation(); const _goBack = () => navigation.navigate('ChatList'); @@ -18,6 +18,8 @@ const HeaderWithBackaction = ({title, openMenu, isChat, profile}) => { const _handleMore = () => openMenu(); + console.log(profile_pic, ' pp'); + return ( { size={20} onPress={() => navigation.goBack()} /> - {isChat && } + {isChat && } Date: Fri, 29 Dec 2023 13:23:22 +0530 Subject: [PATCH 08/31] Separated the logic and UI --- src/Containers/Chats/Chat.jsx | 67 +++++------------------------------ src/Functions/Chat/Chat.js | 49 ++++++++++++++++++++++--- 2 files changed, 53 insertions(+), 63 deletions(-) diff --git a/src/Containers/Chats/Chat.jsx b/src/Containers/Chats/Chat.jsx index 6dbfc88..836b407 100644 --- a/src/Containers/Chats/Chat.jsx +++ b/src/Containers/Chats/Chat.jsx @@ -21,55 +21,35 @@ import {usePlaybackState} from 'react-native-track-player'; import _ from 'lodash'; import Wave from 'react-native-vector-icons/MaterialIcons'; -const Chat = () => { +const Chat = data => { const { messages, - setMessages, attachments, setAttachments, fileVisible, setFileVisible, - isMenuOpen, openMenu, closeMenu, onSend, pickDocument, navigation, currentTime, - setAudioURL, audioURL, recordingActive, - setRecordingActive, time, - setTime, StartRecording, - StopRecording, DeleteRecording, - isRecordingPaused, - toggleRecording, playingAudio, setPlayingAudio, Format, + position, + duration, + currentAudioId, + TogglePlayback, + onSliderValueChange, } = ChatLogic(); - // voice message player - const {position, duration} = useProgress(0); - - const [currentPositionSec, setCurrentPositionSec] = useState(0); - const [currentDurationSec, setCurrentDurationSec] = useState(null); - const [currentAudioId, setCurrentAudioId] = useState(null); - - const {state} = usePlaybackState(); - - useEffect(() => { - TrackPlayer.setupPlayer(); - }, []); - useEffect(() => { - // console.log(position, duration, ' ]]]]'); - setCurrentPositionSec(position); - setCurrentDurationSec(duration); - if (position == duration) { TrackPlayer.seekTo(0); TrackPlayer.pause(); @@ -77,34 +57,6 @@ const Chat = () => { } }, [position, duration]); - const playAudio = message => { - TrackPlayer.add({ - id: message._id, - url: message.audio.url, - title: message.text, - }); - TrackPlayer.play(); - setPlayingAudio(true); - setCurrentAudioId(message._id); - }; - - const TogglePlayback = message => { - if (state === 'playing') { - TrackPlayer.pause(); - setPlayingAudio(false); - setCurrentAudioId(null); - } else { - playAudio(message); - } - }; - - const onSliderValueChange = useCallback( - _.debounce(value => { - TrackPlayer.seekTo(value); - }, 300), // Adjust the debounce delay as needed - [], - ); - const route = useRoute(); const renderSend = props => { @@ -392,6 +344,7 @@ const Chat = () => { openMenu={openMenu} closeMenu={closeMenu} isChat={true} + profile_pic={route.params?.Item.profile_pic} /> { }; // voice message - const [recordSecs, setRecordSecs] = useState(0); - const [recordTime, setRecordTime] = useState('00:00:00'); const [currentPositionSec, setCurrentPositionSec] = useState(0); const [currentDurationSec, setCurrentDurationSec] = useState(0); - const [playTime, setPlayTime] = useState('00:00:00'); - const [duration, setDuration] = useState('00:00:00'); + const [currentAudioId, setCurrentAudioId] = useState(null); + + const {position, duration} = useProgress(0); + const {state} = usePlaybackState(); const intervalIdRef = useRef(null); @@ -184,7 +184,6 @@ const ChatLogic = navigation => { }, []); let startTime = null; - let intervalId = null; let updateInterval = 100; const StartTimer = () => { @@ -304,6 +303,34 @@ const ChatLogic = navigation => { return `${mins}:${secs}`; }; + const playAudio = message => { + TrackPlayer.add({ + id: message._id, + url: message.audio.url, + title: message.text, + }); + TrackPlayer.play(); + setPlayingAudio(true); + setCurrentAudioId(message._id); + }; + + const TogglePlayback = message => { + if (state === 'playing') { + TrackPlayer.pause(); + setPlayingAudio(false); + setCurrentAudioId(null); + } else { + playAudio(message); + } + }; + + const onSliderValueChange = useCallback( + _.debounce(value => { + TrackPlayer.seekTo(value); + }, 300), // Adjust the debounce delay as needed + [], + ); + return { messages, setMessages, @@ -334,6 +361,18 @@ const ChatLogic = navigation => { playingAudio, setPlayingAudio, Format, + position, + duration, + state, + currentAudioId, + setCurrentAudioId, + currentDurationSec, + setCurrentDurationSec, + currentPositionSec, + setCurrentPositionSec, + playAudio, + TogglePlayback, + onSliderValueChange, }; }; From 12b740ea3e46242ac977eee5f598c87649aa2de8 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 29 Dec 2023 13:23:46 +0530 Subject: [PATCH 09/31] Initilazed the track player in chat list --- src/Containers/Chats/ChatList.jsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/Containers/Chats/ChatList.jsx b/src/Containers/Chats/ChatList.jsx index 1676641..d6d10d2 100644 --- a/src/Containers/Chats/ChatList.jsx +++ b/src/Containers/Chats/ChatList.jsx @@ -1,5 +1,5 @@ import {View, FlatList, StyleSheet} from 'react-native'; -import React from 'react'; +import React, {useEffect} from 'react'; import {colors} from '../../Utils/colors'; import List from '../../Components/Chat/List'; import HeaderWithSearch from '../../Components/Header/HeaderWithSearch'; @@ -8,6 +8,7 @@ import Cancel from 'react-native-vector-icons/MaterialIcons'; import {moderateScale} from 'react-native-size-matters'; import ChatListLogic from '../../Functions/Chat/ChatList'; import {chatList} from '../../Data/ChatList'; +import TrackPlayer from 'react-native-track-player'; const ChatList = () => { const { @@ -23,6 +24,14 @@ const ChatList = () => { navigation, } = ChatListLogic(); + useEffect(() => { + const setupPlayer = async () => { + await TrackPlayer.setupPlayer(); + console.log('Player is initialized'); + }; + setupPlayer(); + }, []); + return ( Date: Wed, 3 Jan 2024 17:44:30 +0530 Subject: [PATCH 10/31] Feat: Updated the render bubble component and implemented video message bubble --- src/Containers/Chats/Chat.jsx | 173 ++++++++++++++++++++++++++++++++-- 1 file changed, 166 insertions(+), 7 deletions(-) diff --git a/src/Containers/Chats/Chat.jsx b/src/Containers/Chats/Chat.jsx index 836b407..cbcca9a 100644 --- a/src/Containers/Chats/Chat.jsx +++ b/src/Containers/Chats/Chat.jsx @@ -16,12 +16,12 @@ import {fonts} from '../../Utils/fonts'; import PlayPause from 'react-native-vector-icons/AntDesign'; import Delete from 'react-native-vector-icons/MaterialCommunityIcons'; import Slider from '@react-native-community/slider'; -import TrackPlayer, {useProgress} from 'react-native-track-player'; -import {usePlaybackState} from 'react-native-track-player'; +import TrackPlayer from 'react-native-track-player'; import _ from 'lodash'; import Wave from 'react-native-vector-icons/MaterialIcons'; +import Share from 'react-native-share'; -const Chat = data => { +const Chat = () => { const { messages, attachments, @@ -93,7 +93,7 @@ const Chat = data => { const renderBubble = props => { const {currentMessage} = props; - + console.log(currentMessage.image, 'ff'); if (currentMessage.file && currentMessage.file.url) { return ( { }} onPress={() => setFileVisible(true)}> setFileVisible(false)} /> @@ -140,7 +140,7 @@ const Chat = data => { const audioDurationString = currentMessage.audio.duration || '0:00'; const [minutes, seconds] = audioDurationString.split(':'); const audioDuration = parseInt(minutes, 10) * 60 + parseInt(seconds, 10); - // console.log(audioDuration, ' 00'); + return ( { : currentMessage.audio.duration} + + + {currentMessage.text} + + + {currentTime} + + + + ); + } else if (currentMessage.image && currentMessage.image !== '') { + return ( + + + setFileVisible(true)}> + {/* {console.log(currentMessage.image, ' 1')} */} + setFileVisible(false)} + isImage={true} + /> + {/* {console.log(currentMessage.image, ' 2')} */} + + + + + {currentMessage.text} + + + {currentTime} + + + + + ); + } else if (currentMessage.video && currentMessage.video.url !== '') { + const handleVideoClick = async () => { + try { + const options = { + dialogTitle: 'Choose a video player', + }; + await Share.open( + {url: currentMessage.video.url, failOnCancel: false}, + options, + ); + } catch (error) { + console.error('Error sharing video:', error); + } + }; + + // console.log(currentMessage.video.url, ' video'); + return ( + + + + + + + + {currentMessage.text} + + + {currentTime} + + + ); } + return ( { isFooter={true} /> )} + {attachment.type === 'video' && ( + + + setImagePath('')} + style={styles.buttonFooterChat}> + X + + + )} { const updatedAttachments = [...attachments]; @@ -543,7 +692,7 @@ const styles = StyleSheet.create({ audioBubble: { flexDirection: 'row', - padding: moderateScale(10), + padding: moderateScale(5), justifyContent: 'center', alignItems: 'center', maxWidth: moderateScale(250), @@ -564,6 +713,16 @@ const styles = StyleSheet.create({ paddingTop: moderateScale(1), paddingHorizontal: moderateScale(1), }, + + renderImage: { + borderRadius: moderateScale(10), + }, + + timeContainer: { + marginTop: moderateScale(10), + marginBottom: moderateScale(-5), + marginRight: moderateScale(-5), + }, }); export default Chat; From 132d55cc6ce47d35536a528f4511ed6f02e4e02b Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Wed, 3 Jan 2024 17:45:47 +0530 Subject: [PATCH 11/31] Removed unused imports --- src/Containers/Chats/ChatList.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Containers/Chats/ChatList.jsx b/src/Containers/Chats/ChatList.jsx index d6d10d2..2ecd539 100644 --- a/src/Containers/Chats/ChatList.jsx +++ b/src/Containers/Chats/ChatList.jsx @@ -7,7 +7,6 @@ import {Searchbar} from 'react-native-paper'; import Cancel from 'react-native-vector-icons/MaterialIcons'; import {moderateScale} from 'react-native-size-matters'; import ChatListLogic from '../../Functions/Chat/ChatList'; -import {chatList} from '../../Data/ChatList'; import TrackPlayer from 'react-native-track-player'; const ChatList = () => { From 0a025da8569db2e19daf477c545fa8ecfeceda41 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Wed, 3 Jan 2024 17:46:15 +0530 Subject: [PATCH 12/31] Added mew video.png image to assets --- src/Assets/images/video.png | Bin 0 -> 2441 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/Assets/images/video.png diff --git a/src/Assets/images/video.png b/src/Assets/images/video.png new file mode 100644 index 0000000000000000000000000000000000000000..a90e2b57fae1ea0f4163acd9f97c294b16c3d60b GIT binary patch literal 2441 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 Hu0mjf;c&gV literal 0 HcmV?d00001 From 85f4ee9da87d082a1e72f30063a22d7a8ece6618 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Wed, 3 Jan 2024 17:46:49 +0530 Subject: [PATCH 13/31] Updated the video type file images --- src/Components/Chat/FileTransfer.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Chat/FileTransfer.jsx b/src/Components/Chat/FileTransfer.jsx index bc61868..b2cb8f4 100644 --- a/src/Components/Chat/FileTransfer.jsx +++ b/src/Components/Chat/FileTransfer.jsx @@ -25,7 +25,7 @@ const FileTransfer = props => { source={ fileType === 'pdf' ? require('../../Assets/images/pdf.png') - : require('../../Assets/images/png.png') + : require('../../Assets/images/video.png') } style={{height: 60, width: 60}} /> @@ -57,7 +57,7 @@ const styles = StyleSheet.create({ lineHeight: 20, marginLeft: 5, marginRight: 5, - width: moderateScale(130), + maxWidth: moderateScale(175), }, textType: { color: 'black', From 938334a3f5f98d570f5067051cd19a21ef0d8a4b Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Wed, 3 Jan 2024 17:47:20 +0530 Subject: [PATCH 14/31] Feat: Updated the conditional render methdology --- src/Components/Chat/ViewFile.jsx | 37 ++++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/src/Components/Chat/ViewFile.jsx b/src/Components/Chat/ViewFile.jsx index f91e891..cfdc59b 100644 --- a/src/Components/Chat/ViewFile.jsx +++ b/src/Components/Chat/ViewFile.jsx @@ -2,29 +2,39 @@ import React, {useState} from 'react'; import {Modal, Portal, Text, TouchableRipple, Icon} from 'react-native-paper'; import {moderateScale} from 'react-native-size-matters'; import Pdf from 'react-native-pdf'; -import {StyleSheet, View} from 'react-native'; +import {Image, StyleSheet, View} from 'react-native'; import {colors} from '../../Utils/colors'; import {fonts} from '../../Utils/fonts'; -const ViewFile = ({props, visible, onClose}) => { - const filePath = props.currentMessage.file.url; +const ViewFile = ({props, visible, onClose, isImage}) => { + const filePath = props.file.url || props.image; var name = ''; if (filePath !== undefined) { name = filePath.split('/').pop(); } - const [url, setUrl] = useState(props.currentMessage.file.url); + const [url, setUrl] = useState(filePath); return ( {name} - + {!isImage && ( + + )} + {isImage && ( + + )} @@ -67,4 +77,9 @@ const styles = StyleSheet.create({ fontSize: moderateScale(20), backgroundColor: colors.GRAY, }, + + viewImage: { + alignSelf: 'center', + resizeMode: 'contain', + }, }); From cd62cb85fefc655c2413eb9f2a6e052962580358 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Wed, 3 Jan 2024 18:02:37 +0530 Subject: [PATCH 15/31] Feat: Added video url onSend handled --- src/Functions/Chat/Chat.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Functions/Chat/Chat.js b/src/Functions/Chat/Chat.js index 32837bb..051c302 100644 --- a/src/Functions/Chat/Chat.js +++ b/src/Functions/Chat/Chat.js @@ -58,6 +58,9 @@ const ChatLogic = navigation => { file: { url: attachment.type === 'file' ? attachment.path : '', }, + video: { + url: attachment.type === 'video' ? attachment.path : '', + }, })); setMessages(previousMessages => @@ -129,7 +132,9 @@ const ChatLogic = navigation => { type: fileUri.includes('.png') || fileUri.includes('.jpg') ? 'image' - : 'file', + : fileUri.includes('pdf') + ? 'file' + : 'video', }, ]); } From 5469c9672c155ff1649976817b7d3670d65296d6 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Wed, 3 Jan 2024 18:03:03 +0530 Subject: [PATCH 16/31] Added required dependencies --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index f51c474..3583fe4 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "react-native-safe-area-context": "^4.7.4", "react-native-screens": "^3.27.0", "react-native-select-dropdown": "^3.4.0", + "react-native-share": "^10.0.2", "react-native-size-matters": "^0.4.2", "react-native-slider": "^0.11.0", "react-native-sound": "^0.11.2", From 837289ae00d2bf375880bba6376c2c986fd6927c Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Wed, 3 Jan 2024 18:04:24 +0530 Subject: [PATCH 17/31] Required dependencies added --- android/app/build.gradle | 1 + android/app/src/main/AndroidManifest.xml | 6 ++++++ android/app/src/main/java/com/kit_box/MainApplication.java | 2 ++ android/settings.gradle | 2 ++ 4 files changed, 11 insertions(+) diff --git a/android/app/build.gradle b/android/app/build.gradle index 40ff328..bca8bdd 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -108,6 +108,7 @@ dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") implementation(platform("com.google.firebase:firebase-bom:32.6.0")) + implementation project(':react-native-share') debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.squareup.okhttp3', module:'okhttp' diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 09316e0..d926ba5 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -27,6 +27,12 @@ + + + + + + diff --git a/android/app/src/main/java/com/kit_box/MainApplication.java b/android/app/src/main/java/com/kit_box/MainApplication.java index 5c78172..3d4f46c 100644 --- a/android/app/src/main/java/com/kit_box/MainApplication.java +++ b/android/app/src/main/java/com/kit_box/MainApplication.java @@ -9,6 +9,8 @@ import com.facebook.react.defaults.DefaultReactNativeHost; import com.facebook.soloader.SoLoader; import java.util.List; +import cl.json.RNSharePackage; +import cl.json.ShareApplication; public class MainApplication extends Application implements ReactApplication { diff --git a/android/settings.gradle b/android/settings.gradle index d571339..def05af 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -4,3 +4,5 @@ include ':app' includeBuild('../node_modules/@react-native/gradle-plugin') include ':react-native-audio-recorder-player' project(':react-native-audio-recorder-player').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audio-recorder-player/android') +include ':react-native-share' +project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android') \ No newline at end of file From a4c56297441cdd2053f83b77f8467694b24e75b8 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 14:56:29 +0530 Subject: [PATCH 18/31] Feat: Updated the file transfer for pdf and video --- src/Components/Chat/FileTransfer.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Chat/FileTransfer.jsx b/src/Components/Chat/FileTransfer.jsx index b2cb8f4..863945c 100644 --- a/src/Components/Chat/FileTransfer.jsx +++ b/src/Components/Chat/FileTransfer.jsx @@ -23,11 +23,11 @@ const FileTransfer = props => { {props.isFooter ? ( '' From a5f336d9ed0538a92d5acbf5dd13cd3a3fc62092 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 14:58:46 +0530 Subject: [PATCH 19/31] Feat: Added the group member selection and deselection feature implemented --- src/Components/Chat/List.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Components/Chat/List.jsx b/src/Components/Chat/List.jsx index 4ad33bf..a75cac1 100644 --- a/src/Components/Chat/List.jsx +++ b/src/Components/Chat/List.jsx @@ -8,14 +8,19 @@ import Dot from 'react-native-vector-icons/Octicons'; import Check from 'react-native-vector-icons/AntDesign'; import {useNavigation} from '@react-navigation/core'; -const Lists = ({items, groupContact}) => { +const Lists = ({items, groupContact, handleGroupSelection}) => { const Item = items.item; const navigation = useNavigation(); return ( navigation.navigate('ChatRoom', {Item})}> + onLongPress={() => handleGroupSelection(Item)} + onPress={() => + groupContact?.length > 0 + ? handleGroupSelection(Item) + : navigation.navigate('ChatRoom', {Item}) + }> ( <> @@ -112,6 +117,7 @@ export default Lists; const styles = StyleSheet.create({ container: { + flex: 1, backgroundColor: colors.WHITE, marginBottom: moderateScale(-12), }, From ae21b74e6bf9ea3e7a32002b9f2206af19c837f2 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:02:02 +0530 Subject: [PATCH 20/31] Feat: Added a new condition to render the pdf file --- src/Components/Chat/ViewFile.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Components/Chat/ViewFile.jsx b/src/Components/Chat/ViewFile.jsx index cfdc59b..795fdf1 100644 --- a/src/Components/Chat/ViewFile.jsx +++ b/src/Components/Chat/ViewFile.jsx @@ -6,19 +6,19 @@ import {Image, StyleSheet, View} from 'react-native'; import {colors} from '../../Utils/colors'; import {fonts} from '../../Utils/fonts'; -const ViewFile = ({props, visible, onClose, isImage}) => { +const ViewFile = ({props, visible, onClose, isImage, isVideo}) => { const filePath = props.file.url || props.image; var name = ''; if (filePath !== undefined) { name = filePath.split('/').pop(); } - const [url, setUrl] = useState(filePath); + return ( {name} - {!isImage && ( + {!isImage && !isVideo && ( { /> )} - + @@ -55,7 +55,7 @@ const styles = StyleSheet.create({ alignItems: 'center', position: 'absolute', borderColor: 'black', - left: '85%', + left: '88%', top: moderateScale(-30), }, textBtn: { @@ -73,9 +73,9 @@ const styles = StyleSheet.create({ // position: 'absolute', paddingTop: moderateScale(50), paddingLeft: moderateScale(20), - fontFamily: fonts.BOLD, - fontSize: moderateScale(20), - backgroundColor: colors.GRAY, + fontFamily: fonts.MEDIUM, + fontSize: moderateScale(12), + maxWidth: moderateScale(320), }, viewImage: { From 70d6cf6a71528230ea23145d86a450085c2dcffc Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:02:56 +0530 Subject: [PATCH 21/31] Updated the MenuPopup with a check prop to handle conditional menupopup menus --- src/Components/Header/HeaderWithSearch.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Header/HeaderWithSearch.jsx b/src/Components/Header/HeaderWithSearch.jsx index a7db06b..f1df03e 100644 --- a/src/Components/Header/HeaderWithSearch.jsx +++ b/src/Components/Header/HeaderWithSearch.jsx @@ -33,7 +33,7 @@ const HeaderWithSearch = props => { size={25} onPress={_handleMore} /> */} - {/* */} + ); From 3220054511b0335cae618265539596f79a7f145d Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:05:17 +0530 Subject: [PATCH 22/31] Update the menu item with conditional render --- src/Components/Menu/Menu.jsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/Components/Menu/Menu.jsx b/src/Components/Menu/Menu.jsx index ab98b65..b080c42 100644 --- a/src/Components/Menu/Menu.jsx +++ b/src/Components/Menu/Menu.jsx @@ -22,9 +22,19 @@ const MenuPopup = props => { }> - {}} title="Item 1" /> - {}} title="Item 2" /> - + {props.check && ( + <> + { + navigation.navigate('Groups'); + setVisible(false); + }} + title="Create Group" + /> + {}} title="Settings" /> + + + )} navigation.replace('Login')} title="Logout" /> ); From 894180bddfc0126f2e5d18b769da2b1b7cea185a Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:10:49 +0530 Subject: [PATCH 23/31] Updated the modal popup for group name and description --- src/Components/Modal/PopupModal.jsx | 62 ++++++++++++++++++++++++----- 1 file changed, 52 insertions(+), 10 deletions(-) diff --git a/src/Components/Modal/PopupModal.jsx b/src/Components/Modal/PopupModal.jsx index 96af5af..1032196 100644 --- a/src/Components/Modal/PopupModal.jsx +++ b/src/Components/Modal/PopupModal.jsx @@ -14,16 +14,37 @@ import {colors} from '../../Utils/colors'; import InputField from '../TextInput/InputField'; import Cancel from 'react-native-vector-icons/MaterialIcons'; import CustomButton from '../Button/CustomButton'; +import {dateFormatter, groupChatList} from '../../Data/GroupChatList'; +import {user_1} from '../../Data/ChatRoom'; +import {useNavigation} from '@react-navigation/native'; const PopupModal = props => { const [visible, setVisible] = React.useState(false); + const [groupName, setGroupName] = React.useState(''); + const [groupDescription, setGroupDescription] = React.useState(''); + const navigation = useNavigation(); const showModal = () => setVisible(true); const hideModal = () => setVisible(false); - const containerStyle = {backgroundColor: 'white', padding: 20}; + + const handleGroupCreation = item => { + const data = { + user_id: groupChatList.length + 1, + name: item, + last_msg: groupDescription, + modified_date: dateFormatter(user_1[0].createdAt), + profile_pic: + 'data:image/jpeg;base64,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', + msg_read: false, + active: true, + last_seen: '', + }; + groupChatList.unshift(data); + navigation.replace('Groups'); + }; return ( - <> + { Selected Contacts: {props.selectedCount} - + setGroupName(val)} + /> - + setGroupDescription(val)} + /> - + handleGroupCreation(groupName)} + /> - + Create Group - + ); }; const styles = StyleSheet.create({ container: { - width: '90%', - height: '50%', + width: moderateScale(300), + height: moderateScale(350), alignSelf: 'center', backgroundColor: colors.WHITE, padding: moderateScale(20), @@ -71,7 +113,7 @@ const styles = StyleSheet.create({ }, btnText: { - top: moderateScale(20), + top: moderateScale(25), marginRight: moderateScale(10), alignSelf: 'flex-end', }, From 13a315b89963d11fc00f5d2f80957aec781d8b84 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:11:24 +0530 Subject: [PATCH 24/31] Feat: Chat Video Bubble player --- src/Components/Video/ChatVideoPlayer.jsx | 26 ++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/Components/Video/ChatVideoPlayer.jsx diff --git a/src/Components/Video/ChatVideoPlayer.jsx b/src/Components/Video/ChatVideoPlayer.jsx new file mode 100644 index 0000000..74b83e1 --- /dev/null +++ b/src/Components/Video/ChatVideoPlayer.jsx @@ -0,0 +1,26 @@ +import {View, Text, StyleSheet} from 'react-native'; +import React from 'react'; +import VideoPlayer from 'react-native-video-controls'; +import {useNavigation, useRoute} from '@react-navigation/native'; + +const ChatVideoPlayer = () => { + const navigation = useNavigation(); + const route = useRoute(); + + return ( + + navigation.goBack()} + /> + + ); +}; + +export default ChatVideoPlayer; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, +}); From 7bfc25e69608bfe519b7b9f3d0abe288632182b4 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:14:50 +0530 Subject: [PATCH 25/31] Updated the navigation --- src/Containers/Chats/Chat.jsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/Containers/Chats/Chat.jsx b/src/Containers/Chats/Chat.jsx index cbcca9a..9df2fbb 100644 --- a/src/Containers/Chats/Chat.jsx +++ b/src/Containers/Chats/Chat.jsx @@ -3,7 +3,7 @@ import React, {useCallback, useEffect, useState} from 'react'; import {colors} from '../../Utils/colors'; import {GiftedChat, Bubble, Send, InputToolbar} from 'react-native-gifted-chat'; import HeaderWithBackaction from '../../Components/Header/HeaderWithBackaction'; -import {useRoute} from '@react-navigation/native'; +import {useNavigation, useRoute} from '@react-navigation/native'; import {Icon} from 'react-native-paper'; import {moderateScale} from 'react-native-size-matters'; import FileTransfer from '../../Components/Chat/FileTransfer'; @@ -32,7 +32,6 @@ const Chat = () => { closeMenu, onSend, pickDocument, - navigation, currentTime, audioURL, recordingActive, @@ -49,6 +48,8 @@ const Chat = () => { onSliderValueChange, } = ChatLogic(); + const navigation = useNavigation(); + useEffect(() => { if (position == duration) { TrackPlayer.seekTo(0); @@ -93,7 +94,6 @@ const Chat = () => { const renderBubble = props => { const {currentMessage} = props; - console.log(currentMessage.image, 'ff'); if (currentMessage.file && currentMessage.file.url) { return ( { }}> setFileVisible(true)}> - {/* {console.log(currentMessage.image, ' 1')} */} setFileVisible(false)} isImage={true} /> - {/* {console.log(currentMessage.image, ' 2')} */} { } }; - // console.log(currentMessage.video.url, ' video'); return ( { + // onPress={handleVideoClick} + onPress={() => + navigation.navigate('ChatVideoPlayer', { + url: currentMessage.video.url, + }) + }> Date: Fri, 12 Jan 2024 15:16:09 +0530 Subject: [PATCH 26/31] Feat: Passing isChatlist prop to handle conditional header --- src/Containers/Chats/ChatList.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Containers/Chats/ChatList.jsx b/src/Containers/Chats/ChatList.jsx index 2ecd539..6b963cc 100644 --- a/src/Containers/Chats/ChatList.jsx +++ b/src/Containers/Chats/ChatList.jsx @@ -38,6 +38,7 @@ const ChatList = () => { setSearch={setSearch} openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} + isChatList={true} /> {search && ( Date: Fri, 12 Jan 2024 15:24:41 +0530 Subject: [PATCH 27/31] Updated the modal popup with nav prop & removed the touchable in flatlist render and movd that feature to litsItem --- src/Containers/Chats/Contacts.jsx | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/Containers/Chats/Contacts.jsx b/src/Containers/Chats/Contacts.jsx index a4c5dea..ed3f2fe 100644 --- a/src/Containers/Chats/Contacts.jsx +++ b/src/Containers/Chats/Contacts.jsx @@ -24,7 +24,7 @@ const Contacts = () => { selected, setSelected, handleSearch, - HandleGroupSelection, + handleGroupSelection, navigation, } = ContactsLogic(); @@ -47,13 +47,13 @@ const Contacts = () => { onPress={() => { setSearch(false); setSearchQuery(''); - setFilteredContacts(chatList); + // setFilteredContacts(chatList); }} /> )} style={styles.searchBar} /> - + {isGroupSelection && ( @@ -64,18 +64,12 @@ const Contacts = () => { ( - HandleGroupSelection(item.item)} - onPress={() => - groupContact.length > 0 && HandleGroupSelection(item.item) - }> - - + )} /> From 6431d4dffb5bbbb6b478858f575e87636f0688ea Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:26:07 +0530 Subject: [PATCH 28/31] Updated the group list UI and aligned the plus icon --- src/Containers/Chats/GroupList.jsx | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/src/Containers/Chats/GroupList.jsx b/src/Containers/Chats/GroupList.jsx index d006fbc..ea5d324 100644 --- a/src/Containers/Chats/GroupList.jsx +++ b/src/Containers/Chats/GroupList.jsx @@ -42,14 +42,25 @@ const GroupListUI = () => { style={styles.searchBar} /> )} - } - /> + + } + /> + navigation.navigate('Contacts')}> - + ); @@ -78,9 +89,10 @@ const styles = StyleSheet.create({ addIcon: { position: 'absolute', - alignSelf: 'flex-end', - right: moderateScale(20), - top: '85%', + width: moderateScale(55), + left: moderateScale(280), + bottom: moderateScale(50), + borderRadius: moderateScale(40), }, }); From 28295bef503f28562e994d25debe599ef0670cc4 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:27:13 +0530 Subject: [PATCH 29/31] Added a ChatVideoPlayer screen to the stack screen --- src/Navigations/StackNavigator.jsx | 86 ++++++++++++++---------------- 1 file changed, 41 insertions(+), 45 deletions(-) diff --git a/src/Navigations/StackNavigator.jsx b/src/Navigations/StackNavigator.jsx index 1ba2132..ed47419 100644 --- a/src/Navigations/StackNavigator.jsx +++ b/src/Navigations/StackNavigator.jsx @@ -36,7 +36,7 @@ import NewEvent from '../Containers/EventCalendar/NewEvent'; import EventList from '../Containers/EventCalendar/EventList'; import BottomTabNavigator from './Tab/BottomTabNavigator'; import TopTabNavigator from './Tab/TopTabNavigator'; -import DrawerNavigator from './Drawer/DrawerNavigator'; +import ChatVideoPlayer from '../Components/Video/ChatVideoPlayer'; export const initialState = { isAudioEnabled: true, @@ -57,50 +57,46 @@ const StackNavigator = () => { const {drawer} = useAppContext(); return ( - // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; From 2a52cde1451bea0f7419c6c052573ae9f10d3ecb Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:27:48 +0530 Subject: [PATCH 30/31] Added React Native Video Controls package --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 3583fe4..60da166 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "react-native-twilio-video-webrtc": "^3.2.0", "react-native-vector-icons": "^10.0.1", "react-native-video": "^5.2.1", + "react-native-video-controls": "^2.8.1", "react-native-video-player": "^0.14.0", "react-native-vision-camera": "^3.6.10", "rn-bottom-drawer": "^1.4.3", From d93bc5c2a8dcbf3adda9680a0eabe7bef7358534 Mon Sep 17 00:00:00 2001 From: gowrishankar Date: Fri, 12 Jan 2024 15:32:09 +0530 Subject: [PATCH 31/31] Updated the datas --- src/Data/GroupChatList.js | 46 +++++++++++++++++++++++++++++++++- src/Functions/Chat/Contacts.js | 4 +-- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/Data/GroupChatList.js b/src/Data/GroupChatList.js index 8e235ee..5628cbe 100644 --- a/src/Data/GroupChatList.js +++ b/src/Data/GroupChatList.js @@ -1,6 +1,6 @@ import {user_1, user_2, user_3} from './ChatRoom'; -const dateFormatter = timestamp => { +export const dateFormatter = timestamp => { const date = new Date(timestamp); const today = new Date(); // Get the current date. @@ -126,4 +126,48 @@ export const groupChatList = [ active: false, last_seen: '1m', }, + { + user_id: 8, + name: 'GEN AI', + last_msg: "Let's catch up soon!", + modified_date: dateFormatter(user_3[1].createdAt), + profile_pic: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9EWJXakOBhOQvhl8k0GCRsakU9RxV2m-qiQ&usqp=CAU', + msg_read: true, + active: false, + last_seen: '1m', + }, + { + user_id: 8, + name: 'GEN AI', + last_msg: "Let's catch up soon!", + modified_date: dateFormatter(user_3[1].createdAt), + profile_pic: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9EWJXakOBhOQvhl8k0GCRsakU9RxV2m-qiQ&usqp=CAU', + msg_read: true, + active: false, + last_seen: '1m', + }, + { + user_id: 8, + name: 'GEN AI', + last_msg: "Let's catch up soon!", + modified_date: dateFormatter(user_3[1].createdAt), + profile_pic: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9EWJXakOBhOQvhl8k0GCRsakU9RxV2m-qiQ&usqp=CAU', + msg_read: true, + active: false, + last_seen: '1m', + }, + { + user_id: 8, + name: 'GEN AI', + last_msg: "Let's catch up soon!", + modified_date: dateFormatter(user_3[1].createdAt), + profile_pic: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9EWJXakOBhOQvhl8k0GCRsakU9RxV2m-qiQ&usqp=CAU', + msg_read: true, + active: false, + last_seen: '1m', + }, ]; diff --git a/src/Functions/Chat/Contacts.js b/src/Functions/Chat/Contacts.js index cbbc3b2..d428567 100644 --- a/src/Functions/Chat/Contacts.js +++ b/src/Functions/Chat/Contacts.js @@ -19,7 +19,7 @@ const ContactsLogic = () => { setFilteredContacts(filteredMessages); }; - const HandleGroupSelection = item => { + const handleGroupSelection = item => { const updatedGroupContact = new Set(groupContact); if (updatedGroupContact.has(item)) { @@ -45,7 +45,7 @@ const ContactsLogic = () => { selected, setSelected, handleSearch, - HandleGroupSelection, + handleGroupSelection, }; };