fix: compact feed videos play video when tapped (#2143)

Author: aeharding

src/features/media/video/Player.tsx

@@ -33,6 +33,7 @@ export interface PlayerProps extends React.HTMLProps<HTMLElement> {
 
   pauseWhenNotInView?: boolean;
   allowShowPlayButton?: boolean;
+  still?: boolean;
 
   ref?: React.RefObject<HTMLVideoElement>;
   videoRef?: React.RefObject<HTMLVideoElement | undefined>;
@@ -49,6 +50,7 @@ export default function Player({
   autoPlay: videoAllowedToAutoplay = true,
   pauseWhenNotInView = true,
   allowShowPlayButton = true,
+  still = false,
   ref,
   videoRef: _videoRef,
   disableInlineInteraction,
@@ -122,6 +124,7 @@ export default function Player({
 
   useEffect(() => {
     if (!videoRef.current) return;
+    if (still) return;
     if (!pauseWhenNotInView) {
       if (autoPlay) resume();
 
@@ -133,7 +136,13 @@ export default function Player({
     } else {
       pause();
     }
-  }, [inView, pause, resume, pauseWhenNotInView, autoPlay]);
+  }, [inView, pause, resume, pauseWhenNotInView, autoPlay, still]);
+
+  useEffect(() => {
+    if (!still) return;
+
+    pause();
+  }, [pause, still]);
 
   useEffect(() => {
     function enterPip() {

src/features/post/inFeed/compact/CompactFeedPostMedia.tsx

@@ -2,6 +2,7 @@ import { ComponentProps } from "react";
 import { PostView } from "threadiverse";
 
 import GalleryMedia from "#/features/media/gallery/GalleryMedia";
+import { buildMediaId } from "#/features/media/video/VideoPortalProvider";
 
 import usePostSrc from "../usePostSrc";
 
@@ -22,7 +23,8 @@ export default function CompactFeedPostMedia(
         disableInlineInteraction
         controls={false}
         volume={false}
-        autoPlay={false}
+        still
+        portalWithMediaId={buildMediaId(props.post.post.ap_id)}
       />
     );
 }