From 12b943e23a7e62cfb74e0c3f561ee40c3f7818ae Mon Sep 17 00:00:00 2001
From: Savvas Dalkitsis <kurosavvas@gmail.com>
Date: Wed, 27 Nov 2024 19:16:52 +0000
Subject: [PATCH] Adding support for blurhash

---
 src/actions/photosActions.types.ts                | 1 +
 src/components/react-pig/components/Tile/Tile.jsx | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/src/actions/photosActions.types.ts b/src/actions/photosActions.types.ts
index 3e0f4a37..8f6bd654 100644
--- a/src/actions/photosActions.types.ts
+++ b/src/actions/photosActions.types.ts
@@ -17,6 +17,7 @@ export enum MediaType {
 export const PigPhotoSchema = z.object({
   id: z.string(),
   dominantColor: z.string().optional(),
+  blurhash: z.string().optional(),
   url: z.string().optional(),
   location: z.string().optional(),
   date: z.string().optional().nullable(),
diff --git a/src/components/react-pig/components/Tile/Tile.jsx b/src/components/react-pig/components/Tile/Tile.jsx
index 3719894d..0b3e90ce 100644
--- a/src/components/react-pig/components/Tile/Tile.jsx
+++ b/src/components/react-pig/components/Tile/Tile.jsx
@@ -1,6 +1,7 @@
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 import { animated, useSpring } from "react-spring";
+import { Blurhash } from "react-blurhash";
 
 import getImageHeight from "../../utils/getImageHeight";
 import getTileMeasurements from "../../utils/getTileMeasurements";
@@ -99,6 +100,13 @@ const Tile = React.memo(
           transform: transform.to(t => t),
         }}
       >
+        {(item.blurhash) && (
+         <Blurhash
+            hash={item.blurhash}
+            width={item.style.width}
+            height={item.style.height}
+          />
+        )}
         {useLqip && !isTemp && (
           // LQIP
           <img
@@ -190,6 +198,7 @@ Tile.defaultProps = {
 const ItemType = PropTypes.shape({
   id: PropTypes.string,
   dominantColor: PropTypes.string,
+  blurhash: PropTypes.string,
   isTemp: PropTypes.bool,
   url: PropTypes.string,
   type: PropTypes.string,