Merge branch 'audio-player' into develop

app/soapbox/components/media_gallery.js

@@ -11,6 +11,7 @@ import { decode } from 'blurhash';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
 import { Map as ImmutableMap } from 'immutable';
 import { getSettings } from 'soapbox/actions/settings';
+import Icon from 'soapbox/components/icon';
 import StillImage from 'soapbox/components/still_image';
 
 const messages = defineMessages({
@@ -192,6 +193,24 @@ class Item extends React.PureComponent {
           <span className='media-gallery__gifv__label'>GIF</span>
         </div>
       );
+    } else if (attachment.get('type') === 'audio') {
+      const remoteURL = attachment.get('remote_url');
+      const originalUrl = attachment.get('url');
+      const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
+      const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
+      thumbnail = (
+        <a
+          className={classNames('media-gallery__item-thumbnail')}
+          href={attachment.get('remote_url') || originalUrl}
+          onClick={this.handleClick}
+          target='_blank'
+          alt={attachment.get('description')}
+          title={attachment.get('description')}
+        >
+          <span className='media-gallery__item__icons'><Icon id='volume-up' /></span>
+          <span className='media-gallery__file-extension__label'>{fileExtension}</span>
+        </a>
+      );
     }
 
     return (

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,24 @@ class Status extends ImmutablePureComponent {
             )}
           </Bundle>
         );
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
+        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}
+                visible={this.state.showMedia}
+                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/components/media_item.js

@@ -146,6 +146,16 @@ class MediaItem extends ImmutablePureComponent {
           <span className='media-gallery__gifv__label'>GIF</span>
         </div>
       );
