pavel/discord
1
0
Fork 0
Code Issues Pull requests Projects Releases 60 Packages Wiki Activity Actions

fix slider
All checks were successful
/ upload (release) Successful in 3m22s
Details

Browse source
This commit is contained in:
pavel 2026-02-26 23:17:03 +01:00
commit 77a9f5ee88
4 changed files with 88 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

19
desktop/app.js
View file

@ -417,13 +417,10 @@ function renderChannels() {
if (p.user_id !== state.me.id) { if (p.user_id !== state.me.id) {
const vol = state.userVolumes.get(p.user_id) ?? 1.0; const vol = state.userVolumes.get(p.user_id) ?? 1.0;
sliderHtml = ` sliderHtml = `
<div class="user-volume-control" style="width: 100%; display: flex; align-items: center; gap: 8px; padding-left: 28px; margin-top: 2px;"> <div class="user-volume-control" data-user-id="${p.user_id}">
<i data-lucide="volume-2" style="width: 12px; height: 12px; opacity: 0.6;"></i> <i data-lucide="volume-2" style="width: 12px; height: 12px; opacity: 0.6;"></i>
<input type="range" min="0" max="2" step="0.1" value="${vol}" <input type="range" min="0" max="2" step="0.1" value="${vol}" class="volume-slider">
class="volume-slider" <span class="vol-pct">${Math.round(vol * 100)}%</span>
data-user-id="${p.user_id}"
style="flex: 1; height: 4px; cursor: pointer;">
<span class="vol-pct" style="font-size: 10px; opacity: 0.6; min-width: 25px;">${Math.round(vol * 100)}%</span>
</div> </div>
`; `;
} }
@ -453,6 +450,16 @@ function renderChannels() {
slider.addEventListener('click', (e) => e.stopPropagation()); slider.addEventListener('click', (e) => e.stopPropagation());
} }
// Show slider on right click
pRow.addEventListener('contextmenu', (e) => {
if (p.user_id === state.me.id) return;
e.preventDefault();
const control = pRow.querySelector('.user-volume-control');
if (control) {
control.classList.toggle('show-volume');
}
});
pList.appendChild(pRow); pList.appendChild(pRow);
} }
el.voiceChannelList.appendChild(pList); el.voiceChannelList.appendChild(pList);

31
desktop/styles.css
View file

@ -563,11 +563,42 @@ select {
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.user-volume-control {
width: 100%;
display: none;
/* Hidden by default */
align-items: center;
gap: 8px;
padding: 4px 8px 4px 28px;
margin-top: 2px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
overflow: hidden;
}
.user-volume-control.show-volume {
display: flex;
/* Show when active */
}
.volume-slider { .volume-slider {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none;
background: var(--bg-darker); background: var(--bg-darker);
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
flex: 1;
height: 4px;
cursor: pointer;
min-width: 0;
}
.vol-pct {
font-size: 10px;
opacity: 0.6;
min-width: 30px;
text-align: right;
} }
.volume-slider::-webkit-slider-thumb { .volume-slider::-webkit-slider-thumb {

19
static/app.js
View file

@ -372,13 +372,10 @@ function renderChannels() {
if (p.user_id !== state.me.id) { if (p.user_id !== state.me.id) {
const vol = state.userVolumes.get(p.user_id) ?? 1.0; const vol = state.userVolumes.get(p.user_id) ?? 1.0;
sliderHtml = ` sliderHtml = `
<div class="user-volume-control" style="width: 100%; display: flex; align-items: center; gap: 8px; padding-left: 28px; margin-top: 2px;"> <div class="user-volume-control" data-user-id="${p.user_id}">
<i data-lucide="volume-2" style="width: 12px; height: 12px; opacity: 0.6;"></i> <i data-lucide="volume-2" style="width: 12px; height: 12px; opacity: 0.6;"></i>
<input type="range" min="0" max="2" step="0.1" value="${vol}" <input type="range" min="0" max="2" step="0.1" value="${vol}" class="volume-slider">
class="volume-slider" <span class="vol-pct">${Math.round(vol * 100)}%</span>
data-user-id="${p.user_id}"
style="flex: 1; height: 4px; cursor: pointer;">
<span class="vol-pct" style="font-size: 10px; opacity: 0.6; min-width: 25px;">${Math.round(vol * 100)}%</span>
</div> </div>
`; `;
} }
@ -408,6 +405,16 @@ function renderChannels() {
slider.addEventListener('click', (e) => e.stopPropagation()); slider.addEventListener('click', (e) => e.stopPropagation());
} }
// Show slider on right click
pRow.addEventListener('contextmenu', (e) => {
if (p.user_id === state.me.id) return;
e.preventDefault();
const control = pRow.querySelector('.user-volume-control');
if (control) {
control.classList.toggle('show-volume');
}
});
pList.appendChild(pRow); pList.appendChild(pRow);
} }
el.voiceChannelList.appendChild(pList); el.voiceChannelList.appendChild(pList);

31
static/styles.css
View file

@ -584,11 +584,42 @@ select {
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.user-volume-control {
width: 100%;
display: none;
/* Hidden by default */
align-items: center;
gap: 8px;
padding: 4px 8px 4px 28px;
margin-top: 2px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
overflow: hidden;
}
.user-volume-control.show-volume {
display: flex;
/* Show when active */
}
.volume-slider { .volume-slider {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none;
background: var(--bg-darker); background: var(--bg-darker);
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
flex: 1;
height: 4px;
cursor: pointer;
min-width: 0;
}
.vol-pct {
font-size: 10px;
opacity: 0.6;
min-width: 30px;
text-align: right;
} }
.volume-slider::-webkit-slider-thumb { .volume-slider::-webkit-slider-thumb {