diff --git a/package.json b/package.json index f6e74baf..d0d6735c 100644 --- a/package.json +++ b/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", @@ -109,7 +110,8 @@ "mocha": "^6.1.4", "now": "^15.7.0", "standard": "^13.1.0", - "testcafe": "^1.2.1" + "testcafe": "^1.2.1", + "worker-loader": "^2.0.0" }, "engines": { "node": ">= 8" @@ -150,7 +152,10 @@ "customElements", "AbortController", "matchMedia", - "MessageChannel" + "MessageChannel", + "ImageData", + "OffscreenCanvas", + "postMessage" ], "ignore": [ "dist", diff --git a/src/routes/_components/LazyImage.html b/src/routes/_components/LazyImage.html index 6644ead0..4ab18d58 100644 --- a/src/routes/_components/LazyImage.html +++ b/src/routes/_components/LazyImage.html @@ -53,7 +53,8 @@ height: void 0, ariaHidden: false, alt: '', - title: '' + title: '', + blurhash: void 0 }), computed: { computedStyle: ({ background }) => { @@ -71,7 +72,7 @@ return `object-position: ${coordsToPercent(focus.x)}% ${100 - coordsToPercent(focus.y)}%;` }, fillFixSize: ({ forceSize, $largeInlineMedia }) => !$largeInlineMedia && !forceSize, - displaySrc: ({ error, src, fallback }) => ((error && fallback) || src) + displaySrc: ({ blurhash, error, src, fallback }) => (blurhash || (error && fallback) || src) } } diff --git a/src/routes/_components/NonAutoplayGifv.html b/src/routes/_components/NonAutoplayGifv.html index 7d3f893c..174f938b 100644 --- a/src/routes/_components/NonAutoplayGifv.html +++ b/src/routes/_components/NonAutoplayGifv.html @@ -17,6 +17,7 @@ alt={label || ''} title={label || ''} src={staticSrc} + blurhash={blurhash} fallback={oneTransparentPixel} {width} {height} @@ -24,7 +25,9 @@ {focus} /> {/if} - + {#if !blurhash} + + {/if} @@ -55,6 +56,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 diff --git a/src/routes/_components/status/StatusMediaAttachments.html b/src/routes/_components/status/StatusMediaAttachments.html index cf0480e3..370771c4 100644 --- a/src/routes/_components/status/StatusMediaAttachments.html +++ b/src/routes/_components/status/StatusMediaAttachments.html @@ -10,28 +10,32 @@ - {:else} {/if} + {#if sensitiveShown || canUseBlurhash} + + {/if} {#if enableShortcuts} {/if} {:else} - + {/if}