forked from fedi/mastodon
Fix more visual issues with the audio player (#11654)
* Fix more visual issues with the audio player - Add horizontal baseline in the middle of waveform - Fix audio player colors in light theme - Use audio element instead of web audio API - Do not render any bars until the file is loaded - Do not allow interactions with waveform until the file is loaded * Fix code style issue
This commit is contained in:
parent
e72bac7576
commit
2e99e3cab3
|
@ -362,7 +362,8 @@ class Status extends ImmutablePureComponent {
|
|||
src={attachment.get('url')}
|
||||
alt={attachment.get('description')}
|
||||
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
|
||||
height={110}
|
||||
peaks={[0]}
|
||||
height={70}
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
|
|
|
@ -14,8 +14,6 @@ const messages = defineMessages({
|
|||
unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
|
||||
});
|
||||
|
||||
const arrayOf = (length, fill) => (new Array(length)).fill(fill);
|
||||
|
||||
export default @injectIntl
|
||||
class Audio extends React.PureComponent {
|
||||
|
||||
|
@ -23,6 +21,7 @@ class Audio extends React.PureComponent {
|
|||
src: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string,
|
||||
duration: PropTypes.number,
|
||||
peaks: PropTypes.arrayOf(PropTypes.number),
|
||||
height: PropTypes.number,
|
||||
preload: PropTypes.bool,
|
||||
editable: PropTypes.bool,
|
||||
|
@ -77,7 +76,7 @@ class Audio extends React.PureComponent {
|
|||
}
|
||||
|
||||
_updateWaveform () {
|
||||
const { src, height, duration, preload } = this.props;
|
||||
const { src, height, duration, peaks, preload } = this.props;
|
||||
|
||||
const progressColor = window.getComputedStyle(document.querySelector('.audio-player__progress-placeholder')).getPropertyValue('background-color');
|
||||
const waveColor = window.getComputedStyle(document.querySelector('.audio-player__wave-placeholder')).getPropertyValue('background-color');
|
||||
|
@ -94,7 +93,8 @@ class Audio extends React.PureComponent {
|
|||
cursorWidth: 0,
|
||||
progressColor,
|
||||
waveColor,
|
||||
forceDecode: true,
|
||||
backend: 'MediaElement',
|
||||
interact: preload,
|
||||
});
|
||||
|
||||
wavesurfer.setVolume(this.state.volume);
|
||||
|
@ -103,7 +103,7 @@ class Audio extends React.PureComponent {
|
|||
wavesurfer.load(src);
|
||||
this.loaded = true;
|
||||
} else {
|
||||
wavesurfer.load(src, arrayOf(1, 0.5), null, duration);
|
||||
wavesurfer.load(src, peaks, 'none', duration);
|
||||
this.loaded = false;
|
||||
}
|
||||
|
||||
|
@ -123,6 +123,7 @@ class Audio extends React.PureComponent {
|
|||
this.wavesurfer.createBackend();
|
||||
this.wavesurfer.createPeakCache();
|
||||
this.wavesurfer.load(this.props.src);
|
||||
this.wavesurfer.toggleInteraction();
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
|
|
|
@ -116,7 +116,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
|||
src={attachment.get('url')}
|
||||
alt={attachment.get('description')}
|
||||
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
|
||||
height={150}
|
||||
height={110}
|
||||
preload
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -104,7 +104,8 @@ html {
|
|||
.box-widget input[type="email"],
|
||||
.box-widget input[type="password"],
|
||||
.box-widget textarea,
|
||||
.statuses-grid .detailed-status {
|
||||
.statuses-grid .detailed-status,
|
||||
.audio-player {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
|
@ -700,3 +701,10 @@ html {
|
|||
.compose-form .compose-form__warning {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.audio-player .video-player__controls button,
|
||||
.audio-player .video-player__time-sep,
|
||||
.audio-player .video-player__time-current,
|
||||
.audio-player .video-player__time-total {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
|
|
@ -5062,6 +5062,19 @@ a.status-card.compact:hover {
|
|||
|
||||
&__waveform {
|
||||
padding: 15px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-top: 1px solid lighten($ui-base-color, 4%);
|
||||
width: 100%;
|
||||
height: 0;
|
||||
left: 0;
|
||||
top: calc(50% + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
&__progress-placeholder {
|
||||
|
|
Loading…
Reference in a new issue