Skip to content

Commit

Permalink
Replace repetitive blurhash code with component (mastodon#14267)
Browse files Browse the repository at this point in the history
This commit replaces all unnecessarily repeated code for decoding and
embedding blurhash canvases with separate component - <Blurhash>.

Under the hood Blurhash component will use effect dependent on its
props. This gives a few benefits: it will only be re-rendered whenever
the hash or width/height/dummy props update, and will not render if
canvas won't get to the final DOM, because then effect won't fire,
which prevents weird bugs like mastodon#14257.
  • Loading branch information
brawaru authored and Mage committed Jan 14, 2022
1 parent d67b6ed commit 8510e83
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 125 deletions.
61 changes: 61 additions & 0 deletions app/javascript/mastodon/components/blurhash.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
// @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<HTMLCanvasElement>} */ (useRef());

useEffect(() => {
const { current: canvas } = canvasRef;
canvas.width = canvas.width; // resets canvas

if (dummy) return;

const pixels = decode(hash, width, height);
const ctx = canvas.getContext('2d');
const imageData = new ImageData(pixels, width, height);

ctx.putImageData(imageData, 0, 0);
}, [dummy, hash, width, height]);

return (
<canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
);
}

Blurhash.propTypes = {
hash: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number,
dummy: PropTypes.bool,
};

export default React.memo(Blurhash);
46 changes: 13 additions & 33 deletions app/javascript/mastodon/components/media_gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}}' },
Expand Down Expand Up @@ -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 });
}
Expand Down Expand Up @@ -166,7 +136,11 @@ class Item extends React.PureComponent {
return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={attachment.get('description')} target='_blank' rel='noopener noreferrer'>
<canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' />
<Blurhash
hash={attachment.get('blurhash')}
className='media-gallery__preview'
dummy={!useBlurhash}
/>
</a>
</div>
);
Expand Down Expand Up @@ -232,7 +206,13 @@ class Item extends React.PureComponent {

return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
<canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} />
<Blurhash
hash={attachment.get('blurhash')}
dummy={!useBlurhash}
className={classNames('media-gallery__preview', {
'media-gallery__preview--hidden': visible && this.state.loaded,
})}
/>
{visible && thumbnail}
</div>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 });
}
Expand Down Expand Up @@ -152,7 +124,13 @@ export default class MediaItem extends ImmutablePureComponent {
return (
<div className='account-gallery__item' style={{ width, height }}>
<a className='media-gallery__item-thumbnail' href={status.get('url')} onClick={this.handleClick} title={title} target='_blank' rel='noopener noreferrer'>
<canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && loaded })} />
<Blurhash
hash={attachment.get('blurhash')}
className={classNames('media-gallery__preview', {
'media-gallery__preview--hidden': visible && loaded,
})}
dummy={!useBlurhash}
/>
{visible && thumbnail}
{!visible && icon}
</a>
Expand Down
42 changes: 10 additions & 32 deletions app/javascript/mastodon/features/status/components/card.js
Original file line number Diff line number Diff line change
Expand Up @@ -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--';
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -182,10 +156,6 @@ export default class Card extends React.PureComponent {
}
}

setCanvasRef = c => {
this.canvas = c;
}

handleImageLoad = () => {
this.setState({ previewLoaded: true });
}
Expand Down Expand Up @@ -238,7 +208,15 @@ export default class Card extends React.PureComponent {
);

let embed = '';
let canvas = <canvas width={32} height={32} ref={this.setCanvasRef} className={classnames('status-card__image-preview', { 'status-card__image-preview--hidden' : revealed && this.state.previewLoaded })} />;
let canvas = (
<Blurhash
className={classnames('status-card__image-preview', {
'status-card__image-preview--hidden': revealed && this.state.previewLoaded,
})}
hash={card.get('blurhash')}
dummy={!useBlurhash}
/>
);
let thumbnail = <img src={card.get('image')} alt='' style={{ width: horizontal ? width : null, height: horizontal ? height : null, visibility: revealed ? null : 'hidden' }} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let spoilerButton = (
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
Expand Down
38 changes: 9 additions & 29 deletions app/javascript/mastodon/features/video/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import classNames from 'classnames';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
import { displayMedia, useBlurhash } from '../../initial_state';
import Icon from 'mastodon/components/icon';
import { decode } from 'blurhash';
import Blurhash from 'mastodon/components/blurhash';

const messages = defineMessages({
play: { id: 'video.play', defaultMessage: 'Play' },
Expand Down Expand Up @@ -169,10 +169,6 @@ class Video extends React.PureComponent {
this.volume = c;
}

setCanvasRef = c => {
this.canvas = c;
}

handleClickRoot = e => e.stopPropagation();

handlePlay = () => {
Expand Down Expand Up @@ -289,10 +285,6 @@ class Video extends React.PureComponent {

window.addEventListener('scroll', this.handleScroll);
window.addEventListener('resize', this.handleResize, { passive: true });

if (this.props.blurhash) {
this._decode();
}
}

componentWillUnmount () {
Expand All @@ -315,24 +307,6 @@ class Video extends React.PureComponent {
if (prevState.revealed && !this.state.revealed && this.video) {
this.video.pause();
}

if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
this._decode();
}
}

_decode () {
if (!useBlurhash) return;

const hash = this.props.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);
}
}

handleResize = debounce(() => {
Expand Down Expand Up @@ -438,7 +412,7 @@ class Video extends React.PureComponent {
}

render () {
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, editable } = this.props;
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, editable, blurhash } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = (currentTime / duration) * 100;
const playerStyle = {};
Expand Down Expand Up @@ -481,7 +455,13 @@ class Video extends React.PureComponent {
onClick={this.handleClickRoot}
tabIndex={0}
>
<canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': revealed })} />
<Blurhash
hash={blurhash}
className={classNames('media-gallery__preview', {
'media-gallery__preview--hidden': revealed,
})}
dummy={!useBlurhash}
/>

{(revealed || editable) && <video
ref={this.setVideoRef}
Expand Down

0 comments on commit 8510e83

Please sign in to comment.