forked from Kieran/snort
spotlight videos
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">
|
||||
<video
|
||||
autoPlay={autoplay}
|
||||
loop={true}
|
||||
muted={autoplay}
|
||||
key={props.url}
|
||||
src={props.url}
|
||||
|
@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
|
||||
import Modal from "@/Element/Modal";
|
||||
import Icon from "@/Icons/Icon";
|
||||
import { ProxyImg } from "@/Element/ProxyImg";
|
||||
import useImgProxy from "@/Hooks/useImgProxy";
|
||||
|
||||
interface SpotlightMediaProps {
|
||||
images: Array<string>;
|
||||
@ -9,7 +10,10 @@ interface SpotlightMediaProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const videoSuffixes = ["mp4", "webm", "ogg", "mov", "avi", "mkv"];
|
||||
|
||||
export function SpotlightMedia(props: SpotlightMediaProps) {
|
||||
const { proxy } = useImgProxy();
|
||||
const [idx, setIdx] = useState(props.idx);
|
||||
|
||||
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 (
|
||||
<>
|
||||
<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">
|
||||
<Icon name="x-close" size={24} onClick={props.onClose} />
|
||||
{props.images.length > 1 && `${idx + 1}/${props.images.length}`}
|
||||
|
@ -30,7 +30,9 @@ function SpotlightFromThread({ onClose }: { onClose: () => void }) {
|
||||
const thread = useContext(ThreadContext);
|
||||
|
||||
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;
|
||||
return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user