From 409340a2a666e67914d70e997f52e1105f4ac64c Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Thu, 18 Jun 2020 20:03:44 +0000
Subject: [PATCH 01/21] Else if audio. Let's get an idea of what this could
 look like first.

---
 .../report/components/status_check_box.js        | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/soapbox/features/report/components/status_check_box.js b/app/soapbox/features/report/components/status_check_box.js
index c3853736f..c8e5984a2 100644
--- a/app/soapbox/features/report/components/status_check_box.js
+++ b/app/soapbox/features/report/components/status_check_box.js
@@ -48,6 +48,22 @@ export default class StatusCheckBox extends React.PureComponent {
             )}
           </Bundle>
         );
+      } else if (status.getIn(['media_attacjments', 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} >

From d6558194b211df5e7172e6e3dd4ac032845c3185 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Thu, 18 Jun 2020 20:10:57 +0000
Subject: [PATCH 02/21] Add new file

---
 app/soapbox/features/audio/index.js | 521 ++++++++++++++++++++++++++++
 1 file changed, 521 insertions(+)
 create mode 100644 app/soapbox/features/audio/index.js

diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
new file mode 100644
index 000000000..d49e08e65
--- /dev/null
+++ b/app/soapbox/features/audio/index.js
@@ -0,0 +1,521 @@
+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 { throttle } from 'lodash';
+import classNames from 'classnames';
+import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
+import Icon from 'soapbox/components/icon';
+import { decode } from 'blurhash';
+import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
+import { getSettings } from 'soapbox/actions/settings';
+
+const messages = defineMessages({
+  play: { id: 'video.play', defaultMessage: 'Play' },
+  pause: { id: 'video.pause', defaultMessage: 'Pause' },
+  mute: { id: 'video.mute', defaultMessage: 'Mute sound' },
+  unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
+  hide: { id: 'video.hide', defaultMessage: 'Hide video' },
+  expand: { id: 'video.expand', defaultMessage: 'Expand video' },
+  close: { id: 'video.close', defaultMessage: 'Close video' },
+  fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' },
+  exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
+});
+
+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) 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 Video extends React.PureComponent {
+
+  static propTypes = {
+    preview: PropTypes.string,
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    sensitive: PropTypes.bool,
+    startTime: PropTypes.number,
+    onOpenVideo: PropTypes.func,
+    onCloseVideo: PropTypes.func,
+    detailed: PropTypes.bool,
+    inline: PropTypes.bool,
+    cacheWidth: PropTypes.func,
+    visible: PropTypes.bool,
+    onToggleVisibility: PropTypes.func,
+    intl: PropTypes.object.isRequired,
+    blurhash: PropTypes.string,
+    link: PropTypes.node,
+    aspectRatio: PropTypes.number,
+    displayMedia: PropTypes.string,
+  };
+
+  state = {
+    currentTime: 0,
+    duration: 0,
+    volume: 0.5,
+    paused: true,
+    dragging: false,
+    containerWidth: this.props.width,
+    fullscreen: 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'),
+  };
+
+  // hard coded in components.scss
+  // any way to get ::before values programatically?
+  volWidth = 50;
+  volOffset = 70;
+  volHandleOffset = v => {
+    const offset = v * this.volWidth + this.volOffset;
+    return (offset > 110) ? 110 : offset;
+  }
+
+  setPlayerRef = c => {
+    this.player = c;
+
+    if (c) {
+      if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth);
+      this.setState({
+        containerWidth: c.offsetWidth,
+      });
+    }
+  }
+
+  setVideoRef = c => {
+    this.video = c;
+
+    if (this.video) {
+      this.setState({ volume: this.video.volume, muted: this.video.muted });
+    }
+  }
+
+  setSeekRef = c => {
+    this.seek = c;
+  }
+
+  setVolumeRef = c => {
+    this.volume = c;
+  }
+
+  setCanvasRef = c => {
+    this.canvas = c;
+  }
+
+  handleClickRoot = e => e.stopPropagation();
+
+  handlePlay = () => {
+    this.setState({ paused: false });
+  }
+
+  handlePause = () => {
+    this.setState({ paused: true });
+  }
+
+  handleTimeUpdate = () => {
+    this.setState({
+      currentTime: Math.floor(this.video.currentTime),
+      duration: Math.floor(this.video.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.video.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.video.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.video.play();
+  }
+
+  handleMouseMove = throttle(e => {
+    const { x } = getPointerPosition(this.seek, e);
+    const currentTime = Math.floor(this.video.duration * x);
+
+    if (!isNaN(currentTime)) {
+      this.video.currentTime = currentTime;
+      this.setState({ currentTime });
+    }
+  }, 60);
+
+  togglePlay = () => {
+    if (this.state.paused) {
+      this.video.play();
+    } else {
+      this.video.pause();
+    }
+  }
+
+  toggleFullscreen = () => {
+    if (isFullscreen()) {
+      exitFullscreen();
+    } else {
+      requestFullscreen(this.player);
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener('fullscreenchange', this.handleFullscreenChange, true);
+    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
+    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
+    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
+
+    if (this.props.blurhash) {
+      this._decode();
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true);
+    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
+    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
+    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+      this.setState({ revealed: nextProps.visible });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.revealed && !this.state.revealed && this.video) {
+      this.video.pause();
+    }
+    if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
+      this._decode();
+    }
+  }
+
+  _decode() {
+    const hash   = this.props.blurhash;
+    const pixels = decode(hash, 32, 32);
+
+    if (pixels) {
+      const ctx       = this.canvas.getContext('2d');
+      const imageData = new ImageData(pixels, 32, 32);
+
+      ctx.putImageData(imageData, 0, 0);
+    }
+  }
+
+  handleFullscreenChange = () => {
+    this.setState({ fullscreen: isFullscreen() });
+  }
+
+  handleMouseEnter = () => {
+    this.setState({ hovered: true });
+  }
+
+  handleMouseLeave = () => {
+    this.setState({ hovered: false });
+  }
+
+  toggleMute = () => {
+    this.video.muted = !this.video.muted;
+    this.setState({ muted: this.video.muted });
+  }
+
+  toggleReveal = () => {
+    if (this.props.onToggleVisibility) {
+      this.props.onToggleVisibility();
+    } else {
+      this.setState({ revealed: !this.state.revealed });
+    }
+  }
+
+  handleLoadedData = () => {
+    if (this.props.startTime) {
+      this.video.currentTime = this.props.startTime;
+      this.video.play();
+    }
+  }
+
+  handleProgress = () => {
+    if (this.video.buffered.length > 0) {
+      this.setState({ buffer: this.video.buffered.end(0) / this.video.duration * 100 });
+    }
+  }
+
+  handleVolumeChange = () => {
+    this.setState({ volume: this.video.volume, muted: this.video.muted });
+  }
+
+  handleOpenVideo = () => {
+    const { src, preview, width, height, alt } = this.props;
+
+    const media = fromJS({
+      type: 'video',
+      url: src,
+      preview_url: preview,
+      description: alt,
+      width,
+      height,
+    });
+
+    this.video.pause();
+    this.props.onOpenVideo(media, this.video.currentTime);
+  }
+
+  handleCloseVideo = () => {
+    this.video.pause();
+    this.props.onCloseVideo();
+  }
+
+  getPreload = () => {
+    const { startTime, detailed } = this.props;
+    const { dragging, fullscreen } = this.state;
+
+    if (startTime || fullscreen || dragging) {
+      return 'auto';
+    } else if (detailed) {
+      return 'metadata';
+    } else {
+      return 'none';
+    }
+  }
+
+  render() {
+    const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio } = this.props;
+    const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, 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 { width, height } = this.props;
+
+    if (inline && containerWidth) {
+      width = containerWidth;
+      const minSize = containerWidth / (16/9);
+
+      if (isPanoramic(aspectRatio)) {
+        height = Math.max(Math.floor(containerWidth / maximumAspectRatio), minSize);
+      } else if (isPortrait(aspectRatio)) {
+        height = Math.max(Math.floor(containerWidth / minimumAspectRatio), minSize);
+      } else {
+        height = Math.floor(containerWidth / aspectRatio);
+      }
+
+      if (height) playerStyle.height = height;
+    }
+
+    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('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen })}
+        style={playerStyle}
+        ref={this.setPlayerRef}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+        onClick={this.handleClickRoot}
+        tabIndex={0}
+      >
+        <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': revealed })} />
+
+        {revealed && <video
+          ref={this.setVideoRef}
+          src={src}
+          poster={preview}
+          // preload={this.getPreload()}
+          loop
+          role='button'
+          tabIndex='0'
+          aria-label={alt}
+          title={alt}
+          width={width}
+          height={height || 300}
+          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('spoiler-button', { 'spoiler-button--hidden': revealed })}>
+          <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
+            <span className='spoiler-button__overlay__label'>{warning}</span>
+          </button>
+        </div>
+
+        <div className={classNames('video-player__controls', { active: paused || hovered })}>
+          <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
+            <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
+            <div className='video-player__seek__progress' style={{ width: `${progress}%` }} />
+
+            <span
+              className={classNames('video-player__seek__handle', { active: dragging })}
+              tabIndex='0'
+              style={{ left: `${progress}%` }}
+            />
+          </div>
+
+          <div className='video-player__buttons-bar'>
+            <div className='video-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='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
+                <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} />
+                <span
+                  className={classNames('video-player__volume__handle')}
+                  tabIndex='0'
+                  style={{ left: `${volumeHandleLoc}px` }}
+                />
+              </div>
+
+              {(detailed || fullscreen) && (
+                <span>
+                  <span className='video-player__time-current'>{formatTime(currentTime)}</span>
+                  <span className='video-player__time-sep'>/</span>
+                  <span className='video-player__time-total'>{formatTime(duration)}</span>
+                </span>
+              )}
+
+              {link && <span className='video-player__link'>{link}</span>}
+            </div>
+
+            <div className='video-player__buttons right'>
+              {!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
+              {(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>}
+              {onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>}
+              <button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

From 581c1ef0eec5fd4dab1aae69542e15982bdd46cf Mon Sep 17 00:00:00 2001
From: Curtis <curtis.rock@wirelessmessaging.com>
Date: Sat, 27 Jun 2020 17:19:39 +0000
Subject: [PATCH 03/21] Update customization.md to include @albatross nginx
 config for Soapbox install

---
 docs/customization.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/customization.md b/docs/customization.md
index 194da8ae2..adb4b4044 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -1,6 +1,10 @@
 # Customizing Soapbox
 
-If you haven't already, [install Soapbox](https://soapbox.pub/).
+If you haven't already, [install Soapbox](https://soapbox.pub/). But before you install soapbox, you should consider how Soapbox is installed, by default.
+
+Soapbox, by default, is installed to replace the default Pleroma front end.  By extension, the Pleroma Masto front end continues to be available at the `/web` sub-URL
+
+If you want to install Soapbox at an alternate URL, allowing you to potentially run more than 2 front ends on a Pleroma server, you can consider the Nginx config created by @a1batross, available [here](https://git.mentality.rip/a1batross/soapbox-nginx-config/src/branch/master/soapbox.nginx)
 
 There are two main places Soapbox gets its configuration:
 

From f638425c138ae9fc6039f27da42c00af174b88b1 Mon Sep 17 00:00:00 2001
From: Curtis <curtis.rock@wirelessmessaging.com>
Date: Sun, 28 Jun 2020 18:07:38 +0000
Subject: [PATCH 04/21] Update customization.md

---
 docs/customization.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/customization.md b/docs/customization.md
index adb4b4044..95f626823 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -2,9 +2,7 @@
 
 If you haven't already, [install Soapbox](https://soapbox.pub/). But before you install soapbox, you should consider how Soapbox is installed, by default.
 
-Soapbox, by default, is installed to replace the default Pleroma front end.  By extension, the Pleroma Masto front end continues to be available at the `/web` sub-URL
-
-If you want to install Soapbox at an alternate URL, allowing you to potentially run more than 2 front ends on a Pleroma server, you can consider the Nginx config created by @a1batross, available [here](https://git.mentality.rip/a1batross/soapbox-nginx-config/src/branch/master/soapbox.nginx)
+Soapbox, by default, is installed to replace the default Pleroma front end.  By extension, the Pleroma Masto front end continues to be available at the `/web` sub-URL, which you can reference, if you'd like, in the `promoPanel` section of `soapbox.json`
 
 There are two main places Soapbox gets its configuration:
 
@@ -101,3 +99,9 @@ Simply rename `about.example` to `about`, or create your own.
 
 The `soapbox.json` file navlinks section's default URL values are pointing to the above file location, when the `about.example` folder is renamed to `about`
 These four template files have placeholders in them, e.g. "Your_Instance", that should be edited to match your Soapbox instance configuration, and will be meaningless to your users until you edit them.
+
+## Alternate Soapbox URL Root Location
+If you want to install Soapbox at an alternate URL, allowing you to potentially run more than 2 front ends on a Pleroma server, you can consider deploying the Nginx config created by @a1batross, available [here](https://git.mentality.rip/a1batross/soapbox-nginx-config/src/branch/master/soapbox.nginx)
+
+Tech support is limited for this level of customization
+

From 73b275b8da5c32b4dde5f7b4cb55281b6b3b035c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 30 Jun 2020 17:33:21 -0500
Subject: [PATCH 05/21] Patron updates

---
 .env.example                                  |  1 -
 README.md                                     |  2 +-
 app/soapbox/actions/patron.js                 |  5 ++--
 app/soapbox/components/sidebar_menu.js        | 12 ++++++----
 .../features/ui/components/funding_panel.js   | 24 ++++++++++++++-----
 app/soapbox/pages/home_page.js                |  2 +-
 static/instance/soapbox.example.json          |  5 +++-
 webpack/development.js                        |  6 -----
 8 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/.env.example b/.env.example
index 3004daa76..b116e6d40 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,3 @@
 NODE_ENV=development
 # BACKEND_URL="https://example.com"
-# PATRON_URL="https://patron.example.com"
 # PROXY_HTTPS_INSECURE=false
diff --git a/README.md b/README.md
index 954562943..30fa61a1d 100644
--- a/README.md
+++ b/README.md
@@ -124,7 +124,7 @@ For https, be sure to also set `PROXY_HTTPS_INSECURE=true`.
 
 Allows using an HTTPS backend if set to `true`.
 
-This is needed if `BACKEND_URL` or `PATRON_URL` are set to an `https://` value.
+This is needed if `BACKEND_URL` is set to an `https://` value.
 [More info](https://stackoverflow.com/a/48624590/8811886).
 
 **Default:** `false`
diff --git a/app/soapbox/actions/patron.js b/app/soapbox/actions/patron.js
index 6b4885c9a..3f32e2ad8 100644
--- a/app/soapbox/actions/patron.js
+++ b/app/soapbox/actions/patron.js
@@ -1,11 +1,12 @@
-import api from '../api';
+import axios from 'axios';
 
 export const PATRON_FUNDING_IMPORT        = 'PATRON_FUNDING_IMPORT';
 export const PATRON_FUNDING_FETCH_FAIL    = 'PATRON_FUNDING_FETCH_FAIL';
 
 export function fetchFunding() {
   return (dispatch, getState) => {
-    api(getState).get('/patron/v1/funding').then(response => {
+    const baseUrl = getState().getIn(['soapbox', 'extensions', 'patron', 'baseUrl']);
+    axios.get(`${baseUrl}/api/patron/v1/instance`).then(response => {
       dispatch(importFetchedFunding(response.data));
     }).catch(error => {
       dispatch(fetchFundingFail(error));
diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index 844a1bc4d..6c9a6e7ad 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/app/soapbox/components/sidebar_menu.js
@@ -15,6 +15,7 @@ import { shortNumberFormat } from '../utils/numbers';
 import { isStaff } from '../utils/accounts';
 import { makeGetAccount } from '../selectors';
 import { logOut } from 'soapbox/actions/auth';
+import { Map as ImmutableMap } from 'immutable';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -39,11 +40,12 @@ const messages = defineMessages({
 const mapStateToProps = state => {
   const me = state.get('me');
   const getAccount = makeGetAccount();
+  const patron = state.getIn(['soapbox', 'extensions', 'patron'], ImmutableMap());
 
   return {
     account: getAccount(state, me),
     sidebarOpen: state.get('sidebar').sidebarOpen,
-    hasPatron: state.getIn(['soapbox', 'extensions', 'patron']),
+    patronUrl: patron.get('enabled') && patron.get('baseUrl'),
     isStaff: isStaff(state.getIn(['accounts', me])),
   };
 };
@@ -75,7 +77,7 @@ class SidebarMenu extends ImmutablePureComponent {
   }
 
   render() {
-    const { sidebarOpen, onClose, intl, account, onClickLogOut, hasPatron, isStaff } = this.props;
+    const { sidebarOpen, onClose, intl, account, onClickLogOut, patronUrl, isStaff } = this.props;
     if (!account) return null;
     const acct = account.get('acct');
 
@@ -127,11 +129,11 @@ class SidebarMenu extends ImmutablePureComponent {
                 <Icon id='envelope' />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.messages)}</span>
               </NavLink>
-              {hasPatron ?
-                <NavLink className='sidebar-menu-item' to='/donate' onClick={onClose}>
+              {patronUrl ?
+                <a className='sidebar-menu-item' href={patronUrl} onClick={onClose}>
                   <Icon id='dollar' />
                   <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.donate)}</span>
-                </NavLink>
+                </a>
                 : ''}
               <NavLink className='sidebar-menu-item' to='/lists' onClick={onClose}>
                 <Icon id='list' />
diff --git a/app/soapbox/features/ui/components/funding_panel.js b/app/soapbox/features/ui/components/funding_panel.js
index 7650c8cdf..df96512e2 100644
--- a/app/soapbox/features/ui/components/funding_panel.js
+++ b/app/soapbox/features/ui/components/funding_panel.js
@@ -5,6 +5,16 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ProgressBar from '../../../components/progress_bar';
 import { fetchFunding } from 'soapbox/actions/patron';
 
+const moneyFormat = amount => (
+  new Intl
+    .NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'usd',
+      notation: 'compact',
+    })
+    .format(amount/100)
+);
+
 class FundingPanel extends ImmutablePureComponent {
 
   componentDidMount() {
@@ -12,21 +22,22 @@ class FundingPanel extends ImmutablePureComponent {
   }
 
   render() {
-    const { funding } = this.props;
+    const { funding, patronUrl } = this.props;
 
     if (!funding) {
       return null;
     }
 
+    const amount = funding.getIn(['funding', 'amount']);
     const goal = funding.getIn(['goals', '0', 'amount']);
     const goal_text = funding.getIn(['goals', '0', 'text']);
-    const goal_reached = funding.get('amount') >= goal;
+    const goal_reached = amount >= goal;
     let ratio_text;
 
     if (goal_reached) {
-      ratio_text = <><strong>${Math.floor(goal/100)}</strong> per month<span className='funding-panel__reached'>&mdash; reached!</span></>;
+      ratio_text = <><strong>{moneyFormat(goal)}</strong> per month<span className='funding-panel__reached'>&mdash; reached!</span></>;
     } else {
-      ratio_text = <><strong>${Math.floor(funding.get('amount')/100)} out of ${Math.floor(goal/100)}</strong> per month</>;
+      ratio_text = <><strong>{moneyFormat(amount)} out of {moneyFormat(goal)}</strong> per month</>;
     }
 
     return (
@@ -41,11 +52,11 @@ class FundingPanel extends ImmutablePureComponent {
           <div className='funding-panel__ratio'>
             {ratio_text}
           </div>
-          <ProgressBar progress={funding.get('amount')/goal} />
+          <ProgressBar progress={amount/goal} />
           <div className='funding-panel__description'>
             {goal_text}
           </div>
-          <a className='button' href='/donate'>Donate</a>
+          {patronUrl && <a className='button' href={patronUrl}>Donate</a>}
         </div>
       </div>
     );
@@ -56,6 +67,7 @@ class FundingPanel extends ImmutablePureComponent {
 const mapStateToProps = state => {
   return {
     funding: state.getIn(['patron', 'funding']),
+    patronUrl: state.getIn(['soapbox', 'extensions', 'patron', 'baseUrl']),
   };
 };
 
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index 6a6a7f6fe..f06bd90eb 100644
--- a/app/soapbox/pages/home_page.js
+++ b/app/soapbox/pages/home_page.js
@@ -16,7 +16,7 @@ const mapStateToProps = state => {
   const me = state.get('me');
   return {
     account: state.getIn(['accounts', me]),
-    hasPatron: state.getIn(['soapbox', 'extensions', 'patron']),
+    hasPatron: state.getIn(['soapbox', 'extensions', 'patron', 'enabled']),
     features: getFeatures(state.get('instance')),
   };
 };
diff --git a/static/instance/soapbox.example.json b/static/instance/soapbox.example.json
index 9083c8e7f..540fc51ed 100644
--- a/static/instance/soapbox.example.json
+++ b/static/instance/soapbox.example.json
@@ -13,7 +13,10 @@
     }]
   },
   "extensions": {
-    "patron": false
+    "patron": {
+      "enabled": false,
+      "baseUrl": "https://patron.example.com"
+    }
   },
   "defaultSettings": {
     "autoPlayGif": false,
diff --git a/webpack/development.js b/webpack/development.js
index a16df0fbf..98ce3e718 100644
--- a/webpack/development.js
+++ b/webpack/development.js
@@ -9,7 +9,6 @@ const { settings, output } = require('./configuration');
 const watchOptions = {};
 
 const backendUrl  = process.env.BACKEND_URL || 'http://localhost:4000';
-const patronUrl   = process.env.PATRON_URL  || 'http://localhost:5000';
 const secureProxy = !(process.env.PROXY_HTTPS_INSECURE === 'true');
 
 const backendEndpoints = [
@@ -22,7 +21,6 @@ const backendEndpoints = [
   '/.well-known/webfinger',
   '/static',
   '/emoji',
-  '/patron',
 ];
 
 const makeProxyConfig = () => {
@@ -33,10 +31,6 @@ const makeProxyConfig = () => {
       secure: secureProxy,
     };
   });
-  proxyConfig['/patron'] = {
-    target: patronUrl,
-    secure: secureProxy,
-  };
   return proxyConfig;
 };
 

From 8144c7d508ddc058b5197a3c6789c69f01a95efb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 1 Jul 2020 15:06:31 -0500
Subject: [PATCH 06/21] UserPanel header size fix, fixes #222

---
 app/styles/components/user-panel.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/styles/components/user-panel.scss b/app/styles/components/user-panel.scss
index 3850df929..cf49a3d68 100644
--- a/app/styles/components/user-panel.scss
+++ b/app/styles/components/user-panel.scss
@@ -11,6 +11,10 @@
     width: 100%;
     background: var(--brand-color--faint);
 
+    .still-image {
+      height: 100%;
+    }
+
     img {
       display: block;
       height: 100%;

From 2d194d75aa6d8259f7881fb456dc926d063efa77 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 1 Jul 2020 15:08:18 -0500
Subject: [PATCH 07/21] Patron: Expect proxied endpoints

---
 app/soapbox/actions/patron.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/actions/patron.js b/app/soapbox/actions/patron.js
index 3f32e2ad8..ec9a35241 100644
--- a/app/soapbox/actions/patron.js
+++ b/app/soapbox/actions/patron.js
@@ -1,12 +1,11 @@
-import axios from 'axios';
+import api from '../api';
 
 export const PATRON_FUNDING_IMPORT        = 'PATRON_FUNDING_IMPORT';
 export const PATRON_FUNDING_FETCH_FAIL    = 'PATRON_FUNDING_FETCH_FAIL';
 
 export function fetchFunding() {
   return (dispatch, getState) => {
-    const baseUrl = getState().getIn(['soapbox', 'extensions', 'patron', 'baseUrl']);
-    axios.get(`${baseUrl}/api/patron/v1/instance`).then(response => {
+    api(getState).get('/api/patron/v1/instance').then(response => {
       dispatch(importFetchedFunding(response.data));
     }).catch(error => {
       dispatch(fetchFundingFail(error));

From e965c74760a6f9b6065d53d1b4bb0618b056c17b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 1 Jul 2020 17:10:46 -0500
Subject: [PATCH 08/21] Use object-fit: contain for sane image thumbnails,
 fixes #212

---
 app/styles/components/compose-form.scss  | 2 +-
 app/styles/components/media-gallery.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 0b144c700..b2d61bc22 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -284,7 +284,7 @@
     .compose-form__upload-thumbnail {
       border-radius: 4px;
       background-position: center;
-      background-size: cover;
+      background-size: contain;
       background-repeat: no-repeat;
       height: 140px;
       width: 100%;
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 431610bb6..c98d212b3 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -31,6 +31,10 @@
   .still-image {
     height: 100%;
     width: 100%;
+
+    img {
+      object-fit: contain;
+    }
   }
 
   .still-image--play-on-hover::before {

From c14653008848fdd30f9434330da8a4b09cdca4ee Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Thu, 18 Jun 2020 20:24:49 +0000
Subject: [PATCH 09/21] Update index.js

---
 app/soapbox/features/audio/index.js | 209 ++++++++--------------------
 1 file changed, 61 insertions(+), 148 deletions(-)

diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
index d49e08e65..3d35a2e96 100644
--- a/app/soapbox/features/audio/index.js
+++ b/app/soapbox/features/audio/index.js
@@ -5,22 +5,13 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { fromJS, is } from 'immutable';
 import { throttle } from 'lodash';
 import classNames from 'classnames';
-import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 import Icon from 'soapbox/components/icon';
-import { decode } from 'blurhash';
-import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
 import { getSettings } from 'soapbox/actions/settings';
 
 const messages = defineMessages({
-  play: { id: 'video.play', defaultMessage: 'Play' },
-  pause: { id: 'video.pause', defaultMessage: 'Pause' },
-  mute: { id: 'video.mute', defaultMessage: 'Mute sound' },
-  unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
-  hide: { id: 'video.hide', defaultMessage: 'Hide video' },
-  expand: { id: 'video.expand', defaultMessage: 'Expand video' },
-  close: { id: 'video.close', defaultMessage: 'Close video' },
-  fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' },
-  exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
+  play: { id: 'audio.play', defaultMessage: 'Play' },
+  pause: { id: 'audio.pause', defaultMessage: 'Pause' },
+  hide: { id: 'video.hide', defaultMessage: 'Hide audio' },
 });
 
 const formatTime = secondsNum => {
@@ -94,27 +85,22 @@ const mapStateToProps = state => ({
 
 export default @connect(mapStateToProps)
 @injectIntl
-class Video extends React.PureComponent {
+class Audio extends React.PureComponent {
 
   static propTypes = {
-    preview: PropTypes.string,
     src: PropTypes.string.isRequired,
     alt: PropTypes.string,
-    width: PropTypes.number,
-    height: PropTypes.number,
     sensitive: PropTypes.bool,
     startTime: PropTypes.number,
-    onOpenVideo: PropTypes.func,
-    onCloseVideo: PropTypes.func,
+    onOpenAudio: PropTypes.func,
+    onCloseAudio: PropTypes.func,
     detailed: PropTypes.bool,
     inline: PropTypes.bool,
     cacheWidth: PropTypes.func,
     visible: PropTypes.bool,
     onToggleVisibility: PropTypes.func,
     intl: PropTypes.object.isRequired,
-    blurhash: PropTypes.string,
     link: PropTypes.node,
-    aspectRatio: PropTypes.number,
     displayMedia: PropTypes.string,
   };
 
@@ -124,8 +110,6 @@ class Video extends React.PureComponent {
     volume: 0.5,
     paused: true,
     dragging: false,
-    containerWidth: this.props.width,
-    fullscreen: 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'),
@@ -151,11 +135,11 @@ class Video extends React.PureComponent {
     }
   }
 
-  setVideoRef = c => {
-    this.video = c;
+  setAudioRef = c => {
+    this.audio = c;
 
-    if (this.video) {
-      this.setState({ volume: this.video.volume, muted: this.video.muted });
+    if (this.audio) {
+      this.setState({ volume: this.audio.volume, muted: this.audio.muted });
     }
   }
 
@@ -183,8 +167,8 @@ class Video extends React.PureComponent {
 
   handleTimeUpdate = () => {
     this.setState({
-      currentTime: Math.floor(this.video.currentTime),
-      duration: Math.floor(this.video.duration),
+      currentTime: Math.floor(this.audio.currentTime),
+      duration: Math.floor(this.audio.duration),
     });
   }
 
@@ -218,7 +202,7 @@ class Video extends React.PureComponent {
       } else if(x < 0) {
         slideamt = 0;
       }
-      this.video.volume = slideamt;
+      this.audio.volume = slideamt;
       this.setState({ volume: slideamt });
     }
   }, 60);
@@ -230,7 +214,7 @@ class Video extends React.PureComponent {
     document.addEventListener('touchend', this.handleMouseUp, true);
 
     this.setState({ dragging: true });
-    this.video.pause();
+    this.audio.pause();
     this.handleMouseMove(e);
 
     e.preventDefault();
@@ -244,7 +228,7 @@ class Video extends React.PureComponent {
     document.removeEventListener('touchend', this.handleMouseUp, true);
 
     this.setState({ dragging: false });
-    this.video.play();
+    this.audio.play();
   }
 
   handleMouseMove = throttle(e => {
@@ -252,45 +236,19 @@ class Video extends React.PureComponent {
     const currentTime = Math.floor(this.video.duration * x);
 
     if (!isNaN(currentTime)) {
-      this.video.currentTime = currentTime;
+      this.audio.currentTime = currentTime;
       this.setState({ currentTime });
     }
   }, 60);
 
   togglePlay = () => {
     if (this.state.paused) {
-      this.video.play();
+      this.audio.play();
     } else {
-      this.video.pause();
+      this.audio.pause();
     }
   }
 
-  toggleFullscreen = () => {
-    if (isFullscreen()) {
-      exitFullscreen();
-    } else {
-      requestFullscreen(this.player);
-    }
-  }
-
-  componentDidMount() {
-    document.addEventListener('fullscreenchange', this.handleFullscreenChange, true);
-    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
-    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
-    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
-
-    if (this.props.blurhash) {
-      this._decode();
-    }
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true);
-    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
-    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
-    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
-  }
-
   componentWillReceiveProps(nextProps) {
     if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
       this.setState({ revealed: nextProps.visible });
@@ -298,28 +256,9 @@ class Video extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.revealed && !this.state.revealed && this.video) {
-      this.video.pause();
+    if (prevState.revealed && !this.state.revealed && this.audio) {
+      this.audio.pause();
     }
-    if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
-      this._decode();
-    }
-  }
-
-  _decode() {
-    const hash   = this.props.blurhash;
-    const pixels = decode(hash, 32, 32);
-
-    if (pixels) {
-      const ctx       = this.canvas.getContext('2d');
-      const imageData = new ImageData(pixels, 32, 32);
-
-      ctx.putImageData(imageData, 0, 0);
-    }
-  }
-
-  handleFullscreenChange = () => {
-    this.setState({ fullscreen: isFullscreen() });
   }
 
   handleMouseEnter = () => {
@@ -331,8 +270,8 @@ class Video extends React.PureComponent {
   }
 
   toggleMute = () => {
-    this.video.muted = !this.video.muted;
-    this.setState({ muted: this.video.muted });
+    this.audio.muted = !this.audio.muted;
+    this.setState({ muted: this.audio.muted });
   }
 
   toggleReveal = () => {
@@ -345,47 +284,44 @@ class Video extends React.PureComponent {
 
   handleLoadedData = () => {
     if (this.props.startTime) {
-      this.video.currentTime = this.props.startTime;
-      this.video.play();
+      this.audio.currentTime = this.props.startTime;
+      this.audio.play();
     }
   }
 
   handleProgress = () => {
-    if (this.video.buffered.length > 0) {
-      this.setState({ buffer: this.video.buffered.end(0) / this.video.duration * 100 });
+    if (this.audio.buffered.length > 0) {
+      this.setState({ buffer: this.audio.buffered.end(0) / this.audio.duration * 100 });
     }
   }
 
   handleVolumeChange = () => {
-    this.setState({ volume: this.video.volume, muted: this.video.muted });
+    this.setState({ volume: this.audio.volume, muted: this.audio.muted });
   }
 
-  handleOpenVideo = () => {
-    const { src, preview, width, height, alt } = this.props;
+  handleOpenAudio = () => {
+    const { src, alt } = this.props;
 
     const media = fromJS({
-      type: 'video',
+      type: 'audio',
       url: src,
-      preview_url: preview,
       description: alt,
-      width,
-      height,
     });
 
-    this.video.pause();
-    this.props.onOpenVideo(media, this.video.currentTime);
+    this.audio.pause();
+    this.props.onOpenAudio(media, this.audio.currentTime);
   }
 
-  handleCloseVideo = () => {
-    this.video.pause();
-    this.props.onCloseVideo();
+  handleCloseAudio = () => {
+    this.audio.pause();
+    this.props.onCloseAudio();
   }
 
   getPreload = () => {
     const { startTime, detailed } = this.props;
-    const { dragging, fullscreen } = this.state;
+    const { dragging } = this.state;
 
-    if (startTime || fullscreen || dragging) {
+    if (startTime || dragging) {
       return 'auto';
     } else if (detailed) {
       return 'metadata';
@@ -395,31 +331,14 @@ class Video extends React.PureComponent {
   }
 
   render() {
-    const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio } = this.props;
-    const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
+    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 progress = (currentTime / duration) * 100;
 
     const volumeWidth = (muted) ? 0 : volume * this.volWidth;
     const volumeHandleLoc = (muted) ? this.volHandleOffset(0) : this.volHandleOffset(volume);
     const playerStyle = {};
 
-    let { width, height } = this.props;
-
-    if (inline && containerWidth) {
-      width = containerWidth;
-      const minSize = containerWidth / (16/9);
-
-      if (isPanoramic(aspectRatio)) {
-        height = Math.max(Math.floor(containerWidth / maximumAspectRatio), minSize);
-      } else if (isPortrait(aspectRatio)) {
-        height = Math.max(Math.floor(containerWidth / minimumAspectRatio), minSize);
-      } else {
-        height = Math.floor(containerWidth / aspectRatio);
-      }
-
-      if (height) playerStyle.height = height;
-    }
-
     let warning;
 
     if (sensitive) {
@@ -431,7 +350,7 @@ class Video extends React.PureComponent {
     return (
       <div
         role='menuitem'
-        className={classNames('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen })}
+        className={classNames('audio-player', { inactive: !revealed, detailed, inline: inline })}
         style={playerStyle}
         ref={this.setPlayerRef}
         onMouseEnter={this.handleMouseEnter}
@@ -441,18 +360,13 @@ class Video extends React.PureComponent {
       >
         <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': revealed })} />
 
-        {revealed && <video
-          ref={this.setVideoRef}
+        {revealed && <audio
           src={src}
-          poster={preview}
           // preload={this.getPreload()}
-          loop
           role='button'
           tabIndex='0'
           aria-label={alt}
           title={alt}
-          width={width}
-          height={height || 300}
           volume={volume}
           onClick={this.togglePlay}
           onPlay={this.handlePlay}
@@ -469,48 +383,47 @@ class Video extends React.PureComponent {
           </button>
         </div>
 
-        <div className={classNames('video-player__controls', { active: paused || hovered })}>
-          <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
-            <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
-            <div className='video-player__seek__progress' style={{ width: `${progress}%` }} />
+        <div className={classNames('audio-player__controls', { active: paused || hovered })}>
+          <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('video-player__seek__handle', { active: dragging })}
+              className={classNames('audio-player__seek__handle', { active: dragging })}
               tabIndex='0'
               style={{ left: `${progress}%` }}
             />
           </div>
 
-          <div className='video-player__buttons-bar'>
-            <div className='video-player__buttons left'>
+          <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='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
-                <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} />
+              <div className='audio-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
+                <div className='audio-player__volume__current' style={{ width: `${volumeWidth}px` }} />
                 <span
-                  className={classNames('video-player__volume__handle')}
+                  className={classNames('audio-player__volume__handle')}
                   tabIndex='0'
                   style={{ left: `${volumeHandleLoc}px` }}
                 />
               </div>
 
-              {(detailed || fullscreen) && (
+              {detailed && (
                 <span>
-                  <span className='video-player__time-current'>{formatTime(currentTime)}</span>
-                  <span className='video-player__time-sep'>/</span>
-                  <span className='video-player__time-total'>{formatTime(duration)}</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='video-player__link'>{link}</span>}
+              {link && <span className='audio-player__link'>{link}</span>}
             </div>
 
-            <div className='video-player__buttons right'>
-              {!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
-              {(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>}
-              {onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>}
-              <button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button>
+            <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>}
             </div>
           </div>
         </div>
@@ -518,4 +431,4 @@ class Video extends React.PureComponent {
     );
   }
 
-}
+}
\ No newline at end of file

From d203790896823edc5855791ee843e500c5ff728d Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Thu, 18 Jun 2020 21:32:12 +0000
Subject: [PATCH 10/21] Update async-components.js

---
 app/soapbox/features/ui/util/async-components.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js
index 749b72cc2..7d3805ef1 100644
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/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');
 }

From 29e43fa642ce80e44cb255ad5f467eef5eb9db1e Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Thu, 18 Jun 2020 21:33:22 +0000
Subject: [PATCH 11/21] Update status_check_box.js

---
 app/soapbox/features/report/components/status_check_box.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/report/components/status_check_box.js b/app/soapbox/features/report/components/status_check_box.js
index c8e5984a2..2ccb0df39 100644
--- a/app/soapbox/features/report/components/status_check_box.js
+++ b/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 {

From 01d042f80dd78d604da416590bbbc8a66ce64931 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Wed, 24 Jun 2020 20:53:25 -0600
Subject: [PATCH 12/21] Update of work on audio player

---
 app/soapbox/components/status.js              |  28 +-
 app/soapbox/containers/status_container.js    |   4 +
 app/soapbox/features/account_gallery/index.js |   2 +
 app/soapbox/features/audio/index.js           |  70 +---
 .../compose/components/upload_button.js       |   5 +-
 .../status/components/detailed_status.js      |  14 +
 .../features/ui/components/audio_modal.js     |  73 ++++
 .../features/ui/components/media_modal.js     |  13 +
 .../features/ui/components/modal_root.js      |   4 +-
 app/soapbox/locales/defaultMessages.json      |  43 +-
 app/styles/application.scss                   |   1 +
 app/styles/components/audio-player.scss       | 380 ++++++++++++++++++
 app/styles/components/detailed-status.scss    |   3 +-
 app/styles/components/modal.scss              |  11 +-
 app/styles/components/status.scss             |   9 +-
 15 files changed, 599 insertions(+), 61 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/audio_modal.js
 create mode 100644 app/styles/components/audio-player.scss

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index bc0dc1cbc..9c308c2f2 100644
--- a/app/soapbox/components/status.js
+++ b/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}>
diff --git a/app/soapbox/containers/status_container.js b/app/soapbox/containers/status_container.js
index 0e25f9e65..d84141165 100644
--- a/app/soapbox/containers/status_container.js
+++ b/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', {
diff --git a/app/soapbox/features/account_gallery/index.js b/app/soapbox/features/account_gallery/index.js
index de2213b07..4736f48aa 100644
--- a/app/soapbox/features/account_gallery/index.js
+++ b/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'));
diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
index 3d35a2e96..256fa4ab9 100644
--- a/app/soapbox/features/audio/index.js
+++ b/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 {
     );
   }
 
-}
\ No newline at end of file
+}
diff --git a/app/soapbox/features/compose/components/upload_button.js b/app/soapbox/features/compose/components/upload_button.js
index 989a75c7c..6e8f5b82e 100644
--- a/app/soapbox/features/compose/components/upload_button.js
+++ b/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' }}
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index 558c6d9b7..6d38e06e9 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/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
diff --git a/app/soapbox/features/ui/components/audio_modal.js b/app/soapbox/features/ui/components/audio_modal.js
new file mode 100644
index 000000000..9496fd2ed
--- /dev/null
+++ b/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>
+    );
+  }
+
+}
diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index a209d8fee..e79b83d4e 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/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
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js
index b6cfa5737..358befa8c 100644
--- a/app/soapbox/features/ui/components/modal_root.js
+++ b/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) => {
diff --git a/app/soapbox/locales/defaultMessages.json b/app/soapbox/locales/defaultMessages.json
index a83aac3ce..14d3f14e9 100644
--- a/app/soapbox/locales/defaultMessages.json
+++ b/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"
   }
-]
\ No newline at end of file
+]
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 331e38f92..4aad1edd4 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -68,3 +68,4 @@
 @import 'components/media-spoiler';
 @import 'components/error-boundary';
 @import 'components/video-player';
+@import 'components/audio-player';
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
new file mode 100644
index 000000000..1bda56b8c
--- /dev/null
+++ b/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%);
+}
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 533ab1ccd..fd1f98302 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -38,7 +38,8 @@
     }
   }
 
-  .video-player {
+  .video-player,
+  .audio-player {
     margin-top: 8px;
   }
 }
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 6d1cf7c5c..14db46afb 100644
--- a/app/styles/components/modal.scss
+++ b/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;
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 5a20e882e..0d349764b 100644
--- a/app/styles/components/status.scss
+++ b/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%;

From 1a7cbb21a72155bc7a3e00d445261be0eec26d2b Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Sun, 28 Jun 2020 19:51:10 -0600
Subject: [PATCH 13/21] Audio player work (change of sensitive content
 handling)

---
 app/soapbox/components/status.js              |  1 +
 app/soapbox/features/audio/index.js           | 44 ++++-----------
 .../compose/components/upload_button.js       |  7 ++-
 .../report/components/status_check_box.js     |  4 +-
 .../features/ui/components/audio_modal.js     | 22 --------
 app/soapbox/locales/defaultMessages.json      |  2 +-
 app/soapbox/locales/en.json                   |  2 +-
 app/soapbox/reducers/media_attachments.js     |  5 ++
 app/styles/components/audio-player.scss       | 53 ++++++++++++-------
 9 files changed, 55 insertions(+), 85 deletions(-)

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 9c308c2f2..cbb4b4e35 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -377,6 +377,7 @@ class Status extends ImmutablePureComponent {
                 inline
                 sensitive={status.get('sensitive')}
                 cacheWidth={this.props.cacheMediaWidth}
+                visible={this.state.showMedia}
                 onOpenAudio={this.handleOpenAudio}
               />
             )}
diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
index 256fa4ab9..c4b458e3d 100644
--- a/app/soapbox/features/audio/index.js
+++ b/app/soapbox/features/audio/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { is } from 'immutable';
 import { throttle } from 'lodash';
 import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
@@ -104,6 +103,7 @@ class Audio extends React.PureComponent {
     intl: PropTypes.object.isRequired,
     link: PropTypes.node,
     displayMedia: PropTypes.string,
+    expandSpoilers: PropTypes.bool,
   };
 
   state = {
@@ -152,10 +152,6 @@ class Audio extends React.PureComponent {
     this.volume = c;
   }
 
-  setCanvasRef = c => {
-    this.canvas = c;
-  }
-
   handleClickRoot = e => e.stopPropagation();
 
   handlePlay = () => {
@@ -250,29 +246,13 @@ class Audio extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
-      this.setState({ revealed: nextProps.visible });
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.revealed && !this.state.revealed && this.audio) {
-      this.audio.pause();
-    }
-  }
-
   toggleMute = () => {
     this.audio.muted = !this.audio.muted;
     this.setState({ muted: this.audio.muted });
   }
 
-  toggleReveal = () => {
-    if (this.props.onToggleVisibility) {
-      this.props.onToggleVisibility();
-    } else {
-      this.setState({ revealed: !this.state.revealed });
-    }
+  toggleWarning = () => {
+    this.setState({ revealed: !this.state.revealed });
   }
 
   handleLoadedData = () => {
@@ -325,7 +305,7 @@ class Audio extends React.PureComponent {
     return (
       <div
         role='menuitem'
-        className={classNames('audio-player', { inactive: !revealed, detailed, inline: inline })}
+        className={classNames('audio-player', { detailed: detailed, inline: inline, warning_visible: !revealed })}
         style={playerStyle}
         ref={this.setPlayerRef}
         onMouseEnter={this.handleMouseEnter}
@@ -333,9 +313,8 @@ class Audio extends React.PureComponent {
         onClick={this.handleClickRoot}
         tabIndex={0}
       >
-        <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': revealed })} />
 
-        {revealed && <audio
+        <audio
           ref={this.setAudioRef}
           src={src}
           // preload={this.getPreload()}
@@ -351,12 +330,11 @@ class Audio extends React.PureComponent {
           onLoadedData={this.handleLoadedData}
           onProgress={this.handleProgress}
           onVolumeChange={this.handleVolumeChange}
-        />}
+        />
 
-        <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed })}>
-          <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
-            <span className='spoiler-button__overlay__label'>{warning}</span>
-          </button>
+        <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')}>
@@ -393,10 +371,6 @@ class Audio extends React.PureComponent {
 
               {link && <span className='audio-player__link'>{link}</span>}
             </div>
-
-            <div className='audio-player__buttons right'>
-              {<button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
-            </div>
           </div>
         </div>
       </div>
diff --git a/app/soapbox/features/compose/components/upload_button.js b/app/soapbox/features/compose/components/upload_button.js
index 6e8f5b82e..24a83a527 100644
--- a/app/soapbox/features/compose/components/upload_button.js
+++ b/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 = () => {
@@ -52,7 +52,7 @@ class UploadButton extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, resetFileKey, unavailable, disabled } = this.props;
+    const { intl, resetFileKey, unavailable, disabled, acceptContentTypes } = this.props;
 
     if (unavailable) {
       return null;
@@ -68,8 +68,7 @@ class UploadButton extends ImmutablePureComponent {
             ref={this.setRef}
             type='file'
             multiple
-            accept='*.*'
-            //accept={acceptContentTypes.toArray().join(',')}
+            accept={acceptContentTypes.toArray().join(',')}
             onChange={this.handleChange}
             disabled={disabled}
             style={{ display: 'none' }}
diff --git a/app/soapbox/features/report/components/status_check_box.js b/app/soapbox/features/report/components/status_check_box.js
index 2ccb0df39..1e781fdd6 100644
--- a/app/soapbox/features/report/components/status_check_box.js
+++ b/app/soapbox/features/report/components/status_check_box.js
@@ -48,9 +48,9 @@ export default class StatusCheckBox extends React.PureComponent {
             )}
           </Bundle>
         );
-      } else if (status.getIn(['media_attacjments', 0, 'type']) === 'audio') {
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
         const audio = status.getIn(['media_attachments', 0]);
-        
+
         media = (
           <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
             {Component => (
diff --git a/app/soapbox/features/ui/components/audio_modal.js b/app/soapbox/features/ui/components/audio_modal.js
index 9496fd2ed..de8c71991 100644
--- a/app/soapbox/features/ui/components/audio_modal.js
+++ b/app/soapbox/features/ui/components/audio_modal.js
@@ -20,28 +20,6 @@ export default class AudioModal extends ImmutablePureComponent {
     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();
diff --git a/app/soapbox/locales/defaultMessages.json b/app/soapbox/locales/defaultMessages.json
index 14d3f14e9..e8c17f6e2 100644
--- a/app/soapbox/locales/defaultMessages.json
+++ b/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"
       }
     ],
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 950098cf9..6507a5761 100644
--- a/app/soapbox/locales/en.json
+++ b/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",
diff --git a/app/soapbox/reducers/media_attachments.js b/app/soapbox/reducers/media_attachments.js
index 4cc6cf1a2..134ccbf30 100644
--- a/app/soapbox/reducers/media_attachments.js
+++ b/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',
   ]),
 });
 
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
index 1bda56b8c..68e7f065b 100644
--- a/app/styles/components/audio-player.scss
+++ b/app/styles/components/audio-player.scss
@@ -41,20 +41,6 @@
   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;
@@ -86,6 +72,10 @@
   border-radius: 4px;
   height: 57px;
 
+  &.warning_visible {
+    height: 92px;
+  }
+
   &:focus {
     outline: 0;
   }
@@ -178,6 +168,35 @@
     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;
+
+    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;
@@ -190,12 +209,6 @@
       }
     }
 
-    &.right {
-      button {
-        padding-right: 0;
-      }
-    }
-
     button {
       background: transparent;
       padding: 2px 10px;

From bf8b875b96e873155914d6584f7ec57ed13cfa7a Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Sun, 28 Jun 2020 20:10:40 -0600
Subject: [PATCH 14/21] Jest test failure fix. Let's make sure we don't have
 the roof collapse.

---
 app/soapbox/reducers/__tests__/media_attachments.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/soapbox/reducers/__tests__/media_attachments.js b/app/soapbox/reducers/__tests__/media_attachments.js
index 95ef822b1..2af1a5a02 100644
--- a/app/soapbox/reducers/__tests__/media_attachments.js
+++ b/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',
       ]),
     }));
   });

From e2f76f538cc4f9ef9d659e201bcbc73c5de85f29 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Sun, 28 Jun 2020 23:08:09 -0600
Subject: [PATCH 15/21] Refactor Audio modal and make View context actually
 work

---
 app/soapbox/features/account_gallery/index.js |  2 -
 .../features/ui/components/audio_modal.js     | 51 -------------------
 .../features/ui/components/media_modal.js     | 14 ++++-
 .../features/ui/components/modal_root.js      |  4 +-
 4 files changed, 14 insertions(+), 57 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/audio_modal.js

diff --git a/app/soapbox/features/account_gallery/index.js b/app/soapbox/features/account_gallery/index.js
index 4736f48aa..de2213b07 100644
--- a/app/soapbox/features/account_gallery/index.js
+++ b/app/soapbox/features/account_gallery/index.js
@@ -133,8 +133,6 @@ 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'));
diff --git a/app/soapbox/features/ui/components/audio_modal.js b/app/soapbox/features/ui/components/audio_modal.js
deleted file mode 100644
index de8c71991..000000000
--- a/app/soapbox/features/ui/components/audio_modal.js
+++ /dev/null
@@ -1,51 +0,0 @@
-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,
-  };
-
-  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>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index e79b83d4e..d0e4a2f9e 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/app/soapbox/features/ui/components/media_modal.js
@@ -139,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 (
@@ -168,6 +177,7 @@ class MediaModal extends ImmutablePureComponent {
             startTime={time || 0}
             onCloseVideo={onClose}
             detailed
+            link={link}
             alt={image.get('description')}
             key={image.get('url')}
           />
@@ -180,6 +190,7 @@ class MediaModal extends ImmutablePureComponent {
             src={image.get('url')}
             startTime={time || 0}
             detailed
+            link={link}
             alt={image.get('description')}
             key={image.get('url')}
           />
@@ -191,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')}
@@ -243,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>
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js
index 358befa8c..b6cfa5737 100644
--- a/app/soapbox/features/ui/components/modal_root.js
+++ b/app/soapbox/features/ui/components/modal_root.js
@@ -7,7 +7,6 @@ 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';
@@ -26,7 +25,6 @@ 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,
@@ -62,7 +60,7 @@ export default class ModalRoot extends React.PureComponent {
   }
 
   renderLoading = modalId => () => {
-    return ['MEDIA', 'VIDEO', 'AUDIO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
+    return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
   }
 
   renderError = (props) => {

From 3be1c9a1f1a81c948849cfbe5def3b8d151438fc Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Mon, 29 Jun 2020 22:30:13 -0600
Subject: [PATCH 16/21] Fixes for audio attachments when there is more than 1
 attachment and icons for audio attachments

---
 app/soapbox/components/media_gallery.js       | 19 +++++++++++++++++++
 app/soapbox/components/status.js              |  2 +-
 .../account_gallery/components/media_item.js  | 10 ++++++++++
 app/styles/components/audio-player.scss       |  4 ++++
 app/styles/components/media-gallery.scss      | 11 ++++++++++-
 5 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 4ab6e53e0..c71578b7a 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/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';
 
 const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
@@ -225,6 +226,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 (
diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index cbb4b4e35..889afc01e 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -365,7 +365,7 @@ class Status extends ImmutablePureComponent {
             )}
           </Bundle>
         );
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
         const audio = status.getIn(['media_attachments', 0]);
 
         media = (
diff --git a/app/soapbox/features/account_gallery/components/media_item.js b/app/soapbox/features/account_gallery/components/media_item.js
index 670e465a8..64a4e2a47 100644
--- a/app/soapbox/features/account_gallery/components/media_item.js
+++ b/app/soapbox/features/account_gallery/components/media_item.js
@@ -147,6 +147,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) {
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
index 68e7f065b..5de07b3aa 100644
--- a/app/styles/components/audio-player.scss
+++ b/app/styles/components/audio-player.scss
@@ -176,6 +176,10 @@
     background: hsl( var(--brand-color_h), var(--brand-color_s), 20% );
     padding: 5px;
 
+    &__label {
+      color: white;
+    }
+
     button {
       background: transparent;
       font-size: 16px;
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 05ba65a41..798d2233f 100644
--- a/app/styles/components/media-gallery.scss
+++ b/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);

From 1be7fa8c155b5565b6d081de4b5991ec4651c3e1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Jul 2020 16:47:09 -0500
Subject: [PATCH 17/21] Run yarn manage:translations

---
 app/soapbox/locales/ar.json              |  7 ++
 app/soapbox/locales/ast.json             |  7 ++
 app/soapbox/locales/bg.json              |  7 ++
 app/soapbox/locales/bn.json              |  7 ++
 app/soapbox/locales/br.json              |  7 ++
 app/soapbox/locales/ca.json              |  7 ++
 app/soapbox/locales/co.json              |  7 ++
 app/soapbox/locales/cs.json              |  7 ++
 app/soapbox/locales/cy.json              |  7 ++
 app/soapbox/locales/da.json              |  7 ++
 app/soapbox/locales/de.json              |  7 ++
 app/soapbox/locales/defaultMessages.json | 84 ++++++++++++------------
 app/soapbox/locales/el.json              |  7 ++
 app/soapbox/locales/en.json              |  7 ++
 app/soapbox/locales/eo.json              |  7 ++
 app/soapbox/locales/es-AR.json           |  7 ++
 app/soapbox/locales/es.json              |  7 ++
 app/soapbox/locales/et.json              |  7 ++
 app/soapbox/locales/eu.json              |  7 ++
 app/soapbox/locales/fa.json              |  7 ++
 app/soapbox/locales/fi.json              |  7 ++
 app/soapbox/locales/fr.json              |  7 ++
 app/soapbox/locales/ga.json              |  7 ++
 app/soapbox/locales/gl.json              |  7 ++
 app/soapbox/locales/he.json              |  7 ++
 app/soapbox/locales/hi.json              |  7 ++
 app/soapbox/locales/hr.json              |  7 ++
 app/soapbox/locales/hu.json              |  7 ++
 app/soapbox/locales/hy.json              |  7 ++
 app/soapbox/locales/id.json              |  7 ++
 app/soapbox/locales/io.json              |  7 ++
 app/soapbox/locales/it.json              |  7 ++
 app/soapbox/locales/ja.json              |  7 ++
 app/soapbox/locales/ka.json              |  7 ++
 app/soapbox/locales/kk.json              |  7 ++
 app/soapbox/locales/ko.json              |  7 ++
 app/soapbox/locales/lt.json              |  7 ++
 app/soapbox/locales/lv.json              |  7 ++
 app/soapbox/locales/mk.json              |  7 ++
 app/soapbox/locales/ms.json              |  7 ++
 app/soapbox/locales/nl.json              |  7 ++
 app/soapbox/locales/nn.json              |  7 ++
 app/soapbox/locales/no.json              |  7 ++
 app/soapbox/locales/oc.json              |  7 ++
 app/soapbox/locales/pl.json              |  7 ++
 app/soapbox/locales/pt-BR.json           |  7 ++
 app/soapbox/locales/pt.json              |  7 ++
 app/soapbox/locales/ro.json              |  7 ++
 app/soapbox/locales/ru.json              |  7 ++
 app/soapbox/locales/sk.json              |  7 ++
 app/soapbox/locales/sl.json              |  7 ++
 app/soapbox/locales/sq.json              |  7 ++
 app/soapbox/locales/sr-Latn.json         |  7 ++
 app/soapbox/locales/sr.json              |  7 ++
 app/soapbox/locales/sv.json              |  7 ++
 app/soapbox/locales/ta.json              |  7 ++
 app/soapbox/locales/te.json              |  7 ++
 app/soapbox/locales/th.json              |  7 ++
 app/soapbox/locales/tr.json              |  7 ++
 app/soapbox/locales/uk.json              |  7 ++
 app/soapbox/locales/zh-CN.json           |  7 ++
 app/soapbox/locales/zh-HK.json           |  7 ++
 app/soapbox/locales/zh-TW.json           |  7 ++
 63 files changed, 476 insertions(+), 42 deletions(-)

diff --git a/app/soapbox/locales/ar.json b/app/soapbox/locales/ar.json
index 38fc855f9..37143b4b9 100644
--- a/app/soapbox/locales/ar.json
+++ b/app/soapbox/locales/ar.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "لقد طرأ هناك خطأ غير متوقّع.",
   "alert.unexpected.title": "المعذرة!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "يمكنك/ي ضغط {combo} لتخطّي هذه في المرّة القادمة",
   "bundle_column_error.body": "لقد وقع هناك خطأ أثناء عملية تحميل هذا العنصر.",
   "bundle_column_error.retry": "إعادة المحاولة",
diff --git a/app/soapbox/locales/ast.json b/app/soapbox/locales/ast.json
index 263c2970e..56e4df72a 100644
--- a/app/soapbox/locales/ast.json
+++ b/app/soapbox/locales/ast.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Asocedió un fallu inesperáu.",
   "alert.unexpected.title": "¡Ups!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Pues primir {combo} pa saltar esto la próxima vegada",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Try again",
diff --git a/app/soapbox/locales/bg.json b/app/soapbox/locales/bg.json
index b71e3eee9..c1786d477 100644
--- a/app/soapbox/locales/bg.json
+++ b/app/soapbox/locales/bg.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "You can press {combo} to skip this next time",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Опитай отново",
diff --git a/app/soapbox/locales/bn.json b/app/soapbox/locales/bn.json
index 87f0b0583..2527d7e5a 100644
--- a/app/soapbox/locales/bn.json
+++ b/app/soapbox/locales/bn.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "অপ্রত্যাশিত একটি সমস্যা হয়েছে।",
   "alert.unexpected.title": "ওহো!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "পরেরবার আপনি {combo} চাপ দিলে এটার শেষে চলে যেতে পারবেন",
   "bundle_column_error.body": "এই অংশটি দেখতে যেয়ে কোনো সমস্যা হয়েছে।",
   "bundle_column_error.retry": "আবার চেষ্টা করুন",
diff --git a/app/soapbox/locales/br.json b/app/soapbox/locales/br.json
index 8d681ccb4..93190c561 100644
--- a/app/soapbox/locales/br.json
+++ b/app/soapbox/locales/br.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Ur fazi dic'hortozet zo degouezhet.",
   "alert.unexpected.title": "C'hem !",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "You can press {combo} to skip this next time",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Klask endro",
diff --git a/app/soapbox/locales/ca.json b/app/soapbox/locales/ca.json
index 165c0e336..0ed37623d 100644
--- a/app/soapbox/locales/ca.json
+++ b/app/soapbox/locales/ca.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "S'ha produït un error inesperat.",
   "alert.unexpected.title": "Vaja!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Pots premer {combo} per saltar-te això el proper cop",
   "bundle_column_error.body": "S'ha produït un error en carregar aquest component.",
   "bundle_column_error.retry": "Torna-ho a provar",
diff --git a/app/soapbox/locales/co.json b/app/soapbox/locales/co.json
index 629f613b9..21866bd0d 100644
--- a/app/soapbox/locales/co.json
+++ b/app/soapbox/locales/co.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Un prublemu inaspettatu hè accadutu.",
   "alert.unexpected.title": "Uups!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Pudete appughjà nant'à {combo} per saltà quessa a prussima volta",
   "bundle_column_error.body": "C'hè statu un prublemu caricandu st'elementu.",
   "bundle_column_error.retry": "Pruvà torna",
diff --git a/app/soapbox/locales/cs.json b/app/soapbox/locales/cs.json
index 61eebcec5..542418190 100644
--- a/app/soapbox/locales/cs.json
+++ b/app/soapbox/locales/cs.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "Žádná média k zobrazení.",
   "alert.unexpected.message": "Objevila se neočekávaná chyba.",
   "alert.unexpected.title": "Jejda!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Příště můžete pro přeskočení stisknout {combo}",
   "bundle_column_error.body": "Při načítání tohoto komponentu se něco pokazilo.",
   "bundle_column_error.retry": "Zkuste to znovu",
diff --git a/app/soapbox/locales/cy.json b/app/soapbox/locales/cy.json
index 2d60cf414..92c6a7b0b 100644
--- a/app/soapbox/locales/cy.json
+++ b/app/soapbox/locales/cy.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Digwyddodd gwall annisgwyl.",
   "alert.unexpected.title": "Wps!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Mae modd gwasgu {combo} er mwyn sgipio hyn tro nesa",
   "bundle_column_error.body": "Aeth rhywbeth o'i le tra'n llwytho'r elfen hon.",
   "bundle_column_error.retry": "Ceisiwch eto",
diff --git a/app/soapbox/locales/da.json b/app/soapbox/locales/da.json
index b86410d35..71f015085 100644
--- a/app/soapbox/locales/da.json
+++ b/app/soapbox/locales/da.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Der opstod en uventet fejl.",
   "alert.unexpected.title": "Ups!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Du kan trykke {combo} for at springe dette over næste gang",
   "bundle_column_error.body": "Noget gik galt under indlæsningen af dette komponent.",
   "bundle_column_error.retry": "Prøv igen",
diff --git a/app/soapbox/locales/de.json b/app/soapbox/locales/de.json
index de6646d88..78015e919 100644
--- a/app/soapbox/locales/de.json
+++ b/app/soapbox/locales/de.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "Keine Medien vorhanden.",
   "alert.unexpected.message": "Ein unerwarteter Fehler ist aufgetreten.",
   "alert.unexpected.title": "Hoppla!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Drücke {combo}, um dieses Fenster zu überspringen",
   "bundle_column_error.body": "Etwas ist beim Laden schiefgelaufen.",
   "bundle_column_error.retry": "Erneut versuchen",
diff --git a/app/soapbox/locales/defaultMessages.json b/app/soapbox/locales/defaultMessages.json
index e8c17f6e2..b5ad94f03 100644
--- a/app/soapbox/locales/defaultMessages.json
+++ b/app/soapbox/locales/defaultMessages.json
@@ -864,6 +864,47 @@
     ],
     "path": "app/soapbox/features/account/components/header.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "Play",
+        "id": "audio.play"
+      },
+      {
+        "defaultMessage": "Pause",
+        "id": "audio.pause"
+      },
+      {
+        "defaultMessage": "Mute",
+        "id": "audio.mute"
+      },
+      {
+        "defaultMessage": "Unmute",
+        "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"
+  },
   {
     "descriptors": [
       {
@@ -3049,46 +3090,5 @@
       }
     ],
     "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"
   }
-]
+]
\ No newline at end of file
diff --git a/app/soapbox/locales/el.json b/app/soapbox/locales/el.json
index 4a5a490a0..a7577320e 100644
--- a/app/soapbox/locales/el.json
+++ b/app/soapbox/locales/el.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Προέκυψε απροσδόκητο σφάλμα.",
   "alert.unexpected.title": "Εεπ!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Μπορείς να πατήσεις {combo} για να το προσπεράσεις αυτό την επόμενη φορά",
   "bundle_column_error.body": "Κάτι πήγε στραβά ενώ φορτωνόταν αυτό το στοιχείο.",
   "bundle_column_error.retry": "Δοκίμασε ξανά",
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 6507a5761..fbe8544f9 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "You can press {combo} to skip this next time",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Try again",
diff --git a/app/soapbox/locales/eo.json b/app/soapbox/locales/eo.json
index b814c5858..c275d8f1a 100644
--- a/app/soapbox/locales/eo.json
+++ b/app/soapbox/locales/eo.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Neatendita eraro okazis.",
   "alert.unexpected.title": "Ups!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Vi povas premi {combo} por preterpasi sekvafoje",
   "bundle_column_error.body": "Io misfunkciis en la ŝargado de ĉi tiu elemento.",
   "bundle_column_error.retry": "Bonvolu reprovi",
diff --git a/app/soapbox/locales/es-AR.json b/app/soapbox/locales/es-AR.json
index 4a6ab7f16..b2a8c4c4b 100644
--- a/app/soapbox/locales/es-AR.json
+++ b/app/soapbox/locales/es-AR.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Ocurrió un error inesperado.",
   "alert.unexpected.title": "¡Epa!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Podés hacer clic en {combo} para saltar esto la próxima vez",
   "bundle_column_error.body": "Algo salió mal al cargar este componente.",
   "bundle_column_error.retry": "Intentá de nuevo",
diff --git a/app/soapbox/locales/es.json b/app/soapbox/locales/es.json
index efb8c6b6d..4bb9dc4bf 100644
--- a/app/soapbox/locales/es.json
+++ b/app/soapbox/locales/es.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Hubo un error inesperado.",
   "alert.unexpected.title": "¡Ups!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Puedes hacer clic en {combo} para saltar este aviso la próxima vez",
   "bundle_column_error.body": "Algo salió mal al cargar este componente.",
   "bundle_column_error.retry": "Inténtalo de nuevo",
diff --git a/app/soapbox/locales/et.json b/app/soapbox/locales/et.json
index c9e92412c..052749c29 100644
--- a/app/soapbox/locales/et.json
+++ b/app/soapbox/locales/et.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Tekkis ootamatu viga.",
   "alert.unexpected.title": "Oih!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Saad vajutada {combo}, et see järgmine kord vahele jätta",
   "bundle_column_error.body": "Mindagi läks valesti selle komponendi laadimisel.",
   "bundle_column_error.retry": "Proovi uuesti",
diff --git a/app/soapbox/locales/eu.json b/app/soapbox/locales/eu.json
index d1bfc7391..65716a32b 100644
--- a/app/soapbox/locales/eu.json
+++ b/app/soapbox/locales/eu.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Ustekabeko errore bat gertatu da.",
   "alert.unexpected.title": "Ene!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "{combo} sakatu dezakezu hurrengoan hau saltatzeko",
   "bundle_column_error.body": "Zerbait okerra gertatu da osagai hau kargatzean.",
   "bundle_column_error.retry": "Saiatu berriro",
diff --git a/app/soapbox/locales/fa.json b/app/soapbox/locales/fa.json
index e2b9abc31..647da771c 100644
--- a/app/soapbox/locales/fa.json
+++ b/app/soapbox/locales/fa.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "خطای پیش‌بینی‌نشده‌ای رخ داد.",
   "alert.unexpected.title": "ای وای!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "دکمهٔ {combo} را بزنید تا دیگر این را نبینید",
   "bundle_column_error.body": "هنگام بازکردن این بخش خطایی رخ داد.",
   "bundle_column_error.retry": "تلاش دوباره",
diff --git a/app/soapbox/locales/fi.json b/app/soapbox/locales/fi.json
index 673d2baf7..803fec702 100644
--- a/app/soapbox/locales/fi.json
+++ b/app/soapbox/locales/fi.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Tapahtui odottamaton virhe.",
   "alert.unexpected.title": "Hups!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Ensi kerralla voit ohittaa tämän painamalla {combo}",
   "bundle_column_error.body": "Jokin meni vikaan komponenttia ladattaessa.",
   "bundle_column_error.retry": "Yritä uudestaan",
diff --git a/app/soapbox/locales/fr.json b/app/soapbox/locales/fr.json
index a07f052cf..191b73df4 100644
--- a/app/soapbox/locales/fr.json
+++ b/app/soapbox/locales/fr.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Une erreur inattendue s’est produite.",
   "alert.unexpected.title": "Oups !",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Vous pouvez appuyer sur {combo} pour passer ceci, la prochaine fois",
   "bundle_column_error.body": "Une erreur s’est produite lors du chargement de ce composant.",
   "bundle_column_error.retry": "Réessayer",
diff --git a/app/soapbox/locales/ga.json b/app/soapbox/locales/ga.json
index 4707b4026..53aa40233 100644
--- a/app/soapbox/locales/ga.json
+++ b/app/soapbox/locales/ga.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "You can press {combo} to skip this next time",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Try again",
diff --git a/app/soapbox/locales/gl.json b/app/soapbox/locales/gl.json
index da128bc21..3a8bdbc56 100644
--- a/app/soapbox/locales/gl.json
+++ b/app/soapbox/locales/gl.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Aconteceu un fallo non agardado.",
   "alert.unexpected.title": "Vaia!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Pulse {combo} para saltar esto a próxima vez",
   "bundle_column_error.body": "Houbo un fallo mentras se cargaba este compoñente.",
   "bundle_column_error.retry": "Inténteo de novo",
diff --git a/app/soapbox/locales/he.json b/app/soapbox/locales/he.json
index a388a52f7..40540221b 100644
--- a/app/soapbox/locales/he.json
+++ b/app/soapbox/locales/he.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "אירעה שגיאה בלתי צפויה.",
   "alert.unexpected.title": "אופס!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "ניתן להקיש {combo} כדי לדלג בפעם הבאה",
   "bundle_column_error.body": "משהו השתבש בעת הצגת הרכיב הזה.",
   "bundle_column_error.retry": "לנסות שוב",
diff --git a/app/soapbox/locales/hi.json b/app/soapbox/locales/hi.json
index 5048e8df1..65c1d5a4a 100644
--- a/app/soapbox/locales/hi.json
+++ b/app/soapbox/locales/hi.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "You can press {combo} to skip this next time",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Try again",
diff --git a/app/soapbox/locales/hr.json b/app/soapbox/locales/hr.json
index 987e3c146..f8167e634 100644
--- a/app/soapbox/locales/hr.json
+++ b/app/soapbox/locales/hr.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Možeš pritisnuti {combo} kako bi ovo preskočio sljedeći put",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Try again",
diff --git a/app/soapbox/locales/hu.json b/app/soapbox/locales/hu.json
index ec14a7853..c441d4365 100644
--- a/app/soapbox/locales/hu.json
+++ b/app/soapbox/locales/hu.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Váratlan hiba történt.",
   "alert.unexpected.title": "Hoppá!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Hogy átugord ezt következő alkalommal, használd {combo}",
   "bundle_column_error.body": "Hiba történt a komponens betöltése közben.",
   "bundle_column_error.retry": "Próbáld újra",
diff --git a/app/soapbox/locales/hy.json b/app/soapbox/locales/hy.json
index 01e5f866f..d22bc3856 100644
--- a/app/soapbox/locales/hy.json
+++ b/app/soapbox/locales/hy.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Վա՜յ",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Կարող ես սեղմել {combo}՝ սա հաջորդ անգամ բաց թողնելու համար",
   "bundle_column_error.body": "Այս բաղադրիչը բեռնելու ընթացքում ինչ֊որ բան խափանվեց։",
   "bundle_column_error.retry": "Կրկին փորձել",
diff --git a/app/soapbox/locales/id.json b/app/soapbox/locales/id.json
index f2340500f..3eeec44bf 100644
--- a/app/soapbox/locales/id.json
+++ b/app/soapbox/locales/id.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Terjadi kesalahan yang tidak terduga.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Anda dapat menekan {combo} untuk melewati ini",
   "bundle_column_error.body": "Kesalahan terjadi saat memuat komponen ini.",
   "bundle_column_error.retry": "Coba lagi",
diff --git a/app/soapbox/locales/io.json b/app/soapbox/locales/io.json
index 571d5e454..b748bf25d 100644
--- a/app/soapbox/locales/io.json
+++ b/app/soapbox/locales/io.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Tu povas presar sur {combo} por omisar co en la venonta foyo",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Try again",
diff --git a/app/soapbox/locales/it.json b/app/soapbox/locales/it.json
index a7b74e8b0..01bc0b4dd 100644
--- a/app/soapbox/locales/it.json
+++ b/app/soapbox/locales/it.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Si è verificato un errore inatteso.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Puoi premere {combo} per saltare questo passaggio la prossima volta",
   "bundle_column_error.body": "E' avvenuto un errore durante il caricamento di questo componente.",
   "bundle_column_error.retry": "Riprova",
diff --git a/app/soapbox/locales/ja.json b/app/soapbox/locales/ja.json
index 49130eeb6..a0b5636ed 100644
--- a/app/soapbox/locales/ja.json
+++ b/app/soapbox/locales/ja.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "不明なエラーが発生しました。",
   "alert.unexpected.title": "エラー！",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "次からは{combo}を押せばスキップできます",
   "bundle_column_error.body": "コンポーネントの読み込み中に問題が発生しました。",
   "bundle_column_error.retry": "再試行",
diff --git a/app/soapbox/locales/ka.json b/app/soapbox/locales/ka.json
index 1354efe0e..6002db771 100644
--- a/app/soapbox/locales/ka.json
+++ b/app/soapbox/locales/ka.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "წარმოიშვა მოულოდნელი შეცდომა.",
   "alert.unexpected.title": "უპს!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "შეგიძლიათ დააჭიროთ {combo}-ს რათა შემდეგ ჯერზე გამოტოვოთ ეს",
   "bundle_column_error.body": "ამ კომპონენტის ჩატვირთვისას რაღაც აირია.",
   "bundle_column_error.retry": "სცადეთ კიდევ ერთხელ",
diff --git a/app/soapbox/locales/kk.json b/app/soapbox/locales/kk.json
index 534c9d2cc..8e976bda0 100644
--- a/app/soapbox/locales/kk.json
+++ b/app/soapbox/locales/kk.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Бір нәрсе дұрыс болмады.",
   "alert.unexpected.title": "Өй!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Келесіде өткізіп жіберу үшін басыңыз {combo}",
   "bundle_column_error.body": "Бұл компонентті жүктеген кезде бір қате пайда болды.",
   "bundle_column_error.retry": "Қайтадан көріңіз",
diff --git a/app/soapbox/locales/ko.json b/app/soapbox/locales/ko.json
index ea2cf0a8c..ebe521bb4 100644
--- a/app/soapbox/locales/ko.json
+++ b/app/soapbox/locales/ko.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "예측하지 못한 에러가 발생했습니다.",
   "alert.unexpected.title": "앗!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "{combo}를 누르면 다음부터 이 과정을 건너뛸 수 있습니다",
   "bundle_column_error.body": "컴포넌트를 불러오는 과정에서 문제가 발생했습니다.",
   "bundle_column_error.retry": "다시 시도",
diff --git a/app/soapbox/locales/lt.json b/app/soapbox/locales/lt.json
index 7d0029698..32d8bb3b1 100644
--- a/app/soapbox/locales/lt.json
+++ b/app/soapbox/locales/lt.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "You can press {combo} to skip this next time",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Try again",
diff --git a/app/soapbox/locales/lv.json b/app/soapbox/locales/lv.json
index b0ce483fc..e6d57bbad 100644
--- a/app/soapbox/locales/lv.json
+++ b/app/soapbox/locales/lv.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Negaidīta kļūda.",
   "alert.unexpected.title": "Ups!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Nospied {combo} lai izlaistu šo nākamreiz",
   "bundle_column_error.body": "Kaut kas nogāja greizi ielādējot šo komponenti.",
   "bundle_column_error.retry": "Mēģini vēlreiz",
diff --git a/app/soapbox/locales/mk.json b/app/soapbox/locales/mk.json
index ae9caac15..30f6e0246 100644
--- a/app/soapbox/locales/mk.json
+++ b/app/soapbox/locales/mk.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Неочекувана грешка.",
   "alert.unexpected.title": "Упс!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Кликни {combo} за да го прескокниш ова нареден пат",
   "bundle_column_error.body": "Се случи проблем при вчитувањето.",
   "bundle_column_error.retry": "Обидете се повторно",
diff --git a/app/soapbox/locales/ms.json b/app/soapbox/locales/ms.json
index db44141b3..a5b1baeba 100644
--- a/app/soapbox/locales/ms.json
+++ b/app/soapbox/locales/ms.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "You can press {combo} to skip this next time",
   "bundle_column_error.body": "Something went wrong while loading this component.",
   "bundle_column_error.retry": "Try again",
diff --git a/app/soapbox/locales/nl.json b/app/soapbox/locales/nl.json
index f447dba4d..d7f921fc2 100644
--- a/app/soapbox/locales/nl.json
+++ b/app/soapbox/locales/nl.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Er deed zich een onverwachte fout voor",
   "alert.unexpected.title": "Oeps!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Je kunt {combo} klikken om dit de volgende keer over te slaan",
   "bundle_column_error.body": "Tijdens het laden van dit onderdeel is er iets fout gegaan.",
   "bundle_column_error.retry": "Opnieuw proberen",
diff --git a/app/soapbox/locales/nn.json b/app/soapbox/locales/nn.json
index fd4469101..86d27bcc0 100644
--- a/app/soapbox/locales/nn.json
+++ b/app/soapbox/locales/nn.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Eit uforventa problem har hendt.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Du kan trykke {combo} for å hoppe over dette neste gong",
   "bundle_column_error.body": "Noko gikk gale mens komponent ble nedlasta.",
   "bundle_column_error.retry": "Prøv igjen",
diff --git a/app/soapbox/locales/no.json b/app/soapbox/locales/no.json
index f7fabd61b..2bb83d2b5 100644
--- a/app/soapbox/locales/no.json
+++ b/app/soapbox/locales/no.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "You kan trykke {combo} for å hoppe over dette neste gang",
   "bundle_column_error.body": "Noe gikk galt mens denne komponenten lastet.",
   "bundle_column_error.retry": "Prøv igjen",
diff --git a/app/soapbox/locales/oc.json b/app/soapbox/locales/oc.json
index 6cf263beb..1893233af 100644
--- a/app/soapbox/locales/oc.json
+++ b/app/soapbox/locales/oc.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Una error s’es producha.",
   "alert.unexpected.title": "Ops !",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Podètz botar {combo} per passar aquò lo còp que ven",
   "bundle_column_error.body": "Quicòm a fach mèuca pendent lo cargament d’aqueste compausant.",
   "bundle_column_error.retry": "Tornar ensajar",
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index d41476d26..32d5796b3 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Wystąpił nieoczekiwany błąd.",
   "alert.unexpected.title": "O nie!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Naciśnij {combo}, aby pominąć to następnym razem",
   "bundle_column_error.body": "Coś poszło nie tak podczas ładowania tego składnika.",
   "bundle_column_error.retry": "Spróbuj ponownie",
diff --git a/app/soapbox/locales/pt-BR.json b/app/soapbox/locales/pt-BR.json
index 05d7a77c6..93515e889 100644
--- a/app/soapbox/locales/pt-BR.json
+++ b/app/soapbox/locales/pt-BR.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Um erro inesperado ocorreu.",
   "alert.unexpected.title": "Eita!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Você pode pressionar {combo} para ignorar este diálogo na próxima vez",
   "bundle_column_error.body": "Algo de errado aconteceu enquanto este componente era carregado.",
   "bundle_column_error.retry": "Tente novamente",
diff --git a/app/soapbox/locales/pt.json b/app/soapbox/locales/pt.json
index 3ea7c2466..36f26b321 100644
--- a/app/soapbox/locales/pt.json
+++ b/app/soapbox/locales/pt.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Ocorreu um erro inesperado.",
   "alert.unexpected.title": "Bolas!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Pode clicar {combo} para não voltar a ver",
   "bundle_column_error.body": "Algo de errado aconteceu enquanto este componente era carregado.",
   "bundle_column_error.retry": "Tente de novo",
diff --git a/app/soapbox/locales/ro.json b/app/soapbox/locales/ro.json
index d751dafa6..bba5064a4 100644
--- a/app/soapbox/locales/ro.json
+++ b/app/soapbox/locales/ro.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "A apărut o eroare neașteptată.",
   "alert.unexpected.title": "Hopa!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Poți apăsa {combo} pentru a omite asta data viitoare",
   "bundle_column_error.body": "Ceva nu a funcționat la încărcarea acestui component.",
   "bundle_column_error.retry": "Încearcă din nou",
diff --git a/app/soapbox/locales/ru.json b/app/soapbox/locales/ru.json
index b3a956d4f..c64935910 100644
--- a/app/soapbox/locales/ru.json
+++ b/app/soapbox/locales/ru.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Что-то пошло не так.",
   "alert.unexpected.title": "Ой!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Нажмите {combo}, чтобы пропустить это в следующий раз",
   "bundle_column_error.body": "Что-то пошло не так при загрузке этого компонента.",
   "bundle_column_error.retry": "Попробовать снова",
diff --git a/app/soapbox/locales/sk.json b/app/soapbox/locales/sk.json
index aaed9f420..cd3cc6945 100644
--- a/app/soapbox/locales/sk.json
+++ b/app/soapbox/locales/sk.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Vyskytla sa nečakaná chyba.",
   "alert.unexpected.title": "Ups!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Nabudúce môžeš kliknúť {combo} pre preskočenie",
   "bundle_column_error.body": "Pri načítaní tohto prvku nastala nejaká chyba.",
   "bundle_column_error.retry": "Skús to znova",
diff --git a/app/soapbox/locales/sl.json b/app/soapbox/locales/sl.json
index 76a3b4cf5..1aca4725f 100644
--- a/app/soapbox/locales/sl.json
+++ b/app/soapbox/locales/sl.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Zgodila se je nepričakovana napaka.",
   "alert.unexpected.title": "Uups!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Če želite preskočiti to, lahko pritisnete {combo}",
   "bundle_column_error.body": "Med nalaganjem te komponente je prišlo do napake.",
   "bundle_column_error.retry": "Poskusi ponovno",
diff --git a/app/soapbox/locales/sq.json b/app/soapbox/locales/sq.json
index 1a72a5922..928e0b441 100644
--- a/app/soapbox/locales/sq.json
+++ b/app/soapbox/locales/sq.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Ndodhi një gabim të papritur.",
   "alert.unexpected.title": "Hëm!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Mund të shtypni {combo}, që të anashkalohet kjo herës tjetër",
   "bundle_column_error.body": "Diç shkoi ters teksa ngarkohej ky përbërës.",
   "bundle_column_error.retry": "Riprovoni",
diff --git a/app/soapbox/locales/sr-Latn.json b/app/soapbox/locales/sr-Latn.json
index ee1ef2017..100800a3c 100644
--- a/app/soapbox/locales/sr-Latn.json
+++ b/app/soapbox/locales/sr-Latn.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "An unexpected error occurred.",
   "alert.unexpected.title": "Oops!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Možete pritisnuti {combo} da preskočite ovo sledeći put",
   "bundle_column_error.body": "Nešto je pošlo po zlu prilikom učitavanja ove komponente.",
   "bundle_column_error.retry": "Pokušajte ponovo",
diff --git a/app/soapbox/locales/sr.json b/app/soapbox/locales/sr.json
index 0cdaee5ed..547318180 100644
--- a/app/soapbox/locales/sr.json
+++ b/app/soapbox/locales/sr.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Појавила се неочекивана грешка.",
   "alert.unexpected.title": "Упс!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Можете притиснути {combo} да прескочите ово следећи пут",
   "bundle_column_error.body": "Нешто је пошло по злу приликом учитавања ове компоненте.",
   "bundle_column_error.retry": "Покушајте поново",
diff --git a/app/soapbox/locales/sv.json b/app/soapbox/locales/sv.json
index 62ae1ee83..ee607ff69 100644
--- a/app/soapbox/locales/sv.json
+++ b/app/soapbox/locales/sv.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Ett oväntat fel uppstod.",
   "alert.unexpected.title": "Hoppsan!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Du kan trycka {combo} för att slippa denna nästa gång",
   "bundle_column_error.body": "Något gick fel när du laddade denna komponent.",
   "bundle_column_error.retry": "Försök igen",
diff --git a/app/soapbox/locales/ta.json b/app/soapbox/locales/ta.json
index 19220d8d1..532dcfc9e 100644
--- a/app/soapbox/locales/ta.json
+++ b/app/soapbox/locales/ta.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "எதிர் பாராத பிழை ஏற்பட்டு விட்டது.",
   "alert.unexpected.title": "அச்சச்சோ!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "நீங்கள் அழுத்தவும் {combo} அடுத்த முறை தவிர்க்கவும்",
   "bundle_column_error.body": "இந்த கூறுகளை ஏற்றும்போது ஏதோ தவறு ஏற்பட்டது.",
   "bundle_column_error.retry": "மீண்டும் முயற்சி செய்",
diff --git a/app/soapbox/locales/te.json b/app/soapbox/locales/te.json
index e84b9f2b3..1ad513a83 100644
--- a/app/soapbox/locales/te.json
+++ b/app/soapbox/locales/te.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "అనుకోని తప్పు జరిగినది.",
   "alert.unexpected.title": "అయ్యో!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "మీరు తదుపరిసారి దీనిని దాటవేయడానికి {combo} నొక్కవచ్చు",
   "bundle_column_error.body": "ఈ భాగం లోడ్ అవుతున్నప్పుడు ఏదో తప్పు జరిగింది.",
   "bundle_column_error.retry": "మళ్ళీ ప్రయత్నించండి",
diff --git a/app/soapbox/locales/th.json b/app/soapbox/locales/th.json
index 43b5b359f..ec5a83a56 100644
--- a/app/soapbox/locales/th.json
+++ b/app/soapbox/locales/th.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "เกิดข้อผิดพลาดที่ไม่คาดคิด",
   "alert.unexpected.title": "อุปส์!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "คุณสามารถกด {combo} เพื่อข้ามสิ่งนี้ในครั้งถัดไป",
   "bundle_column_error.body": "มีบางอย่างผิดพลาดขณะโหลดส่วนประกอบนี้",
   "bundle_column_error.retry": "ลองอีกครั้ง",
diff --git a/app/soapbox/locales/tr.json b/app/soapbox/locales/tr.json
index fe06cdf45..746fabb72 100644
--- a/app/soapbox/locales/tr.json
+++ b/app/soapbox/locales/tr.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Beklenmedik bir hata oluştu.",
   "alert.unexpected.title": "Hay aksi!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Bir daha ki sefere {combo} tuşuna basabilirsiniz",
   "bundle_column_error.body": "Bu bileşen yüklenirken bir şeyler ters gitti.",
   "bundle_column_error.retry": "Tekrar deneyin",
diff --git a/app/soapbox/locales/uk.json b/app/soapbox/locales/uk.json
index f88091b35..3c0029834 100644
--- a/app/soapbox/locales/uk.json
+++ b/app/soapbox/locales/uk.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "Трапилась неочікувана помилка.",
   "alert.unexpected.title": "Ой!",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "Ви можете натиснути {combo}, щоб пропустити це наступного разу",
   "bundle_column_error.body": "Щось пішло не так під час завантаження компоненту.",
   "bundle_column_error.retry": "Спробуйте ще раз",
diff --git a/app/soapbox/locales/zh-CN.json b/app/soapbox/locales/zh-CN.json
index 9cd2c9206..e5ebcf540 100644
--- a/app/soapbox/locales/zh-CN.json
+++ b/app/soapbox/locales/zh-CN.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "发生了意外错误。",
   "alert.unexpected.title": "哎呀！",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "下次按住 {combo} 即可跳过此提示",
   "bundle_column_error.body": "载入这个组件时发生了错误。",
   "bundle_column_error.retry": "重试",
diff --git a/app/soapbox/locales/zh-HK.json b/app/soapbox/locales/zh-HK.json
index 920663708..f288d2d62 100644
--- a/app/soapbox/locales/zh-HK.json
+++ b/app/soapbox/locales/zh-HK.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "發生不可預期的錯誤。",
   "alert.unexpected.title": "噢！",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "如你想在下次路過這顯示，請按{combo}，",
   "bundle_column_error.body": "加載本組件出錯。",
   "bundle_column_error.retry": "重試",
diff --git a/app/soapbox/locales/zh-TW.json b/app/soapbox/locales/zh-TW.json
index 3c74a08bb..f5df7fe35 100644
--- a/app/soapbox/locales/zh-TW.json
+++ b/app/soapbox/locales/zh-TW.json
@@ -43,6 +43,13 @@
   "account_gallery.none": "No media to show.",
   "alert.unexpected.message": "發生了非預期的錯誤。",
   "alert.unexpected.title": "哎呀！",
+  "audio.close": "Close audio",
+  "audio.expand": "Expand audio",
+  "audio.hide": "Hide audio",
+  "audio.mute": "Mute",
+  "audio.pause": "Pause",
+  "audio.play": "Play",
+  "audio.unmute": "Unmute",
   "boost_modal.combo": "下次您可以按 {combo} 跳過",
   "bundle_column_error.body": "載入此元件時發生錯誤。",
   "bundle_column_error.retry": "重試",

From aa35e2ec46911200aa6c10506a5f2ed7b846bf2a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Jul 2020 18:16:41 -0500
Subject: [PATCH 18/21] Fix old soapbox.json failing

---
 app/soapbox/components/sidebar_menu.js | 5 +++--
 static/instance/soapbox.example.json   | 6 ------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index 6c9a6e7ad..e88d84b8c 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/app/soapbox/components/sidebar_menu.js
@@ -40,12 +40,13 @@ const messages = defineMessages({
 const mapStateToProps = state => {
   const me = state.get('me');
   const getAccount = makeGetAccount();
-  const patron = state.getIn(['soapbox', 'extensions', 'patron'], ImmutableMap());
+  const patronEnabled = state.getIn(['soapbox', 'extensions', 'patron', 'enabled']);
+  const patronUrl = state.getIn(['soapbox', 'extensions', 'patron', 'baseUrl']);
 
   return {
     account: getAccount(state, me),
     sidebarOpen: state.get('sidebar').sidebarOpen,
-    patronUrl: patron.get('enabled') && patron.get('baseUrl'),
+    patronUrl: patronEnabled && patronUrl,
     isStaff: isStaff(state.getIn(['accounts', me])),
   };
 };
diff --git a/static/instance/soapbox.example.json b/static/instance/soapbox.example.json
index 540fc51ed..9b6255fa7 100644
--- a/static/instance/soapbox.example.json
+++ b/static/instance/soapbox.example.json
@@ -12,12 +12,6 @@
       "url": "https://blog.example.com"
     }]
   },
-  "extensions": {
-    "patron": {
-      "enabled": false,
-      "baseUrl": "https://patron.example.com"
-    }
-  },
   "defaultSettings": {
     "autoPlayGif": false,
     "themeMode": "light"

From 29f26745e2e4b6fce723aa321ec724d014853a15 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Jul 2020 18:39:17 -0500
Subject: [PATCH 19/21] Fix linter :(

---
 app/soapbox/components/sidebar_menu.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index e88d84b8c..69482475e 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/app/soapbox/components/sidebar_menu.js
@@ -15,7 +15,6 @@ import { shortNumberFormat } from '../utils/numbers';
 import { isStaff } from '../utils/accounts';
 import { makeGetAccount } from '../selectors';
 import { logOut } from 'soapbox/actions/auth';
-import { Map as ImmutableMap } from 'immutable';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },

From 6d9a2fab27f43335b3c67bd6d4d1ce4525e6e5b3 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Fri, 3 Jul 2020 00:06:26 +0000
Subject: [PATCH 20/21] Update detailed_status.js

---
 app/soapbox/features/status/components/detailed_status.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index 6d38e06e9..e82fb5990 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/app/soapbox/features/status/components/detailed_status.js
@@ -121,7 +121,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             onToggleVisibility={this.props.onToggleMediaVisibility}
           />
         );
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
         const audio = status.getIn(['media_attachments', 0]);
 
         media = (

From b43b306a93b0b8479c1f1ef2ffd420a2c7df9447 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Jul 2020 23:20:32 -0500
Subject: [PATCH 21/21] Repost avatar positioning fix

---
 app/styles/accounts.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index da3025186..b25f0d477 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -399,6 +399,10 @@ a .account__avatar {
     bottom: 0;
     right: 0;
     z-index: 1;
+
+    &.still-image {
+      position: absolute;
+    }
   }
 }