Inital commit checkpoint

2025-08-31 23:39:53 -04:00
commit f5dbdea627
39 changed files with 2637 additions and 0 deletions
--- a/osd/MediaControls.qml
+++ b/osd/MediaControls.qml
@@ -0,0 +1,93 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Mpris
+import Quickshell.Io
+import qs.common
+import qs
+import Quickshell.Wayland
+
+Scope {
+  id: root
+  property bool visible: false
+  readonly property MprisPlayer acivePlayer: MprisController.activePlayer()
+  readonly property real osdWidth: Appearance.sizes.osdWidth
+  readonly property real widgetWidth: Appearance.sizes.mediaControlsWidth
+  readonly property real widgetHeight: Appearance.sizes.mediaControlsHeight
+  property real contentPadding: 13
+  property real popupRounding: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
+  property real artRounding: Appearance.rounding.verysmall
+
+
+  Loader {
+    id: mediaControlsLoader
+    active: GlobalStates.mediaControlsOpen
+    onActiveChanged: {
+      if (!mediaControlsLoader.active & !MprisController.hasPlayers) {
+        GlobalStates.mediaControlsOpen = false;
+      }
+    }
+
+    sourceComponent: PanelWindow {
+      id: mediaControlsRoot
+      visible: true
+      
+      exclusionMode: ExclusionMode.Ignore
+      exclusiveZone: 0
+      margins {
+        top: Appearance.sizes.barHeight
+        bottom: Appearance.sizes.barHeight
+        //left: (mediaControlsRoot.screen.width / 2) - (osdWidth / 2) - widgetWidth
+      }
+      implicitWidth: root.widgetWidth
+      implicitHeight: playerColumnLayout.implicitHeight
+      color: "transparent"
+      WlrLayershell.namespace: "quickshell:mediaControls"
+
+      anchors {
+        top: !Config.options.bar.bottom
+        bottom: Config.options.bar.bottom
+        //left: true
+      }
+
+      mask: Region {
+        item: playerColumnLayout
+      }
+
+      ColumnLayout {
+        id: playerColumnLayout
+        anchors.fill: parent
+        spacing: -Appearance.sizes.elevationMargin
+
+        Repeater {
+          model: ScriptModel {
+            values: MprisController.meaningfulPlayers
+          }
+          delegate: PlayerControl {
+            required property MprisPlayer modelData
+            contentPadding: root.contentPadding
+            popupRounding: root.popupRounding
+            artRounding: root.artRounding
+            player: modelData
+          }
+        }
+      }
+    }
+  }
+
+  IpcHandler {
+    target: "mediaControls"
+
+    function toggle(): void {
+      mediaControlsLoader.active = !mediaControlsLoader.active;
+    }
+
+    function close(): void {
+      mediaControls.loader.active = false;
+    }
+
+    function open(): void {
+      mediaControlsLoader.active = true;
+    }
+  }
+}
--- a/osd/PlayerControl.qml
+++ b/osd/PlayerControl.qml
@@ -0,0 +1,198 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Io
+import Quickshell.Services.Mpris
+import qs.common
+import qs.common.functions
+import qs.common.widgets
+import Qt5Compat.GraphicalEffects
+
+Item {
+  // -- fields --
+  id: playerController
+  required property MprisPlayer player
+  required property real popupRounding
+  required property real contentPadding
+  required property real artRounding
+  property var artUrl: player?.trackArtUrl
+  property string artDownloadLocation: Directories.coverArt
+  property string artFileName: Qt.md5(artUrl) + ".jpg"
+  property string artFilePath: `${artDownloadLocation}/${artFileName}`
+  property color artDominantColor: ColorUtils.mix((colorQuantizer?.colors[0] ?? Appearance.colors.colPrimary), Appearance.colors.colPrimaryContainer, 0.8) || Appearance.m3colors.m3secondaryContainer
+  property bool downloaded: false
+  
+  implicitWidth: widgetWidth
+  implicitHeight: widgetHeight
+
+  // colors
+  property bool backgroundIsDark: artDominantColor.hslLightness < 0.5
+  property QtObject blendedColors: QtObject {
+    property color colLayer0: ColorUtils.mix(Appearance.colors.colLayer0, artDominantColor, (backgroundIsDark && Appearance.m3colors.darkmode) ? 0.6 : 0.5)
+    property color colLayer1: ColorUtils.mix(Appearance.colors.colLayer1, artDominantColor, 0.5)
+    property color colOnLayer0: ColorUtils.mix(Appearance.colors.colOnLayer0, artDominantColor, 0.5)
+    property color colOnLayer1: ColorUtils.mix(Appearance.colors.colOnLayer1, artDominantColor, 0.5)
+    property color colSubtext: ColorUtils.mix(Appearance.colors.colOnlayer1, artDominantColor, 0.5)
+    property color colPrimary: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimary, artDominantColor), artDominantColor, 0.5)
+    property color colPrimaryHover: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryHover, artDominantColor), artDominantColor, 0.3)
+    property color colPrimaryActive: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryActive, artDominantColor), artDominantColor, 0.3)
+    property color colSecondaryContainer: ColorUtils.mix(Appearance.m3colors.m3secondaryContainer, artDominantColor, 0.15)
+    property color colSecondaryContainerHover: ColorUtils.mix(Appearance.colors.colSecondaryContainerHover, artDominantColor, 0.5)
+    property color colSecondaryContainerActive: ColorUtils.mix(Appearance.colors.colSecondaryContainerActive, artDominantColor, 0.5)
+    property color colOnPrimary: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.m3colors.m3onPrimary, artDominantColor), artDominantColor, 0.5)
+    property color colOnSecondaryContainer: ColorUtils.mix(Appearance.m3colors.m3onSecondaryContainer, artDominantColor, 0.5)
+  }
+
+  // -- components --
+
+  component TrackChangeButton: RippleButton {
+    implicitWidth: 24
+    implicitHeight: 24
+    property var iconName
+    colBackground: ColorUtils.transparentize(blendedColors.colSecondaryContainer, 1)
+  }
+
+  Timer {
+    running: playerController.player?.playbackState == MprisPlaybackState.Playing
+    interval: 1000
+    repeat: true
+    onTriggered: {
+      playerController.player.positionChanged()
+    }
+  }
+
+  onArtUrlChanged: {
+    if (playerController.artUrl.length == 0) {
+      playerController.artDominantColor = Appearance.m3colors.m3secondaryContainer;
+      return;
+    }
+    playerController.downloaded = false
+    coverArtDownloader.running = true
+  }
+
+  Process {
+    id: coverArtDownloader
+    property string targetFile: playerController.artUrl
+    command: ["bash", "-c", `[ -f ${playerController.artFilePath} ] || curl -sSL '${targetFile}' -o '${playerController.artFilePath}'`]
+    onExited: (exitCode, exitStatus) => {
+      playerController.downloaded = true;
+    }
+  }
+
+  ColorQuantizer { // From Quickshell
+    id: colorQuantizer
+    source: playerController.downloaded ? Qt.resolvedUrl(playerController.artFilePath) : ""
+    depth: 0
+    rescaleSize: 1
+  }
+
+  Rectangle {
+    id: background
+    anchors.fill: parent
+    anchors.margins: Appearance.sizes.elevationMargin
+    color: blendedColors.colLayer0
+    radius: root.popupRounding
+    layer.enabled: true
+    layer.effect: OpacityMask {
+      maskSource: Rectangle {
+        width: background.width
+        height: background.height
+        radius: background.radius
+      }
+    }
+    /*
+    Image {
+      id: blurredArt
+      anchors.fill: parent
+      source: playerController.downloaded ? Qt.resolvedUrl(playerController.artFilePath) : ""
+      sourceSize.width: background.width
+      sourceSize.height: background.height
+      fillMode: Image.PreserveAspectCrop
+      cache: false
+      antialiasing: true
+      asynchronous: true
+
+      layer.enabled: true
+      layer.effect: MultiEffect {
+        source: blurredArt
+        saturation: 0.2
+        blurEnabled: true
+        blurMax: 100
+        blur: 1
+      }
+    }
+    */
+
+    Rectangle {
+      anchors.fill: parent
+      color: ColorUtils.transparentize(playerController.blendedColors.colLayer0, 0.3)
+      radius: playerController.popupRounding
+    }
+  }
+
+  RowLayout {
+    anchors.fill: parent
+    anchors.margins: playerController.contentPadding
+    spacing: 15
+
+    Rectangle {
+      id: artBackground
+      Layout.fillHeight: true
+      implicitWidth: height
+      radius: playerController.artRounding
+      color:ColorUtils.transparentize(blendedColors.colLayer1, 0.5)
+
+      layer.enabled: true
+      layer.effect: OpacityMask {
+        maskSource: Rectangle {
+          width: artBackground.width
+          height: artBackground.height
+          radius: artBackground.radius
+        }
+      }
+
+      Image {
+        id: mediaArt
+        property int size: parent.height
+        anchors.fill: parent
+
+        source: playerController.downloaded ? Qt.resolvedUrl(playerController.artFilePath) : ""
+        fillMode: Image.PreserveAspectCrop
+        cache:false
+        antialiasing: true
+        asynchronous: true
+
+        width: size
+        height: size
+        sourceSize.width: size
+        sourceSize.height: size
+      }
+    }
+
+    ColumnLayout {
+      Layout.fillHeight: true
+      spacing: 2
+
+      StyledText {
+        id: trackTitle
+        Layout.fillWidth: true
+        font.pixelSize: Appearance.font.pixelSize.large
+        color: blendedColors.colOnLayer0
+        elide: Text.ElideRight
+        text: playerController.player?.trackTitle || "Untitled"
+      }
+      StyledText {
+        id: trackArtist
+        Layout.fillWidth: true
+        font.pixelSize: Appearance.font.pixelSize.smaller
+        color:blendedColors.colSubtext
+        elide: Text.ElideRight
+        text: playerController.player?.trackArtist
+      }
+      Item { // spacing
+        Layout.fillHeight: true
+      }
+    }
+  }
+}
--- a/osd/VolumeDisplay.qml
+++ b/osd/VolumeDisplay.qml
@@ -0,0 +1,104 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Pipewire
+import Quickshell.Widgets
+import qs
+import qs.common
+
+Scope {
+  id: root
+
+  // communicate when the volume display should show or not
+  property bool showVolumeDisplay: false
+
+  // Bind to pipewire's default output node
+  // https://quickshell.org/docs/v0.2.0/types/Quickshell.Services.Pipewire/PwObjectTracker/
+  PwObjectTracker {
+    objects: [ Pipewire.defaultAudioSink ]
+  }
+
+  // Setup a connection to when the volume is changed
+  // https://doc.qt.io/qt-6/qml-qtqml-connections.html
+  Connections {
+    target: Pipewire.defaultAudioSink?.audio
+
+    function onVolumeChanged() {
+      GlobalStates.osdVolumeOpen = true;
+      hideTimer.restart();
+    }
+  }
+
+  // timer after 1 second hide the volume display
+  // https://doc.qt.io/qt-6/qml-qtqml-timer.html
+  Timer {
+    id: hideTimer
+    interval: Config.options.osd.timeout
+    onTriggered: GlobalStates.osdVolumeOpen = false
+  }
+
+  // loader to create and destroy volume display 
+  LazyLoader {
+    active: GlobalStates.osdVolumeOpen
+
+    // according to documentation in Quickshell, PanelWindow is not an uncreatable-type, despite the qmlls language server's warning
+    // I assume that the yelling is because there is a discrepancy between implementation and language server
+    PanelWindow {
+      // it seems you can use {} if you want multiple under a category
+      // the example for that is in Bar.qml
+      anchors.bottom: true
+      // similar discrepancy it seems
+      margins.bottom: screen.height / 5
+      exclusiveZone: 0
+
+      implicitHeight: 50
+      implicitWidth: 400
+      color: "transparent"
+
+      // prevents clicking on volume display
+      mask: Region {}
+
+      Rectangle {
+        anchors.fill: parent
+        radius: height / 2
+        color: Appearance?.colors.colLayer1
+
+        // requires QtQuick.Layouts
+        RowLayout {
+          anchors {
+            fill: parent
+            leftMargin: 10
+            rightMargin: 15
+          }
+
+          IconImage {
+            implicitSize: 30
+            // comes from Quickshell.Widgets
+            source: Quickshell.iconPath("audio-volume-high-symbolic")
+          }
+
+          Rectangle {
+            Layout.fillWidth: true
+
+            implicitHeight: 20
+            radius: height / 2
+            color: Appearance?.m3colors.m3secondaryContainer
+
+            Rectangle {
+              anchors {
+                left: parent.left
+                top: parent.top
+                bottom: parent.bottom
+              }
+              color: Appearance.colors.colPrimary
+
+              // What I presume is that the first ? is to check if defaultAudioSink is there, and if not, the ?? marks the returning value in place
+              implicitWidth: parent.width * (Pipewire.defaultAudioSink?.audio.volume ?? 0)
+              radius: parent.radius
+            }
+          }
+        }
+      }
+    }
+  }
+}