Migrate 'now playing' screen to lua

8 files changed, 107 insertions, 49 deletions

diff --git a/lua/browser.lua b/lua/browser.lua
index f07d80bc..415e5dbb 100644
--- a/lua/browser.lua
+++ b/lua/browser.lua
@@ -5,6 +5,7 @@ local database = require("database")
 local backstack = require("backstack")
 local font = require("font")
 local queue = require("queue")
+local playing = require("playing")
 
 local browser = {}
 
@@ -73,6 +74,7 @@ function browser.create(opts)
     play:onClicked(function()
       queue.clear()
       queue.add(original_iterator)
+      backstack.push(playing)
     end
     )
   end
@@ -107,8 +109,7 @@ function browser.create(opts)
       else
         queue.clear()
         queue.add(contents)
-        legacy_ui.open_now_playing()
-        -- backstack.push(playing)
+        backstack.push(playing)
       end
     end)
     btn:onevent(lvgl.EVENT.FOCUSED, function()
diff --git a/lua/img/next.png b/lua/img/next.png
new file mode 100644
index 00000000..1b22a509
--- /dev/null
+++ b/lua/img/next.png
diff --git a/lua/img/pause.png b/lua/img/pause.png
new file mode 100644
index 00000000..29fa4b90
--- /dev/null
+++ b/lua/img/pause.png
diff --git a/lua/img/play.png b/lua/img/play.png
new file mode 100644
index 00000000..cc10cab5
--- /dev/null
+++ b/lua/img/play.png
diff --git a/lua/img/prev.png b/lua/img/prev.png
new file mode 100644
index 00000000..f17e6162
--- /dev/null
+++ b/lua/img/prev.png
diff --git a/lua/main_menu.lua b/lua/main_menu.lua
index c0b9b1d1..c2d052a3 100644
--- a/lua/main_menu.lua
+++ b/lua/main_menu.lua
@@ -4,6 +4,7 @@ local legacy_ui = require("legacy_ui")
 local database = require("database")
 local backstack = require("backstack")
 local browser = require("browser")
+local playing = require("playing")
 
 return function()
   local menu = {}
@@ -29,7 +30,7 @@ return function()
   })
 
   menu.list:add_btn(nil, "Now Playing"):onClicked(function()
-    legacy_ui.open_now_playing();
+    backstack.push(playing)
   end)
 
   local indexes = database.indexes()
diff --git a/lua/playing.lua b/lua/playing.lua
index 89bb27f7..a183e1ab 100644
--- a/lua/playing.lua
+++ b/lua/playing.lua
@@ -2,6 +2,8 @@ local lvgl = require("lvgl")
 local widgets = require("widgets")
 local backstack = require("backstack")
 local font = require("font")
+local playback = require("playback")
+local queue = require("queue")
 
 return function(opts)
   local screen = {}
@@ -23,72 +25,142 @@ return function(opts)
     transparent_bg = true,
   })
 
