Update of work on audio player

app/soapbox/components/status.js

@@ -12,7 +12,7 @@ import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { MediaGallery, Video } from '../features/ui/util/async-components';
+import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
 import { HotKeys } from 'react-hotkeys';
 import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
@@ -73,6 +73,7 @@ class Status extends ImmutablePureComponent {
     onPin: PropTypes.func,
     onOpenMedia: PropTypes.func,
     onOpenVideo: PropTypes.func,
+    onOpenAudio: PropTypes.func,
     onBlock: PropTypes.func,
     onEmbed: PropTypes.func,
     onHeightChange: PropTypes.func,
@@ -194,10 +195,18 @@ class Status extends ImmutablePureComponent {
     return <div className='media-spoiler-video' style={{ height: '110px' }} />;
   }
 
+  renderLoadingAudioPlayer() {
+    return <div className='media-spoiler-audio' style={{ height: '110px' }} />;
+  }
+
   handleOpenVideo = (media, startTime) => {
     this.props.onOpenVideo(media, startTime);
   }
 
+  handleOpenAudio = (media, startTime) => {
+    this.props.OnOpenAudio(media, startTime);
+  }
+
   handleHotkeyReply = e => {
     e.preventDefault();
     this.props.onReply(this._properStatus(), this.context.router.history);
@@ -356,6 +365,23 @@ class Status extends ImmutablePureComponent {
             )}
           </Bundle>
         );
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+        const audio = status.getIn(['media_attachments', 0]);
+
+        media = (
+          <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
+            {Component => (
+              <Component
+                src={audio.get('url')}
+                alt={audio.get('description')}
+                inline
+                sensitive={status.get('sensitive')}
+                cacheWidth={this.props.cacheMediaWidth}
+                onOpenAudio={this.handleOpenAudio}
+              />
+            )}
+          </Bundle>
+        );
       } else {
         media = (
           <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>

app/soapbox/containers/status_container.js

@@ -146,6 +146,10 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(openModal('VIDEO', { media, time }));
   },
 
+  onOpenAudio(media, time) {
+    dispatch(openModal('AUDIO', { media, time }));
+  },
+
   onBlock(status) {
     const account = status.get('account');
     dispatch(openModal('CONFIRM', {

app/soapbox/features/account_gallery/index.js

@@ -133,6 +133,8 @@ class AccountGallery extends ImmutablePureComponent {
   handleOpenMedia = attachment => {
     if (attachment.get('type') === 'video') {
       this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
+    } else if (attachment.get('type') === 'audio') {
+      this.props.dispatch(openModal('AUDIO', { media: attachment, status: attachment.get('status') }));
     } else {
       const media = attachment.getIn(['status', 'media_attachments']);
       const index = media.findIndex(x => x.get('id') === attachment.get('id'));

app/soapbox/features/audio/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { fromJS, is } from 'immutable';
+import { is } from 'immutable';
 import { throttle } from 'lodash';
 import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
@@ -11,7 +11,11 @@ import { getSettings } from 'soapbox/actions/settings';
 const messages = defineMessages({
   play: { id: 'audio.play', defaultMessage: 'Play' },
   pause: { id: 'audio.pause', defaultMessage: 'Pause' },
-  hide: { id: 'video.hide', defaultMessage: 'Hide audio' },
+  mute: { id: 'audio.mute', defaultMessage: 'Mute' },
+  unmute: { id: 'audio.unmute', defaultMessage: 'Unmute' },
+  hide: { id: 'audio.hide', defaultMessage: 'Hide audio' },
+  expand: { id: 'audio.expand', defaultMessage: 'Expand audio' },
+  close: { id: 'audio.close', defaultMessage: 'Close audio' },
 });
 
 const formatTime = secondsNum => {
@@ -20,7 +24,7 @@ const formatTime = secondsNum => {
   let seconds = secondsNum - (hours * 3600) - (minutes * 60);
 
   if (hours   < 10) hours   = '0' + hours;
-  if (minutes < 10) minutes = '0' + minutes;
+  if (minutes < 10 && hours >= 1) minutes = '0' + minutes;
   if (seconds < 10) seconds = '0' + seconds;
 
   return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`;
@@ -92,8 +96,6 @@ class Audio extends React.PureComponent {
     alt: PropTypes.string,
     sensitive: PropTypes.bool,
     startTime: PropTypes.number,
-    onOpenAudio: PropTypes.func,
-    onCloseAudio: PropTypes.func,
     detailed: PropTypes.bool,
     inline: PropTypes.bool,
     cacheWidth: PropTypes.func,
@@ -110,7 +112,6 @@ class Audio extends React.PureComponent {
     volume: 0.5,
     paused: true,
     dragging: false,
-    hovered: false,
     muted: false,
     revealed: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
   };
@@ -118,10 +119,10 @@ class Audio extends React.PureComponent {
   // hard coded in components.scss
   // any way to get ::before values programatically?
   volWidth = 50;
-  volOffset = 70;
+  volOffset = 85;
   volHandleOffset = v => {
     const offset = v * this.volWidth + this.volOffset;
-    return (offset > 110) ? 110 : offset;
+    return (offset > 125) ? 125 : offset;
   }
 
   setPlayerRef = c => {
@@ -233,7 +234,7 @@ class Audio extends React.PureComponent {
 
   handleMouseMove = throttle(e => {
     const { x } = getPointerPosition(this.seek, e);
-    const currentTime = Math.floor(this.video.duration * x);
+    const currentTime = Math.floor(this.audio.duration * x);
 
     if (!isNaN(currentTime)) {
       this.audio.currentTime = currentTime;
@@ -261,14 +262,6 @@ class Audio extends React.PureComponent {
     }
   }
 
-  handleMouseEnter = () => {
-    this.setState({ hovered: true });
-  }
-
-  handleMouseLeave = () => {
-    this.setState({ hovered: false });
-  }
-
   toggleMute = () => {
     this.audio.muted = !this.audio.muted;
     this.setState({ muted: this.audio.muted });
@@ -299,24 +292,6 @@ class Audio extends React.PureComponent {
     this.setState({ volume: this.audio.volume, muted: this.audio.muted });
   }
 
-  handleOpenAudio = () => {
-    const { src, alt } = this.props;
-
-    const media = fromJS({
-      type: 'audio',
-      url: src,
-      description: alt,
-    });
-
-    this.audio.pause();
-    this.props.onOpenAudio(media, this.audio.currentTime);
-  }
-
-  handleCloseAudio = () => {
-    this.audio.pause();
-    this.props.onCloseAudio();
-  }
-
   getPreload = () => {
     const { startTime, detailed } = this.props;
     const { dragging } = this.state;
@@ -331,8 +306,8 @@ class Audio extends React.PureComponent {
   }
 
   render() {
-    const { src, inline, onOpenAudio, onCloseAudio, intl, alt, detailed, sensitive, link } = this.props;
-    const { currentTime, duration, volume, buffer, dragging, paused, hovered, muted, revealed } = this.state;
+    const { src, inline, intl, alt, detailed, sensitive, link } = this.props;
+    const { currentTime, duration, volume, buffer, dragging, paused, muted, revealed } = this.state;
     const progress = (currentTime / duration) * 100;
 
     const volumeWidth = (muted) ? 0 : volume * this.volWidth;
@@ -361,6 +336,7 @@ class Audio extends React.PureComponent {
         <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': revealed })} />
 
         {revealed && <audio
+          ref={this.setAudioRef}
           src={src}
           // preload={this.getPreload()}
           role='button'
@@ -383,7 +359,7 @@ class Audio extends React.PureComponent {
           </button>
         </div>
 
-        <div className={classNames('audio-player__controls', { active: paused || hovered })}>
+        <div className={classNames('audio-player__controls')}>
           <div className='audio-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
             <div className='audio-player__seek__buffer' style={{ width: `${buffer}%` }} />
             <div className='audio-player__seek__progress' style={{ width: `${progress}%` }} />
@@ -409,21 +385,17 @@ class Audio extends React.PureComponent {
                 />
               </div>
 
-              {detailed && (
-                <span>
-                  <span className='audio-player__time-current'>{formatTime(currentTime)}</span>
-                  <span className='audio-player__time-sep'>/</span>
-                  <span className='audio-player__time-total'>{formatTime(duration)}</span>
-                </span>
-              )}
+              <span>
+                <span className='audio-player__time-current'>{formatTime(currentTime)}</span>
+                <span className='audio-player__time-sep'>/</span>
+                <span className='audio-player__time-total'>{formatTime(duration)}</span>
+              </span>
 
               {link && <span className='audio-player__link'>{link}</span>}
             </div>
 
             <div className='audio-player__buttons right'>
-              {(onOpenAudio) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenAudio}><Icon id='expand' fixedWidth /></button>}
-              {!onCloseAudio && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
-              {onCloseAudio && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseAudio}><Icon id='compress' fixedWidth /></button>}
+              {<button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
             </div>
           </div>
         </div>
@@ -431,4 +403,4 @@ class Audio extends React.PureComponent {
     );
   }
 
-}
+}

app/soapbox/features/compose/components/upload_button.js

@@ -52,7 +52,7 @@ class UploadButton extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, resetFileKey, unavailable, disabled, acceptContentTypes } = this.props;
+    const { intl, resetFileKey, unavailable, disabled } = this.props;
 
     if (unavailable) {
       return null;
@@ -68,7 +68,8 @@ class UploadButton extends ImmutablePureComponent {
             ref={this.setRef}
             type='file'
             multiple
-            accept={acceptContentTypes.toArray().join(',')}
+            accept='*.*'
+            //accept={acceptContentTypes.toArray().join(',')}
             onChange={this.handleChange}
             disabled={disabled}
             style={{ display: 'none' }}

app/soapbox/features/status/components/detailed_status.js

@@ -10,6 +10,7 @@ import { FormattedDate, FormattedNumber } from 'react-intl';
 import Card from './card';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Video from '../../video';
+import Audio from '../../audio';
 import scheduleIdleTask from '../../ui/util/schedule_idle_task';
 import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
@@ -120,6 +121,19 @@ export default class DetailedStatus extends ImmutablePureComponent {
             onToggleVisibility={this.props.onToggleMediaVisibility}
           />
         );
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+        const audio = status.getIn(['media_attachments', 0]);
+
+        media = (
+          <Audio
+            src={audio.get('url')}
+            alt={audio.get('description')}
+            inline
+            sensitive={status.get('sensitive')}
+            visible={this.props.showMedia}
+            onToggleVisibility={this.props.onToggleMediaVisibility}
+          />
+        );
       } else {
         media = (
           <MediaGallery

app/soapbox/features/ui/components/audio_modal.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import Audio from 'soapbox/features/audio';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { FormattedMessage } from 'react-intl';
+
+export const previewState = 'previewAudioModal';
+
+export default class AudioModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    media: ImmutablePropTypes.map.isRequired,
+    status: ImmutablePropTypes.map,
+    time: PropTypes.number,
+    onClose: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  componentDidMount() {
+    if (this.context.router) {
+      const history = this.context.router.history;
+
+      history.push(history.location.pathname, previewState);
+
+      this.unlistenHistory = history.listen(() => {
+        this.props.onClose();
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.context.router) {
+      this.unlistenHistory();
+
+      if (this.context.router.history.location.state === previewState) {
+        this.context.router.history.goBack();
+      }
+    }
+  }
+
+  handleStatusClick = e => {
+    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
+    }
+  }
+
+  render() {
+    const { media, status, time, onClose } = this.props;
+
+    const link = status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>;
+
+    return (
+      <div className='modal-root__modal audio-modal'>
+        <div>
+          <Audio
+            src={media.get('url')}
+            startTime={time}
+            onCloseAudio={onClose}
+            link={link}
+            detailed
+            alt={media.get('description')}
+          />
+        </div>
+      </div>
+    );
+  }
+
+}

app/soapbox/features/ui/components/media_modal.js

@@ -3,6 +3,7 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import Video from 'soapbox/features/video';
+import Audio from 'soapbox/features/audio';
 import ExtendedVideoPlayer from 'soapbox/components/extended_video_player';
 import classNames from 'classnames';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@@ -171,6 +172,18 @@ class MediaModal extends ImmutablePureComponent {
             key={image.get('url')}
           />
         );
+      } else if (image.get('type') === 'audio') {
+        const { time } = this.props;
+
+        return (
+          <Audio
+            src={image.get('url')}
+            startTime={time || 0}
+            detailed
+            alt={image.get('description')}
+            key={image.get('url')}
+          />
+        );
       } else if (image.get('type') === 'gifv') {
         return (
           <ExtendedVideoPlayer

app/soapbox/features/ui/components/modal_root.js

@@ -7,6 +7,7 @@ import ModalLoading from './modal_loading';
 import ActionsModal from './actions_modal';
 import MediaModal from './media_modal';
 import VideoModal from './video_modal';
+import AudioModal from './audio_modal';
 import BoostModal from './boost_modal';
 import ConfirmationModal from './confirmation_modal';
 import FocalPointModal from './focal_point_modal';
@@ -25,6 +26,7 @@ import {
 const MODAL_COMPONENTS = {
   'MEDIA': () => Promise.resolve({ default: MediaModal }),
   'VIDEO': () => Promise.resolve({ default: VideoModal }),
+  'AUDIO': () => Promise.resolve({ default: AudioModal }),
   'BOOST': () => Promise.resolve({ default: BoostModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'MUTE': MuteModal,
@@ -60,7 +62,7 @@ export default class ModalRoot extends React.PureComponent {
   }
 
   renderLoading = modalId => () => {
-    return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
+    return ['MEDIA', 'VIDEO', 'AUDIO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
   }
 
   renderError = (props) => {

app/soapbox/locales/defaultMessages.json

@@ -3049,5 +3049,46 @@
       }
     ],
     "path": "app/soapbox/features/video/index.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "Play",
+        "id": "audio.play"
+      },
+      {
+        "defaultMessage": "Pause",
+        "id": "audio.pause"
+      },
+      {
+        "defaultMessage": "Mute sound",
+        "id": "audio.mute"
+      },
+      {
+        "defaultMessage": "Unmute sound",
+        "id": "audio.unmute"
+      },
+      {
+        "defaultMessage": "Hide audio",
+        "id": "audio.hide"
+      },
+      {
+        "defaultMessage": "Expand audio",
+        "id": "audio.expand"
+      },
+      {
+        "defaultMessage": "Close audio",
+        "id": "audio.close"
+      },
+      {
+        "defaultMessage": "Sensitive content",
+        "id": "status.sensitive_warning"
+      },
+      {
+        "defaultMessage": "Media hidden",
+        "id": "status.media_hidden"
+      }
+    ],
+    "path": "app/soapbox/features/audio/index.json"
   }
-]
+]

app/styles/application.scss

@@ -68,3 +68,4 @@
 @import 'components/media-spoiler';
 @import 'components/error-boundary';
 @import 'components/video-player';
+@import 'components/audio-player';

app/styles/components/audio-player.scss

@@ -0,0 +1,380 @@
+.audio-error-cover {
+  align-items: center;
+  background: var(--background-color);
+  color: var(--primary-text-color);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  margin-top: 8px;
+  position: relative;
+  text-align: center;
+  z-index: 100;
+}
+
+.status__audio-player {
+  background: var(--background-color);
+  box-sizing: border-box;
+  cursor: default; /* May not be needed */
+  margin-top: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.status__audio-player-audio {
+  height: 100%;
+  object-fit: cover;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+  z-index: 1;
+}
+
+.status__audio-player-expand,
+.status__audio-player-mute {
+  color: var(--primary-text-color);
+  opacity: 0.8;
+  position: absolute;
+  right: 4px;
+  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
+}
+
+.status__audio-player-spoiler {
+  display: none;
+  color: var(--primary-text-color);
+  left: 4px;
+  position: absolute;
+  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
+  top: 4px;
+  z-index: 100;
+
+  &.status__audio-player-spoiler--visible {
+    display: block;
+  }
+}
+
+.status__audio-player-expand {
+  bottom: 4px;
+  z-index: 100;
+}
+
+.status__audio-player-mute {
+  top: 4px;
+  z-index: 5;
+}
+
+.detailed,
+.fullscreen {
+  .audio-player__volume__current,
+  .audio-player__volume::before {
+    bottom: 27px;
+  }
+
+  .audio-player__volume__handle {
+    bottom: 23px;
+  }
+
+}
+
+.audio-player {
+  overflow: hidden;
+  position: relative;
+  background: $base-shadow-color;
+  max-width: 100%;
+  border-radius: 4px;
+  height: 57px;
+
+  &:focus {
+    outline: 0;
+  }
+
+  audio {
+    max-width: 100vw;
+    max-height: 80vh;
+    min-height: 120px;
+    object-fit: contain;
+    z-index: 1;
+  }
+
+  &.fullscreen {
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0;
+
+    audio {
+      max-width: 100% !important;
+      max-height: 100% !important;
+      width: 100% !important;
+      height: 100% !important;
+    }
+  }
+
+  &.inline {
+    audio {
+      object-fit: contain;
+      position: relative;
+    }
+  }
+
+  &__controls {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
+    padding: 0 15px;
+    opacity: 1;
+    transition: opacity .1s ease;
+  }
+
+  &.inactive {
+    min-height: 57px;
+
+    audio,
+    .audio-player__controls {
+      visibility: hidden;
+    }
+  }
+
+  &__spoiler {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 4;
+    border: 0;
+    background: var(--background-color);
+    color: var(--primary-text-color--faint);
+    transition: none;
+    pointer-events: auto;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: var(--primary-text-color);
+    }
+
+    &__title {
+      display: block;
+      font-size: 14px;
+    }
+
+    &__subtitle {
+      display: block;
+      font-size: 11px;
+      font-weight: 500;
+    }
+  }
+
+  &__buttons-bar {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 10px;
+  }
+
+  &__buttons {
+    font-size: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.left {
+      button {
+        padding-left: 0;
+      }
+    }
+
+    &.right {
+      button {
+        padding-right: 0;
+      }
+    }
+
+    button {
+      background: transparent;
+      padding: 2px 10px;
+      font-size: 16px;
+      border: 0;
+      color: rgba(#ffffff, 0.75);
+
+      &:active,
+      &:hover,
+      &:focus {
+        color: #ffffff;
+      }
+    }
+  }
+
+  &__time-sep,
+  &__time-total,
+  &__time-current {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__time-current {
+    color: #ffffff;
+    margin-left: 60px;
+  }
+
+  &__time-sep {
+    display: inline-block;
+    margin: 0 6px;
+  }
+
+  &__time-sep,
+  &__time-total {
+    color: #ffffff;
+  }
+
+  &__volume {
+    cursor: pointer;
+    height: 24px;
+    display: inline;
+
+    &::before {
+      content: "";
+      width: 50px;
+      background: rgba(#ffffff, 0.35);
+      border-radius: 4px;
+      display: block;
+      position: absolute;
+      height: 4px;
+      left: 85px;
+      bottom: 20px;
+    }
+
+    &__current {
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 4px;
+      left: 85px;
+      bottom: 20px;
+      background: var(--brand-color);
+    }
+
+    &__handle {
+      position: absolute;
+      z-index: 3;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      bottom: 16px;
+      left: 70px;
+      transition: opacity .1s ease;
+      background: var(--brand-color);
+      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+      pointer-events: none;
+    }
+  }
+
+  &__link {
+    padding: 2px 10px;
+
+    a {
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      color: #ffffff;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__seek {
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+
+    &::before {
+      content: "";
+      width: 100%;
+      background: rgba(#ffffff, 0.35);
+      border-radius: 4px;
+      display: block;
+      position: absolute;
+      height: 4px;
+      top: 10px;
+    }
+
+    &__progress,
+    &__buffer {
+      display: block;
+      position: absolute;
+      height: 4px;
+      border-radius: 4px;
+      top: 10px;
+      background: var(--brand-color);
+    }
+
+    &__buffer {
+      background: rgba(#ffffff, 0.2);
+    }
+
+    &__handle {
+      position: absolute;
+      z-index: 3;
+      opacity: 1;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: 6px;
+      margin-left: -6px;
+      transition: opacity .1s ease;
+      background: var(--brand-color);
+      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+      pointer-events: none;
+    }
+
+    &:hover {
+      .audio-player__seek__handle {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.detailed {
+    width: 100vmin;
+    height: 80px;
+
+    .audio-player__buttons {
+      button {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+  }
+}
+
+.media-spoiler-audio {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  margin-top: 8px;
+  position: relative;
+  border: 0;
+  display: block;
+}
+
+.media-spoiler-audio-play-icon {
+  border-radius: 100px;
+  color: var(--primary-text-color--faint);
+  font-size: 36px;
+  left: 50%;
+  padding: 5px;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

app/styles/components/detailed-status.scss

@@ -38,7 +38,8 @@
     }
   }
 
-  .video-player {
+  .video-player,
+  .audio-player {
     margin-top: 8px;
   }
 }

app/styles/components/modal.scss

@@ -38,7 +38,8 @@
   overflow-y: hidden;
 }
 
-.video-modal {
+.video-modal,
+.audio-modal {
   max-width: 100vw;
   max-height: 100vh;
   position: relative;
@@ -49,12 +50,16 @@
   height: 100%;
   position: relative;
 
+  .audio-player.detailed,
   .extended-video-player {
-    width: 100%;
-    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
+  }
+
+  .extended-video-player {
+    width: 100%;
+    height: 100%;
 
     video {
       max-width: $media-modal-media-max-width;

app/styles/components/status.scss

@@ -78,7 +78,8 @@
   opacity: 1;
   animation: fade 150ms linear;
 
-  .video-player {
+  .video-player,
+  .audio-player {
     margin-top: 8px;
   }
 
@@ -176,7 +177,8 @@
       white-space: normal;
     }
 
-    .video-player {
+    .video-player,
+    .audio-player {
       margin-top: 8px;
       max-width: 250px;
     }
@@ -453,7 +455,8 @@ a.status-card {
   margin: 0;
 }
 
-.status-card-video {
+.status-card-video,
+.status-card-audio {
   iframe {
     width: 100%;
     height: 100%;