diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 11c81765b..b2d9acebc 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -625,6 +625,10 @@ class Status extends ImmutablePureComponent { height={110} cacheWidth={this.props.cacheMediaWidth} deployPictureInPicture={this.handleDeployPictureInPicture} + sensitive={status.get('sensitive')} + blurhash={attachment.get('blurhash')} + visible={this.state.showMedia} + onToggleVisibility={this.handleToggleMediaVisibility} /> )} , diff --git a/app/javascript/flavours/glitch/features/audio/index.js b/app/javascript/flavours/glitch/features/audio/index.js index ac0468f70..8fa64342e 100644 --- a/app/javascript/flavours/glitch/features/audio/index.js +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/features/video'; import Icon from 'flavours/glitch/components/icon'; import classNames from 'classnames'; @@ -8,6 +8,9 @@ import { throttle } from 'lodash'; import { getPointerPosition, fileNameFromURL } from 'flavours/glitch/features/video'; import { debounce } from 'lodash'; import Visualizer from './visualizer'; +import { displayMedia, useBlurhash } from 'flavours/glitch/util/initial_state'; +import Blurhash from 'flavours/glitch/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, }; } @@ -132,6 +143,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); @@ -195,6 +212,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); @@ -439,13 +464,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) && + />}
@@ -514,6 +561,7 @@ class Audio extends React.PureComponent {
+ {!editable && } diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index 301a2add6..91dc5ba20 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -165,7 +165,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} />, ); mediaIcons.push('music'); diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 8a551be73..9776e2265 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -389,6 +389,13 @@ height: 100%; } + &.inactive { + audio, + .video-player__controls { + visibility: hidden; + } + } + .video-player__volume::before, .video-player__seek::before { background: currentColor;