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

app/javascript/mastodon/components/status.js

@@ -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>

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

@@ -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;
       }
 

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

@@ -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
           />
         );

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

@@ -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;
+}

app/javascript/styles/mastodon/components.scss

@@ -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 {