diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 6928af6d6b..309308d25a 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -6,7 +6,7 @@ import IconButton from './icon_button'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { isIOS } from 'flavours/glitch/util/is_mobile'; import classNames from 'classnames'; -import { autoPlayGif } from 'flavours/glitch/util/initial_state'; +import { autoPlayGif, displaySensitiveMedia } from 'flavours/glitch/util/initial_state'; const messages = defineMessages({ hidden: { @@ -208,7 +208,7 @@ export default class MediaGallery extends React.PureComponent { }; state = { - visible: !this.props.sensitive, + visible: !this.props.sensitive || displaySensitiveMedia, }; componentWillReceiveProps (nextProps) { @@ -265,6 +265,7 @@ export default class MediaGallery extends React.PureComponent { return ( @@ -290,10 +310,10 @@ export default class Video extends React.PureComponent {
- - + + - {!onCloseVideo && } + {!onCloseVideo && } {(detailed || fullscreen) && @@ -305,9 +325,9 @@ export default class Video extends React.PureComponent {
- {(!fullscreen && onOpenVideo) && } - {onCloseVideo && } - + {(!fullscreen && onOpenVideo) && } + {onCloseVideo && } +
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 03e7aba67f..e62f641763 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -161,6 +161,12 @@ max-width: 100vw; max-height: 100vh; position: relative; +} + +.media-modal { + width: 100%; + height: 100%; + position: relative; .extended-video-player { width: 100%; @@ -176,12 +182,6 @@ } } -.media-modal { - width: 100%; - height: 100%; - position: relative; -} - .media-modal__closer { position: absolute; top: 0; @@ -307,7 +307,7 @@ &.inline { video { - object-fit: cover; + object-fit: contain; position: relative; top: 50%; transform: translateY(-50%); diff --git a/app/javascript/flavours/glitch/util/initial_state.js b/app/javascript/flavours/glitch/util/initial_state.js index ab502f9d43..2c4ab90916 100644 --- a/app/javascript/flavours/glitch/util/initial_state.js +++ b/app/javascript/flavours/glitch/util/initial_state.js @@ -13,6 +13,7 @@ const getMeta = (prop) => initialState && initialState.meta && initialState.meta export const reduceMotion = getMeta('reduce_motion'); export const autoPlayGif = getMeta('auto_play_gif'); +export const displaySensitiveMedia = getMeta('display_sensitive_media'); export const unfollowModal = getMeta('unfollow_modal'); export const boostModal = getMeta('boost_modal'); export const favouriteModal = getMeta('favourite_modal');