From 5a633c93f691c31de5f264c63430ee90a642ffcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADt=20Semr=C3=A1d?=
 <76877124+VitroidFPV@users.noreply.github.com>
Date: Tue, 5 Sep 2023 20:15:43 +0200
Subject: [PATCH] Fix: Mixer preview images in web builds (#3567)

* Fix: Mixer preview images in web builds

* Fix: Mixer preview images in web builds

* Refactor: Use function
---
 src/css/tabs/motors.less |  2 +-
 src/js/tabs/motors.js    | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/css/tabs/motors.less b/src/css/tabs/motors.less
index 07f673a643..baf15648fa 100644
--- a/src/css/tabs/motors.less
+++ b/src/css/tabs/motors.less
@@ -54,7 +54,7 @@
 		border-bottom: 1px solid var(--subtleAccent);
 	}
 	.mixerPreview {
-		img {
+		svg {
 			width: 150px;
 			height: 150px;
 			margin-left: 15px;
diff --git a/src/js/tabs/motors.js b/src/js/tabs/motors.js
index 1950e4f880..71a46352cc 100644
--- a/src/js/tabs/motors.js
+++ b/src/js/tabs/motors.js
@@ -227,9 +227,17 @@ motors.initialize = async function (callback) {
         lines.attr('d', graphHelpers.line);
     }
 
+    function replace_mixer_preview(imgSrc) {
+        $.get(imgSrc, function(data) {
+            const svg = $(data).find('svg');
+            $('.mixerPreview').html(svg);
+        }, 'xml');
+    }
+
     function update_model(mixer) {
         const imgSrc = getMixerImageSrc(mixer, FC.MIXER_CONFIG.reverseMotorDir);
-        $('.mixerPreview img').attr('src', imgSrc);
+
+        replace_mixer_preview(imgSrc);
 
         const motorOutputReorderConfig = new MotorOutputReorderConfig(100);
         const domMotorOutputReorderDialogOpen = $('#motorOutputReorderDialogOpen');
@@ -350,10 +358,8 @@ motors.initialize = async function (callback) {
         mixerListElement.sortSelect();
 
         function refreshMixerPreview() {
-            const mixer = FC.MIXER_CONFIG.mixer;
-            const reverse = FC.MIXER_CONFIG.reverseMotorDir ? "_reversed" : "";
-
-            $('.mixerPreview img').attr('src', `./resources/motor_order/${mixerList[mixer - 1].image}${reverse}.svg`);
+            const imgSrc = getMixerImageSrc(FC.MIXER_CONFIG.mixer, FC.MIXER_CONFIG.reverseMotorDir);
+            replace_mixer_preview(imgSrc);
         }
 
         const reverseMotorSwitchElement = $('#reverseMotorSwitch');