From 3a2371333a7ec11df9541be54e5dc8a4bad8de96 Mon Sep 17 00:00:00 2001
From: vlst <vlst@odoo.com>
Date: Wed, 14 Jun 2023 13:07:28 +0200
Subject: [PATCH] [IMP] point_of_sale: improve loading of customer display
 image

The customer display loads very slowly in the RemoteDisplay mode.
This is in big part because of the large size of the bg image.
This image is loaded on every single update of the customer display.

This PR makes it so the bg image is loaded directly from the server,
in order for it to be cached on the customer display, thus improving
considerately the response time.

closes odoo/odoo#124998

Signed-off-by: Robin Heinz (rhe) <rhe@odoo.com>
---
 .../customer_display/customer_display_template.xml    | 10 ++++++----
 .../point_of_sale/static/src/app/store/pos_store.js   | 11 -----------
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/addons/point_of_sale/static/src/app/customer_display/customer_display_template.xml b/addons/point_of_sale/static/src/app/customer_display/customer_display_template.xml
index 002c2fcdc95..a9c52659d1e 100644
--- a/addons/point_of_sale/static/src/app/customer_display/customer_display_template.xml
+++ b/addons/point_of_sale/static/src/app/customer_display/customer_display_template.xml
@@ -29,25 +29,27 @@
     </t>
 
     <t t-name="point_of_sale.CustomerFacingDisplayNoOrder">
+        <t t-set="backgroundImageURL" t-value="pos.config.iface_customer_facing_display_background_image_1920 ? 'url(/web/image/pos.config/' + pos.config.id + '/iface_customer_facing_display_background_image_1920)' : 'none'" />
         <t t-call="point_of_sale.CustomerFacingDisplayHead" />
 
-        <div class="pos-customer_facing_display pos-no-order pos-palette_01" t-attf-style="background-image: #{backgroundImageCSSValue};">
+        <div class="pos-customer_facing_display pos-no-order pos-palette_01" t-attf-style="background-image: #{backgroundImageURL};">
             <!-- The remote display replaces pos-customer_facing_display contents, but not it  -->
             <!-- Therefore, pos-no-order is an inner div -->
-            <div class="pos-no-order" t-attf-style="background-image: #{backgroundImageCSSValue};">
+            <div class="pos-no-order" t-attf-style="background-image: #{backgroundImageURL};">
                 <div class="pos-company_logo" t-attf-style="background-image:url(/logo?company=#{pos.company.id})" />
             </div>
         </div>
     </t>
 
     <t t-name="point_of_sale.CustomerFacingDisplayOrder">
+        <t t-set="backgroundImageURL" t-value="pos.config.iface_customer_facing_display_background_image_1920 ? 'url(/web/image/pos.config/' + pos.config.id + '/iface_customer_facing_display_background_image_1920)' : 'none'" />
         <!-- Header -->
         <t t-call="point_of_sale.CustomerFacingDisplayHead" />
 
         <div class="pos-customer_facing_display pos-palette_01">
             <!-- Only visible in portrait orientation -->
             <div class="pos-portrait-top">
-                <div class="pos-header" t-attf-style="background-image: #{backgroundImageCSSValue};">
+                <div class="pos-header" t-attf-style="background-image: {{backgroundImageURL}};">
                     <div class="pos-company_logo" t-attf-style="background-image:url(/logo?company=#{pos.company.id})" />
                 </div>
             </div>
@@ -57,7 +59,7 @@
                 <t t-call="point_of_sale.CustomerFacingDisplayMainContainer" />
             </div>
 
-            <div class="pos-payment_info" t-attf-style="background-image: #{backgroundImageCSSValue};">
+            <div class="pos-payment_info" t-attf-style="background-image: {{backgroundImageURL}};">
                 <!-- Company Logo only visible in landscape orientation -->
                 <div class="pos-company_logo" t-attf-style="background-image:url(/logo?company=#{pos.company.id})" />
 
diff --git a/addons/point_of_sale/static/src/app/store/pos_store.js b/addons/point_of_sale/static/src/app/store/pos_store.js
index 00bf8742da4..4e48ad3d401 100644
--- a/addons/point_of_sale/static/src/app/store/pos_store.js
+++ b/addons/point_of_sale/static/src/app/store/pos_store.js
@@ -1021,21 +1021,11 @@ export class PosStore extends Reactive {
      * @returns {string}
      */
     async customerDisplayHTML(closeUI = false) {
-        const backgroundImageBase64 =
-            this.config.iface_customer_facing_display_background_image_1920;
-        let backgroundImageCSSValue;
-        if (backgroundImageBase64) {
-            backgroundImageCSSValue = "url('data:image/png;base64," + backgroundImageBase64 + "')";
-        } else {
-            backgroundImageCSSValue = "none";
-        }
-
         const order = this.get_order();
         if (closeUI || !order) {
             return renderToString("point_of_sale.CustomerFacingDisplayNoOrder", {
                 pos: this,
                 origin: window.location.origin,
-                backgroundImageCSSValue,
             });
         }
 
@@ -1053,7 +1043,6 @@ export class PosStore extends Reactive {
             pos: this,
             formatCurrency: this.env.utils.formatCurrency,
             origin: window.location.origin,
-            backgroundImageCSSValue,
             order,
             productImages,
         });