From dfe8abb8cdb64e88cd7204ad52813e38fb4030a8 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 14 Apr 2018 12:27:14 +0200 Subject: [PATCH 1/3] [Glitch] Handle preference to always display sensitive media Port the UI part of 76f3d5d16be2fb97d2252909589510165ec05e12 to glitch-soc --- app/javascript/flavours/glitch/components/media_gallery.js | 4 ++-- app/javascript/flavours/glitch/features/video/index.js | 3 ++- app/javascript/flavours/glitch/util/initial_state.js | 1 + 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 6928af6d6b..3b71a74754 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) { diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index ef19a85ec5..c6b3f50318 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -4,6 +4,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { throttle } from 'lodash'; import classNames from 'classnames'; import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen'; +import { displaySensitiveMedia } from 'flavours/glitch/util/initial_state'; const messages = defineMessages({ play: { id: 'video.play', defaultMessage: 'Play' }, @@ -108,7 +109,7 @@ export default class Video extends React.PureComponent { fullscreen: false, hovered: false, muted: false, - revealed: !this.props.sensitive, + revealed: !this.props.sensitive || displaySensitiveMedia, }; setPlayerRef = c => { 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'); From c5dd4ed1d51a1189fa73d78cfec0f97a19a84a90 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 14 Apr 2018 12:30:55 +0200 Subject: [PATCH 2/3] [Glitch] Fix media button type Port ecdac9017efceb77da155bf85d5e7d6084382da2 to glitch-soc --- .../flavours/glitch/components/media_gallery.js | 1 + .../flavours/glitch/features/video/index.js | 14 +++++++------- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 3b71a74754..309308d25a 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -265,6 +265,7 @@ export default class MediaGallery extends React.PureComponent { return ( @@ -291,10 +291,10 @@ export default class Video extends React.PureComponent {
- - + + - {!onCloseVideo && } + {!onCloseVideo && } {(detailed || fullscreen) && @@ -306,9 +306,9 @@ export default class Video extends React.PureComponent {
- {(!fullscreen && onOpenVideo) && } - {onCloseVideo && } - + {(!fullscreen && onOpenVideo) && } + {onCloseVideo && } +
From 5d96c5ac41f4ae0c43b2cce53cb30b4e76ec5312 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 14 Apr 2018 17:14:04 +0200 Subject: [PATCH 3/3] [Glitch] Responsively enforce 16:9 ratio on video thumbnails in web UI Port the video-player part of 036dd98abb1fe6ae1d25ff0f3ecffe4dd9a79ea3 to glitch-soc. MediaGallery part ignored since it has diverged quite a bit. This fixes #423 --- .../flavours/glitch/components/status.js | 1 + .../status/components/detailed_status.js | 1 + .../flavours/glitch/features/video/index.js | 25 ++++++++++++++++--- .../glitch/styles/components/media.scss | 2 +- 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 2fcc44882d..eb621d5d74 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -326,6 +326,7 @@ export default class Status extends ImmutablePureComponent { {Component => ( { this.player = c; + + if (c) { + this.setState({ + containerWidth: c.offsetWidth, + }); + } } setVideoRef = c => { @@ -247,12 +255,23 @@ export default class Video extends React.PureComponent { } render () { - const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props; - const { currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; + const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props; + const { containerWidth, currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; const progress = (currentTime / duration) * 100; + const playerStyle = {}; + + let { width, height } = this.props; + + if (inline && containerWidth) { + width = containerWidth; + height = containerWidth / (16/9); + + playerStyle.width = width; + playerStyle.height = height; + } return ( -
+