Lots of tiny adjustments

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 {

src/components/status.jsx

@@ -749,20 +749,20 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
       </div>
     );
   } 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 (
       <div
         class={`media media-${isGIF ? 'gif' : 'video'} ${
-          autoAnimate ? 'media-contain' : ''
+          autoGIFAnimate ? 'media-contain' : ''
         }`}
         data-formatted-duration={formattedDuration}
-        data-label={isGIF && !showOriginal && !autoAnimate ? 'GIF' : ''}
+        data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
         style={{
           backgroundColor:
             rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
@@ -790,7 +790,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
           }
         }}
       >
-        {showOriginal || autoAnimate ? (
+        {showOriginal || autoGIFAnimate ? (
           <div
             style={{
               width: '100%',
@@ -806,7 +806,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
                 preload="auto"
                 autoplay
                 muted="${isGIF}"
-                ${isGIFV ? '' : 'controls'}
+                ${isGIF ? '' : 'controls'}
                 playsinline
                 loop="${loopable}"
               ></video>

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);

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 };
 }