From f02cd50d7b6391206bd88ac0170c36d8591c596e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 13 Sep 2023 18:10:20 +0800
Subject: [PATCH] Fix unknown media not working
---
src/components/media.jsx | 8 ++++++--
src/components/status.css | 6 ++----
2 files changed, 8 insertions(+), 6 deletions(-)
diff --git a/src/components/media.jsx b/src/components/media.jsx
index dac7b743..f8e2ead3 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -103,7 +103,11 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
[to],
);
- const isImage = type === 'image' || (type === 'unknown' && previewUrl);
+ const isVideoMaybe =
+ type === 'unknown' &&
+ /\.(mp4|m4a|m4p|m4b|m4r|m4v|mov|webm)$/i.test(remoteMediaURL);
+ const isImage =
+ type === 'image' || (type === 'unknown' && previewUrl && !isVideoMaybe);
const parentRef = useRef();
const [imageSmallerThanParent, setImageSmallerThanParent] = useState(false);
@@ -221,7 +225,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
)}
</Parent>
);
- } else if (type === 'gifv' || type === 'video') {
+ } else if (type === 'gifv' || type === 'video' || isVideoMaybe) {
const shortDuration = original.duration < 31;
const isGIF = type === 'gifv' && shortDuration;
// If GIF is too long, treat it as a video
diff --git a/src/components/status.css b/src/components/status.css
index ff0da80c..72c8ce54 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -779,7 +779,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
position: relative;
background-clip: padding-box;
}
-.status :is(.media-video, .media-audio)[data-formatted-duration] .media-play {
+.status :is(.media-video, .media-audio) .media-play {
pointer-events: none;
width: 44px;
height: 44px;
@@ -797,9 +797,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
border-radius: 70px;
transition: all 0.2s ease-in-out;
}
-.status
- :is(.media-video, .media-audio)[data-formatted-duration]:hover:not(:active)
- .media-play {
+.status :is(.media-video, .media-audio):hover:not(:active) .media-play {
transform: translate(-50%, -50%) scale(1.1);
background-color: var(--bg-color);
box-shadow: 0 0 16px var(--drop-shadow-color),