disable autoplay within messages and trim feelers (#5260)
parent
b04ecbe54d
commit
580b67ba37
|
@ -0,0 +1,17 @@
|
|||
import React from 'react'
|
||||
|
||||
const MessageContext = React.createContext(false)
|
||||
|
||||
export function MessageContextProvider({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<MessageContext.Provider value={true}>{children}</MessageContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useIsWithinMessage() {
|
||||
return React.useContext(MessageContext)
|
||||
}
|
|
@ -4,6 +4,7 @@ import {AppBskyEmbedRecord} from '@atproto/api'
|
|||
|
||||
import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
|
||||
import {atoms as a, native, useTheme} from '#/alf'
|
||||
import {MessageContextProvider} from './MessageContext'
|
||||
|
||||
let MessageItemEmbed = ({
|
||||
embed,
|
||||
|
@ -13,6 +14,7 @@ let MessageItemEmbed = ({
|
|||
const t = useTheme()
|
||||
|
||||
return (
|
||||
<MessageContextProvider>
|
||||
<View style={[a.my_xs, t.atoms.bg, native({flexBasis: 0})]}>
|
||||
<PostEmbeds
|
||||
embed={embed}
|
||||
|
@ -20,6 +22,7 @@ let MessageItemEmbed = ({
|
|||
viewContext={PostEmbedViewContext.Feed}
|
||||
/>
|
||||
</View>
|
||||
</MessageContextProvider>
|
||||
)
|
||||
}
|
||||
MessageItemEmbed = React.memo(MessageItemEmbed)
|
||||
|
|
|
@ -11,6 +11,7 @@ import {useAutoplayDisabled} from 'state/preferences'
|
|||
import {VideoEmbedInnerNative} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {Button} from '#/components/Button'
|
||||
import {useIsWithinMessage} from '#/components/dms/MessageContext'
|
||||
import {Loader} from '#/components/Loader'
|
||||
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
|
||||
import {VisibilityView} from '../../../../../modules/expo-bluesky-swiss-army'
|
||||
|
@ -68,7 +69,8 @@ function InnerWrapper({embed}: Props) {
|
|||
const [isMuted, setIsMuted] = useState(player.muted)
|
||||
const [isFullscreen, setIsFullscreen] = React.useState(false)
|
||||
const [timeRemaining, setTimeRemaining] = React.useState(0)
|
||||
const disableAutoplay = useAutoplayDisabled()
|
||||
const isWithinMessage = useIsWithinMessage()
|
||||
const disableAutoplay = useAutoplayDisabled() || isWithinMessage
|
||||
const isActive = embed.playlist === activeSource && activeViewId === viewId
|
||||
// There are some different loading states that we should pay attention to and show a spinner for
|
||||
const isLoading =
|
||||
|
|
|
@ -12,6 +12,7 @@ import {
|
|||
VideoNotFoundError,
|
||||
} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {useIsWithinMessage} from '#/components/dms/MessageContext'
|
||||
import {useFullscreen} from '#/components/hooks/useFullscreen'
|
||||
import {ErrorBoundary} from '../ErrorBoundary'
|
||||
import {useActiveVideoWeb} from './ActiveVideoWebContext'
|
||||
|
@ -42,6 +43,16 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
|||
return () => observer.disconnect()
|
||||
}, [sendPosition, isFullscreen])
|
||||
|
||||
// In case scrolling hasn't started yet, send up the position
|
||||
const isAnyViewActive = currentActiveView !== null
|
||||
useEffect(() => {
|
||||
if (ref.current && !isAnyViewActive) {
|
||||
const rect = ref.current.getBoundingClientRect()
|
||||
const position = rect.y + rect.height / 2
|
||||
sendPosition(position)
|
||||
}
|
||||
}, [isAnyViewActive, sendPosition])
|
||||
|
||||
const [key, setKey] = useState(0)
|
||||
const renderError = useCallback(
|
||||
(error: unknown) => (
|
||||
|
@ -73,9 +84,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
|||
style={{display: 'flex', flex: 1, cursor: 'default'}}
|
||||
onClick={evt => evt.stopPropagation()}>
|
||||
<ErrorBoundary renderError={renderError} key={key}>
|
||||
<ViewportObserver
|
||||
sendPosition={sendPosition}
|
||||
isAnyViewActive={currentActiveView !== null}>
|
||||
<ViewportObserver sendPosition={sendPosition}>
|
||||
<VideoEmbedInnerWeb
|
||||
embed={embed}
|
||||
active={active}
|
||||
|
@ -96,15 +105,14 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
|||
function ViewportObserver({
|
||||
children,
|
||||
sendPosition,
|
||||
isAnyViewActive,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
sendPosition: (position: number) => void
|
||||
isAnyViewActive?: boolean
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const [nearScreen, setNearScreen] = useState(false)
|
||||
const [isFullscreen] = useFullscreen()
|
||||
const isWithinMessage = useIsWithinMessage()
|
||||
|
||||
// Send position when scrolling. This is done with an IntersectionObserver
|
||||
// observing a div of 100vh height
|
||||
|
@ -126,25 +134,18 @@ function ViewportObserver({
|
|||
return () => observer.disconnect()
|
||||
}, [sendPosition, isFullscreen])
|
||||
|
||||
// In case scrolling hasn't started yet, send up the position
|
||||
useEffect(() => {
|
||||
if (ref.current && !isAnyViewActive) {
|
||||
const rect = ref.current.getBoundingClientRect()
|
||||
const position = rect.y + rect.height / 2
|
||||
sendPosition(position)
|
||||
}
|
||||
}, [isAnyViewActive, sendPosition])
|
||||
|
||||
return (
|
||||
<View style={[a.flex_1, a.flex_row]}>
|
||||
{nearScreen && children}
|
||||
<div
|
||||
ref={ref}
|
||||
style={{
|
||||
// Don't escape bounds when in a message
|
||||
...(isWithinMessage
|
||||
? {top: 0, height: '100%'}
|
||||
: {top: 'calc(50% - 50vh)', height: '100vh'}),
|
||||
position: 'absolute',
|
||||
top: 'calc(50% - 50vh)',
|
||||
left: '50%',
|
||||
height: '100vh',
|
||||
width: 1,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
|
|
|
@ -15,6 +15,7 @@ import {
|
|||
} from '#/state/preferences'
|
||||
import {atoms as a, useTheme, web} from '#/alf'
|
||||
import {Button} from '#/components/Button'
|
||||
import {useIsWithinMessage} from '#/components/dms/MessageContext'
|
||||
import {useFullscreen} from '#/components/hooks/useFullscreen'
|
||||
import {useInteractionState} from '#/components/hooks/useInteractionState'
|
||||
import {
|
||||
|
@ -113,7 +114,8 @@ export function Controls({
|
|||
}, [active, pause, setFocused])
|
||||
|
||||
// autoplay/pause based on visibility
|
||||
const autoplayDisabled = useAutoplayDisabled()
|
||||
const isWithinMessage = useIsWithinMessage()
|
||||
const autoplayDisabled = useAutoplayDisabled() || isWithinMessage
|
||||
useEffect(() => {
|
||||
if (active) {
|
||||
if (onScreen) {
|
||||
|
|
Loading…
Reference in New Issue