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

View File

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