From 0ea02bd9165e4774bba7fe702d912eaf7f48ca45 Mon Sep 17 00:00:00 2001
From: Antoine C <mixxx@acolombier.dev>
Date: Tue, 17 Sep 2024 19:38:27 +0100
Subject: [PATCH] WIP

---
 .../Traktor Kontrol S4 MK3.bulk.xml           |  35 --
 .../Traktor Kontrol S4 MK3.hid.xml            | 183 ++++++++
 res/controllers/Traktor-Kontrol-S4-MK3.js     | 283 +++++++++++--
 .../S4MK3/AdvancedScreen.qml                  |   5 -
 .../S4MK3/Screens/Defines/Colors.qml          |   1 +
 .../S4MK3/Screens/Defines/Settings.qml        |  10 +-
 .../Screens/S4MK3/Browser/BrowserFooter.qml   |   5 +-
 .../Screens/S4MK3/Browser/TrackFooter.qml     |   5 +-
 .../S4MK3/Screens/S4MK3/DeckScreen.qml        |   5 +-
 .../S4MK3/Screens/S4MK3/Overlays/CueInfo.qml  |   1 -
 .../Screens/S4MK3/Overlays/GridControls.qml   |   8 +-
 .../Screens/S4MK3/Overlays/JumpControls.qml   |  56 ++-
 .../Screens/S4MK3/Overlays/LoopControls.qml   |   6 +-
 .../S4MK3/Overlays/QuickFXSelector.qml        | 151 +++++++
 .../Screens/S4MK3/Overlays/RollControls.qml   |   6 +-
 .../Screens/S4MK3/ViewModels/DeckInfo.qml     | 302 +++++++++++---
 .../S4MK3/Screens/S4MK3/Views/BrowserView.qml |  95 ++++-
 .../S4MK3/Screens/S4MK3/Views/Colors.qml      |   3 +-
 .../S4MK3/Screens/S4MK3/Views/StemDeck.qml    |   5 +-
 .../S4MK3/Screens/S4MK3/Views/TrackDeck.qml   |  10 +-
 .../S4MK3/Waveform/StemColorIndicators.qml    |  10 +-
 .../S4MK3/Waveform/WaveformContainer.qml      |   6 +-
 .../Screens/S4MK3/Widgets/DeckHeader.qml      |  57 +--
 .../S4MK3/Screens/S4MK3/Widgets/LoopSize.qml  |   8 +-
 .../Screens/S4MK3/Widgets/StemOverlay.qml     | 394 ++++++++++--------
 src/qml/qmlchainpresetmodel.cpp               |   7 +-
 26 files changed, 1257 insertions(+), 400 deletions(-)
 create mode 100755 res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/QuickFXSelector.qml

diff --git a/res/controllers/Traktor Kontrol S4 MK3.bulk.xml b/res/controllers/Traktor Kontrol S4 MK3.bulk.xml
index bb7be94f1f6b..65fa74a745d3 100644
--- a/res/controllers/Traktor Kontrol S4 MK3.bulk.xml	
+++ b/res/controllers/Traktor Kontrol S4 MK3.bulk.xml	
@@ -87,41 +87,6 @@
                     label="deckDWaveformColour"/>
             </row>
 
-            <row>
-                <option
-                    variable="deckAColour"
-                    type="enum"
-                    default="10"
-                    label="deckAColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-                <option
-                    variable="deckBColour"
-                    type="enum"
-                    default="10"
-                    label="deckBColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-                <option
-                    variable="deckCColour"
-                    type="enum"
-                    default="2"
-                    label="deckCColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-                <option
-                    variable="deckDColour"
-                    type="enum"
-                    default="2"
-                    label="deckDColour">
-                    <value label="Man in a mask">mask</value>
-                    <value label="Mixxx" default="..">mixxx</value>
-                </option>
-            </row>
-
             <row>
                 <option
                     variable="alwaysShowTempoInfo"
diff --git a/res/controllers/Traktor Kontrol S4 MK3.hid.xml b/res/controllers/Traktor Kontrol S4 MK3.hid.xml
index 4efc26d70413..7d6883a2e236 100644
--- a/res/controllers/Traktor Kontrol S4 MK3.hid.xml	
+++ b/res/controllers/Traktor Kontrol S4 MK3.hid.xml	
@@ -395,6 +395,189 @@
                 </option>
             </row>
         </group>
+
+        <group label="Beatjump Size">
+            <row orientation="vertical">
+                <option
+                    variable="beatJumpSize1"
+                    type="enum"
+                    label="First Pad">
+                    <value label="Use current beatjump size" default="true">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The top left or pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize2"
+                    type="enum"
+                    label="Second Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4" default="true">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The top left second pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize3"
+                    type="enum"
+                    label="Third Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4" default="true">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8" default="true">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The top right second pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize4"
+                    type="enum"
+                    label="Fourth Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2" default="true">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16" default="true">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The top right pad button.</description>
+                </option>
+            </row>
+            <row orientation="vertical">
+                <option
+                    variable="beatJumpSize5"
+                    type="enum"
+                    label="Fifth Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32" default="true">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The bottom left pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize6"
+                    type="enum"
+                    label="Sixth Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2" default="true">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64" default="true">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The bottom left second pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize7"
+                    type="enum"
+                    label="Seventh Pad">
+                    <value label="Use current beatjump size">half</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4" >4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size" default="true">half</value>
+                    <value label="Double beatjump size">double</value>
+                    <description>The bottom right second pad button.</description>
+                </option>
+                <option
+                    variable="beatJumpSize8"
+                    type="enum"
+                    label="Eighth Pad">
+                    <value label="Use current beatjump size">beatjump</value>
+                    <value label="1/32">0.03125</value>
+                    <value label="1/16">0.0625</value>
+                    <value label="1/8">0.125</value>
+                    <value label="1/4">0.25</value>
+                    <value label="1/2">0.5</value>
+                    <value label="1">1</value>
+                    <value label="2">2</value>
+                    <value label="4">4</value>
+                    <value label="8">8</value>
+                    <value label="16">16</value>
+                    <value label="32">32</value>
+                    <value label="64">64</value>
+                    <value label="128">128</value>
+                    <value label="Halve beatjump size">half</value>
+                    <value label="Double beatjump size" default="true">double</value>
+                    <description>The bottom right pad button.</description>
+                </option>
+            </row>
+        </group>
         <group label="Library">
             <row orientation="vertical">
                 <option
