diff --git a/.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml b/.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml index 976d3d448..6d80da84a 100644 --- a/.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml +++ b/.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml @@ -153,6 +153,10 @@ Item { // Bar content region Layout.fillWidth: true Layout.fillHeight: false } + VerticalMedia { + Layout.fillWidth: true + Layout.fillHeight: false + } } HorizontalBarSeparator { diff --git a/.config/quickshell/ii/modules/verticalBar/VerticalMedia.qml b/.config/quickshell/ii/modules/verticalBar/VerticalMedia.qml new file mode 100644 index 000000000..c20e4e9b0 --- /dev/null +++ b/.config/quickshell/ii/modules/verticalBar/VerticalMedia.qml @@ -0,0 +1,100 @@ +import qs.modules.common +import qs.modules.common.widgets +import qs.services +import qs +import qs.modules.common.functions + +import QtQuick +import QtQuick.Layouts +import Quickshell.Services.Mpris + +MouseArea { + id: root + property bool borderless: Config.options.bar.borderless + readonly property MprisPlayer activePlayer: MprisController.activePlayer + readonly property string cleanedTitle: StringUtils.cleanMusicTitle(activePlayer?.trackTitle) || Translation.tr("No media") + + Layout.fillHeight: true + implicitHeight: mediaCircProg.implicitHeight + implicitWidth: Appearance.sizes.verticalBarWidth + + Timer { + running: activePlayer?.playbackState == MprisPlaybackState.Playing + interval: 1000 + repeat: true + onTriggered: activePlayer.positionChanged() + } + + acceptedButtons: Qt.MiddleButton | Qt.BackButton | Qt.ForwardButton | Qt.RightButton | Qt.LeftButton + hoverEnabled: true + onPressed: (event) => { + if (event.button === Qt.MiddleButton) { + activePlayer.togglePlaying(); + } else if (event.button === Qt.BackButton) { + activePlayer.previous(); + } else if (event.button === Qt.ForwardButton || event.button === Qt.RightButton) { + activePlayer.next(); + } else if (event.button === Qt.LeftButton) { + GlobalStates.mediaControlsOpen = !GlobalStates.mediaControlsOpen + } + } + + ClippedFilledCircularProgress { + id: mediaCircProg + anchors.centerIn: parent + implicitSize: 20 + + lineWidth: Appearance.rounding.unsharpen + value: activePlayer?.position / activePlayer?.length + colPrimary: Appearance.colors.colOnSecondaryContainer + enableAnimation: false + + Item { + anchors.centerIn: parent + width: mediaCircProg.implicitSize + height: mediaCircProg.implicitSize + + MaterialSymbol { + anchors.centerIn: parent + fill: 1 + text: activePlayer?.isPlaying ? "pause" : "music_note" + iconSize: Appearance.font.pixelSize.normal + color: Appearance.m3colors.m3onSecondaryContainer + } + } + } + + StyledPopup { + hoverTarget: root + active: GlobalStates.mediaControlsOpen ? false : root.containsMouse + + ColumnLayout { + anchors.centerIn: parent + RowLayout { + spacing: 5 + + MaterialSymbol { + fill: 0 + font.weight: Font.Medium + text: "music_note" + iconSize: Appearance.font.pixelSize.large + color: Appearance.colors.colOnSurfaceVariant + } + + StyledText { + text: "Media" + font { + weight: Font.Medium + pixelSize: Appearance.font.pixelSize.normal + } + color: Appearance.colors.colOnSurfaceVariant + } + } + + StyledText { + text: `${cleanedTitle}${activePlayer?.trackArtist ? '\n' + activePlayer.trackArtist : ''}` + } + } + } + +}