From 85af22fb34a433b694f4c142d3e6d843130d135a Mon Sep 17 00:00:00 2001
From: David Llewellyn-Jones <david.llewellyn-jones@jolla.com>
Date: Mon, 18 Apr 2022 13:52:33 +0300
Subject: [PATCH] Support configurable branding of graphics

Allows the image and icon folders to be set as part of the branding
configuration.
---
 branding.json                                           | 6 +++++-
 build.js                                                | 8 ++++++--
 src/ui/modals/specific-modals/DeveloperModeModal.svelte | 5 +++--
 src/ui/partials/Animation.svelte                        | 5 +++--
 src/ui/partials/Yumi.svelte                             | 4 +++-
 src/ui/views/Done.svelte                                | 2 +-
 src/ui/views/ManualDownload.svelte                      | 3 ++-
 src/ui/views/NotSupported.svelte                        | 2 +-
 src/ui/views/SelectOs.svelte                            | 4 ++--
 src/ui/views/UserAction.svelte                          | 5 +++--
 src/ui/views/WaitForDevice.svelte                       | 2 +-
 11 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/branding.json b/branding.json
index e13c5aea..03a26ed9 100644
--- a/branding.json
+++ b/branding.json
@@ -27,5 +27,9 @@
   "support-url": "https://askubuntu.com/questions/tagged/ubuntu-touch",
   "contact-name": "Telegram",
   "contact-url": "https://t.me/WelcomePlus",
-  "update-url": "https://api.github.com/repos/ubports/ubports-installer/releases/latest"
+  "update-url": "https://api.github.com/repos/ubports/ubports-installer/releases/latest",
+  "screens": "public/screens",
+  "images": "public/img",
+  "icons": "build/icons/",
+  "logo": "yumi.svg"
 }
