1 files changed, 86 insertions, 36 deletions

diff --git a/modules/osd/Content.qml b/modules/osd/Content.qml
index 80fc714..707695d 100644
--- a/modules/osd/Content.qml
+++ b/modules/osd/Content.qml
@@ -1,73 +1,123 @@
 pragma ComponentBehavior: Bound
 
+import qs.components
 import qs.components.controls
 import qs.services
 import qs.config
 import qs.utils
 import QtQuick
+import QtQuick.Layouts
 
-Column {
+Item {
     id: root
 
     required property Brightness.Monitor monitor
-
-    padding: Appearance.padding.large
+    required property var visibilities
 
     anchors.verticalCenter: parent.verticalCenter
     anchors.left: parent.left
 
-    spacing: Appearance.spacing.normal
-
-    // Speaker volume
-    CustomMouseArea {
-        implicitWidth: Config.osd.sizes.sliderWidth
-        implicitHeight: Config.osd.sizes.sliderHeight
-
-        onWheel: event => {
-            if (event.angleDelta.y > 0)
-                Audio.incrementVolume();
-            else if (event.angleDelta.y < 0)
-                Audio.decrementVolume();
-        }
+    implicitWidth: layout.implicitWidth + Appearance.padding.large * 2
+    implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
 
-        FilledSlider {
-            anchors.fill: parent
-
-            icon: Icons.getVolumeIcon(value, Audio.muted)
-            value: Audio.volume
-            onMoved: Audio.setVolume(value)
-        }
-    }
+    ColumnLayout {
+        id: layout
 
-    // Brightness
-    WrappedLoader {
-        active: Config.osd.enableBrightness
+        anchors.centerIn: parent
+        spacing: Appearance.spacing.normal
 
-        sourceComponent: CustomMouseArea {
+        // Speaker volume
+        CustomMouseArea {
             implicitWidth: Config.osd.sizes.sliderWidth
             implicitHeight: Config.osd.sizes.sliderHeight
 
             onWheel: event => {
-                const monitor = root.monitor;
-                if (!monitor)
-                    return;
                 if (event.angleDelta.y > 0)
-                    monitor.setBrightness(monitor.brightness + 0.1);
+                    Audio.incrementVolume();
                 else if (event.angleDelta.y < 0)
-                    monitor.setBrightness(monitor.brightness - 0.1);
+                    Audio.decrementVolume();
             }
 
             FilledSlider {
                 anchors.fill: parent
 
-                icon: `brightness_${(Math.round(value * 6) + 1)}`
-                value: root.monitor?.brightness ?? 0
-                onMoved: root.monitor?.setBrightness(value)
+                icon: Icons.getVolumeIcon(value, Audio.muted)
+                value: Audio.volume
+                onMoved: Audio.setVolume(value)
+            }
+        }
+
+        // Microphone volume
+        WrappedLoader {
+            shouldBeActive: Config.osd.enableMicrophone && (!Config.osd.enableBrightness || !root.visibilities.session)
+
+            sourceComponent: CustomMouseArea {
+                implicitWidth: Config.osd.sizes.sliderWidth
+                implicitHeight: Config.osd.sizes.sliderHeight
+
+                onWheel: event => {
+                    if (event.angleDelta.y > 0)
+                        Audio.incrementSourceVolume();
+                    else if (event.angleDelta.y < 0)
+                        Audio.decrementSourceVolume();
+                }
+
+                FilledSlider {
+                    anchors.fill: parent
+
+                    icon: Icons.getMicVolumeIcon(value, Audio.sourceMuted)
+                    value: Audio.sourceVolume
+                    onMoved: Audio.setSourceVolume(value)
+                }
+            }
+        }
+
+        // Brightness
+        WrappedLoader {
+            shouldBeActive: Config.osd.enableBrightness
+
+            sourceComponent: CustomMouseArea {
+                implicitWidth: Config.osd.sizes.sliderWidth
+                implicitHeight: Config.osd.sizes.sliderHeight
+
+                onWheel: event => {
+                    const monitor = root.monitor;
+                    if (!monitor)
+                        return;
+                    if (event.angleDelta.y > 0)
+                        monitor.setBrightness(monitor.brightness + 0.1);
+                    else if (event.angleDelta.y < 0)
+                        monitor.setBrightness(monitor.brightness - 0.1);
+                }
+
+                FilledSlider {
+                    anchors.fill: parent
+
+                    icon: `brightness_${(Math.round(value * 6) + 1)}`
+                    value: root.monitor?.brightness ?? 0
+                    onMoved: root.monitor?.setBrightness(value)
+                }
             }
         }
     }
+
     component WrappedLoader: Loader {
+        required property bool shouldBeActive
+
+        Layout.preferredHeight: shouldBeActive ? Config.osd.sizes.sliderHeight : 0
+        opacity: shouldBeActive ? 1 : 0
+        active: opacity > 0
         asynchronous: true
         visible: active
+
+        Behavior on Layout.preferredHeight {
+            Anim {
+                easing.bezierCurve: Appearance.anim.curves.emphasized
+            }
+        }
+
+        Behavior on opacity {
+            Anim {}
+        }
     }
 }