Add volume control with media keys and a beautiful osd, and update notifications design

default_config.lua

@@ -23,5 +23,8 @@ config.kbLayouts = { "fr", "us" }
 config.runMenu = "rofi -show run -config " .. awful.util.getdir("config") .. "/rofi/themes/paper-float.rasi"
 config.windowSwitcher = "rofi -show window -config " .. awful.util.getdir("config") .. "/rofi/themes/paper-float.rasi"
 
+-- Media control
+config.volume_osd_timeout = 2
+
 
 return config

default_theme.lua

@@ -2,6 +2,7 @@
 -- Default awesome theme --
 ---------------------------
 
+local awful = require("awful")
 local naughty = require("naughty")
 local gears = require("gears")
 
@@ -11,6 +12,7 @@ local dpi = xresources.apply_dpi
 
 local gfs = require("gears.filesystem")
 local themes_path = gfs.get_themes_dir()
+local simple_awesome_path = awful.util.getdir("config")
 
 local theme = {}
 
@@ -37,20 +39,43 @@ theme.border_marked = "#91231c"
 theme.tasklist_bg_focus = theme.bg_minimize
 
 -- Notifications
-naughty.config.defaults.position = "top_middle"
+naughty.config.padding = dpi(8)
+naughty.config.defaults.position = "top_right"
+naughty.config.defaults.margin = dpi(16)
+naughty.config.defaults.border_width = dpi(0)
 naughty.config.presets.critical.bg = "#e82922"
 theme.notification_shape = function(cr, width, height)
-    return gears.shape.rounded_rect(cr, width, height, 3)
+    return gears.shape.rounded_rect(cr, width, height, 5)
 end
-theme.notification_margin = dpi(8)
+theme.notification_margin = dpi(16)
 theme.notification_width = dpi(512)
 theme.notification_border_color = theme.border_focus
+theme.notification_border_width = dpi(0)
 theme.notification_bg = theme.bg_focus
 theme.notification_fg = theme.fg_focus
 
 -- Hotkeys (awesome help menu)
 theme.hotkeys_border_color = theme.border_normal
 
+-- Volume OSD
+theme.volume_osd_bg = theme.bg_normal
+theme.volume_osd_border_color = theme.border_normal
+theme.volume_osd_border_width = dpi(0)
+theme.volume_osd_progress_bg = theme.bg_minimize
+theme.volume_osd_progress_color = "#ffffff"
+theme.volume_osd_progress_border_color = theme.volume_osd_border_color
+theme.volume_osd_progress_border_width = dpi(0)
+theme.volume_osd_shape = function(cr, width, height)
+    return gears.shape.rounded_rect(cr, width, height, 5)
+end
+theme.volume_osd_width = dpi(128)
+theme.volume_osd_height = dpi(128)
+theme.volume_osd_image_color = "#ffffff"
+theme.volume_osd_icon_0 = simple_awesome_path .. "/icons/volume-x.svg"
+theme.volume_osd_icon_1 = simple_awesome_path .. "/icons/volume.svg"
+theme.volume_osd_icon_2 = simple_awesome_path .. "/icons/volume-1.svg"
+theme.volume_osd_icon_3 = simple_awesome_path .. "/icons/volume-2.svg"
+
 
 -- There are other variable sets
 -- overriding the default one when

icons/volume-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-1"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>

icons/volume-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>

icons/volume-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>

icons/volume.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon></svg>

media_control.lua

@@ -7,7 +7,12 @@
 local inspect = require("debug/inspect")
 
 local awful = require("awful")
+local beautiful = require("beautiful")
+local gears = require("gears")
 local naughty = require("naughty")
+local wibox = require("wibox")
+
+local config = require("config")
 
 local hasPlayerctl = os.execute("playerctl -v") == true
 
@@ -21,34 +26,147 @@ function sendToSpotify(command)
     awful.util.spawn_with_shell("dbus-send --print-reply --dest=org.mpris.MediaPlayer2.spotify /org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player." .. command)
 end
 
