From 4fa7449d71bbb14bf37b90303ccf2370db5d87af Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 8 Oct 2024 17:18:27 +0800
Subject: [PATCH 1/6] TootComposer: don't switch the random placeholder

---
 package.json                   |  2 +-
 src/timelines/TootComposer.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 4c0af67..19f3a48 100644
--- a/package.json
+++ b/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",
diff --git a/src/timelines/TootComposer.tsx b/src/timelines/TootComposer.tsx
index b50ba64..9087d8f 100644
--- a/src/timelines/TootComposer.tsx
+++ b/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()}

From eefe2812dfa3e8a87199c33998043e07cb7d060c Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 8 Oct 2024 17:33:52 +0800
Subject: [PATCH 2/6] *Toot: fix missing preview card

---
 src/timelines/toot.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css
index af13f46..56b4d73 100644
--- a/src/timelines/toot.module.css
+++ b/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 */

From dbb93fd76c4632c94ba10f08551c42e625efae53 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 8 Oct 2024 17:43:33 +0800
Subject: [PATCH 3/6] MediaAttachmentGrid: improve layout as length % 2

---
 src/timelines/MediaAttachmentGrid.tsx | 34 +++++++++++++++++----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx
index a88d7a6..5748f0d 100644
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/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":

From 40a785a538b0af7b83b249287ccb16cdf6c4da98 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Wed, 9 Oct 2024 14:38:25 +0800
Subject: [PATCH 4/6] PullDownToRefresh: rewrite spring animation

- fix #12
---
 src/timelines/PullDownToRefresh.tsx | 46 +++++++++++++++++++----------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/timelines/PullDownToRefresh.tsx b/src/timelines/PullDownToRefresh.tsx
index e63aaa2..ccf8294 100644
--- a/src/timelines/PullDownToRefresh.tsx
+++ b/src/timelines/PullDownToRefresh.tsx
@@ -46,41 +46,56 @@ const PullDownToRefresh: Component<{
   let lts = -1;
   let ds = 0;
   let holding = false;
-  const M = 1;
-  const K = -10;
-  const D = -10;
+  const K = 5;
   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
-      }
+      const vspring = holding ? 0 : K * x * dt;
+      v = ds / dt - vspring;
+
       setPullDown(x + v * dt);
+
       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(pullDownDistance) >= 160 &&
+        !props.loading &&
+        props.onRefresh
+      ) {
+        setTimeout(props.onRefresh, 0);
+        // FIXME: this may trigger at multiple frames
       }
     } 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);
