Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-24 13:32:50 -05:00
Code Packages Releases Activity

Media volume scroll on DankBar widget and media volume OSD (#795)

Browse Source 
* osd: add media volume OSD

* media: scroll on widget changes media volume

* dash: use media volume in media tab
This commit is contained in:
Lucas
2025-11-23 02:42:06 -03:00
committed by GitHub
parent 89298fce30
commit 6cc6e7c8e9
8 changed files with 376 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
quickshell/Common/SettingsData.qml
View File

@@ -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

1
quickshell/Common/settings/SettingsSpec.js
View File

@@ -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 },

8
quickshell/DMSShell.qml
View File

@@ -527,6 +527,14 @@ Item {
}
}
Variants {
model: SettingsData.getFilteredScreens("osd")
delegate: MediaVolumeOSD {
modelData: item
}
}
Variants {
model: SettingsData.getFilteredScreens("osd")

27
quickshell/Modules/DankBar/Widgets/Media.qml
View File

@@ -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

74
quickshell/Modules/DankDash/MediaPlayerTab.qml
View File

@@ -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
}
}
}
}
}

285
quickshell/Modules/OSD/MediaVolumeOSD.qml Normal file
View File

@@ -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;
}
}
}
}
}

4
quickshell/Modules/Plugins/BasePill.qml
View File

@@ -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)
}
}
}

11
quickshell/Modules/Settings/WidgetTweaksTab.qml
View File

@@ -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")