mirror of
https://github.com/tooot-app/app
synced 2025-01-23 07:12:02 +01:00
parent
cb7762d18c
commit
e2e5e80aaf
@ -28,9 +28,7 @@ const AttachmentAltText: React.FC<Props> = ({ sensitiveShown, text }) => {
|
||||
type='text'
|
||||
content='ALT'
|
||||
fontBold
|
||||
onPress={() => {
|
||||
navigation.navigate('Screen-Actions', { type: 'alt_text', text })
|
||||
}}
|
||||
onPress={() => navigation.navigate('Screen-Actions', { type: 'alt_text', text })}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
|
@ -1,8 +1,8 @@
|
||||
import Button from '@components/Button'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { AppState, AppStateStatus, Pressable, View } from 'react-native'
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { Pressable, View } from 'react-native'
|
||||
import { Blurhash } from 'react-native-blurhash'
|
||||
import attachmentAspectRatio from './aspectRatio'
|
||||
import AttachmentAltText from './AltText'
|
||||
@ -27,46 +27,19 @@ const AttachmentVideo: React.FC<Props> = ({
|
||||
const [videoLoading, setVideoLoading] = useState(false)
|
||||
const [videoLoaded, setVideoLoaded] = useState(false)
|
||||
const [videoResizeMode, setVideoResizeMode] = useState<ResizeMode>(ResizeMode.COVER)
|
||||
const playOnPress = useCallback(async () => {
|
||||
const playOnPress = async () => {
|
||||
setVideoLoading(true)
|
||||
if (!videoLoaded) {
|
||||
await videoPlayer.current?.loadAsync({ uri: video.url })
|
||||
}
|
||||
setVideoLoading(false)
|
||||
|
||||
Platform.OS === 'android' && setVideoResizeMode(ResizeMode.CONTAIN)
|
||||
await videoPlayer.current?.presentFullscreenPlayer()
|
||||
|
||||
videoPlayer.current?.playAsync()
|
||||
setVideoLoading(false)
|
||||
videoPlayer.current?.setOnPlaybackStatusUpdate(props => {
|
||||
if (props.isLoaded) {
|
||||
setVideoLoaded(true)
|
||||
}
|
||||
})
|
||||
}, [videoLoaded])
|
||||
|
||||
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 videoPlayer.current?.stopAsync()
|
||||
} else if (gifv && appState.current.match(/background/) && nextAppState.match(/active/)) {
|
||||
await videoPlayer.current?.setIsMutedAsync(true)
|
||||
await videoPlayer.current?.playAsync()
|
||||
}
|
||||
|
||||
appState.current = nextAppState
|
||||
}
|
||||
|
||||
const playerStatus = useRef<any>(null)
|
||||
useEffect(() => {
|
||||
videoPlayer.current?.setOnPlaybackStatusUpdate(playbackStatus => {
|
||||
playerStatus.current = playbackStatus
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
@ -79,11 +52,7 @@ const AttachmentVideo: React.FC<Props> = ({
|
||||
<Video
|
||||
accessibilityLabel={video.description}
|
||||
ref={videoPlayer}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
opacity: sensitiveShown ? 0 : 1
|
||||
}}
|
||||
style={{ width: '100%', height: '100%', opacity: sensitiveShown ? 0 : 1 }}
|
||||
usePoster
|
||||
resizeMode={videoResizeMode}
|
||||
{...(gifv
|
||||
@ -98,11 +67,22 @@ const AttachmentVideo: React.FC<Props> = ({
|
||||
posterStyle: { resizeMode: ResizeMode.COVER }
|
||||
})}
|
||||
useNativeControls={false}
|
||||
onFullscreenUpdate={async event => {
|
||||
onFullscreenUpdate={event => {
|
||||
if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_DISMISS) {
|
||||
Platform.OS === 'android' && setVideoResizeMode(ResizeMode.COVER)
|
||||
if (!gifv) {
|
||||
await videoPlayer.current?.stopAsync()
|
||||
videoPlayer.current?.pauseAsync()
|
||||
} else {
|
||||
videoPlayer.current?.playAsync()
|
||||
}
|
||||
}
|
||||
}}
|
||||
onPlaybackStatusUpdate={event => {
|
||||
if (event.isLoaded) {
|
||||
!videoLoaded && setVideoLoaded(true)
|
||||
|
||||
if (event.didJustFinish) {
|
||||
videoPlayer.current?.setPositionAsync(0)
|
||||
}
|
||||
}
|
||||
}}
|
||||
@ -116,19 +96,14 @@ const AttachmentVideo: React.FC<Props> = ({
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
disabled={gifv ? (sensitiveShown ? true : false) : true}
|
||||
onPress={gifv ? playOnPress : null}
|
||||
>
|
||||
{sensitiveShown ? (
|
||||
video.blurhash ? (
|
||||
<Blurhash
|
||||
blurhash={video.blurhash}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}}
|
||||
/>
|
||||
<Blurhash blurhash={video.blurhash} style={{ width: '100%', height: '100%' }} />
|
||||
) : null
|
||||
) : !gifv || (gifv && playerStatus.current === false) ? (
|
||||
) : !gifv ? (
|
||||
<Button
|
||||
round
|
||||
overlay
|
||||
|
Loading…
Reference in New Issue
Block a user