import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; import { InView } from 'react-intersection-observer'; import { useDebouncedCallback } from 'use-debounce'; import { useSnapshot } from 'valtio'; import FilterContext from '../utils/filter-context'; import { filteredItems, isFiltered } from '../utils/filters'; import states, { statusKey } from '../utils/states'; import statusPeek from '../utils/status-peek'; import { groupBoosts, groupContext } from '../utils/timeline-utils'; import useInterval from '../utils/useInterval'; import usePageVisibility from '../utils/usePageVisibility'; import useScroll from '../utils/useScroll'; import useScrollFn from '../utils/useScrollFn'; import Icon from './icon'; import Link from './link'; import MediaPost from './media-post'; import NavMenu from './nav-menu'; import Status from './status'; const scrollIntoViewOptions = { block: 'nearest', inline: 'center', behavior: 'smooth', }; function Timeline({ title, titleComponent, id, instance, emptyText, errorText, useItemID, // use statusID instead of status object, assuming it's already in states boostsCarousel, fetchItems = () => {}, checkForUpdates = () => {}, checkForUpdatesInterval = 15_000, // 15 seconds headerStart, headerEnd, timelineStart, // allowFilters, refresh, view, filterContext, showFollowedTags, }) { const snapStates = useSnapshot(states); const [items, setItems] = useState([]); const [uiState, setUIState] = useState('default'); const [showMore, setShowMore] = useState(false); const [showNew, setShowNew] = useState(false); const [visible, setVisible] = useState(true); const scrollableRef = useRef(); console.debug('RENDER Timeline', id, refresh); const allowGrouping = view !== 'media'; const loadItems = useDebouncedCallback( (firstLoad) => { setShowNew(false); if (uiState === 'loading') return; setUIState('loading'); (async () => { try { let { done, value } = await fetchItems(firstLoad); if (Array.isArray(value)) { // Avoid grouping for pinned posts const [pinnedPosts, otherPosts] = value.reduce( (acc, item) => { if (item._pinned) { acc[0].push(item); } else { acc[1].push(item); } return acc; }, [[], []], ); value = otherPosts; if (allowGrouping) { if (boostsCarousel) { value = groupBoosts(value); } value = groupContext(value); } if (pinnedPosts.length) { value = pinnedPosts.concat(value); } console.log(value); if (firstLoad) { setItems(value); } else { setItems((items) => [...items, ...value]); } if (!value.length) done = true; setShowMore(!done); } else { setShowMore(false); } setUIState('default'); } catch (e) { console.error(e); setUIState('error'); } finally { loadItems.cancel(); } })(); }, 1500, { leading: true, trailing: false, }, ); const itemsSelector = '.timeline-item, .timeline-item-alt'; const jRef = useHotkeys('j, shift+j', (_, handler) => { // focus on next status after active item const activeItem = document.activeElement.closest(itemsSelector); const activeItemRect = activeItem?.getBoundingClientRect(); const allItems = Array.from( scrollableRef.current.querySelectorAll(itemsSelector), ); if ( activeItem && activeItemRect.top < scrollableRef.current.clientHeight && activeItemRect.bottom > 0 ) { const activeItemIndex = allItems.indexOf(activeItem); let nextItem = allItems[activeItemIndex + 1]; if (handler.shift) { // get next status that's not .timeline-item-alt nextItem = allItems.find( (item, index) => index > activeItemIndex && !item.classList.contains('timeline-item-alt'), ); } if (nextItem) { nextItem.focus(); nextItem.scrollIntoView(scrollIntoViewOptions); } } else { // If active status is not in viewport, get the topmost status-link in viewport const topmostItem = allItems.find((item) => { const itemRect = item.getBoundingClientRect(); return itemRect.top >= 44 && itemRect.left >= 0; // 44 is the magic number for header height, not real }); if (topmostItem) { topmostItem.focus(); topmostItem.scrollIntoView(scrollIntoViewOptions); } } }); const kRef = useHotkeys('k, shift+k', (_, handler) => { // focus on previous status after active item const activeItem = document.activeElement.closest(itemsSelector); const activeItemRect = activeItem?.getBoundingClientRect(); const allItems = Array.from( scrollableRef.current.querySelectorAll(itemsSelector), ); if ( activeItem && activeItemRect.top < scrollableRef.current.clientHeight && activeItemRect.bottom > 0 ) { const activeItemIndex = allItems.indexOf(activeItem); let prevItem = allItems[activeItemIndex - 1]; if (handler.shift) { // get prev status that's not .timeline-item-alt prevItem = allItems.findLast( (item, index) => index < activeItemIndex && !item.classList.contains('timeline-item-alt'), ); } if (prevItem) { prevItem.focus(); prevItem.scrollIntoView(scrollIntoViewOptions); } } else { // If active status is not in viewport, get the topmost status-link in viewport const topmostItem = allItems.find((item) => { const itemRect = item.getBoundingClientRect(); return itemRect.top >= 44 && itemRect.left >= 0; // 44 is the magic number for header height, not real }); if (topmostItem) { topmostItem.focus(); topmostItem.scrollIntoView(scrollIntoViewOptions); } } }); const oRef = useHotkeys(['enter', 'o'], () => { // open active status const activeItem = document.activeElement.closest(itemsSelector); if (activeItem) { activeItem.click(); } }); // const { // scrollDirection, // nearReachStart, // nearReachEnd, // reachStart, // reachEnd, // } = useScroll({ // scrollableRef, // distanceFromEnd: 2, // scrollThresholdStart: 44, // }); const headerRef = useRef(); // const [hiddenUI, setHiddenUI] = useState(false); const [nearReachStart, setNearReachStart] = useState(false); useScrollFn( { scrollableRef, distanceFromEnd: 2, scrollThresholdStart: 44, }, ({ scrollDirection, nearReachStart, nearReachEnd, reachStart, reachEnd, }) => { // setHiddenUI(scrollDirection === 'end' && !nearReachEnd); if (headerRef.current) { const hiddenUI = scrollDirection === 'end' && !nearReachStart; headerRef.current.hidden = hiddenUI; } setNearReachStart(nearReachStart); if (reachStart) { loadItems(true); } // else if (nearReachEnd || (reachEnd && showMore)) { // loadItems(); // } }, [], ); useEffect(() => { scrollableRef.current?.scrollTo({ top: 0 }); loadItems(true); }, []); useEffect(() => { loadItems(true); }, [refresh]); // useEffect(() => { // if (reachStart) { // loadItems(true); // } // }, [reachStart]); // useEffect(() => { // if (nearReachEnd || (reachEnd && showMore)) { // loadItems(); // } // }, [nearReachEnd, showMore]); const prevView = useRef(view); useEffect(() => { if (prevView.current !== view) { prevView.current = view; setItems([]); } }, [view]); const loadOrCheckUpdates = useCallback( async ({ disableIdleCheck = false } = {}) => { const noPointers = scrollableRef.current ? getComputedStyle(scrollableRef.current).pointerEvents === 'none' : false; console.log('✨ Load or check updates', id, { autoRefresh: snapStates.settings.autoRefresh, scrollTop: scrollableRef.current.scrollTop, disableIdleCheck, idle: window.__IDLE__, inBackground: inBackground(), noPointers, }); if ( snapStates.settings.autoRefresh && scrollableRef.current.scrollTop < 16 && (disableIdleCheck || window.__IDLE__) && !inBackground() && !noPointers ) { console.log('✨ Load updates', id, snapStates.settings.autoRefresh); loadItems(true); } else { console.log('✨ Check updates', id, snapStates.settings.autoRefresh); const hasUpdate = await checkForUpdates(); if (hasUpdate) { console.log('✨ Has new updates', id); setShowNew(true); } } }, [id, loadItems, checkForUpdates, snapStates.settings.autoRefresh], ); const lastHiddenTime = useRef(); usePageVisibility( (visible) => { if (visible) { const timeDiff = Date.now() - lastHiddenTime.current; if (!lastHiddenTime.current || timeDiff > 1000 * 3) { // 3 seconds loadOrCheckUpdates({ disableIdleCheck: true, }); } } else { lastHiddenTime.current = Date.now(); } setVisible(visible); }, [checkForUpdates, loadOrCheckUpdates, snapStates.settings.autoRefresh], ); // checkForUpdates interval useInterval( loadOrCheckUpdates, visible && !showNew ? checkForUpdatesInterval * (nearReachStart ? 1 : 2) : null, ); // const hiddenUI = scrollDirection === 'end' && !nearReachStart; return (
{ scrollableRef.current = node; jRef.current = node; kRef.current = node; oRef.current = node; }} tabIndex="-1" >
{!!timelineStart && (
{timelineStart}
)} {!!items.length ? ( <>
    {items.map((status) => ( ))} {showMore && uiState === 'loading' && (view === 'media' ? null : ( <>
  • ))}
{uiState === 'default' && (showMore ? ( { if (inView) { loadItems(); } }} > ) : (

The end.

))} ) : uiState === 'loading' ? (
    {Array.from({ length: 5 }).map((_, i) => view === 'media' ? (
    ) : (
  • ), )}
) : ( uiState !== 'error' &&

{emptyText}

)} {uiState === 'error' && (

{errorText}

)}
); } function TimelineItem({ status, instance, useItemID, // allowFilters, filterContext, view, showFollowedTags, }) { const { id: statusID, reblog, items, type, _pinned } = status; if (_pinned) useItemID = false; const actualStatusID = reblog?.id || statusID; const url = instance ? `/${instance}/s/${actualStatusID}` : `/s/${actualStatusID}`; let title = ''; if (type === 'boosts') { title = `${items.length} Boosts`; } else if (type === 'pinned') { title = 'Pinned posts'; } const isCarousel = type === 'boosts' || type === 'pinned'; if (items) { const fItems = filteredItems(items, filterContext); if (isCarousel) { // Here, we don't hide filtered posts, but we sort them last fItems.sort((a, b) => { // if (a._filtered && !b._filtered) { // return 1; // } // if (!a._filtered && b._filtered) { // return -1; // } const aFiltered = isFiltered(a.filtered, filterContext); const bFiltered = isFiltered(b.filtered, filterContext); if (aFiltered && !bFiltered) { return 1; } if (!aFiltered && bFiltered) { return -1; } return 0; }); return (
  • {useItemID ? ( ) : ( )}
  • ); })} ); } const manyItems = fItems.length > 3; return fItems.map((item, i) => { const { id: statusID, _differentAuthor } = item; const url = instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`; const isMiddle = i > 0 && i < fItems.length - 1; const isSpoiler = item.sensitive && !!item.spoilerText; const showCompact = (!_differentAuthor && isSpoiler && i > 0) || (manyItems && isMiddle && (type === 'thread' || (type === 'conversation' && !_differentAuthor && !fItems[i - 1]._differentAuthor && !fItems[i + 1]._differentAuthor))); const isStart = i === 0; const isEnd = i === fItems.length - 1; return (
  • {showCompact ? ( ) : useItemID ? ( ) : ( )}
  • ); }); } const itemKey = `timeline-${statusID + _pinned}`; if (view === 'media') { return useItemID ? ( ) : ( ); } return (
  • {useItemID ? ( ) : ( )}
  • ); } function StatusCarousel({ title, class: className, children }) { const carouselRef = useRef(); // const { reachStart, reachEnd, init } = useScroll({ // scrollableRef: carouselRef, // direction: 'horizontal', // }); const startButtonRef = useRef(); const endButtonRef = useRef(); useScrollFn( { scrollableRef: carouselRef, direction: 'horizontal', init: true, }, ({ reachStart, reachEnd }) => { if (startButtonRef.current) startButtonRef.current.disabled = reachStart; if (endButtonRef.current) endButtonRef.current.disabled = reachEnd; }, [], ); // useEffect(() => { // init?.(); // }, []); return ( ); } function TimelineStatusCompact({ status, instance }) { const snapStates = useSnapshot(states); const { id, visibility } = status; const statusPeekText = statusPeek(status); const sKey = statusKey(id, instance); return (
    {!!snapStates.statusThreadNumber[sKey] ? (
    {snapStates.statusThreadNumber[sKey] ? ` ${snapStates.statusThreadNumber[sKey]}/X` : ''}
    ) : (
    )}
    {statusPeekText} {status.sensitive && status.spoilerText && ( <> {' '} )}
    ); } function inBackground() { return !!document.querySelector('.deck-backdrop, #modal-container > *'); } export default Timeline;