feat(media): Blurhash

package.json

@@ -48,6 +48,7 @@
     "@webcomponents/custom-elements": "^1.2.4",
     "babel-loader": "^8.0.6",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "blurhash": "^1.1.3",
     "cheerio": "^1.0.0-rc.2",
     "child-process-promise": "^2.2.1",
     "chokidar": "^3.0.1",

src/routes/_components/LazyImage.html

@@ -71,7 +71,7 @@
         return `object-position: ${coordsToPercent(focus.x)}% ${100 - coordsToPercent(focus.y)}%;`
       },
       fillFixSize: ({ forceSize, $largeInlineMedia }) => !$largeInlineMedia && !forceSize,
-      displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
+      displaySrc: ({ showBlurhash, blurhash, error, src, fallback }) => ((showBlurhash && blurhash) || (error && fallback) || src)
     }
   }
 </script>

src/routes/_components/status/Media.html

@@ -53,6 +53,8 @@
       title={description}
       src={previewUrl}
       fallback={oneTransparentPixel}
+      showBlurhash={showBlurhash}
+      blurhash={blurhash}
       width={inlineWidth}
       height={inlineHeight}
       background="var(--loading-bg)"
@@ -91,8 +93,9 @@
   import LazyImage from '../LazyImage.html'
   import AutoplayVideo from '../AutoplayVideo.html'
   import { registerClickDelegate } from '../../_utils/delegate'
+  import { decode } from '../../_utils/blurhash'
 
