forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Exempt gifs from active video system (#9824)
authored by
Samuel Newman
and committed by
GitHub
3abc3618
e6c4a539
+23
-9
+3
-2
src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VideoControls.tsx
+3
-2
src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VideoControls.tsx
···
130
130
const autoplayDisabled = useAutoplayDisabled() || isWithinMessage
131
131
useEffect(() => {
132
132
if (active) {
133
-
if (onScreen) {
133
+
// GIFs play immediately, videos wait until onScreen
134
+
if (onScreen || isGif) {
134
135
if (!autoplayDisabled) play()
135
136
} else {
136
137
pause()
137
138
}
138
139
}
139
-
}, [onScreen, pause, active, play, autoplayDisabled])
140
+
}, [onScreen, pause, active, play, autoplayDisabled, isGif])
140
141
141
142
// use minimal quality when not focused
142
143
useEffect(() => {
+20
-7
src/components/Post/Embed/VideoEmbed/index.web.tsx
+20
-7
src/components/Post/Embed/VideoEmbed/index.web.tsx
···
26
26
import {useActiveVideoWeb} from './ActiveVideoWebContext'
27
27
import * as VideoFallback from './VideoEmbedInner/VideoFallback'
28
28
29
+
const noop = () => {}
30
+
29
31
export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
30
32
const t = useTheme()
31
33
const ref = useRef<HTMLDivElement>(null)
32
-
const {active, setActive, sendPosition, currentActiveView} =
33
-
useActiveVideoWeb()
34
+
const {
35
+
active: activeFromContext,
36
+
setActive,
37
+
sendPosition,
38
+
currentActiveView,
39
+
} = useActiveVideoWeb()
34
40
const [onScreen, setOnScreen] = useState(false)
35
41
const [isFullscreen] = useFullscreen()
36
42
const lastKnownTime = useRef<number | undefined>(undefined)
37
43
44
+
const isGif = embed.presentation === 'gif'
45
+
// GIFs don't participate in the "one video at a time" system
46
+
const active = isGif || activeFromContext
47
+
38
48
useEffect(() => {
39
49
if (!ref.current) return
40
50
if (isFullscreen && !IS_WEB_FIREFOX) return
···
43
53
const entry = entries[0]
44
54
if (!entry) return
45
55
setOnScreen(entry.isIntersecting)
46
-
sendPosition(
47
-
entry.boundingClientRect.y + entry.boundingClientRect.height / 2,
48
-
)
56
+
// GIFs don't send position - they don't compete to be the active video
57
+
if (!isGif) {
58
+
sendPosition(
59
+
entry.boundingClientRect.y + entry.boundingClientRect.height / 2,
60
+
)
61
+
}
49
62
},
50
63
{threshold: 0.5},
51
64
)
52
65
observer.observe(ref.current)
53
66
return () => observer.disconnect()
54
-
}, [sendPosition, isFullscreen])
67
+
}, [sendPosition, isFullscreen, isGif])
55
68
56
69
const [key, setKey] = useState(0)
57
70
const renderError = useCallback(
···
107
120
return (
108
121
<View style={[a.pt_xs]}>
109
122
<ViewportObserver
110
-
sendPosition={sendPosition}
123
+
sendPosition={isGif ? noop : sendPosition}
111
124
isAnyViewActive={currentActiveView !== null}>
112
125
<ConstrainedImage
113
126
fullBleed