From a3ea2cb75289f3b0c7dc688e51d586cdd56ca692 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 13 Mar 2023 23:40:08 +0800
Subject: [PATCH] =?UTF-8?q?Fix=20Android=20show=20stupid=20box=20for=20the?=
=?UTF-8?q?=20=E2=8F=B5=20ascii=20character?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Replace with actual icon
---
src/components/icon.jsx | 1 +
src/components/media.jsx | 20 +++++++++++++-------
src/components/status.css | 9 ++++-----
3 files changed, 18 insertions(+), 12 deletions(-)
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index afaa5f9b..221d95ac 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -64,6 +64,7 @@ const ICONS = {
sparkles: 'mingcute:sparkles-line',
exit: 'mingcute:exit-line',
translate: 'mingcute:translate-line',
+ play: 'mingcute:play-fill',
};
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
diff --git a/src/components/media.jsx b/src/components/media.jsx
index 5098d0bf..3db9ed20 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -1,6 +1,7 @@
import { getBlurHashAverageColor } from 'fast-blurhash';
import { useRef } from 'preact/hooks';
+import Icon from './icon';
import { formatDuration } from './status';
/*
@@ -165,13 +166,18 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
muted
/>
) : (
- <img
- src={previewUrl}
- alt={description}
- width={width}
- height={height}
- loading="lazy"
- />
+ <>
+ <img
+ src={previewUrl}
+ alt={description}
+ width={width}
+ height={height}
+ loading="lazy"
+ />
+ <div class="media-play">
+ <Icon icon="play" size="xxl" />
+ </div>
+ </>
)}
</div>
);
diff --git a/src/components/status.css b/src/components/status.css
index 08b80e91..e78a6c69 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -445,14 +445,11 @@ body:has(#modal-container .carousel) .status .media img:hover {
position: relative;
background-clip: padding-box;
}
-.status :is(.media-video, .media-audio)[data-formatted-duration]:before {
+.status :is(.media-video, .media-audio)[data-formatted-duration] .media-play {
pointer-events: none;
- content: '⏵';
width: 70px;
height: 70px;
- font-size: 50px;
position: absolute;
- text-indent: 3px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
@@ -465,7 +462,9 @@ 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:before {
+.status
+ :is(.media-video, .media-audio)[data-formatted-duration]:hover
+ .media-play {
color: var(--text-color);
background-color: var(--bg-blur-color);
}