mirror of
				https://github.com/tooot-app/app
				synced 2025-06-05 22:19:13 +02:00 
			
		
		
		
	@@ -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
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user