separate components for different media types
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
1fe6a2a50d
commit
e408389cdb
@ -1,7 +1,7 @@
|
|||||||
import { ProxyImg } from "@/Element/ProxyImg";
|
import { ProxyImg } from "@/Element/ProxyImg";
|
||||||
import useImgProxy from "@/Hooks/useImgProxy";
|
import useImgProxy from "@/Hooks/useImgProxy";
|
||||||
import { IMeta } from "@snort/system";
|
import { IMeta } from "@snort/system";
|
||||||
import React, { CSSProperties, useEffect, useMemo, useRef } from "react";
|
import React, { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { useInView } from "react-intersection-observer";
|
import { useInView } from "react-intersection-observer";
|
||||||
|
|
||||||
@ -12,15 +12,59 @@ interface MediaElementProps {
|
|||||||
onMediaClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
|
onMediaClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MediaElement(props: MediaElementProps) {
|
interface AudioElementProps {
|
||||||
const { proxy } = useImgProxy();
|
url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface VideoElementProps {
|
||||||
|
url: string;
|
||||||
|
meta?: IMeta;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImageElementProps {
|
||||||
|
url: string;
|
||||||
|
meta?: IMeta;
|
||||||
|
onMediaClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AudioElement = ({ url }: AudioElementProps) => {
|
||||||
|
return <audio key={url} src={url} controls />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => {
|
||||||
const imageRef = useRef<HTMLImageElement | null>(null);
|
const imageRef = useRef<HTMLImageElement | null>(null);
|
||||||
const { ref: videoContainerRef, inView } = useInView({ threshold: 1 });
|
const style = useMemo(() => {
|
||||||
|
const style = {} as CSSProperties;
|
||||||
|
if (meta?.height && meta.width && imageRef.current) {
|
||||||
|
const scale = imageRef.current.offsetWidth / meta.width;
|
||||||
|
style.height = `${meta.height * scale}px`;
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
}, [imageRef.current]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classNames("flex justify-center items-center -mx-4 md:mx-0 my-2", { "md:h-80": !meta })}>
|
||||||
|
<ProxyImg
|
||||||
|
key={url}
|
||||||
|
src={url}
|
||||||
|
onClick={onMediaClick}
|
||||||
|
className={classNames("max-h-[80vh]", { "md:max-h-80": !meta })}
|
||||||
|
style={style}
|
||||||
|
ref={imageRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const VideoElement = ({ url }: VideoElementProps) => {
|
||||||
|
const { proxy } = useImgProxy();
|
||||||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||||||
const autoplay = window.innerWidth >= 768;
|
const { ref: videoContainerRef, inView } = useInView({ threshold: 1 });
|
||||||
|
const isMobile = window.innerWidth < 768;
|
||||||
|
const [isHovering, setIsHovering] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!autoplay || !videoRef.current) {
|
if (isMobile || !videoRef.current) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (inView) {
|
if (inView) {
|
||||||
@ -30,46 +74,32 @@ export function MediaElement(props: MediaElementProps) {
|
|||||||
}
|
}
|
||||||
}, [inView]);
|
}, [inView]);
|
||||||
|
|
||||||
const style = useMemo(() => {
|
return (
|
||||||
const style = {} as CSSProperties;
|
<div
|
||||||
if (props.meta?.height && props.meta.width && imageRef.current) {
|
onMouseEnter={() => setIsHovering(true)}
|
||||||
const scale = imageRef.current.offsetWidth / props.meta.width;
|
onMouseLeave={() => setIsHovering(false)}
|
||||||
style.height = `${props.meta.height * scale}px`;
|
ref={videoContainerRef}
|
||||||
}
|
className="flex justify-center items-center -mx-4 md:mx-0 md:h-80 my-2">
|
||||||
return style;
|
<video
|
||||||
}, [imageRef.current]);
|
ref={videoRef}
|
||||||
|
loop={true}
|
||||||
|
muted={!isMobile}
|
||||||
|
src={url}
|
||||||
|
controls={isMobile || isHovering}
|
||||||
|
poster={proxy(url)}
|
||||||
|
className="max-h-[80vh] md:max-h-80"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export function MediaElement(props: MediaElementProps) {
|
||||||
if (props.mime.startsWith("image/")) {
|
if (props.mime.startsWith("image/")) {
|
||||||
return (
|
return <ImageElement url={props.url} meta={props.meta} onMediaClick={props.onMediaClick} />;
|
||||||
<div className={classNames("flex justify-center items-center -mx-4 md:mx-0 my-2", { "md:h-80": !props.meta })}>
|
|
||||||
<ProxyImg
|
|
||||||
key={props.url}
|
|
||||||
src={props.url}
|
|
||||||
onClick={props.onMediaClick}
|
|
||||||
className={classNames("max-h-[80vh]", { "md:max-h-80": !props.meta })}
|
|
||||||
style={style}
|
|
||||||
ref={imageRef}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else if (props.mime.startsWith("audio/")) {
|
} else if (props.mime.startsWith("audio/")) {
|
||||||
return <audio key={props.url} src={props.url} controls />;
|
return <AudioElement url={props.url} />;
|
||||||
} else if (props.mime.startsWith("video/")) {
|
} else if (props.mime.startsWith("video/")) {
|
||||||
return (
|
return <VideoElement url={props.url} />;
|
||||||
<div ref={videoContainerRef} className="flex justify-center items-center -mx-4 md:mx-0 md:h-80 my-2">
|
|
||||||
<video
|
|
||||||
ref={videoRef}
|
|
||||||
loop={true}
|
|
||||||
muted={autoplay}
|
|
||||||
key={props.url}
|
|
||||||
src={props.url}
|
|
||||||
controls
|
|
||||||
poster={proxy(props.url)}
|
|
||||||
className="max-h-[80vh] md:max-h-80"
|
|
||||||
style={style}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
|
Loading…
Reference in New Issue
Block a user