diff options
author | Thibaut Girka <thib@sitedethib.com> | 2019-02-09 20:54:11 +0100 |
---|---|---|
committer | ThibG <thib@sitedethib.com> | 2019-02-10 22:54:25 +0100 |
commit | 049c9a3b9711ed203855d18a9a549e65e164ec59 (patch) | |
tree | 3e53b7d57dd46b7cfa6e67fdce311e0cd5e10b4c /app/javascript/flavours/glitch/features | |
parent | 68f3d003d6e841c864330fd5e7bcecadcc9b9178 (diff) |
Avoid two-step rendering of statuses as much as possible
Cache width shared by Video player, MediaGallery and Cards at the ScrollableList level, pass it down through StatusList and Notifications.
Diffstat (limited to 'app/javascript/flavours/glitch/features')
3 files changed, 21 insertions, 3 deletions
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification.js b/app/javascript/flavours/glitch/features/notifications/components/notification.js index 21c55accc..daafe3507 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/notification.js +++ b/app/javascript/flavours/glitch/features/notifications/components/notification.js @@ -18,6 +18,9 @@ export default class Notification extends ImmutablePureComponent { onMention: PropTypes.func.isRequired, getScrollPosition: PropTypes.func, updateScrollBottom: PropTypes.func, + cacheMediaWidth: PropTypes.func, + cachedMediaWidth: PropTypes.number, + onUnmount: PropTypes.func, }; render () { @@ -57,6 +60,9 @@ export default class Notification extends ImmutablePureComponent { contextType='notifications' getScrollPosition={getScrollPosition} updateScrollBottom={updateScrollBottom} + cachedMediaWidth={this.props.cachedMediaWidth} + cacheMediaWidth={this.props.cacheMediaWidth} + onUnmount={this.props.onUnmount} withDismiss /> ); @@ -75,6 +81,9 @@ export default class Notification extends ImmutablePureComponent { onMention={onMention} getScrollPosition={getScrollPosition} updateScrollBottom={updateScrollBottom} + cachedMediaWidth={this.props.cachedMediaWidth} + cacheMediaWidth={this.props.cacheMediaWidth} + onUnmount={this.props.onUnmount} withDismiss /> ); @@ -93,6 +102,9 @@ export default class Notification extends ImmutablePureComponent { onMention={onMention} getScrollPosition={getScrollPosition} updateScrollBottom={updateScrollBottom} + cachedMediaWidth={this.props.cachedMediaWidth} + cacheMediaWidth={this.props.cacheMediaWidth} + onUnmount={this.props.onUnmount} withDismiss /> ); diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index 1e1604d5c..e405a5ef0 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -60,6 +60,8 @@ export default class Card extends React.PureComponent { maxDescription: PropTypes.number, onOpenMedia: PropTypes.func.isRequired, compact: PropTypes.bool, + defaultWidth: PropTypes.number, + cacheWidth: PropTypes.func, }; static defaultProps = { @@ -68,7 +70,7 @@ export default class Card extends React.PureComponent { }; state = { - width: 280, + width: this.props.defaultWidth || 280, embedded: false, }; @@ -111,6 +113,7 @@ export default class Card extends React.PureComponent { setRef = c => { if (c) { + if (this.props.cacheWidth) this.props.cacheWidth(c.offsetWidth); this.setState({ width: c.offsetWidth }); } } @@ -133,7 +136,7 @@ export default class Card extends React.PureComponent { } render () { - const { card, maxDescription, compact } = this.props; + const { card, maxDescription, compact, defaultWidth } = this.props; const { width, embedded } = this.state; if (card === null) { diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index d8e8791a7..a6f651db6 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -103,6 +103,7 @@ export default class Video extends React.PureComponent { inline: PropTypes.bool, preventPlayback: PropTypes.bool, intl: PropTypes.object.isRequired, + cacheWidth: PropTypes.func, }; state = { @@ -111,7 +112,7 @@ export default class Video extends React.PureComponent { volume: 0.5, paused: true, dragging: false, - containerWidth: false, + containerWidth: this.props.width, fullscreen: false, hovered: false, muted: false, @@ -131,6 +132,7 @@ export default class Video extends React.PureComponent { this.player = c; if (c && c.offsetWidth && c.offsetWidth != this.state.containerWidth) { + if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth); this.setState({ containerWidth: c.offsetWidth, }); @@ -275,6 +277,7 @@ export default class Video extends React.PureComponent { componentDidUpdate (prevProps) { if (this.player && this.player.offsetWidth && this.player.offsetWidth != this.state.containerWidth && !this.state.fullscreen) { + if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth); this.setState({ containerWidth: this.player.offsetWidth, }); |