ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Always use custom PTR on Android (#1607)

This commit is contained in:
ekzyis 2024-11-19 02:13:52 +01:00 committed by GitHub
parent 5d71e57839
commit c2dc0be1c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/pull-to-refresh.js
View File

@ -4,18 +4,16 @@ import styles from './pull-to-refresh.module.css'
const REFRESH_THRESHOLD = 50 const REFRESH_THRESHOLD = 50
export default function PullToRefresh ({ children, android, className }) { export default function PullToRefresh ({ children, className }) {
const router = useRouter() const router = useRouter()
const [pullDistance, setPullDistance] = useState(0) const [pullDistance, setPullDistance] = useState(0)
const [isPWA, setIsPWA] = useState(false) const [isPWA, setIsPWA] = useState(false)
const [isAndroid, setIsAndroid] = useState(false)
const touchStartY = useRef(0) const touchStartY = useRef(0)
const touchEndY = useRef(0) const touchEndY = useRef(0)
const checkPWA = () => { const checkPWA = () => {
const androidPWA = window.matchMedia('(display-mode: standalone)').matches const androidPWA = window.matchMedia('(display-mode: standalone)').matches
const iosPWA = window.navigator.standalone === true const iosPWA = window.navigator.standalone === true
setIsAndroid(androidPWA) // we need to know if the user is on Android to enable toggling its native PTR
setIsPWA(androidPWA || iosPWA) setIsPWA(androidPWA || iosPWA)
} }
@ -23,18 +21,18 @@ export default function PullToRefresh ({ children, android, className }) {
const handleTouchStart = useCallback((e) => { const handleTouchStart = useCallback((e) => {
// don't handle if the user is not scrolling from the top of the page, is not on a PWA or if we want Android's native PTR // don't handle if the user is not scrolling from the top of the page, is not on a PWA or if we want Android's native PTR
if (!isPWA || (isAndroid && !android) || window.scrollY > 0) return if (!isPWA || window.scrollY > 0) return
touchStartY.current = e.touches[0].clientY touchStartY.current = e.touches[0].clientY
}, [isPWA, isAndroid, android]) }, [isPWA])
const handleTouchMove = useCallback((e) => { const handleTouchMove = useCallback((e) => {
if (touchStartY.current === 0) return if (touchStartY.current === 0) return
if (!isPWA || (isAndroid && !android)) return if (!isPWA) return
touchEndY.current = e.touches[0].clientY touchEndY.current = e.touches[0].clientY
const distance = touchEndY.current - touchStartY.current const distance = touchEndY.current - touchStartY.current
setPullDistance(distance) setPullDistance(distance)
document.body.style.marginTop = `${Math.max(0, Math.min(distance / 2, 25))}px` document.body.style.marginTop = `${Math.max(0, Math.min(distance / 2, 25))}px`
}, [isPWA, isAndroid, android]) }, [isPWA])
const handleTouchEnd = useCallback(() => { const handleTouchEnd = useCallback(() => {
if (touchStartY.current === 0 || touchEndY.current === 0) return if (touchStartY.current === 0 || touchEndY.current === 0) return
@ -48,7 +46,7 @@ export default function PullToRefresh ({ children, android, className }) {
}, [router]) }, [router])
useEffect(() => { useEffect(() => {
if (!isPWA || (isAndroid && !android)) return if (!isPWA) return
document.body.style.overscrollBehaviorY = 'contain' document.body.style.overscrollBehaviorY = 'contain'
document.addEventListener('touchstart', handleTouchStart) document.addEventListener('touchstart', handleTouchStart)
document.addEventListener('touchmove', handleTouchMove) document.addEventListener('touchmove', handleTouchMove)
@ -60,7 +58,7 @@ export default function PullToRefresh ({ children, android, className }) {
document.removeEventListener('touchmove', handleTouchMove) document.removeEventListener('touchmove', handleTouchMove)
document.removeEventListener('touchend', handleTouchEnd) document.removeEventListener('touchend', handleTouchEnd)
} }
}, [isPWA, isAndroid, android, handleTouchStart, handleTouchMove, handleTouchEnd]) }, [isPWA, handleTouchStart, handleTouchMove, handleTouchEnd])
const pullMessage = useMemo(() => { const pullMessage = useMemo(() => {
if (pullDistance > REFRESH_THRESHOLD) return 'release to refresh' if (pullDistance > REFRESH_THRESHOLD) return 'release to refresh'