-  export default {
+export default {
     oncreate () {
       const { elementId } = this.get()
       registerClickDelegate(this, elementId, () => this.onClick())
@@ -126,6 +129,7 @@
       elementId: ({ media, uuid }) => `media-${uuid}-${media.id}`,
       description: ({ media }) => media.description || '',
       previewUrl: ({ media }) => media.preview_url,
+      blurhash: ({ media }) => media.blurhash && decode(media.blurhash),
       url: ({ media }) => media.url,
       type: ({ media }) => media.type
     },

src/routes/_components/status/MediaAttachments.html

@@ -1,7 +1,7 @@
 <div class={computedClass}
      style="grid-template-columns: repeat({nCols}, 1fr);" >
   {#each mediaAttachments as media, index}
-    <Media {media} {uuid} {mediaAttachments} {index} />
+    <Media {media} {uuid} {mediaAttachments} {index} {showBlurhash} />
   {/each}
 </div>
 <style>
@@ -55,6 +55,10 @@
         twoCols && 'two-cols',
         !$largeInlineMedia && 'grouped-images'
       ),
+      showBlurhash:
+        ({ sensitive, sensitiveShown, mediaAttachments }) => {
+          return sensitive && mediaAttachments.every(attachment => !!attachment.blurhash) ? !sensitiveShown : false
+        },
       nCols:
         ({ mediaAttachments, $largeInlineMedia }) => {
           return (!$largeInlineMedia && mediaAttachments.length > 1) ? 2 : 1

src/routes/_components/status/StatusMediaAttachments.html

@@ -10,28 +10,32 @@
       <SvgIcon className="status-sensitive-media-svg" href="#fa-eye-slash" />
     </div>
   </button>
-  <MediaAttachments {mediaAttachments} {sensitive} {uuid} />
   {:else}
     <button id={elementId}
             type="button"
             class="status-sensitive-media-button"
             aria-label="Show sensitive media" >
 
-      <div class="status-sensitive-media-warning">
-        Sensitive content. Click to show.
+      <div class="{customWarningClass}">
+        <div class="status-sensitive-media-warning-text">
+          Sensitive content. Click to show.
+        </div>
       </div>
       <div class="svg-wrapper">
         <SvgIcon className="status-sensitive-media-svg" href="#fa-eye" />
       </div>
     </button>
   {/if}
+  {#if sensitiveShown || canUseBlurhash}
+    <MediaAttachments {mediaAttachments} {sensitive} {sensitiveShown} {uuid} />
+  {/if}
   </div>
 </div>
 {#if enableShortcuts}
   <Shortcut scope={shortcutScope} key="y" on:pressed="toggleSensitiveMedia()"/>
 {/if}
 {:else}
-  <MediaAttachments {mediaAttachments} {sensitive} {uuid} />
+  <MediaAttachments {mediaAttachments} {sensitive} {sensitiveShown} {uuid} />
 {/if}
 <style>
   .status-sensitive-media-container {
@@ -81,6 +85,7 @@
   }
 
   .status-sensitive-media-hidden .status-sensitive-media-button {
+    position: absolute;
     right: 0;
     bottom: 0;
     width: 100%;
@@ -96,7 +101,6 @@
   }
 
   .status-sensitive-media-container .status-sensitive-media-warning {
-    position: absolute;
     top: 0;
     left: 0;
     right: 0;
@@ -109,6 +113,21 @@
     padding: 0 10px;
   }
 
+  .status-sensitive-media-container .status-sensitive-media-warning-transparent {
+    position: absolute;
+  }
+
+  .status-sensitive-media-container .status-sensitive-media-warning-opaque {
+    background: var(--mask-bg);
+    height: 100%;
+  }
+
+  .status-sensitive-media-container .status-sensitive-media-warning-transparent .status-sensitive-media-warning-text {
+    background: var(--mask-bg);
+    padding: 10px;
+    border-radius: 6px;
+  }
+
   .status-sensitive-media-container .svg-wrapper {
     display: flex;
     align-items: flex-start;
@@ -119,6 +138,7 @@
   }
   .status-sensitive-media-hidden .svg-wrapper {
     position: absolute;
+    background: none;
     top: 0;
     left: 0;
     right: 0;
@@ -171,6 +191,7 @@
         $largeInlineMedia ? 'not-grouped-images' : 'grouped-images'
       ),
       mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments,
+      canUseBlurhash: ({ $useBlurhash, mediaAttachments }) => $useBlurhash && mediaAttachments && mediaAttachments.every(media => !!media.blurhash),
       sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid],
       sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => (
         !$neverMarkMediaAsSensitive && ($markMediaAsSensitive || originalStatus.sensitive)
@@ -181,7 +202,11 @@
           return ''
         }
         return `padding-bottom: ${Math.ceil(mediaAttachments.length / 2) * 29}%;`
-      }
+      },
+      customWarningClass: ({ canUseBlurhash }) => classname(
+        'status-sensitive-media-warning',
+        canUseBlurhash ? 'status-sensitive-media-warning-transparent' : 'status-sensitive-media-warning-opaque'
+      )
     },
     methods: {
       toggleSensitiveMedia () {

src/routes/_pages/settings/general.html

@@ -8,6 +8,11 @@ <h2>Media</h2>
              bind:checked="$neverMarkMediaAsSensitive" on:change="onChange(event)">
       <label for="choice-never-mark-media-sensitive">Show sensitive media by default</label>
     </div>
+    <div class="setting-group">
+        <input type="checkbox" id="choice-use-blurhash"
+               bind:checked="$useBlurhash" on:change="onChange(event)">
+        <label for="choice-use-blurhash">Use blurhash for previews</label>
+      </div>
     <div class="setting-group">
       <input type="checkbox" id="choice-mark-media-sensitive"
              bind:checked="$markMediaAsSensitive" on:change="onChange(event)">

src/routes/_store/store.js

@@ -30,6 +30,7 @@ const persistedState = {
   loggedInInstancesInOrder: [],
   markMediaAsSensitive: false,
   neverMarkMediaAsSensitive: false,
+  useBlurhash: true,
   omitEmojiInDisplayNames: undefined,
   pinnedPages: {},
   pushSubscriptions: {},

src/routes/_utils/blurhash.js

@@ -0,0 +1,22 @@
+import { decode as decodeBlurHash } from 'blurhash'
+import { mark, stop } from './marks'
+
+let canvas
+
+export function decode (blurhash) {
+  mark('computeBlurhash')
+  const pixels = decodeBlurHash(blurhash, 32, 32)
+
+  if (pixels) {
+    canvas = canvas || document.createElement('canvas')
+    canvas.height = 32
+    canvas.width = 32
+    const imageData = new window.ImageData(pixels, 32, 32)
+    canvas.getContext('2d').putImageData(imageData, 0, 0)
+    const base64Image = canvas.toDataURL()
+    stop('computeBlurhash')
+    return base64Image
+  }
+
+  stop('computeBlurhash')
+}

yarn.lock

@@ -1489,6 +1489,11 @@ bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
   integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
 
+blurhash@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.3.tgz#dc325af7da836d07a0861d830bdd63694382483e"
+  integrity sha512-yUhPJvXexbqbyijCIE/T2NCXcj9iNPhWmOKbPTuR/cm7Q5snXYIfnVnz6m7MWOXxODMz/Cr3UcVkRdHiuDVRDw==
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"