From a95f8271beba85ead81487f6e7c4ba372d4b454c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 14 Apr 2018 19:00:30 +0200 Subject: [PATCH 1/5] Revert some glitch-specific refactoring In order to keep my sanity when porting changes between glitch-soc and upstream. --- .../glitch/components/media_gallery.js | 82 +++++++------------ 1 file changed, 29 insertions(+), 53 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 309308d25ad..a2219378eba 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -225,21 +225,35 @@ export default class MediaGallery extends React.PureComponent { this.props.onOpenMedia(this.props.media, index); } + isStandaloneEligible() { + const { media, standalone } = this.props; + return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); + } + render () { - const { - handleClick, - handleOpen, - } = this; - const { - fullwidth, - intl, - letterbox, - media, - sensitive, - standalone, - } = this.props; + const { media, intl, sensitive, letterbox, fullwidth } = this.props; const { visible } = this.state; const size = media.take(4).size; + + let children; + + if (!visible) { + let warning = ; + + children = ( + + ); + } else { + if (this.isStandaloneEligible()) { + children = ; + } else { + children = media.take(4).map((attachment, i) => ); + } + } + const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth }); return ( @@ -248,7 +262,7 @@ export default class MediaGallery extends React.PureComponent {
@@ -259,46 +273,8 @@ export default class MediaGallery extends React.PureComponent { ) : null}
) : null} - {function () { - switch (true) { - case !visible: - return ( - - ); - case standalone && media.size === 1 && !!media.getIn([0, 'meta', 'small', 'aspect']): - return ( - - ); - default: - return media.take(4).map( - (attachment, i) => ( - - ) - ); - } - }()} + + {children} ); } From f1e25b672a800b2536624d9bee2e8badf50566f2 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 14 Apr 2018 19:38:00 +0200 Subject: [PATCH 2/5] Use javascript to set MediaGallery height automatically --- .../glitch/components/media_gallery.js | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index a2219378eba..84bf4e39f75 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -225,6 +225,15 @@ export default class MediaGallery extends React.PureComponent { this.props.onOpenMedia(this.props.media, index); } + handleRef = (node) => { + if (node && this.isStandaloneEligible()) { + // offsetWidth triggers a layout, so only calculate when we need to + this.setState({ + width: node.offsetWidth, + }); + } + } + isStandaloneEligible() { const { media, standalone } = this.props; return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); @@ -232,11 +241,21 @@ export default class MediaGallery extends React.PureComponent { render () { const { media, intl, sensitive, letterbox, fullwidth } = this.props; - const { visible } = this.state; + const { width, visible } = this.state; const size = media.take(4).size; let children; + const style = {}; + + if (this.isStandaloneEligible()) { + if (width) { + style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); + } + } else if (width) { + style.height = width / (16/9); + } + if (!visible) { let warning = ; @@ -257,7 +276,7 @@ export default class MediaGallery extends React.PureComponent { const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth }); return ( -
+
{visible ? (
Date: Sat, 14 Apr 2018 20:31:47 +0200 Subject: [PATCH 3/5] [Glitch] Center thumbnails on focus point Port the display part of the following commits to glitch-soc: * 90f12f2e5a41115a9a756f9dd38054736080d4f9 * b170627ceb8838c358aef1fcca9673ce4aa61ab8 * 11697d68942db7b97a4c7384e4fb4148a97b9122 * 56eb5c3f344f0342ac6f26a05748bc21c585a729 --- .../glitch/components/media_gallery.js | 24 ++++++++++++++----- .../flavours/glitch/features/video/index.js | 6 ++--- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 84bf4e39f75..85949d49d1f 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -136,16 +136,21 @@ class Item extends React.PureComponent { let thumbnail = ''; if (attachment.get('type') === 'image') { - const previewUrl = attachment.get('preview_url'); + const previewUrl = attachment.get('preview_url'); const previewWidth = attachment.getIn(['meta', 'small', 'width']); - const originalUrl = attachment.get('url'); - const originalWidth = attachment.getIn(['meta', 'original', 'width']); + const originalUrl = attachment.get('url'); + const originalWidth = attachment.getIn(['meta', 'original', 'width']); const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number'; const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null; - const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null; + const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null; + + const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; + const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; + const x = ((focusX / 2) + .5) * 100; + const y = ((focusY / -2) + .5) * 100; thumbnail = ( - {attachment.get('description')} + {attachment.get('description')} ); } else if (attachment.get('type') === 'gifv') { @@ -226,7 +238,7 @@ export default class MediaGallery extends React.PureComponent { } handleRef = (node) => { - if (node && this.isStandaloneEligible()) { + if (node /*&& this.isStandaloneEligible()*/) { // offsetWidth triggers a layout, so only calculate when we need to this.setState({ width: node.offsetWidth, diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 56ee9c20ca6..4cb5db7f577 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -29,7 +29,7 @@ const formatTime = secondsNum => { return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`; }; -const findElementPosition = el => { +export const findElementPosition = el => { let box; if (el.getBoundingClientRect && el.parentNode) { @@ -60,7 +60,7 @@ const findElementPosition = el => { }; }; -const getPointerPosition = (el, event) => { +export const getPointerPosition = (el, event) => { const position = {}; const box = findElementPosition(el); const boxW = el.offsetWidth; @@ -76,7 +76,7 @@ const getPointerPosition = (el, event) => { pageY = event.changedTouches[0].pageY; } - position.y = Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH)); + position.y = Math.max(0, Math.min(1, (pageY - boxY) / boxH)); position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW)); return position; From 52229405ed9c2ff531c75b42fa220cb789dd0600 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 14 Apr 2018 21:22:13 +0200 Subject: [PATCH 4/5] [Glitch] Make detailed status' media gallery standalone --- .../glitch/features/status/components/detailed_status.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 e7c26d01391..066499da8c7 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import Avatar from 'flavours/glitch/components/avatar'; import DisplayName from 'flavours/glitch/components/display_name'; import StatusContent from 'flavours/glitch/components/status_content'; -import StatusGallery from 'flavours/glitch/components/media_gallery'; +import MediaGallery from 'flavours/glitch/components/media_gallery'; import AttachmentList from 'flavours/glitch/components/attachment_list'; import { Link } from 'react-router-dom'; import { FormattedDate, FormattedNumber } from 'react-intl'; @@ -69,7 +69,8 @@ export default class DetailedStatus extends ImmutablePureComponent { mediaIcon = 'video-camera'; } else { media = ( - Date: Sun, 15 Apr 2018 20:58:24 +0200 Subject: [PATCH 5/5] Only compute height dynamically for standalone media This prevents changing the status' height and triggering jumps in the TL --- .../flavours/glitch/components/media_gallery.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 85949d49d1f..5169ead5aaf 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -238,7 +238,7 @@ export default class MediaGallery extends React.PureComponent { } handleRef = (node) => { - if (node /*&& this.isStandaloneEligible()*/) { + if (node && this.isStandaloneEligible()) { // offsetWidth triggers a layout, so only calculate when we need to this.setState({ width: node.offsetWidth, @@ -260,12 +260,8 @@ export default class MediaGallery extends React.PureComponent { const style = {}; - if (this.isStandaloneEligible()) { - if (width) { - style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); - } - } else if (width) { - style.height = width / (16/9); + if (this.isStandaloneEligible() && width) { + style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); } if (!visible) {