diff --git a/res/controllers/Traktor-Kontrol-S4-MK3.js b/res/controllers/Traktor-Kontrol-S4-MK3.js
index 33a61f21634f..51403cafd1ea 100644
--- a/res/controllers/Traktor-Kontrol-S4-MK3.js
+++ b/res/controllers/Traktor-Kontrol-S4-MK3.js
@@ -123,8 +123,7 @@ const MixerControlsMixAuxOnShift = !!engine.getSetting("mixerControlsMicAuxOnShi
 // Default: false
 const UseBeatloopRollInsteadOfSampler = !!engine.getSetting("useBeatloopRollInsteadOfSampler");
 
-// Predefined beatlooproll sizes. Note that if you use AddLoopHalveAndDoubleOnBeatloopRollTab, the first and
-// last size will be ignored
+// Predefined beatlooproll sizes.
 const BeatLoopRolls = [
     engine.getSetting("beatLoopRollsSize1") || 1/8,
     engine.getSetting("beatLoopRollsSize2") || 1/4,
@@ -136,6 +135,18 @@ const BeatLoopRolls = [
     engine.getSetting("beatLoopRollsSize8") || "double"
 ];
 
+// Predefined beatjump.
+const BeatJumps = [
+    engine.getSetting("beatJumpSize1") || 1,
+    engine.getSetting("beatJumpSize2") || 2,
+    engine.getSetting("beatJumpSize3") || 4,
+    engine.getSetting("beatJumpSize4") || 8,
+    engine.getSetting("beatJumpSize5") || 16,
+    engine.getSetting("beatJumpSize6") || 32,
+    engine.getSetting("beatJumpSize7") || 64,
+    engine.getSetting("beatJumpSize8") || "beatjump"
+];
+
 
 // Define the speed of the jogwheel. This will impact the speed of the LED playback indicator, the scratch, and the speed of
 // the motor if enable. Recommended value are 33 + 1/3 or 45.
@@ -229,11 +240,16 @@ const wheelTicksPerTimerTicksToRevolutionsPerSecond = wheelTimerTicksPerSecond /
 
 // The active tab ID. This is used when SharedDataAPI is active, to communicate with the screens which tab is currently selected.
 const ActiveTabPadID = {
-    record: 8,
+    jump: 1,
+    hotcue: 2,
+    roll: 3,
     samples: 4,
+    loop: 5,
     mute: 7,
-    stems: 5,
-    cue: 11,
+    record: 8,
+    tone: 11,
+    fxbank1: 12,
+    fxbank2: 13,
 };
 
 const wheelLEDmodes = {
@@ -514,6 +530,12 @@ class Deck extends ComponentContainer {
         }
         this.secondDeckModes = null;
         this.selectedHotcue = null;
+        if (UseSharedDataAPI) {
+            const data = engine.getSharedData() || {};
+            if (!data.selectedHotcue) { return; }
+            data.selectedHotcue[this.group] = this.selectedHotcue;
+            engine.setSharedData(data);
+        }
     }
     toggleDeck() {
         if (this.decks === undefined) {
@@ -538,6 +560,14 @@ class Deck extends ComponentContainer {
         case moveModes.hotcueColor:
             this.moveMode = null;
             this.selectedHotcue = null;
+
+            if (UseSharedDataAPI) {
+                const data = engine.getSharedData() || {};
+                if (data.selectedHotcue) {
+                    data.selectedHotcue[this.group] = this.selectedHotcue;
+                    engine.setSharedData(data);
+                }
+            }
             break;
         }
 
@@ -840,6 +870,13 @@ class HotcueButton extends PushButton {
     input(pressed) {
         if (this.deck.moveMode === moveModes.hotcueColor) {
             this.deck.selectedHotcue = pressed ? this.number : null;
+            if (UseSharedDataAPI) {
+                const data = engine.getSharedData() || {};
+                if (!data.selectedHotcue) { return; }
+                data.selectedHotcue[this.group] = this.deck.selectedHotcue;
+                engine.setSharedData(data);
+            }
+
         } else {
             engine.setValue(this.group, "scratch2_enable", false);
             engine.setValue(this.group, this.inKey, pressed);
@@ -969,18 +1006,31 @@ class StemButton extends PushButton {
             return;
         }
         if (this.shifted && pressed) {
-            script.toggleControl(stemChannel(this.group, this.number), "mute");
+            script.toggleControl(stemChannel(this.group, this.number - 1), "mute");
         }
         if (!this.shifted) {
-            this.deck.selectedStem[this.number] = pressed;
+            this.deck.selectedStem[this.number - 1] = pressed;
+            if (UseSharedDataAPI) {
+                const data = engine.getSharedData() || {};
+                if (!data.selectedStems) { return; }
+                data.selectedStems[this.group] = this.deck.selectedStem;
+                engine.setSharedData(data);
+            }
         }
         if (!this.shifted && pressed && this.deck.mixer.firstPressedFxSelector !== null) {
             const presetNumber = this.deck.mixer.calculatePresetNumber();
             this.color = QuickEffectPresetColors[presetNumber - 1];
-            engine.setValue(quickFxChannel(stemChannel(this.group, this.number)), "loaded_chain_preset", presetNumber + 1);
+            engine.setValue(quickFxChannel(stemChannel(this.group, this.number - 1)), "loaded_chain_preset", presetNumber + 1);
             this.deck.mixer.firstPressedFxSelector = null;
             this.deck.mixer.secondPressedFxSelector = null;
             this.deck.mixer.resetFxSelectorColors();
+
+            if (!UseSharedDataAPI) { return; }
+
+            const data = engine.getSharedData() || {};
+            if (!data.selectedQuickFX === undefined) { return; }
+            data.selectedQuickFX = null;
+            engine.setSharedData(data);
         }
     }
     output() {
@@ -992,7 +1042,7 @@ class StemButton extends PushButton {
     }
     outConnect() {
         if (undefined !== this.group) {
-            const muteConnection = engine.makeConnection(stemChannel(this.group, this.number), "mute", (mute) => {
+            const muteConnection = engine.makeConnection(stemChannel(this.group, this.number - 1), "mute", (mute) => {
                 this.muted = mute;
                 this.output();
             });
@@ -1001,7 +1051,7 @@ class StemButton extends PushButton {
             } else {
                 console.warn(`Unable to connect '${stemChannel(this.group, this.number)}.mute' to the controller output. The control appears to be unavailable.`);
             }
-            const colorConnection = engine.makeConnection(stemChannel(this.group, this.number), "color", (color) => {
+            const colorConnection = engine.makeConnection(stemChannel(this.group, this.number - 1), "color", (color) => {
                 this.color = this.colorMap.getValueForNearestColor(color);
                 this.output();
             });
@@ -1023,6 +1073,52 @@ class StemButton extends PushButton {
     }
 }
 
+class StemMuteButton extends PushButton {
+    constructor(options) {
+        if (options.number === undefined || !Number.isInteger(options.number) || options.number < 1 || options.number > 4) {
+            throw Error("StemMuteButton must have a number property of an integer between 1 and 4");
+        }
+        super(options);
+        this.color = 0;
+        this.muted = 0;
+        this.outConnect();
+    }
+    output() {
+        if (!this.enabled) {
+            this.send(0);
+        } else {
+            this.send(LedColors.white + (this.muted ? this.brightnessOff : this.brightnessOn));
+        }
+    }
+    input(pressed) {
+        if (pressed) {
+            script.toggleControl(stemChannel(this.group, this.number - 1), "mute");
+        }
+    }
+    outConnect() {
+        if (undefined !== this.group) {
+            const muteConnection = engine.makeConnection(stemChannel(this.group, this.number - 1), "mute", (mute) => {
+                this.muted = mute;
+                this.output();
+            });
+            if (muteConnection) {
+                this.outConnections[0] = muteConnection;
+            } else {
+                console.warn(`Unable to connect '${stemChannel(this.group, this.number)}.mute' to the controller output. The control appears to be unavailable.`);
+            }
+            const enabledConnection = engine.makeConnection(this.group, "stem_count", (count) => {
+                this.enabled = count >= this.number;
+                this.output();
+            });
+            if (enabledConnection) {
+                this.outConnections[1] = enabledConnection;
+            } else {
+                console.warn(`Unable to connect '${this.group}.stem_count' to the controller output. The control appears to be unavailable.`);
+            }
+        }
+    }
+}
+
 /*
  * Represent a pad button that will trigger a pre-defined beatloop size as set in BeatLoopRolls.
  */
@@ -1079,6 +1175,61 @@ class BeatLoopRollButton extends TriggerButton {
     }
 }
 
+/*
+ * Represent a pad button that will trigger a pre-defined beatjump as set in BeatJumps.
+ */
+class BeatJumpButton extends TriggerButton {
+    constructor(options) {
+        if (options.number === undefined || !Number.isInteger(options.number) || options.number < 0 || options.number > 7) {
+            throw Error("BeatJumpButton must have a number property of an integer between 0 and 7");
+        }
+        if (BeatJumps[options.number] === "beatjump") {
+            options.key = "beatjump_forward";
+        } else if (BeatJumps[options.number] === "half") {
+            options.key = "beatjump_size_halve";
+        } else if (BeatJumps[options.number] === "double") {
+            options.key = "beatjump_size_double";
+        } else {
+            const size = parseFloat(BeatJumps[options.number]);
+            if (isNaN(size)) {
+                throw Error(`BeatJumpButton ${options.number}'s size "${BeatJumps[options.number]}" is invalid. Must be a float, or the literal 'beatjump', 'half' or 'double'`);
+            }
+            options.key = `beatjump_${size}_forward`;
+        }
+        super(options);
+        if (this.deck === undefined) {
+            throw Error("BeatJumpButton must have a deck attached to it");
+        }
+
+        this.outConnect();
+    }
+    shift() {
+        if (BeatJumps[this.number] === "beatjump") {
+            this.setKey("beatjump_backward");
+        } else if (!isNaN(parseFloat(BeatJumps[this.number]))) {
+            const size = parseFloat(BeatJumps[this.number]);
+            this.setKey(`beatjump_${size}_backward`);
+        }
+    }
+    unshift() {
+        if (BeatJumps[this.number] === "beatjump") {
+            this.setKey("beatjump_forward");
+        } else if (!isNaN(parseFloat(BeatJumps[this.number]))) {
+            const size = parseFloat(BeatJumps[this.number]);
+            this.setKey(`beatjump_${size}_forward`);
+        }
+    }
+    output(value) {
+        if (BeatJumps[this.number] === "beatjump") {
+            this.send(LedColors.salmon);
+        } else if (!isNaN(parseFloat(BeatJumps[this.number]))) {
+            this.send(this.color + (value ? this.brightnessOn : this.brightnessOff));
+        } else {
+            this.send(LedColors.white);
+        }
+    }
+}
+
 /*
  * Represent a pad button that interact with a sampler (load, play/pause, cue, eject)
  */
@@ -1456,8 +1607,22 @@ class FXSelect extends Button {
                 }
             }
             this.outReport.send();
+
+            if (!UseSharedDataAPI) { return; }
+
+            const data = engine.getSharedData() || {};
+            if (!data.selectedQuickFX === undefined) { return; }
+            data.selectedQuickFX = this.mixer.calculatePresetNumber() + 1;
+            engine.setSharedData(data);
         } else {
             this.mixer.secondPressedFxSelector = this.number;
+
+            if (!UseSharedDataAPI) { return; }
+
+            const data = engine.getSharedData() || {};
+            if (!data.selectedQuickFX === undefined) { return; }
+            data.selectedQuickFX = this.mixer.calculatePresetNumber() + 1;
+            engine.setSharedData(data);
         }
 
     }
@@ -1488,6 +1653,13 @@ class FXSelect extends Button {
             this.mixer.comboSelected = true;
         }
         this.mixer.secondPressedFxSelector = null;
+
+        if (!UseSharedDataAPI) { return; }
+
+        const data = engine.getSharedData() || {};
+        if (!data.selectedQuickFX === undefined) { return; }
+        data.selectedQuickFX = null;
+        engine.setSharedData(data);
     }
 
 }
@@ -1585,7 +1757,7 @@ const quickFxChannel = (group) => {
 };
 
 const stemChannel = (group, idx) => {
-    return `${group.substr(0, group.length - 1)}Stem${idx}]`;
+    return `${group.substr(0, group.length - 1)}Stem${idx + 1}]`;
 };
 
 /*
@@ -2265,6 +2437,18 @@ class S4Mk3Deck extends Deck {
             deck: this,
             currentSortedColumnIdx: -1,
             onChange: function(right) {
+                let fxChanged = false;
+                for (const fxButton of this.deck.effectUnit.buttons) {
+                    if (fxButton.pressed) {
+                        script.triggerControl(fxButton.group, right ? "next_effect" : "prev_effect");
+                        fxChanged = true;
+                    }
+                }
+
+                if (fxChanged) {
+                    return;
+                }
+
                 if (this.deck.libraryViewButton.pressed) {
                     this.currentSortedColumnIdx = (LibrarySortableColumns.length + this.currentSortedColumnIdx + (right ? 1 : -1)) % LibrarySortableColumns.length;
                     engine.setValue("[Library]", "sort_column", LibrarySortableColumns[this.currentSortedColumnIdx]);
@@ -2291,7 +2475,7 @@ class S4Mk3Deck extends Deck {
                         }
                     } else {
                         engine.setValue("[Library]", "focused_widget", this.shifted ? 2 : 3);
-                        engine.setValue("[Library]", "MoveVertical", right ? 1 : -1);
+                        engine.setValue("[Library]", this.deck.turntableButton.pressed ? "ScrollVertical" : "MoveVertical", right ? 1 : -1);
                     }
                 }
             }
@@ -2412,6 +2596,7 @@ class S4Mk3Deck extends Deck {
         ];
         const hotcuePage2 = Array(8).fill({});
         const hotcuePage3 = Array(8).fill({});
+        const beatJumpPage = Array(8).fill({});
         const samplerOrBeatloopRollPage = Array(8).fill({});
         const keyboard = Array(8).fill({});
         const stem = [
@@ -2431,17 +2616,17 @@ class S4Mk3Deck extends Deck {
                 number: 4,
                 deck: this,
             }),
-            new Component({
-                outConnect: function() { this.send(0); },
+            new StemMuteButton({
+                number: 1,
             }),
-            new Component({
-                outConnect: function() { this.send(0); },
+            new StemMuteButton({
+                number: 2,
             }),
-            new Component({
-                outConnect: function() { this.send(0); },
+            new StemMuteButton({
+                number: 3,
             }),
-            new Component({
-                outConnect: function() { this.send(0); },
+            new StemMuteButton({
+                number: 4,
             }),
         ];
         let i = 0;
@@ -2450,6 +2635,10 @@ class S4Mk3Deck extends Deck {
             // start with hotcue 5; hotcues 1-4 are in defaultPadLayer
             hotcuePage2[i] = new HotcueButton({number: i + 1, deck: this});
             hotcuePage3[i] = new HotcueButton({number: i + 13, deck: this});
+            beatJumpPage[i] = new BeatJumpButton({
+                number: i,
+                deck: this,
+            });
             if (UseBeatloopRollInsteadOfSampler) {
                 samplerOrBeatloopRollPage[i] = new BeatLoopRollButton({
                     number: i,
@@ -2522,18 +2711,23 @@ class S4Mk3Deck extends Deck {
             samplerPage: 3,
             keyboard: 5,
             stem: 6,
+            beatJump: 6,
         };
         switch (DefaultPadLayout) {
         case DefaultPadLayoutHotcue:
             switchPadLayer(this, hotcuePage2);
             this.currentPadLayer = this.padLayers.hotcuePage2;
             break;
+        case DefaultPadLayoutSamplerBeatloop:
+            switchPadLayer(this, beatJumpPage);
+            this.currentPadLayer = this.padLayers.beatJump;
+            break;
         case DefaultPadLayoutSamplerBeatloop:
             switchPadLayer(this, samplerOrBeatloopRollPage);
             this.currentPadLayer = this.padLayers.samplerPage;
             break;
         case DefaultPadLayoutKeyboard:
-            switchPadLayer(this, this.keyboard);
+            switchPadLayer(this, keyboard);
             this.currentPadLayer = this.padLayers.keyboard;
             break;
         default:
@@ -2564,7 +2758,7 @@ class S4Mk3Deck extends Deck {
             onShortPress: UseSharedDataAPI ? function() {
                 const data = engine.getSharedData() || {};
                 if (!data.padsMode) { return; }
-                data.padsMode[this.deck.group] = ActiveTabPadID.cue;
+                data.padsMode[this.deck.group] = ActiveTabPadID.hotcue;
                 engine.setSharedData(data);
             } : undefined,
             onLongPress: function() {
@@ -2585,9 +2779,12 @@ class S4Mk3Deck extends Deck {
         this.recordPadModeButton = new Button({
             deck: this,
             onShortPress: UseSharedDataAPI ? function() {
+                switchPadLayer(this.deck, beatJumpPage);
+                this.deck.lightPadMode();
+
                 const data = engine.getSharedData() || {};
                 if (!data.padsMode) { return; }
-                data.padsMode[this.deck.group] = ActiveTabPadID.record;
+                data.padsMode[this.deck.group] = ActiveTabPadID.jump;
                 engine.setSharedData(data);
                 this.output(data.scrollingWavefom[this.deck.group]);
             } : undefined,
@@ -2607,7 +2804,7 @@ class S4Mk3Deck extends Deck {
                 }
                 const data = engine.getSharedData() || {};
                 if (!data.padsMode) { return; }
-                data.padsMode[this.deck.group] = ActiveTabPadID.samples;
+                data.padsMode[this.deck.group] = UseBeatloopRollInsteadOfSampler ? ActiveTabPadID.roll : ActiveTabPadID.samples;
                 engine.setSharedData(data);
             },
             onShortRelease: function() {
@@ -2702,9 +2899,13 @@ class S4Mk3Deck extends Deck {
         //     engine.stopTimer(motorWindDownTimer);
         //     motorWindDownTimer = 0;
         // };
-        this.turntableButton = UseMotors ? new Button({
+        this.turntableButton = new Button({
             deck: this,
-            onPress: function() {
+            onShortPress: function() {
+            },
+            onLongRelease: function() {
+            },
+            onShortRelease: UseMotors ? function() {
                 this.deck.reverseButton.loopModeOff(true);
                 this.deck.fluxButton.loopModeOff(true);
                 if (this.deck.wheelMode === wheelModes.motor) {
@@ -2718,14 +2919,14 @@ class S4Mk3Deck extends Deck {
                     }, true);
                 }
                 this.outTrigger();
-            },
-            outTrigger: function() {
+            } : undefined,
+            outTrigger: UseMotors ? function() {
                 const motorOn = this.deck.wheelMode === wheelModes.motor;
                 this.send(this.color + (motorOn ? this.brightnessOn : this.brightnessOff));
                 const vinylModeOn = this.deck.wheelMode === wheelModes.vinyl;
                 this.deck.jogButton.send(this.color + (vinylModeOn ? this.brightnessOn : this.brightnessOff));
-            },
-        }) : undefined;
+            } : undefined,
+        });
         this.jogButton = new Button({
             deck: this,
             onPress: function() {
@@ -3202,7 +3403,6 @@ class S4Mk3MixerColumn extends ComponentContainer {
         if (!alternativeInput) {
             return;
         }
-        console.log(shifted ? alternativeInput : `[Channel${this.idx}]`);
         this.group = shifted ? alternativeInput : `[Channel${this.idx}]`;
         for (const property of ["gain", "volume", "pfl", "crossfaderSwitch"]) {
             const component = this[property];
@@ -3511,6 +3711,27 @@ class S4MK3 {
                 "[Channel3]": false,
                 "[Channel4]": false,
             },
+            deckColor: {
+                "[Channel1]": Object.keys(LedColors).indexOf(Object.keys(LedColors).find(key => LedColors[key] === DeckColors[0])) - 1,
+                "[Channel2]": Object.keys(LedColors).indexOf(Object.keys(LedColors).find(key => LedColors[key] === DeckColors[1])) - 1,
+                "[Channel3]": Object.keys(LedColors).indexOf(Object.keys(LedColors).find(key => LedColors[key] === DeckColors[2])) - 1,
+                "[Channel4]": Object.keys(LedColors).indexOf(Object.keys(LedColors).find(key => LedColors[key] === DeckColors[3])) - 1,
+            },
+            rollpadSize: BeatLoopRolls,
+            beatjumpSize: BeatJumps,
+            selectedQuickFX: null,
+            selectedHotcue: {
+                "[Channel1]": null,
+                "[Channel2]": null,
+                "[Channel3]": null,
+                "[Channel4]": null,
+            },
+            selectedStems: {
+                "[Channel1]": [0, 0, 0, 0],
+                "[Channel2]": [0, 0, 0, 0],
+                "[Channel3]": [0, 0, 0, 0],
+                "[Channel4]": [0, 0, 0, 0],
+            },
             viewArtwork: {
                 "[Channel1]": false,
                 "[Channel2]": false,
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen.qml
index bbc53e31afd2..4a0febf517b1 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/AdvancedScreen.qml
@@ -26,11 +26,6 @@ Item {
     Defines.Durations {id: durations}
     Views.Colors {id: colors}
 
-    property int deckA: settings.deckAColour
-    property int deckB: settings.deckBColour
-    property int deckC: settings.deckCColour
-    property int deckD: settings.deckDColour
-
     Component.onCompleted: {
         if (engine.getSetting("useSharedDataAPI")) {
             engine.makeSharedDataConnection(screen.onSharedDataUpdate)
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/Defines/Colors.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/Defines/Colors.qml
index 2e99382e469e..339decafc890 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/Defines/Colors.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/Defines/Colors.qml
@@ -100,6 +100,7 @@ QtObject {
     property color purple: "#9f00c5"
     property color magenta: "#ff6fff"
     property color fuchsia: "#ff0080"
+    property color white: "#ff0080"
 
     property variant cueColours: [
                                   red,
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/Defines/Settings.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/Defines/Settings.qml
index 763ae3448ec7..bc1c94d5ef2b 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/Defines/Settings.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/Defines/Settings.qml
@@ -40,15 +40,7 @@ QtObject {
     readonly property int 		deckCWaveformColour:	parseInt(engine.getSetting('deckCWaveformColour')) || 0
     readonly property int		deckDWaveformColour:	parseInt(engine.getSetting('deckDWaveformColour')) || 0
 
-	//0 = Red, 1 = Dark Orange, 2 = Light Orange, 3 = White, 4 = Yellow, 5 = Lime, 6 = Green, 7 = Mint, 8 = Cyan, 9 = Turquoise, 10 = Blue, 11 = Plum, 12 = Violet, 13 = Purple, 14 = Magenta, 15 = Fuchsia, 16 = Black, 17 = Warm Yellow
-    readonly property int 		deckAColour:	parseInt(engine.getSetting('deckAColour')) || 10
-    readonly property int 		deckBColour:	parseInt(engine.getSetting('deckBColour')) || 10
-    readonly property int 		deckCColour:	parseInt(engine.getSetting('deckCColour')) || 2
-    readonly property int 		deckDColour:	parseInt(engine.getSetting('deckDColour')) || 2
-
-    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    //////////////////////////////
+	//////////////////////////////
 	//BPM/TEMPO DISPLAY SETTINGS//
 	//////////////////////////////
 
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Browser/BrowserFooter.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Browser/BrowserFooter.qml
index f80ed5fd86c9..63e4175e2bf3 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Browser/BrowserFooter.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Browser/BrowserFooter.qml
@@ -15,9 +15,8 @@ Rectangle {
     id: footer
 
     Defines.Colors { id: colors }
-    ViewModels.DeckInfo {
-        id: deckInfo
-    }
+
+    required property var deckInfo
 
     property string propertiesPath: ""
     property real sortingKnobValue: 0.0
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Browser/TrackFooter.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Browser/TrackFooter.qml
index e7b4bc4f4e3d..8796abd322b7 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Browser/TrackFooter.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Browser/TrackFooter.qml
@@ -15,9 +15,8 @@ Rectangle {
     id: footer
 
     Defines.Colors { id: colors }
-    ViewModels.DeckInfo {
-        id: deckInfo
-    }
+
+    required property var deckInfo
 
     property string propertiesPath: ""
     property real sortingKnobValue: 0.0
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/DeckScreen.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/DeckScreen.qml
index c6ffaa7be45b..81ebe7c81761 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/DeckScreen.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/DeckScreen.qml
@@ -160,7 +160,6 @@ Item {
 
     Overlays.CueInfo {
         id: cue
-        deckId: deckInfoModel.deckId
         hotcue: deckInfoModel.hotcueId
         type: deckInfoModel.hotcueType
         name: deckInfoModel.hotcueName
@@ -169,18 +168,20 @@ Item {
 
     Overlays.JumpControls {
         id: jump;
-        shift: deckInfoModel.shift
+        deckInfo: deckInfoModel
         showHideState: !settings.hideJumpOverlay && deckInfoModel.padsModeJump && !(loader.sourceComponent == browserComponent) && (settings.enableVinylBreakMode ? !deckInfoModel.breakEnabled : true) ? "show" : "hide"
     }
 
     Overlays.LoopControls {
         id: loop;
+        deckInfo: deckInfoModel
         deckId: deckInfoModel.deckId
         showHideState: !settings.hideLoopOverlay && deckInfoModel.padsModeLoop && !(loader.sourceComponent == browserComponent) && (settings.enableVinylBreakMode ? !deckInfoModel.breakEnabled : true) ? "show" : "hide"
     }
 
     Overlays.RollControls {
         id: roll;
+        deckInfo: deckInfoModel
         deckId: deckInfoModel.deckId
         showHideState: !settings.hideRollOverlay && deckInfoModel.padsModeRoll && !(loader.sourceComponent == browserComponent) && (settings.enableVinylBreakMode ? !deckInfoModel.breakEnabled : true) ? "show" : "hide"
     }
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/CueInfo.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/CueInfo.qml
index a691d16d8cb2..fb85a6065417 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/CueInfo.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/CueInfo.qml
@@ -17,7 +17,6 @@ Item {
     property int bottomMargin: 0
     property int yPositionWhenHidden: 240
     property int yPositionWhenShown: (195 - bottomMargin)
-    property int deckId: 1
     property int hotcue: 0
     property int type: 0
     property string name: ""
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/GridControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/GridControls.qml
index 71fbea37d391..8d11b934b7fe 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/GridControls.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/GridControls.qml
@@ -124,7 +124,7 @@ Item {
                 parameter: waveZoomProp
                 label: "ZOOM"
                 fxEnabled: true
-                barBgColor: barBgColor
+                barBgColor: bottomLabels.barBgColor
                 hideButton: true
                 zoom: true
                 hideValue: false
@@ -136,7 +136,7 @@ Item {
                 label: "TICK"
                 fxEnabled: true
                 isOn: tick.value
-                barBgColor: barBgColor
+                barBgColor: bottomLabels.barBgColor
                 hideButton: false
                 zoom: true
                 hideValue: true
@@ -148,7 +148,7 @@ Item {
                 label: "TICK"
                 fxEnabled: false
                 isOn: tick.value
-                barBgColor: barBgColor
+                barBgColor: bottomLabels.barBgColor
                 hideButton: true
                 zoom: true
                 hideValue: true
@@ -159,7 +159,7 @@ Item {
                 parameter: range
                 label: "RANGE"
                 fxEnabled: true
-                barBgColor: barBgColor
+                barBgColor: bottomLabels.barBgColor
                 hideButton: true
                 zoom: false
                 hideValue: false
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/JumpControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/JumpControls.qml
index c8111b2affea..d4f42fe67073 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/JumpControls.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/JumpControls.qml
@@ -1,6 +1,8 @@
 import '../../../' as CSI
 import QtQuick 2.15
 
+import Mixxx 1.0 as Mixxx
+
 import '../Widgets' as Widgets
 import '../../Defines' as Defines
 
@@ -19,7 +21,9 @@ Item {
     property int yPositionWhenShown: (240 - height)
     property string name: ""
     readonly property color barBgColor: "black"
-    property bool shift: false
+
+    required property var deckInfo
+    readonly property bool shift: deckInfo.shift
 
     Defines.Colors { id: colors }
     Defines.Durations { id: durations }
@@ -29,6 +33,12 @@ Item {
     anchors.left: parent.left
     anchors.right: parent.right
 
+    Mixxx.ControlProxy {
+        id: beatjump
+        group: deckInfo.group
+        key: "beatjump_size"
+    }
+
   // dark grey background
     Rectangle {
         id: bottomInfoDetailsPanelDarkBg
@@ -123,26 +133,26 @@ Item {
             Row {
                 JumpInfoDetails {
                     id: bottomInfoDetails1
-                    label: !shift ? getValue(settings.jumpSizePad1) : getValue(settings.shiftJumpSizePad1)
-                    back: settings.jumpSizePad1 < 0 ? true : false
+                    label: deckInfo.jumpSizePad1 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad1, shift)
+                    back: shift
                     width: 80
                 }
                 JumpInfoDetails {
                     id: bottomInfoDetails2
-                    label: !shift ? getValue(settings.jumpSizePad2) : getValue(settings.shiftJumpSizePad2)
-                    back: settings.jumpSizePad2 < 0 ? true : false
+                    label: deckInfo.jumpSizePad2 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad2, shift)
+                    back: shift
                     width: 80
                 }
                 JumpInfoDetails {
                     id: bottomInfoDetails3
-                    label: !shift ? getValue(settings.jumpSizePad3) : getValue(settings.shiftJumpSizePad3)
-                    back: settings.jumpSizePad3 < 0 ? true : false
+                    label: deckInfo.jumpSizePad3 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad3, shift)
+                    back: shift
                     width: 80
                 }
                 JumpInfoDetails {
                     id: bottomInfoDetails4
-                    label: !shift ? getValue(settings.jumpSizePad4) : getValue(settings.shiftJumpSizePad4)
-                    back: settings.jumpSizePad4 < 0 ? true : false
+                    label: deckInfo.jumpSizePad4 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad4, shift)
+                    back: shift
                     width: 80
                 }
             }
@@ -150,39 +160,39 @@ Item {
             Row {
                 JumpInfoDetails {
                     id: bottomInfoDetails5
-                    label: !shift ? getValue(settings.jumpSizePad5) : getValue(settings.shiftJumpSizePad5)
-                    back: settings.jumpSizePad5 < 0 ? true : false
+                    label: deckInfo.jumpSizePad5 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad5, shift)
+                    back: shift
                     width: 80
                 }
                 JumpInfoDetails {
                     id: bottomInfoDetails6
-                    label: !shift ? getValue(settings.jumpSizePad6) : getValue(settings.shiftJumpSizePad6)
-                    back: settings.jumpSizePad6 < 0 ? true : false
+                    label: deckInfo.jumpSizePad6 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad6, shift)
+                    back: shift
                     width: 80
                 }
                 JumpInfoDetails {
                     id: bottomInfoDetails7
-                    label: !shift ? getValue(settings.jumpSizePad7) : getValue(settings.shiftJumpSizePad7)
-                    back: settings.jumpSizePad7 < 0 ? true : false
+                    label: deckInfo.jumpSizePad7 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad7, shift)
+                    back: shift
                     width: 80
                 }
                 JumpInfoDetails {
                     id: bottomInfoDetails8
-                    label: !shift ? getValue(settings.jumpSizePad8) : getValue(settings.shiftJumpSizePad8)
-                    back: settings.jumpSizePad8 < 0 ? true : false
+                    label: deckInfo.jumpSizePad8 === "??" ? (shift ? "- " : " ") + (beatjump.value < 1 ? `1 / ${1/beatjump.value}` : `${beatjump.value}`) : getValue(deckInfo.jumpSizePad8, shift)
+                    back: shift
                     width: 80
                 }
             }
         }
     }
 
-    function getValue(size) {
-        if (size > 0 && size < 1) {
-            return `1 / ${1/size}`
-        } else if (size < 0 && size > -1) {
-            return `-1 / ${1/-size}`
+    function getValue(size, shift) {
+        if (parseFloat(size)) {
+            return (shift ? "- " : " ") + (size < 1 ? `1 / ${1/size}` : `${size}`)
+        } else if (size === "??") {
+            return null;
         } else {
-            return `size`
+            return size
         }
     }
 
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/LoopControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/LoopControls.qml
index 71e9b775696a..4770a99bee39 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/LoopControls.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/LoopControls.qml
@@ -25,10 +25,8 @@ Item {
     Defines.Colors { id: colors }
     Defines.Durations { id: durations }
     Defines.Settings { id: settings }
-    ViewModels.DeckInfo {
-        id: deckInfo
-        deckId: view.deckId
-    }
+
+    required property var deckInfo
 
     height: 65
     anchors.left: parent.left
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/QuickFXSelector.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/QuickFXSelector.qml
new file mode 100755
index 000000000000..4bb453a68486
--- /dev/null
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/QuickFXSelector.qml
@@ -0,0 +1,151 @@
+import QtQuick 2.15
+
+import '../../../CSI' as CSI
+import '../../Defines' as Defines
+import '../Widgets' as Widgets
+
+import Mixxx 1.0 as Mixxx
+
+//--------------------------------------------------------------------------------------------------------------------
+//  FX CONTROLS
+//--------------------------------------------------------------------------------------------------------------------
+
+// The FxControls are located on the top of the screen and blend in if one of the top knobs is touched/changed
+
+Item {
+    id: topLabels
+
+    required property var deckInfo
+
+    property int topMargin: 0
+
+    property int yPositionWhenHidden: -25
+    property int yPositionWhenShown: topMargin
+
+    readonly property color barBgColor: "black"
+
+    property var fxModel: Mixxx.EffectsManager.quickChainPresetModel
+
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
+
+    height: 25
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+  // dark grey background
+    Rectangle {
+        id: topInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: topLabels.height
+        color: colors.colorFxHeaderBg
+    // light grey background
+        // Rectangle {
+        //     id:topInfoDetailsPanelLightBg
+        //     anchors {
+        //         top: parent.top
+        //         left: parent.left
+        //     }
+        //     height: topLabels.height
+        //     width: 240
+        //     color: colors.colorFxHeaderLightBg
+        // }
+    }
+
+  // Info Details
+    Rectangle {
+        id: topInfoDetailsPanel
+
+        height: parent.height
+        // clip: true
+        width: parent.width
+        color: "transparent"
+
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        // Row {
+        //     id: controlRow
+
+            // Item {
+            //   id: quickFxDetailsPanel
+
+            //   height: display.height
+            //   width: 260
+
+          // name
+        Text {
+            id: stemInfoName
+            font.capitalization: Font.AllUppercase
+            text: "SELECTED QUICK FX"
+            color: "orange"
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+
+            font.pixelSize: fonts.scale(13.5)
+            elide: Text.ElideRight
+        }
+
+          // value
+        Text {
+            id: nameValue
+            font.capitalization: Font.AllUppercase
+            text: fxModel.get(deckInfo.quickFXSelected).display || "---"
+            color: colors.colorWhite
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+
+            font.pixelSize: fonts.scale(13.5)
+            elide: Text.ElideRight
+        }
+            // }
+        // }
+    }
+
+  // black border & shadow
+    Rectangle {
+        id: headerBlackLine
+        anchors.top: topLabels.bottom
+        width: parent.width
+        color: colors.colorBlack
+        height: 2
+    }
+    Rectangle {
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
+    }
+
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
+
+    Behavior on y { PropertyAnimation { duration: durations.overlayTransition; easing.type: Easing.InOutQuad } }
+
+    state: deckInfo.quickFXSelected != null ? "show" : "hide"
+    states: [
+        State {
+            name: "show";
+            PropertyChanges { target: topLabels; y: yPositionWhenShown}
+        },
+        State {
+            name: "hide";
+            PropertyChanges { target: topLabels; y: -height}
+        }
+    ]
+}
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/RollControls.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/RollControls.qml
index c233cbf4dc31..2035bdff39df 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/RollControls.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Overlays/RollControls.qml
@@ -25,10 +25,8 @@ Item {
     Defines.Colors { id: colors }
     Defines.Durations { id: durations }
     Defines.Settings { id: settings }
-    ViewModels.DeckInfo {
-        id: deckInfo
-        deckId: view.deckId
-    }
+
+    required property var deckInfo
 
     height: 65
     anchors.left: parent.left
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/ViewModels/DeckInfo.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/ViewModels/DeckInfo.qml
index dcbadc6be675..def6ebba29a3 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/ViewModels/DeckInfo.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/ViewModels/DeckInfo.qml
@@ -20,13 +20,76 @@ Item {
             viewModel.group = data.group[screenName]
             console.log(`Changed group for screen ${screenName} to ${viewModel.group}`);
         }
+        if (typeof data === "object" && typeof data.shift === "object") {
+            propShift.value = !!data.shift[screenName]
+        }
         if (typeof data.padsMode === "object") {
             propPadsMode.value = data.padsMode[viewModel.group]
             console.log(`Changed padsMode for screen ${screenName} to ${propPadsMode.value}`);
         }
-        if (typeof data.selectedStem === "object") {
-            propStemSelected.value = data.selectedStem[viewModel.group]
-            console.log(`Changed selectedStem for screen ${screenName} to ${propStemSelected.value}`);
+        if (typeof data.selectedQuickFX !== "undefined") {
+            propSelectedQuickFX.value = data.selectedQuickFX
+            console.log(`Changed selectedQuickFX to ${propSelectedQuickFX.value}`);
+        }
+        if (typeof data.selectedStems === "object") {
+            let firstSelected = data.selectedStems[viewModel.group].findIndex(x => !!x);
+            propStemSelected.active = firstSelected >= 0;
+            if (propStemSelected.active) {
+                propStemSelected.idx = firstSelected;
+            }
+            console.log(`Changed selectedStems for screen ${screenName} to ${propStemSelected.idx}`);
+        }
+        if (typeof data.selectedHotcue === "object") {
+            let hotcue = data.selectedHotcue[viewModel.group];
+
+            if (hotcue) {
+                let model = viewModel.deckPlayer.hotcuesModel.get(hotcue - 1);
+                viewModel.hotcueId = hotcue;
+                viewModel.hotcuePressed = true;
+                viewModel.hotcueName = model.label || "Unnamed cue";
+                viewModel.hotcueType = model.isLoop ? 5 : 0;
+            } else {
+                viewModel.hotcuePressed = false;
+            }
+
+            console.log(`Changed selectedHotcue for screen ${screenName} to ${hotcue}`);
+        }
+        if (typeof data.deckColor === "object") {
+            propDeckColors.a = data.deckColor["[Channel1]"]
+            propDeckColors.b = data.deckColor["[Channel2]"]
+            propDeckColors.c = data.deckColor["[Channel3]"]
+            propDeckColors.d = data.deckColor["[Channel4]"]
+        }
+        if (typeof data.rollpadSize === "object") {
+            for (let i = 0; i < 8; i++) {
+                switch (`${data.rollpadSize[i]}`.toLowerCase()) {
+                    case "double":
+                        propRollSizePad[`pad${i+1}`] = "x2"
+                        break;
+                    case "half":
+                        propRollSizePad[`pad${i+1}`] = "/2"
+                        break;
+                    default:
+                        propRollSizePad[`pad${i+1}`] = parseFloat(data.rollpadSize[i]) < 1 ? `1/${1/parseFloat(data.rollpadSize[i])}` : data.rollpadSize[i]
+                }
+            }
+        }
+        if (typeof data.beatjumpSize === "object") {
+            for (let i = 0; i < 8; i++) {
+                switch (`${data.beatjumpSize[i]}`.toLowerCase()) {
+                    case "double":
+                        propJumpSizePad[`pad${i+1}`] = "x2"
+                        break;
+                    case "half":
+                        propJumpSizePad[`pad${i+1}`] = "/2"
+                        break;
+                    case "beatjump":
+                        propJumpSizePad[`pad${i+1}`] = "??"
+                        break;
+                    default:
+                        propJumpSizePad[`pad${i+1}`] = parseFloat(data.beatjumpSize[i]) < 1 ? `1/${1/parseFloat(data.beatjumpSize[i])}` : data.beatjumpSize[i]
+                }
+            }
         }
     }
     Component.onCompleted: {
@@ -40,10 +103,15 @@ Item {
     }
 
     function deckLetter(deckId) {
-        if (deckId == 1) {return "A"};
-        if (deckId >= 2) {return "B"};
-        if (deckId == 3) {return "C"};
-        if (deckId == 4) {return "D"};
+        switch (deckId) {
+            case 1: return "A";
+            case 2: return "B";
+            case 3: return "C";
+            default:
+                console.error(`Unknown deck ${deckId}. Defaulting to D`);
+            case 4:
+                return "D";
+        }
     }
 
     function tempoNeeded(master, current) {
@@ -100,6 +168,44 @@ Item {
         return value1.toString() + "." + value2.toString();
     }
 
+  ////////////////////////////////////
+  ////// Global info properties //////
+  ////////////////////////////////////
+    QtObject {
+        id: propDeckColors
+        property int a: 10
+        property int b: 10
+        property int c: 2
+        property int d: 2
+    }
+    QtObject {
+        id: propRollSizePad
+        property var pad1: 1/32
+        property var pad2: 1/16
+        property var pad3: 1/8
+        property var pad4: 1/4
+        property var pad5: 1/2
+        property var pad6: 1
+        property var pad7: 2
+        property var pad8: 4
+    }
+    QtObject {
+        id: propJumpSizePad
+        property var pad1: 0.5
+        property var pad2: 1
+        property var pad3: 2
+        property var pad4: 4
+        property var pad5: 8
+        property var pad6: 16
+        property var pad7: 32
+        property var pad8: 64
+    }
+
+    readonly property int 		deckAColour:	propDeckColors.a
+    readonly property int 		deckBColour:	propDeckColors.b
+    readonly property int 		deckCColour:	propDeckColors.c
+    readonly property int 		deckDColour:	propDeckColors.d
+
   ////////////////////////////////////
   /////// Track info properties //////
   ////////////////////////////////////
@@ -107,7 +213,7 @@ Item {
     property int deckId: 1
     readonly property bool trackEndWarning: propTrackEndWarning.value
     readonly property bool shift: propShift.value
-    readonly property string artistString: isLoaded ? propArtist.value : "v3.5 By Joe Easton"
+    readonly property string artistString: isLoaded ? propArtist.value : "Mixxx"
     readonly property string bpmString: isLoaded ? propBPM.value.toFixed(2).toString() : "0.00"
     readonly property double cuePos: (propNextCuePoint.value >= 0) ? propNextCuePoint.value : propTrackLength.value*1000
     readonly property string beats: 	 computeBeatCounterStringFromPosition(((propElapsedTime.value*1000-propGridOffset.value)*propMixerBpm.value)/60000.0)
@@ -860,19 +966,21 @@ Item {
 
     readonly property bool adjustEnabled: settings.showBPMGridAdjust ? loopAdjust.show : false
 
-  // MappingProperty { id: propPadsMode;     path: "mapping.state." + (isLeftScreen(deckId) ? "left" : "right") + ".pads_mode" }
     QtObject {
         id: propPadsMode
-        property string description: "Description"
         property var value: 0
-        property var valueRange: ({isDiscrete: true, steps: 1})
     }
-    property bool padsModeJump: propPadsMode.value == 1 ? true : false
-    property bool padsModeLoop: propPadsMode.value == 5 ? true : false
-    property bool padsModeRoll: propPadsMode.value == 3 ? true : false
-    property bool padsModeTone: propPadsMode.value == 11 ? true : false
-    property bool padsModeBank1: propPadsMode.value == 12 ? true : false
-    property bool padsModeBank2: propPadsMode.value == 13 ? true : false
+    QtObject {
+        id: propSelectedQuickFX
+        property var value: null
+    }
+    readonly property var quickFXSelected: propSelectedQuickFX.value
+    property bool padsModeJump: propPadsMode.value == 1
+    property bool padsModeLoop: propPadsMode.value == 5
+    property bool padsModeRoll: propPadsMode.value == 3
+    property bool padsModeTone: propPadsMode.value == 11
+    property bool padsModeBank1: propPadsMode.value == 12
+    property bool padsModeBank2: propPadsMode.value == 13
 
   // AppProperty { id: propTick; path: "app.traktor.decks." + deckId + ".track.grid.tick"}
     QtObject {
@@ -919,9 +1027,7 @@ Item {
   // MappingProperty { id: propShift;     path: "mapping.state." + (isLeftScreen(deckId) ? "left" : "right") + ".shift" }
     QtObject {
         id: propShift
-        property string description: "Description"
-        property var value: 0
-        property var valueRange: ({isDiscrete: true, steps: 1})
+        property bool value: false
     }
   // MappingProperty { id: propZoom;     path: "mapping.state." + deckId + ".zoom_level" }
     QtObject {
@@ -1863,32 +1969,122 @@ Item {
 
     QtObject {
         id: propStemSelected
-        property var value: 0
-    }
-    readonly property var stemSelected: null
-
-    readonly property string stemSelectedName: isStemsActive && viewModel.stemSelected != null ? viewModel.deckPlayer.stemsModel.get(viewModel.stemSelected).label : ""
-    readonly property real stemSelectedVolume: isStemsActive ? propStemSelectedVolume.value : 0.0
-    readonly property bool stemSelectedMuted: isStemsActive ? propStemSelectedMuted.value : false
-    readonly property real stemSelectedFilterValue: isStemsActive ? propStemSelectedFilter.value : 0.5
-    readonly property real stemSelectedFXSendValue: isStemsActive ? propStemSelectedFXSend.value : 1
-    readonly property bool stemSelectedFilterOn: isStemsActive ? propStemSelectedFilterOn.value : false
-    readonly property bool stemSelectedFXSendOn: isStemsActive ? propStemSelectedFXSendOn.value : false
-    readonly property color stemSelectedBrightColor: isStemsActive && viewModel.stemSelected != null ? viewModel.deckPlayer.stemsModel.get(viewModel.stemSelected).color : "grey"
+        property var idx: 0
+        property bool active: false
+    }
+    readonly property bool stemSelected: propStemSelected.active
+    readonly property var stemSelectedIdx: propStemSelected.idx
+
+    readonly property string stemSelectedName: viewModel.deckPlayer.stemsModel.get(viewModel.stemSelectedIdx).label || "Unknown"
+    readonly property real stemSelectedVolume: isStemsActive ? [propStem1Volume,propStem2Volume,propStem3Volume,propStem4Volume][viewModel.stemSelectedIdx].value : 0.0
+    readonly property bool stemSelectedMuted: isStemsActive ? [propStem1Muted,propStem2Muted,propStem3Muted,propStem4Muted][viewModel.stemSelectedIdx].value : false
+    readonly property int stemSelectedQuickFXId: isStemsActive ? [propStem1FX,propStem2FX,propStem3FX,propStem4FX][viewModel.stemSelectedIdx].value : 0
+    readonly property real stemSelectedQuickFXValue: isStemsActive ? [propStem1FXValue,propStem2FXValue,propStem3FXValue,propStem4FXValue][viewModel.stemSelectedIdx].value : 0.0
+    readonly property bool stemSelectedQuickFXOn: isStemsActive ? [propStem1FXOn,propStem2FXOn,propStem3FXOn,propStem4FXOn][viewModel.stemSelectedIdx].value : false
+    readonly property string stemSelectedQuickFXName: Mixxx.EffectsManager.quickChainPresetModel.get(viewModel.stemSelectedQuickFXId).display || "---"
+    readonly property color stemSelectedBrightColor: viewModel.deckPlayer.stemsModel.get(viewModel.stemSelectedIdx).color ?? "grey"
     readonly property color stemSelectedMidColor: isStemsActive ? stemSelectedBrightColor : "black"
 
-    function selectedStemGroup() { return  `${group.substr(0, viewModel.group.length - 1)}Stem${viewModel.stemSelected+1}]`;}
-
     Mixxx.ControlProxy {
-        id: propStemSelectedVolume
-        group: selectedStemGroup()
+        id: propStem1Volume
+        group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]`
+        key: `volume`
+    }
+    Mixxx.ControlProxy {
+        id: propStem1Muted
+        group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]`
+        key: `mute`
+    }
+    Mixxx.ControlProxy {
+        id: propStem1FX
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]]`
+        key: `loaded_chain_preset`
+    }
+    Mixxx.ControlProxy {
+        id: propStem1FXOn
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]]`
+        key: `enabled`
+    }
+    Mixxx.ControlProxy {
+        id: propStem1FXValue
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem1]]`
+        key: `super1`
+    }
+    Mixxx.ControlProxy {
+        id: propStem2Volume
+        group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]`
+        key: `volume`
+    }
+    Mixxx.ControlProxy {
+        id: propStem2Muted
+        group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]`
+        key: `mute`
+    }
+    Mixxx.ControlProxy {
+        id: propStem2FX
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]]`
+        key: `loaded_chain_preset`
+    }
+    Mixxx.ControlProxy {
+        id: propStem2FXOn
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]]`
+        key: `enabled`
+    }
+    Mixxx.ControlProxy {
+        id: propStem2FXValue
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem2]]`
+        key: `super1`
+    }
+    Mixxx.ControlProxy {
+        id: propStem3Volume
+        group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]`
+        key: `volume`
+    }
+    Mixxx.ControlProxy {
+        id: propStem3Muted
+        group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]`
+        key: `mute`
+    }
+    Mixxx.ControlProxy {
+        id: propStem3FX
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]]`
+        key: `loaded_chain_preset`
+    }
+    Mixxx.ControlProxy {
+        id: propStem3FXOn
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]]`
+        key: `enabled`
+    }
+    Mixxx.ControlProxy {
+        id: propStem3FXValue
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem3]]`
+        key: `super1`
+    }
+    Mixxx.ControlProxy {
+        id: propStem4Volume
+        group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]`
         key: `volume`
     }
     Mixxx.ControlProxy {
-        id: propStemSelectedMuted
-        group: selectedStemGroup()
+        id: propStem4Muted
+        group: `${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]`
         key: `mute`
     }
+    Mixxx.ControlProxy {
+        id: propStem4FX
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]]`
+        key: `loaded_chain_preset`
+    }
+    Mixxx.ControlProxy {
+        id: propStem4FXOn
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]]`
+        key: `enabled`
+    }
+    Mixxx.ControlProxy {
+        id: propStem4FXValue
+        group: `[QuickEffectRack1_${viewModel.group.substr(0, viewModel.group.length - 1)}Stem4]]`
+        key: `super1`
+    }
     QtObject {
         id: propStemSelectedFilter
         property var value: 0
@@ -1897,11 +2093,6 @@ Item {
         id: propStemSelectedFilterOn
         property var value: 0
     }
-    Mixxx.ControlProxy {
-        id: propStemSelectedColor
-        group: selectedStemGroup()
-        key: `color`
-    }
     QtObject {
         id: propStemSelectedFXSend
         property var value: 0
@@ -1927,12 +2118,21 @@ Item {
     readonly property var	loopSizePad7: "16"
     readonly property var	loopSizePad8: "32"
 
-    readonly property var	rollSizePad1: "1/32"
-    readonly property var	rollSizePad2: "1/16"
-    readonly property var	rollSizePad3: "1/8"
-    readonly property var	rollSizePad4: "1/4"
-    readonly property var	rollSizePad5: "1/2"
-    readonly property var	rollSizePad6: "1"
-    readonly property var	rollSizePad7: "2"
-    readonly property var	rollSizePad8: "4"
+    readonly property var jumpSizePad1: propJumpSizePad.pad1
+    readonly property var jumpSizePad2: propJumpSizePad.pad2
+    readonly property var jumpSizePad3: propJumpSizePad.pad3
+    readonly property var jumpSizePad4: propJumpSizePad.pad4
+    readonly property var jumpSizePad5: propJumpSizePad.pad5
+    readonly property var jumpSizePad6: propJumpSizePad.pad6
+    readonly property var jumpSizePad7: propJumpSizePad.pad7
+    readonly property var jumpSizePad8: propJumpSizePad.pad8
+
+    readonly property var rollSizePad1: propRollSizePad.pad1
+    readonly property var rollSizePad2: propRollSizePad.pad2
+    readonly property var rollSizePad3: propRollSizePad.pad3
+    readonly property var rollSizePad4: propRollSizePad.pad4
+    readonly property var rollSizePad5: propRollSizePad.pad5
+    readonly property var rollSizePad6: propRollSizePad.pad6
+    readonly property var rollSizePad7: propRollSizePad.pad7
+    readonly property var rollSizePad8: propRollSizePad.pad8
 }
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/BrowserView.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/BrowserView.qml
index 3c3d91b63d28..0a8bc374f16c 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/BrowserView.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/BrowserView.qml
@@ -15,7 +15,7 @@ import '../Widgets' as Widgets
 
 Item {
     id: qmlBrowser
-    property var deckInfo: ({})
+    required property var deckInfo
     property string propertiesPath: ""
     property bool isActive: false
     property bool enterNode: false
@@ -37,7 +37,96 @@ Item {
 
     anchors.fill: parent
 
-    //MappingProperty { id: browserViewMode; path: "mapping.state.browser_view_mode" }
+    enum WidgetKind {
+        None,
+        Searchbar,
+        Sidebar,
+        LibraryView
+    }
+
+    Mixxx.ControlProxy {
+        id: focusWidget
+
+        group: "[Library]"
+        key: "focused_widget"
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Playlist]"
+        key: "SelectTrackKnob"
+        onValueChanged: (value) => {
+            console.log("SelectTrackKnob", value)
+            if (value != 0) {
+                focusWidget.value = BrowserView.WidgetKind.LibraryView;
+                moveSelectionVertical(value);
+            }
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Playlist]"
+        key: "SelectPrevTrack"
+        onValueChanged: (value) => {
+            console.log("SelectPrevTrack", value)
+            if (value != 0) {
+                focusWidget.value = BrowserView.WidgetKind.LibraryView;
+                moveSelectionVertical(-1);
+            }
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Playlist]"
+        key: "SelectNextTrack"
+        onValueChanged: (value) => {
+            console.log("SelectNextTrack", value)
+            if (value != 0) {
+                focusWidget.value = BrowserView.WidgetKind.LibraryView;
+                moveSelectionVertical(1);
+            }
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Library]"
+        key: "MoveVertical"
+        onValueChanged: (value) => {
+            console.log("MoveVertical", value, focusWidget.value == BrowserView.WidgetKind.LibraryView)
+            // if (value != 0 && focusWidget.value == BrowserView.WidgetKind.LibraryView)
+            moveSelectionVertical(value);
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Library]"
+        key: "MoveUp"
+        onValueChanged: (value) => {
+            console.log("MoveUp", value)
+            if (value != 0 && focusWidget.value == BrowserView.WidgetKind.LibraryView)
+                moveSelectionVertical(-1);
+        }
+    }
+
+    Mixxx.ControlProxy {
+        group: "[Library]"
+        key: "MoveDown"
+        onValueChanged: (value) => {
+            console.log("MoveDown", value)
+            if (value != 0 && focusWidget.value == BrowserView.WidgetKind.LibraryView)
+                moveSelectionVertical(1);
+        }
+    }
+
+    function moveSelectionVertical(value) {
+        if (value == 0)
+            return ;
+
+        const rowCount = browser.dataSet.rowCount();
+        if (rowCount == 0)
+            return ;
+
+        browser.currentIndex = Mixxx.MathUtils.positiveModulo(browser.currentIndex + value, rowCount);
+    }
 
   //--------------------------------------------------------------------------------------------------------------------
 
@@ -211,6 +300,7 @@ Item {
         sortingKnobValue: qmlBrowser.sortingKnobValue
         maxCount:		contentList.count
         count:			browser.currentIndex + 1
+        deckInfo: qmlBrowser.deckInfo
 
         Behavior on height { NumberAnimation { duration: speed; } }
 
@@ -224,6 +314,7 @@ Item {
         sortingKnobValue: qmlBrowser.sortingKnobValue
         maxCount:		contentList.count
         count:			browser.currentIndex + 1
+        deckInfo: qmlBrowser.deckInfo
 
         Behavior on height { NumberAnimation { duration: speed; } }
 
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/Colors.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/Colors.qml
index 032ba93d15fc..efdb7a2253de 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/Colors.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/Colors.qml
@@ -64,7 +64,7 @@ QtObject {
 
     property color red: "#ff0000"
     property color darkOrange: "#ff8c00"
-    property color lightOrange: "#ffbf00"
+    property color lightOrange: "#fccf3e"
     property color warmYellow: "#f9d71c"
     property color yellow: "#ffff00"
     property color lime: "#effd5f"
@@ -78,6 +78,7 @@ QtObject {
     property color purple: "#9f00c5"
     property color magenta: "#ff6fff"
     property color fuchsia: "#ff0080"
+    property color white: "#ff0080"
     property color phaseColor: 			 "#90550C"
 
   //--------------------------------------------------------------------------------------------------------------------
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/StemDeck.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/StemDeck.qml
index dcb21301d7d2..e0a260721422 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/StemDeck.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/StemDeck.qml
@@ -10,7 +10,7 @@ Item {
     id: display
 
   // MODEL PROPERTIES //
-    property var deckInfo: ({})
+    required property var deckInfo
 
     width: 320
     height: 240
@@ -23,9 +23,6 @@ Item {
 
   // STEM  OVERLAY //
     Widgets.StemOverlay {
-        visible: display.deckInfo.stemSelected !== null
-        anchors.top: parent.top
-        anchors.left: parent.left
         deckInfo: display.deckInfo
     }
 }
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/TrackDeck.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/TrackDeck.qml
index 866d8752d730..0fca0c223184 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/TrackDeck.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Views/TrackDeck.qml
@@ -15,7 +15,7 @@ Item {
     Dimensions {id: dimensions}
 
   // MODEL PROPERTIES //
-    property var deckInfo: ({})
+    required property var deckInfo
     property int deckId: 1
     property real boxesRadius: dimensions.cornerRadius
     property real infoBoxesWidth: dimensions.infoBoxesWidth +4
@@ -62,6 +62,8 @@ Item {
             Widgets.DeckHeader {
                 id: deckHeader
 
+                deckInfo: display.deckInfo
+
                 title: deckInfo.headerEnabled ? deckInfo.headerTextShort : deckInfo.titleString
                 artist: deckInfo.headerEnabled ? deckInfo.headerTextLong : deckInfo.artistString
 
@@ -165,6 +167,8 @@ Item {
         WF.WaveformContainer {
             id: waveformContainer
 
+            deckInfo: display.deckInfo
+
             deckId: deckInfo.deckId
             deckSizeState: content.deckSizeState
             propertiesPath: content.propertiesPath
@@ -281,6 +285,10 @@ Item {
         showHideState: deckInfo.showFx3 && settings.fxOverlays || (deckInfo.padsModeFx1 && (settings.fx1unit == 3)) || (deckInfo.padsModeFx2 && (settings.fx2unit == 3)) ? "show" : "hide"
     }
 
+    Overlays.QuickFXSelector {
+        deckInfo: display.deckInfo
+    }
+
     Overlays.TopControls {
         id: fx4
         fxUnit: 3
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Waveform/StemColorIndicators.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Waveform/StemColorIndicators.qml
index caba2044a8f9..c083f2cc7d7a 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Waveform/StemColorIndicators.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Waveform/StemColorIndicators.qml
@@ -14,10 +14,8 @@ Item {
     property int deckId: 1
 
     Views.Colors {id: colors}
-    ViewModels.DeckInfo {
-        id: deckInfo
-        deckId: view.deckId
-    }
+
+    required property var deckInfo
 
     readonly property int stemCount: deckInfo.stemCount
     readonly property var stemColors: ["green", "blue", "red", "orange"]
@@ -51,7 +49,7 @@ Item {
 
             required property int index
 
-            property color stemColor: view.deckPlayer.stemsModel.get(index).color
+            property color stemColor: view.deckPlayer.stemsModel.get(index).color || "black"
 
             width: view.width; x: 0
             height: indicatorHeight[index]; y: indicatorY(index)
@@ -74,7 +72,7 @@ Item {
             Rectangle {
                 id: colorRect2
                 x: view.width - width;
-                width: 5
+                width: deckInfo.stemSelected && deckInfo.stemSelectedIdx == index ? 10 : 5
                 height: indicatorHeight[index]*stemVolume.value
                 color: stemColor
                 opacity: stemMute.value ? 0.4 : 1.0
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Waveform/WaveformContainer.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Waveform/WaveformContainer.qml
index a4035a51eb81..6be9754214df 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Waveform/WaveformContainer.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Waveform/WaveformContainer.qml
@@ -30,10 +30,7 @@ Item {
 
   //--------------------------------------------------------------------------------------------------------------------
 
-    ViewModels.DeckInfo {
-        id: deckInfoModel
-        deckId: deckscreen.deckId
-    }
+    required property var deckInfo
 
   //--------------------------------------------------------------------------------------------------------------------
   // WAVEFORM Position
@@ -62,6 +59,7 @@ Item {
     StemColorIndicators {
         id: stemColorIndicators
         deckId: view.deckId
+        deckInfo: view.deckInfo
         anchors.fill: singleWaveform
         anchors.rightMargin:	 309
         visible: isStemDeck
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/DeckHeader.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/DeckHeader.qml
index 7a7bfb1d691e..b4e444061ee5 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/DeckHeader.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/DeckHeader.qml
@@ -1,13 +1,12 @@
 import QtQuick 2.5
 import '../../../' as CSI
 import '../../Defines' as Defines
+import '../Views' as Views
 
 //here we assume that `colors` and `dimensions` already exists in the object hierarchy
 Item {
     id: widget
 
-    readonly property var colors: ({black: "black", colorDeckBlueBright: "dodgerblue", colorWhite: "white", cyan: "cyan", darkOrange: "darkorange", defaultBackground: "transparent", fuchsia: "fuchsia", green: "green", lightOrange: "orange", lime: "lime", magenta: "magenta", mint: "mint", plum: "plum", purple: "purple", red: "red", turquoise: "turquoise", violet: "violet", yellow: "yellow"})
-
     property string title: ''
     property string artist: ''
     property color backgroundColor: colors.defaultBackground
@@ -15,38 +14,44 @@ Item {
     property int radius: 		 dimensions.cornerRadius
 
     Defines.Settings {id: settings}
-    property int deckA: settings.deckAColour
-    property int deckB: settings.deckBColour
-    property int deckC: settings.deckCColour
-    property int deckD: settings.deckDColour
+    Views.Colors {id: colors}
+
+    required property var deckInfo
+
+    property int deckA: deckInfo.deckAColour
+    property int deckB: deckInfo.deckBColour
+    property int deckC: deckInfo.deckCColour
+    property int deckD: deckInfo.deckDColour
 
     function colorForDeck(deckId,deckA,deckB,deckC,deckD) {
         switch (deckId) {
             case 1: return colorForDeckSingle(deckA);
             case 2: return colorForDeckSingle(deckB);
             case 3: return colorForDeckSingle(deckC);
-            case 4: return colorForDeckSingle(deckD);
+            default: return colorForDeckSingle(deckD);
         }
     }
 
     function colorForDeckSingle(deck) {
-        if (deck == 0) {return colors.red}
-        else if (deck == 1) {return colors.darkOrange}
-        else if (deck == 2) {return colors.lightOrange}
-        else if (deck == 3) {return colors.colorWhite}
-        else if (deck == 4) {return colors.yellow}
-        else if (deck == 5) {return colors.lime}
-        else if (deck == 6) {return colors.green}
-        else if (deck == 7) {return colors.mint}
-        else if (deck == 8) {return colors.cyan}
-        else if (deck == 9) {return colors.turquoise}
-        else if (deck == 10) {return colors.colorDeckBlueBright}
-        else if (deck == 11) {return colors.plum}
-        else if (deck == 12) {return colors.violet}
-        else if (deck == 13) {return colors.purple}
-        else if (deck == 14) {return colors.magenta}
-        else if (deck == 15) {return colors.fuchsia}
-        else {return colors.colorWhite};
+        switch (deck) {
+            case 0: return colors.red;
+            case 1: return colors.darkOrange;
+            case 2: return colors.lightOrange;
+            case 3: return colors.warmYellow;
+            case 4: return colors.yellow;
+            case 5: return colors.lime;
+            case 6: return colors.green;
+            case 7: return colors.mint;
+            case 8: return colors.cyan;
+            case 9: return colors.turquoise;
+            case 10: return colors.blue;
+            case 11: return colors.plum;
+            case 12: return colors.violet;
+            case 13: return colors.purple;
+            case 14: return colors.magenta;
+            case 15: return colors.fuchsia;
+            default: return colors.white;
+        }
     }
 
     Rectangle {
@@ -63,7 +68,7 @@ Item {
             font.family: "Roboto"
             font.weight: Font.Normal
             font.pixelSize: 20
-            color: colors.black
+            color: "black"
             text: widget.title
             elide: Text.ElideRight
             visible: deckInfo.shift ? false : true
@@ -77,7 +82,7 @@ Item {
             font.family: "Roboto"
             font.weight: Font.Normal
             font.pixelSize: 20
-            color: colors.black
+            color: "black"
             text: widget.artist
             elide: Text.ElideRight
             visible: deckInfo.shift ? true : false
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/LoopSize.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/LoopSize.qml
index 1de7671a61d1..cdddffc6ec07 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/LoopSize.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/LoopSize.qml
@@ -3,9 +3,13 @@ import QtQuick 2.15
 
 import Mixxx 1.0 as Mixxx
 
+import '../Views' as Views
+
 Item {
     anchors.fill: parent
 
+    Views.Colors {id: colors}
+
   // AppProperty { id: loopEnabled; path: "app.traktor.decks." + (parent.deckId) + ".loop.active" }
     QtObject {
         id: loopEnabled
@@ -24,8 +28,8 @@ Item {
 
     property int deckId: 0
 
-    property var loopActiveColour: colors.cueColours[settings.cueLoopColour]
-    property var loopDimmedColour: colors.cueColoursDark[settings.cueLoopColour]
+    property color loopActiveColour: 'red' //colors.cueColours[settings.cueLoopColour]
+    property color loopDimmedColour: 'red' //colors.cueColoursDark[settings.cueLoopColour]
 
     Rectangle {
         id: loopSizeBackground
diff --git a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/StemOverlay.qml b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/StemOverlay.qml
index 323ff25b21f3..b888f7f482fa 100755
--- a/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/StemOverlay.qml
+++ b/res/controllers/TraktorKontrolS4MK3Screens/S4MK3/Screens/S4MK3/Widgets/StemOverlay.qml
@@ -1,218 +1,256 @@
-import QtQuick 2.5
+import QtQuick 2.15
 import QtQuick.Layouts 1.1
 import '../Views'
 
+import '../../Defines' as Defines
+
 //----------------------------------------------------------------------------------------------------------------------
 //  Remix Deck Overlay - for sample volume and filter value editing
 //----------------------------------------------------------------------------------------------------------------------
 
 Item {
     id: display
-    Colors {id: colors}
-    Dimensions {id: dimensions}
-
-  // MODEL PROPERTIES //
-    property var deckInfo: ({})
 
-    width: 320
-    height: 240
+    required property var deckInfo
 
-  // LAYOUT + DESIGN //
+    Dimensions {id: dimensions}
+    Defines.Colors { id: colors }
+    Defines.Durations { id: durations }
 
-    property real infoBoxesWidth: dimensions.infoBoxesWidth
-    property real firstRowHeight: dimensions.firstRowHeight
-    property real secondRowHeight: dimensions.secondRowHeight
-    property real remixCellWidth: dimensions.thirdRowHeight
-    property real screenTopMargin: dimensions.screenTopMargin
-    property real screenLeftMargin: dimensions.screenLeftMargin
+  // MODEL PROPERTIES //
+    property string showHideState: "hide"
+    property int bottomMargin: 0
+    property int yPositionWhenHidden: 240
+    property int yPositionWhenShown: (195 - bottomMargin)
 
-    property real boxesRadius: 5
-    property real cellSpacing: dimensions.spacing
-    property real textMargin: 13
+    readonly property string name: display.deckInfo.stemSelectedName
 
-    property variant lightGray: colors.colorDeckGrey
-    property variant darkGray: colors.colorDeckDarkGrey
+    state: display.deckInfo.stemSelected ? "show" : "hide"
+    height: 40
+    anchors.left: parent.left
+    anchors.right: parent.right
 
+  // dark grey background
     Rectangle {
-        width: display.width
-        height: 2*display.firstRowHeight + display.secondRowHeight + 3*display.cellsSpacing
-        color: colors.defaultBackground
-    }
-
-    ColumnLayout {
-        spacing: display.cellSpacing
-        anchors.top: parent.top
-        anchors.topMargin: display.screenTopMargin
-        anchors.left: parent.left
-        anchors.leftMargin: display.screenLeftMargin
-
-        DeckHeader {
-            title: display.deckInfo.stemSelectedName
-            height: display.firstRowHeight-6
-            width: 4*(display.infoBoxesWidth/2+1)+7
+        id: bottomInfoDetailsPanelDarkBg
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
         }
-    }
-
-      // VOLUME LABEL //
-    Rectangle {
-
-        x: 3
-        y: 177
-        height: display.firstRowHeight
-        width: display.infoBoxesWidth*2/3
-
-        color: display.deckInfo.isStemsActive ? (!display.deckInfo.stemSelectedMuted ? display.deckInfo.stemSelectedMidColor : colors.darkerColor(display.deckInfo.stemSelectedMidColor, 0.5) ) : "grey"
-        radius: display.boxesRadius
-
-        Text {
-            text: "Volume"
-            font.pixelSize: 22
-            font.family: "Roboto"
-            font.weight: Font.Normal
-            color: display.deckInfo.isStemsActive ? (!display.deckInfo.stemSelectedMuted ? "white" : "grey" ) : "grey"
-            anchors.fill: parent
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
+        height: display.height
+        color: colors.colorFxHeaderBg
+    // light grey background
+        Rectangle {
+            id:bottomInfoDetailsPanelLightBg
+            anchors {
+                top: parent.top
+                left: parent.left
+            }
+            height: display.height
+            width: 105
+            color: colors.colorFxHeaderLightBg
         }
     }
 
-      // FILTER LABEL //
+//  // dividers
     Rectangle {
-
-        x: 110
-        y: 177
-
-        height: display.firstRowHeight
-        width: display.infoBoxesWidth*2/3
-
-        color: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFilterOn ? display.deckInfo.stemSelectedMidColor : colors.darkerColor(display.deckInfo.stemSelectedMidColor, 0.5) ) : "grey"
-        radius: display.boxesRadius
-
-        Text {
-            text: "Filter"
-            font.pixelSize: 24
-            font.family: "Roboto"
-            font.weight: Font.Normal
-            color: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFilterOn ? "white" : "grey" ) : "grey"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.rightMargin: display.textMargin
-            anchors.leftMargin: display.textMargin
-            anchors.fill: parent
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
+        id: fxInfoDivider0
+        width:1;
+        height:63;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 105
     }
 
-      // FX SEND LABEL //
     Rectangle {
-
-        x: 220
-        y: 177
-
-        height: display.firstRowHeight
-        width: display.infoBoxesWidth*2/3
-
-        color: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFXSendOn ? display.deckInfo.stemSelectedMidColor : colors.darkerColor(display.deckInfo.stemSelectedMidColor, 0.5) ) : "grey"
-        radius: display.boxesRadius
-
-        Text {
-            text: "FX Send"
-            font.pixelSize: 24
-            font.family: "Roboto"
-            font.weight: Font.Normal
-            color: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFXSendOn ? "white" : "grey" ) : "grey"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.rightMargin: display.textMargin
-            anchors.leftMargin: display.textMargin
-            anchors.fill: parent
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
+        id: fxInfoDivider2
+        width:1;
+        color: colors.colorDivider
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: 195
+        height: display.height
     }
 
+  // Info Details
     Rectangle {
+        id: bottomInfoDetailsPanel
 
-        x: 3
-        y: 204
+        height: parent.height
+        clip: true
+        width: parent.width
+        color: "transparent"
 
-        height: 2
-        width: display.infoBoxesWidth*2/3
-
-        color: "grey"
+        anchors.left: parent.left
+        anchors.leftMargin: 1
+
+        Row {
+            Item {
+                id: stemInfoDetailsPanel
+
+                height: display.height
+                width: 110
+
+          // name
+                Text {
+                    id: stemInfoName
+                    font.capitalization: Font.AllUppercase
+                    text: "NAME"
+                    color: "orange"
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.topMargin: 2
+                    font.pixelSize: fonts.scale(13.5)
+                    anchors.leftMargin: 4
+                    elide: Text.ElideRight
+                }
+
+          // value
+                Text {
+                    id: nameValue
+                    font.capitalization: Font.AllUppercase
+                    text: name
+                    color: display.deckInfo.stemSelectedMidColor
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 1
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    font.pixelSize: fonts.scale(18)
+                    anchors.leftMargin: 4
+                    elide: Text.ElideRight
+                }
+            }
+
+            Item {
+                id: volumeInfoDetailsPanel
+
+                height: display.height
+                width: 85
+
+          // volume
+                Text {
+                    id: volumeInfoName
+                    font.capitalization: Font.AllUppercase
+                    text: "VOLUME"
+                    color: !display.deckInfo.stemSelectedMuted ? "orange" : "grey"
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.topMargin: 2
+                    font.pixelSize: fonts.scale(13.5)
+                    anchors.leftMargin: 4
+                    elide: Text.ElideRight
+                }
+
+          // value
+                ProgressBar {
+                    id: volume
+                    progressBarHeight: 9
+                    progressBarWidth: 76
+                    anchors.left: parent.left
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 3
+
+                    anchors.leftMargin: 5
+                    anchors.rightMargin: 20
+
+                    value: display.deckInfo.stemSelectedVolume
+
+                    drawAsEnabled: true
+                    progressBarColorIndicatorLevel: display.deckInfo.stemSelectedMuted ? "grey" : colors.colorIndicatorLevelOrange
+                    progressBarBackgroundColor: "black"
+                }
+            }
+
+            Item {
+                id: fxInfoDetailsPanel
+
+                height: display.height
+                width: 125
+
+          // fx name
+                Text {
+                    id: fxInfoSampleName
+
+                    font.capitalization: Font.AllUppercase
+                    text: display.deckInfo.stemSelectedQuickFXName
+                    color: display.deckInfo.stemSelectedQuickFXOn ? "orange" : "grey"
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.topMargin: 2
+                    font.pixelSize: fonts.scale(13.5)
+                    anchors.leftMargin: 4
+                    elide: Text.ElideRight
+                }
+
+          // value
+                ProgressBar {
+                    id: quickfx
+                    progressBarHeight: 9
+                    progressBarWidth: 115
+                    anchors.left: parent.left
+                    anchors.bottom: parent.bottom
+                    anchors.rightMargin: 20
+                    anchors.bottomMargin: 3
+                    anchors.leftMargin: 5
+
+                    value: display.deckInfo.stemSelectedQuickFXValue
+                    visible: fxInfoSampleName.text !== "---"
+
+                    drawAsEnabled: true
+                    progressBarColorIndicatorLevel: display.deckInfo.stemSelectedQuickFXOn ? colors.colorIndicatorLevelOrange : "grey"
+                    progressBarBackgroundColor: "black"
+                }
+            }
+
+            // StemInfoDetails {
+            //     id: bottomInfoDetails3
+            //     finalValue: (type == 0 ? "Cue" : type == 1 ? "Fade-In" : type == 2 ? "Fade-Out" : type == 3 ? "Load" : type == 4 ? "Grid" : type == 5 ? "Loop" : "-")
+            //     finalLabel: "TYPE"
+            //     width: 50
+            // }
+        }
     }
 
+  // black border & shadow
     Rectangle {
-
-        x: 110
-        y: 204
-
+        id: headerBlackLine
+        anchors.top: display.bottom
+        width: parent.width
+        color: colors.colorBlack
         height: 2
-        width: display.infoBoxesWidth*2/3
-
-        color: "grey"
     }
-
     Rectangle {
-
-        x: 220
-        y: 204
-
-        height: 2
-        width: display.infoBoxesWidth*2/3
-
-        color: "grey"
+        id: headerShadow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: headerBlackLine.bottom
+        height: 6
+        gradient: Gradient {
+            GradientStop { position: 1.0; color: colors.colorBlack0 }
+            GradientStop { position: 0.0; color: colors.colorBlack63 }
+        }
+        visible: false
     }
 
-      // VOLUME SLIDER //
-    Slider {
-        x: 3
-        y: 205
-        width: display.infoBoxesWidth*2/3
-        height: display.firstRowHeight
-        min: 0
-        max: 1
-        value: display.deckInfo.isStemsActive ? display.deckInfo.stemSelectedVolume : 0.5
-        radius: 0
-
-        backgroundColor: display.deckInfo.isStemsActive ? (!display.deckInfo.stemSelectedMuted ? display.deckInfo.stemSelectedMidColor : colors.darkerColor(display.deckInfo.stemSelectedMidColor, 0.5) ) : "grey"
-        sliderColor: display.deckInfo.isStemsActive ? (!display.deckInfo.stemSelectedMuted ? display.deckInfo.stemSelectedBrightColor : display.deckInfo.stemSelectedMidColor ) : "red"
-        cursorColor: display.deckInfo.isStemsActive ? (!display.deckInfo.stemSelectedMuted ? "white" : "grey" ) : "grey"
-    }
+  //------------------------------------------------------------------------------------------------------------------
+  //  STATES
+  //------------------------------------------------------------------------------------------------------------------
 
-      // FILTER SLIDER //
-    Slider {
-        x: 110
-        y: 205
-        width: display.infoBoxesWidth*2/3
-        height: display.firstRowHeight
-
-        value: display.deckInfo.isStemsActive > 0 ? display.deckInfo.stemSelectedFilterValue : 0
-        min: 0
-        max: 1
-        centered: true
-        radius: 0
-
-        backgroundColor: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFilterOn ? display.deckInfo.stemSelectedMidColor : colors.darkerColor(display.deckInfo.stemSelectedMidColor, 0.5) ) : "grey"
-        sliderColor: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFilterOn ? display.deckInfo.stemSelectedBrightColor : display.deckInfo.stemSelectedMidColor ) : "red"
-        cursorColor: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFilterOn ? "white" : "grey" ) : "grey"
-        centerColor: colors.defaultBackground
-    }
+    Behavior on y { PropertyAnimation { duration: 100; easing.type: Easing.InOutQuad } }
 
-      // FX SEND SLIDER //
-    Slider {
-        x: 220
-        y: 205
-        width: display.infoBoxesWidth*2/3
-        height: display.firstRowHeight
-
-        value: display.deckInfo.isStemsActive > 0 ? display.deckInfo.stemSelectedFXSendValue : 0
-        min: 0
-        max: 1
-        radius: 0
-
-        backgroundColor: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFXSendOn ? display.deckInfo.stemSelectedMidColor : colors.darkerColor(display.deckInfo.stemSelectedMidColor, 0.5) ) : "grey"
-        sliderColor: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFXSendOn ? display.deckInfo.stemSelectedBrightColor : display.deckInfo.stemSelectedMidColor ) : "red"
-        cursorColor: display.deckInfo.isStemsActive ? (display.deckInfo.stemSelectedFXSendOn ? "white" : "grey" ) : "grey"
-        centerColor: colors.defaultBackground
-    }
+    states: [
+        State {
+            name: "show";
+            PropertyChanges { target: display; y: yPositionWhenShown}
+        },
+        State {
+            name: "hide";
+            PropertyChanges { target: display; y: yPositionWhenHidden}
+        }
+    ]
 }
diff --git a/src/qml/qmlchainpresetmodel.cpp b/src/qml/qmlchainpresetmodel.cpp
index 91003702ad4d..4a3755243339 100644
--- a/src/qml/qmlchainpresetmodel.cpp
+++ b/src/qml/qmlchainpresetmodel.cpp
@@ -62,8 +62,13 @@ QHash<int, QByteArray> QmlChainPresetModel::roleNames() const {
 }
 
 QVariant QmlChainPresetModel::get(int row) const {
-    QModelIndex idx = index(row, 0);
     QVariantMap dataMap;
+    QModelIndex idx = index(row, 0);
+
+    if (!idx.isValid()) {
+        return dataMap;
+    }
+
     for (auto it = kRoleNames.constBegin(); it != kRoleNames.constEnd(); it++) {
         dataMap.insert(it.value(), data(idx, it.key()));
     }