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()
|
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
|
||||||
|
|||||||
Reference in New Issue
Block a user