83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
import { ProxyImg } from "Element/ProxyImg";
|
|
import React, { MouseEvent, useState } from "react";
|
|
|
|
import "./MediaElement.css";
|
|
import Modal from "Element/Modal";
|
|
import Icon from "Icons/Icon";
|
|
|
|
/*
|
|
[
|
|
"imeta",
|
|
"url https://nostr.build/i/148e3e8cbe29ae268b0d6aad0065a086319d3c3b1fdf8b89f1e2327d973d2d05.jpg",
|
|
"blurhash e6A0%UE2t6D*R%?u?a9G?aM|~pM|%LR*RjR-%2NG%2t7_2R*%1IVWB",
|
|
"dim 3024x4032"
|
|
],
|
|
*/
|
|
interface MediaElementProps {
|
|
mime: string;
|
|
url: string;
|
|
magnet?: string;
|
|
sha256?: string;
|
|
blurHash?: string;
|
|
}
|
|
|
|
export function MediaElement(props: MediaElementProps) {
|
|
if (props.mime.startsWith("image/")) {
|
|
return (
|
|
<SpotlightMedia>
|
|
<ProxyImg key={props.url} src={props.url} />
|
|
</SpotlightMedia>
|
|
);
|
|
} else if (props.mime.startsWith("audio/")) {
|
|
return <audio key={props.url} src={props.url} controls />;
|
|
} else if (props.mime.startsWith("video/")) {
|
|
return (
|
|
<SpotlightMedia>
|
|
<video key={props.url} src={props.url} controls />
|
|
</SpotlightMedia>
|
|
);
|
|
} else {
|
|
return (
|
|
<a
|
|
key={props.url}
|
|
href={props.url}
|
|
onClick={e => e.stopPropagation()}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="ext">
|
|
{props.url}
|
|
</a>
|
|
);
|
|
}
|
|
}
|
|
|
|
export function SpotlightMedia({ children }: { children: React.ReactNode }) {
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
function onClick(e: MouseEvent<HTMLDivElement>) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
setShowModal(s => !s);
|
|
}
|
|
|
|
function onClose(e: MouseEvent<HTMLDivElement>) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
setShowModal(false);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{showModal && (
|
|
<Modal onClose={onClose} className="spotlight">
|
|
<div className="close" onClick={onClose}>
|
|
<Icon name="close" />
|
|
</div>
|
|
{children}
|
|
</Modal>
|
|
)}
|
|
<div onClick={onClick}>{children}</div>
|
|
</>
|
|
);
|
|
}
|