From 2aa24a97024a4d394c8b21dd1488c283c5c9ed04 Mon Sep 17 00:00:00 2001 From: panoramix360 Date: Tue, 19 Mar 2024 20:34:29 -0300 Subject: [PATCH 01/27] feat: added new check for isAudio and added the supported mime types --- app/components/files/audio_file.tsx | 51 +++++++++++++++++++++++++++++ app/components/files/file.tsx | 13 +++++++- app/utils/file/index.ts | 20 +++++++++++ 3 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 app/components/files/audio_file.tsx diff --git a/app/components/files/audio_file.tsx b/app/components/files/audio_file.tsx new file mode 100644 index 00000000000..bfb2b4cd52a --- /dev/null +++ b/app/components/files/audio_file.tsx @@ -0,0 +1,51 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import { + StyleSheet, + View, + Text, +} from 'react-native'; + +import {useTheme} from '@context/theme'; +import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; + +const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ + audioFileWrapper: { + borderRadius: 5, + overflow: 'hidden', + }, + boxPlaceholder: { + paddingBottom: '100%', + }, + failed: { + justifyContent: 'center', + alignItems: 'center', + borderColor: changeOpacity(theme.centerChannelColor, 0.2), + borderRadius: 4, + borderWidth: 1, + }, + playContainer: { + alignItems: 'center', + justifyContent: 'center', + ...StyleSheet.absoluteFillObject, + }, + play: { + backgroundColor: changeOpacity('#000', 0.16), + borderRadius: 20, + }, +})); + +const AudioFile = () => { + const theme = useTheme(); + const style = getStyleSheet(theme); + + return ( + + {'Audio'} + + ); +}; + +export default AudioFile; diff --git a/app/components/files/file.tsx b/app/components/files/file.tsx index bd3ce0d4083..91771aaeb4f 100644 --- a/app/components/files/file.tsx +++ b/app/components/files/file.tsx @@ -8,9 +8,10 @@ import Animated from 'react-native-reanimated'; import TouchableWithFeedback from '@components/touchable_with_feedback'; import {useTheme} from '@context/theme'; import {useGalleryItem} from '@hooks/gallery'; -import {isDocument, isImage, isVideo} from '@utils/file'; +import {isAudio, isDocument, isImage, isVideo} from '@utils/file'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; +import AudioFile from './audio_file'; import DocumentFile from './document_file'; import FileIcon from './file_icon'; import FileInfo from './file_info'; @@ -216,6 +217,16 @@ const File = ({ } ); + } else if (isAudio(file)) { + const renderAudioFile = ( + + + + + + ); + + fileComponent = asCard ? renderCardWithImage(renderAudioFile) : renderAudioFile; } else { const touchableWithPreview = ( = {}; const extensions: Record = {}; @@ -308,6 +313,21 @@ export const isVideo = (file?: FileInfo | FileModel) => { return SUPPORTED_VIDEO_FORMAT!.includes(mime); }; +export const isAudio = (file?: FileInfo | FileModel) => { + if (!file) { + return false; + } + + let mime = 'mime_type' in file ? file.mime_type : file.mimeType; + if (mime && mime.includes(';')) { + mime = mime.split(';')[0]; + } else if (!mime && file?.name) { + mime = lookupMimeType(file.name); + } + + return SUPPORTED_AUDIO_FORMAT!.includes(mime); +}; + export function getFormattedFileSize(bytes: number): string { const fileSizes: Array<[string, number]> = [ ['TB', 1024 * 1024 * 1024 * 1024], From 04651eb8cca55f3f5664bb7f88943aeb648934d1 Mon Sep 17 00:00:00 2001 From: panoramix360 Date: Mon, 8 Apr 2024 12:37:13 -0300 Subject: [PATCH 02/27] feat: adding the progress and audio on the audio file message --- app/components/files/audio_file.tsx | 60 +++++++++++++++++++++-------- package-lock.json | 2 +- 2 files changed, 44 insertions(+), 18 deletions(-) diff --git a/app/components/files/audio_file.tsx b/app/components/files/audio_file.tsx index bfb2b4cd52a..979214fbd4b 100644 --- a/app/components/files/audio_file.tsx +++ b/app/components/files/audio_file.tsx @@ -3,37 +3,48 @@ import React from 'react'; import { - StyleSheet, View, + TouchableOpacity, Text, } from 'react-native'; import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; +import {typography} from '@utils/typography'; + +import CompassIcon from '../compass_icon'; +import ProgressBar from '../progress_bar'; + +const WHITE_ICON = '#FFFFFF'; const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ audioFileWrapper: { - borderRadius: 5, - overflow: 'hidden', - }, - boxPlaceholder: { - paddingBottom: '100%', - }, - failed: { - justifyContent: 'center', - alignItems: 'center', + position: 'relative', borderColor: changeOpacity(theme.centerChannelColor, 0.2), borderRadius: 4, borderWidth: 1, - }, - playContainer: { + padding: 12, + overflow: 'hidden', + flexDirection: 'row', + gap: 16, alignItems: 'center', + }, + playButton: { justifyContent: 'center', - ...StyleSheet.absoluteFillObject, + alignItems: 'center', + backgroundColor: theme.buttonBg, + borderRadius: 100, + width: 42, + height: 42, }, - play: { - backgroundColor: changeOpacity('#000', 0.16), - borderRadius: 20, + progressBar: { + flex: 1, + }, + timerText: { + position: 'absolute', + top: 8, + right: 16, + ...typography('Body', 75, 'SemiBold'), }, })); @@ -43,7 +54,22 @@ const AudioFile = () => { return ( - {'Audio'} + + + + + + + + + {'1:30'} ); }; diff --git a/package-lock.json b/package-lock.json index ebc42417795..40cb6125e4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28275,4 +28275,4 @@ } } } -} +} \ No newline at end of file From 30da7643c866fea86e89798d6498a38eefc71497 Mon Sep 17 00:00:00 2001 From: panoramix360 Date: Mon, 8 Apr 2024 15:36:13 -0300 Subject: [PATCH 03/27] feat: finishing the layout of the audio_file --- app/components/files/audio_file.tsx | 3 +- app/components/progress_bar/index.tsx | 66 +++++++++++++++++++++------ 2 files changed, 55 insertions(+), 14 deletions(-) diff --git a/app/components/files/audio_file.tsx b/app/components/files/audio_file.tsx index 979214fbd4b..c5777840237 100644 --- a/app/components/files/audio_file.tsx +++ b/app/components/files/audio_file.tsx @@ -64,8 +64,9 @@ const AudioFile = () => { diff --git a/app/components/progress_bar/index.tsx b/app/components/progress_bar/index.tsx index 0b677e7cf97..2081300c989 100644 --- a/app/components/progress_bar/index.tsx +++ b/app/components/progress_bar/index.tsx @@ -2,29 +2,43 @@ // See LICENSE.txt for license information. import React, {useCallback, useEffect, useState} from 'react'; -import {type LayoutChangeEvent, StyleSheet, type StyleProp, View, type ViewStyle} from 'react-native'; +import {type LayoutChangeEvent, type StyleProp, View, type ViewStyle, StyleSheet} from 'react-native'; import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; +import {useTheme} from '@context/theme'; +import {changeOpacity} from '@utils/theme'; + type ProgressBarProps = { color: string; progress: number; + withCursor?: boolean; style?: StyleProp; } const styles = StyleSheet.create({ container: { + position: 'relative', + justifyContent: 'center', + }, + progressBarContainer: { height: 4, borderRadius: 2, - backgroundColor: 'rgba(255, 255, 255, 0.16)', overflow: 'hidden', width: '100%', }, progressBar: { flex: 1, }, + cursor: { + position: 'absolute', + borderRadius: 100, + width: 15, + height: 15, + }, }); -const ProgressBar = ({color, progress, style}: ProgressBarProps) => { +const ProgressBar = ({color, progress, withCursor, style}: ProgressBarProps) => { + const theme = useTheme(); const [width, setWidth] = useState(0); const progressValue = useSharedValue(progress); @@ -38,6 +52,13 @@ const ProgressBar = ({color, progress, style}: ProgressBarProps) => { }; }, [width]); + const cursorAnimatedStyle = useAnimatedStyle(() => { + const cursorWidth = 15; + return { + left: withTiming((progressValue.value * width) - (cursorWidth / 2), {duration: 200}), + }; + }, [width]); + useEffect(() => { progressValue.value = progress; }, [progress]); @@ -47,20 +68,39 @@ const ProgressBar = ({color, progress, style}: ProgressBarProps) => { }, []); return ( - - + + > + + + + {withCursor && + } ); }; From 012467ab5aa51728e0465d36e76d33af0a1f76c6 Mon Sep 17 00:00:00 2001 From: panoramix360 Date: Tue, 9 Apr 2024 23:09:22 -0300 Subject: [PATCH 04/27] feat: play and pause audio --- app/components/files/audio_file.tsx | 41 ++++++++++++++++++++++++++--- app/components/files/file.tsx | 8 +++--- app/hooks/files.ts | 5 ++-- 3 files changed, 43 insertions(+), 11 deletions(-) diff --git a/app/components/files/audio_file.tsx b/app/components/files/audio_file.tsx index c5777840237..25b6433dba2 100644 --- a/app/components/files/audio_file.tsx +++ b/app/components/files/audio_file.tsx @@ -1,12 +1,13 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react'; +import React, {useMemo, useRef, useState} from 'react'; import { View, TouchableOpacity, Text, } from 'react-native'; +import Video from 'react-native-video'; import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; @@ -17,6 +18,10 @@ import ProgressBar from '../progress_bar'; const WHITE_ICON = '#FFFFFF'; +type AudioFileProps = { + file: FileInfo; +} + const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ audioFileWrapper: { position: 'relative', @@ -48,20 +53,48 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ }, })); -const AudioFile = () => { +const AudioFile = ({file}: AudioFileProps) => { const theme = useTheme(); const style = getStyleSheet(theme); + const [hasPaused, setHasPaused] = useState(true); + const [hasError, setHasError] = useState(false); + const videoRef = useRef