acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

changes to handle staged videos

Browse Source
This commit is contained in:
Samuel Newman
2025-07-07 11:58:48 +03:00
parent 34291131b4
commit ab9fe32688
3 changed files with 97 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerNative.tsx
+53 -28
View File
@@ -13,7 +13,6 @@ import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
import {Pause_Filled_Corner0_Rounded as PauseIcon} from '#/components/icons/Pause'
import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
import {useVideoMuteState} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
import {TimeIndicator} from './TimeIndicator'
@@ -23,12 +22,14 @@ export const VideoEmbedInnerNative = React.forwardRef(
embed,
setStatus,
setIsLoading,
setIsActive,
activeState,
setActiveState,
}: {
embed: AppBskyEmbedVideo.View
setStatus: (status: 'playing' | 'paused') => void
setIsLoading: (isLoading: boolean) => void
setIsActive: (isActive: boolean) => void
activeState: 'active' | 'inactive' | 'staged'
setActiveState: (activeState: 'active' | 'inactive' | 'staged') => void
},
ref: React.Ref<{togglePlayback: () => void}>,
) {
@@ -60,7 +61,13 @@ export const VideoEmbedInnerNative = React.forwardRef(
beginMuted={autoplayDisabled ? false : muted}
style={[a.rounded_sm]}
onActiveChange={e => {
setIsActive(e.nativeEvent.isActive)
setActiveState(
(
e.nativeEvent as unknown as {
state: 'active' | 'inactive' | 'staged'
}
).state,
)
}}
onLoadingChange={e => {
setIsLoading(e.nativeEvent.isLoading)
@@ -85,8 +92,13 @@ export const VideoEmbedInnerNative = React.forwardRef(
accessibilityHint=""
/>
<VideoControls
enterFullscreen={() => {
videoRef.current?.enterFullscreen(true)
activeState={activeState}
onPress={() => {
if (activeState === 'active') {
videoRef.current?.enterFullscreen(true)
} else {
videoRef.current?.togglePlayback()
}
}}
toggleMuted={() => {
videoRef.current?.toggleMuted()
@@ -97,20 +109,21 @@ export const VideoEmbedInnerNative = React.forwardRef(
isPlaying={isPlaying}
timeRemaining={timeRemaining}
/>
<MediaInsetBorder />
</View>
)
},
)
function VideoControls({
enterFullscreen,
activeState,
onPress,
toggleMuted,
togglePlayback,
timeRemaining,
isPlaying,
}: {
enterFullscreen: () => void
activeState: 'active' | 'inactive' | 'staged'
onPress: () => void
toggleMuted: () => void
togglePlayback: () => void
timeRemaining: number
@@ -124,18 +137,25 @@ function VideoControls({
// 1. timeRemaining is a number - was seeing NaNs
// 2. duration is greater than 0 - means metadata has loaded
// 3. we're less than 5 second into the video
const showTime = !isNaN(timeRemaining)
const showTime =
!isNaN(timeRemaining) &&
(activeState === 'active' ? true : timeRemaining > 0)
return (
<View style={[a.absolute, a.inset_0]}>
<Pressable
onPress={enterFullscreen}
onPress={onPress}
style={a.flex_1}
accessibilityLabel={_(msg`Video`)}
accessibilityHint={_(msg`Enters full screen`)}
accessibilityHint={
activeState === 'active'
? _(msg`Enters full screen`)
: _(msg`Play video`)
}
accessibilityRole="button"
/>
<ControlButton
disabled={activeState !== 'active'}
onPress={togglePlayback}
label={isPlaying ? _(msg`Pause`) : _(msg`Play`)}
accessibilityHint={_(msg`Plays or pauses the video`)}
@@ -148,21 +168,23 @@ function VideoControls({
</ControlButton>
{showTime && <TimeIndicator time={timeRemaining} style={{left: 33}} />}
<ControlButton
onPress={toggleMuted}
label={
muted
? _(msg({message: `Unmute`, context: 'video'}))
: _(msg({message: `Mute`, context: 'video'}))
}
accessibilityHint={_(msg`Toggles the sound`)}
style={{right: 6}}>
{muted ? (
<MuteIcon width={13} fill={t.palette.white} />
) : (
<UnmuteIcon width={13} fill={t.palette.white} />
)}
</ControlButton>
{activeState === 'active' && (
<ControlButton
onPress={toggleMuted}
label={
muted
? _(msg({message: `Unmute`, context: 'video'}))
: _(msg({message: `Mute`, context: 'video'}))
}
accessibilityHint={_(msg`Toggles the sound`)}
style={{right: 6}}>
{muted ? (
<MuteIcon width={13} fill={t.palette.white} />
) : (
<UnmuteIcon width={13} fill={t.palette.white} />
)}
</ControlButton>
)}
</View>
)
}
@@ -173,12 +195,14 @@ function ControlButton({
label,
accessibilityHint,
style,
disabled,
}: {
onPress: () => void
children: React.ReactNode
label: string
accessibilityHint: string
style?: StyleProp<ViewStyle>
disabled?: boolean
}) {
return (
<View
@@ -202,7 +226,8 @@ function ControlButton({
accessibilityLabel={label}
accessibilityHint={accessibilityHint}
accessibilityRole="button"
hitSlop={HITSLOP_30}>
hitSlop={HITSLOP_30}
disabled={disabled}>
{children}
</Pressable>
</View>
src/components/Post/Embed/VideoEmbed/index.tsx
+42 -19
View File
@@ -1,15 +1,17 @@
import React, {useCallback, useState} from 'react'
import {useCallback, useEffect, useRef, useState} from 'react'
import {ActivityIndicator, View} from 'react-native'
import {ImageBackground} from 'expo-image'
import {type AppBskyEmbedVideo} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {isAndroid} from '#/platform/detection'
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, platform, useTheme} from '#/alf'
import {Button} from '#/components/Button'
import {useThrottledValue} from '#/components/hooks/useThrottledValue'
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
import {VideoEmbedInnerNative} from './VideoEmbedInner/VideoEmbedInnerNative'
import * as VideoFallback from './VideoEmbedInner/VideoFallback'
@@ -81,26 +83,31 @@ export function VideoEmbed({embed, crop}: Props) {
function InnerWrapper({embed}: Props) {
const {_} = useLingui()
const ref = React.useRef<{togglePlayback: () => void}>(null)
const ref = useRef<{togglePlayback: () => void}>(null)
const [status, setStatus] = React.useState<'playing' | 'paused' | 'pending'>(
const [status, setStatus] = useState<'playing' | 'paused' | 'pending'>(
'pending',
)
const [isLoading, setIsLoading] = React.useState(false)
const [isActive, setIsActive] = React.useState(false)
const showSpinner = useThrottledValue(isActive && isLoading, 100)
const [isLoading, setIsLoading] = useState(false)
const [activeState, setActiveState] = useState<
'active' | 'inactive' | 'staged'
>('inactive')
const showSpinner = useThrottledValue(
activeState === 'active' && isLoading,
100,
)
const showOverlay =
!isActive ||
isLoading ||
(status === 'paused' && !isActive) ||
status === 'pending'
activeState === 'inactive' ||
(activeState === 'active' && (isLoading || status === 'pending'))
React.useEffect(() => {
if (!isActive && status !== 'pending') {
setStatus('pending')
useEffect(() => {
if (isAndroid) {
if (activeState === 'inactive' && status !== 'pending') {
setStatus('pending')
}
}
}, [isActive, status])
}, [activeState, status])
return (
<>
@@ -108,7 +115,8 @@ function InnerWrapper({embed}: Props) {
embed={embed}
setStatus={setStatus}
setIsLoading={setIsLoading}
setIsActive={setIsActive}
activeState={activeState}
setActiveState={setActiveState}
ref={ref}
/>
<ImageBackground
@@ -120,14 +128,26 @@ function InnerWrapper({embed}: Props) {
{
backgroundColor: 'transparent', // If you don't add `backgroundColor` to the styles here,
// the play button won't show up on the first render on android 🥴😮‍💨
display: showOverlay ? 'flex' : 'none',
},
// loading videos are black on android and transparent on ios
// therefore on ios we can just keep the thumbnail behind the video to reduce flicker
// but on android we need to overlay it and just turn it on and off
platform({
ios: {zIndex: showOverlay ? 1 : -1},
android: {display: showOverlay ? 'flex' : 'none'},
}),
]}
cachePolicy="memory-disk" // Preferring memory cache helps to avoid flicker when re-displaying on android
>
{showOverlay && (
<Button
style={[a.flex_1, a.align_center, a.justify_center]}
style={[
a.flex_1,
a.align_center,
a.justify_center,
a.absolute,
a.inset_0,
]}
onPress={() => {
ref.current?.togglePlayback()
}}
@@ -143,12 +163,15 @@ function InnerWrapper({embed}: Props) {
]}>
<ActivityIndicator size="large" color="white" />
</View>
) : (
) : activeState === 'inactive' ? (
<PlayButtonIcon />
) : (
<View />
)}
</Button>
)}
</ImageBackground>
<MediaInsetBorder />
</>
)
}
src/view/com/composer/videos/VideoPreview.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import React from 'react'
import {View} from 'react-native'
import {ImagePickerAsset} from 'expo-image-picker'
import {type ImagePickerAsset} from 'expo-image-picker'
import {BlueskyVideoView} from '@haileyok/bluesky-video'
import {CompressedVideo} from '#/lib/media/video/types'
import {type CompressedVideo} from '#/lib/media/video/types'
import {clamp} from '#/lib/numbers'
import {useAutoplayDisabled} from '#/state/preferences'
import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn'