8e854a8bdd
* feat: added new check for isAudio and added the supported mime types * feat: adding the progress and audio on the audio file message * feat: finishing the layout of the audio_file * feat: play and pause audio * feat: update the progress bar when audio is playing * feat: update the timeframe of the audio * feat: update with the new design * feat: adding download and preview * feat: creates a hook for the file download and preview * feat: adding useCallback to make the return stable * fix: iOS issue when playing in loop * feat: adding localization for the error * fix: removing code tha was inserted for debug * feat: add a new line on the en.json * fix: fixing types * feat: adding the onSeek method inside the progress bar * feat: changing progress value to animated value * feat: changing to GestureDetector and making the seek method work * feat: adding a touchable without feedback to prevent the audio to triggering other page * feat: adding the drag on the seek method * feat: making the download button more gray * fix: fix tests * fix: prevent onProgress from clearing the seconds when the audio is paused * feat: clamping the position of the cursor to never be dragged offscreen * feat: enhancing the experience of dragging the cursor on the progress bar * feat: differentiate between the throttles * feat: remvoing the aac audio files support * feat: pausing if the focus has changed * feat: render differently the audio file when in the files list * refactor: optimize audio file component by using useCallback for event handlers * refactor: extract stopPropagation function for better readability in AudioFile component * feat: implement custom useThrottled hook and replace lodash throttle in AudioFile component * refactor: update useThrottled hook to accept a generic callback type * fix: loading of uri of audio files after merge * feat: add audioFile style to enhance layout for audio files * fix: tests
89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React, {forwardRef, useImperativeHandle, useRef} from 'react';
|
|
import {StyleSheet, TouchableOpacity, View} from 'react-native';
|
|
|
|
import Document, {type DocumentRef} from '@components/document';
|
|
import ProgressBar from '@components/progress_bar';
|
|
import {useTheme} from '@context/theme';
|
|
import {useDownloadFileAndPreview} from '@hooks/files';
|
|
|
|
import FileIcon from './file_icon';
|
|
|
|
export type DocumentFileRef = {
|
|
handlePreviewPress: () => void;
|
|
}
|
|
|
|
type DocumentFileProps = {
|
|
backgroundColor?: string;
|
|
disabled?: boolean;
|
|
canDownloadFiles: boolean;
|
|
file: FileInfo;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
progress: {
|
|
justifyContent: 'flex-end',
|
|
height: 48,
|
|
left: 2,
|
|
top: 5,
|
|
width: 44,
|
|
},
|
|
});
|
|
|
|
const DocumentFile = forwardRef<DocumentRef, DocumentFileProps>(({backgroundColor, canDownloadFiles, disabled = false, file}: DocumentFileProps, ref) => {
|
|
const theme = useTheme();
|
|
const document = useRef<DocumentRef>(null);
|
|
const {downloading, progress, toggleDownloadAndPreview} = useDownloadFileAndPreview();
|
|
|
|
const handlePreviewPress = async () => {
|
|
document.current?.handlePreviewPress();
|
|
};
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
handlePreviewPress,
|
|
}), []);
|
|
|
|
const icon = (
|
|
<FileIcon
|
|
backgroundColor={backgroundColor}
|
|
file={file}
|
|
/>
|
|
);
|
|
|
|
let fileAttachmentComponent = icon;
|
|
if (downloading) {
|
|
fileAttachmentComponent = (
|
|
<>
|
|
{icon}
|
|
<View style={[StyleSheet.absoluteFill, styles.progress]}>
|
|
<ProgressBar
|
|
progress={progress}
|
|
color={theme.buttonBg}
|
|
/>
|
|
</View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Document
|
|
canDownloadFiles={canDownloadFiles}
|
|
file={file}
|
|
downloadAndPreviewFile={toggleDownloadAndPreview}
|
|
ref={document}
|
|
>
|
|
<TouchableOpacity
|
|
disabled={disabled}
|
|
onPress={handlePreviewPress}
|
|
>
|
|
{fileAttachmentComponent}
|
|
</TouchableOpacity>
|
|
</Document>
|
|
);
|
|
});
|
|
|
|
DocumentFile.displayName = 'DocumentFile';
|
|
|
|
export default DocumentFile;
|