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