+    } else if (attachment.get('type') === 'audio') {
+      const remoteURL = attachment.get('remote_url');
+      const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
+      const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
+      thumbnail = (
+        <div className='media-gallery__item-thumbnail'>
+          <span className='media-gallery__item__icons'><Icon id='volume-up' /></span>
+          <span className='media-gallery__file-extension__label'>{fileExtension}</span>
+        </div>
+      );
     }
 
     if (!visible) {

app/soapbox/features/audio/index.js

@@ -0,0 +1,380 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { throttle } from 'lodash';
+import classNames from 'classnames';
+import Icon from 'soapbox/components/icon';
+import { getSettings } from 'soapbox/actions/settings';
+
+const messages = defineMessages({
+  play: { id: 'audio.play', defaultMessage: 'Play' },
+  pause: { id: 'audio.pause', defaultMessage: 'Pause' },
+  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 => {
+  let hours   = Math.floor(secondsNum / 3600);
+  let minutes = Math.floor((secondsNum - (hours * 3600)) / 60);
+  let seconds = secondsNum - (hours * 3600) - (minutes * 60);
+
+  if (hours   < 10) hours   = '0' + hours;
+  if (minutes < 10 && hours >= 1) minutes = '0' + minutes;
+  if (seconds < 10) seconds = '0' + seconds;
+
+  return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`;
+};
+
+export const findElementPosition = el => {
+  let box;
+
+  if (el.getBoundingClientRect && el.parentNode) {
+    box = el.getBoundingClientRect();
+  }
+
+  if (!box) {
+    return {
+      left: 0,
+      top: 0,
+    };
+  }
+
+  const docEl = document.documentElement;
+  const body  = document.body;
+
+  const clientLeft = docEl.clientLeft || body.clientLeft || 0;
+  const scrollLeft = window.pageXOffset || body.scrollLeft;
+  const left       = (box.left + scrollLeft) - clientLeft;
+
+  const clientTop = docEl.clientTop || body.clientTop || 0;
+  const scrollTop = window.pageYOffset || body.scrollTop;
+  const top       = (box.top + scrollTop) - clientTop;
+
+  return {
+    left: Math.round(left),
+    top: Math.round(top),
+  };
+};
+
+export const getPointerPosition = (el, event) => {
+  const position = {};
+  const box = findElementPosition(el);
+  const boxW = el.offsetWidth;
+  const boxH = el.offsetHeight;
+  const boxY = box.top;
+  const boxX = box.left;
+
+  let pageY = event.pageY;
+  let pageX = event.pageX;
+
+  if (event.changedTouches) {
+    pageX = event.changedTouches[0].pageX;
+    pageY = event.changedTouches[0].pageY;
+  }
+
+  position.y = Math.max(0, Math.min(1, (pageY - boxY) / boxH));
+  position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW));
+
+  return position;
+};
+
+const mapStateToProps = state => ({
+  displayMedia: getSettings(state).get('displayMedia'),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class Audio extends React.PureComponent {
+
+  static propTypes = {
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    sensitive: PropTypes.bool,
+    startTime: PropTypes.number,
+    detailed: PropTypes.bool,
+    inline: PropTypes.bool,
+    cacheWidth: PropTypes.func,
+    visible: PropTypes.bool,
+    onToggleVisibility: PropTypes.func,
+    intl: PropTypes.object.isRequired,
+    link: PropTypes.node,
+    displayMedia: PropTypes.string,
+    expandSpoilers: PropTypes.bool,
+  };
+
+  state = {
+    currentTime: 0,
+    duration: 0,
+    volume: 0.5,
+    paused: true,
+    dragging: false,
+    muted: false,
+    revealed: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
+  };
+
+  // hard coded in components.scss
+  // any way to get ::before values programatically?
+  volWidth = 50;
+  volOffset = 85;
+  volHandleOffset = v => {
+    const offset = v * this.volWidth + this.volOffset;
+    return (offset > 125) ? 125 : offset;
+  }
+
+  setPlayerRef = c => {
+    this.player = c;
+
+    if (c) {
+      if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth);
+      this.setState({
+        containerWidth: c.offsetWidth,
+      });
+    }
+  }
+
+  setAudioRef = c => {
+    this.audio = c;
+
+    if (this.audio) {
+      this.setState({ volume: this.audio.volume, muted: this.audio.muted });
+    }
+  }
+
+  setSeekRef = c => {
+    this.seek = c;
+  }
+
+  setVolumeRef = c => {
+    this.volume = c;
+  }
+
+  handleClickRoot = e => e.stopPropagation();
+
+  handlePlay = () => {
+    this.setState({ paused: false });
+  }
+
+  handlePause = () => {
+    this.setState({ paused: true });
+  }
+
+  handleTimeUpdate = () => {
+    this.setState({
+      currentTime: Math.floor(this.audio.currentTime),
+      duration: Math.floor(this.audio.duration),
+    });
+  }
+
+  handleVolumeMouseDown = e => {
+    document.addEventListener('mousemove', this.handleMouseVolSlide, true);
+    document.addEventListener('mouseup', this.handleVolumeMouseUp, true);
+    document.addEventListener('touchmove', this.handleMouseVolSlide, true);
+    document.addEventListener('touchend', this.handleVolumeMouseUp, true);
+
+    this.handleMouseVolSlide(e);
+
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  handleVolumeMouseUp = () => {
+    document.removeEventListener('mousemove', this.handleMouseVolSlide, true);
+    document.removeEventListener('mouseup', this.handleVolumeMouseUp, true);
+    document.removeEventListener('touchmove', this.handleMouseVolSlide, true);
+    document.removeEventListener('touchend', this.handleVolumeMouseUp, true);
+  }
+
+  handleMouseVolSlide = throttle(e => {
+    const rect = this.volume.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / this.volWidth; //x position within the element.
+
+    if(!isNaN(x)) {
+      var slideamt = x;
+      if(x > 1) {
+        slideamt = 1;
+      } else if(x < 0) {
+        slideamt = 0;
+      }
+      this.audio.volume = slideamt;
+      this.setState({ volume: slideamt });
+    }
+  }, 60);
+
+  handleMouseDown = e => {
+    document.addEventListener('mousemove', this.handleMouseMove, true);
+    document.addEventListener('mouseup', this.handleMouseUp, true);
+    document.addEventListener('touchmove', this.handleMouseMove, true);
+    document.addEventListener('touchend', this.handleMouseUp, true);
+
+    this.setState({ dragging: true });
+    this.audio.pause();
+    this.handleMouseMove(e);
+
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  handleMouseUp = () => {
+    document.removeEventListener('mousemove', this.handleMouseMove, true);
+    document.removeEventListener('mouseup', this.handleMouseUp, true);
+    document.removeEventListener('touchmove', this.handleMouseMove, true);
+    document.removeEventListener('touchend', this.handleMouseUp, true);
+
+    this.setState({ dragging: false });
+    this.audio.play();
+  }
+
+  handleMouseMove = throttle(e => {
+    const { x } = getPointerPosition(this.seek, e);
+    const currentTime = Math.floor(this.audio.duration * x);
+
+    if (!isNaN(currentTime)) {
+      this.audio.currentTime = currentTime;
+      this.setState({ currentTime });
+    }
+  }, 60);
+
+  togglePlay = () => {
+    if (this.state.paused) {
+      this.audio.play();
+    } else {
+      this.audio.pause();
+    }
+  }
+
+  toggleMute = () => {
+    this.audio.muted = !this.audio.muted;
+    this.setState({ muted: this.audio.muted });
+  }
+
+  toggleWarning = () => {
+    this.setState({ revealed: !this.state.revealed });
+  }
+
+  handleLoadedData = () => {
+    if (this.props.startTime) {
+      this.audio.currentTime = this.props.startTime;
+      this.audio.play();
+    }
+  }
+
+  handleProgress = () => {
+    if (this.audio.buffered.length > 0) {
+      this.setState({ buffer: this.audio.buffered.end(0) / this.audio.duration * 100 });
+    }
+  }
+
+  handleVolumeChange = () => {
+    this.setState({ volume: this.audio.volume, muted: this.audio.muted });
+  }
+
+  getPreload = () => {
+    const { startTime, detailed } = this.props;
+    const { dragging } = this.state;
+
+    if (startTime || dragging) {
+      return 'auto';
+    } else if (detailed) {
+      return 'metadata';
+    } else {
+      return 'none';
+    }
+  }
+
+  render() {
+    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;
+    const volumeHandleLoc = (muted) ? this.volHandleOffset(0) : this.volHandleOffset(volume);
+    const playerStyle = {};
+
+    let warning;
+
+    if (sensitive) {
+      warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
+    } else {
+      warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
+    }
+
+    return (
+      <div
+        role='menuitem'
+        className={classNames('audio-player', { detailed: detailed, inline: inline, warning_visible: !revealed })}
+        style={playerStyle}
+        ref={this.setPlayerRef}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+        onClick={this.handleClickRoot}
+        tabIndex={0}
+      >
+
+        <audio
+          ref={this.setAudioRef}
+          src={src}
+          // preload={this.getPreload()}
+          role='button'
+          tabIndex='0'
+          aria-label={alt}
+          title={alt}
+          volume={volume}
+          onClick={this.togglePlay}
+          onPlay={this.handlePlay}
+          onPause={this.handlePause}
+          onTimeUpdate={this.handleTimeUpdate}
+          onLoadedData={this.handleLoadedData}
+          onProgress={this.handleProgress}
+          onVolumeChange={this.handleVolumeChange}
+        />
+
+        <div className={classNames('audio-player__spoiler-warning', { 'spoiler-button--hidden': revealed })}>
+          <span className='audio-player__spoiler-warning__label'><Icon id='warning' fixedWidth /> {warning}</span>
+          <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleWarning}><Icon id='times' fixedWidth /></button>
+        </div>
+
+        <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}%` }} />
+
+            <span
+              className={classNames('audio-player__seek__handle', { active: dragging })}
+              tabIndex='0'
+              style={{ left: `${progress}%` }}
+            />
+          </div>
+
+          <div className='audio-player__buttons-bar'>
+            <div className='audio-player__buttons left'>
+              <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
+              <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
+
+              <div className='audio-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
+                <div className='audio-player__volume__current' style={{ width: `${volumeWidth}px` }} />
+                <span
+                  className={classNames('audio-player__volume__handle')}
+                  tabIndex='0'
+                  style={{ left: `${volumeHandleLoc}px` }}
+                />
+              </div>
+
+              <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>
+        </div>
+      </div>
+    );
+  }
+
+}

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

