feat: first iteration off a working audio volumen manager

- default sink
   - mute it
   - change volume
- streams
   - change volume

.qmllint.ini

@@ -0,0 +1,33 @@
+[General]
+DisableDefaultImports=false
+
+[Warnings]
+AccessSingletonViaObject=warning
+AttachedPropertyReuse=disable
+BadSignalHandlerParameters=warning
+CompilerWarnings=disable
+Deprecated=warning
+DuplicatePropertyBinding=warning
+DuplicatedName=warning
+ImportFailure=warning
+IncompatibleType=warning
+InheritanceCycle=warning
+InvalidLintDirective=warning
+LintPluginWarnings=disable
+MissingProperty=warning
+MissingType=warning
+MultilineStrings=info
+NonListProperty=warning
+PrefixedImportType=warning
+PropertyAliasCycles=warning
+ReadOnlyProperty=warning
+RequiredProperty=warning
+RestrictedType=warning
+TopLevelComponent=warning
+UncreatableType=warning
+UnqualifiedAccess=warning
+UnresolvedType=warning
+UnusedImports=info
+UseProperFunction=warning
+VarUsedBeforeDeclaration=warning
+WithStatement=warning

.qmlls.ini

@@ -0,0 +1,2 @@
+[General]
+no-cmake-calls=false

assets/audio-volume-high.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <style id="current-color-scheme" type="text/css">
+        .ColorScheme-Text {
+            color:#232629;
+        }
+    </style>
+    <g class="ColorScheme-Text" fill="currentColor">
+        <path d="m8 2-4 4v4l4 4h1v-12z"/>
+        <path d="m2 6v4h1v-4z"/>
+        <path d="m10.128906 4.615234-.3300779.988282a3 3 0 0 1 1.2011719 2.396484 3 3 0 0 1 -1.2011719 2.396484l.3281249.984375a4 4 0 0 0 1.873047-3.380859 4 4 0 0 0 -1.871094-3.384766z"/>
+        <path d="m9.9453125 2.332031-.1679687 1a5 5 0 0 1 3.2226562 4.667969 5 5 0 0 1 -3.2207031 4.671875l.1660156.998047a6 6 0 0 0 4.0546875-5.669922 6 6 0 0 0 -4.0546875-5.667969z"/>
+    </g>
+</svg>

assets/folder-music.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs id="defs3051">
+    <style type="text/css" id="current-color-scheme">
+      .ColorScheme-Text {
+        color:#232629;
+      }
+      </style>
+  </defs>
+    <path 
+        style="fill:currentColor"
+        d="M 5 2 L 5 4 L 5 10.3 C 4.705 10.1 4.4 10 4 10 C 2.9 10 2 10.9 2 12 C 2 13.1 2.9 14 4 14 C 5.1 14 6 13.1 6 12 L 6 6 L 13 6 L 13 8.3 C 12.705 8.1 12.4 8 12 8 C 10.9 8 10 8.9 10 10 C 10 11.1 10.9 12 12 12 C 13.1 12 14 11.1 14 10 L 14 2 L 5 2 z M 6 4 L 13 4 L 13 5 L 6 5 L 6 4 z " 
+        class="ColorScheme-Text"/>
+</svg>

src/AudioOutput.qml

