ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Audio: Fix UI (#1434)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-09-24 14:37:27 +03:00
parent 2de5600602
commit 59be7ae021
2 changed files with 20 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/common/Audio.scss
View File

@ -46,7 +46,10 @@
i { i {
font-size: 1.625rem; font-size: 1.625rem;
margin-top: -.025rem;
&.icon-pause {
font-size: 1.5625rem;
}
} }
} }
@ -54,9 +57,9 @@
position: absolute; position: absolute;
&.icon-play { &.icon-play {
margin-left: .125rem; margin-left: .1875rem;
@media (max-width: 600px) { @media (max-width: 600px) {
margin-left: .0625rem; margin-left: .125rem;
} }
} }
} }
@ -78,11 +81,11 @@
.download-button { .download-button {
position: absolute; position: absolute;
width: 1.3125rem !important; width: 1.1875rem !important;
height: 1.3125rem !important; height: 1.1875rem !important;
padding: 0; padding: 0;
left: 1.8rem; left: 1.9375rem;
top: 1.8rem; top: 1.9375rem;
border: .125rem solid var(--background-color); border: .125rem solid var(--background-color);
z-index: 1; z-index: 1;
@ -124,28 +127,16 @@
color: var(--color-text-secondary); color: var(--color-text-secondary);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
display: flex; display: flex;
align-items: center; align-items: flex-end;
.unread { &.unread::after {
display: block; content: '';
position: relative; position: relative;
margin-left: 0.5rem; margin: 0 0 .375rem .25rem;
width: 0.4375rem;
&::before { height: 0.4375rem;
content: ""; border-radius: 50%;
display: block; background-color: var(--accent-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background-color: var(--accent-color);
}
} }
} }

5
src/components/common/Audio.tsx
View File

@ -57,7 +57,7 @@ type OwnProps = {
onDateClick?: (messageId: number, chatId: number) => void; onDateClick?: (messageId: number, chatId: number) => void;
}; };
const AVG_VOICE_DURATION = 30; const AVG_VOICE_DURATION = 10;
const MIN_SPIKES = IS_SINGLE_COLUMN_LAYOUT ? 20 : 25; const MIN_SPIKES = IS_SINGLE_COLUMN_LAYOUT ? 20 : 25;
const MAX_SPIKES = IS_SINGLE_COLUMN_LAYOUT ? 50 : 75; const MAX_SPIKES = IS_SINGLE_COLUMN_LAYOUT ? 50 : 75;
// This is needed for browsers requiring user interaction before playing. // This is needed for browsers requiring user interaction before playing.
@ -421,9 +421,8 @@ function renderVoice(voice: ApiVoice, renderedWaveform: any, playProgress: numbe
return ( return (
<div className="content"> <div className="content">
{renderedWaveform} {renderedWaveform}
<p className="voice-duration" dir="auto"> <p className={buildClassName('voice-duration', isMediaUnread && 'unread')} dir="auto">
{playProgress === 0 ? formatMediaDuration(voice.duration) : formatMediaDuration(voice.duration * playProgress)} {playProgress === 0 ? formatMediaDuration(voice.duration) : formatMediaDuration(voice.duration * playProgress)}
{isMediaUnread && <span className="unread" />}
</p> </p>
</div> </div>
); );