Samuel Newman
892 lines
24 KiB
TypeScript
892 lines
24 KiB
TypeScript
import {useCallback, useMemo, useRef, useState} from 'react'
|
|
import {
|
|
LayoutAnimation,
|
|
ListRenderItem,
|
|
ScrollView,
|
|
useWindowDimensions,
|
|
View,
|
|
ViewToken,
|
|
} from 'react-native'
|
|
import {
|
|
Gesture,
|
|
GestureDetector,
|
|
NativeGesture,
|
|
} from 'react-native-gesture-handler'
|
|
import Animated, {
|
|
runOnJS,
|
|
runOnUI,
|
|
SharedValue,
|
|
useAnimatedReaction,
|
|
useAnimatedStyle,
|
|
useSharedValue,
|
|
withTiming,
|
|
} from 'react-native-reanimated'
|
|
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'
|
|
import {useEventListener} from 'expo'
|
|
import {Image, ImageStyle} from 'expo-image'
|
|
import {LinearGradient} from 'expo-linear-gradient'
|
|
import {createVideoPlayer, VideoPlayer, VideoView} from 'expo-video'
|
|
import {
|
|
AppBskyEmbedVideo,
|
|
AppBskyFeedDefs,
|
|
AppBskyFeedPost,
|
|
AtUri,
|
|
RichText as RichTextAPI,
|
|
} from '@atproto/api'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
import {
|
|
RouteProp,
|
|
useFocusEffect,
|
|
useIsFocused,
|
|
useNavigation,
|
|
useRoute,
|
|
} from '@react-navigation/native'
|
|
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
|
|
|
import {HITSLOP_20} from '#/lib/constants'
|
|
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
|
import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
|
|
import {sanitizeDisplayName} from '#/lib/strings/display-names'
|
|
import {sanitizeHandle} from '#/lib/strings/handles'
|
|
import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow'
|
|
import {usePostLikeMutationQueue} from '#/state/queries/post'
|
|
import {FeedPostSliceItem, usePostFeedQuery} from '#/state/queries/post-feed'
|
|
import {useSetMinimalShellMode} from '#/state/shell'
|
|
import {useSetLightStatusBar} from '#/state/shell/light-status-bar'
|
|
import {List} from '#/view/com/util/List'
|
|
import {PostCtrls} from '#/view/com/util/post-ctrls/PostCtrls'
|
|
import {formatTime} from '#/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils'
|
|
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
|
import {Header} from '#/screens/VideoFeed/Header'
|
|
import {atoms as a, ThemeProvider, tokens, useTheme} from '#/alf'
|
|
import {Button, ButtonText} from '#/components/Button'
|
|
import * as Layout from '#/components/Layout'
|
|
import {Link} from '#/components/Link'
|
|
import {ListFooter} from '#/components/Lists'
|
|
import {RichText} from '#/components/RichText'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
function createThreeVideoPlayers(
|
|
sources?: [string, string, string],
|
|
): [VideoPlayer, VideoPlayer, VideoPlayer] {
|
|
const p1 = createVideoPlayer(sources?.[0] ?? '')
|
|
p1.loop = true
|
|
p1.timeUpdateEventInterval = 0.1
|
|
const p2 = createVideoPlayer(sources?.[1] ?? '')
|
|
p2.loop = true
|
|
p2.timeUpdateEventInterval = 0.1
|
|
const p3 = createVideoPlayer(sources?.[2] ?? '')
|
|
p3.loop = true
|
|
p3.timeUpdateEventInterval = 0.1
|
|
return [p1, p2, p3]
|
|
}
|
|
|
|
export function VideoFeed({}: NativeStackScreenProps<
|
|
CommonNavigatorParams,
|
|
'VideoFeed'
|
|
>) {
|
|
const {top} = useSafeAreaInsets()
|
|
const {params} = useRoute<RouteProp<CommonNavigatorParams, 'VideoFeed'>>()
|
|
|
|
const setMinShellMode = useSetMinimalShellMode()
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
setMinShellMode(true)
|
|
return () => {
|
|
setMinShellMode(false)
|
|
}
|
|
}, [setMinShellMode]),
|
|
)
|
|
|
|
useSetLightStatusBar(true)
|
|
|
|
return (
|
|
<ThemeProvider theme="dark">
|
|
<Layout.Screen noInsetTop style={{backgroundColor: 'black'}}>
|
|
<View
|
|
style={[
|
|
a.absolute,
|
|
a.z_30,
|
|
{top: 0, left: 0, right: 0, paddingTop: top},
|
|
]}>
|
|
<Header sourceContext={params} />
|
|
</View>
|
|
<Inner />
|
|
</Layout.Screen>
|
|
</ThemeProvider>
|
|
)
|
|
}
|
|
|
|
function Inner() {
|
|
const {params} = useRoute<RouteProp<CommonNavigatorParams, 'VideoFeed'>>()
|
|
const isFocused = useIsFocused()
|
|
const feedDesc = useMemo(() => {
|
|
switch (params.type) {
|
|
case 'feedgen':
|
|
return `feedgen|${params.uri}` as const
|
|
case 'author':
|
|
return `author|${params.did}|${params.filter}` as const
|
|
default:
|
|
throw new Error(`Invalid video feed params ${JSON.stringify(params)}`)
|
|
}
|
|
}, [params])
|
|
const {
|
|
data,
|
|
isFetching,
|
|
refetch,
|
|
hasNextPage,
|
|
isFetchingNextPage,
|
|
fetchNextPage,
|
|
} = usePostFeedQuery(feedDesc)
|
|
|
|
let videos = data?.pages.flatMap(page =>
|
|
page.slices.flatMap(slice => slice.items),
|
|
)
|
|
const startingVideoIndex = videos?.findIndex(video => {
|
|
return video.post.uri === params.initialPostUri
|
|
})
|
|
if (videos && startingVideoIndex && startingVideoIndex > -1) {
|
|
videos = videos.slice(startingVideoIndex)
|
|
}
|
|
|
|
const [currentSources, setCurrentSources] = useState<
|
|
[string | null, string | null, string | null]
|
|
>([null, null, null])
|
|
|
|
const [players, setPlayers] = useState<
|
|
[VideoPlayer, VideoPlayer, VideoPlayer] | null
|
|
>(createThreeVideoPlayers)
|
|
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
|
|
const scrollGesture = useMemo(() => Gesture.Native(), [])
|
|
|
|
const renderItem: ListRenderItem<FeedPostSliceItem> = useCallback(
|
|
({item, index}) => {
|
|
const {post} = item
|
|
if (!post.embed || !AppBskyEmbedVideo.isView(post.embed)) {
|
|
return null
|
|
}
|
|
|
|
const player = players?.[index % 3]
|
|
const currentSource = currentSources[index % 3]
|
|
|
|
return (
|
|
<VideoItem
|
|
player={player}
|
|
post={post}
|
|
embed={post.embed}
|
|
active={
|
|
isFocused &&
|
|
index === currentIndex &&
|
|
currentSource === post.embed.playlist
|
|
}
|
|
scrollGesture={scrollGesture}
|
|
/>
|
|
)
|
|
},
|
|
[players, currentIndex, isFocused, currentSources, scrollGesture],
|
|
)
|
|
|
|
const updateVideoState = useNonReactiveCallback((index?: number) => {
|
|
if (!videos) return
|
|
|
|
if (index === undefined) {
|
|
index = currentIndex
|
|
} else {
|
|
setCurrentIndex(index)
|
|
}
|
|
|
|
setCurrentSources(oldSources => {
|
|
const currentSources = [...oldSources] as [
|
|
string | null,
|
|
string | null,
|
|
string | null,
|
|
]
|
|
|
|
const prevEmbed = videos[index - 1]?.post.embed
|
|
const prevVideo =
|
|
prevEmbed && AppBskyEmbedVideo.isView(prevEmbed)
|
|
? prevEmbed.playlist
|
|
: null
|
|
const currEmbed = videos[index]?.post.embed
|
|
const currVideo =
|
|
currEmbed && AppBskyEmbedVideo.isView(currEmbed)
|
|
? currEmbed.playlist
|
|
: null
|
|
const nextEmbed = videos[index + 1]?.post.embed
|
|
const nextVideo =
|
|
nextEmbed && AppBskyEmbedVideo.isView(nextEmbed)
|
|
? nextEmbed.playlist
|
|
: null
|
|
|
|
const prevPlayerCurrentSource = currentSources[(index + 2) % 3]
|
|
const currPlayerCurrentSource = currentSources[index % 3]
|
|
const nextPlayerCurrentSource = currentSources[(index + 1) % 3]
|
|
|
|
if (!players) {
|
|
const args = ['', '', ''] satisfies [string, string, string]
|
|
if (prevVideo) args[(index + 2) % 3] = prevVideo
|
|
if (currVideo) args[index % 3] = currVideo
|
|
if (nextVideo) args[(index + 1) % 3] = nextVideo
|
|
const [player1, player2, player3] = createThreeVideoPlayers(args)
|
|
|
|
setPlayers([player1, player2, player3])
|
|
|
|
if (currVideo) {
|
|
const currPlayer = [player1, player2, player3][index % 3]
|
|
currPlayer.play()
|
|
}
|
|
} else {
|
|
const [player1, player2, player3] = players
|
|
|
|
const prevPlayer = [player1, player2, player3][(index + 2) % 3]
|
|
const currPlayer = [player1, player2, player3][index % 3]
|
|
const nextPlayer = [player1, player2, player3][(index + 1) % 3]
|
|
|
|
if (prevVideo && prevVideo !== prevPlayerCurrentSource) {
|
|
prevPlayer.replace(prevVideo)
|
|
}
|
|
prevPlayer.pause()
|
|
|
|
if (currVideo) {
|
|
if (currVideo !== currPlayerCurrentSource) {
|
|
currPlayer.replace(currVideo)
|
|
}
|
|
currPlayer.play()
|
|
}
|
|
|
|
if (nextVideo && nextVideo !== nextPlayerCurrentSource) {
|
|
nextPlayer.replace(nextVideo)
|
|
}
|
|
nextPlayer.pause()
|
|
}
|
|
|
|
if (prevVideo && prevVideo !== prevPlayerCurrentSource) {
|
|
currentSources[(index + 2) % 3] = prevVideo
|
|
}
|
|
|
|
if (currVideo && currVideo !== currPlayerCurrentSource) {
|
|
currentSources[index % 3] = currVideo
|
|
}
|
|
|
|
if (nextVideo && nextVideo !== nextPlayerCurrentSource) {
|
|
currentSources[(index + 1) % 3] = nextVideo
|
|
}
|
|
|
|
// use old array if no changes
|
|
if (
|
|
oldSources[0] === currentSources[0] &&
|
|
oldSources[1] === currentSources[1] &&
|
|
oldSources[2] === currentSources[2]
|
|
) {
|
|
return oldSources
|
|
}
|
|
return currentSources
|
|
})
|
|
})
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
if (!players) {
|
|
// create players, set sources, start playing
|
|
updateVideoState()
|
|
}
|
|
return () => {
|
|
if (players) {
|
|
// manually release players when offscreen
|
|
players.forEach(p => p.release())
|
|
setPlayers(null)
|
|
}
|
|
}
|
|
}, [players, updateVideoState]),
|
|
)
|
|
|
|
const onViewableItemsChanged = useCallback(
|
|
({viewableItems}: {viewableItems: ViewToken[]; changed: ViewToken[]}) => {
|
|
if (viewableItems[0] && viewableItems[0].index !== null) {
|
|
updateVideoState(viewableItems[0].index)
|
|
}
|
|
},
|
|
[updateVideoState],
|
|
)
|
|
|
|
return (
|
|
<GestureDetector gesture={scrollGesture}>
|
|
<List
|
|
data={videos}
|
|
renderItem={renderItem}
|
|
keyExtractor={keyExtractor}
|
|
pagingEnabled={true}
|
|
refreshing={isFetching}
|
|
onRefresh={refetch}
|
|
ListFooterComponent={
|
|
<ListFooter
|
|
hasNextPage={hasNextPage}
|
|
isFetchingNextPage={isFetchingNextPage}
|
|
onRetry={refetch}
|
|
/>
|
|
}
|
|
onEndReached={() => {
|
|
if (hasNextPage && !isFetchingNextPage) {
|
|
fetchNextPage()
|
|
}
|
|
}}
|
|
showsVerticalScrollIndicator={false}
|
|
onViewableItemsChanged={onViewableItemsChanged}
|
|
viewabilityConfig={{itemVisiblePercentThreshold: 100}}
|
|
/>
|
|
</GestureDetector>
|
|
)
|
|
}
|
|
|
|
function keyExtractor(item: FeedPostSliceItem) {
|
|
return item._reactKey
|
|
}
|
|
|
|
function VideoItem({
|
|
player,
|
|
post,
|
|
embed,
|
|
active,
|
|
scrollGesture,
|
|
}: {
|
|
player?: VideoPlayer
|
|
post: AppBskyFeedDefs.PostView
|
|
embed: AppBskyEmbedVideo.View
|
|
active: boolean
|
|
scrollGesture: NativeGesture
|
|
}) {
|
|
const postShadow = usePostShadow(post)
|
|
const {height, width} = useWindowDimensions()
|
|
|
|
return (
|
|
<View style={[a.relative, {height, width}]}>
|
|
<SafeAreaView edges={['left', 'right', 'bottom']} style={[a.flex_1]}>
|
|
{postShadow === POST_TOMBSTONE ? (
|
|
<View
|
|
style={[
|
|
a.absolute,
|
|
a.inset_0,
|
|
a.z_20,
|
|
a.align_center,
|
|
a.justify_center,
|
|
{backgroundColor: 'rgba(0, 0, 0, 0.8)'},
|
|
]}>
|
|
<Text
|
|
style={[
|
|
a.text_2xl,
|
|
a.font_heavy,
|
|
a.text_center,
|
|
a.leading_tight,
|
|
a.mx_xl,
|
|
]}>
|
|
<Trans>Post has been deleted</Trans>
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<>
|
|
<VideoItemPlaceholder embed={embed} />
|
|
{player && (
|
|
<VideoItemInner player={player} embed={embed} active={active} />
|
|
)}
|
|
<Overlay
|
|
player={player}
|
|
post={postShadow}
|
|
active={active}
|
|
scrollGesture={scrollGesture}
|
|
/>
|
|
</>
|
|
)}
|
|
</SafeAreaView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// TODO maybe unused
|
|
function VideoItemInner({
|
|
player,
|
|
embed,
|
|
active,
|
|
}: {
|
|
player: VideoPlayer
|
|
embed: AppBskyEmbedVideo.View
|
|
active: boolean
|
|
}) {
|
|
// const {status} = useEvent(player, 'statusChange', {status: player.status})
|
|
|
|
return (
|
|
<>
|
|
{/*
|
|
<VideoItemPlaceholder embed={embed} style={{
|
|
zIndex: status === 'loading' && isAndroid ? 1 : -1,
|
|
}} />
|
|
*/}
|
|
|
|
{active && player && (
|
|
<VideoView
|
|
style={[a.absolute, a.inset_0]}
|
|
player={player}
|
|
nativeControls={false}
|
|
contentFit={
|
|
isTallAspectRatio(embed.aspectRatio) ? 'cover' : 'contain'
|
|
}
|
|
accessibilityIgnoresInvertColors
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Overlay({
|
|
player,
|
|
post,
|
|
active,
|
|
scrollGesture,
|
|
}: {
|
|
player?: VideoPlayer
|
|
post: Shadow<AppBskyFeedDefs.PostView>
|
|
active: boolean
|
|
scrollGesture: NativeGesture
|
|
}) {
|
|
const {_} = useLingui()
|
|
const t = useTheme()
|
|
const navigation = useNavigation<NavigationProp>()
|
|
const seekingAnimationSV = useSharedValue(0)
|
|
|
|
const pushToProfile = useNonReactiveCallback(() => {
|
|
navigation.navigate('Profile', {name: post.author.did})
|
|
})
|
|
|
|
const gesture = useMemo(() => {
|
|
const dragLeftGesture = Gesture.Pan()
|
|
.simultaneousWithExternalGesture(scrollGesture)
|
|
.activeOffsetX([0, 10])
|
|
.failOffsetX([-10, 0])
|
|
.failOffsetY([-5, 5])
|
|
.maxPointers(1)
|
|
.onEnd(evt => {
|
|
'worklet'
|
|
if (evt.translationX < -50 && evt.velocityX < -300) {
|
|
runOnJS(pushToProfile)()
|
|
}
|
|
})
|
|
|
|
return dragLeftGesture
|
|
}, [pushToProfile, scrollGesture])
|
|
|
|
const rkey = new AtUri(post.uri).rkey
|
|
const record = AppBskyFeedPost.isRecord(post.record) ? post.record : undefined
|
|
const richText = new RichTextAPI({
|
|
text: record?.text || '',
|
|
facets: record?.facets,
|
|
})
|
|
|
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
opacity: 1 - seekingAnimationSV.get(),
|
|
}))
|
|
|
|
return (
|
|
<>
|
|
<View style={[a.absolute, a.inset_0, a.z_20]}>
|
|
<GestureDetector gesture={gesture}>
|
|
<View style={[a.flex_1]}>
|
|
<PlayPauseTapArea player={player} post={post} />
|
|
</View>
|
|
</GestureDetector>
|
|
|
|
<LinearGradient
|
|
colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.8)', 'rgba(0,0,0,0.95)']}
|
|
style={[a.w_full, a.pt_md]}>
|
|
<Animated.View style={[a.px_xl, animatedStyle]}>
|
|
<Link
|
|
label={_(
|
|
msg`View ${sanitizeDisplayName(
|
|
post.author.displayName || post.author.handle,
|
|
)}'s profile`,
|
|
)}
|
|
to={{
|
|
screen: 'Profile',
|
|
params: {name: post.author.did},
|
|
}}
|
|
style={[a.flex_row, a.gap_md, a.pb_sm, a.align_center]}>
|
|
<UserAvatar type="user" avatar={post.author.avatar} size={32} />
|
|
<View>
|
|
<Text style={[a.text_md, a.font_heavy]} emoji numberOfLines={1}>
|
|
{sanitizeDisplayName(
|
|
post.author.displayName || post.author.handle,
|
|
)}
|
|
</Text>
|
|
<Text
|
|
style={[a.text_sm, t.atoms.text_contrast_high]}
|
|
numberOfLines={1}>
|
|
{sanitizeHandle(post.author.handle, '@')}
|
|
</Text>
|
|
</View>
|
|
</Link>
|
|
{record?.text?.trim() && (
|
|
<View style={[a.pb_sm]}>
|
|
<ExpandableRichTextView
|
|
value={richText}
|
|
authorHandle={post.author.handle}
|
|
/>
|
|
</View>
|
|
)}
|
|
{record && (
|
|
<View style={[{left: -5}]}>
|
|
<PostCtrls
|
|
richText={richText}
|
|
post={post}
|
|
record={record}
|
|
logContext="FeedItem"
|
|
onPressReply={() =>
|
|
navigation.navigate('PostThread', {
|
|
name: post.author.did,
|
|
rkey,
|
|
})
|
|
}
|
|
big
|
|
/>
|
|
</View>
|
|
)}
|
|
</Animated.View>
|
|
|
|
{player && active ? (
|
|
<Scrubber player={player} seekingAnimationSV={seekingAnimationSV} />
|
|
) : (
|
|
<ScrubberPlaceholder />
|
|
)}
|
|
</LinearGradient>
|
|
</View>
|
|
{/*
|
|
{isAndroid && status === 'loading' && (
|
|
<View
|
|
style={[
|
|
a.absolute,
|
|
a.inset_0,
|
|
a.align_center,
|
|
a.justify_center,
|
|
a.z_10,
|
|
]}
|
|
pointerEvents="none">
|
|
<Loader size="2xl" />
|
|
</View>
|
|
)}
|
|
*/}
|
|
</>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Magic number that matches the Scrubber height
|
|
*/
|
|
function ScrubberPlaceholder() {
|
|
const {bottom} = useSafeAreaInsets()
|
|
return (
|
|
<View
|
|
style={[
|
|
a.w_full,
|
|
{
|
|
// same as Scrubber
|
|
height: bottom + tokens.space.md + tokens.space.md + tokens.space.lg,
|
|
},
|
|
]}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function Scrubber({
|
|
player,
|
|
seekingAnimationSV,
|
|
}: {
|
|
player: VideoPlayer
|
|
seekingAnimationSV: SharedValue<number>
|
|
}) {
|
|
const {width: screenWidth} = useWindowDimensions()
|
|
const insets = useSafeAreaInsets()
|
|
const currentTimeSV = useSharedValue(0)
|
|
const durationSV = useSharedValue(0)
|
|
const [currentSeekTime, setCurrentSeekTime] = useState(0)
|
|
const [duration, setDuration] = useState(0)
|
|
|
|
const updateTime = (currentTime: number, duration: number) => {
|
|
'worklet'
|
|
currentTimeSV.set(currentTime)
|
|
durationSV.set(duration)
|
|
}
|
|
|
|
useEventListener(player, 'timeUpdate', evt => {
|
|
runOnUI(updateTime)(evt.currentTime, player.duration)
|
|
})
|
|
|
|
const isSeekingSV = useSharedValue(false)
|
|
const seekProgressSV = useSharedValue(0)
|
|
|
|
useAnimatedReaction(
|
|
() => Math.round(seekProgressSV.get()),
|
|
(progress, prevProgress) => {
|
|
if (progress !== prevProgress) {
|
|
runOnJS(setCurrentSeekTime)(progress)
|
|
}
|
|
},
|
|
)
|
|
|
|
useAnimatedReaction(
|
|
() => Math.round(durationSV.get()),
|
|
(duration, prevDuration) => {
|
|
if (duration !== prevDuration) {
|
|
runOnJS(setDuration)(duration)
|
|
}
|
|
},
|
|
)
|
|
|
|
const seekBy = useCallback(
|
|
(time: number) => {
|
|
player.seekBy(time)
|
|
},
|
|
[player],
|
|
)
|
|
|
|
const gesture = useMemo(() => {
|
|
return Gesture.Pan()
|
|
.failOffsetY([-10, 10])
|
|
.onStart(() => {
|
|
'worklet'
|
|
seekProgressSV.set(currentTimeSV.get())
|
|
isSeekingSV.set(true)
|
|
seekingAnimationSV.set(withTiming(1, {duration: 500}))
|
|
})
|
|
.onUpdate(evt => {
|
|
'worklet'
|
|
const progress = evt.x / screenWidth
|
|
seekProgressSV.set(
|
|
clamp(progress * durationSV.get(), 0, durationSV.get()),
|
|
)
|
|
})
|
|
.onEnd(evt => {
|
|
'worklet'
|
|
isSeekingSV.get()
|
|
|
|
const progress = evt.x / screenWidth
|
|
const newTime = clamp(progress * durationSV.get(), 0, durationSV.get())
|
|
|
|
// it's seek by, so offset by the current time
|
|
runOnJS(seekBy)(newTime - currentTimeSV.get())
|
|
|
|
isSeekingSV.set(false)
|
|
seekingAnimationSV.set(withTiming(0, {duration: 500}))
|
|
})
|
|
}, [
|
|
seekingAnimationSV,
|
|
seekBy,
|
|
screenWidth,
|
|
currentTimeSV,
|
|
durationSV,
|
|
isSeekingSV,
|
|
seekProgressSV,
|
|
])
|
|
|
|
const timeStyle = useAnimatedStyle(() => {
|
|
return {
|
|
display: seekingAnimationSV.get() === 0 ? 'none' : 'flex',
|
|
opacity: seekingAnimationSV.get(),
|
|
}
|
|
})
|
|
|
|
const barStyle = useAnimatedStyle(() => {
|
|
const currentTime = isSeekingSV.get()
|
|
? seekProgressSV.get()
|
|
: currentTimeSV.get()
|
|
const progress = currentTime === 0 ? 0 : currentTime / durationSV.get()
|
|
return {
|
|
height: seekingAnimationSV.get() * 3 + 1,
|
|
width: `${progress * 100}%`,
|
|
}
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<Animated.View
|
|
style={[
|
|
a.absolute,
|
|
{
|
|
left: 0,
|
|
right: 0,
|
|
bottom: insets.bottom + 48,
|
|
},
|
|
timeStyle,
|
|
]}
|
|
pointerEvents="none">
|
|
<Text style={[a.text_center, a.font_bold]}>
|
|
<Text style={[a.text_5xl, {fontVariant: ['tabular-nums']}]}>
|
|
{formatTime(currentSeekTime)}
|
|
</Text>
|
|
<Text style={[a.text_2xl, {opacity: 0.8}]}>{' / '}</Text>
|
|
<Text
|
|
style={[
|
|
a.text_5xl,
|
|
{opacity: 0.8},
|
|
{fontVariant: ['tabular-nums']},
|
|
]}>
|
|
{formatTime(duration)}
|
|
</Text>
|
|
</Text>
|
|
</Animated.View>
|
|
|
|
<GestureDetector gesture={gesture}>
|
|
<View
|
|
style={[
|
|
a.relative,
|
|
a.w_full,
|
|
a.pt_lg,
|
|
a.justify_end,
|
|
{
|
|
paddingBottom: insets.bottom + tokens.space.md,
|
|
height:
|
|
// bottom padding
|
|
insets.bottom +
|
|
tokens.space.md +
|
|
// actual height
|
|
tokens.space.md +
|
|
// top padding
|
|
tokens.space.lg,
|
|
},
|
|
a.z_10,
|
|
]}>
|
|
<Animated.View style={[{backgroundColor: 'white'}, barStyle]} />
|
|
</View>
|
|
</GestureDetector>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function ExpandableRichTextView({
|
|
value,
|
|
authorHandle,
|
|
}: {
|
|
value: RichTextAPI
|
|
authorHandle?: string
|
|
}) {
|
|
const {height: screenHeight} = useWindowDimensions()
|
|
const [expanded, setExpanded] = useState(false)
|
|
const [constrained, setConstrained] = useState(false)
|
|
const [contentHeight, setContentHeight] = useState(0)
|
|
const {_} = useLingui()
|
|
|
|
return (
|
|
<ScrollView
|
|
scrollEnabled={expanded}
|
|
onContentSizeChange={(_w, h) => {
|
|
if (expanded) {
|
|
LayoutAnimation.configureNext({
|
|
duration: 500,
|
|
update: {type: 'spring', springDamping: 0.6},
|
|
})
|
|
}
|
|
setContentHeight(h)
|
|
}}
|
|
style={{height: Math.min(contentHeight, screenHeight * 0.5)}}
|
|
contentContainerStyle={[
|
|
a.gap_xs,
|
|
expanded ? [a.align_start] : a.flex_row,
|
|
]}>
|
|
<RichText
|
|
value={value}
|
|
style={[a.text_sm, a.flex_1]}
|
|
authorHandle={authorHandle}
|
|
enableTags
|
|
numberOfLines={expanded ? undefined : constrained ? 1 : 2}
|
|
onTextLayout={evt => {
|
|
if (!constrained && evt.nativeEvent.lines.length > 1) {
|
|
setConstrained(true)
|
|
}
|
|
}}
|
|
/>
|
|
{constrained && (
|
|
<Button
|
|
label={expanded ? _(msg`Read less`) : _(msg`Read more`)}
|
|
hitSlop={HITSLOP_20}
|
|
onPress={() => setExpanded(prev => !prev)}>
|
|
<ButtonText>
|
|
{expanded ? <Trans>Read less</Trans> : <Trans>Read more</Trans>}
|
|
</ButtonText>
|
|
</Button>
|
|
)}
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
function VideoItemPlaceholder({
|
|
embed,
|
|
style,
|
|
}: {
|
|
embed: AppBskyEmbedVideo.View
|
|
style?: ImageStyle
|
|
}) {
|
|
const src = embed.thumbnail
|
|
return src ? (
|
|
<Image
|
|
accessibilityIgnoresInvertColors
|
|
source={{uri: src}}
|
|
style={[a.absolute, a.inset_0, style]}
|
|
contentFit={isTallAspectRatio(embed.aspectRatio) ? 'cover' : 'contain'}
|
|
/>
|
|
) : null
|
|
}
|
|
|
|
function PlayPauseTapArea({
|
|
player,
|
|
post,
|
|
}: {
|
|
player?: VideoPlayer
|
|
post: Shadow<AppBskyFeedDefs.PostView>
|
|
}) {
|
|
const doubleTapRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
const [queueLike] = usePostLikeMutationQueue(post, 'ImmersiveVideo')
|
|
const togglePlayPause = () => {
|
|
if (!player) return
|
|
doubleTapRef.current = null
|
|
if (player.playing) {
|
|
player.pause()
|
|
} else {
|
|
player.play()
|
|
}
|
|
}
|
|
|
|
const onPress = () => {
|
|
if (doubleTapRef.current) {
|
|
clearTimeout(doubleTapRef.current)
|
|
doubleTapRef.current = null
|
|
queueLike()
|
|
} else {
|
|
doubleTapRef.current = setTimeout(togglePlayPause, 200)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
disabled={!player}
|
|
label="Toggle play/pause"
|
|
accessibilityHint="Double tap to like"
|
|
onPress={onPress}
|
|
style={[a.absolute, a.inset_0]}>
|
|
<View />
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
function clamp(num: number, min: number, max: number) {
|
|
'worklet'
|
|
return Math.min(Math.max(num, min), max)
|
|
}
|
|
|
|
/*
|
|
* If the video is taller than 9:16
|
|
*/
|
|
function isTallAspectRatio(aspectRatio: AppBskyEmbedVideo.View['aspectRatio']) {
|
|
const videoAspectRatio =
|
|
(aspectRatio?.width ?? 1) / (aspectRatio?.height ?? 1)
|
|
return videoAspectRatio <= 9 / 16
|
|
}
|