@@ -13,7 +13,7 @@ import "windows"
 // BUG: When controlling audio from outside of QS, the change is reflected, but if audio in pavucontrol is not 100%
 // QS can only change from 0 to whatever is set in pavucontrol
 Rectangle {
-    id: test
+    id: aoutput
     width: parent.width
     height: (icon.height + slider.height) * 1.5
     anchors.bottomMargin: 5
@@ -28,13 +28,20 @@ Rectangle {
         objects: [sink]
     }
 
+    required property var popupAnchor
+
+    AudioManager {
+        id: audioman
+        anchor.window: popupAnchor
+    }
+
     MouseArea {
         id: audio_area
 
         anchors.fill: parent
 
         onClicked: {
-            AudioManager.visible = !AudioManager.visible;
+            audioman.visible = !audioman.visible;
         }
 
         onWheel: wheel => {
@@ -52,7 +59,7 @@ Rectangle {
             // TODO: Make icon depend on sink type and volume level
             Image {
                 id: icon
-                source: "speaker.png"
+                source: "root:/../assets/speaker.png"
                 width: parent.width * (2 / 3)
 
                 anchors.horizontalCenter: parent.horizontalCenter

src/Bar.qml

@@ -1,14 +1,17 @@
 import Quickshell // for ShellRoot and PanelWindow
 import QtQuick // for Text
 import Quickshell.Io // for process
+import "windows"
 
 Scope {
     Variants {
         model: Quickshell.screens
         // the screen from the screens list will be injected into this property
         PanelWindow {
+            id: root
             property var modelData
             screen: modelData
+
             anchors {
                 top: true
                 left: true
@@ -17,7 +20,7 @@ Scope {
             margins.left: 2
 
             width: 30
-            color: "#00000000"
+            color: "transparent"
 
             // the ClockWidget type we just created
             // TODO: on click open a calendar view
@@ -27,6 +30,7 @@ Scope {
             }
 
             AudioOutput {
+                popupAnchor: root
                 anchors.top: clock.bottom
                 anchors.horizontalCenter: parent.horizontalCenter
             }

src/windows/AudioEntry.qml

@@ -0,0 +1,84 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import Quickshell.Services.Pipewire
+
+RowLayout {
+    required property PwNode node
+
+    // bind the node so we can read its properties
+    PwObjectTracker {
+        objects: [node]
+    }
+
+    //Component.onCompleted: console.log(JSON.stringify(node.properties, null, 2))
+
+    Image {
+        source: {
+            const hasIcon = !!node.properties["application.icon-name"] ?? false;
+            console.log(hasIcon);
+            const getFallback = () => node.isStream ? "root:/../assets/folder-music.svg" : "root:/../assets/audio-volume-high.svg";
+            const icon = hasIcon ? `image://icon/${node.properties["application.icon-name"]}` : getFallback();
+            icon;
+        }
+
+        //sourceSize.width: 40
+        //sourceSize.height: 40
+        fillMode: Image.PreserveAspectFit
+
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        Layout.maximumWidth: 40
+        Layout.maximumHeight: parent.height
+
+        sourceSize.width: 40
+        sourceSize.height: 40
+        //width: 40
+        //height: 40
+        Component.onCompleted: console.log(`width: ${paintedWidth}, height: ${paintedHeight}`)
+    }
+
+    ColumnLayout {
+        RowLayout {
+            id: b
+            spacing: 6
+            Layout.preferredHeight: 30
+
+            Text {
+                text: node.properties["media.name"] ?? node.description
+            }
+
+            Button {
+                visible: node.isSink
+                width: 10
+                checkable: true
+                Image {
+                    source: node.audio.muted ? "root:/../assets/mute.png" : "root:/../assets/speaker.png"
+                    height: parent.height * (2 / 3)
+
+                    anchors.centerIn: parent
+
+                    fillMode: Image.PreserveAspectFit
+                }
+                onClicked: node.audio.muted = !node.audio.muted
+            }
+
+            Button {
+                visible: node.isSink
+                text: "default"
+            }
+        }
+        RowLayout {
+            Label {
+                Layout.preferredWidth: 50
+                text: `${Math.floor(node.audio.volume * 100)}%`
+            }
+
+            Slider {
+                Layout.fillWidth: true
+                value: node.audio.volume
+                onValueChanged: node.audio.volume = value
+            }
+        }
+    }
+}

src/windows/AudioManager.qml

@@ -1,19 +1,60 @@
-pragma Singleton
-
 import Quickshell
+import Quickshell.Services.Pipewire
 import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
 
-Singleton {
+PopupWindow {
-    FloatingWindow {
+    anchor {
-        color: "transparent"
+        rect.x: 30
-        height: 300
+        rect.y: 20
-        width: 600
+    }
 
-        Rectangle {
+    color: "transparent"
+    width: 500
+    height: 300
+    visible: false
+
+    Rectangle {
+        anchors.fill: parent
+        border.color: "black"
+        border.width: 2
+        radius: 5
+        color: "white"
+        ScrollView {
             anchors.fill: parent
-            color: "#20ffffff"
+            contentWidth: availableWidth
 
-            // your content here
+            ColumnLayout {
+                anchors.fill: parent
+                anchors.margins: 10
+
+                PwNodeLinkTracker {
+                    id: linkTracker
+                    node: Pipewire.defaultAudioSink
+                }
+
+                AudioEntry {
+                    node: Pipewire.defaultAudioSink
+                }
+
+                Rectangle {
+                    height: 2
+                    color: "black"
+                    Layout.fillWidth: true
+                    radius: 10
+                }
+
+                Repeater {
+                    // Show all sources, regardless of what sink they are assigned to
+                    model: Pipewire.linkGroups
+
+                    AudioEntry {
+                        required property PwLinkGroup modelData
+                        node: modelData.source
+                    }
+                }
+            }
         }
     }
 }