diff --git a/src/widgets/MprisBig/MprisWidget.qml b/src/widgets/MprisBig/MprisWidget.qml new file mode 100644 index 0000000..118baea --- /dev/null +++ b/src/widgets/MprisBig/MprisWidget.qml @@ -0,0 +1,75 @@ +import QtQuick.Layouts +import QtQuick +import Quickshell +import QtQuick.Controls +import Quickshell.Widgets +import "root:provider" +import "root:base" +import QtQuick.Effects + +ColumnLayout { + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + visible: Player.current ?? false + + Label { + text: `${Player.current?.trackTitle ?? ""}` + Layout.alignment: Qt.AlignHCenter + color: "white" + font.pixelSize: 18 + } + + Label { + text: `${Player.current?.trackAlbum ?? ""} by ${Player.current?.trackArtists}` + Layout.alignment: Qt.AlignHCenter + color: "white" + font.pixelSize: 14 + } + + RowLayout { + Layout.fillWidth: true + PlayerSwitcherButton { + onClicked: Player.prev() + Layout.alignment: Qt.AlignLeft + Layout.fillHeight: true + Layout.preferredWidth: 50 + } + Item { + Layout.fillWidth: true + } + + BRoundedImage { + source: Player.current?.trackArtUrl ?? "" + radius: 20 + border.width: 2 + color: "black" + } + + Item { + Layout.fillWidth: true + } + PlayerSwitcherButton { + onClicked: Player.next() + Layout.alignment: Qt.AlignRight + Layout.fillHeight: true + Layout.preferredWidth: 50 + } + } + + RowLayout { + Layout.alignment: Qt.AlignHCenter + + BIconButton { + source: Quickshell.iconPath("media-seek-backward") + onClicked: Player.current.previous() + } + BIconButton { + source: Quickshell.iconPath(Player.isPlaying ? "media-playback-start" : "media-playback-pause") + onClicked: Player.current.togglePlaying() + } + BIconButton { + source: Quickshell.iconPath("media-seek-forward") + onClicked: Player.current.next() + } + } +} diff --git a/src/widgets/MprisBig/PlayerSwitcherButton.qml b/src/widgets/MprisBig/PlayerSwitcherButton.qml new file mode 100644 index 0000000..e9767a1 --- /dev/null +++ b/src/widgets/MprisBig/PlayerSwitcherButton.qml @@ -0,0 +1,12 @@ +import QtQuick +import QtQuick.Controls + +Button { + hoverEnabled: true + background: Rectangle { + color: "transparent" + border.color: parent.hovered ? "red" : "blue" + border.width: 2 + radius: 20 + } +} diff --git a/src/windows/audioman/AudioManager.qml b/src/windows/audioman/AudioManager.qml index 1e26ad1..05c4dd0 100644 --- a/src/windows/audioman/AudioManager.qml +++ b/src/windows/audioman/AudioManager.qml @@ -5,7 +5,9 @@ import QtQuick.Layouts import QtQuick.Controls import Quickshell.Services.Mpris import "root:base" +import "root:provider" import QtQuick.Effects +import "root:widgets/MprisBig" PopupWindow { id: audioman @@ -14,21 +16,14 @@ PopupWindow { window: lbar } - //gravity: Edges.Bottom | Edges.Right - color: "transparent" width: screen?.width ?? display.width height: screen?.height ?? display.height visible: false - property var player: Mpris.players.values.find(p => p.playbackState == MprisPlaybackState.Playing) ?? Mpris.players.values[0] - MouseArea { anchors.fill: parent - onClicked: () => { - console.log("clicked"); - audioman.visible = false; - } + onClicked: audioman.visible = false BRectangle { id: display @@ -41,9 +36,8 @@ PopupWindow { Image { id: background - //anchors.margins: parent.border.width anchors.fill: parent - source: audioman.player?.trackArtUrl + source: Player.current?.trackArtUrl ?? "" Layout.alignment: Qt.AlignHCenter visible: true } @@ -70,21 +64,7 @@ PopupWindow { anchors.fill: parent anchors.margins: 10 - ColumnLayout { - Layout.alignment: Qt.AlignHCenter - Label { - text: audioman.player.trackTitle - Layout.alignment: Qt.AlignHCenter - color: "white" - } - - Image { - source: audioman.player.trackArtUrl - sourceSize.width: 300 - sourceSize.height: 300 - Layout.alignment: Qt.AlignHCenter - } - } + MprisWidget {} OutputSelector {} diff --git a/src/windows/audioman/OutputElem.qml b/src/windows/audioman/OutputElem.qml index 34dd005..a82fd18 100644 --- a/src/windows/audioman/OutputElem.qml +++ b/src/windows/audioman/OutputElem.qml @@ -4,7 +4,7 @@ import Quickshell.Services.Pipewire Item { id: root required property PwNode node - property string name: root.node.properties["media.name"] ?? root.node.description + property string name: root.node?.properties["media.name"] ?? root.node?.description ?? "" PwObjectTracker { objects: [root.node]