Skip to content

Bar (mediaplayer): Mouse wheel options for media player widget #1248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bbedward merged 5 commits into from
Jan 2, 2026
Merged

Bar (mediaplayer): Mouse wheel options for media player widget #1248

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
27bd83b
Add different options for scroll on media widget.
philjackson Jan 2, 2026
c507ba2
Nicer lookup code.
philjackson Jan 2, 2026
b546bc7
Remove some checks I didn't need.
philjackson Jan 2, 2026
3ed33f0
Update the search tags.
philjackson Jan 2, 2026
8dacc76
EOF.
philjackson Jan 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion quickshell/Common/SettingsData.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ Singleton {
property bool waveProgressEnabled: true
property bool scrollTitleEnabled: true
property bool audioVisualizerEnabled: true
property bool audioScrollEnabled: true
property string audioScrollMode: "volume"
property bool clockCompactMode: false
property bool focusedWindowCompactMode: false
property bool runningAppsCompactMode: true
Expand Down
2 changes: 1 addition & 1 deletion quickshell/Common/settings/SettingsSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ var SPEC = {
waveProgressEnabled: { def: true },
scrollTitleEnabled: { def: true },
audioVisualizerEnabled: { def: true },
audioScrollEnabled: { def: true },
audioScrollMode: { def: "volume" },
clockCompactMode: { def: false },
focusedWindowCompactMode: { def: false },
runningAppsCompactMode: { def: true },
Expand Down
73 changes: 51 additions & 22 deletions quickshell/Modules/DankBar/Widgets/Media.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,38 +54,67 @@ BasePill {
property real touchpadThreshold: 100

onWheel: function (wheelEvent) {
if (!usePlayerVolume)
return;
if (!SettingsData.audioScrollEnabled)
if (SettingsData.audioScrollMode === "nothing")
return;

wheelEvent.accepted = true;
if (SettingsData.audioScrollMode === "volume") {
if (!usePlayerVolume)
return;

wheelEvent.accepted = true;

const deltaY = wheelEvent.angleDelta.y;
const isMouseWheelY = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;
const deltaY = wheelEvent.angleDelta.y;
const isMouseWheelY = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;

const currentVolume = activePlayer.volume * 100;
const currentVolume = activePlayer.volume * 100;

let newVolume = currentVolume;
if (isMouseWheelY) {
if (deltaY > 0) {
newVolume = Math.min(100, currentVolume + 5);
} else if (deltaY < 0) {
newVolume = Math.max(0, currentVolume - 5);
let newVolume = currentVolume;
if (isMouseWheelY) {
if (deltaY > 0) {
newVolume = Math.min(100, currentVolume + 5);
} else if (deltaY < 0) {
newVolume = Math.max(0, currentVolume - 5);
}
} else {
scrollAccumulatorY += deltaY;
if (Math.abs(scrollAccumulatorY) >= touchpadThreshold) {
if (scrollAccumulatorY > 0) {
newVolume = Math.min(100, currentVolume + 1);
} else {
newVolume = Math.max(0, currentVolume - 1);
}
scrollAccumulatorY = 0;
}
}
} else {
scrollAccumulatorY += deltaY;
if (Math.abs(scrollAccumulatorY) >= touchpadThreshold) {
if (scrollAccumulatorY > 0) {
newVolume = Math.min(100, currentVolume + 1);

activePlayer.volume = newVolume / 100;
} else if (SettingsData.audioScrollMode === "song") {
if (!activePlayer)
return;

wheelEvent.accepted = true;

const deltaY = wheelEvent.angleDelta.y;
const isMouseWheelY = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;

if (isMouseWheelY) {
if (deltaY > 0) {
activePlayer.previous();
} else {
newVolume = Math.max(0, currentVolume - 1);
activePlayer.next();
}
} else {
scrollAccumulatorY += deltaY;
if (Math.abs(scrollAccumulatorY) >= touchpadThreshold) {
if (scrollAccumulatorY > 0) {
activePlayer.previous();
} else {
activePlayer.next();
}
scrollAccumulatorY = 0;
}
scrollAccumulatorY = 0;
}
}

activePlayer.volume = newVolume / 100;
}

content: Component {
Expand Down
20 changes: 16 additions & 4 deletions quickshell/Modules/Settings/MediaPlayerTab.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,23 @@ Item {
onToggled: checked => SettingsData.set("audioVisualizerEnabled", checked)
}

SettingsToggleRow {
SettingsDropdownRow {
property var scrollOpts: {
"Change Volume": "volume",
"Change Song": "song",
"Nothing": "nothing"
}

text: I18n.tr("Scroll Wheel")
description: I18n.tr("Scroll on widget changes media volume")
checked: SettingsData.audioScrollEnabled
onToggled: checked => SettingsData.set("audioScrollEnabled", checked)
description: I18n.tr("Scroll wheel behavior on media widget")
Copy link
Collaborator

@bbedward bbedward Jan 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets add some tags to this, it will help the search/index tags: ["media", "music", "scroll"] something like that

Copy link
Contributor Author

@philjackson philjackson Jan 2, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bbedward do I need to regenerate settings_search_index.json myself, or does that happen at build/runtime?

edit: looks like it's in git so I guess I do it.

settingKey: "audioScrollMode"
options: Object.keys(scrollOpts).sort()
currentValue: {
Object.keys(scrollOpts).find(key => scrollOpts[key] === SettingsData.audioScrollMode) ?? "volume"
}
onValueChanged: value => {
SettingsData.set("audioScrollMode", scrollOpts[value])
}
}
}
}
Expand Down