-  local track_info = screen.root:Object {
+  local info = screen.root:Object {
     flex = {
       flex_direction = "column",
+      flex_wrap = "wrap",
       justify_content = "center",
       align_items = "center",
       align_content = "center",
     },
-    w = lvgl.SIZE_CONTENT,
+    w = lvgl.HOR_RES(),
+    h = lvgl.SIZE_CONTENT,
     flex_grow = 1,
   }
 
-  local artist = track_info:Label {
-    text = "Cool Artist",
-    text_font = font.fusion_10,
-  }
-
-  local artist = track_info:Label {
-    text = "Good Album",
+  local artist = info:Label {
+    w = lvgl.SIZE_CONTENT,
+    h = lvgl.SIZE_CONTENT,
+    text = "",
     text_font = font.fusion_10,
   }
 
-  local title = track_info:Label {
-    text = "A really good song",
+  local title = info:Label {
+    w = lvgl.SIZE_CONTENT,
+    h = lvgl.SIZE_CONTENT,
+    text = "",
   }
 
-  local scrubber = screen.root:Object {}
-
-  local times = screen.root:Object {
+  local playlist = screen.root:Object {
     flex = {
       flex_direction = "row",
       justify_content = "center",
-      align_items = "space-between",
+      align_items = "center",
       align_content = "center",
     },
-    w = lvgl.PCT(100),
+    w = lvgl.SIZE_CONTENT,
     h = lvgl.SIZE_CONTENT,
   }
-  local cur_time = track_info:Label {
-    text = "1:09",
+
+  local playlist_pos = playlist:Label {
+    text = "",
+    text_font = font.fusion_10,
   }
-  local end_time = track_info:Label {
-    text = "4:20",
+  playlist:Label {
+    text = "/",
+    text_font = font.fusion_10,
+  }
+  local playlist_total = playlist:Label {
+    text = "",
+    text_font = font.fusion_10,
   }
 
+  local scrubber = screen.root:Bar {
+    w = lvgl.PCT(100),
+    h = 5,
+    range = { min = 0, max = 100 },
+    value = 0,
+  }
 
   local controls = screen.root:Object {
     flex = {
       flex_direction = "row",
       justify_content = "center",
-      align_items = "space-evenly",
+      align_items = "center",
       align_content = "center",
     },
     w = lvgl.PCT(100),
     h = lvgl.SIZE_CONTENT,
+    pad_column = 8,
+    pad_all = 2,
+  }
+
+  local cur_time = controls:Label {
+    w = lvgl.SIZE_CONTENT,
+    h = lvgl.SIZE_CONTENT,
+    text = "",
+    text_font = font.fusion_10,
   }
-  controls:Label {
-    text = ">",
+
+  controls:Object({ flex_grow = 1, h = 1 }) -- spacer
+
+  controls:Image {
+    src = "//lua/img/prev.png",
   }
-  controls:Label {
-    text = ">",
+  local play_pause_img = controls:Image {
+    src = "//lua/img/pause.png",
   }
-  controls:Label {
-    text = ">",
+  controls:Image {
+    src = "//lua/img/next.png",
   }
-  controls:Label {
-    text = ">",
+  controls:Object({ flex_grow = 1, h = 1 }) -- spacer
+
+  local end_time = controls:Label {
+    w = lvgl.SIZE_CONTENT,
+    h = lvgl.SIZE_CONTENT,
+    align = lvgl.ALIGN.RIGHT_MID,
+    text = "",
+    text_font = font.fusion_10,
+  }
+
+  local format_time = function(time)
+    return string.format("%d:%02d", time // 60, time % 60)
+  end
+
+  screen.bindings = {
+    playback.playing:bind(function(playing)
+      if playing then
+        play_pause_img:set_src("//lua/img/pause.png")
+      else
+        play_pause_img:set_src("//lua/img/play.png")
+      end
+    end),
+    playback.position:bind(function(pos)
+      if not pos then return end
+      cur_time:set {
+        text = format_time(pos)
+      }
+      scrubber:set { value = pos }
+    end),
+    playback.track:bind(function(track)
+      if not track then return end
+      end_time:set {
+        text = format_time(track.duration)
+      }
+      title:set { text = track.title }
+      artist:set { text = track.artist }
+      scrubber:set {
+        range = { min = 0, max = track.duration }
+      }
+    end),
+    queue.position:bind(function(pos)
+      if not pos then return end
+      playlist_pos:set { text = tostring(pos) }
+    end),
+    queue.size:bind(function(num)
+      if not num then return end
+      playlist_total:set { text = tostring(num) }
+    end),
   }
 
   return screen
diff --git a/lua/widgets.lua b/lua/widgets.lua
index b601326b..bd0b2405 100644
--- a/lua/widgets.lua
+++ b/lua/widgets.lua
@@ -1,7 +1,6 @@
 local lvgl = require("lvgl")
 local power = require("power")
 local bluetooth = require("bluetooth")
-local playback = require("playback")
 local font = require("font")
 
 local widgets = {}
@@ -53,7 +52,6 @@ function widgets.StatusBar(parent, opts)
     status_bar.title:set { text = opts.title }
   end
 
-  status_bar.playing = status_bar.root:Image {}
   status_bar.bluetooth = status_bar.root:Image {}
   status_bar.battery = status_bar.root:Image {}
   status_bar.chg = status_bar.battery:Image {
@@ -64,7 +62,7 @@ function widgets.StatusBar(parent, opts)
   local is_charging = nil
   local percent = nil
 
-  function update_battery_icon()
+  local function update_battery_icon()
     if is_charging == nil or percent == nil then return end
     local src
     if percent >= 95 then
@@ -101,20 +99,6 @@ function widgets.StatusBar(parent, opts)
       is_charging = p
       update_battery_icon()
     end),
-    playback.playing:bind(function(playing)
-      if playing then
-        status_bar.playing:set_src("//lua/assets/play.png")
-      else
-        status_bar.playing:set_src("//lua/assets/pause.png")
-      end
-    end),
-    playback.track:bind(function(track)
-      if track then
-        status_bar.playing:clear_flag(lvgl.FLAG.HIDDEN)
-      else
-        status_bar.playing:add_flag(lvgl.FLAG.HIDDEN)
-      end
-    end),
     bluetooth.enabled:bind(function(en)
       if en then
         status_bar.bluetooth:clear_flag(lvgl.FLAG.HIDDEN)