[Glitch] Fix more visual issues with the audio player

Port 2e99e3cab3 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
rebase/4.0.0rc2
Eugen Rochko 2019-08-25 15:09:19 +02:00 committed by Thibaut Girka
parent 84d4d75c91
commit b90bd31cfd
5 changed files with 29 additions and 7 deletions

View File

@ -575,7 +575,8 @@ class Status extends ImmutablePureComponent {
src={attachment.get('url')} src={attachment.get('url')}
alt={attachment.get('description')} alt={attachment.get('description')}
duration={attachment.getIn(['meta', 'original', 'duration'], 0)} duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
height={110} peaks={[0]}
height={70}
/> />
)} )}
</Bundle> </Bundle>

View File

@ -14,8 +14,6 @@ const messages = defineMessages({
unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' }, unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
}); });
const arrayOf = (length, fill) => (new Array(length)).fill(fill);
export default @injectIntl export default @injectIntl
class Audio extends React.PureComponent { class Audio extends React.PureComponent {
@ -23,6 +21,7 @@ class Audio extends React.PureComponent {
src: PropTypes.string.isRequired, src: PropTypes.string.isRequired,
alt: PropTypes.string, alt: PropTypes.string,
duration: PropTypes.number, duration: PropTypes.number,
peaks: PropTypes.arrayOf(PropTypes.number),
height: PropTypes.number, height: PropTypes.number,
preload: PropTypes.bool, preload: PropTypes.bool,
editable: PropTypes.bool, editable: PropTypes.bool,
@ -77,7 +76,7 @@ class Audio extends React.PureComponent {
} }
_updateWaveform () { _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 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'); const waveColor = window.getComputedStyle(document.querySelector('.audio-player__wave-placeholder')).getPropertyValue('background-color');
@ -94,7 +93,8 @@ class Audio extends React.PureComponent {
cursorWidth: 0, cursorWidth: 0,
progressColor, progressColor,
waveColor, waveColor,
forceDecode: true, backend: 'MediaElement',
interact: preload,
}); });
wavesurfer.setVolume(this.state.volume); wavesurfer.setVolume(this.state.volume);
@ -103,7 +103,7 @@ class Audio extends React.PureComponent {
wavesurfer.load(src); wavesurfer.load(src);
this.loaded = true; this.loaded = true;
} else { } else {
wavesurfer.load(src, arrayOf(1, 0.5), null, duration); wavesurfer.load(src, peaks, 'none', duration);
this.loaded = false; this.loaded = false;
} }
@ -123,6 +123,7 @@ class Audio extends React.PureComponent {
this.wavesurfer.createBackend(); this.wavesurfer.createBackend();
this.wavesurfer.createPeakCache(); this.wavesurfer.createPeakCache();
this.wavesurfer.load(this.props.src); this.wavesurfer.load(this.props.src);
this.wavesurfer.toggleInteraction();
this.loaded = true; this.loaded = true;
} }

View File

@ -140,7 +140,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
src={attachment.get('url')} src={attachment.get('url')}
alt={attachment.get('description')} alt={attachment.get('description')}
duration={attachment.getIn(['meta', 'original', 'duration'], 0)} duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
height={150} height={110}
preload preload
/> />
); );

View File

@ -347,6 +347,19 @@
&__waveform { &__waveform {
padding: 15px 0; 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 { &__progress-placeholder {

View File

@ -372,3 +372,10 @@
.directory__tag > div { .directory__tag > div {
box-shadow: none; 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;
}