From d8c270fabe013a6d296bd9bf086b8148da293f6e Mon Sep 17 00:00:00 2001
From: josh <josh.dredge@outlook.com>
Date: Sat, 29 Aug 2026 00:23:31 +1000
Subject: [PATCH] Initial Commit

---
 resources/js/components/dredge/Feed/PostCard.vue |  5 +++++
 resources/js/composables/usePauseOffScreen.ts    | 13 +++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/dredge/Feed/PostCard.vue b/resources/js/components/dredge/Feed/PostCard.vue
index 241cc27..61a1242 100644
--- a/resources/js/components/dredge/Feed/PostCard.vue
+++ b/resources/js/components/dredge/Feed/PostCard.vue
@@ -82,6 +82,8 @@ usePauseOffscreen(videoRefs);
                         :aria-label="slide.alt"
                         :ref="registerVideo"
                         controls
+                        autoplay
+                        muted
                         preload="metadata"
                         playsinline
                         class="card__video"
@@ -95,6 +97,7 @@ usePauseOffscreen(videoRefs);
                         contain
                         height="100%"
                         width="100%"
+                        eager
                     >
                         <template #placeholder>
                             <div class="card__scan" />
@@ -121,6 +124,8 @@ usePauseOffscreen(videoRefs);
                 :ref="registerVideo"
                 :poster="post.image_url ?? undefined"
                 controls
+                autoplay
+                muted
                 preload="metadata"
                 playsinline
                 class="card__video"
diff --git a/resources/js/composables/usePauseOffScreen.ts b/resources/js/composables/usePauseOffScreen.ts
index a3551b8..1affaf8 100644
--- a/resources/js/composables/usePauseOffScreen.ts
+++ b/resources/js/composables/usePauseOffScreen.ts
@@ -11,12 +11,21 @@ export function usePauseOffscreen(
             (entries) => {
                 for (const entry of entries) {
                     const video = entry.target as HTMLVideoElement;
-                    if (!entry.isIntersecting && !video.paused) {
+                    if (entry.isIntersecting) {
+                        // Play whenever a video becomes visible — covers both
+                        // scrolling a post into view and navigating to a new
+                        // carousel slide (autoplay only fires once, on initial
+                        // mount, so it can't handle the latter on its own).
+                        video.play().catch(() => {
+                            // Autoplay can still be blocked by the browser;
+                            // leave it paused and let the user hit play.
+                        });
+                    } else if (!video.paused) {
                         video.pause();
                     }
                 }
             },
-            { threshold: 0.25 }, // pause once less than 25% of the video is visible
+            { threshold: 0.25 }, // play/pause around the 25% visible mark
         );
 
         const els = Array.isArray(videoRef.value)