This commit is contained in:
parent
e408389cdb
commit
f124082f6f
@ -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, useState } from "react";
|
import React, { CSSProperties, useEffect, useMemo, useRef } from "react";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { useInView } from "react-intersection-observer";
|
import { useInView } from "react-intersection-observer";
|
||||||
|
|
||||||
@ -43,12 +43,12 @@ const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => {
|
|||||||
}, [imageRef.current]);
|
}, [imageRef.current]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames("flex justify-center items-center -mx-4 md:mx-0 my-2", { "md:h-80": !meta })}>
|
<div className={classNames("flex items-center -mx-4 md:mx-0 my-2", { "md:h-[510px]": !meta })}>
|
||||||
<ProxyImg
|
<ProxyImg
|
||||||
key={url}
|
key={url}
|
||||||
src={url}
|
src={url}
|
||||||
onClick={onMediaClick}
|
onClick={onMediaClick}
|
||||||
className={classNames("max-h-[80vh]", { "md:max-h-80": !meta })}
|
className={classNames("max-h-[80vh] md:rounded-sm", { "md:max-h-[510px]": !meta })}
|
||||||
style={style}
|
style={style}
|
||||||
ref={imageRef}
|
ref={imageRef}
|
||||||
/>
|
/>
|
||||||
@ -59,9 +59,8 @@ const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => {
|
|||||||
const VideoElement = ({ url }: VideoElementProps) => {
|
const VideoElement = ({ url }: VideoElementProps) => {
|
||||||
const { proxy } = useImgProxy();
|
const { proxy } = useImgProxy();
|
||||||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||||||
const { ref: videoContainerRef, inView } = useInView({ threshold: 1 });
|
const { ref: videoContainerRef, inView } = useInView({ threshold: 0.33 });
|
||||||
const isMobile = window.innerWidth < 768;
|
const isMobile = window.innerWidth < 768;
|
||||||
const [isHovering, setIsHovering] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isMobile || !videoRef.current) {
|
if (isMobile || !videoRef.current) {
|
||||||
@ -75,19 +74,15 @@ const VideoElement = ({ url }: VideoElementProps) => {
|
|||||||
}, [inView]);
|
}, [inView]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div ref={videoContainerRef} className="flex justify-center items-center -mx-4 md:mx-0 md:h-[510px] my-2">
|
||||||
onMouseEnter={() => setIsHovering(true)}
|
|
||||||
onMouseLeave={() => setIsHovering(false)}
|
|
||||||
ref={videoContainerRef}
|
|
||||||
className="flex justify-center items-center -mx-4 md:mx-0 md:h-80 my-2">
|
|
||||||
<video
|
<video
|
||||||
ref={videoRef}
|
ref={videoRef}
|
||||||
loop={true}
|
loop={true}
|
||||||
muted={!isMobile}
|
muted={!isMobile}
|
||||||
src={url}
|
src={url}
|
||||||
controls={isMobile || isHovering}
|
controls
|
||||||
poster={proxy(url)}
|
poster={proxy(url)}
|
||||||
className="max-h-[80vh] md:max-h-80"
|
className="max-h-[80vh] md:max-h-[510px] md:rounded-sm"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -41,6 +41,13 @@
|
|||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.gallery {
|
||||||
|
border-radius: 0.125rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gallery-item {
|
.gallery-item {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -57,6 +64,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery:not(:first-child),
|
.gallery:not(:first-child),
|
||||||
|
Loading…
Reference in New Issue
Block a user