From e8b3187f9e2a1d6ac6b97d8eddbb37d906dac689 Mon Sep 17 00:00:00 2001 From: xmflsct Date: Sun, 20 Nov 2022 17:39:36 +0100 Subject: [PATCH] Try stopping video playback if audio issue could be fiexed --- .../Timeline/Shared/Attachment/Audio.tsx | 34 +++++++++++-------- .../Timeline/Shared/Attachment/Video.tsx | 2 +- src/startup/audio.ts | 6 ++-- 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/Timeline/Shared/Attachment/Audio.tsx b/src/components/Timeline/Shared/Attachment/Audio.tsx index b7d0066b..ad19496e 100644 --- a/src/components/Timeline/Shared/Attachment/Audio.tsx +++ b/src/components/Timeline/Shared/Attachment/Audio.tsx @@ -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 = ({ - total, - index, - sensitiveShown, - audio -}) => { +const AttachmentAudio: React.FC = ({ total, index, sensitiveShown, audio }) => { const { colors } = useTheme() const [audioPlayer, setAudioPlayer] = useState() @@ -51,6 +46,20 @@ const AttachmentAudio: React.FC = ({ 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 ( = ({ size='L' round overlay - {...(audioPlaying - ? { onPress: pauseAudio } - : { onPress: playAudio })} + {...(audioPlaying ? { onPress: pauseAudio } : { onPress: playAudio })} /> )} @@ -128,10 +135,7 @@ const AttachmentAudio: React.FC = ({ /> ) : null} - + ) } diff --git a/src/components/Timeline/Shared/Attachment/Video.tsx b/src/components/Timeline/Shared/Attachment/Video.tsx index 6771438d..4489efb1 100644 --- a/src/components/Timeline/Shared/Attachment/Video.tsx +++ b/src/components/Timeline/Shared/Attachment/Video.tsx @@ -64,7 +64,7 @@ const AttachmentVideo: React.FC = ({ }, []) 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() diff --git a/src/startup/audio.ts b/src/startup/audio.ts index aab659d2..228a7023 100644 --- a/src/startup/audio.ts +++ b/src/startup/audio.ts @@ -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 }) }