Improve audio player

This commit is contained in:
xmflsct 2023-02-11 23:46:12 +01:00
parent 242c75079a
commit 441090ab28
2 changed files with 17 additions and 16 deletions

View File

@ -6,7 +6,7 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { Audio } from 'expo-av'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { AppState, AppStateStatus, StyleSheet, View } from 'react-native'
import { AppState, AppStateStatus, View } from 'react-native'
import AttachmentAltText from './AltText'
import { aspectRatio } from './dimensions'
@ -63,7 +63,7 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
style={{
flex: 1,
flexDirection: 'row',
backgroundColor: colors.disabled,
backgroundColor: colors.shimmerDefault,
aspectRatio: aspectRatio({ total, index, ...audio.meta?.original })
}}
>
@ -117,7 +117,6 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
alignSelf: 'flex-end',
width: '100%',
height: StyleConstants.Spacing.M + StyleConstants.Spacing.S * 2,
backgroundColor: colors.backgroundOverlayInvert,
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
borderRadius: 100,
opacity: sensitiveShown ? 0.35 : undefined
@ -129,14 +128,14 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
value={audioPosition}
minimumTrackTintColor={colors.secondary}
maximumTrackTintColor={colors.disabled}
// onSlidingStart={() => {
// audioPlayer?.pauseAsync()
// setAudioPlaying(false)
// }}
// onSlidingComplete={value => {
// setAudioPosition(value)
// }}
enabled={false} // Bug in above sliding actions
onSlidingStart={() => {
audioPlayer?.pauseAsync()
setAudioPlaying(false)
}}
onSlidingComplete={value => {
setAudioPosition(value)
}}
enabled={true}
thumbSize={StyleConstants.Spacing.M}
thumbTintColor={colors.primaryOverlay}
/>

View File

@ -10,11 +10,13 @@ export const aspectRatio = ({
height?: number
}): number => {
const defaultCrop =
(height || 1) / (width || 1) > 3 / 2
? 2 / 3
: (width || 1) / (height || 1) > 4
? 4
: (width || 1) / (height || 1)
height && width
? height / width > 3 / 2
? 2 / 3
: width / height > 4
? 4
: width / height
: 16 / 9
const isEven = total % 2 == 0
if (total > 5) {