preserve video's last known time when scrolling away (#6239)

This commit is contained in:
Andrew Aquino
2024-11-19 14:42:25 -08:00
committed by GitHub
parent f882cf9737
commit 78e34c8d35
2 changed files with 13 additions and 0 deletions
@@ -24,6 +24,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
useActiveVideoWeb() useActiveVideoWeb()
const [onScreen, setOnScreen] = useState(false) const [onScreen, setOnScreen] = useState(false)
const [isFullscreen] = useFullscreen() const [isFullscreen] = useFullscreen()
const lastKnownTime = useRef<number | undefined>()
useEffect(() => { useEffect(() => {
if (!ref.current) return if (!ref.current) return
@@ -82,6 +83,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
active={active} active={active}
setActive={setActive} setActive={setActive}
onScreen={onScreen} onScreen={onScreen}
lastKnownTime={lastKnownTime}
/> />
</ViewportObserver> </ViewportObserver>
</ErrorBoundary> </ErrorBoundary>
@@ -13,11 +13,13 @@ export function VideoEmbedInnerWeb({
active, active,
setActive, setActive,
onScreen, onScreen,
lastKnownTime,
}: { }: {
embed: AppBskyEmbedVideo.View embed: AppBskyEmbedVideo.View
active: boolean active: boolean
setActive: () => void setActive: () => void
onScreen: boolean onScreen: boolean
lastKnownTime: React.MutableRefObject<number | undefined>
}) { }) {
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
const videoRef = useRef<HTMLVideoElement>(null) const videoRef = useRef<HTMLVideoElement>(null)
@@ -40,6 +42,12 @@ export function VideoEmbedInnerWeb({
setHlsLoading, setHlsLoading,
}) })
useEffect(() => {
if (lastKnownTime.current && videoRef.current) {
videoRef.current.currentTime = lastKnownTime.current
}
}, [lastKnownTime])
return ( return (
<View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}> <View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}>
<div ref={containerRef} style={{height: '100%', width: '100%'}}> <div ref={containerRef} style={{height: '100%', width: '100%'}}>
@@ -52,6 +60,9 @@ export function VideoEmbedInnerWeb({
preload="none" preload="none"
muted={!focused} muted={!focused}
aria-labelledby={embed.alt ? figId : undefined} aria-labelledby={embed.alt ? figId : undefined}
onTimeUpdate={e => {
lastKnownTime.current = e.currentTarget.currentTime
}}
/> />
{embed.alt && ( {embed.alt && (
<figcaption <figcaption