2020-12-26 23:05:17 +01:00
|
|
|
import Button from '@components/Button'
|
2021-01-18 00:23:40 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
2022-05-08 23:40:42 +02:00
|
|
|
import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
|
2022-12-04 18:42:01 +01:00
|
|
|
import React, { useRef, useState } from 'react'
|
|
|
|
import { Pressable, View } from 'react-native'
|
2021-01-28 01:31:19 +01:00
|
|
|
import { Blurhash } from 'react-native-blurhash'
|
2022-06-03 23:18:24 +02:00
|
|
|
import AttachmentAltText from './AltText'
|
2022-10-10 23:43:26 +02:00
|
|
|
import { Platform } from 'expo-modules-core'
|
2022-12-09 00:48:34 +01:00
|
|
|
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
2022-12-12 22:24:03 +01:00
|
|
|
import { aspectRatio } from './dimensions'
|
2020-12-25 18:20:09 +01:00
|
|
|
|
|
|
|
export interface Props {
|
2021-01-18 00:23:40 +01:00
|
|
|
total: number
|
|
|
|
index: number
|
2020-12-25 18:20:09 +01:00
|
|
|
sensitiveShown: boolean
|
|
|
|
video: Mastodon.AttachmentVideo | Mastodon.AttachmentGifv
|
2021-02-08 23:19:55 +01:00
|
|
|
gifv?: boolean
|
2020-12-25 18:20:09 +01:00
|
|
|
}
|
|
|
|
|
2021-01-18 00:23:40 +01:00
|
|
|
const AttachmentVideo: React.FC<Props> = ({
|
|
|
|
total,
|
|
|
|
index,
|
|
|
|
sensitiveShown,
|
2021-02-08 23:19:55 +01:00
|
|
|
video,
|
|
|
|
gifv = false
|
2021-01-18 00:23:40 +01:00
|
|
|
}) => {
|
2022-12-09 00:48:34 +01:00
|
|
|
const { reduceMotionEnabled } = useAccessibility()
|
|
|
|
|
2020-12-25 18:20:09 +01:00
|
|
|
const videoPlayer = useRef<Video>(null)
|
2021-01-04 10:50:24 +01:00
|
|
|
const [videoLoading, setVideoLoading] = useState(false)
|
2020-12-25 18:20:09 +01:00
|
|
|
const [videoLoaded, setVideoLoaded] = useState(false)
|
2022-10-10 23:43:26 +02:00
|
|
|
const [videoResizeMode, setVideoResizeMode] = useState<ResizeMode>(ResizeMode.COVER)
|
2022-12-04 18:42:01 +01:00
|
|
|
const playOnPress = async () => {
|
2021-01-04 10:50:24 +01:00
|
|
|
setVideoLoading(true)
|
2020-12-25 18:20:09 +01:00
|
|
|
if (!videoLoaded) {
|
|
|
|
await videoPlayer.current?.loadAsync({ uri: video.url })
|
|
|
|
}
|
2021-01-04 10:50:24 +01:00
|
|
|
setVideoLoading(false)
|
2020-12-25 18:20:09 +01:00
|
|
|
|
2022-12-04 18:42:01 +01:00
|
|
|
Platform.OS === 'android' && setVideoResizeMode(ResizeMode.CONTAIN)
|
|
|
|
await videoPlayer.current?.presentFullscreenPlayer()
|
2021-09-15 22:52:21 +02:00
|
|
|
|
2022-12-04 18:42:01 +01:00
|
|
|
videoPlayer.current?.playAsync()
|
2021-09-15 22:52:21 +02:00
|
|
|
}
|
|
|
|
|
2020-12-25 18:20:09 +01:00
|
|
|
return (
|
2021-01-18 00:23:40 +01:00
|
|
|
<View
|
2022-06-03 23:18:24 +02:00
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
flexBasis: '50%',
|
|
|
|
padding: StyleConstants.Spacing.XS / 2,
|
2022-12-12 22:24:03 +01:00
|
|
|
aspectRatio: aspectRatio({ total, index, ...video.meta?.original })
|
2022-06-03 23:18:24 +02:00
|
|
|
}}
|
2021-01-18 00:23:40 +01:00
|
|
|
>
|
2020-12-25 18:20:09 +01:00
|
|
|
<Video
|
2021-04-09 21:43:12 +02:00
|
|
|
accessibilityLabel={video.description}
|
2020-12-25 18:20:09 +01:00
|
|
|
ref={videoPlayer}
|
2022-12-04 18:42:01 +01:00
|
|
|
style={{ width: '100%', height: '100%', opacity: sensitiveShown ? 0 : 1 }}
|
2020-12-25 18:20:09 +01:00
|
|
|
usePoster
|
2022-10-10 23:43:26 +02:00
|
|
|
resizeMode={videoResizeMode}
|
2021-03-27 00:47:14 +01:00
|
|
|
{...(gifv
|
2021-03-29 23:53:49 +02:00
|
|
|
? {
|
2022-12-09 00:48:34 +01:00
|
|
|
shouldPlay: reduceMotionEnabled ? false : true,
|
2021-03-29 23:53:49 +02:00
|
|
|
isMuted: true,
|
|
|
|
isLooping: true,
|
|
|
|
source: { uri: video.url }
|
|
|
|
}
|
2021-03-27 00:47:14 +01:00
|
|
|
: {
|
|
|
|
posterSource: { uri: video.preview_url },
|
2022-05-08 23:40:42 +02:00
|
|
|
posterStyle: { resizeMode: ResizeMode.COVER }
|
2021-03-27 00:47:14 +01:00
|
|
|
})}
|
2020-12-25 18:20:09 +01:00
|
|
|
useNativeControls={false}
|
2022-12-04 18:42:01 +01:00
|
|
|
onFullscreenUpdate={event => {
|
2022-10-10 23:43:26 +02:00
|
|
|
if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_DISMISS) {
|
|
|
|
Platform.OS === 'android' && setVideoResizeMode(ResizeMode.COVER)
|
2022-12-09 00:48:34 +01:00
|
|
|
if (gifv && !reduceMotionEnabled) {
|
2022-12-04 18:42:01 +01:00
|
|
|
videoPlayer.current?.playAsync()
|
2022-12-09 00:48:34 +01:00
|
|
|
} else {
|
|
|
|
videoPlayer.current?.pauseAsync()
|
2022-12-04 18:42:01 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
onPlaybackStatusUpdate={event => {
|
|
|
|
if (event.isLoaded) {
|
|
|
|
!videoLoaded && setVideoLoaded(true)
|
|
|
|
|
|
|
|
if (event.didJustFinish) {
|
|
|
|
videoPlayer.current?.setPositionAsync(0)
|
2021-08-11 00:17:37 +02:00
|
|
|
}
|
2021-01-16 00:00:31 +01:00
|
|
|
}
|
|
|
|
}}
|
2020-12-25 18:20:09 +01:00
|
|
|
/>
|
2022-06-03 23:18:24 +02:00
|
|
|
<Pressable
|
|
|
|
style={{
|
|
|
|
position: 'absolute',
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
|
|
|
flex: 1,
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center'
|
|
|
|
}}
|
2022-12-04 18:42:01 +01:00
|
|
|
disabled={gifv ? (sensitiveShown ? true : false) : true}
|
2022-06-03 23:18:24 +02:00
|
|
|
onPress={gifv ? playOnPress : null}
|
|
|
|
>
|
2020-12-25 18:20:09 +01:00
|
|
|
{sensitiveShown ? (
|
2020-12-30 11:55:51 +01:00
|
|
|
video.blurhash ? (
|
2022-12-04 18:42:01 +01:00
|
|
|
<Blurhash blurhash={video.blurhash} style={{ width: '100%', height: '100%' }} />
|
2020-12-30 11:55:51 +01:00
|
|
|
) : null
|
2022-12-09 00:48:34 +01:00
|
|
|
) : !gifv || (gifv && reduceMotionEnabled) ? (
|
2020-12-26 23:05:17 +01:00
|
|
|
<Button
|
2020-12-28 16:54:19 +01:00
|
|
|
round
|
2020-12-26 23:05:17 +01:00
|
|
|
overlay
|
2021-01-04 10:50:24 +01:00
|
|
|
size='L'
|
|
|
|
type='icon'
|
|
|
|
content='PlayCircle'
|
2020-12-26 23:05:17 +01:00
|
|
|
onPress={playOnPress}
|
2021-01-04 10:50:24 +01:00
|
|
|
loading={videoLoading}
|
2020-12-26 23:05:17 +01:00
|
|
|
/>
|
2021-03-27 00:47:14 +01:00
|
|
|
) : null}
|
2022-10-10 23:43:26 +02:00
|
|
|
<AttachmentAltText sensitiveShown={sensitiveShown} text={video.description} />
|
2020-12-25 18:20:09 +01:00
|
|
|
</Pressable>
|
2020-12-28 16:54:19 +01:00
|
|
|
</View>
|
2020-12-25 18:20:09 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AttachmentVideo
|