mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-12-03 19:49:05 +01:00
[Glitch] Fix more visual issues with the audio player
Port 2e99e3cab3
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
parent
84d4d75c91
commit
b90bd31cfd
5 changed files with 29 additions and 7 deletions
|
@ -575,7 +575,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;
|
||||
}
|
||||
|
||||
|
|
|
@ -140,7 +140,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
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -347,6 +347,19 @@
|
|||
|
||||
&__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 {
|
||||
|
|
|
@ -372,3 +372,10 @@
|
|||
.directory__tag > div {
|
||||
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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue