Copy pasta to new location
This commit is contained in:
Eric Bailey
@@ -1,975 +0,0 @@
|
|||||||
import React, {useCallback, useMemo, useRef, useState} from 'react'
|
|
||||||
import {
|
|
||||||
LayoutAnimation,
|
|
||||||
ListRenderItem,
|
|
||||||
ScrollView,
|
|
||||||
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,
|
|
||||||
useSafeAreaFrame,
|
|
||||||
useSafeAreaInsets,
|
|
||||||
} from 'react-native-safe-area-context'
|
|
||||||
import {useEvent, 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 {isAndroid} from '#/platform/detection'
|
|
||||||
import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow'
|
|
||||||
import {useProfileShadow} from '#/state/cache/profile-shadow'
|
|
||||||
import {
|
|
||||||
FeedFeedbackProvider,
|
|
||||||
useFeedFeedbackContext,
|
|
||||||
} from '#/state/feed-feedback'
|
|
||||||
import {useFeedFeedback} from '#/state/feed-feedback'
|
|
||||||
import {usePostLikeMutationQueue} from '#/state/queries/post'
|
|
||||||
import {
|
|
||||||
AuthorFilter,
|
|
||||||
FeedPostSliceItem,
|
|
||||||
usePostFeedQuery,
|
|
||||||
} from '#/state/queries/post-feed'
|
|
||||||
import {useProfileFollowMutationQueue} from '#/state/queries/profile'
|
|
||||||
import {useSession} from '#/state/session'
|
|
||||||
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, platform, ThemeProvider, tokens, useTheme} from '#/alf'
|
|
||||||
import {setNavigationBar} from '#/alf/util/navigationBar'
|
|
||||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
|
||||||
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
|
|
||||||
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] {
|
|
||||||
// android is typically slower and can't keep up with a 0.1 interval
|
|
||||||
const eventInterval = platform({
|
|
||||||
ios: 0.2,
|
|
||||||
android: 0.5,
|
|
||||||
default: 0,
|
|
||||||
})
|
|
||||||
const p1 = createVideoPlayer(sources?.[0] ?? '')
|
|
||||||
p1.loop = true
|
|
||||||
p1.timeUpdateEventInterval = eventInterval
|
|
||||||
const p2 = createVideoPlayer(sources?.[1] ?? '')
|
|
||||||
p2.loop = true
|
|
||||||
p2.timeUpdateEventInterval = eventInterval
|
|
||||||
const p3 = createVideoPlayer(sources?.[2] ?? '')
|
|
||||||
p3.loop = true
|
|
||||||
p3.timeUpdateEventInterval = eventInterval
|
|
||||||
return [p1, p2, p3]
|
|
||||||
}
|
|
||||||
|
|
||||||
export function VideoFeed({}: NativeStackScreenProps<
|
|
||||||
CommonNavigatorParams,
|
|
||||||
'VideoFeed'
|
|
||||||
>) {
|
|
||||||
const {top} = useSafeAreaInsets()
|
|
||||||
const {params} = useRoute<RouteProp<CommonNavigatorParams, 'VideoFeed'>>()
|
|
||||||
|
|
||||||
const t = useTheme()
|
|
||||||
const setMinShellMode = useSetMinimalShellMode()
|
|
||||||
useFocusEffect(
|
|
||||||
useCallback(() => {
|
|
||||||
setMinShellMode(true)
|
|
||||||
setNavigationBar('lightbox', t)
|
|
||||||
return () => {
|
|
||||||
setMinShellMode(false)
|
|
||||||
setNavigationBar('theme', t)
|
|
||||||
}
|
|
||||||
}, [setMinShellMode, t]),
|
|
||||||
)
|
|
||||||
|
|
||||||
const isFocused = useIsFocused()
|
|
||||||
useSetLightStatusBar(isFocused)
|
|
||||||
|
|
||||||
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 string}` as const
|
|
||||||
case 'author':
|
|
||||||
return `author|${params.did as string}|${
|
|
||||||
params.filter as AuthorFilter
|
|
||||||
}` as const
|
|
||||||
default:
|
|
||||||
throw new Error(`Invalid video feed params ${JSON.stringify(params)}`)
|
|
||||||
}
|
|
||||||
}, [params])
|
|
||||||
|
|
||||||
const {
|
|
||||||
data,
|
|
||||||
isFetching,
|
|
||||||
refetch,
|
|
||||||
hasNextPage,
|
|
||||||
isFetchingNextPage,
|
|
||||||
fetchNextPage,
|
|
||||||
} = usePostFeedQuery(feedDesc)
|
|
||||||
const {hasSession} = useSession()
|
|
||||||
const feedFeedback = useFeedFeedback(feedDesc, hasSession)
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<FeedFeedbackProvider value={feedFeedback}>
|
|
||||||
<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>
|
|
||||||
</FeedFeedbackProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
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 {width, height} = useSafeAreaFrame()
|
|
||||||
const {onItemSeen} = useFeedFeedbackContext()
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
let to: NodeJS.Timeout | null = null
|
|
||||||
if (active) {
|
|
||||||
to = setTimeout(() => {
|
|
||||||
onItemSeen(post)
|
|
||||||
}, 1000)
|
|
||||||
} else if (to) {
|
|
||||||
clearTimeout(to)
|
|
||||||
}
|
|
||||||
}, [active, post, onItemSeen])
|
|
||||||
|
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function VideoItemInner({
|
|
||||||
player,
|
|
||||||
embed,
|
|
||||||
active,
|
|
||||||
}: {
|
|
||||||
player: VideoPlayer
|
|
||||||
embed: AppBskyEmbedVideo.View
|
|
||||||
active: boolean
|
|
||||||
}) {
|
|
||||||
const {status} = useEvent(player, 'statusChange', {status: player.status})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{active && player && (
|
|
||||||
<VideoView
|
|
||||||
style={[
|
|
||||||
a.absolute,
|
|
||||||
a.inset_0,
|
|
||||||
isAndroid && status === 'loading' && {opacity: 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 profile = useProfileShadow(post.author)
|
|
||||||
const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(
|
|
||||||
profile,
|
|
||||||
'ImmersiveVideo',
|
|
||||||
)
|
|
||||||
|
|
||||||
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]}>
|
|
||||||
<View style={[a.flex_1]}>
|
|
||||||
<PlayPauseTapArea player={player} post={post} />
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<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]}>
|
|
||||||
<View style={[a.w_full, a.flex_row, a.align_center, a.gap_md]}>
|
|
||||||
<Link
|
|
||||||
label={_(
|
|
||||||
msg`View ${sanitizeDisplayName(
|
|
||||||
post.author.displayName || post.author.handle,
|
|
||||||
)}'s profile`,
|
|
||||||
)}
|
|
||||||
to={{
|
|
||||||
screen: 'Profile',
|
|
||||||
params: {name: post.author.did},
|
|
||||||
}}
|
|
||||||
style={[
|
|
||||||
a.flex_1,
|
|
||||||
a.flex_row,
|
|
||||||
a.gap_md,
|
|
||||||
a.pb_sm,
|
|
||||||
a.align_center,
|
|
||||||
]}>
|
|
||||||
<UserAvatar type="user" avatar={post.author.avatar} size={32} />
|
|
||||||
<View style={[a.flex_1]}>
|
|
||||||
<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>
|
|
||||||
{/* show button based on non-reactive version, so it doesn't hide on press */}
|
|
||||||
{!post.author.viewer?.following && (
|
|
||||||
<Button
|
|
||||||
label={
|
|
||||||
profile.viewer?.following
|
|
||||||
? _(msg`Following`)
|
|
||||||
: _(msg`Follow`)
|
|
||||||
}
|
|
||||||
accessibilityHint={
|
|
||||||
profile.viewer?.following ? _(msg`Unfollow user`) : ''
|
|
||||||
}
|
|
||||||
size="small"
|
|
||||||
variant="outline"
|
|
||||||
color="secondary_inverted"
|
|
||||||
style={[a.mb_xs, a.bg_transparent]}
|
|
||||||
hoverStyle={[]}
|
|
||||||
onPress={() =>
|
|
||||||
profile.viewer?.following ? queueUnfollow() : queueFollow()
|
|
||||||
}>
|
|
||||||
{!!profile.viewer?.following && (
|
|
||||||
<ButtonIcon icon={CheckIcon} />
|
|
||||||
)}
|
|
||||||
<ButtonText>
|
|
||||||
{profile.viewer?.following ? (
|
|
||||||
<Trans>Following</Trans>
|
|
||||||
) : (
|
|
||||||
<Trans>Follow</Trans>
|
|
||||||
)}
|
|
||||||
</ButtonText>
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
{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}
|
|
||||||
scrollGesture={scrollGesture}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<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.xl,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Scrubber({
|
|
||||||
player,
|
|
||||||
seekingAnimationSV,
|
|
||||||
scrollGesture,
|
|
||||||
}: {
|
|
||||||
player: VideoPlayer
|
|
||||||
seekingAnimationSV: SharedValue<number>
|
|
||||||
scrollGesture: NativeGesture
|
|
||||||
}) {
|
|
||||||
const {width: screenWidth} = useSafeAreaFrame()
|
|
||||||
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 scrubPanGesture = useMemo(() => {
|
|
||||||
return Gesture.Pan()
|
|
||||||
.blocksExternalGesture(scrollGesture)
|
|
||||||
.activeOffsetX([-1, 1])
|
|
||||||
.failOffsetY([-10, 10])
|
|
||||||
.onBegin(() => {
|
|
||||||
'worklet'
|
|
||||||
})
|
|
||||||
.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}))
|
|
||||||
})
|
|
||||||
}, [
|
|
||||||
scrollGesture,
|
|
||||||
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={scrubPanGesture}>
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
a.relative,
|
|
||||||
a.w_full,
|
|
||||||
a.justify_end,
|
|
||||||
{
|
|
||||||
paddingBottom: insets.bottom,
|
|
||||||
height:
|
|
||||||
// bottom padding
|
|
||||||
insets.bottom +
|
|
||||||
// actual height
|
|
||||||
tokens.space.xl,
|
|
||||||
},
|
|
||||||
a.z_10,
|
|
||||||
]}>
|
|
||||||
<Animated.View style={[{backgroundColor: 'white'}, barStyle]} />
|
|
||||||
</View>
|
|
||||||
</GestureDetector>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ExpandableRichTextView({
|
|
||||||
value,
|
|
||||||
authorHandle,
|
|
||||||
}: {
|
|
||||||
value: RichTextAPI
|
|
||||||
authorHandle?: string
|
|
||||||
}) {
|
|
||||||
const {height: screenHeight} = useSafeAreaFrame()
|
|
||||||
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 {sendInteraction} = useFeedFeedbackContext()
|
|
||||||
|
|
||||||
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()
|
|
||||||
sendInteraction({
|
|
||||||
item: post.uri,
|
|
||||||
event: 'app.bsky.feed.defs#interactionLike',
|
|
||||||
})
|
|
||||||
} 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
|
|
||||||
}
|
|
||||||
@@ -1 +1,975 @@
|
|||||||
export {VideoFeed} from '#/screens/Feeds/VibeScreen'
|
import React, {useCallback, useMemo, useRef, useState} from 'react'
|
||||||
|
import {
|
||||||
|
LayoutAnimation,
|
||||||
|
ListRenderItem,
|
||||||
|
ScrollView,
|
||||||
|
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,
|
||||||
|
useSafeAreaFrame,
|
||||||
|
useSafeAreaInsets,
|
||||||
|
} from 'react-native-safe-area-context'
|
||||||
|
import {useEvent, 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 {isAndroid} from '#/platform/detection'
|
||||||
|
import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow'
|
||||||
|
import {useProfileShadow} from '#/state/cache/profile-shadow'
|
||||||
|
import {
|
||||||
|
FeedFeedbackProvider,
|
||||||
|
useFeedFeedbackContext,
|
||||||
|
} from '#/state/feed-feedback'
|
||||||
|
import {useFeedFeedback} from '#/state/feed-feedback'
|
||||||
|
import {usePostLikeMutationQueue} from '#/state/queries/post'
|
||||||
|
import {
|
||||||
|
AuthorFilter,
|
||||||
|
FeedPostSliceItem,
|
||||||
|
usePostFeedQuery,
|
||||||
|
} from '#/state/queries/post-feed'
|
||||||
|
import {useProfileFollowMutationQueue} from '#/state/queries/profile'
|
||||||
|
import {useSession} from '#/state/session'
|
||||||
|
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, platform, ThemeProvider, tokens, useTheme} from '#/alf'
|
||||||
|
import {setNavigationBar} from '#/alf/util/navigationBar'
|
||||||
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||||
|
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
|
||||||
|
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] {
|
||||||
|
// android is typically slower and can't keep up with a 0.1 interval
|
||||||
|
const eventInterval = platform({
|
||||||
|
ios: 0.2,
|
||||||
|
android: 0.5,
|
||||||
|
default: 0,
|
||||||
|
})
|
||||||
|
const p1 = createVideoPlayer(sources?.[0] ?? '')
|
||||||
|
p1.loop = true
|
||||||
|
p1.timeUpdateEventInterval = eventInterval
|
||||||
|
const p2 = createVideoPlayer(sources?.[1] ?? '')
|
||||||
|
p2.loop = true
|
||||||
|
p2.timeUpdateEventInterval = eventInterval
|
||||||
|
const p3 = createVideoPlayer(sources?.[2] ?? '')
|
||||||
|
p3.loop = true
|
||||||
|
p3.timeUpdateEventInterval = eventInterval
|
||||||
|
return [p1, p2, p3]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function VideoFeed({}: NativeStackScreenProps<
|
||||||
|
CommonNavigatorParams,
|
||||||
|
'VideoFeed'
|
||||||
|
>) {
|
||||||
|
const {top} = useSafeAreaInsets()
|
||||||
|
const {params} = useRoute<RouteProp<CommonNavigatorParams, 'VideoFeed'>>()
|
||||||
|
|
||||||
|
const t = useTheme()
|
||||||
|
const setMinShellMode = useSetMinimalShellMode()
|
||||||
|
useFocusEffect(
|
||||||
|
useCallback(() => {
|
||||||
|
setMinShellMode(true)
|
||||||
|
setNavigationBar('lightbox', t)
|
||||||
|
return () => {
|
||||||
|
setMinShellMode(false)
|
||||||
|
setNavigationBar('theme', t)
|
||||||
|
}
|
||||||
|
}, [setMinShellMode, t]),
|
||||||
|
)
|
||||||
|
|
||||||
|
const isFocused = useIsFocused()
|
||||||
|
useSetLightStatusBar(isFocused)
|
||||||
|
|
||||||
|
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 string}` as const
|
||||||
|
case 'author':
|
||||||
|
return `author|${params.did as string}|${
|
||||||
|
params.filter as AuthorFilter
|
||||||
|
}` as const
|
||||||
|
default:
|
||||||
|
throw new Error(`Invalid video feed params ${JSON.stringify(params)}`)
|
||||||
|
}
|
||||||
|
}, [params])
|
||||||
|
|
||||||
|
const {
|
||||||
|
data,
|
||||||
|
isFetching,
|
||||||
|
refetch,
|
||||||
|
hasNextPage,
|
||||||
|
isFetchingNextPage,
|
||||||
|
fetchNextPage,
|
||||||
|
} = usePostFeedQuery(feedDesc)
|
||||||
|
const {hasSession} = useSession()
|
||||||
|
const feedFeedback = useFeedFeedback(feedDesc, hasSession)
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<FeedFeedbackProvider value={feedFeedback}>
|
||||||
|
<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>
|
||||||
|
</FeedFeedbackProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {width, height} = useSafeAreaFrame()
|
||||||
|
const {onItemSeen} = useFeedFeedbackContext()
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
let to: NodeJS.Timeout | null = null
|
||||||
|
if (active) {
|
||||||
|
to = setTimeout(() => {
|
||||||
|
onItemSeen(post)
|
||||||
|
}, 1000)
|
||||||
|
} else if (to) {
|
||||||
|
clearTimeout(to)
|
||||||
|
}
|
||||||
|
}, [active, post, onItemSeen])
|
||||||
|
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function VideoItemInner({
|
||||||
|
player,
|
||||||
|
embed,
|
||||||
|
active,
|
||||||
|
}: {
|
||||||
|
player: VideoPlayer
|
||||||
|
embed: AppBskyEmbedVideo.View
|
||||||
|
active: boolean
|
||||||
|
}) {
|
||||||
|
const {status} = useEvent(player, 'statusChange', {status: player.status})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{active && player && (
|
||||||
|
<VideoView
|
||||||
|
style={[
|
||||||
|
a.absolute,
|
||||||
|
a.inset_0,
|
||||||
|
isAndroid && status === 'loading' && {opacity: 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 profile = useProfileShadow(post.author)
|
||||||
|
const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(
|
||||||
|
profile,
|
||||||
|
'ImmersiveVideo',
|
||||||
|
)
|
||||||
|
|
||||||
|
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]}>
|
||||||
|
<View style={[a.flex_1]}>
|
||||||
|
<PlayPauseTapArea player={player} post={post} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<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]}>
|
||||||
|
<View style={[a.w_full, a.flex_row, a.align_center, a.gap_md]}>
|
||||||
|
<Link
|
||||||
|
label={_(
|
||||||
|
msg`View ${sanitizeDisplayName(
|
||||||
|
post.author.displayName || post.author.handle,
|
||||||
|
)}'s profile`,
|
||||||
|
)}
|
||||||
|
to={{
|
||||||
|
screen: 'Profile',
|
||||||
|
params: {name: post.author.did},
|
||||||
|
}}
|
||||||
|
style={[
|
||||||
|
a.flex_1,
|
||||||
|
a.flex_row,
|
||||||
|
a.gap_md,
|
||||||
|
a.pb_sm,
|
||||||
|
a.align_center,
|
||||||
|
]}>
|
||||||
|
<UserAvatar type="user" avatar={post.author.avatar} size={32} />
|
||||||
|
<View style={[a.flex_1]}>
|
||||||
|
<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>
|
||||||
|
{/* show button based on non-reactive version, so it doesn't hide on press */}
|
||||||
|
{!post.author.viewer?.following && (
|
||||||
|
<Button
|
||||||
|
label={
|
||||||
|
profile.viewer?.following
|
||||||
|
? _(msg`Following`)
|
||||||
|
: _(msg`Follow`)
|
||||||
|
}
|
||||||
|
accessibilityHint={
|
||||||
|
profile.viewer?.following ? _(msg`Unfollow user`) : ''
|
||||||
|
}
|
||||||
|
size="small"
|
||||||
|
variant="outline"
|
||||||
|
color="secondary_inverted"
|
||||||
|
style={[a.mb_xs, a.bg_transparent]}
|
||||||
|
hoverStyle={[]}
|
||||||
|
onPress={() =>
|
||||||
|
profile.viewer?.following ? queueUnfollow() : queueFollow()
|
||||||
|
}>
|
||||||
|
{!!profile.viewer?.following && (
|
||||||
|
<ButtonIcon icon={CheckIcon} />
|
||||||
|
)}
|
||||||
|
<ButtonText>
|
||||||
|
{profile.viewer?.following ? (
|
||||||
|
<Trans>Following</Trans>
|
||||||
|
) : (
|
||||||
|
<Trans>Follow</Trans>
|
||||||
|
)}
|
||||||
|
</ButtonText>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
{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}
|
||||||
|
scrollGesture={scrollGesture}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<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.xl,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Scrubber({
|
||||||
|
player,
|
||||||
|
seekingAnimationSV,
|
||||||
|
scrollGesture,
|
||||||
|
}: {
|
||||||
|
player: VideoPlayer
|
||||||
|
seekingAnimationSV: SharedValue<number>
|
||||||
|
scrollGesture: NativeGesture
|
||||||
|
}) {
|
||||||
|
const {width: screenWidth} = useSafeAreaFrame()
|
||||||
|
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 scrubPanGesture = useMemo(() => {
|
||||||
|
return Gesture.Pan()
|
||||||
|
.blocksExternalGesture(scrollGesture)
|
||||||
|
.activeOffsetX([-1, 1])
|
||||||
|
.failOffsetY([-10, 10])
|
||||||
|
.onBegin(() => {
|
||||||
|
'worklet'
|
||||||
|
})
|
||||||
|
.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}))
|
||||||
|
})
|
||||||
|
}, [
|
||||||
|
scrollGesture,
|
||||||
|
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={scrubPanGesture}>
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.relative,
|
||||||
|
a.w_full,
|
||||||
|
a.justify_end,
|
||||||
|
{
|
||||||
|
paddingBottom: insets.bottom,
|
||||||
|
height:
|
||||||
|
// bottom padding
|
||||||
|
insets.bottom +
|
||||||
|
// actual height
|
||||||
|
tokens.space.xl,
|
||||||
|
},
|
||||||
|
a.z_10,
|
||||||
|
]}>
|
||||||
|
<Animated.View style={[{backgroundColor: 'white'}, barStyle]} />
|
||||||
|
</View>
|
||||||
|
</GestureDetector>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ExpandableRichTextView({
|
||||||
|
value,
|
||||||
|
authorHandle,
|
||||||
|
}: {
|
||||||
|
value: RichTextAPI
|
||||||
|
authorHandle?: string
|
||||||
|
}) {
|
||||||
|
const {height: screenHeight} = useSafeAreaFrame()
|
||||||
|
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 {sendInteraction} = useFeedFeedbackContext()
|
||||||
|
|
||||||
|
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()
|
||||||
|
sendInteraction({
|
||||||
|
item: post.uri,
|
||||||
|
event: 'app.bsky.feed.defs#interactionLike',
|
||||||
|
})
|
||||||
|
} 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
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user