fix: ensure "disable blurhash" setting is honored (#1422)

* fix: ensure "disable blurhash" setting is honored

fixes #1421

* remove play button for audio/video

package.json

@@ -155,7 +155,8 @@
       "MessageChannel",
       "ImageData",
       "OffscreenCanvas",
-      "postMessage"
+      "postMessage",
+      "getComputedStyle"
     ],
     "ignore": [
       "dist",

src/routes/_components/NonAutoplayGifv.html

@@ -17,7 +17,7 @@
       alt={label || ''}
       title={label || ''}
       src={staticSrc}
-      blurhash={blurhash}
+      {blurhash}
       fallback={oneTransparentPixel}
       {width}
       {height}

src/routes/_components/status/Media.html

@@ -1,4 +1,4 @@
-{#if (type === 'video' && !blurhash) || type === 'audio'}
+{#if !blurhash && (type === 'video' || type === 'audio')}
     <button id={elementId}
             type="button"
             class="play-video-button focus-after {$largeInlineMedia ? '' : 'fixed-size'} {type === 'audio' ? 'play-audio-button' : ''}"
@@ -11,7 +11,7 @@
           title={description}
           src={previewUrl}
           fallback={oneTransparentPixel}
-          blurhash={blurhash}
+          {blurhash}
           width={inlineWidth}
           height={inlineHeight}
           background="var(--loading-bg)"
@@ -27,7 +27,7 @@
           title={description}
           on:mouseover="set({mouseover: event})"
           style="width: {inlineWidth}px; height: {inlineHeight}px;">
-  {#if type === 'gifv' && $autoplayGifs && !blurhash}
+  {#if type === 'gifv' && $autoplayGifs}
     <AutoplayVideo
       ariaLabel="Animated GIF: {description}"
       poster={previewUrl}
@@ -36,12 +36,12 @@
       height={inlineHeight}
       {focus}
     />
-  {:elseif type === 'gifv' && !blurhash}
+  {:elseif type === 'gifv'}
     <NonAutoplayGifv
       class={noNativeWidthHeight ? 'no-native-width-height' : ''}
       label="Animated GIF: {description}"
       poster={previewUrl}
-      blurhash={blurhash}
+      {blurhash}
       src={url}
       staticSrc={previewUrl}
       width={inlineWidth}
@@ -55,7 +55,7 @@
       title={description}
       src={previewUrl}
       fallback={oneTransparentPixel}
-      blurhash={blurhash}
+      {blurhash}
       width={inlineWidth}
       height={inlineHeight}
       background="var(--loading-bg)"
@@ -94,6 +94,7 @@
   import LazyImage from '../LazyImage.html'
   import AutoplayVideo from '../AutoplayVideo.html'
   import { registerClickDelegate } from '../../_utils/delegate'
+  import { convertCssPropertyToDataUrl } from '../../_utils/convertCssPropertyToDataUrl'
 
 export default {
     async oncreate () {
@@ -129,8 +130,16 @@ export default {
       elementId: ({ media, uuid }) => `media-${uuid}-${media.id}`,
       description: ({ media }) => media.description || '',
       previewUrl: ({ media }) => media.preview_url,
-      decodedBlurhash: ({ media }) => media.decodedBlurhash || ONE_TRANSPARENT_PIXEL,
-      blurhash: ({ showBlurhash, decodedBlurhash }) => showBlurhash && decodedBlurhash,
+      decodedBlurhash: ({ media }) => media.decodedBlurhash,
+      blurhashToUse: ({ decodedBlurhash, $ignoreBlurhash }) => {
+        if (!$ignoreBlurhash && decodedBlurhash) {
+          return decodedBlurhash
+        }
+        // Convert the var(--loading-bg) variable into a data URL based on a single pixel of color
+        // TODO: this is hacky
+        return convertCssPropertyToDataUrl('--mask-bg')
+      },
+      blurhash: ({ blurhashToUse, showAsSensitive }) => showAsSensitive && blurhashToUse,
       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} {showBlurhash} />
+    <Media {media} {uuid} {mediaAttachments} {index} {showAsSensitive} />
   {/each}
 </div>
 <style>
@@ -56,8 +56,8 @@
         twoCols && 'two-cols',
         !$largeInlineMedia && 'grouped-images'
       ),
-      showBlurhash: ({ sensitive, sensitiveShown, mediaAttachments }) => {
-        return sensitive && mediaAttachments.every(attachment => !!attachment.blurhash) ? !sensitiveShown : false
+      showAsSensitive: ({ sensitive, sensitiveShown }) => {
+        return sensitive ? !sensitiveShown : false
       },
       nCols: ({ mediaAttachments, $largeInlineMedia }) => {
         return (!$largeInlineMedia && mediaAttachments.length > 1) ? 2 : 1

src/routes/_components/status/StatusMediaAttachments.html

@@ -4,32 +4,30 @@
   {#if sensitiveShown}
   <button id={elementId}
           type="button"
-          class={sensitiveMediaButtonClass}
+          class="status-sensitive-media-button"
           aria-label="Hide sensitive media" >
-    <div class={svgWrapperClass}>
-      <SvgIcon className={sensitiveMediaIconClass}
+    <div class="svg-wrapper">
+      <SvgIcon className="status-sensitive-media-svg"
                href="#fa-eye-slash" />
     </div>
   </button>
   {:else}
     <button id={elementId}
             type="button"
-            class={sensitiveMediaButtonClass}
+            class="status-sensitive-media-button"
             aria-label="Show sensitive media" >
 
-      <div class="{customWarningClass}">
+      <div class="status-sensitive-media-warning">
         <div class="status-sensitive-media-warning-text">
           Sensitive content. Click to show.
         </div>
       </div>
-      <div class={svgWrapperClass}>
-        <SvgIcon className={sensitiveMediaIconClass} href="#fa-eye" />
+      <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}
+  <MediaAttachments {mediaAttachments} {sensitive} {sensitiveShown} {uuid} />
   </div>
 </div>
 {#if enableShortcuts}
@@ -79,14 +77,9 @@
 
   .status-sensitive-media-shown .status-sensitive-media-button {
     position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 90;
-  }
-
-  .status-sensitive-media-shown .status-sensitive-media-button.status-sensitive-media-button-transparent {
     top: 5px;
     left: 5px;
+    z-index: 90;
   }
 
   .status-sensitive-media-hidden .status-sensitive-media-button {
@@ -116,18 +109,10 @@
     color: var(--deemphasized-text-color);
     z-index: 60;
     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 {
+  .status-sensitive-media-container .status-sensitive-media-warning .status-sensitive-media-warning-text {
     background: var(--mask-bg);
     padding: 10px;
     border-radius: 6px;
@@ -145,15 +130,10 @@
   .status-sensitive-media-hidden .svg-wrapper {
     position: absolute;
     background: none;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  .status-sensitive-media-hidden .svg-wrapper.svg-wrapper-transparent {
     top: 5px;
     left: 5px;
+    right: 0;
+    bottom: 0;
   }
 
   .status-sensitive-media-container.grouped-images .svg-wrapper {
@@ -172,11 +152,6 @@
     padding: 6px 10px;
   }
   :global(.status-sensitive-media-container.status-sensitive-media-hidden .status-sensitive-media-svg) {
-    fill: var(--deemphasized-text-color);
-    background: var(--mask-opaque-bg);
-  }
-  :global(.status-sensitive-media-container.status-sensitive-media-hidden
-    .status-sensitive-media-svg.status-sensitive-media-svg-transparent) {
     fill: var(--blurhash-sensitive-text-color);
     background: var(--mask-bg);
   }
@@ -209,7 +184,6 @@
         $largeInlineMedia ? 'not-grouped-images' : 'grouped-images'
       ),
       mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments,
-      canUseBlurhash: ({ $ignoreBlurhash, mediaAttachments }) => !$ignoreBlurhash && mediaAttachments && mediaAttachments.every(media => !!media.blurhash),
       sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid],
       sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => (
         !$neverMarkMediaAsSensitive && ($markMediaAsSensitive || originalStatus.sensitive)
@@ -221,22 +195,6 @@
         }
         return `padding-bottom: ${Math.ceil(mediaAttachments.length / 2) * 29}%;`
       },
-      sensitiveMediaButtonClass: ({ canUseBlurhash }) => classname(
-        'status-sensitive-media-button',
-        canUseBlurhash && 'status-sensitive-media-button-transparent'
-      ),
-      svgWrapperClass: ({ canUseBlurhash }) => classname(
-        'svg-wrapper',
-        canUseBlurhash && 'svg-wrapper-transparent'
-      ),
-      customWarningClass: ({ canUseBlurhash }) => classname(
-        'status-sensitive-media-warning',
-        canUseBlurhash ? 'status-sensitive-media-warning-transparent' : 'status-sensitive-media-warning-opaque'
-      ),
-      sensitiveMediaIconClass: ({ canUseBlurhash }) => classname(
-        'status-sensitive-media-svg',
-        canUseBlurhash && 'status-sensitive-media-svg-transparent'
-      ),
       nCols: ({ mediaAttachments, $largeInlineMedia }) => {
         return (!$largeInlineMedia && mediaAttachments.length > 1) ? 2 : 1
       },

src/routes/_utils/blurhash.js

@@ -35,7 +35,6 @@ async function decodeUsingCanvas (imageData) {
   initCanvas()
   canvasContext2D.putImageData(imageData, 0, 0)
   const blob = await new Promise(resolve => canvas.toBlob(resolve))
-  console.log('blob.size', blob.size)
   return URL.createObjectURL(blob)
 }
 

src/routes/_utils/convertCssPropertyToDataUrl.js

@@ -0,0 +1,22 @@
+const colorsToUrls = new Map()
+let canvas
+let context
+
+export function convertCssPropertyToDataUrl (prop) {
+  const color = getComputedStyle(document.documentElement).getPropertyValue(prop)
+  let url = colorsToUrls.get(color)
+  if (!url) {
+    if (!canvas) {
+      canvas = document.createElement('canvas')
+      canvas.width = 1
+      canvas.height = 1
+      context = canvas.getContext('2d')
+    }
+    context.fillStyle = color
+    context.rect(0, 0, 1, 1)
+    context.fill()
+    url = canvas.toDataURL()
+    colorsToUrls.set(color, url)
+  }
+  return url
+}