diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features')
3 files changed, 28 insertions, 95 deletions
diff --git a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js index f1cb3f9e4..b88f23aa4 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js +++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js @@ -1,7 +1,7 @@ -import { decode } from 'blurhash'; +import Blurhash from 'flavours/glitch/components/blurhash'; import classNames from 'classnames'; import Icon from 'flavours/glitch/components/icon'; -import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state'; +import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/util/initial_state'; import { isIOS } from 'flavours/glitch/util/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 }); } @@ -149,7 +121,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 : icon} </a> </div> diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index ab6398e1a..14abe9838 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; import { decode as decodeIDNA } from 'flavours/glitch/util/idna'; import Icon from 'flavours/glitch/components/icon'; import { useBlurhash } from 'flavours/glitch/util/initial_state'; -import { decode } from 'blurhash'; +import Blurhash from 'flavours/glitch/components/blurhash'; import { debounce } from 'lodash'; const getHostname = url => { @@ -85,38 +85,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; @@ -174,10 +148,6 @@ export default class Card extends React.PureComponent { } } - setCanvasRef = c => { - this.canvas = c; - } - handleImageLoad = () => { this.setState({ previewLoaded: true }); } @@ -230,7 +200,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'> diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index c7cb5bc43..976cdefc0 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -7,7 +7,7 @@ import classNames from 'classnames'; import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen'; import { displayMedia, useBlurhash } from 'flavours/glitch/util/initial_state'; import Icon from 'flavours/glitch/components/icon'; -import { decode } from 'blurhash'; +import Blurhash from 'flavours/glitch/components/blurhash'; const messages = defineMessages({ play: { id: 'video.play', defaultMessage: 'Play' }, @@ -179,14 +179,6 @@ class Video extends React.PureComponent { this.volume = c; } - setCanvasRef = c => { - this.canvas = c; - - if (c && this.props.blurhash) { - this._decode(); - } - } - handleMouseDownRoot = e => { e.preventDefault(); e.stopPropagation(); @@ -305,10 +297,6 @@ class Video extends React.PureComponent { document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true); window.addEventListener('resize', this.handleResize, { passive: true }); - - if (this.props.blurhash) { - this._decode(); - } } componentWillUnmount () { @@ -330,23 +318,6 @@ class Video extends React.PureComponent { if (this.video && this.state.revealed && this.props.preventPlayback && !prevProps.preventPlayback) { this.video.pause(); } - if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) { - this._decode(); - } - } - - _decode () { - if (!this.canvas || !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(() => { @@ -440,7 +411,7 @@ class Video extends React.PureComponent { } render () { - const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed, sensitive, link, editable } = this.props; + const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, 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 = {}; @@ -485,7 +456,13 @@ class Video extends React.PureComponent { onMouseDown={this.handleMouseDownRoot} 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} |