diff --git a/packages/app/src/Element/Embed/MediaElement.tsx b/packages/app/src/Element/Embed/MediaElement.tsx index ebaf89b3..26b88074 100644 --- a/packages/app/src/Element/Embed/MediaElement.tsx +++ b/packages/app/src/Element/Embed/MediaElement.tsx @@ -1,7 +1,7 @@ import { ProxyImg } from "@/Element/ProxyImg"; import useImgProxy from "@/Hooks/useImgProxy"; 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 { useInView } from "react-intersection-observer"; @@ -43,12 +43,12 @@ const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => { }, [imageRef.current]); return ( -
+
@@ -59,9 +59,8 @@ const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => { const VideoElement = ({ url }: VideoElementProps) => { const { proxy } = useImgProxy(); const videoRef = useRef(null); - const { ref: videoContainerRef, inView } = useInView({ threshold: 1 }); + const { ref: videoContainerRef, inView } = useInView({ threshold: 0.33 }); const isMobile = window.innerWidth < 768; - const [isHovering, setIsHovering] = useState(false); useEffect(() => { if (isMobile || !videoRef.current) { @@ -75,19 +74,15 @@ const VideoElement = ({ url }: VideoElementProps) => { }, [inView]); return ( -
setIsHovering(true)} - onMouseLeave={() => setIsHovering(false)} - ref={videoContainerRef} - className="flex justify-center items-center -mx-4 md:mx-0 md:h-80 my-2"> +
); diff --git a/packages/app/src/Element/Text.css b/packages/app/src/Element/Text.css index ec1caf82..e0c3fc08 100644 --- a/packages/app/src/Element/Text.css +++ b/packages/app/src/Element/Text.css @@ -41,6 +41,13 @@ -webkit-overflow-scrolling: touch; } +@media (min-width: 768px) { + .gallery { + border-radius: 0.125rem; + overflow: hidden; + } +} + .gallery-item { display: block; position: relative; @@ -57,6 +64,7 @@ width: 100%; height: 100%; display: block; + border-radius: 0; } .gallery:not(:first-child),