Fixed playback-speed button bug and updated layout
This commit is contained in:
Alvaro
GitHub
parent
2b5f0ffc10
commit
dd12c4cba3
3 changed files with 110 additions and 57 deletions
|
|
@ -29,6 +29,7 @@ $color-gray-95: #121212;
|
|||
$color-black: #000000;
|
||||
|
||||
$color-white-alpha-06: rgba($color-white, 0.06);
|
||||
$color-white-alpha-08: rgba($color-white, 0.08);
|
||||
$color-white-alpha-12: rgba($color-white, 0.12);
|
||||
$color-white-alpha-20: rgba($color-white, 0.2);
|
||||
$color-white-alpha-40: rgba($color-white, 0.4);
|
||||
|
|
|
|||
|
|
@ -46,20 +46,80 @@ $audio-attachment-button-margin-small: 4px;
|
|||
.module-message__audio-attachment__controls {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: right;
|
||||
padding: 0 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.module-message__audio-attachment__dot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
transition: width 100ms ease-out;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 100%;
|
||||
transition: background 100ms ease-out;
|
||||
}
|
||||
|
||||
&--unplayed {
|
||||
width: 14px;
|
||||
}
|
||||
&--played {
|
||||
width: 0px;
|
||||
}
|
||||
.module-message__audio-attachment--incoming & {
|
||||
&--unplayed:before {
|
||||
@include light-theme {
|
||||
background: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
background: $color-gray-25;
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-message__audio-attachment--outgoing & {
|
||||
&--unplayed:before {
|
||||
background: $color-white-alpha-80;
|
||||
}
|
||||
}
|
||||
&--played:before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__audio-attachment__playback-rate-button {
|
||||
@include button-reset;
|
||||
@include font-body-2-bold;
|
||||
|
||||
width: 38px;
|
||||
height: 18px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
font-size: 12px; /* tiny override */
|
||||
padding: 1px 7px;
|
||||
margin: -1px 4px;
|
||||
background: $color-white-alpha-20;
|
||||
font-size: 11px;
|
||||
padding: 1px 2px;
|
||||
margin: -2px 0;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05px;
|
||||
user-select: none;
|
||||
|
||||
.module-message__audio-attachment--incoming & {
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
background: $color-black-alpha-08;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
background: $color-white-alpha-08;
|
||||
}
|
||||
}
|
||||
.module-message__audio-attachment--outgoing & {
|
||||
color: $color-white-alpha-80;
|
||||
background: $color-white-alpha-20;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__audio-attachment__button,
|
||||
|
|
@ -197,8 +257,6 @@ $audio-attachment-button-margin-small: 4px;
|
|||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: $audio-attachment-button-size +
|
||||
$audio-attachment-button-margin-big;
|
||||
|
||||
@media (min-width: 0px) and (max-width: 799px) {
|
||||
margin-left: $audio-attachment-button-size +
|
||||
|
|
@ -208,24 +266,11 @@ $audio-attachment-button-margin-small: 4px;
|
|||
|
||||
.module-message__audio-attachment__countdown {
|
||||
@include font-caption;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
width: $audio-attachment-button-size;
|
||||
user-select: none;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-left: 6px;
|
||||
border-radius: 100%;
|
||||
transition: background 100ms ease-out;
|
||||
}
|
||||
|
||||
&--played:after {
|
||||
background: transparent;
|
||||
}
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin-right: 12px;
|
||||
|
||||
.module-message__audio-attachment--incoming & {
|
||||
@include light-theme {
|
||||
|
|
|
|||
|
|
@ -633,39 +633,46 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
|
|||
>
|
||||
{timeToText(countDown)}
|
||||
</div>
|
||||
|
||||
<div className={`${CSS_BASE}__controls`}>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className={classNames(
|
||||
`${CSS_BASE}__dot`,
|
||||
`${CSS_BASE}__dot--${played ? 'played' : 'unplayed'}`
|
||||
)}
|
||||
/>
|
||||
{isPlaying && (
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(`${CSS_BASE}__playback-rate-button`)}
|
||||
onClick={ev => {
|
||||
ev.stopPropagation();
|
||||
setPlaybackRate(nextPlaybackRate(playbackRate));
|
||||
}}
|
||||
tabIndex={0}
|
||||
>
|
||||
{playbackRateLabels[playbackRate]}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!withContentBelow && !collapseMetadata && (
|
||||
<>
|
||||
<div className={`${CSS_BASE}__controls`}>
|
||||
{isPlaying && (
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(`${CSS_BASE}__playback-rate-button`)}
|
||||
onClick={ev => {
|
||||
ev.stopPropagation();
|
||||
setPlaybackRate(nextPlaybackRate(playbackRate));
|
||||
}}
|
||||
tabIndex={0}
|
||||
>
|
||||
{playbackRateLabels[playbackRate]}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<MessageMetadata
|
||||
direction={direction}
|
||||
expirationLength={expirationLength}
|
||||
expirationTimestamp={expirationTimestamp}
|
||||
hasText={withContentBelow}
|
||||
i18n={i18n}
|
||||
id={id}
|
||||
isShowingImage={false}
|
||||
isSticker={false}
|
||||
isTapToViewExpired={false}
|
||||
showMessageDetail={showMessageDetail}
|
||||
status={status}
|
||||
textPending={textPending}
|
||||
timestamp={timestamp}
|
||||
/>
|
||||
</>
|
||||
<MessageMetadata
|
||||
direction={direction}
|
||||
expirationLength={expirationLength}
|
||||
expirationTimestamp={expirationTimestamp}
|
||||
hasText={withContentBelow}
|
||||
i18n={i18n}
|
||||
id={id}
|
||||
isShowingImage={false}
|
||||
isSticker={false}
|
||||
isTapToViewExpired={false}
|
||||
showMessageDetail={showMessageDetail}
|
||||
status={status}
|
||||
textPending={textPending}
|
||||
timestamp={timestamp}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue