forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
disable autoplay within messages and trim feelers (#5260)
authored by
Samuel Newman
and committed by
GitHub
580b67ba
b04ecbe5
+50
-25
+17
src/components/dms/MessageContext.tsx
+17
src/components/dms/MessageContext.tsx
···
1
+
import React from 'react'
2
+
3
+
const MessageContext = React.createContext(false)
4
+
5
+
export function MessageContextProvider({
6
+
children,
7
+
}: {
8
+
children: React.ReactNode
9
+
}) {
10
+
return (
11
+
<MessageContext.Provider value={true}>{children}</MessageContext.Provider>
12
+
)
13
+
}
14
+
15
+
export function useIsWithinMessage() {
16
+
return React.useContext(MessageContext)
17
+
}
+10
-7
src/components/dms/MessageItemEmbed.tsx
+10
-7
src/components/dms/MessageItemEmbed.tsx
···
4
4
5
5
import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
6
6
import {atoms as a, native, useTheme} from '#/alf'
7
+
import {MessageContextProvider} from './MessageContext'
7
8
8
9
let MessageItemEmbed = ({
9
10
embed,
···
13
14
const t = useTheme()
14
15
15
16
return (
16
-
<View style={[a.my_xs, t.atoms.bg, native({flexBasis: 0})]}>
17
-
<PostEmbeds
18
-
embed={embed}
19
-
allowNestedQuotes
20
-
viewContext={PostEmbedViewContext.Feed}
21
-
/>
22
-
</View>
17
+
<MessageContextProvider>
18
+
<View style={[a.my_xs, t.atoms.bg, native({flexBasis: 0})]}>
19
+
<PostEmbeds
20
+
embed={embed}
21
+
allowNestedQuotes
22
+
viewContext={PostEmbedViewContext.Feed}
23
+
/>
24
+
</View>
25
+
</MessageContextProvider>
23
26
)
24
27
}
25
28
MessageItemEmbed = React.memo(MessageItemEmbed)
+3
-1
src/view/com/util/post-embeds/VideoEmbed.tsx
+3
-1
src/view/com/util/post-embeds/VideoEmbed.tsx
···
11
11
import {VideoEmbedInnerNative} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative'
12
12
import {atoms as a} from '#/alf'
13
13
import {Button} from '#/components/Button'
14
+
import {useIsWithinMessage} from '#/components/dms/MessageContext'
14
15
import {Loader} from '#/components/Loader'
15
16
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
16
17
import {VisibilityView} from '../../../../../modules/expo-bluesky-swiss-army'
···
68
69
const [isMuted, setIsMuted] = useState(player.muted)
69
70
const [isFullscreen, setIsFullscreen] = React.useState(false)
70
71
const [timeRemaining, setTimeRemaining] = React.useState(0)
71
-
const disableAutoplay = useAutoplayDisabled()
72
+
const isWithinMessage = useIsWithinMessage()
73
+
const disableAutoplay = useAutoplayDisabled() || isWithinMessage
72
74
const isActive = embed.playlist === activeSource && activeViewId === viewId
73
75
// There are some different loading states that we should pay attention to and show a spinner for
74
76
const isLoading =
+17
-16
src/view/com/util/post-embeds/VideoEmbed.web.tsx
+17
-16
src/view/com/util/post-embeds/VideoEmbed.web.tsx
···
12
12
VideoNotFoundError,
13
13
} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb'
14
14
import {atoms as a} from '#/alf'
15
+
import {useIsWithinMessage} from '#/components/dms/MessageContext'
15
16
import {useFullscreen} from '#/components/hooks/useFullscreen'
16
17
import {ErrorBoundary} from '../ErrorBoundary'
17
18
import {useActiveVideoWeb} from './ActiveVideoWebContext'
···
42
43
return () => observer.disconnect()
43
44
}, [sendPosition, isFullscreen])
44
45
46
+
// In case scrolling hasn't started yet, send up the position
47
+
const isAnyViewActive = currentActiveView !== null
48
+
useEffect(() => {
49
+
if (ref.current && !isAnyViewActive) {
50
+
const rect = ref.current.getBoundingClientRect()
51
+
const position = rect.y + rect.height / 2
52
+
sendPosition(position)
53
+
}
54
+
}, [isAnyViewActive, sendPosition])
55
+
45
56
const [key, setKey] = useState(0)
46
57
const renderError = useCallback(
47
58
(error: unknown) => (
···
73
84
style={{display: 'flex', flex: 1, cursor: 'default'}}
74
85
onClick={evt => evt.stopPropagation()}>
75
86
<ErrorBoundary renderError={renderError} key={key}>
76
-
<ViewportObserver
77
-
sendPosition={sendPosition}
78
-
isAnyViewActive={currentActiveView !== null}>
87
+
<ViewportObserver sendPosition={sendPosition}>
79
88
<VideoEmbedInnerWeb
80
89
embed={embed}
81
90
active={active}
···
96
105
function ViewportObserver({
97
106
children,
98
107
sendPosition,
99
-
isAnyViewActive,
100
108
}: {
101
109
children: React.ReactNode
102
110
sendPosition: (position: number) => void
103
-
isAnyViewActive?: boolean
104
111
}) {
105
112
const ref = useRef<HTMLDivElement>(null)
106
113
const [nearScreen, setNearScreen] = useState(false)
107
114
const [isFullscreen] = useFullscreen()
115
+
const isWithinMessage = useIsWithinMessage()
108
116
109
117
// Send position when scrolling. This is done with an IntersectionObserver
110
118
// observing a div of 100vh height
···
126
134
return () => observer.disconnect()
127
135
}, [sendPosition, isFullscreen])
128
136
129
-
// In case scrolling hasn't started yet, send up the position
130
-
useEffect(() => {
131
-
if (ref.current && !isAnyViewActive) {
132
-
const rect = ref.current.getBoundingClientRect()
133
-
const position = rect.y + rect.height / 2
134
-
sendPosition(position)
135
-
}
136
-
}, [isAnyViewActive, sendPosition])
137
-
138
137
return (
139
138
<View style={[a.flex_1, a.flex_row]}>
140
139
{nearScreen && children}
141
140
<div
142
141
ref={ref}
143
142
style={{
143
+
// Don't escape bounds when in a message
144
+
...(isWithinMessage
145
+
? {top: 0, height: '100%'}
146
+
: {top: 'calc(50% - 50vh)', height: '100vh'}),
144
147
position: 'absolute',
145
-
top: 'calc(50% - 50vh)',
146
148
left: '50%',
147
-
height: '100vh',
148
149
width: 1,
149
150
pointerEvents: 'none',
150
151
}}
+3
-1
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
+3
-1
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
···
15
15
} from '#/state/preferences'
16
16
import {atoms as a, useTheme, web} from '#/alf'
17
17
import {Button} from '#/components/Button'
18
+
import {useIsWithinMessage} from '#/components/dms/MessageContext'
18
19
import {useFullscreen} from '#/components/hooks/useFullscreen'
19
20
import {useInteractionState} from '#/components/hooks/useInteractionState'
20
21
import {
···
113
114
}, [active, pause, setFocused])
114
115
115
116
// autoplay/pause based on visibility
116
-
const autoplayDisabled = useAutoplayDisabled()
117
+
const isWithinMessage = useIsWithinMessage()
118
+
const autoplayDisabled = useAutoplayDisabled() || isWithinMessage
117
119
useEffect(() => {
118
120
if (active) {
119
121
if (onScreen) {