diff --git a/quickshell/Common/SettingsData.qml b/quickshell/Common/SettingsData.qml index 80c625a4..560509dd 100644 --- a/quickshell/Common/SettingsData.qml +++ b/quickshell/Common/SettingsData.qml @@ -282,6 +282,7 @@ Singleton { property bool osdAlwaysShowValue: false property int osdPosition: SettingsData.Position.BottomCenter property bool osdVolumeEnabled: true + property bool osdMediaVolumeEnabled: true property bool osdBrightnessEnabled: true property bool osdIdleInhibitorEnabled: true property bool osdMicMuteEnabled: true diff --git a/quickshell/Common/settings/SettingsSpec.js b/quickshell/Common/settings/SettingsSpec.js index fc58e3ac..ae3e3836 100644 --- a/quickshell/Common/settings/SettingsSpec.js +++ b/quickshell/Common/settings/SettingsSpec.js @@ -189,6 +189,7 @@ var SPEC = { osdAlwaysShowValue: { def: false }, osdPosition: { def: 5 }, osdVolumeEnabled: { def: true }, + osdMediaVolumeEnabled : { def: true }, osdBrightnessEnabled: { def: true }, osdIdleInhibitorEnabled: { def: true }, osdMicMuteEnabled: { def: true }, diff --git a/quickshell/DMSShell.qml b/quickshell/DMSShell.qml index 7eb7bfbc..dc8d5441 100644 --- a/quickshell/DMSShell.qml +++ b/quickshell/DMSShell.qml @@ -527,6 +527,14 @@ Item { } } + Variants { + model: SettingsData.getFilteredScreens("osd") + + delegate: MediaVolumeOSD { + modelData: item + } + } + Variants { model: SettingsData.getFilteredScreens("osd") diff --git a/quickshell/Modules/DankBar/Widgets/Media.qml b/quickshell/Modules/DankBar/Widgets/Media.qml index e7f6d411..9ca72925 100644 --- a/quickshell/Modules/DankBar/Widgets/Media.qml +++ b/quickshell/Modules/DankBar/Widgets/Media.qml @@ -39,6 +39,33 @@ BasePill { return audioVizHeight + Theme.spacingXS + playButtonHeight; } + onWheel: function (wheelEvent) { + if (!activePlayer) { + wheelEvent.accepted = false; + return; + } + + wheelEvent.accepted = true; + + // If volume is not supported, return early to avoid error logs but accepting the scroll, + // to keep the consistency of not scrolling workspaces when scrolling in the media widget. + if (!activePlayer.volumeSupported) { + return; + } + + const delta = wheelEvent.angleDelta.y; + const currentVolume = (activePlayer.volume * 100) || 0; + + let newVolume; + if (delta > 0) { + newVolume = Math.min(100, currentVolume + 5); + } else { + newVolume = Math.max(0, currentVolume - 5); + } + + activePlayer.volume = newVolume / 100; + } + content: Component { Item { implicitWidth: root.playerAvailable ? root.currentContentWidth : 0 diff --git a/quickshell/Modules/DankDash/MediaPlayerTab.qml b/quickshell/Modules/DankDash/MediaPlayerTab.qml index f910adf6..c0e2ce62 100644 --- a/quickshell/Modules/DankDash/MediaPlayerTab.qml +++ b/quickshell/Modules/DankDash/MediaPlayerTab.qml @@ -18,7 +18,7 @@ Item { property var allPlayers: MprisController.availablePlayers readonly property bool isRightEdge: (SettingsData.barConfigs[0]?.position ?? SettingsData.Position.Top) === SettingsData.Position.Right - property var defaultSink: AudioService.sink + readonly property bool volumeAvailable: activePlayer && activePlayer.volumeSupported // Palette that stays stable across track switches until new colors are ready property color dom: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, 1.0) @@ -143,29 +143,24 @@ Item { return "speaker" } - function getVolumeIcon(sink) { - if (!sink || !sink.audio) return "volume_off" + function getVolumeIcon() { + if (!volumeAvailable) return "volume_off" - const volume = sink.audio.volume - const muted = sink.audio.muted + const volume = activePlayer.volume - if (muted || volume === 0.0) return "volume_off" + if (volume === 0.0) return "volume_off" if (volume <= 0.33) return "volume_down" if (volume <= 0.66) return "volume_up" return "volume_up" } function adjustVolume(step) { - if (!defaultSink?.audio) return + if (!volumeAvailable) return - const currentVolume = Math.round(defaultSink.audio.volume * 100) + const currentVolume = Math.round(activePlayer.volume * 100) const newVolume = Math.min(100, Math.max(0, currentVolume + step)) - defaultSink.audio.volume = newVolume / 100 - if (newVolume > 0 && defaultSink.audio.muted) { - defaultSink.audio.muted = false - } - AudioService.playVolumeChangeSoundIfEnabled() + activePlayer.volume = newVolume / 100 } Process { @@ -1076,12 +1071,14 @@ Item { radius: 20 x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM y: 130 - color: volumeButtonArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent" - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) + color: volumeButtonArea.containsMouse && volumeAvailable ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent" + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, volumeAvailable ? 0.3 : 0.15) border.width: 1 z: 101 + enabled: volumeAvailable property bool volumeExpanded: false + property real previousVolume: 1.0 Timer { id: volumeHideTimer @@ -1091,10 +1088,9 @@ Item { DankIcon { anchors.centerIn: parent - name: getVolumeIcon(defaultSink) + name: getVolumeIcon() size: 18 - color: defaultSink && !defaultSink.audio.muted && defaultSink.audio.volume > 0 ? Theme.primary : Theme.surfaceText - } + color: volumeAvailable && activePlayer.volume > 0 ? Theme.primary : Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, volumeAvailable ? 1.0 : 0.5) } MouseArea { id: volumeButtonArea @@ -1109,13 +1105,25 @@ Item { volumeHideTimer.restart() } onClicked: { - if (defaultSink?.audio) { - defaultSink.audio.muted = !defaultSink.audio.muted + if (activePlayer.volume > 0) { + volumeButton.previousVolume = activePlayer.volume + activePlayer.volume = 0 + } else { + activePlayer.volume = volumeButton.previousVolume || 1 } } onWheel: wheelEvent => { - const step = Math.max(0.5, 100 / 100) - adjustVolume(wheelEvent.angleDelta.y > 0 ? step : -step) + let delta = wheelEvent.angleDelta.y + let currentVolume = (activePlayer.volume * 100) || 0 + let newVolume + + if (delta > 0) { + newVolume = Math.min(100, currentVolume + 5) + } else { + newVolume = Math.max(0, currentVolume - 5) + } + + activePlayer.volume = newVolume / 100 volumeButton.volumeExpanded = true wheelEvent.accepted = true } @@ -1184,7 +1192,7 @@ Item { height: 180 x: isRightEdge ? -width - Theme.spacingS : root.width + Theme.spacingS y: volumeButton.y - 50 - visible: volumeButton.volumeExpanded + visible: volumeButton.volumeExpanded && volumeAvailable closePolicy: Popup.NoAutoClose modal: false dim: false @@ -1257,7 +1265,7 @@ Item { Rectangle { id: sliderFill width: parent.width - height: defaultSink ? (Math.min(1.0, defaultSink.audio.volume) * parent.height) : 0 + height: volumeAvailable ? (Math.min(1.0, activePlayer.volume) * parent.height) : 0 anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter color: Theme.primary @@ -1273,7 +1281,7 @@ Item { height: 8 radius: Theme.cornerRadius y: { - const ratio = defaultSink ? Math.min(1.0, defaultSink.audio.volume) : 0 + const ratio = volumeAvailable ? Math.min(1.0, activePlayer.volume) : 0 const travel = parent.height - height return Math.max(0, Math.min(travel, travel * (1 - ratio))) } @@ -1347,7 +1355,7 @@ Item { id: volumeSliderArea anchors.fill: parent anchors.margins: -12 - enabled: defaultSink !== null + enabled: volumeAvailable hoverEnabled: true cursorShape: Qt.PointingHandCursor preventStealing: true @@ -1380,20 +1388,16 @@ Item { } onWheel: wheelEvent => { - const step = Math.max(0.5, 100 / 100) + const step = 1 adjustVolume(wheelEvent.angleDelta.y > 0 ? step : -step) wheelEvent.accepted = true } function updateVolume(mouse) { - if (defaultSink) { + if (volumeAvailable) { const ratio = 1.0 - (mouse.y / height) const volume = Math.max(0, Math.min(1, ratio)) - defaultSink.audio.volume = volume - if (volume > 0 && defaultSink.audio.muted) { - defaultSink.audio.muted = false - } - AudioService.playVolumeChangeSoundIfEnabled() + activePlayer.volume = volume } } } @@ -1403,11 +1407,11 @@ Item { anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter anchors.bottomMargin: Theme.spacingL - text: defaultSink ? Math.round(defaultSink.audio.volume * 100) + "%" : "0%" + text: volumeAvailable ? Math.round(activePlayer.volume * 100) + "%" : "0%" font.pixelSize: Theme.fontSizeSmall color: Theme.surfaceText font.weight: Font.Medium } } } -} \ No newline at end of file +} diff --git a/quickshell/Modules/OSD/MediaVolumeOSD.qml b/quickshell/Modules/OSD/MediaVolumeOSD.qml new file mode 100644 index 00000000..deb14d28 --- /dev/null +++ b/quickshell/Modules/OSD/MediaVolumeOSD.qml @@ -0,0 +1,285 @@ +import QtQuick +import qs.Common +import qs.Services +import qs.Widgets + +DankOSD { + id: root + + readonly property bool useVertical: isVerticalLayout + readonly property var player: MprisController.activePlayer + readonly property int currentVolume: player ? Math.min(100, Math.round(player.volume * 100)) : 0 + readonly property bool volumeSupported: player?.volumeSupported ?? false + + osdWidth: useVertical ? (40 + Theme.spacingS * 2) : Math.min(260, Screen.width - Theme.spacingM * 2) + osdHeight: useVertical ? Math.min(260, Screen.height - Theme.spacingM * 2) : (40 + Theme.spacingS * 2) + autoHideInterval: 3000 + enableMouseInteraction: true + + function getVolumeIcon(volume) { + if (!player) + return "music_note"; + if (volume === 0) + return "music_off"; + return "music_note"; + } + + function toggleMute() { + if (player) { + player.volume = player.volume > 0 ? 0 : 1; + } + } + + function setVolume(volumePercent) { + if (player) { + player.volume = volumePercent / 100; + resetHideTimer(); + } + } + + Connections { + target: player + + function onVolumeChanged() { + if (SettingsData.osdMediaVolumeEnabled && volumeSupported) { + root.show(); + } + } + } + + content: Loader { + anchors.fill: parent + sourceComponent: useVertical ? verticalContent : horizontalContent + } + + Component { + id: horizontalContent + + Item { + property int gap: Theme.spacingS + + anchors.centerIn: parent + width: parent.width - Theme.spacingS * 2 + height: 40 + + Rectangle { + width: Theme.iconSize + height: Theme.iconSize + radius: Theme.iconSize / 2 + color: "transparent" + x: parent.gap + anchors.verticalCenter: parent.verticalCenter + + DankIcon { + anchors.centerIn: parent + name: getVolumeIcon(player?.volume ?? 0) + size: Theme.iconSize + color: muteButton.containsMouse ? Theme.primary : Theme.surfaceText + } + + MouseArea { + id: muteButton + + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: toggleMute() + onContainsMouseChanged: { + setChildHovered(containsMouse || volumeSlider.containsMouse); + } + } + } + + DankSlider { + id: volumeSlider + + width: parent.width - Theme.iconSize - parent.gap * 3 + height: 40 + x: parent.gap * 2 + Theme.iconSize + anchors.verticalCenter: parent.verticalCenter + minimum: 0 + maximum: 100 + enabled: volumeSupported + showValue: true + unit: "%" + thumbOutlineColor: Theme.surfaceContainer + valueOverride: currentVolume + alwaysShowValue: SettingsData.osdAlwaysShowValue + + Component.onCompleted: { + value = currentVolume; + } + + onSliderValueChanged: newValue => { + setVolume(newValue); + } + + onContainsMouseChanged: { + setChildHovered(containsMouse || muteButton.containsMouse); + } + + Connections { + target: player + + function onVolumeChanged() { + if (volumeSlider && !volumeSlider.pressed) { + volumeSlider.value = currentVolume; + } + } + } + } + } + } + + Component { + id: verticalContent + + Item { + anchors.fill: parent + property int gap: Theme.spacingS + + Rectangle { + width: Theme.iconSize + height: Theme.iconSize + radius: Theme.iconSize / 2 + color: "transparent" + anchors.horizontalCenter: parent.horizontalCenter + y: gap + + DankIcon { + anchors.centerIn: parent + name: getVolumeIcon(player?.volume ?? 0) + size: Theme.iconSize + color: muteButtonVert.containsMouse ? Theme.primary : Theme.surfaceText + } + + MouseArea { + id: muteButtonVert + + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: toggleMute() + onContainsMouseChanged: { + setChildHovered(containsMouse || vertSliderArea.containsMouse); + } + } + } + + Item { + id: vertSlider + width: 12 + height: parent.height - Theme.iconSize - gap * 3 - 24 + anchors.horizontalCenter: parent.horizontalCenter + y: gap * 2 + Theme.iconSize + + property bool dragging: false + property int value: currentVolume + + Rectangle { + id: vertTrack + width: parent.width + height: parent.height + anchors.centerIn: parent + color: Theme.outline + radius: Theme.cornerRadius + } + + Rectangle { + id: vertFill + width: parent.width + height: (vertSlider.value / 100) * parent.height + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + color: Theme.primary + radius: Theme.cornerRadius + } + + Rectangle { + id: vertHandle + width: 24 + height: 8 + radius: Theme.cornerRadius + y: { + const ratio = vertSlider.value / 100; + const travel = parent.height - height; + return Math.max(0, Math.min(travel, travel * (1 - ratio))); + } + anchors.horizontalCenter: parent.horizontalCenter + color: Theme.primary + border.width: 3 + border.color: Theme.surfaceContainer + } + + MouseArea { + id: vertSliderArea + anchors.fill: parent + anchors.margins: -12 + enabled: volumeSupported + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + + onContainsMouseChanged: { + setChildHovered(containsMouse || muteButtonVert.containsMouse); + } + + onPressed: mouse => { + vertSlider.dragging = true; + updateVolume(mouse); + } + + onReleased: { + vertSlider.dragging = false; + } + + onPositionChanged: mouse => { + if (pressed) { + updateVolume(mouse); + } + } + + onClicked: mouse => { + updateVolume(mouse); + } + + function updateVolume(mouse) { + const ratio = 1.0 - (mouse.y / height); + const volume = Math.max(0, Math.min(100, Math.round(ratio * 100))); + setVolume(volume); + } + } + + Connections { + target: player + + function onVolumeChanged() { + if (!vertSlider.dragging) { + vertSlider.value = currentVolume; + } + } + } + } + + StyledText { + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottomMargin: gap + text: vertSlider.value + "%" + font.pixelSize: Theme.fontSizeSmall + color: Theme.surfaceText + visible: SettingsData.osdAlwaysShowValue + } + } + } + + onOsdShown: { + if (player && contentLoader.item && contentLoader.item.item) { + if (!useVertical) { + const slider = contentLoader.item.item.children[0].children[1]; + if (slider && slider.value !== undefined) { + slider.value = currentVolume; + } + } + } + } +} diff --git a/quickshell/Modules/Plugins/BasePill.qml b/quickshell/Modules/Plugins/BasePill.qml index def8a644..59b9e4a2 100644 --- a/quickshell/Modules/Plugins/BasePill.qml +++ b/quickshell/Modules/Plugins/BasePill.qml @@ -34,6 +34,7 @@ Item { signal clicked signal rightClicked + signal wheel(var wheelEvent) width: isVerticalOrientation ? barThickness : visualWidth height: isVerticalOrientation ? visualHeight : barThickness @@ -98,5 +99,8 @@ Item { } root.clicked(); } + onWheel: function (wheelEvent) { + root.wheel(wheelEvent) + } } } diff --git a/quickshell/Modules/Settings/WidgetTweaksTab.qml b/quickshell/Modules/Settings/WidgetTweaksTab.qml index e5895bfb..28333904 100644 --- a/quickshell/Modules/Settings/WidgetTweaksTab.qml +++ b/quickshell/Modules/Settings/WidgetTweaksTab.qml @@ -810,6 +810,17 @@ Item { } } + + DankToggle { + width: parent.width + text: I18n.tr("Media Volume OSD") + description: I18n.tr("Show on-screen display when media player volume changes") + checked: SettingsData.osdMediaVolumeEnabled + onToggled: checked => { + return SettingsData.set("osdMediaVolumeEnabled", checked) + } + } + DankToggle { width: parent.width text: I18n.tr("Brightness OSD")