diff --git a/src/app.css b/src/app.css index 65d13e05..21662275 100644 --- a/src/app.css +++ b/src/app.css @@ -897,6 +897,7 @@ button.carousel-dot:is(.active, [disabled].active) { 0 10px 36px -4px var(--button-bg-blur-color); transition: all 0.3s ease-in-out; } +#home-page:has(header[hidden]) ~ #compose-button, #compose-button[hidden] { transform: translateY(200%); pointer-events: none; diff --git a/src/app.jsx b/src/app.jsx index 022ea801..58c297b7 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -9,7 +9,13 @@ import { useRef, useState, } from 'preact/hooks'; -import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'; +import { + matchPath, + Route, + Routes, + useLocation, + useNavigate, +} from 'react-router-dom'; import Toastify from 'toastify-js'; import { useSnapshot } from 'valtio'; @@ -28,6 +34,7 @@ import Favourites from './pages/favourites'; import Following from './pages/following'; import Hashtags from './pages/hashtags'; import Home from './pages/home'; +import HomeV1 from './pages/home-v1'; import Lists from './pages/lists'; import Login from './pages/login'; import Notifications from './pages/notifications'; @@ -132,14 +139,14 @@ function App() { } }, [snapStates.showCompose, snapStates.showSettings, snapStates.showAccount]); - useEffect(() => { - // HACK: prevent this from running again due to HMR - if (states.init) return; - if (isLoggedIn) { - requestAnimationFrame(startVisibility); - states.init = true; - } - }, [isLoggedIn]); + // useEffect(() => { + // // HACK: prevent this from running again due to HMR + // if (states.init) return; + // if (isLoggedIn) { + // requestAnimationFrame(startVisibility); + // states.init = true; + // } + // }, [isLoggedIn]); const { prevLocation } = snapStates; const backgroundLocation = useRef(prevLocation || null); @@ -184,6 +191,7 @@ function App() { } /> )} {isLoggedIn && } />} + {isLoggedIn && } />} {isLoggedIn && } />} {isLoggedIn && } />} {isLoggedIn && } />} diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index c36d5c70..c0fb39b7 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -23,6 +23,8 @@ function Timeline({ fetchItems = () => {}, checkForUpdates = () => {}, checkForUpdatesInterval = 60_000, // 1 minute + headerStart, + headerEnd, }) { const [items, setItems] = useState([]); const [uiState, setUIState] = useState('default'); @@ -185,27 +187,24 @@ function Timeline({ }, [nearReachEnd, showMore]); const lastHiddenTime = useRef(); - usePageVisibility( - (visible) => { - if (visible) { - const timeDiff = Date.now() - lastHiddenTime.current; - if (!lastHiddenTime.current || timeDiff > 1000 * 60) { - (async () => { - console.log('✨ Check updates'); - const hasUpdate = await checkForUpdates(); - if (hasUpdate) { - console.log('✨ Has new updates'); - setShowNew(true); - } - })(); - } - } else { - lastHiddenTime.current = Date.now(); + usePageVisibility((visible) => { + if (visible) { + const timeDiff = Date.now() - lastHiddenTime.current; + if (!lastHiddenTime.current || timeDiff > 1000 * 60) { + (async () => { + console.log('✨ Check updates'); + const hasUpdate = await checkForUpdates(); + if (hasUpdate) { + console.log('✨ Has new updates'); + setShowNew(true); + } + })(); } - setVisible(visible); - }, - [checkForUpdates], - ); + } else { + lastHiddenTime.current = Date.now(); + } + setVisible(visible); + }, []); // checkForUpdates interval useInterval( @@ -240,23 +239,31 @@ function Timeline({ -
    - {boosts.map((boost) => { - const { id: statusID, reblog } = boost; - const actualStatusID = reblog || statusID; - return ( -
  • - - - -
  • - ); - })} -
- - ); -} - -export default memo(Home); +export default Home; diff --git a/src/utils/usePageVisibility.js b/src/utils/usePageVisibility.js index 5612090b..ad9c73bb 100644 --- a/src/utils/usePageVisibility.js +++ b/src/utils/usePageVisibility.js @@ -1,15 +1,17 @@ -import { useEffect } from 'preact/hooks'; +import { useEffect, useRef } from 'preact/hooks'; export default function usePageVisibility(fn = () => {}, deps = []) { + const savedCallback = useRef(fn, deps); + useEffect(() => { const handleVisibilityChange = () => { const hidden = document.hidden || document.visibilityState === 'hidden'; - console.log('👀 Page visibility changed', hidden); - fn(!hidden); + console.log('👀 Page visibility changed', hidden ? 'hidden' : 'visible'); + savedCallback.current(!hidden); }; document.addEventListener('visibilitychange', handleVisibilityChange); return () => document.removeEventListener('visibilitychange', handleVisibilityChange); - }, [fn, ...deps]); + }, []); }