+-- Volume control
+function getVolume()
+    local handle = io.popen("amixer sget Master | awk -F\"[][]\" '/%/ { print $2 }' | head -n 1", "r")
+    local volume = string.gsub(handle:read("*a"), "[\n%%]+", "") / 100
+    handle:close()
+    return volume
+end
+
+function getVolumeImage(volume)
+    local path = beautiful.volume_osd_icon_3
+    if volume < 0.667 then
+        path = beautiful.volume_osd_icon_2
+    end
+    if volume < 0.334 then
+        path = beautiful.volume_osd_icon_1
+    end
+    if volume <= 0 then
+        path = beautiful.volume_osd_icon_0
+    end
+    return gears.color.recolor_image(path, beautiful.volume_osd_image_color)
+end
+
+local volumeWibox = wibox({
+    ontop=true,
+    bg = beautiful.volume_osd_bg,
+    border_width = beautiful.volume_osd_border_width,
+    border_color = beautiful.volume_osd_border_color,
+    shape = beautiful.volume_osd_shape,
+    width = beautiful.volume_osd_width,
+    height = beautiful.volume_osd_height,
+    widget = wibox.widget {
+        {
+            {
+                image = getVolumeImage(1),
+                widget = wibox.widget.imagebox
+            },
+            forced_height = beautiful.volume_osd_height - 42,
+            left = 38,
+            right = 16,
+            top = 24,
+            bottom = 16,
+            widget = wibox.container.margin
+        },
+        {
+            max_value = 1,
+            value = 0.33,
+            shape = gears.shape.rounded_bar,
+            bar_shape = gears.shape.rounded_bar,
+            forced_height = 38,
+            margins = 18,
+            color = beautiful.volume_osd_progress_color,
+            background_color = beautiful.volume_osd_progress_bg,
+            border_color = beautiful.volume_osd_progress_border_color,
+            border_width = beautiful.volume_osd_progress_border_width,
+            widget = wibox.widget.progressbar
+        },
+        margins = 8,
+        widget = wibox.container.margin,
+        layout = wibox.layout.align.vertical
+    }
+})
+
+local imagebox = volumeWibox.widget:get_children()[1]:get_children()[1]
+local progressbar = volumeWibox.widget:get_children()[2]
+
+local timer = nil
+
 -- {{{ Control
-    local playPause = function()
-        if hasPlayerctl then
-            sendToPlayerctl("play-pause")
-        else
-            sendToSpotify("PlayPause")
-        end
+local playPause = function()
+    if hasPlayerctl then
+        sendToPlayerctl("play-pause")
+    else
+        sendToSpotify("PlayPause")
     end
+end
 
-    local nextTrack = function()
-        if hasPlayerctl then
-            sendToPlayerctl("next")
-        else
-            sendToSpotify("Next")
-        end
+local nextTrack = function()
+    if hasPlayerctl then
+        sendToPlayerctl("next")
+    else
+        sendToSpotify("Next")
     end
+end
 
-    local previousTrack = function()
-        if hasPlayerctl then
-            sendToPlayerctl("previous")
-        else
-            sendToSpotify("Previous")
-        end
+local previousTrack = function()
+    if hasPlayerctl then
+        sendToPlayerctl("previous")
+    else
+        sendToSpotify("Previous")
     end
+end
+
+local displayVolume = function()
+    -- Update screen
+    local screen = awful.screen:focused()
+    volumeWibox.screen = screen
+
+    -- Position
+    volumeWibox:geometry({
+        x = (screen.geometry.x + screen.geometry.width / 2 - beautiful.volume_osd_width / 2),
+        y = (screen.geometry.y + screen.geometry.height / 2 - beautiful.volume_osd_height / 2)
+    })
+
+    -- Get volume
+    local volume = getVolume()
+
+    -- Update values
+    imagebox.image = getVolumeImage(volume)
+    progressbar.value = volume
+
+    -- Show
+    volumeWibox.visible = true
+
+    -- Schedule hide
+    if timer ~= nil then
+        timer:stop()
+    end
+    timer = gears.timer {
+        timeout = config.volume_osd_timeout,
+        callback = function() 
+            volumeWibox.visible = false
+            timer:stop()
+            timer = nil
+        end
+    }
+    timer:start()
+end
+local raiseVolume = function()
+    os.execute("amixer set Master 5%+")
+    displayVolume()
+end
+local lowerVolume = function()
+    os.execute("amixer set Master 5%-")
+    displayVolume()
+end
 -- }}}
 
 return {
     playPause = playPause,
     nextTrack = nextTrack,
-    previousTrack = previousTrack
+    previousTrack = previousTrack,
+    raiseVolume = raiseVolume,
+    lowerVolume = lowerVolume
 }

rc.lua

@@ -436,7 +436,12 @@ globalkeys = gears.table.join(
     awful.key({}, "XF86AudioNext", media_control.nextTrack,
         {description = "Next track", group="media control"}),
     awful.key({}, "XF86AudioPrev", media_control.previousTrack,
-        {description = "Previous track", group="media control"})
+        {description = "Previous track", group="media control"}),
+    -- Volume control
+    awful.key({}, "XF86AudioRaiseVolume", media_control.raiseVolume,
+        {description = "Raise volume", group="media control"}),
+    awful.key({}, "XF86AudioLowerVolume", media_control.lowerVolume,
+        {description = "Lower volume", group="media control"})
 )
 
 clientkeys = gears.table.join(