feat: add application name to stream description

assets/audio-volume-muted.svg

@@ -0,0 +1,21 @@
+<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+    <style id="current-color-scheme" type="text/css">
+        .ColorScheme-Text {
+            color:#232629;
+        }
+        .ColorScheme-NegativeText {
+            color:#da4453;
+        }
+    </style>
+    <g class="ColorScheme-Text" fill="currentColor">
+        <path d="m3 8v6h2v-6z"/>
+        <path d="m6 8v6l5 5h1v-5z"/>
+        <path d="m11 3-3 3 4 4v-7z"/>
+        <g opacity=".35">
+            <path d="m14.832031 16.832031a7 7 0 0 1 -1.21289.646485l.24414.974609a8 8 0 0 0 1.681641-.908203z"/>
+            <path d="m14.324219 7.28125-.539063.8613281a4 4 0 0 1 1.214844 2.8574219 4 4 0 0 1 -.371094 1.628906l.75.75a5 5 0 0 0 .621094-2.378906 5 5 0 0 0 -1.675781-3.71875z"/>
+            <path d="m13.865234 3.5371094-.24414.9765625a7 7 0 0 1 4.378906 6.4863281 7 7 0 0 1 -1.166016 3.833984l.716797.716797a8 8 0 0 0 1.449219-4.550781 8 8 0 0 0 -5.134766-7.4628906z"/>
+        </g>
+    </g>
+    <path d="m-.50000006 4.7426407 1-.0000001v21.6274174h-1z" class="ColorScheme-NegativeText" fill="currentColor" transform="matrix(.70710678 -.70710678 .70710678 .70710678 0 0)"/>
+</svg>

src/windows/AudioEntry.qml

@@ -15,15 +15,10 @@ RowLayout {
 
     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();
+            node.properties["application.icon-name"] ? `image://icon/${node.properties["application.icon-name"]}` : getFallback();
-            icon;
         }
 
-        //sourceSize.width: 40
-        //sourceSize.height: 40
         fillMode: Image.PreserveAspectFit
 
         Layout.fillHeight: true
@@ -33,9 +28,6 @@ RowLayout {
 
         sourceSize.width: 40
         sourceSize.height: 40
-        //width: 40
-        //height: 40
-        Component.onCompleted: console.log(`width: ${paintedWidth}, height: ${paintedHeight}`)
     }
 
     ColumnLayout {
@@ -45,7 +37,15 @@ RowLayout {
             Layout.preferredHeight: 30
 
             Text {
-                text: node.properties["media.name"] ?? node.description
+                text: {
+                    const app = node.isStream ? `[${node.properties["application.name"]}] ` : "";
+                    return app + (node.properties["media.name"] ?? node.description);
+                }
+            }
+
+            Item {
+                // Padding to move the buttons to the right
+                Layout.fillWidth: true
             }
 
             Button {
@@ -53,7 +53,7 @@ RowLayout {
                 width: 10
                 checkable: true
                 Image {
-                    source: node.audio.muted ? "root:/../assets/mute.png" : "root:/../assets/speaker.png"
+                    source: node.audio.muted ? "root:/../assets/audio-volume-muted.svg" : "root:/../assets/audio-volume-high.svg"
                     height: parent.height * (2 / 3)
 
                     anchors.centerIn: parent