[Glitch] Add blurhash

Port front-end changes from fba96c808d to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
pull/1032/head
Eugen Rochko 2019-04-27 03:24:09 +02:00 committed by Thibaut Girka
parent 1149ddd3da
commit ccf4f3240a
10 changed files with 179 additions and 51 deletions

View File

@ -7,6 +7,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { isIOS } from 'flavours/glitch/util/is_mobile'; import { isIOS } from 'flavours/glitch/util/is_mobile';
import classNames from 'classnames'; import classNames from 'classnames';
import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state'; import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state';
import { decode } from 'blurhash';
const messages = defineMessages({ const messages = defineMessages({
hidden: { hidden: {
@ -41,6 +42,7 @@ class Item extends React.PureComponent {
letterbox: PropTypes.bool, letterbox: PropTypes.bool,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
displayWidth: PropTypes.number, displayWidth: PropTypes.number,
visible: PropTypes.bool.isRequired,
}; };
static defaultProps = { static defaultProps = {
@ -49,6 +51,10 @@ class Item extends React.PureComponent {
size: 1, size: 1,
}; };
state = {
loaded: false,
};
handleMouseEnter = (e) => { handleMouseEnter = (e) => {
if (this.hoverToPlay()) { if (this.hoverToPlay()) {
e.target.play(); e.target.play();
@ -82,8 +88,40 @@ class Item extends React.PureComponent {
e.stopPropagation(); 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 () {
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 });
}
render () { render () {
const { attachment, index, size, standalone, letterbox, displayWidth } = this.props; const { attachment, index, size, standalone, letterbox, displayWidth, visible } = this.props;
let width = 50; let width = 50;
let height = 100; let height = 100;
@ -136,7 +174,15 @@ class Item extends React.PureComponent {
let thumbnail = ''; let thumbnail = '';
if (attachment.get('type') === 'image') { if (attachment.get('type') === 'unknown') {
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')} target='_blank' style={{ cursor: 'pointer' }} >
<canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' />
</a>
</div>
);
} else 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 previewWidth = attachment.getIn(['meta', 'small', 'width']);
@ -168,6 +214,7 @@ class Item extends React.PureComponent {
alt={attachment.get('description')} alt={attachment.get('description')}
title={attachment.get('description')} title={attachment.get('description')}
style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }} style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
onLoad={this.handleImageLoad}
/> />
</a> </a>
); );
@ -197,7 +244,8 @@ class Item extends React.PureComponent {
return ( return (
<div className={classNames('media-gallery__item', { standalone, letterbox })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> <div className={classNames('media-gallery__item', { standalone, letterbox })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
{thumbnail} <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} />
{visible && thumbnail}
</div> </div>
); );
} }
@ -257,6 +305,7 @@ export default class MediaGallery extends React.PureComponent {
this.node = node; this.node = node;
if (node && node.offsetWidth && node.offsetWidth != this.state.width) { if (node && node.offsetWidth && node.offsetWidth != this.state.width) {
if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth); if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth);
this.setState({ this.setState({
width: node.offsetWidth, width: node.offsetWidth,
}); });
@ -275,7 +324,7 @@ export default class MediaGallery extends React.PureComponent {
const width = this.state.width || defaultWidth; const width = this.state.width || defaultWidth;
let children; let children, spoilerButton;
const style = {}; const style = {};
@ -289,40 +338,32 @@ export default class MediaGallery extends React.PureComponent {
return (<div className={computedClass} ref={this.handleRef}></div>); return (<div className={computedClass} ref={this.handleRef}></div>);
} }
if (!visible) { if (this.isStandaloneEligible()) {
let warning = <FormattedMessage {...(sensitive ? messages.warning : messages.hidden)} />; children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />;
} else {
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} visible={visible} />);
}
children = ( if (visible) {
<button className='media-spoiler' type='button' onClick={this.handleOpen}> spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />;
<span className='media-spoiler__warning'>{warning}</span> } else {
<span className='media-spoiler__trigger'><FormattedMessage {...messages.toggle} /></span> spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'>{sensitive ? <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /> : <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />}</span>
</button> </button>
); );
} else {
if (this.isStandaloneEligible()) {
children = <Item standalone attachment={media.get(0)} onClick={this.handleClick} displayWidth={width} />;
} else {
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} />);
}
} }
return ( return (
<div className={computedClass} style={style} ref={this.handleRef}> <div className={computedClass} style={style} ref={this.handleRef}>
{visible ? ( <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}>
<div className='sensitive-info'> {spoilerButton}
<IconButton {visible && sensitive && (
icon='eye'
onClick={this.handleOpen}
overlay
title={intl.formatMessage(messages.toggle_visible)}
/>
{sensitive ? (
<span className='sensitive-marker'> <span className='sensitive-marker'>
<FormattedMessage {...messages.sensitive} /> <FormattedMessage {...messages.sensitive} />
</span> </span>
) : null} )}
</div> </div>
) : null}
{children} {children}
</div> </div>

View File

@ -479,6 +479,7 @@ export default class Status extends ImmutablePureComponent {
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} > <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
{Component => (<Component {Component => (<Component
preview={video.get('preview_url')} preview={video.get('preview_url')}
blurhash={video.get('blurhash')}
src={video.get('url')} src={video.get('url')}
alt={video.get('description')} alt={video.get('description')}
inline inline

View File

@ -35,6 +35,7 @@ export default class StatusCheckBox extends React.PureComponent {
{Component => ( {Component => (
<Component <Component
preview={video.get('preview_url')} preview={video.get('preview_url')}
blurhash={video.get('blurhash')}
src={video.get('url')} src={video.get('url')}
alt={video.get('description')} alt={video.get('description')}
width={239} width={239}

View File

@ -134,6 +134,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
media = ( media = (
<Video <Video
preview={video.get('preview_url')} preview={video.get('preview_url')}
blurhash={video.get('blurhash')}
src={video.get('url')} src={video.get('url')}
alt={video.get('description')} alt={video.get('description')}
inline inline

View File

@ -123,6 +123,7 @@ export default class MediaModal extends ImmutablePureComponent {
return ( return (
<Video <Video
preview={image.get('preview_url')} preview={image.get('preview_url')}
blurhash={image.get('blurhash')}
src={image.get('url')} src={image.get('url')}
width={image.get('width')} width={image.get('width')}
height={image.get('height')} height={image.get('height')}

View File

@ -20,6 +20,7 @@ export default class VideoModal extends ImmutablePureComponent {
<div> <div>
<Video <Video
preview={media.get('preview_url')} preview={media.get('preview_url')}
blurhash={media.get('blurhash')}
src={media.get('url')} src={media.get('url')}
startTime={time} startTime={time}
onCloseVideo={onClose} onCloseVideo={onClose}

View File

@ -6,6 +6,7 @@ import { throttle } from 'lodash';
import classNames from 'classnames'; import classNames from 'classnames';
import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen'; import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen';
import { displayMedia } from 'flavours/glitch/util/initial_state'; import { displayMedia } from 'flavours/glitch/util/initial_state';
import { decode } from 'blurhash';
const messages = defineMessages({ const messages = defineMessages({
play: { id: 'video.play', defaultMessage: 'Play' }, play: { id: 'video.play', defaultMessage: 'Play' },
@ -104,6 +105,7 @@ export default class Video extends React.PureComponent {
preventPlayback: PropTypes.bool, preventPlayback: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
cacheWidth: PropTypes.func, cacheWidth: PropTypes.func,
blurhash: PropTypes.string,
}; };
state = { state = {
@ -147,6 +149,7 @@ export default class Video extends React.PureComponent {
setVideoRef = c => { setVideoRef = c => {
this.video = c; this.video = c;
if (this.video) { if (this.video) {
this.setState({ volume: this.video.volume, muted: this.video.muted }); this.setState({ volume: this.video.volume, muted: this.video.muted });
} }
@ -160,6 +163,10 @@ export default class Video extends React.PureComponent {
this.volume = c; this.volume = c;
} }
setCanvasRef = c => {
this.canvas = c;
}
handleMouseDownRoot = e => { handleMouseDownRoot = e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -181,7 +188,6 @@ export default class Video extends React.PureComponent {
} }
handleVolumeMouseDown = e => { handleVolumeMouseDown = e => {
document.addEventListener('mousemove', this.handleMouseVolSlide, true); document.addEventListener('mousemove', this.handleMouseVolSlide, true);
document.addEventListener('mouseup', this.handleVolumeMouseUp, true); document.addEventListener('mouseup', this.handleVolumeMouseUp, true);
document.addEventListener('touchmove', this.handleMouseVolSlide, true); document.addEventListener('touchmove', this.handleMouseVolSlide, true);
@ -201,7 +207,6 @@ export default class Video extends React.PureComponent {
} }
handleMouseVolSlide = throttle(e => { handleMouseVolSlide = throttle(e => {
const rect = this.volume.getBoundingClientRect(); const rect = this.volume.getBoundingClientRect();
const x = (e.clientX - rect.left) / this.volWidth; //x position within the element. const x = (e.clientX - rect.left) / this.volWidth; //x position within the element.
@ -272,6 +277,10 @@ export default class Video extends React.PureComponent {
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true); document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true); document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true); document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
if (this.props.blurhash) {
this._decode();
}
} }
componentWillUnmount () { componentWillUnmount () {
@ -293,6 +302,24 @@ export default class Video extends React.PureComponent {
} }
} }
componentDidUpdate (prevProps) {
if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
this._decode();
}
}
_decode () {
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);
}
}
handleFullscreenChange = () => { handleFullscreenChange = () => {
this.setState({ fullscreen: isFullscreen() }); this.setState({ fullscreen: isFullscreen() });
} }
@ -337,6 +364,7 @@ export default class Video extends React.PureComponent {
handleOpenVideo = () => { handleOpenVideo = () => {
const { src, preview, width, height, alt } = this.props; const { src, preview, width, height, alt } = this.props;
const media = fromJS({ const media = fromJS({
type: 'video', type: 'video',
url: src, url: src,
@ -385,6 +413,7 @@ export default class Video extends React.PureComponent {
} }
let preload; let preload;
if (startTime || fullscreen || dragging) { if (startTime || fullscreen || dragging) {
preload = 'auto'; preload = 'auto';
} else if (detailed) { } else if (detailed) {
@ -403,7 +432,9 @@ export default class Video extends React.PureComponent {
onMouseDown={this.handleMouseDownRoot} onMouseDown={this.handleMouseDownRoot}
tabIndex={0} tabIndex={0}
> >
<video <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': revealed })} />
{revealed && <video
ref={this.setVideoRef} ref={this.setVideoRef}
src={src} src={src}
poster={preview} poster={preview}
@ -423,12 +454,13 @@ export default class Video extends React.PureComponent {
onLoadedData={this.handleLoadedData} onLoadedData={this.handleLoadedData}
onProgress={this.handleProgress} onProgress={this.handleProgress}
onVolumeChange={this.handleVolumeChange} onVolumeChange={this.handleVolumeChange}
/> />}
<button type='button' className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}> <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed })}>
<span className='video-player__spoiler__title'>{warning}</span> <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
<span className='video-player__spoiler__subtitle'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> <span className='spoiler-button__overlay__label'>{warning}</span>
</button> </button>
</div>
<div className={classNames('video-player__controls', { active: paused || hovered })}> <div className={classNames('video-player__controls', { active: paused || hovered })}>
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}> <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>

View File

@ -1066,15 +1066,49 @@
} }
.spoiler-button { .spoiler-button {
display: none; top: 0;
left: 4px; left: 0;
width: 100%;
height: 100%;
position: absolute; position: absolute;
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
top: 4px;
z-index: 100; z-index: 100;
&.spoiler-button--visible { &--minified {
display: block; display: block;
left: 4px;
top: 4px;
width: auto;
height: auto;
}
&--hidden {
display: none;
}
&__overlay {
display: block;
background: transparent;
width: 100%;
height: 100%;
border: 0;
&__label {
display: inline-block;
background: rgba($base-overlay-background, 0.5);
border-radius: 8px;
padding: 8px 12px;
color: $primary-text-color;
font-weight: 500;
font-size: 14px;
}
&:hover,
&:focus,
&:active {
.spoiler-button__overlay__label {
background: rgba($base-overlay-background, 0.8);
}
}
} }
} }

View File

@ -117,6 +117,8 @@
text-decoration: none; text-decoration: none;
color: $secondary-text-color; color: $secondary-text-color;
line-height: 0; line-height: 0;
position: relative;
z-index: 1;
&, &,
img { img {
@ -131,6 +133,21 @@
} }
} }
.media-gallery__preview {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: $base-overlay-background;
&--hidden {
display: none;
}
}
.media-gallery__gifv { .media-gallery__gifv {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;

View File

@ -705,7 +705,7 @@
& > div { & > div {
background: rgba($base-shadow-color, 0.6); background: rgba($base-shadow-color, 0.6);
border-radius: 4px; border-radius: 8px;
padding: 12px 9px; padding: 12px 9px;
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
@ -716,19 +716,18 @@
button, button,
a { a {
display: inline; display: inline;
color: $primary-text-color; color: $secondary-text-color;
background: transparent; background: transparent;
border: 0; border: 0;
padding: 0 5px; padding: 0 8px;
text-decoration: none; text-decoration: none;
opacity: 0.6;
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
opacity: 1; color: $primary-text-color;
} }
} }