simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Android show stupid box for the ⏵ ascii character

Browse source 
Replace with actual icon
This commit is contained in:
Lim Chee Aun 2023-03-13 23:40:08 +08:00
parent 7a5eb39331
commit a3ea2cb752
3 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/icon.jsx
View file

@ -64,6 +64,7 @@ const ICONS = {
sparkles: 'mingcute:sparkles-line', sparkles: 'mingcute:sparkles-line',
exit: 'mingcute:exit-line', exit: 'mingcute:exit-line',
translate: 'mingcute:translate-line', translate: 'mingcute:translate-line',
play: 'mingcute:play-fill',
}; };
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js'); const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

20
src/components/media.jsx
View file

@ -1,6 +1,7 @@
import { getBlurHashAverageColor } from 'fast-blurhash'; import { getBlurHashAverageColor } from 'fast-blurhash';
import { useRef } from 'preact/hooks'; import { useRef } from 'preact/hooks';
import Icon from './icon';
import { formatDuration } from './status'; import { formatDuration } from './status';
/* /*
@ -165,13 +166,18 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
muted muted
/> />
) : ( ) : (
<img <>
src={previewUrl} <img
alt={description} src={previewUrl}
width={width} alt={description}
height={height} width={width}
loading="lazy" height={height}
/> loading="lazy"
/>
<div class="media-play">
<Icon icon="play" size="xxl" />
</div>
</>
)} )}
</div> </div>
); );

9
src/components/status.css
View file

@ -445,14 +445,11 @@ body:has(#modal-container .carousel) .status .media img:hover {
position: relative; position: relative;
background-clip: padding-box; 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; pointer-events: none;
content: '⏵';
width: 70px; width: 70px;
height: 70px; height: 70px;
font-size: 50px;
position: absolute; position: absolute;
text-indent: 3px;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -465,7 +462,9 @@ body:has(#modal-container .carousel) .status .media img:hover {
border-radius: 70px; border-radius: 70px;
transition: all 0.2s ease-in-out; 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); color: var(--text-color);
background-color: var(--bg-blur-color); background-color: var(--bg-blur-color);
} }