1 files changed, 21 insertions, 12 deletions
diff --git a/resources/qml/ui/media/VolumeControl.qml b/resources/qml/ui/media/VolumeControl.qml
index cd844ed5..e87550ac 100644
--- a/resources/qml/ui/media/VolumeControl.qml
+++ b/resources/qml/ui/media/VolumeControl.qml
@@ -2,9 +2,12 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+import "../"
+
 import QtMultimedia 5.15
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+
 import im.nheko 1.0
 
 // Volume slider activator
@@ -17,6 +20,7 @@ Image {
     property alias controlsVisible: volumeSliderRect.visible
     property bool muted: false
     property color controlColor: (volumeImageArea.containsMouse) ? Nheko.colors.highlight : Nheko.colors.text
+    width: sourceSize.width + volumeSliderRect.implicitWidth
 
     source: (desiredVolume > 0 && !muted) ? "image://colorimage/:/icons/icons/ui/volume-up.png?" + controlColor : "image://colorimage/:/icons/icons/ui/volume-off-indicator.png?" + controlColor
     fillMode: Image.PreserveAspectFit
@@ -45,32 +49,38 @@ Image {
         id: volumeSliderRect
 
         opacity: (visible) ? 1 : 0
-        anchors.bottom: volumeImage.top
-        anchors.bottomMargin: 10
-        anchors.horizontalCenter: volumeImage.horizontalCenter
+        anchors.bottom: volumeSlider.orientation == Qt.Vertical ? volumeImage.top : undefined
+        anchors.left: volumeSlider.orientation == Qt.Vertical ? undefined : volumeImage.right
+        anchors.horizontalCenter: volumeSlider.orientation == Qt.Vertical ? volumeImage.horizontalCenter : undefined
+        anchors.verticalCenter: volumeSlider.orientation == Qt.Vertical ? undefined : volumeImage.verticalCenter
         color: {
-            var wc = Nheko.colors.window;
-            return Qt.rgba(wc.r, wc.g, wc.b, 0.5);
+            if (volumeSlider.orientation == Qt.Vertical) {
+                var wc = Nheko.colors.window;
+                return Qt.rgba(wc.r, wc.g, wc.b, 0.5);
+            } else {
+                return "transparent";
+            }
         }
         /* TODO: base width on the slider width (some issue with it not having a geometry
         when using the width here?) */
-        width: volumeImage.width * 0.7
+        width: volumeSlider.orientation == Qt.Vertical ? volumeImage.width * 0.7 : 100
         radius: volumeSlider.width / 2
-        height: controlRect.height * 2 //100
+        height: volumeSlider.orientation == Qt.Vertical ? 100 : volumeImage.height * 0.7
         visible: volumeImageArea.containsMouse || volumeSliderHideTimer.running || volumeSliderRectMouseArea.containsMouse
 
-        Slider {
+        NhekoSlider {
             // TODO: the slider is slightly off-center on the left for some reason...
             id: volumeSlider
 
+            sliderWidth: 8
+            sliderHeight: 8
             // Desired value to avoid loop onMoved -> media.volume -> value -> onMoved...
             property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value, QtMultimedia.LogarithmicVolumeScale, QtMultimedia.LinearVolumeScale)
 
             value: 1
             anchors.fill: volumeSliderRect
-            anchors.bottomMargin: volumeSliderRect.height * 0.1
-            anchors.topMargin: volumeSliderRect.height * 0.1
-            anchors.horizontalCenter: volumeSliderRect.horizontalCenter
+            anchors.horizontalCenter: orientation == Qt.Vertical ? volumeSliderRect.horizontalCenter : undefined
+            anchors.verticalCenter: orientation == Qt.Vertical ? undefined : volumeSliderRect.verticalCenter
             orientation: Qt.Vertical
             onDesiredVolumeChanged: {
                 volumeImage.muted = !(desiredVolume > 0);
@@ -101,7 +111,6 @@ Image {
             }
 
         }
-        // TODO: figure out a better way to put the slider popup above controlRect
 
     }