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 (
-
- {revealed &&
}
+ />
-
-
+
+ {warning}
+
@@ -393,10 +371,6 @@ class Audio extends React.PureComponent {
{link && {link}}
-
-
- {}
-
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 {
)}
);
- } 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 = (
{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;