[FEAT] always show volume bar

[Tmarinus]

Would it be possible to get an option to always show the volume bar? This would make it easier to change the volume, removing the need to first hover over the volume icon.
While ideally it would sit within the current section, I would be already be happy with just the volume bar being always extended.

Kind regards,

[josselinonduty]

Hi @Tmarinus, thank you for this feature request :)

I published a new theme system so I thought I could use it to make the slider persistent or even move it. Sadly, it doesn't work that way. The content of the slider (i.e. not the box) is rendered dynamically using react/javascript, hence no css theme can solve the issue completely.

Terminal

If you like terminals, I'd suggest you use commands directly:

playerctl --player=deezer volume # read
playerctl --player=deezer volume 0.5 # set
playerctl --player=deezer volume 0.05+ # step up
playerctl --player=deezer volume 0.05- # step down

You would avoid interacting with the app completely.

CSS

If you still want to try a css theme, here is one I tested:

It moves the slider out of its floating popover card and into the player bar itself, right next to the speaker icon, and enlarges that icon's hover area so it takes much less aim to summon. It still only appears on hover — that's the part CSS can't fix — but the slot collapses to zero width when closed, so you don't get an empty gap sitting in the bar.

inline-volume.css

[data-testid^="volume_button_"] {
  position: relative !important;
}

[data-testid^="volume_button_"]::before {
  content: "";
  position: absolute;
  inset: -24px -8px;
  z-index: -1;
}

@media (min-width: 1200px) {
  [data-testid^="volume_button_"] + .chakra-popover__popper {
    position: static !important;
    transform: none !important;
    width: 0 !important;
    min-width: 0 !important;
    transition: width 0.15s ease;
  }

  [data-testid^="volume_button_"]
    + .chakra-popover__popper:has([data-testid="volume_menu_bar"]) {
    width: 104px !important;
  }

  [data-testid="volume_menu"] {
    width: 100% !important;
    background: none !important;
    box-shadow: none !important;
  }

  [data-testid="volume_menu"] .chakra-popover__arrow-positioner {
    display: none !important;
  }

  [data-testid="volume_menu"] .chakra-popover__body {
    padding: 0 !important;
  }
}

How to use it

1. Save the CSS above somewhere in your home directory, for instance ~/.config/deezer/inline-volume.css.

2. Launch the app pointing at it, with either the flag or the environment variable:

   deezer-desktop --custom-theme=$HOME/.config/deezer/inline-volume.css
   # or
   DZ_CUSTOM_THEME=$HOME/.config/deezer/inline-volume.css deezer-desktop

3. Edit and save the file at any time — the theme is re-applied live, no restart needed.

It sets no colors at all, only layout, so you can append it to any of the ready-made themes and use the two together in one file.