preserve video's last known time when scrolling away (#6239)
This commit is contained in:
@@ -24,6 +24,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
||||
useActiveVideoWeb()
|
||||
const [onScreen, setOnScreen] = useState(false)
|
||||
const [isFullscreen] = useFullscreen()
|
||||
const lastKnownTime = useRef<number | undefined>()
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return
|
||||
@@ -82,6 +83,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
||||
active={active}
|
||||
setActive={setActive}
|
||||
onScreen={onScreen}
|
||||
lastKnownTime={lastKnownTime}
|
||||
/>
|
||||
</ViewportObserver>
|
||||
</ErrorBoundary>
|
||||
|
||||
@@ -13,11 +13,13 @@ export function VideoEmbedInnerWeb({
|
||||
active,
|
||||
setActive,
|
||||
onScreen,
|
||||
lastKnownTime,
|
||||
}: {
|
||||
embed: AppBskyEmbedVideo.View
|
||||
active: boolean
|
||||
setActive: () => void
|
||||
onScreen: boolean
|
||||
lastKnownTime: React.MutableRefObject<number | undefined>
|
||||
}) {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const videoRef = useRef<HTMLVideoElement>(null)
|
||||
@@ -40,6 +42,12 @@ export function VideoEmbedInnerWeb({
|
||||
setHlsLoading,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (lastKnownTime.current && videoRef.current) {
|
||||
videoRef.current.currentTime = lastKnownTime.current
|
||||
}
|
||||
}, [lastKnownTime])
|
||||
|
||||
return (
|
||||
<View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}>
|
||||
<div ref={containerRef} style={{height: '100%', width: '100%'}}>
|
||||
@@ -52,6 +60,9 @@ export function VideoEmbedInnerWeb({
|
||||
preload="none"
|
||||
muted={!focused}
|
||||
aria-labelledby={embed.alt ? figId : undefined}
|
||||
onTimeUpdate={e => {
|
||||
lastKnownTime.current = e.currentTarget.currentTime
|
||||
}}
|
||||
/>
|
||||
{embed.alt && (
|
||||
<figcaption
|
||||
|
||||
Reference in New Issue
Block a user