From 65759c126b2bae50c144c4cb02559db548e3e88a Mon Sep 17 00:00:00 2001
From: David Battersby <info@davidbattersby.com>
Date: Thu, 2 Nov 2023 19:22:59 +0800
Subject: [PATCH] FIX: add dominant color attribute to chat image uploads
 (#24214)

When uploading images, they are assigned a dominant color which gets used in various places, such as Discourse Hub and the new lightbox. Previously in chat we didn't assign this attribute, so it was defaulting to a null value. We did however use it as an inline CSS style for the image background (which is visible while the image is downloaded).

This change adds data-dominant-color to the uploaded image in chat and uses it correctly within lightbox.
---
 .../discourse/app/lib/lightbox/process-html.js     |  5 ++++-
 .../discourse/components/chat-upload.hbs           |  1 +
 plugins/chat/spec/system/uploads_spec.rb           | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/lib/lightbox/process-html.js b/app/assets/javascripts/discourse/app/lib/lightbox/process-html.js
index 5c9113646c2..9f95e615a17 100644
--- a/app/assets/javascripts/discourse/app/lib/lightbox/process-html.js
+++ b/app/assets/javascripts/discourse/app/lib/lightbox/process-html.js
@@ -54,7 +54,10 @@ export async function processHTML({ container, selector, clickTarget }) {
           .querySelector(SELECTORS.FILE_DETAILS_CONTAINER)
           ?.innerText.trim() || null;
 
-      const _dominantColor = innerImage.dataset?.dominantColor || null;
+      const _dominantColor =
+        item.dataset?.dominantColor ??
+        innerImage.dataset?.dominantColor ??
+        null;
 
       const _cssVars = [
         _dominantColor && `--dominant-color: #${_dominantColor};`,
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-upload.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-upload.hbs
index f96f0cb53e7..24939311a5c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-upload.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-upload.hbs
@@ -8,6 +8,7 @@
     style={{this.imageStyle}}
     loading="lazy"
     tabindex="0"
+    data-dominant-color={{@upload.dominant_color}}
     {{on "load" this.imageLoaded}}
   />
 {{else if (eq this.type this.VIDEO_TYPE)}}
diff --git a/plugins/chat/spec/system/uploads_spec.rb b/plugins/chat/spec/system/uploads_spec.rb
index 102228d3421..7889f1b26b0 100644
--- a/plugins/chat/spec/system/uploads_spec.rb
+++ b/plugins/chat/spec/system/uploads_spec.rb
@@ -39,6 +39,20 @@ describe "Uploading files in chat messages", type: :system do
       expect(Chat::Message.last.uploads.count).to eq(1)
     end
 
+    it "adds dominant color attribute to images" do
+      chat.visit_channel(channel_1)
+      file_path = file_from_fixtures("logo.png", "images").path
+
+      attach_file(file_path) do
+        channel_page.open_action_menu
+        channel_page.click_action_button("chat-upload-btn")
+      end
+
+      channel_page.click_send_message
+
+      expect(channel_page.messages).to have_css(".chat-img-upload[data-dominant-color]", count: 1)
+    end
+
     it "allows uploading multiple files" do
       chat.visit_channel(channel_1)