From e6979aa6d43f24ab290c27f596fcd71fcc0ac03a Mon Sep 17 00:00:00 2001 From: Rens Groothuijsen Date: Sat, 13 Aug 2022 15:39:05 +0200 Subject: [PATCH] Add warning for sensitive audio posts (#17885) --- app/javascript/mastodon/components/status.js | 4 ++ .../mastodon/features/audio/index.js | 64 ++++++++++++++++--- .../status/components/detailed_status.js | 4 ++ .../styles/mastodon/components.scss | 7 ++ 4 files changed, 71 insertions(+), 8 deletions(-) diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 238a0d734..dee935a6c 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -409,6 +409,10 @@ class Status extends ImmutablePureComponent { height={110} cacheWidth={this.props.cacheMediaWidth} deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined} + sensitive={status.get('sensitive')} + blurhash={attachment.get('blurhash')} + visible={this.state.showMedia} + onToggleVisibility={this.handleToggleMediaVisibility} /> )} diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js index c47f55dd1..00854d0e4 100644 --- a/app/javascript/mastodon/features/audio/index.js +++ b/app/javascript/mastodon/features/audio/index.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { formatTime } from 'mastodon/features/video'; import Icon from 'mastodon/components/icon'; import classNames from 'classnames'; @@ -8,6 +8,9 @@ import { throttle } from 'lodash'; import { getPointerPosition, fileNameFromURL } from 'mastodon/features/video'; import { debounce } from 'lodash'; import Visualizer from './visualizer'; +import { displayMedia, useBlurhash } from '../../initial_state'; +import Blurhash from '../../components/blurhash'; +import { is } from 'immutable'; const messages = defineMessages({ play: { id: 'video.play', defaultMessage: 'Play' }, @@ -15,6 +18,7 @@ const messages = defineMessages({ mute: { id: 'video.mute', defaultMessage: 'Mute sound' }, unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' }, download: { id: 'video.download', defaultMessage: 'Download file' }, + hide: { id: 'audio.hide', defaultMessage: 'Hide audio' }, }); const TICK_SIZE = 10; @@ -30,10 +34,14 @@ class Audio extends React.PureComponent { duration: PropTypes.number, width: PropTypes.number, height: PropTypes.number, + sensitive: PropTypes.bool, editable: PropTypes.bool, fullscreen: PropTypes.bool, intl: PropTypes.object.isRequired, + blurhash: PropTypes.string, cacheWidth: PropTypes.func, + visible: PropTypes.bool, + onToggleVisibility: PropTypes.func, backgroundColor: PropTypes.string, foregroundColor: PropTypes.string, accentColor: PropTypes.string, @@ -53,6 +61,7 @@ class Audio extends React.PureComponent { muted: false, volume: 0.5, dragging: false, + revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'), }; constructor (props) { @@ -78,6 +87,8 @@ class Audio extends React.PureComponent { backgroundColor: this.props.backgroundColor, foregroundColor: this.props.foregroundColor, accentColor: this.props.accentColor, + sensitive: this.props.sensitive, + visible: this.props.visible, }; } @@ -126,6 +137,12 @@ class Audio extends React.PureComponent { } } + componentWillReceiveProps (nextProps) { + if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) { + this.setState({ revealed: nextProps.visible }); + } + } + componentWillUnmount () { window.removeEventListener('scroll', this.handleScroll); window.removeEventListener('resize', this.handleResize); @@ -189,6 +206,14 @@ class Audio extends React.PureComponent { }); } + toggleReveal = () => { + if (this.props.onToggleVisibility) { + this.props.onToggleVisibility(); + } else { + this.setState({ revealed: !this.state.revealed }); + } + } + handleVolumeMouseDown = e => { document.addEventListener('mousemove', this.handleMouseVolSlide, true); document.addEventListener('mouseup', this.handleVolumeMouseUp, true); @@ -433,13 +458,29 @@ class Audio extends React.PureComponent { } render () { - const { src, intl, alt, editable, autoPlay } = this.props; - const { paused, muted, volume, currentTime, duration, buffer, dragging } = this.state; + const { src, intl, alt, editable, autoPlay, sensitive, blurhash } = this.props; + const { paused, muted, volume, currentTime, duration, buffer, dragging, revealed } = this.state; const progress = Math.min((currentTime / duration) * 100, 100); + let warning; + if (sensitive) { + warning = ; + } else { + warning = ; + } + return ( -
-
+ + {(revealed || editable) && + />}
@@ -508,6 +555,7 @@ class Audio extends React.PureComponent {
+ {!editable && } diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 13bce1b83..5c43c2038 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -138,7 +138,11 @@ class DetailedStatus extends ImmutablePureComponent { backgroundColor={attachment.getIn(['meta', 'colors', 'background'])} foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])} accentColor={attachment.getIn(['meta', 'colors', 'accent'])} + sensitive={status.get('sensitive')} + visible={this.props.showMedia} + blurhash={attachment.get('blurhash')} height={150} + onToggleVisibility={this.props.onToggleMediaVisibility} /> ); } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 3e202841b..a0a39812b 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5939,6 +5939,13 @@ a.status-card.compact:hover { height: 100%; } + &.inactive { + audio, + .video-player__controls { + visibility: hidden; + } + } + .video-player__volume::before, .video-player__seek::before { background: currentColor;