chore: better video autoplay

Author: dpc

crates/rostra-web-ui/src/layout.rs

@@ -204,6 +204,42 @@ pub(crate) fn render_html_footer() -> Markup {
             "#))
         }
 
+        // Play/pause videos based on visibility
+        script {
+            (PreEscaped(r#"
+                document.addEventListener('DOMContentLoaded', () => {
+                    const videoObserver = new IntersectionObserver((entries) => {
+                        entries.forEach(entry => {
+                            const video = entry.target;
+                            if (entry.isIntersecting) {
+                                video.play().catch(() => {});
+                            } else {
+                                video.pause();
+                            }
+                        });
+                    }, { threshold: 0.5 });
+
+                    // Observe existing videos
+                    document.querySelectorAll('.m-rostraMedia__video').forEach(v => videoObserver.observe(v));
+
+                    // Observe new videos added dynamically (for AJAX/htmx)
+                    const mutationObserver = new MutationObserver((mutations) => {
+                        mutations.forEach(mutation => {
+                            mutation.addedNodes.forEach(node => {
+                                if (node.nodeType === 1) {
+                                    node.querySelectorAll?.('.m-rostraMedia__video').forEach(v => videoObserver.observe(v));
+                                    if (node.classList?.contains('m-rostraMedia__video')) {
+                                        videoObserver.observe(node);
+                                    }
+                                }
+                            });
+                        });
+                    });
+                    mutationObserver.observe(document.body, { childList: true, subtree: true });
+                });
+            "#))
+        }
+
         // Alpine.js initialization
         script {
             (PreEscaped(r#"

crates/rostra-web-ui/src/routes/content/filters.rs

@@ -286,9 +286,10 @@ where
                                             r#"<span class="m-rostraMedia"><img src="{url_escaped}" alt="{alt_escaped}"/></span>"#
                                         )
                                     } else if media.mime.starts_with("video/") {
-                                        // Render as video player
+                                        // Render as video player - plays when visible via
+                                        // IntersectionObserver
                                         format!(
-                                            r#"<span class="m-rostraMedia"><video src="{url_escaped}" controls class="m-rostraMedia__video"></video></span>"#
+                                            r#"<span class="m-rostraMedia"><video src="{url_escaped}" controls muted playsinline class="m-rostraMedia__video"></video></span>"#
                                         )
                                     } else {
                                         // Render as download link

crates/rostra-web-ui/src/routes/media.rs

@@ -236,7 +236,10 @@ pub async fn list(
                                     video
                                         src=(format!("/ui/media/{}/{}", author, media.event_id))
                                         ."o-mediaList__videoThumbnail"
-                                        preload="metadata"
+                                        autoplay
+                                        muted
+                                        loop
+                                        playsinline
                                         {}
                                 } @else {
                                     div ."o-mediaList__fileInfo" {