This commit is contained in:
parent
199457b933
commit
d20543d7a3
@ -30,6 +30,7 @@ export function MediaElement(props: MediaElementProps) {
|
|||||||
<div className="-mx-4 md:mx-0 my-3 md:h-80 flex items-center justify-center">
|
<div className="-mx-4 md:mx-0 my-3 md:h-80 flex items-center justify-center">
|
||||||
<video
|
<video
|
||||||
autoPlay={autoplay}
|
autoPlay={autoplay}
|
||||||
|
loop={true}
|
||||||
muted={autoplay}
|
muted={autoplay}
|
||||||
key={props.url}
|
key={props.url}
|
||||||
src={props.url}
|
src={props.url}
|
||||||
|
@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
|
|||||||
import Modal from "@/Element/Modal";
|
import Modal from "@/Element/Modal";
|
||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
import { ProxyImg } from "@/Element/ProxyImg";
|
import { ProxyImg } from "@/Element/ProxyImg";
|
||||||
|
import useImgProxy from "@/Hooks/useImgProxy";
|
||||||
|
|
||||||
interface SpotlightMediaProps {
|
interface SpotlightMediaProps {
|
||||||
images: Array<string>;
|
images: Array<string>;
|
||||||
@ -9,7 +10,10 @@ interface SpotlightMediaProps {
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const videoSuffixes = ["mp4", "webm", "ogg", "mov", "avi", "mkv"];
|
||||||
|
|
||||||
export function SpotlightMedia(props: SpotlightMediaProps) {
|
export function SpotlightMedia(props: SpotlightMediaProps) {
|
||||||
|
const { proxy } = useImgProxy();
|
||||||
const [idx, setIdx] = useState(props.idx);
|
const [idx, setIdx] = useState(props.idx);
|
||||||
|
|
||||||
const image = useMemo(() => {
|
const image = useMemo(() => {
|
||||||
@ -58,9 +62,30 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const isVideo = useMemo(() => {
|
||||||
|
return image && videoSuffixes.some(suffix => image.endsWith(suffix));
|
||||||
|
}, [image]);
|
||||||
|
|
||||||
|
const mediaEl = useMemo(() => {
|
||||||
|
if (image && isVideo) {
|
||||||
|
return (
|
||||||
|
<video
|
||||||
|
src={image}
|
||||||
|
poster={proxy(image)}
|
||||||
|
autoPlay={true}
|
||||||
|
loop={true}
|
||||||
|
controls={true}
|
||||||
|
className="max-h-screen max-w-full"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return <ProxyImg src={image} className="max-h-screen max-w-full" />;
|
||||||
|
}
|
||||||
|
}, [image, isVideo]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProxyImg src={image} className="max-h-screen max-w-full" />
|
{mediaEl}
|
||||||
<div className="select-none absolute flex flex-row items-center gap-4 cursor-pointer left-0 top-0 p-4">
|
<div className="select-none absolute flex flex-row items-center gap-4 cursor-pointer left-0 top-0 p-4">
|
||||||
<Icon name="x-close" size={24} onClick={props.onClose} />
|
<Icon name="x-close" size={24} onClick={props.onClose} />
|
||||||
{props.images.length > 1 && `${idx + 1}/${props.images.length}`}
|
{props.images.length > 1 && `${idx + 1}/${props.images.length}`}
|
||||||
|
@ -30,7 +30,9 @@ function SpotlightFromThread({ onClose }: { onClose: () => void }) {
|
|||||||
const thread = useContext(ThreadContext);
|
const thread = useContext(ThreadContext);
|
||||||
|
|
||||||
const parsed = thread.root ? transformTextCached(thread.root.id, thread.root.content, thread.root.tags) : [];
|
const parsed = thread.root ? transformTextCached(thread.root.id, thread.root.content, thread.root.tags) : [];
|
||||||
const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
|
const images = parsed.filter(
|
||||||
|
a => a.type === "media" && (a.mimeType?.startsWith("image/") || a.mimeType?.startsWith("video/")),
|
||||||
|
);
|
||||||
if (images.length === 0) return;
|
if (images.length === 0) return;
|
||||||
return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />;
|
return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user