Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-23 14:13:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

Show formatted duration for video media

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-02 14:21:38 +08:00
parent 21bdb51cd6
commit 07dff34e20
2 changed files with 45 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/components/status.css
View file

@ -357,39 +357,40 @@
position: relative; position: relative;
background-clip: padding-box; background-clip: padding-box;
} }
.status .media-video:before { .status .media-video[data-formatted-duration]:before {
/* draw a circle in the middle */ pointer-events: none;
content: ''; content: '⏵';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px; width: 70px;
height: 70px; height: 70px;
border-radius: 50%; font-size: 50px;
position: absolute;
text-indent: 3px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--text-insignificant-color);
background-color: var(--bg-blur-color); background-color: var(--bg-blur-color);
backdrop-filter: blur(6px) saturate(3) invert(0.2); backdrop-filter: blur(6px) saturate(3) invert(0.2);
z-index: 1; display: flex;
place-content: center;
place-items: center;
border-radius: 70px;
} }
.status .media-video:after { .status .media-video[data-formatted-duration]:hover:before {
/* show play icon */ color: var(--text-color);
content: ''; }
position: absolute; .status .media-video[data-formatted-duration]:after {
top: 50%; font-size: 12px;
left: 50%;
transform: translate(-35%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26px;
border-color: transparent transparent transparent
var(--text-insignificant-color);
pointer-events: none; pointer-events: none;
opacity: 0.75; content: attr(data-formatted-duration);
z-index: 2; position: absolute;
} bottom: 8px;
.status .media-video:hover:after { left: 8px;
opacity: 1; 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-gif video { .status .media-gif video {
object-fit: cover; object-fit: cover;

17
src/components/status.jsx
View file

@ -764,9 +764,11 @@ function Media({ media, showOriginal, onClick = () => {} }) {
const shortDuration = original.duration <= 20; const shortDuration = original.duration <= 20;
const isGIF = type === 'gifv' || shortDuration; const isGIF = type === 'gifv' || shortDuration;
const loopable = original.duration <= 60; const loopable = original.duration <= 60;
const formattedDuration = formatDuration(original.duration);
return ( return (
<div <div
class={`media media-${isGIF ? 'gif' : 'video'}`} class={`media media-${isGIF ? 'gif' : 'video'}`}
data-formatted-duration={formattedDuration}
style={{ style={{
backgroundColor: backgroundColor:
rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`, rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
@ -1423,4 +1425,19 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
); );
} }
function formatDuration(time) {
if (!time) return;
let hours = Math.floor(time / 3600);
let minutes = Math.floor((time % 3600) / 60);
let seconds = Math.round(time % 60);
if (hours === 0) {
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
} else {
return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds
.toString()
.padStart(2, '0')}`;
}
}
export default Status; export default Status;