1 files changed, 33 insertions, 15 deletions

diff --git a/lua/playing.lua b/lua/playing.lua
index 90e20f49..b3b4ec4d 100644
--- a/lua/playing.lua
+++ b/lua/playing.lua
@@ -20,7 +20,7 @@ local icon_enabled_class = "icon_enabled"
 local icon_disabled_class = "icon_disabled"
 
 return screen:new {
-  createUi = function(self)
+  create_ui = function(self)
     self.root = lvgl.Object(nil, {
       flex = {
         flex_direction = "column",
@@ -74,7 +74,7 @@ return screen:new {
         align_items = "center",
         align_content = "center",
       },
-      w = lvgl.PCT(100),
+      w = lvgl.PCT(95),
       h = lvgl.SIZE_CONTENT,
     }
 
@@ -114,11 +114,12 @@ return screen:new {
     playlist:Object({ w = 3, h = 1 }) -- spacer
 
     local scrubber = self.root:Slider {
-      w = lvgl.PCT(100),
+      w = lvgl.PCT(90),
       h = 5,
       range = { min = 0, max = 100 },
       value = 0,
     }
+    theme.set_style(scrubber, "scrubber");
     local scrubber_desc = widgets.Description(scrubber, "Scrubber")
 
     scrubber:onevent(lvgl.EVENT.RELEASED, function()
@@ -138,6 +139,8 @@ return screen:new {
       end
     end)
 
+    self.root:Object({ w = 1, h = 1 }) -- spacer
+
     local controls = self.root:Object {
       flex = {
         flex_direction = "row",
@@ -158,7 +161,7 @@ return screen:new {
       queue.repeat_track:set(not queue.repeat_track:get())
     end)
     local repeat_img = repeat_btn:Image { src = img.repeat_src }
-    theme.set_style(repeat_img, icon_enabled_class)
+    theme.set_style(repeat_btn, icon_enabled_class)
     local repeat_desc = widgets.Description(repeat_btn)
 
 
@@ -171,7 +174,7 @@ return screen:new {
       end
     end)
     local prev_img = prev_btn:Image { src = img.prev }
-    theme.set_style(prev_img, icon_enabled_class)
+    theme.set_style(prev_btn, icon_enabled_class)
     local prev_desc = widgets.Description(prev_btn, "Previous track")
 
     local play_pause_btn = controls:Button {}
@@ -180,13 +183,13 @@ return screen:new {
     end)
     play_pause_btn:focus()
     local play_pause_img = play_pause_btn:Image { src = img.pause }
-    theme.set_style(play_pause_img, icon_enabled_class)
+    theme.set_style(play_pause_btn, icon_enabled_class)
     local play_pause_desc = widgets.Description(play_pause_btn, "Play")
 
     local next_btn = controls:Button {}
     next_btn:onClicked(queue.next)
     local next_img = next_btn:Image { src = img.next }
-    theme.set_style(next_img, icon_disabled_class)
+    theme.set_style(next_btn, icon_disabled_class)
     local next_desc = widgets.Description(next_btn, "Next track")
 
     local shuffle_btn = controls:Button {}
@@ -194,7 +197,7 @@ return screen:new {
       queue.random:set(not queue.random:get())
     end)
     local shuffle_img = shuffle_btn:Image { src = img.shuffle }
-    theme.set_style(shuffle_img, icon_enabled_class)
+    theme.set_style(shuffle_btn, icon_enabled_class)
     local shuffle_desc = widgets.Description(shuffle_btn)
 
     controls:Object({ flex_grow = 1, h = 1 }) -- spacer
@@ -223,7 +226,18 @@ return screen:new {
         end
       end),
       playback.track:bind(function(track)
-        if not track then return end
+        if not track then
+          if queue.loading:get() then
+            title:set { text = "Loading..." }
+          else
+            title:set { text = "" }
+          end
+          artist:set { text = "" }
+          cur_time:set { text = format_time(0) }
+          end_time:set { text = format_time(0) }
+          scrubber:set { value = 0 }
+          return
+        end
         if track.duration then
           end_time:set { text = format_time(track.duration) }
         else
@@ -238,22 +252,26 @@ return screen:new {
 
         local can_next = pos < queue.size:get() or queue.random:get()
         theme.set_style(
-          next_img, can_next and icon_enabled_class or icon_disabled_class
+          next_btn, can_next and icon_enabled_class or icon_disabled_class
         )
       end),
       queue.random:bind(function(shuffling)
-        theme.set_style(shuffle_img, shuffling and icon_enabled_class or icon_disabled_class)
+        theme.set_style(shuffle_btn, shuffling and icon_enabled_class or icon_disabled_class)
         if shuffling then
+          shuffle_img:set_src(img.shuffle)
           shuffle_desc:set { text = "Disable shuffle" }
         else
+          shuffle_img:set_src(img.shuffle_off)
           shuffle_desc:set { text = "Enable shuffle" }
         end
       end),
       queue.repeat_track:bind(function(en)
-        theme.set_style(repeat_img, en and icon_enabled_class or icon_disabled_class)
+        theme.set_style(repeat_btn, en and icon_enabled_class or icon_disabled_class)
         if en then
+          repeat_img:set_src(img.repeat_src)
           repeat_desc:set { text = "Disable track repeat" }
         else
+          repeat_img:set_src(img.repeat_off)
           repeat_desc:set { text = "Enable track repeat" }
         end
       end),
@@ -263,9 +281,9 @@ return screen:new {
       end),
     }
   end,
-  onShown = function() is_now_playing_shown = true end,
-  onHidden = function() is_now_playing_shown = false end,
-  pushIfNotShown = function(self)
+  on_show = function() is_now_playing_shown = true end,
+  on_hide = function() is_now_playing_shown = false end,
+  push_if_not_shown = function(self)
     if not is_now_playing_shown then
       backstack.push(self:new())
     end