Audio player work (change of sensitive content handling)

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}
               />
             )}

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 = () => {
+  toggleWarning = () => {
-    if (this.props.onToggleVisibility) {
+    this.setState({ revealed: !this.state.revealed });
-      this.props.onToggleVisibility();
-    } else {
-      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 })}>
+        <div className={classNames('audio-player__spoiler-warning', { 'spoiler-button--hidden': revealed })}>
-          <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
+          <span className='audio-player__spoiler-warning__label'><Icon id='warning' fixedWidth /> {warning}</span>
-            <span className='spoiler-button__overlay__label'>{warning}</span>
+          <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleWarning}><Icon id='times' fixedWidth /></button>
-          </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>

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' }}

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

@@ -48,7 +48,7 @@ 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 = (

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();

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"
       }
     ],

app/soapbox/locales/en.json

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

app/soapbox/reducers/media_attachments.js

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

app/styles/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;