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),