Skip to content

Commit

Permalink
fix: comments don't portal videos, have no controls
Browse files Browse the repository at this point in the history
  • Loading branch information
aeharding committed Nov 18, 2024
1 parent 6e6b0c9 commit c8e747f
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 6 deletions.
5 changes: 2 additions & 3 deletions src/features/media/Media.tsx
Original file line number Diff line number Diff line change
@@ -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<
Expand Down
17 changes: 14 additions & 3 deletions src/features/media/video/Video.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 2 additions & 0 deletions src/features/post/inFeed/large/media/LargeFeedPostMedia.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function LargeFeedPostMedia(
url={props.post.post.url}
alt={props.post.post.alt_text}
autoPlay={!props.blur}
shouldPortal
{...props}
/>
);
Expand All @@ -37,6 +38,7 @@ export default function LargeFeedPostMedia(
autoPlay={!props.blur}
alt={props.post.post.alt_text}
className={lightboxStyles}
shouldPortal
/>
);
}
3 changes: 3 additions & 0 deletions src/features/shared/markdown/MarkdownImg.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ export default function MarkdownImg({
mediaClassName={cx(sharedStyles, props.className)}
className={mediaStyles}
animationType="zoom"
progress={false}
volume={false}
shouldPortal={false}
/>
);
}

0 comments on commit c8e747f

Please sign in to comment.