Try stopping video playback if audio issue could be fiexed

This commit is contained in:
xmflsct 2022-11-20 17:39:36 +01:00
parent 668a1dc6a6
commit e8b3187f9e
3 changed files with 23 additions and 19 deletions

View File

@ -5,8 +5,8 @@ import { Slider } from '@sharcoux/slider'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { Audio } from 'expo-av'
import React, { useCallback, useState } from 'react'
import { StyleSheet, View } from 'react-native'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { AppState, AppStateStatus, StyleSheet, View } from 'react-native'
import { Blurhash } from 'react-native-blurhash'
import AttachmentAltText from './AltText'
import attachmentAspectRatio from './aspectRatio'
@ -18,12 +18,7 @@ export interface Props {
audio: Mastodon.AttachmentAudio
}
const AttachmentAudio: React.FC<Props> = ({
total,
index,
sensitiveShown,
audio
}) => {
const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio }) => {
const { colors } = useTheme()
const [audioPlayer, setAudioPlayer] = useState<Audio.Sound>()
@ -51,6 +46,20 @@ const AttachmentAudio: React.FC<Props> = ({
setAudioPlaying(false)
}, [audioPlayer])
const appState = useRef(AppState.currentState)
useEffect(() => {
const appState = AppState.addEventListener('change', _handleAppStateChange)
return () => appState.remove()
}, [])
const _handleAppStateChange = async (nextAppState: AppStateStatus) => {
if (appState.current.match(/active/) && nextAppState.match(/inactive/)) {
await audioPlayer?.stopAsync()
}
appState.current = nextAppState
}
return (
<View
accessibilityLabel={audio.description}
@ -90,9 +99,7 @@ const AttachmentAudio: React.FC<Props> = ({
size='L'
round
overlay
{...(audioPlaying
? { onPress: pauseAudio }
: { onPress: playAudio })}
{...(audioPlaying ? { onPress: pauseAudio } : { onPress: playAudio })}
/>
</>
)}
@ -128,10 +135,7 @@ const AttachmentAudio: React.FC<Props> = ({
/>
</View>
) : null}
<AttachmentAltText
sensitiveShown={sensitiveShown}
text={audio.description}
/>
<AttachmentAltText sensitiveShown={sensitiveShown} text={audio.description} />
</View>
)
}

View File

@ -64,7 +64,7 @@ const AttachmentVideo: React.FC<Props> = ({
}, [])
const _handleAppStateChange = async (nextAppState: AppStateStatus) => {
if (appState.current.match(/active/) && nextAppState.match(/inactive/)) {
await videoPlayer.current?.pauseAsync()
await videoPlayer.current?.stopAsync()
} else if (gifv && appState.current.match(/background/) && nextAppState.match(/active/)) {
await videoPlayer.current?.setIsMutedAsync(true)
await videoPlayer.current?.playAsync()

View File

@ -4,9 +4,9 @@ import log from './log'
const audio = () => {
log('log', 'audio', 'setting audio playback default options')
Audio.setAudioModeAsync({
playsInSilentModeIOS: true,
interruptionModeIOS: InterruptionModeIOS.MixWithOthers,
interruptionModeAndroid: InterruptionModeAndroid.DuckOthers
interruptionModeIOS: InterruptionModeIOS.DoNotMix,
interruptionModeAndroid: InterruptionModeAndroid.DuckOthers,
staysActiveInBackground: false
})
}