From ee9bfe63316fea755b1172884e82259f9d56cbef Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 7 Jan 2023 14:45:04 +0800 Subject: [PATCH] Lots of tiny adjustments --- src/components/status.css | 31 +++++++++++++++++++++++++------ src/components/status.jsx | 18 +++++++++--------- src/pages/home.jsx | 5 +++-- src/utils/useScroll.js | 18 +++++++++++++++--- 4 files changed, 52 insertions(+), 20 deletions(-) diff --git a/src/components/status.css b/src/components/status.css index 46efecfe..6910a459 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -280,7 +280,8 @@ display: none; } .status .content p { - margin-block: 0.75em; + /* 12px = 75% of 16px */ + margin-block: min(0.75em, 12px); } .status .content p:first-child { margin-block-start: 0; @@ -320,7 +321,7 @@ .status.large :is(.media-container, .media-container.media-gt2) { height: auto; min-height: 160px; - max-height: 50vh; + max-height: 60vh; } .status .media { border-radius: 8px; @@ -331,6 +332,15 @@ .status .media:only-child { grid-area: span 2 / span 2; } +.status:not(.large) .media:only-child { + max-width: 480px; +} +.status.large .media:only-child { + display: inline-block; + min-width: 160px; + min-height: 160px; + width: fit-content; +} .status .media:first-child:nth-last-child(3) { grid-area: span 2; } @@ -355,6 +365,8 @@ width: 100%; height: 100%; object-fit: cover; +} +.status .media:not(.media-audio) { cursor: pointer; } @keyframes position-object { @@ -371,7 +383,7 @@ object-position: 50% 50%; } } -.status:not(.large) .media img:hover { +.status .media img:hover { animation: position-object 5s ease-in-out 1s 5; } .status .media video { @@ -437,6 +449,10 @@ object-fit: cover; pointer-events: none; } +.status .media-contain { + min-width: 160px; + width: fit-content; +} .status .media-contain video { object-fit: contain !important; } @@ -474,10 +490,13 @@ object-fit: cover; aspect-ratio: 1 / 1; } -.status.large .card.link.large .image { +.status.large .card.link { + max-width: 480px; +} +.status.large .card.link .image { aspect-ratio: 1.91 / 1; width: 100%; - max-height: 50vh; + max-height: 40vh; border-inline-end: 0; border-block-end: 1px solid var(--outline-color); } @@ -493,7 +512,7 @@ flex-grow: 1; align-self: center; } -.status.large .card.link.large .meta-container { +.status.large .card.link .meta-container { align-self: flex-start; } .card .title { diff --git a/src/components/status.jsx b/src/components/status.jsx index c91c25ba..922ad950 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -749,20 +749,20 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) { ); } else if (type === 'gifv' || type === 'video') { - // 20 seconds, treat as a gif - const shortDuration = original.duration <= 20; - const isGIFV = type === 'gifv'; - const isGIF = isGIFV || shortDuration; - const loopable = original.duration <= 60; + const shortDuration = original.duration < 31; + const isGIF = type === 'gifv' && shortDuration; + // If GIF is too long, treat it as a video + const loopable = original.duration < 61; const formattedDuration = formatDuration(original.duration); const hoverAnimate = !showOriginal && !autoAnimate && isGIF; + const autoGIFAnimate = !showOriginal && autoAnimate && isGIF; return (
{} }) { } }} > - {showOriginal || autoAnimate ? ( + {showOriginal || autoGIFAnimate ? (
{} }) { preload="auto" autoplay muted="${isGIF}" - ${isGIFV ? '' : 'controls'} + ${isGIF ? '' : 'controls'} playsinline loop="${loopable}" > diff --git a/src/pages/home.jsx b/src/pages/home.jsx index d3abe301..a4d94985 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,7 +1,7 @@ import { Link } from 'preact-router/match'; +import { memo } from 'preact/compat'; import { useEffect, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; -import { InView } from 'react-intersection-observer'; import { useSnapshot } from 'valtio'; import Icon from '../components/icon'; @@ -167,6 +167,7 @@ function Home({ hidden }) { scrollableElement: scrollableRef.current, distanceFromTop: 0.1, distanceFromBottom: 0.15, + scrollThresholdUp: 44, }); useEffect(() => { @@ -352,4 +353,4 @@ function Home({ hidden }) { ); } -export default Home; +export default memo(Home); diff --git a/src/utils/useScroll.js b/src/utils/useScroll.js index eb84024a..a1edb47f 100644 --- a/src/utils/useScroll.js +++ b/src/utils/useScroll.js @@ -4,7 +4,8 @@ export default function useScroll({ scrollableElement = window, distanceFromTop = 0, distanceFromBottom = 0, - scrollThreshold = 10, + scrollThresholdUp = 10, + scrollThresholdDown = 10, } = {}) { const [scrollDirection, setScrollDirection] = useState(null); const [reachTop, setReachTop] = useState(false); @@ -22,7 +23,12 @@ export default function useScroll({ const distanceFromBottomPx = scrollHeight * Math.min(1, Math.max(0, distanceFromBottom)); - if (scrollDistance >= scrollThreshold) { + if ( + scrollDistance >= + (previousScrollTop < scrollTop + ? scrollThresholdDown + : scrollThresholdUp) + ) { setScrollDirection(previousScrollTop < scrollTop ? 'down' : 'up'); previousScrollTop = scrollTop; } @@ -37,7 +43,13 @@ export default function useScroll({ scrollableElement.addEventListener('scroll', onScroll, { passive: true }); return () => scrollableElement.removeEventListener('scroll', onScroll); - }, [scrollableElement, distanceFromTop, distanceFromBottom, scrollThreshold]); + }, [ + scrollableElement, + distanceFromTop, + distanceFromBottom, + scrollThresholdUp, + scrollThresholdDown, + ]); return { scrollDirection, reachTop, nearReachTop, nearReachBottom }; }