https://github.com/bonfire-networks/bonfire-app/issues/792

flavours/classic/config/flavour_assets/hooks/Bonfire.UI.Common.LazyImage.hooks.js

@@ -0,0 +1,31 @@
+/*
+This file was generated by the Surface compiler.
+*/
+
+import { decodeBlurHash } from 'fast-blurhash';
+
+export default {
+  mounted() {
+    // const canvas = document.createElement('canvas');
+    const canvas = this.el.getElementsByTagName('canvas')[0];
+    console.log(canvas)
+    const w = canvas.width || 40
+    const h = canvas.height || 40
+    const default_hash = 'LEHV6nWB2yk8pyo0adR*.7kCMdnj'
+    const hash = this.el.dataset.hash 
+    console.log(hash)
+
+    // decode blurHash image
+    const pixels = decodeBlurHash(hash || default_hash, w, h);
+    console.log(pixels)
+
+    // draw it on canvas
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.createImageData(w, h); 
+
+    imageData.data.set(pixels);
+    console.log(imageData)
+    ctx.putImageData(imageData, 0, 0);
+    // document.body.append(canvas);
+  }
+}

flavours/classic/config/flavour_assets/hooks/index.js

@@ -12,24 +12,26 @@ function ns(hooks, nameSpace) {
 
 import * as c1 from "./Bonfire.Editor.Milkdown.hooks"
 import * as c2 from "./Bonfire.UI.Common.ViewCodeLive.hooks"
-import * as c3 from "./Bonfire.UI.Common.PreviewContentLive.hooks"
-import * as c4 from "./Bonfire.UI.Common.NotificationLive.hooks"
-import * as c5 from "./Bonfire.UI.Common.LoadMoreLive.hooks"
-import * as c6 from "./Bonfire.UI.Common.ChangeLocaleLive.hooks"
-import * as c7 from "./Bonfire.UI.Common.ChangeThemesLive.hooks"
-import * as c8 from "./Bonfire.UI.Common.ComposerLive.hooks"
-import * as c9 from "./Bonfire.UI.Social.Activity.DateAgoLive.hooks"
+import * as c3 from "./Bonfire.UI.Common.LazyImage.hooks"
+import * as c4 from "./Bonfire.UI.Common.PreviewContentLive.hooks"
+import * as c5 from "./Bonfire.UI.Common.NotificationLive.hooks"
+import * as c6 from "./Bonfire.UI.Common.LoadMoreLive.hooks"
+import * as c7 from "./Bonfire.UI.Common.ChangeLocaleLive.hooks"
+import * as c8 from "./Bonfire.UI.Common.ChangeThemesLive.hooks"
+import * as c9 from "./Bonfire.UI.Common.ComposerLive.hooks"
+import * as c10 from "./Bonfire.UI.Social.Activity.DateAgoLive.hooks"
 
 let hooks = Object.assign(
   ns(c1, "Bonfire.Editor.Milkdown"),
   ns(c2, "Bonfire.UI.Common.ViewCodeLive"),
-  ns(c3, "Bonfire.UI.Common.PreviewContentLive"),
-  ns(c4, "Bonfire.UI.Common.NotificationLive"),
-  ns(c5, "Bonfire.UI.Common.LoadMoreLive"),
-  ns(c6, "Bonfire.UI.Common.ChangeLocaleLive"),
-  ns(c7, "Bonfire.UI.Common.ChangeThemesLive"),
-  ns(c8, "Bonfire.UI.Common.ComposerLive"),
-  ns(c9, "Bonfire.UI.Social.Activity.DateAgoLive")
+  ns(c3, "Bonfire.UI.Common.LazyImage"),
+  ns(c4, "Bonfire.UI.Common.PreviewContentLive"),
+  ns(c5, "Bonfire.UI.Common.NotificationLive"),
+  ns(c6, "Bonfire.UI.Common.LoadMoreLive"),
+  ns(c7, "Bonfire.UI.Common.ChangeLocaleLive"),
+  ns(c8, "Bonfire.UI.Common.ChangeThemesLive"),
+  ns(c9, "Bonfire.UI.Common.ComposerLive"),
+  ns(c10, "Bonfire.UI.Social.Activity.DateAgoLive")
 )
 
 export default hooks