StackedRouter: try to fix the swipe to back

src/platform/StackedRouter.tsx

@@ -306,10 +306,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
     }
     const [fig0] = event.touches;
     const { x, width } = event.currentTarget.getBoundingClientRect();
-    if (
+    if (fig0.clientX < x - 22 || fig0.clientX > x + 22) {
-      fig0.clientX - fig0.radiusX < x - 22 ||
-      fig0.clientX + fig0.radiusX > x + 22
-    ) {
       return;
     }
     origX = x;
@@ -416,10 +413,10 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
                   class="StackedPage"
                   onCancel={[popFrame, 1]}
                   onClick={[onDialogClick, popFrame]}
-                  onTouchStart={onDialogTouchStart}
+                  on:touchstart={onDialogTouchStart}
-                  onTouchMove={onDialogTouchMove}
+                  on:touchmove={onDialogTouchMove}
-                  onTouchEnd={onDialogTouchEnd}
+                  on:touchend={onDialogTouchEnd}
-                  onTouchCancel={onDialogTouchCancel}
+                  on:touchcancel={onDialogTouchCancel}
                   id={frame().rootId}
                 >
                   <StaticRouter url={frame().path} {...oprops} />

src/timelines/MediaAttachmentGrid.css

@@ -12,7 +12,7 @@
     min-width: 40px;
     object-fit: contain;
     max-width: 100%;
-    background-color: var(--tutu-color-surface-d);
+    background-color: var(--media-color-accent, var(--tutu-color-surface-d));
     border-radius: 2px;
     border: 1px solid var(--tutu-color-surface-d);
     transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);

src/timelines/toot-components/PreviewCard.css

@@ -19,6 +19,10 @@
     background-color: var(--tutu-color-surface);
     max-width: 100%;
     height: auto;
+
+    &.loaded {
+      background-color: #eeeeee;
+    }
   }
 
   &:hover,

src/timelines/toot-components/PreviewCard.tsx

@@ -5,6 +5,14 @@ import { Title, Body1 } from "../../material/typography";
 import { averageColorHex } from "../../platform/blurhash";
 import "./PreviewCard.css";
 
+function onResetImg(event: Event & { currentTarget: HTMLImageElement }) {
+  event.currentTarget.classList.remove("loaded");
+}
+
+function onImgLoaded(event: Event & { currentTarget: HTMLImageElement }) {
+  event.currentTarget.classList.add("loaded");
+}
+
 export function PreviewCard(props: {
   src: mastodon.v1.PreviewCard;
   alwaysCompact?: boolean;
@@ -81,6 +89,8 @@ export function PreviewCard(props: {
     >
       <Show when={props.src.image}>
         <img
+          onLoadStart={onResetImg}
+          onLoad={onImgLoaded}
           crossOrigin="anonymous"
           src={props.src.image!}
           width={props.src.width || undefined}