this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Bug fixes for boosts carousel + scrolling

+53 -41
+40 -30
src/pages/home.jsx
··· 48 48 }; 49 49 }); 50 50 51 - { 52 - // BOOSTS CAROUSEL 51 + // BOOSTS CAROUSEL 52 + if (snapStates.settings.boostsCarousel) { 53 53 let specialHome = []; 54 54 let boostStash = []; 55 55 for (let i = 0; i < homeValues.length; i++) { ··· 90 90 specialHome, 91 91 }); 92 92 if (firstLoad) { 93 - states.specialHome = specialHome; 93 + states.home = specialHome; 94 94 } else { 95 - states.specialHome.push(...specialHome); 95 + states.home.push(...specialHome); 96 + } 97 + } else { 98 + if (firstLoad) { 99 + states.home = homeValues; 100 + } else { 101 + states.home.push(...homeValues); 96 102 } 97 103 } 98 104 99 - if (firstLoad) { 100 - states.home = homeValues; 101 - } else { 102 - states.home.push(...homeValues); 103 - } 104 105 states.homeLastFetchTime = Date.now(); 105 - return allStatuses; 106 + return { 107 + done: false, 108 + }; 106 109 } 107 110 108 111 const loadingStatuses = useRef(false); ··· 212 215 } 213 216 }); 214 217 215 - const { scrollDirection, reachStart, nearReachStart, nearReachEnd } = 216 - useScroll({ 217 - scrollableElement: scrollableRef.current, 218 - distanceFromStart: 0.1, 219 - distanceFromEnd: 0.15, 220 - scrollThresholdStart: 44, 221 - }); 218 + const { 219 + scrollDirection, 220 + reachStart, 221 + nearReachStart, 222 + nearReachEnd, 223 + reachEnd, 224 + } = useScroll({ 225 + scrollableElement: scrollableRef.current, 226 + distanceFromStart: 1, 227 + distanceFromEnd: 3, 228 + scrollThresholdStart: 44, 229 + }); 222 230 223 231 useEffect(() => { 224 - if (nearReachEnd && showMore) { 232 + if (nearReachEnd || (reachEnd && showMore)) { 225 233 loadStatuses(); 226 234 } 227 - }, [nearReachEnd]); 235 + }, [nearReachEnd, reachEnd]); 228 236 229 237 useEffect(() => { 230 238 if (reachStart) { ··· 244 252 } 245 253 })(); 246 254 }, []); 247 - 248 - const snapHome = snapStates.settings.boostsCarousel 249 - ? snapStates.specialHome 250 - : snapStates.home; 251 255 252 256 return ( 253 257 <div ··· 322 326 class="updates-button" 323 327 type="button" 324 328 onClick={() => { 325 - const uniqueHomeNew = snapStates.homeNew.filter( 326 - (status) => !states.home.some((s) => s.id === status.id), 327 - ); 328 - states.home.unshift(...uniqueHomeNew); 329 + if (!snapStates.settings.boostsCarousel) { 330 + const uniqueHomeNew = snapStates.homeNew.filter( 331 + (status) => !states.home.some((s) => s.id === status.id), 332 + ); 333 + states.home.unshift(...uniqueHomeNew); 334 + } 329 335 loadStatuses(true); 330 336 states.homeNew = []; 331 337 ··· 338 344 <Icon icon="arrow-up" /> New posts 339 345 </button> 340 346 )} 341 - {snapHome.length ? ( 347 + {snapStates.home.length ? ( 342 348 <> 343 349 <ul class="timeline"> 344 - {snapHome.map(({ id: statusID, reblog, boosts }) => { 350 + {snapStates.home.map(({ id: statusID, reblog, boosts }) => { 345 351 const actualStatusID = reblog || statusID; 346 352 if (boosts) { 347 353 return ( ··· 429 435 430 436 function BoostsCarousel({ boosts }) { 431 437 const carouselRef = useRef(); 432 - const { reachStart, reachEnd } = useScroll({ 438 + const { reachStart, reachEnd, init } = useScroll({ 433 439 scrollableElement: carouselRef.current, 434 440 direction: 'horizontal', 435 441 }); 442 + useEffect(() => { 443 + init?.(); 444 + }, []); 445 + 436 446 return ( 437 447 <div class="boost-carousel"> 438 448 <header>
+1 -1
src/pages/status.jsx
··· 297 297 298 298 const { nearReachStart } = useScroll({ 299 299 scrollableElement: scrollableRef.current, 300 - distanceFromStart: 0.1, 300 + distanceFromStart: 0.5, 301 301 }); 302 302 303 303 return (
+1 -1
src/utils/states.js
··· 24 24 showDrafts: false, 25 25 composeCharacterCount: 0, 26 26 settings: { 27 - boostsCarousel: store.local.get('settings:boostsCarousel') === '1' || true, 27 + boostsCarousel: store.local.get('settings:boostsCarousel') === '1' ?? true, 28 28 }, 29 29 }); 30 30 export default states;
+11 -9
src/utils/useScroll.js
··· 2 2 3 3 export default function useScroll({ 4 4 scrollableElement, 5 - distanceFromStart = 0, 6 - distanceFromEnd = 0, 5 + distanceFromStart = 1, // ratio of clientHeight/clientWidth 6 + distanceFromEnd = 1, // ratio of clientHeight/clientWidth 7 7 scrollThresholdStart = 10, 8 8 scrollThresholdEnd = 10, 9 9 direction = 'vertical', ··· 16 16 const isVertical = direction === 'vertical'; 17 17 18 18 if (!scrollableElement) { 19 - console.warn('Scrollable element is not defined'); 20 - scrollableElement = window; 19 + // Better be explicit instead of auto-assign to window 20 + return {}; 21 21 } 22 22 23 23 useEffect(() => { ··· 38 38 const scrollDimension = isVertical ? scrollHeight : scrollWidth; 39 39 const clientDimension = isVertical ? clientHeight : clientWidth; 40 40 const scrollDistance = Math.abs(scrollStart - previousScrollStart); 41 - const distanceFromStartPx = 42 - scrollDimension * Math.min(1, Math.max(0, distanceFromStart)); 43 - const distanceFromEndPx = 44 - scrollDimension * Math.min(1, Math.max(0, distanceFromEnd)); 41 + const distanceFromStartPx = clientDimension * distanceFromStart; 42 + const distanceFromEndPx = clientDimension * distanceFromEnd; 45 43 46 44 if ( 47 45 scrollDistance >= ··· 62 60 } 63 61 64 62 scrollableElement.addEventListener('scroll', onScroll, { passive: true }); 65 - scrollableElement.dispatchEvent(new Event('scroll')); 66 63 67 64 return () => scrollableElement.removeEventListener('scroll', onScroll); 68 65 }, [ ··· 79 76 reachEnd, 80 77 nearReachStart, 81 78 nearReachEnd, 79 + init: () => { 80 + if (scrollableElement) { 81 + scrollableElement.dispatchEvent(new Event('scroll')); 82 + } 83 + }, 82 84 }; 83 85 }