+      event.preventDefault()
+      ds = -(event.deltaY / window.devicePixelRatio / 2);
+      holding = true;
+      if (wheelTimeout) {
+        clearTimeout(wheelTimeout);
+      }
+      wheelTimeout = setTimeout(onWheelNotUpdated, 200);
       if (released) {
         released = false;
         requestAnimationFrame(updatePullDown);
@@ -107,6 +122,7 @@ const PullDownToRefresh: Component<{
       return;
     }
     const item = event.targetTouches.item(0)!;
+    event.preventDefault();
     if (lastTouchId && item.identifier !== lastTouchId) {
       lastTouchId = undefined;
       lastTouchScreenY = 0;
@@ -114,7 +130,7 @@ const PullDownToRefresh: Component<{
     }
     holding = true;
     if (lastTouchScreenY !== 0) {
-      ds = item.screenY - lastTouchScreenY;
+      ds = (item.screenY - lastTouchScreenY) / window.devicePixelRatio;
     }
     lastTouchScreenY = item.screenY;
     if (released) {

From ee39cf865107d991c4ac7f2e15e4819544dd3e21 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Wed, 9 Oct 2024 14:51:32 +0800
Subject: [PATCH 5/6] PullDownToRefresh: fix trigger many refreshings

This commit fixes that the wheel event path may
trigger too many refreshings.
---
 src/timelines/PullDownToRefresh.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/timelines/PullDownToRefresh.tsx b/src/timelines/PullDownToRefresh.tsx
index ccf8294..3343027 100644
--- a/src/timelines/PullDownToRefresh.tsx
+++ b/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({
@@ -55,7 +57,7 @@ const PullDownToRefresh: Component<{
       const vspring = holding ? 0 : K * x * dt;
       v = ds / dt - vspring;
 
-      setPullDown(x + v * dt);
+      setPullDown(Math.max(Math.min(x + v * dt, stopPos()), 0));
 
       if (Math.abs(x) > 1 || Math.abs(v) > 1) {
         requestAnimationFrame(updatePullDown);
@@ -66,12 +68,11 @@ const PullDownToRefresh: Component<{
 
       if (
         !holding &&
-        untrack(pullDownDistance) >= 160 &&
+        untrack(pullDown) >= stopPos() &&
         !props.loading &&
         props.onRefresh
       ) {
         setTimeout(props.onRefresh, 0);
-        // FIXME: this may trigger at multiple frames
       }
     } finally {
       ds = 0;
@@ -91,11 +92,12 @@ const PullDownToRefresh: Component<{
     if (scrollTop >= 0 && scrollTop < 1) {
       event.preventDefault()
       ds = -(event.deltaY / window.devicePixelRatio / 2);
-      holding = true;
+      holding = untrack(pullDown) < stopPos();
       if (wheelTimeout) {
         clearTimeout(wheelTimeout);
       }
       wheelTimeout = setTimeout(onWheelNotUpdated, 200);
+
       if (released) {
         released = false;
         requestAnimationFrame(updatePullDown);
@@ -130,7 +132,7 @@ const PullDownToRefresh: Component<{
     }
     holding = true;
     if (lastTouchScreenY !== 0) {
-      ds = (item.screenY - lastTouchScreenY) / window.devicePixelRatio;
+      ds = (item.screenY - lastTouchScreenY) ;
     }
     lastTouchScreenY = item.screenY;
     if (released) {
@@ -143,7 +145,7 @@ const PullDownToRefresh: Component<{
     lastTouchId = undefined;
     lastTouchScreenY = 0;
     holding = false;
-    if (untrack(pullDownDistance) >= 160 && !props.loading && props.onRefresh) {
+    if (untrack(indicatorOfsY) >= 160 && !props.loading && props.onRefresh) {
       setTimeout(props.onRefresh, 0);
     } else {
       if (released) {
@@ -185,14 +187,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;
       }

From 49b7f2891b5c8843bb1fc598376e27794659dfcc Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Wed, 9 Oct 2024 15:15:22 +0800
Subject: [PATCH 6/6] PullDownToRefresh: reset the state if invisible

---
 src/timelines/PullDownToRefresh.tsx | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/timelines/PullDownToRefresh.tsx b/src/timelines/PullDownToRefresh.tsx
index 3343027..a9b2812 100644
--- a/src/timelines/PullDownToRefresh.tsx
+++ b/src/timelines/PullDownToRefresh.tsx
@@ -28,7 +28,7 @@ const PullDownToRefresh: Component<{
   let rootElement: HTMLDivElement;
   const [pullDown, setPullDown] = createSignal(0);
 
-  const stopPos = () => 160
+  const stopPos = () => 160;
 
   const indicatorOfsY = () => {
     if (props.loading) {
@@ -43,12 +43,16 @@ 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 K = 5;
+  const K = 10;
   const updatePullDown = (ts: number) => {
     released = false;
     try {
@@ -90,9 +94,10 @@ const PullDownToRefresh: Component<{
   const handleLinkedWheel = (event: WheelEvent) => {
     const scrollTop = (event.target as HTMLElement).scrollTop;
     if (scrollTop >= 0 && scrollTop < 1) {
-      event.preventDefault()
+      const d = untrack(pullDown);
+      if (event.deltaY <= 0 || d > 0) event.preventDefault();
       ds = -(event.deltaY / window.devicePixelRatio / 2);
-      holding = untrack(pullDown) < stopPos();
+      holding = d < stopPos();
       if (wheelTimeout) {
         clearTimeout(wheelTimeout);
       }
@@ -124,15 +129,16 @@ const PullDownToRefresh: Component<{
       return;
     }
     const item = event.targetTouches.item(0)!;
-    event.preventDefault();
+    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) ;
+      ds = item.screenY - lastTouchScreenY;
     }
     lastTouchScreenY = item.screenY;
     if (released) {
@@ -145,7 +151,11 @@ const PullDownToRefresh: Component<{
     lastTouchId = undefined;
     lastTouchScreenY = 0;
     holding = false;
-    if (untrack(indicatorOfsY) >= 160 && !props.loading && props.onRefresh) {
+    if (
+      untrack(indicatorOfsY) >= stopPos() &&
+      !props.loading &&
+      props.onRefresh
+    ) {
       setTimeout(props.onRefresh, 0);
     } else {
       if (released) {