Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-24 08:48:47 +01:00
Code Issues Projects Releases Packages 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%;
object-fit: cover;
}
.status .media:not(.media-audio) {
.status .media {
cursor: pointer;
}
@keyframes position-object {
@ -391,12 +391,11 @@
height: 100%;
object-fit: contain;
}
.status .media-video,
.status .media-gif {
.status :is(.media-video, .media-audio, .media-gif) {
position: relative;
background-clip: padding-box;
}
.status .media-video[data-formatted-duration]:before {
.status :is(.media-video, .media-audio)[data-formatted-duration]:before {
pointer-events: none;
content: '⏵';
width: 70px;
@ -416,23 +415,26 @@
border-radius: 70px;
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);
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;
pointer-events: none;
content: attr(data-formatted-duration);
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
color: var(--bg-color);
background-color: var(--text-color);
backdrop-filter: blur(6px) saturate(3) invert(0.2);
border-radius: 4px;
padding: 0 4px;
}
.status .media-audio[data-formatted-duration]:after {
content: '♬ ' attr(data-formatted-duration);
}
.status .media-gif[data-label]:not(:hover):after {
font-size: 12px;
font-weight: bold;
@ -440,7 +442,7 @@
content: attr(data-label);
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
color: var(--bg-faded-color);
background-color: var(--text-insignificant-color);
backdrop-filter: blur(6px) saturate(3) invert(0.2);
@ -458,12 +460,27 @@
.status .media-contain video {
object-fit: contain !important;
}
.status .media-audio {
/* .status .media-audio {
border: 0;
min-height: 0;
}
.status .media-audio audio {
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 */

19
src/components/status.jsx
View file

@ -839,9 +839,24 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
</div>
);
} else if (type === 'audio') {
const formattedDuration = formatDuration(original.duration);
return (
<div class="media media-audio">
<audio src={remoteUrl || url} preload="none" controls />
<div
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>
);
}