package.json

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

src/timelines/MediaAttachmentGrid.tsx

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

src/timelines/PullDownToRefresh.tsx

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

src/timelines/TootComposer.tsx

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

src/timelines/toot.module.css

@@ -3,7 +3,6 @@
   --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 */