diff --git a/src/screens/VideoFeed/index.tsx b/src/screens/VideoFeed/index.tsx index 84b589ecac..b439a90370 100644 --- a/src/screens/VideoFeed/index.tsx +++ b/src/screens/VideoFeed/index.tsx @@ -48,6 +48,8 @@ import { } from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {EyeSlash_Stroke2_Corner0_Rounded as Eye} from '#/components/icons/EyeSlash' +import * as Hider from '#/components/moderation/Hider' import {HITSLOP_20} from '#/lib/constants' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' @@ -151,7 +153,7 @@ export function VideoFeed({}: NativeStackScreenProps< type CurrentSource = { source: string - moderation?: ModerationDecision + moderation: ModerationDecision } | null function Feed() { @@ -208,6 +210,8 @@ function Feed() { const renderItem: ListRenderItem = useCallback( ({item, index}) => { const {post} = item + + // filtered above, here for TS if (!post.embed || !AppBskyEmbedVideo.isView(post.embed)) { return null } @@ -215,6 +219,10 @@ function Feed() { const player = players?.[index % 3] const currentSource = currentSources[index % 3] + if (!currentSource?.moderation) { + return null + } + return ( ) @@ -445,7 +453,7 @@ function VideoItem({ embed: AppBskyEmbedVideo.View active: boolean scrollGesture: NativeGesture - moderation?: ModerationDecision + moderation: ModerationDecision }) { const postShadow = usePostShadow(post) const {width, height} = useSafeAreaFrame() @@ -495,6 +503,7 @@ function VideoItem({ void +}) { + const hider = Hider.useHider() + const {_} = useLingui() + + const onShow = React.useCallback(() => { + hider.setIsContentVisible(true) + onPressShow() + }, [hider]) + + return ( + + + + + + + Hidden by your moderation settings. + + + + + + ) +} + function Overlay({ player, post, + embed, active, scrollGesture, -}: // moderation -{ + moderation, +}: { player?: VideoPlayer post: Shadow + embed: AppBskyEmbedVideo.View active: boolean scrollGesture: NativeGesture - moderation?: ModerationDecision + moderation: ModerationDecision }) { const {_} = useLingui() const t = useTheme() @@ -574,122 +632,137 @@ function Overlay({ })) return ( - <> - - - - + + + { + player?.play() + }} + /> + + + + + + - - - - - - - - {sanitizeDisplayName( + + + + - - {sanitizeHandle(post.author.handle, '@')} - - - - {/* show button based on non-reactive version, so it doesn't hide on press */} - {!post.author.viewer?.following && ( - + + {profile.viewer?.following ? ( + Following + ) : ( + Follow + )} + + + )} + + {record?.text?.trim() && ( + + + )} - - {record?.text?.trim() && ( - - - - )} - {record && ( - - - navigation.navigate('PostThread', { - name: post.author.did, - rkey, - }) - } - big - /> - - )} - + {record && ( + + + navigation.navigate('PostThread', { + name: post.author.did, + rkey, + }) + } + big + /> + + )} + - {player && active ? ( - - ) : ( - - )} - - - {/* + {player && active ? ( + + ) : ( + + )} + + + {/* {isAndroid && status === 'loading' && ( )} */} - + + ) } @@ -954,17 +1028,24 @@ function ExpandableRichTextView({ function VideoItemPlaceholder({ embed, style, + blur, }: { embed: AppBskyEmbedVideo.View style?: ImageStyle + blur?: boolean }) { const src = embed.thumbnail + let contentFit = isTallAspectRatio(embed.aspectRatio) ? 'cover' : 'contain' + if (blur) { + contentFit = 'cover' + } return src ? ( ) : null }