add settings for autoplay gifs and vids

src/timelines/MediaAttachmentGrid.tsx

@@ -13,6 +13,8 @@ import tootStyle from "./toot.module.css";
 import MediaViewer from "./MediaViewer";
 import { render } from "solid-js/web";
 import { useWindowSize } from "@solid-primitives/resize-observer";
+import { useStore } from "@nanostores/solid";
+import { $settings } from "../settings/stores";
 
 const MediaAttachmentGrid: Component<{
   attachments: mastodon.v1.MediaAttachment[];
@@ -22,6 +24,7 @@ const MediaAttachmentGrid: Component<{
   const viewerOpened = () => typeof viewerIndex() !== "undefined";
   const windowSize = useWindowSize();
   const vh35 = () => Math.floor(windowSize.height * 0.35);
+  const settings = useStore($settings);
 
   createRenderEffect((lastDispose?: () => void) => {
     lastDispose?.();
@@ -70,7 +73,11 @@ const MediaAttachmentGrid: Component<{
     <section
       ref={rootRef!}
       class={[tootStyle.tootAttachmentGrp, "attachments"].join(" ")}
-      onClick={(e) => e.stopImmediatePropagation()}
+      onClick={(e) => {
+        if (e.target !== e.currentTarget) {
+          e.stopImmediatePropagation();
+        }
+      }}
     >
       <For each={props.attachments}>
         {(item, index) => {
@@ -109,20 +116,23 @@ const MediaAttachmentGrid: Component<{
                   src={item.url || undefined}
                   style={style()}
                   onLoadedMetadata={[setLoaded, true]}
-                  autoplay={false}
+                  autoplay={settings().autoPlayVideos}
+                  playsinline={settings().autoPlayVideos ? true : undefined}
                   controls
+                  poster={item.previewUrl}
                 />
               );
-            case "gifv": // Later we can handle the preview
+            case "gifv":
               return (
                 <video
                   src={item.url || undefined}
                   style={style()}
                   onLoadedMetadata={[setLoaded, true]}
-                  autoplay={false}
+                  autoplay={settings().autoPlayGIFs}
                   controls
                   playsinline /* or safari on iOS will play in full-screen */
                   loop
+                  poster={item.previewUrl}
                 />
               );