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

Better handling of audio

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-09 01:17:16 +08:00
parent 600edbee5d
commit 8a8dad12c8
2 changed files with 43 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/status.css
View file

@ -366,7 +366,7 @@
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.status .media:not(.media-audio) { .status .media {
cursor: pointer; cursor: pointer;
} }
@keyframes position-object { @keyframes position-object {
@ -391,12 +391,11 @@
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
.status .media-video, .status :is(.media-video, .media-audio, .media-gif) {
.status .media-gif {
position: relative; position: relative;
background-clip: padding-box; background-clip: padding-box;
} }
.status .media-video[data-formatted-duration]:before { .status :is(.media-video, .media-audio)[data-formatted-duration]:before {
pointer-events: none; pointer-events: none;
content: '⏵'; content: '⏵';
width: 70px; width: 70px;
@ -416,23 +415,26 @@
border-radius: 70px; border-radius: 70px;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.status .media-video[data-formatted-duration]:hover:before { .status :is(.media-video, .media-audio)[data-formatted-duration]:hover:before {
color: var(--text-color); color: var(--text-color);
background-color: var(--bg-blur-color); background-color: var(--bg-blur-color);
} }
.status .media-video[data-formatted-duration]:after { .status :is(.media-video, .media-audio)[data-formatted-duration]:after {
font-size: 12px; font-size: 12px;
pointer-events: none; pointer-events: none;
content: attr(data-formatted-duration); content: attr(data-formatted-duration);
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
left: 8px; right: 8px;
color: var(--bg-color); color: var(--bg-color);
background-color: var(--text-color); background-color: var(--text-color);
backdrop-filter: blur(6px) saturate(3) invert(0.2); backdrop-filter: blur(6px) saturate(3) invert(0.2);
border-radius: 4px; border-radius: 4px;
padding: 0 4px; padding: 0 4px;
} }
.status .media-audio[data-formatted-duration]:after {
content: '♬ ' attr(data-formatted-duration);
}
.status .media-gif[data-label]:not(:hover):after { .status .media-gif[data-label]:not(:hover):after {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
@ -440,7 +442,7 @@
content: attr(data-label); content: attr(data-label);
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
left: 8px; right: 8px;
color: var(--bg-faded-color); color: var(--bg-faded-color);
background-color: var(--text-insignificant-color); background-color: var(--text-insignificant-color);
backdrop-filter: blur(6px) saturate(3) invert(0.2); backdrop-filter: blur(6px) saturate(3) invert(0.2);
@ -458,12 +460,27 @@
.status .media-contain video { .status .media-contain video {
object-fit: contain !important; object-fit: contain !important;
} }
.status .media-audio { /* .status .media-audio {
border: 0; border: 0;
min-height: 0; min-height: 0;
} }
.status .media-audio audio { .status .media-audio audio {
width: 100%; width: 100%;
} */
.status .media-audio {
width: 100%;
height: 100%;
background-image: radial-gradient(
circle at center center,
var(--bg-color),
var(--bg-faded-color)
),
repeating-radial-gradient(
circle at center center,
transparent,
var(--bg-faded-color) 16px
);
background-blend-mode: multiply;
} }
/* CARD */ /* CARD */

19
src/components/status.jsx
View file

@ -839,9 +839,24 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
</div> </div>
); );
} else if (type === 'audio') { } else if (type === 'audio') {
const formattedDuration = formatDuration(original.duration);
return ( return (
<div class="media media-audio"> <div
<audio src={remoteUrl || url} preload="none" controls /> class="media media-audio"
data-formatted-duration={formattedDuration}
onClick={onClick}
>
{showOriginal ? (
<audio src={remoteUrl || url} preload="none" controls autoplay />
) : previewUrl ? (
<img
src={previewUrl}
alt={description}
width={width}
height={height}
loading="lazy"
/>
) : null}
</div> </div>
); );
} }