diff --git a/build.js b/build.js
index e5de7311..fef99c43 100755
--- a/build.js
+++ b/build.js
@@ -69,9 +69,13 @@ var buildConfig = {
   publish: [],
   files: [
     "src/**/*",
-    "public/**/*",
+    "public/*",
+    "public/build/**/*",
+    "public/fonts/**/*",
+    `${branding.screens}/**/*`,
+    `${branding.images}/**/*`,
     "node_modules/**/*",
-    "build/icons/icon.*",
+    `${branding.icons}/icon.*`,
     "branding.json",
     // exclude binaries for other operating systems
     ...PLATFORMS.filter(p => p !== opts.os).map(
diff --git a/src/ui/modals/specific-modals/DeveloperModeModal.svelte b/src/ui/modals/specific-modals/DeveloperModeModal.svelte
index 4b7f80b7..ee0d6da6 100644
--- a/src/ui/modals/specific-modals/DeveloperModeModal.svelte
+++ b/src/ui/modals/specific-modals/DeveloperModeModal.svelte
@@ -1,6 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte";
   import Modal from "./Modal.svelte";
+  import branding from "../../../../branding.json";
 
   const dispatch = createEventDispatcher();
   const close = () => dispatch("close");
@@ -41,7 +42,7 @@
           </div>
           <div class="col-6">
             <img
-              src="./screens/ubuntu-dev-mode.gif"
+              src="../{branding.screens}/ubuntu-dev-mode.gif"
               alt="ubuntu-dev-mode"
               style="width: 100%"
             />
@@ -83,7 +84,7 @@
           </div>
           <div class="col-6">
             <img
-              src="./screens/android-dev-mode.gif"
+              src="../{branding.screens}/android-dev-mode.gif"
               alt="android-dev-mode"
               style="width: 100%"
             />
diff --git a/src/ui/partials/Animation.svelte b/src/ui/partials/Animation.svelte
index 39b03a0b..70146dc9 100644
--- a/src/ui/partials/Animation.svelte
+++ b/src/ui/partials/Animation.svelte
@@ -4,6 +4,7 @@
   import { tsParticles } from "tsparticles";
   import CircuitBoard from "./CircuitBoard.svelte";
   import Squares from "./Squares.svelte";
+  import branding from "../../../branding.json";
 
   onMount(updateAnimations);
   animationType.subscribe(updateAnimations);
@@ -98,12 +99,12 @@
   }
 
   .download-animation {
-    background-image: url("../img/arrow-down.png");
+    background-image: url("../../{branding.images}/arrow-down.png");
     animation: download-animation 8s linear infinite;
   }
 
   .push-animation {
-    background-image: url("../img/arrow-right.png");
+    background-image: url("../../{branding.images}/arrow-right.png");
     animation: push-animation 10s linear infinite;
   }
 
diff --git a/src/ui/partials/Yumi.svelte b/src/ui/partials/Yumi.svelte
index 143acc3e..664d8731 100644
--- a/src/ui/partials/Yumi.svelte
+++ b/src/ui/partials/Yumi.svelte
@@ -1,4 +1,6 @@
 <script>
+  import branding from "../../../branding.json";
+
   let ubpRobotFoot = true;
   let ubpRobotSide = false;
 
@@ -26,7 +28,7 @@
 </script>
 
 <img
-  src="./img/yumi.svg"
+  src="../{branding.images}/{branding.logo}"
   alt="yumi"
   class="yumi"
   class:yumi-foot={ubpRobotFoot}
diff --git a/src/ui/views/Done.svelte b/src/ui/views/Done.svelte
index aea81b1b..0ff1e85c 100644
--- a/src/ui/views/Done.svelte
+++ b/src/ui/views/Done.svelte
@@ -6,7 +6,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen6.jpg"
+      src="../{branding.screens}/Screen6.jpg"
       alt="Screen6"
       style="height: 350px; margin: auto; display: block;"
     />
diff --git a/src/ui/views/ManualDownload.svelte b/src/ui/views/ManualDownload.svelte
index 1becc418..53395c30 100644
--- a/src/ui/views/ManualDownload.svelte
+++ b/src/ui/views/ManualDownload.svelte
@@ -4,6 +4,7 @@
     manualDownloadGroup,
     eventObject
   } from "../../stores.mjs";
+  import branding from "../../../branding.json";
 
   let downloadedFile;
 
@@ -18,7 +19,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen6.jpg"
+      src="../{branding.screens}/Screen6.jpg"
       alt="Screen6"
       style="height: 350px; margin: auto; display: block;"
     />
diff --git a/src/ui/views/NotSupported.svelte b/src/ui/views/NotSupported.svelte
index e483588c..329cf7a3 100644
--- a/src/ui/views/NotSupported.svelte
+++ b/src/ui/views/NotSupported.svelte
@@ -10,7 +10,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen5.jpg"
+      src="../{branding.screens}/Screen5.jpg"
       alt="Screen5"
       style="height: 350px; margin: auto; display: block;"
     />
diff --git a/src/ui/views/SelectOs.svelte b/src/ui/views/SelectOs.svelte
index 63cc203a..d7eb764f 100644
--- a/src/ui/views/SelectOs.svelte
+++ b/src/ui/views/SelectOs.svelte
@@ -1,6 +1,6 @@
 <script>
   const { ipcRenderer } = require("electron");
-  const branding = require("../../../branding.json");
+  import branding from "../../../branding.json";
 
   import {
     osSelectOptions,
@@ -18,7 +18,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen6.jpg"
+      src="../{branding.screens}/Screen6.jpg"
       alt="Screen6"
       style="height: 350px; margin: auto; display: flex;"
     />
diff --git a/src/ui/views/UserAction.svelte b/src/ui/views/UserAction.svelte
index cfd11a7d..34d744f8 100644
--- a/src/ui/views/UserAction.svelte
+++ b/src/ui/views/UserAction.svelte
@@ -1,13 +1,14 @@
 <script>
   import { userActionEventObject, actionData } from "../../stores.mjs";
+  import branding from "../../../branding.json";
 </script>
 
 <div class="row">
   <div class="col-6">
     <img
       src={$actionData.image
-        ? `./img/${$actionData.image}.jpg`
-        : "./screens/Screen6.jpg"}
+        ? `../${branding.images}/${$actionData.image}.jpg`
+        : `../${branding.screens}/Screen6.jpg`}
       alt="Screen6"
       style="height: 350px; margin: auto; display: block;"
     />
diff --git a/src/ui/views/WaitForDevice.svelte b/src/ui/views/WaitForDevice.svelte
index 41ba122b..4c917c29 100644
--- a/src/ui/views/WaitForDevice.svelte
+++ b/src/ui/views/WaitForDevice.svelte
@@ -22,7 +22,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen1.jpg"
+      src="../{branding.screens}/Screen1.jpg"
       alt="screen1"
       style="height: 350px; margin: auto;"
     />