@@ -7,7 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 const messages = defineMessages({
-  upload: { id: 'upload_button.label', defaultMessage: 'Add media (JPEG, PNG, GIF, WebM, MP4, MOV)' },
+  upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' },
 });
 
 const makeMapStateToProps = () => {

app/soapbox/features/report/components/status_check_box.js

@@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import Toggle from 'react-toggle';
 import noop from 'lodash/noop';
 import StatusContent from '../../../components/status_content';
-import { MediaGallery, Video } from '../../ui/util/async-components';
+import { MediaGallery, Video, Audio } from '../../ui/util/async-components';
 import Bundle from '../../ui/components/bundle';
 
 export default class StatusCheckBox extends React.PureComponent {
@@ -48,6 +48,22 @@ export default class StatusCheckBox extends React.PureComponent {
             )}
           </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')}
+                onOpenAudio={noop}
+              />
+            )}
+          </Bundle>
+        );
       } else {
         media = (
           <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} >

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/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';
@@ -138,9 +139,18 @@ class MediaModal extends ImmutablePureComponent {
       });
     }
 
+    const isMultiMedia = media.map((image) => {
+      if (image.get('type') !== 'image') {
+        return true;
+      }
+
+      return false;
+    }).toArray();
+
     const content = media.map((image) => {
       const width  = image.getIn(['meta', 'original', 'width']) || null;
       const height = image.getIn(['meta', 'original', 'height']) || null;
+      const link = (status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>);
 
       if (image.get('type') === 'image') {
         return (
@@ -167,6 +177,20 @@ class MediaModal extends ImmutablePureComponent {
             startTime={time || 0}
             onCloseVideo={onClose}
             detailed
+            link={link}
+            alt={image.get('description')}
+            key={image.get('url')}
+          />
+        );
+      } else if (image.get('type') === 'audio') {
+        const { time } = this.props;
+
+        return (
+          <Audio
+            src={image.get('url')}
+            startTime={time || 0}
+            detailed
+            link={link}
             alt={image.get('description')}
             key={image.get('url')}
           />
@@ -178,6 +202,7 @@ class MediaModal extends ImmutablePureComponent {
             muted
             controls={false}
             width={width}
+            link={link}
             height={height}
             key={image.get('preview_url')}
             alt={image.get('description')}
@@ -230,7 +255,7 @@ class MediaModal extends ImmutablePureComponent {
           {leftNav}
           {rightNav}
 
-          {status && (
+          {(status && !isMultiMedia[index]) && (
             <div className={classNames('media-modal__meta', { 'media-modal__meta--shifted': media.size > 1 })}>
               <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>
             </div>

app/soapbox/features/ui/util/async-components.js

@@ -142,6 +142,10 @@ export function Video() {
   return import(/* webpackChunkName: "features/video" */'../../video');
 }
 
+export function Audio() {
+  return import(/* webpackChunkName: "features/audio" */'../../audio');
+}
+
 export function EmbedModal() {
   return import(/* webpackChunkName: "modals/embed_modal" */'../components/embed_modal');
 }

app/soapbox/locales/defaultMessages.json

@@ -1217,7 +1217,7 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "Add media (JPEG, PNG, GIF, WebM, MP4, MOV)",
+        "defaultMessage": "Add media attachment",
         "id": "upload_button.label"
       }
     ],
@@ -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/soapbox/locales/en.json

@@ -450,7 +450,7 @@
   "unauthorized_modal.text": "You need to be logged in to do that.",
   "unauthorized_modal.title": "Sign up for {site_title}",
   "upload_area.title": "Drag & drop to upload",
-  "upload_button.label": "Add media (JPEG, PNG, GIF, WebM, MP4, MOV)",
+  "upload_button.label": "Add media attachment",
   "upload_error.limit": "File upload limit exceeded.",
   "upload_error.poll": "File upload not allowed with polls.",
   "upload_form.description": "Describe for the visually impaired",

app/soapbox/reducers/__tests__/media_attachments.js

@@ -14,6 +14,8 @@ describe('media_attachments reducer', () => {
         '.mp4',
         '.m4v',
         '.mov',
+        '.mp3',
+        '.ogg',
         'image/jpeg',
         'image/png',
         'image/gif',
@@ -21,6 +23,9 @@ describe('media_attachments reducer', () => {
         'video/webm',
         'video/mp4',
         'video/quicktime',
+        'audio/mp3',
+        'audio/mpeg',
+        'audio/ogg',
       ]),
     }));
   });

app/soapbox/reducers/media_attachments.js

@@ -16,6 +16,8 @@ const initialState = ImmutableMap({
     '.mp4',
     '.m4v',
     '.mov',
+    '.mp3',
+    '.ogg',
     'image/jpeg',
     'image/png',
     'image/gif',
@@ -23,6 +25,9 @@ const initialState = ImmutableMap({
     'video/webm',
     'video/mp4',
     'video/quicktime',
+    'audio/mp3',
+    'audio/mpeg',
+    'audio/ogg',
   ]),
 });
 

app/styles/application.scss

@@ -69,3 +69,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,397 @@
+.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-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;
+
+  &.warning_visible {
+    height: 92px;
+  }
+
+  &: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;
+  }
+
+  &__spoiler-warning {
+    font-size: 16px;
+    white-space: nowrap;
+    overlow: hidden;
+    text-overflow: ellipsis;
+    background: hsl( var(--brand-color_h), var(--brand-color_s), 20% );
+    padding: 5px;
+
+    &__label {
+      color: white;
+    }
+
+    button {
+      background: transparent;
+      font-size: 16px;
+      border: 0;
+      color: rgba(#ffffff, 0.75);
+      position: absolute;
+      right: 0;
+      padding-right: 5px;
+
+      i {
+        margin-right: 0;
+      }
+
+      &:active,
+      &:hover,
+      &:focus {
+        color: #ffffff;
+      }
+    }
+  }
+
+  &__buttons {
+    font-size: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.left {
+      button {
+        padding-left: 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/media-gallery.scss

@@ -16,6 +16,14 @@
   position: relative;
   border-radius: 4px;
   overflow: hidden;
+
+  &__icons {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 100px;
+  }
 }
 
 .media-gallery__item-thumbnail {
@@ -112,7 +120,8 @@
   position: absolute;
 }
 
-.media-gallery__gifv__label {
+.media-gallery__gifv__label,
+.media-gallery__file-extension__label {
   display: block;
   position: absolute;
   color: var(--primary-text-color);

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%;