diff --git a/app/javascript/mastodon/actions/dropdown_menu.js b/app/javascript/mastodon/actions/dropdown_menu.js index 14f2939c78..fb6e55612e 100644 --- a/app/javascript/mastodon/actions/dropdown_menu.js +++ b/app/javascript/mastodon/actions/dropdown_menu.js @@ -1,8 +1,8 @@ export const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN'; export const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE'; -export function openDropdownMenu(id, placement, keyboard) { - return { type: DROPDOWN_MENU_OPEN, id, placement, keyboard }; +export function openDropdownMenu(id, placement, keyboard, scroll_key) { + return { type: DROPDOWN_MENU_OPEN, id, placement, keyboard, scroll_key }; } export function closeDropdownMenu(id) { diff --git a/app/javascript/mastodon/components/blurhash.js b/app/javascript/mastodon/components/blurhash.js new file mode 100644 index 0000000000..2af5cfc568 --- /dev/null +++ b/app/javascript/mastodon/components/blurhash.js @@ -0,0 +1,65 @@ +// @ts-check + +import { decode } from 'blurhash'; +import React, { useRef, useEffect } from 'react'; +import PropTypes from 'prop-types'; + +/** + * @typedef BlurhashPropsBase + * @property {string?} hash Hash to render + * @property {number} width + * Width of the blurred region in pixels. Defaults to 32 + * @property {number} [height] + * Height of the blurred region in pixels. Defaults to width + * @property {boolean} [dummy] + * Whether dummy mode is enabled. If enabled, nothing is rendered + * and canvas left untouched + */ + +/** @typedef {JSX.IntrinsicElements['canvas'] & BlurhashPropsBase} BlurhashProps */ + +/** + * Component that is used to render blurred of blurhash string + * + * @param {BlurhashProps} param1 Props of the component + * @returns Canvas which will render blurred region element to embed + */ +function Blurhash({ + hash, + width = 32, + height = width, + dummy = false, + ...canvasProps +}) { + const canvasRef = /** @type {import('react').MutableRefObject} */ (useRef()); + + useEffect(() => { + const { current: canvas } = canvasRef; + canvas.width = canvas.width; // resets canvas + + if (dummy || !hash) return; + + try { + const pixels = decode(hash, width, height); + const ctx = canvas.getContext('2d'); + const imageData = new ImageData(pixels, width, height); + + ctx.putImageData(imageData, 0, 0); + } catch (err) { + console.error('Blurhash decoding failure', { err, hash }); + } + }, [dummy, hash, width, height]); + + return ( + + ); +} + +Blurhash.propTypes = { + hash: PropTypes.string.isRequired, + width: PropTypes.number, + height: PropTypes.number, + dummy: PropTypes.bool, +}; + +export default React.memo(Blurhash); diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 0ec8661380..0a8f425850 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -7,8 +7,8 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { isIOS } from '../is_mobile'; import classNames from 'classnames'; import { autoPlayGif, cropImages, displayMedia, useBlurhash } from '../initial_state'; -import { decode } from 'blurhash'; import { debounce } from 'lodash'; +import Blurhash from 'mastodon/components/blurhash'; const messages = defineMessages({ toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Hide {number, plural, one {image} other {images}}' }, @@ -74,36 +74,6 @@ class Item extends React.PureComponent { e.stopPropagation(); } - componentDidMount () { - if (this.props.attachment.get('blurhash')) { - this._decode(); - } - } - - componentDidUpdate (prevProps) { - if (prevProps.attachment.get('blurhash') !== this.props.attachment.get('blurhash') && this.props.attachment.get('blurhash')) { - this._decode(); - } - } - - _decode () { - if (!useBlurhash) return; - - const hash = this.props.attachment.get('blurhash'); - const pixels = decode(hash, 32, 32); - - if (pixels) { - const ctx = this.canvas.getContext('2d'); - const imageData = new ImageData(pixels, 32, 32); - - ctx.putImageData(imageData, 0, 0); - } - } - - setCanvasRef = c => { - this.canvas = c; - } - handleImageLoad = () => { this.setState({ loaded: true }); } @@ -166,7 +136,11 @@ class Item extends React.PureComponent { return (
- +
); @@ -232,7 +206,13 @@ class Item extends React.PureComponent { return (
- + {visible && thumbnail}
); diff --git a/app/javascript/mastodon/components/scrollable_list.js b/app/javascript/mastodon/components/scrollable_list.js index 7eb0910c90..35740f226a 100644 --- a/app/javascript/mastodon/components/scrollable_list.js +++ b/app/javascript/mastodon/components/scrollable_list.js @@ -10,10 +10,18 @@ import { List as ImmutableList } from 'immutable'; import classNames from 'classnames'; import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../features/ui/util/fullscreen'; import LoadingIndicator from './loading_indicator'; +import { connect } from 'react-redux'; const MOUSE_IDLE_DELAY = 300; -export default class ScrollableList extends PureComponent { +const mapStateToProps = (state, { scrollKey }) => { + return { + preventScroll: scrollKey === state.getIn(['dropdown_menu', 'scroll_key']), + }; +}; + +export default @connect(mapStateToProps) +class ScrollableList extends PureComponent { static contextTypes = { router: PropTypes.object, @@ -37,6 +45,7 @@ export default class ScrollableList extends PureComponent { emptyMessage: PropTypes.node, children: PropTypes.node, bindToDocument: PropTypes.bool, + preventScroll: PropTypes.bool, }; static defaultProps = { @@ -129,7 +138,7 @@ export default class ScrollableList extends PureComponent { }); handleMouseIdle = () => { - if (this.scrollToTopOnMouseIdle) { + if (this.scrollToTopOnMouseIdle && !this.props.preventScroll) { this.setScrollTop(0); } @@ -179,7 +188,7 @@ export default class ScrollableList extends PureComponent { this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); const pendingChanged = (prevProps.numPending > 0) !== (this.props.numPending > 0); - if (pendingChanged || someItemInserted && (this.getScrollTop() > 0 || this.mouseMovedRecently)) { + if (pendingChanged || someItemInserted && (this.getScrollTop() > 0 || this.mouseMovedRecently || this.props.preventScroll)) { return this.getScrollHeight() - this.getScrollTop(); } else { return null; diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index f9f6736e62..174e401b72 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -94,6 +94,7 @@ class Status extends ImmutablePureComponent { updateScrollBottom: PropTypes.func, cacheMediaWidth: PropTypes.func, cachedMediaWidth: PropTypes.number, + scrollKey: PropTypes.string, }; // Avoid checking props that are functions (and whose equality will always @@ -264,7 +265,7 @@ class Status extends ImmutablePureComponent { let media = null; let statusAvatar, prepend, rebloggedByText; - const { intl, hidden, featured, otherAccounts, unread, showThread } = this.props; + const { intl, hidden, featured, otherAccounts, unread, showThread, scrollKey } = this.props; let { status, account, ...other } = this.props; @@ -459,7 +460,7 @@ class Status extends ImmutablePureComponent { {media} - + diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index a4aa270883..231c517e98 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -85,6 +85,7 @@ class StatusActionBar extends ImmutablePureComponent { onPin: PropTypes.func, onBookmark: PropTypes.func, withDismiss: PropTypes.bool, + scrollKey: PropTypes.string, intl: PropTypes.object.isRequired, }; @@ -229,7 +230,7 @@ class StatusActionBar extends ImmutablePureComponent { } render () { - const { status, relationship, intl, withDismiss } = this.props; + const { status, relationship, intl, withDismiss, scrollKey } = this.props; const mutingConversation = status.get('muted'); const anonymousAccess = !me; @@ -333,7 +334,16 @@ class StatusActionBar extends ImmutablePureComponent { {shareButton}
- +
); diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index e1b370c913..25411c1272 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -99,6 +99,7 @@ export default class StatusList extends ImmutablePureComponent { onMoveUp={this.handleMoveUp} onMoveDown={this.handleMoveDown} contextType={timelineId} + scrollKey={this.props.scrollKey} showThread /> )) diff --git a/app/javascript/mastodon/containers/dropdown_menu_container.js b/app/javascript/mastodon/containers/dropdown_menu_container.js index ab1823194b..6ec9bbffdf 100644 --- a/app/javascript/mastodon/containers/dropdown_menu_container.js +++ b/app/javascript/mastodon/containers/dropdown_menu_container.js @@ -12,7 +12,7 @@ const mapStateToProps = state => ({ openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']), }); -const mapDispatchToProps = (dispatch, { status, items }) => ({ +const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({ onOpen(id, onItemClick, dropdownPlacement, keyboard) { if (status) { dispatch(fetchRelationships([status.getIn(['account', 'id'])])); @@ -22,7 +22,7 @@ const mapDispatchToProps = (dispatch, { status, items }) => ({ status, actions: items, onClick: onItemClick, - }) : openDropdownMenu(id, dropdownPlacement, keyboard)); + }) : openDropdownMenu(id, dropdownPlacement, keyboard, scrollKey)); }, onClose(id) { diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index b5aca574f1..9613b0b9ed 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -47,7 +47,6 @@ const messages = defineMessages({ unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' }, add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' }, admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' }, - add_account_note: { id: 'account.add_account_note', defaultMessage: 'Add note for @{name}' }, }); const dateFormatOptions = { diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.js b/app/javascript/mastodon/features/account_gallery/components/media_item.js index 617a45d165..9eb4ed0d3e 100644 --- a/app/javascript/mastodon/features/account_gallery/components/media_item.js +++ b/app/javascript/mastodon/features/account_gallery/components/media_item.js @@ -1,7 +1,7 @@ -import { decode } from 'blurhash'; +import Blurhash from 'mastodon/components/blurhash'; import classNames from 'classnames'; import Icon from 'mastodon/components/icon'; -import { autoPlayGif, displayMedia } from 'mastodon/initial_state'; +import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state'; import { isIOS } from 'mastodon/is_mobile'; import PropTypes from 'prop-types'; import React from 'react'; @@ -21,34 +21,6 @@ export default class MediaItem extends ImmutablePureComponent { loaded: false, }; - componentDidMount () { - if (this.props.attachment.get('blurhash')) { - this._decode(); - } - } - - componentDidUpdate (prevProps) { - if (prevProps.attachment.get('blurhash') !== this.props.attachment.get('blurhash') && this.props.attachment.get('blurhash')) { - this._decode(); - } - } - - _decode () { - const hash = this.props.attachment.get('blurhash'); - const pixels = decode(hash, 32, 32); - - if (pixels) { - const ctx = this.canvas.getContext('2d'); - const imageData = new ImageData(pixels, 32, 32); - - ctx.putImageData(imageData, 0, 0); - } - } - - setCanvasRef = c => { - this.canvas = c; - } - handleImageLoad = () => { this.setState({ loaded: true }); } @@ -152,7 +124,13 @@ export default class MediaItem extends ImmutablePureComponent { return (
- + {visible && thumbnail} {!visible && icon} diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js index f0cd79873f..a494892576 100644 --- a/app/javascript/mastodon/features/audio/index.js +++ b/app/javascript/mastodon/features/audio/index.js @@ -7,11 +7,7 @@ import classNames from 'classnames'; import { throttle } from 'lodash'; import { getPointerPosition, fileNameFromURL } from 'mastodon/features/video'; import { debounce } from 'lodash'; - -const hex2rgba = (hex, alpha = 1) => { - const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16)); - return `rgba(${r}, ${g}, ${b}, ${alpha})`; -}; +import Visualizer from './visualizer'; const messages = defineMessages({ play: { id: 'video.play', defaultMessage: 'Play' }, @@ -54,6 +50,11 @@ class Audio extends React.PureComponent { dragging: false, }; + constructor (props) { + super(props); + this.visualizer = new Visualizer(TICK_SIZE); + } + setPlayerRef = c => { this.player = c; @@ -92,9 +93,7 @@ class Audio extends React.PureComponent { setCanvasRef = c => { this.canvas = c; - if (c) { - this.canvasContext = c.getContext('2d'); - } + this.visualizer.setCanvas(c); } componentDidMount () { @@ -262,17 +261,12 @@ class Audio extends React.PureComponent { _initAudioContext () { const context = new AudioContext(); - const analyser = context.createAnalyser(); const source = context.createMediaElementSource(this.audio); - analyser.smoothingTimeConstant = 0.6; - analyser.fftSize = 2048; - - source.connect(analyser); + this.visualizer.setAudioContext(context, source); source.connect(context.destination); this.audioContext = context; - this.analyser = analyser; } handleDownload = () => { @@ -305,20 +299,12 @@ class Audio extends React.PureComponent { }); } - _clear () { - this.canvasContext.clearRect(0, 0, this.state.width, this.state.height); + _clear() { + this.visualizer.clear(this.state.width, this.state.height); } - _draw () { - this.canvasContext.save(); - - const ticks = this._getTicks(360 * this._getScaleCoefficient(), TICK_SIZE); - - ticks.forEach(tick => { - this._drawTick(tick.x1, tick.y1, tick.x2, tick.y2); - }); - - this.canvasContext.restore(); + _draw() { + this.visualizer.draw(this._getCX(), this._getCY(), this._getAccentColor(), this._getRadius(), this._getScaleCoefficient()); } _getRadius () { @@ -329,126 +315,6 @@ class Audio extends React.PureComponent { return (this.state.height || this.props.height) / 982; } - _getTicks (count, size, animationParams = [0, 90]) { - const radius = this._getRadius(); - const ticks = this._getTickPoints(count); - const lesser = 200; - const m = []; - const bufferLength = this.analyser ? this.analyser.frequencyBinCount : 0; - const frequencyData = new Uint8Array(bufferLength); - const allScales = []; - const scaleCoefficient = this._getScaleCoefficient(); - - if (this.analyser) { - this.analyser.getByteFrequencyData(frequencyData); - } - - ticks.forEach((tick, i) => { - const coef = 1 - i / (ticks.length * 2.5); - - let delta = ((frequencyData[i] || 0) - lesser * coef) * scaleCoefficient; - - if (delta < 0) { - delta = 0; - } - - let k; - - if (animationParams[0] <= tick.angle && tick.angle <= animationParams[1]) { - k = radius / (radius - this._getSize(tick.angle, animationParams[0], animationParams[1]) - delta); - } else { - k = radius / (radius - (size + delta)); - } - - const x1 = tick.x * (radius - size); - const y1 = tick.y * (radius - size); - const x2 = x1 * k; - const y2 = y1 * k; - - m.push({ x1, y1, x2, y2 }); - - if (i < 20) { - let scale = delta / (200 * scaleCoefficient); - scale = scale < 1 ? 1 : scale; - allScales.push(scale); - } - }); - - const scale = allScales.reduce((pv, cv) => pv + cv, 0) / allScales.length; - - return m.map(({ x1, y1, x2, y2 }) => ({ - x1: x1, - y1: y1, - x2: x2 * scale, - y2: y2 * scale, - })); - } - - _getSize (angle, l, r) { - const scaleCoefficient = this._getScaleCoefficient(); - const maxTickSize = TICK_SIZE * 9 * scaleCoefficient; - const m = (r - l) / 2; - const x = (angle - l); - - let h; - - if (x === m) { - return maxTickSize; - } - - const d = Math.abs(m - x); - const v = 40 * Math.sqrt(1 / d); - - if (v > maxTickSize) { - h = maxTickSize; - } else { - h = Math.max(TICK_SIZE, v); - } - - return h; - } - - _getTickPoints (count) { - const PI = 360; - const coords = []; - const step = PI / count; - - let rad; - - for(let deg = 0; deg < PI; deg += step) { - rad = deg * Math.PI / (PI / 2); - coords.push({ x: Math.cos(rad), y: -Math.sin(rad), angle: deg }); - } - - return coords; - } - - _drawTick (x1, y1, x2, y2) { - const cx = this._getCX(); - const cy = this._getCY(); - - const dx1 = Math.ceil(cx + x1); - const dy1 = Math.ceil(cy + y1); - const dx2 = Math.ceil(cx + x2); - const dy2 = Math.ceil(cy + y2); - - const gradient = this.canvasContext.createLinearGradient(dx1, dy1, dx2, dy2); - - const mainColor = this._getAccentColor(); - const lastColor = hex2rgba(mainColor, 0); - - gradient.addColorStop(0, mainColor); - gradient.addColorStop(0.6, mainColor); - gradient.addColorStop(1, lastColor); - - this.canvasContext.beginPath(); - this.canvasContext.strokeStyle = gradient; - this.canvasContext.lineWidth = 2; - this.canvasContext.moveTo(dx1, dy1); - this.canvasContext.lineTo(dx2, dy2); - this.canvasContext.stroke(); - } - _getCX() { return Math.floor(this.state.width / 2); } diff --git a/app/javascript/mastodon/features/audio/visualizer.js b/app/javascript/mastodon/features/audio/visualizer.js new file mode 100644 index 0000000000..77d5b5a65c --- /dev/null +++ b/app/javascript/mastodon/features/audio/visualizer.js @@ -0,0 +1,136 @@ +/* +Copyright (c) 2020 by Alex Permyakov (https://codepen.io/alexdevp/pen/RNELPV) + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +*/ + +const hex2rgba = (hex, alpha = 1) => { + const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16)); + return `rgba(${r}, ${g}, ${b}, ${alpha})`; +}; + +export default class Visualizer { + + constructor (tickSize) { + this.tickSize = tickSize; + } + + setCanvas(canvas) { + this.canvas = canvas; + if (canvas) { + this.context = canvas.getContext('2d'); + } + } + + setAudioContext(context, source) { + const analyser = context.createAnalyser(); + + analyser.smoothingTimeConstant = 0.6; + analyser.fftSize = 2048; + + source.connect(analyser); + + this.analyser = analyser; + } + + getTickPoints (count) { + const coords = []; + + for(let i = 0; i < count; i++) { + const rad = Math.PI * 2 * i / count; + coords.push({ x: Math.cos(rad), y: -Math.sin(rad) }); + } + + return coords; + } + + drawTick (cx, cy, mainColor, x1, y1, x2, y2) { + const dx1 = Math.ceil(cx + x1); + const dy1 = Math.ceil(cy + y1); + const dx2 = Math.ceil(cx + x2); + const dy2 = Math.ceil(cy + y2); + + const gradient = this.context.createLinearGradient(dx1, dy1, dx2, dy2); + + const lastColor = hex2rgba(mainColor, 0); + + gradient.addColorStop(0, mainColor); + gradient.addColorStop(0.6, mainColor); + gradient.addColorStop(1, lastColor); + + this.context.beginPath(); + this.context.strokeStyle = gradient; + this.context.lineWidth = 2; + this.context.moveTo(dx1, dy1); + this.context.lineTo(dx2, dy2); + this.context.stroke(); + } + + getTicks (count, size, radius, scaleCoefficient) { + const ticks = this.getTickPoints(count); + const lesser = 200; + const m = []; + const bufferLength = this.analyser ? this.analyser.frequencyBinCount : 0; + const frequencyData = new Uint8Array(bufferLength); + const allScales = []; + + if (this.analyser) { + this.analyser.getByteFrequencyData(frequencyData); + } + + ticks.forEach((tick, i) => { + const coef = 1 - i / (ticks.length * 2.5); + + let delta = ((frequencyData[i] || 0) - lesser * coef) * scaleCoefficient; + + if (delta < 0) { + delta = 0; + } + + const k = radius / (radius - (size + delta)); + + const x1 = tick.x * (radius - size); + const y1 = tick.y * (radius - size); + const x2 = x1 * k; + const y2 = y1 * k; + + m.push({ x1, y1, x2, y2 }); + + if (i < 20) { + let scale = delta / (200 * scaleCoefficient); + scale = scale < 1 ? 1 : scale; + allScales.push(scale); + } + }); + + const scale = allScales.reduce((pv, cv) => pv + cv, 0) / allScales.length; + + return m.map(({ x1, y1, x2, y2 }) => ({ + x1: x1, + y1: y1, + x2: x2 * scale, + y2: y2 * scale, + })); + } + + clear (width, height) { + this.context.clearRect(0, 0, width, height); + } + + draw (cx, cy, color, radius, coefficient) { + this.context.save(); + + const ticks = this.getTicks(parseInt(360 * coefficient), this.tickSize, radius, coefficient); + + ticks.forEach(tick => { + this.drawTick(cx, cy, color, tick.x1, tick.y1, tick.x2, tick.y2); + }); + + this.context.restore(); + } + +} diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.js b/app/javascript/mastodon/features/direct_timeline/components/conversation.js index f9e45067f1..6ecc27facd 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.js +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.js @@ -36,6 +36,7 @@ class Conversation extends ImmutablePureComponent { accounts: ImmutablePropTypes.list.isRequired, lastStatus: ImmutablePropTypes.map, unread:PropTypes.bool.isRequired, + scrollKey: PropTypes.string, onMoveUp: PropTypes.func, onMoveDown: PropTypes.func, markRead: PropTypes.func.isRequired, @@ -127,7 +128,7 @@ class Conversation extends ImmutablePureComponent { } render () { - const { accounts, lastStatus, unread, intl } = this.props; + const { accounts, lastStatus, unread, scrollKey, intl } = this.props; if (lastStatus === null) { return null; @@ -194,7 +195,15 @@ class Conversation extends ImmutablePureComponent {
- +
diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversations_list.js b/app/javascript/mastodon/features/direct_timeline/components/conversations_list.js index 8867bbd738..4ee8e52122 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversations_list.js +++ b/app/javascript/mastodon/features/direct_timeline/components/conversations_list.js @@ -10,6 +10,7 @@ export default class ConversationsList extends ImmutablePureComponent { static propTypes = { conversations: ImmutablePropTypes.list.isRequired, + scrollKey: PropTypes.string.isRequired, hasMore: PropTypes.bool, isLoading: PropTypes.bool, onLoadMore: PropTypes.func, @@ -58,13 +59,14 @@ export default class ConversationsList extends ImmutablePureComponent { const { conversations, onLoadMore, ...other } = this.props; return ( - + {conversations.map(item => ( ))} diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js index 971682df8b..90f9ae7ae6 100644 --- a/app/javascript/mastodon/features/status/components/card.js +++ b/app/javascript/mastodon/features/status/components/card.js @@ -7,7 +7,7 @@ import punycode from 'punycode'; import classnames from 'classnames'; import Icon from 'mastodon/components/icon'; import { useBlurhash } from 'mastodon/initial_state'; -import { decode } from 'blurhash'; +import Blurhash from 'mastodon/components/blurhash'; import { debounce } from 'lodash'; const IDNA_PREFIX = 'xn--'; @@ -93,38 +93,12 @@ export default class Card extends React.PureComponent { componentDidMount () { window.addEventListener('resize', this.handleResize, { passive: true }); - - if (this.props.card && this.props.card.get('blurhash') && this.canvas) { - this._decode(); - } } componentWillUnmount () { window.removeEventListener('resize', this.handleResize); } - componentDidUpdate (prevProps) { - const { card } = this.props; - - if (card.get('blurhash') && (!prevProps.card || prevProps.card.get('blurhash') !== card.get('blurhash')) && this.canvas) { - this._decode(); - } - } - - _decode () { - if (!useBlurhash) return; - - const hash = this.props.card.get('blurhash'); - const pixels = decode(hash, 32, 32); - - if (pixels) { - const ctx = this.canvas.getContext('2d'); - const imageData = new ImageData(pixels, 32, 32); - - ctx.putImageData(imageData, 0, 0); - } - } - _setDimensions () { const width = this.node.offsetWidth; @@ -182,10 +156,6 @@ export default class Card extends React.PureComponent { } } - setCanvasRef = c => { - this.canvas = c; - } - handleImageLoad = () => { this.setState({ previewLoaded: true }); } @@ -238,7 +208,15 @@ export default class Card extends React.PureComponent { ); let embed = ''; - let canvas = ; + let canvas = ( + + ); let thumbnail = ; let spoilerButton = (