From c8e747f5ed0534d6d33a2b62924795863462ee7a Mon Sep 17 00:00:00 2001
From: Alexander Harding <noreply@harding.dev>
Date: Mon, 18 Nov 2024 17:48:13 -0600
Subject: [PATCH] fix: comments don't portal videos, have no controls

---
 src/features/media/Media.tsx                    |  5 ++---
 src/features/media/video/Video.tsx              | 17 ++++++++++++++---
 .../inFeed/large/media/LargeFeedPostMedia.tsx   |  2 ++
 src/features/shared/markdown/MarkdownImg.tsx    |  3 +++
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/features/media/Media.tsx b/src/features/media/Media.tsx
index 282fece520..cdc52c0439 100644
--- a/src/features/media/Media.tsx
+++ b/src/features/media/Media.tsx
@@ -1,13 +1,12 @@
 import { ComponentProps, ComponentRef } from "react";
 
-import { PlayerProps } from "#/features/media/video/Player";
-import Video from "#/features/media/video/Video";
+import Video, { VideoProps } from "#/features/media/video/Video";
 import { isUrlVideo } from "#/helpers/url";
 
 import GalleryMedia, { GalleryMediaProps } from "./gallery/GalleryMedia";
 
 export interface MediaProps
-  extends Omit<GalleryMediaProps & PlayerProps, "src" | "ref"> {
+  extends Omit<GalleryMediaProps & VideoProps, "src" | "ref"> {
   src: string;
 
   ref?: React.RefObject<
diff --git a/src/features/media/video/Video.tsx b/src/features/media/video/Video.tsx
index 85da22bdf5..ab0eee4ccb 100644
--- a/src/features/media/video/Video.tsx
+++ b/src/features/media/video/Video.tsx
@@ -2,14 +2,25 @@ import { useImperativeHandle } from "react";
 import * as portals from "react-reverse-portal";
 
 import type { PlayerProps } from "./Player";
-import type Player from "./Player";
+import Player from "./Player";
 import { useVideoPortalNode } from "./VideoPortalProvider";
 
 export interface VideoProps extends Omit<PlayerProps, "ref"> {
-  ref: React.RefObject<HTMLVideoElement | undefined>;
+  ref: React.RefObject<HTMLVideoElement>;
+  shouldPortal?: boolean;
 }
 
-export default function Video({ src, ref, ...props }: VideoProps) {
+export default function Video(props: VideoProps) {
+  const VideoComponent = props.shouldPortal ? PortaledVideo : UnportaledVideo;
+
+  return <VideoComponent {...props} />;
+}
+
+function UnportaledVideo(props: VideoProps) {
+  return <Player {...props} />;
+}
+
+function PortaledVideo({ src, ref, ...props }: VideoProps) {
   const portalNode = useVideoPortalNode(src);
 
   useImperativeHandle(
diff --git a/src/features/post/inFeed/large/media/LargeFeedPostMedia.tsx b/src/features/post/inFeed/large/media/LargeFeedPostMedia.tsx
index eeaf175108..e93ec8db9e 100644
--- a/src/features/post/inFeed/large/media/LargeFeedPostMedia.tsx
+++ b/src/features/post/inFeed/large/media/LargeFeedPostMedia.tsx
@@ -25,6 +25,7 @@ export default function LargeFeedPostMedia(
         url={props.post.post.url}
         alt={props.post.post.alt_text}
         autoPlay={!props.blur}
+        shouldPortal
         {...props}
       />
     );
@@ -37,6 +38,7 @@ export default function LargeFeedPostMedia(
         autoPlay={!props.blur}
         alt={props.post.post.alt_text}
         className={lightboxStyles}
+        shouldPortal
       />
     );
 }
diff --git a/src/features/shared/markdown/MarkdownImg.tsx b/src/features/shared/markdown/MarkdownImg.tsx
index 62a3592aba..6981d6b5eb 100644
--- a/src/features/shared/markdown/MarkdownImg.tsx
+++ b/src/features/shared/markdown/MarkdownImg.tsx
@@ -40,6 +40,9 @@ export default function MarkdownImg({
       mediaClassName={cx(sharedStyles, props.className)}
       className={mediaStyles}
       animationType="zoom"
+      progress={false}
+      volume={false}
+      shouldPortal={false}
     />
   );
 }