[Glitch] Add blurhash

Port front-end changes from fba96c808d to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
6 years ago · ccf4f3240a
parent 1149ddd3da
commit ccf4f3240a
10 changed files with 179 additions and 51 deletions
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@ -7,6 +7,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { isIOS } from 'flavours/glitch/util/is_mobile';
 import classNames from 'classnames';
 import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state';
+import { decode } from 'blurhash';

 const messages = defineMessages({
  hidden: {
@ -41,6 +42,7 @@ class Item extends React.PureComponent {
    letterbox: PropTypes.bool,
    onClick: PropTypes.func.isRequired,
    displayWidth: PropTypes.number,
+    visible: PropTypes.bool.isRequired,
  };

  static defaultProps = {
@ -49,6 +51,10 @@ class Item extends React.PureComponent {
    size: 1,
  };

+  state = {
+    loaded: false,
+  };
+
  handleMouseEnter = (e) => {
    if (this.hoverToPlay()) {
      e.target.play();
@ -82,8 +88,40 @@ 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 () {
+    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 () {
-    const { attachment, index, size, standalone, letterbox, displayWidth } = this.props;
+    const { attachment, index, size, standalone, letterbox, displayWidth, visible } = this.props;

    let width  = 50;
    let height = 100;
@ -136,12 +174,20 @@ class Item extends React.PureComponent {

    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 previewWidth = attachment.getIn(['meta', 'small', 'width']);

-      const originalUrl    = attachment.get('url');
-      const originalWidth  = attachment.getIn(['meta', 'original', 'width']);
+      const originalUrl   = attachment.get('url');
+      const originalWidth = attachment.getIn(['meta', 'original', 'width']);

      const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number';

@ -168,6 +214,7 @@ class Item extends React.PureComponent {
            alt={attachment.get('description')}
            title={attachment.get('description')}
            style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
+            onLoad={this.handleImageLoad}
          />
        </a>
      );
@ -197,7 +244,8 @@ class Item extends React.PureComponent {

    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}%` }}>
-        {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>
    );
  }
@ -257,6 +305,7 @@ export default class MediaGallery extends React.PureComponent {
    this.node = node;
    if (node && node.offsetWidth && node.offsetWidth != this.state.width) {
      if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth);
+
      this.setState({
        width: node.offsetWidth,
      });
@ -275,7 +324,7 @@ export default class MediaGallery extends React.PureComponent {

    const width = this.state.width || defaultWidth;

-    let children;
+    let children, spoilerButton;

    const style = {};

@ -289,40 +338,32 @@ export default class MediaGallery extends React.PureComponent {
      return (<div className={computedClass} ref={this.handleRef}></div>);
    }

-    if (!visible) {
-      let warning = <FormattedMessage {...(sensitive ? messages.warning : messages.hidden)} />;
+    if (this.isStandaloneEligible()) {
+      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 = (
-        <button className='media-spoiler' type='button' onClick={this.handleOpen}>
-          <span className='media-spoiler__warning'>{warning}</span>
-          <span className='media-spoiler__trigger'><FormattedMessage {...messages.toggle} /></span>
+    if (visible) {
+      spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />;
+    } else {
+      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>
      );
-    } 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 (
      <div className={computedClass} style={style} ref={this.handleRef}>
-        {visible ? (
-          <div className='sensitive-info'>
-            <IconButton
-              icon='eye'
-              onClick={this.handleOpen}
-              overlay
-              title={intl.formatMessage(messages.toggle_visible)}
-            />
-            {sensitive ? (
-              <span className='sensitive-marker'>
-                <FormattedMessage {...messages.sensitive} />
-              </span>
-            ) : null}
-          </div>
-        ) : null}
+        <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}>
+          {spoilerButton}
+          {visible && sensitive && (
+            <span className='sensitive-marker'>
+              <FormattedMessage {...messages.sensitive} />
+            </span>
+          )}
+        </div>

        {children}
      </div>
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@ -479,6 +479,7 @@ export default class Status extends ImmutablePureComponent {
          <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
            {Component => (<Component
              preview={video.get('preview_url')}
+              blurhash={video.get('blurhash')}
              src={video.get('url')}
              alt={video.get('description')}
              inline
--- a/app/javascript/flavours/glitch/features/report/components/status_check_box.js
+++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.js
@ -35,6 +35,7 @@ export default class StatusCheckBox extends React.PureComponent {
            {Component => (
              <Component
                preview={video.get('preview_url')}
+                blurhash={video.get('blurhash')}
                src={video.get('url')}
                alt={video.get('description')}
                width={239}
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@ -134,6 +134,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
        media = (
          <Video
            preview={video.get('preview_url')}
+            blurhash={video.get('blurhash')}
            src={video.get('url')}
            alt={video.get('description')}
            inline
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
@ -123,6 +123,7 @@ export default class MediaModal extends ImmutablePureComponent {
        return (
          <Video
            preview={image.get('preview_url')}
+            blurhash={image.get('blurhash')}
            src={image.get('url')}
            width={image.get('width')}
            height={image.get('height')}
--- a/app/javascript/flavours/glitch/features/ui/components/video_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/video_modal.js
@ -20,6 +20,7 @@ export default class VideoModal extends ImmutablePureComponent {
        <div>
          <Video
            preview={media.get('preview_url')}
+            blurhash={media.get('blurhash')}
            src={media.get('url')}
            startTime={time}
            onCloseVideo={onClose}
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@ -6,6 +6,7 @@ import { throttle } from 'lodash';
 import classNames from 'classnames';
 import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen';
 import { displayMedia } from 'flavours/glitch/util/initial_state';
+import { decode } from 'blurhash';

 const messages = defineMessages({
  play: { id: 'video.play', defaultMessage: 'Play' },
@ -104,6 +105,7 @@ export default class Video extends React.PureComponent {
    preventPlayback: PropTypes.bool,
    intl: PropTypes.object.isRequired,
    cacheWidth: PropTypes.func,
+    blurhash: PropTypes.string,
  };

  state = {
@ -147,6 +149,7 @@ export default class Video extends React.PureComponent {

  setVideoRef = c => {
    this.video = c;
+
    if (this.video) {
      this.setState({ volume: this.video.volume, muted: this.video.muted });
    }
@ -160,6 +163,10 @@ export default class Video extends React.PureComponent {
    this.volume = c;
  }

+  setCanvasRef = c => {
+    this.canvas = c;
+  }
+
  handleMouseDownRoot = e => {
    e.preventDefault();
    e.stopPropagation();
@ -181,7 +188,6 @@ export default class Video extends React.PureComponent {
  }

  handleVolumeMouseDown = e => {
-
    document.addEventListener('mousemove', this.handleMouseVolSlide, true);
    document.addEventListener('mouseup', this.handleVolumeMouseUp, true);
    document.addEventListener('touchmove', this.handleMouseVolSlide, true);
@ -201,7 +207,6 @@ export default class Video extends React.PureComponent {
  }

  handleMouseVolSlide = throttle(e => {
-
    const rect = this.volume.getBoundingClientRect();
    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('mozfullscreenchange', this.handleFullscreenChange, true);
    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
+
+    if (this.props.blurhash) {
+      this._decode();
+    }
  }

  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 = () => {
    this.setState({ fullscreen: isFullscreen() });
  }
@ -337,6 +364,7 @@ export default class Video extends React.PureComponent {

  handleOpenVideo = () => {
    const { src, preview, width, height, alt } = this.props;
+
    const media = fromJS({
      type: 'video',
      url: src,
@ -385,6 +413,7 @@ export default class Video extends React.PureComponent {
    }

    let preload;
+
    if (startTime || fullscreen || dragging) {
      preload = 'auto';
    } else if (detailed) {
@ -403,7 +432,9 @@ export default class Video extends React.PureComponent {
        onMouseDown={this.handleMouseDownRoot}
        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}
          src={src}
          poster={preview}
@ -423,12 +454,13 @@ export default class Video extends React.PureComponent {
          onLoadedData={this.handleLoadedData}
          onProgress={this.handleProgress}
          onVolumeChange={this.handleVolumeChange}
-        />
+        />}

-        <button type='button' className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}>
-          <span className='video-player__spoiler__title'>{warning}</span>
-          <span className='video-player__spoiler__subtitle'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
-        </button>
+        <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed })}>
+          <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
+            <span className='spoiler-button__overlay__label'>{warning}</span>
+          </button>
+        </div>

        <div className={classNames('video-player__controls', { active: paused || hovered })}>
          <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@ -1066,15 +1066,49 @@
 }

 .spoiler-button {
-  display: none;
-  left: 4px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
  position: absolute;
-  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
-  top: 4px;
  z-index: 100;

-  &.spoiler-button--visible {
+  &--minified {
+    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);
+      }
+    }
  }
 }

--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@ -117,6 +117,8 @@
  text-decoration: none;
  color: $secondary-text-color;
  line-height: 0;
+  position: relative;
+  z-index: 1;

  &,
  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 {
  height: 100%;
  overflow: hidden;
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@ -705,7 +705,7 @@

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

      &:hover,
      &:active,
      &:focus {
-        opacity: 1;
+        color: $primary-text-color;
      }
    }