PullDownToRefresh: reset the state if invisible

This commit fixes that the wheel event path may
trigger too many refreshings.

package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "tutu",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "",
   "private": true,
   "type": "module",

src/timelines/MediaAttachmentGrid.tsx

@@ -51,9 +51,19 @@ const MediaAttachmentGrid: Component<{
     setViewerIndex(index);
   };
 
+  const columnCount = () => {
+    if (props.attachments.length === 1) {
+      return 1;
+    } else if (props.attachments.length % 2 === 0) {
+      return 2;
+    } else {
+      return 3;
+    }
+  };
+
   css`
     .attachments {
-      column-count: ${(props.attachments.length === 1 ? 1 : 3).toString()};
+      column-count: ${columnCount.toString()};
     }
   `;
   return (
@@ -104,17 +114,17 @@ const MediaAttachmentGrid: Component<{
                 />
               );
             case "gifv": // Later we can handle the preview
-            return (
-              <video
-                src={item.url || undefined}
-                style={style()}
-                onLoadedMetadata={[setLoaded, true]}
-                autoplay={false}
-                controls
-                playsinline /* or safari on iOS will play in full-screen */
-                loop
-              />
-            );
+              return (
+                <video
+                  src={item.url || undefined}
+                  style={style()}
+                  onLoadedMetadata={[setLoaded, true]}
+                  autoplay={false}
+                  controls
+                  playsinline /* or safari on iOS will play in full-screen */
+                  loop
+                />
+              );
 
             case "audio":
             case "unknown":

src/timelines/PullDownToRefresh.tsx

@@ -28,11 +28,13 @@ const PullDownToRefresh: Component<{
   let rootElement: HTMLDivElement;
   const [pullDown, setPullDown] = createSignal(0);
 
-  const pullDownDistance = () => {
+  const stopPos = () => 160;
+
+  const indicatorOfsY = () => {
     if (props.loading) {
-      return 140;
+      return stopPos() * 0.875;
     }
-    return Math.max(Math.min(160, pullDown()), 0);
+    return pullDown();
   };
 
   const obvx = createVisibilityObserver({
@@ -41,46 +43,66 @@ const PullDownToRefresh: Component<{
 
   const rootVisible = obvx(() => rootElement);
 
+  createEffect(() => {
+    if (!rootVisible()) setPullDown(0);
+  });
+
   let released = true;
   let v = 0;
   let lts = -1;
   let ds = 0;
   let holding = false;
-  const M = 1;
-  const K = -10;
-  const D = -10;
+  const K = 10;
   const updatePullDown = (ts: number) => {
     released = false;
     try {
       const x = untrack(pullDown);
       const dt = lts !== -1 ? ts - lts : 1 / 60;
-      const fs = (ds / Math.pow(dt, 2)) * M;
-      const fh = (x + ds) * K + D * v;
-      const f = fs + fh;
-      const a = f / M;
-      v += a * dt;
-      if (holding && v < 0) {
-        v = 0
-      }
-      setPullDown(x + v * dt);
+      const vspring = holding ? 0 : K * x * dt;
+      v = ds / dt - vspring;
+
+      setPullDown(Math.max(Math.min(x + v * dt, stopPos()), 0));
+
       if (Math.abs(x) > 1 || Math.abs(v) > 1) {
         requestAnimationFrame(updatePullDown);
       } else {
         v = 0;
         lts = -1;
       }
-      if (!holding && untrack(pullDownDistance) >= 160 && !props.loading && props.onRefresh) {
-        setTimeout(props.onRefresh, 0)
+
+      if (
+        !holding &&
+        untrack(pullDown) >= stopPos() &&
+        !props.loading &&
+        props.onRefresh
+      ) {
+        setTimeout(props.onRefresh, 0);
       }
     } finally {
       ds = 0;
       released = true;
     }
   };
+
+  let wheelTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  const onWheelNotUpdated = () => {
+    wheelTimeout = undefined;
+    holding = false;
+  };
+
   const handleLinkedWheel = (event: WheelEvent) => {
     const scrollTop = (event.target as HTMLElement).scrollTop;
     if (scrollTop >= 0 && scrollTop < 1) {
-      ds = -(event.deltaY / window.devicePixelRatio / 4);
+      const d = untrack(pullDown);
+      if (event.deltaY <= 0 || d > 0) event.preventDefault();
+      ds = -(event.deltaY / window.devicePixelRatio / 2);
+      holding = d < stopPos();
+      if (wheelTimeout) {
+        clearTimeout(wheelTimeout);
+      }
+      wheelTimeout = setTimeout(onWheelNotUpdated, 200);
+
       if (released) {
         released = false;
         requestAnimationFrame(updatePullDown);
@@ -107,11 +129,13 @@ const PullDownToRefresh: Component<{
       return;
     }
     const item = event.targetTouches.item(0)!;
+    if (untrack(pullDown) > 0) event.preventDefault();
     if (lastTouchId && item.identifier !== lastTouchId) {
       lastTouchId = undefined;
       lastTouchScreenY = 0;
       return;
     }
+
     holding = true;
     if (lastTouchScreenY !== 0) {
       ds = item.screenY - lastTouchScreenY;
@@ -127,7 +151,11 @@ const PullDownToRefresh: Component<{
     lastTouchId = undefined;
     lastTouchScreenY = 0;
     holding = false;
-    if (untrack(pullDownDistance) >= 160 && !props.loading && props.onRefresh) {
+    if (
+      untrack(indicatorOfsY) >= stopPos() &&
+      !props.loading &&
+      props.onRefresh
+    ) {
       setTimeout(props.onRefresh, 0);
     } else {
       if (released) {
@@ -169,14 +197,14 @@ const PullDownToRefresh: Component<{
       aspect-ratio: 1/1;
       width: 2rem;
       color: var(--tutu-color-primary);
-      transform: translateY(${`${pullDownDistance() - 2}px`});
+      transform: translateY(${`${indicatorOfsY() - 2}px`});
       will-change: transform;
       z-index: var(--tutu-zidx-nav);
       background-color: var(--tutu-color-surface);
 
       > :global(.refresh-icon) {
         transform: rotate(
-          ${`${((pullDownDistance() / 160) * 180).toString()}deg`}
+          ${`${((indicatorOfsY() / 160) * 180).toString()}deg`}
         );
         will-change: transform;
       }

src/timelines/TootComposer.tsx

@@ -1,5 +1,6 @@
 import {
   createEffect,
+  createMemo,
   createSignal,
   createUniqueId,
   onMount,
@@ -212,6 +213,10 @@ const TootComposer: Component<{
   const [langPickerOpen, setLangPickerOpen] = createSignal(false);
   const appLanguage = useLanguage();
 
+  const randomPlaceholder = createMemo(() =>
+    randomChoose(Math.random(), ["What's happening?", "What do your think?"]),
+  );
+
   createEffect(() => {
     const lang = appLanguage().split("-")[0];
     setLanguage(lang);
@@ -311,10 +316,7 @@ const TootComposer: Component<{
           placeholder={
             props.replyToDisplayName
               ? `Reply to ${props.replyToDisplayName}...`
-              : randomChoose(Math.random(), [
-                  "What's happening?",
-                  "What do your think?",
-                ])
+              : randomPlaceholder()
           }
           style={{ width: "100%", border: "none" }}
           disabled={sending()}

src/timelines/toot.module.css

@@ -3,6 +3,7 @@
   --card-gut: 16px;
   --toot-avatar-size: 40px;
   margin-block: 0;
+  position: relative;
 
   &.toot {
     /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */