snort/packages/app/src/Components/Event/RevealMedia.tsx

93 lines
2.6 KiB
TypeScript

import { IMeta } from "@snort/system";
import { FormattedMessage } from "react-intl";
import { Link } from "react-router-dom";
import { MediaElement } from "@/Components/Embed/MediaElement";
import Reveal from "@/Components/Event/Reveal";
import useFollowsControls from "@/Hooks/useFollowControls";
import useLogin from "@/Hooks/useLogin";
import usePreferences from "@/Hooks/usePreferences";
import { FileExtensionRegex } from "@/Utils/Const";
interface RevealMediaProps {
creator: string;
link: string;
onMediaClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
meta?: IMeta;
size?: number;
}
export default function RevealMedia(props: RevealMediaProps) {
const publicKey = useLogin(s => s.publicKey);
const autoLoadMedia = usePreferences(s => s.autoLoadMedia);
const { isFollowing } = useFollowsControls();
const hideNonFollows = autoLoadMedia === "follows-only" && !isFollowing(props.creator);
const isMine = props.creator === publicKey;
const hideMedia = autoLoadMedia === "none" || (!isMine && hideNonFollows);
const hostname = new URL(props.link).hostname;
const url = new URL(props.link);
const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
const type = (() => {
switch (extension) {
case "gif":
case "jpg":
case "jpeg":
case "jfif":
case "png":
case "bmp":
case "webp":
return "image";
case "wav":
case "mp3":
case "ogg":
return "audio";
case "mp4":
case "mov":
case "mkv":
case "avi":
case "m4v":
case "webm":
return "video";
default:
return "unknown";
}
})();
if (hideMedia) {
return (
<Reveal
message={
<FormattedMessage
defaultMessage="You don't follow this person, click here to load media from <i>{link}</i>, or update <a><i>your preferences</i></a> to always load media from everybody."
id="HhcAVH"
values={{
i: i => <i>{i}</i>,
a: a => <Link to="/settings/preferences">{a}</Link>,
link: hostname,
}}
/>
}>
<MediaElement
mime={`${type}/${extension}`}
url={url.toString()}
onMediaClick={props.onMediaClick}
meta={props.meta}
size={props.size}
/>
</Reveal>
);
} else {
return (
<MediaElement
mime={`${type}/${extension}`}
url={url.toString()}
onMediaClick={props.onMediaClick}
meta={props.meta}
size={props.size}
/>
);
}
}