Skip to content

Commit 112458e

Browse files
Gargronhiyuki2578
authored andcommitted
Fix more visual issues with the audio player (mastodon#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
1 parent 5fe6c8c commit 112458e

5 files changed

Lines changed: 31 additions & 8 deletions

File tree

app/javascript/mastodon/components/status.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,8 @@ class Status extends ImmutablePureComponent {
362362
src={attachment.get('url')}
363363
alt={attachment.get('description')}
364364
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
365-
height={110}
365+
peaks={[0]}
366+
height={70}
366367
/>
367368
)}
368369
</Bundle>

app/javascript/mastodon/features/audio/index.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,14 @@ const messages = defineMessages({
1414
unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
1515
});
1616

17-
const arrayOf = (length, fill) => (new Array(length)).fill(fill);
18-
1917
export default @injectIntl
2018
class Audio extends React.PureComponent {
2119

2220
static propTypes = {
2321
src: PropTypes.string.isRequired,
2422
alt: PropTypes.string,
2523
duration: PropTypes.number,
24+
peaks: PropTypes.arrayOf(PropTypes.number),
2625
height: PropTypes.number,
2726
preload: PropTypes.bool,
2827
editable: PropTypes.bool,
@@ -77,7 +76,7 @@ class Audio extends React.PureComponent {
7776
}
7877

7978
_updateWaveform () {
80-
const { src, height, duration, preload } = this.props;
79+
const { src, height, duration, peaks, preload } = this.props;
8180

8281
const progressColor = window.getComputedStyle(document.querySelector('.audio-player__progress-placeholder')).getPropertyValue('background-color');
8382
const waveColor = window.getComputedStyle(document.querySelector('.audio-player__wave-placeholder')).getPropertyValue('background-color');
@@ -94,7 +93,8 @@ class Audio extends React.PureComponent {
9493
cursorWidth: 0,
9594
progressColor,
9695
waveColor,
97-
forceDecode: true,
96+
backend: 'MediaElement',
97+
interact: preload,
9898
});
9999

100100
wavesurfer.setVolume(this.state.volume);
@@ -103,7 +103,7 @@ class Audio extends React.PureComponent {
103103
wavesurfer.load(src);
104104
this.loaded = true;
105105
} else {
106-
wavesurfer.load(src, arrayOf(1, 0.5), null, duration);
106+
wavesurfer.load(src, peaks, 'none', duration);
107107
this.loaded = false;
108108
}
109109

@@ -123,6 +123,7 @@ class Audio extends React.PureComponent {
123123
this.wavesurfer.createBackend();
124124
this.wavesurfer.createPeakCache();
125125
this.wavesurfer.load(this.props.src);
126+
this.wavesurfer.toggleInteraction();
126127
this.loaded = true;
127128
}
128129

app/javascript/mastodon/features/status/components/detailed_status.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
116116
src={attachment.get('url')}
117117
alt={attachment.get('description')}
118118
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
119-
height={150}
119+
height={110}
120120
preload
121121
/>
122122
);

app/javascript/styles/mastodon-light/diff.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,8 @@ html {
104104
.box-widget input[type="email"],
105105
.box-widget input[type="password"],
106106
.box-widget textarea,
107-
.statuses-grid .detailed-status {
107+
.statuses-grid .detailed-status,
108+
.audio-player {
108109
border: 1px solid lighten($ui-base-color, 8%);
109110
}
110111

@@ -700,3 +701,10 @@ html {
700701
.compose-form .compose-form__warning {
701702
box-shadow: none;
702703
}
704+
705+
.audio-player .video-player__controls button,
706+
.audio-player .video-player__time-sep,
707+
.audio-player .video-player__time-current,
708+
.audio-player .video-player__time-total {
709+
color: $primary-text-color;
710+
}

app/javascript/styles/mastodon/components.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5062,6 +5062,19 @@ a.status-card.compact:hover {
50625062

50635063
&__waveform {
50645064
padding: 15px 0;
5065+
position: relative;
5066+
overflow: hidden;
5067+
5068+
&::before {
5069+
content: "";
5070+
display: block;
5071+
position: absolute;
5072+
border-top: 1px solid lighten($ui-base-color, 4%);
5073+
width: 100%;
5074+
height: 0;
5075+
left: 0;
5076+
top: calc(50% + 1px);
5077+
}
50655078
}
50665079

50675080
&__progress-placeholder {

0 commit comments

Comments
 (0)