Added a color for every image that matches the most prominant color i…

…n the image. Now rendering this behind each actual photo to minimized the pop when photos load while scrolling the gallery.
ashleydavis · Jan 20, 2025 · b683bad · b683bad
1 parent 9933985
commit b683bad
Show file tree

Hide file tree

Showing 8 changed files with 412 additions and 16 deletions.
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -80,9 +80,24 @@ i {
 
 /* Gallery */
 
+@keyframes fadeInColorAnimation {
+    from {
+        opacity: 0.2;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.fade-in-color {
+    opacity: 0.2;
+    animation: fadeInColorAnimation 0.1s ease-in forwards;
+}
+
 .fade-in {
     opacity: 0;
-    animation: fadeInAnimation 0.25s ease-in forwards;
+    animation: fadeInAnimation 0.1s ease-in forwards;
 }
 
 @keyframes fadeInAnimation {

diff --git a/packages/defs/src/lib/asset.ts b/packages/defs/src/lib/asset.ts
@@ -104,4 +104,10 @@ export interface IAsset {
     // Data URL containing the micro thumbnail for the asset.
     //
     microDataUrl: string;
+
+    //
+    // The color of the asset, if known.
+    // Helps hide the pop when thumbnails are loaded.
+    //
+    color?: [number, number, number];
 }
diff --git a/packages/user-interface/package.json b/packages/user-interface/package.json
@@ -44,6 +44,7 @@
     "axios": "^0.27.2",
     "blob-util": "^2.0.2",
     "classnames": "^2.5.1",
+    "colorthief": "^2.6.0",
     "dayjs": "^1.11.7",
     "defs": "workspace:*",
     "jszip": "^3.10.1",

diff --git a/packages/user-interface/src/components/gallery-image.tsx b/packages/user-interface/src/components/gallery-image.tsx
@@ -115,6 +115,22 @@ export function GalleryImage({ item, onClick, x, y, width, height }: IGalleryIma
                 }} 
                 />
 
+            {item.color
+                && <div
+                    className="gallery-thumb-container fade-in-color"
+                    style={{
+                        position: "absolute",
+                        left: `${x}px`,
+                        top: `${y}px`,
+                        width: `${width}px`,
+                        height: `${height}px`,
+                        overflow: "hidden",
+                        backgroundColor: `rgb(${item.color[0]}, ${item.color[1]}, ${item.color[2]})`,
+                    }}
+                    >                   
+                </div>
+            }    
+
             {microDataURL
                 && <div
                     className="gallery-thumb-container"

diff --git a/packages/user-interface/src/lib/gallery-item.ts b/packages/user-interface/src/lib/gallery-item.ts
@@ -107,6 +107,12 @@ export interface IGalleryItem {
     // Data URL containing the micro thumbnail for the asset.
     //
     microDataUrl: string;
+
+    //
+    // The color of the asset, if known.
+    // Helps hide the pop when thumbnails are loaded.
+    //
+    color?: [number, number, number];
 }
 
 //