Add a second font, flesh out browser screen

17 files changed, 192 insertions, 28 deletions

diff --git a/lua/assets/battery_full.bin b/lua/assets/battery_full.bin
deleted file mode 100644
index b01ca61f..00000000
--- a/lua/assets/battery_full.bin
+++ /dev/null
diff --git a/lua/browser.lua b/lua/browser.lua
index 380922a8..ccb2dae8 100644
--- a/lua/browser.lua
+++ b/lua/browser.lua
@@ -3,6 +3,8 @@ local widgets = require("widgets")
 local legacy_ui = require("legacy_ui")
 local database = require("database")
 local backstack = require("backstack")
+local font = require("font")
+local playing = require("playing")
 
 local browser = {}
 
@@ -22,7 +24,6 @@ function browser.create(opts)
   screen.root:center()
 
   screen.status_bar = widgets.StatusBar(screen.root, {
-    back_cb = backstack.pop,
     title = opts.title,
   })
 
@@ -42,11 +43,14 @@ function browser.create(opts)
       pad_top = 2,
       pad_bottom = 2,
       bg_opa = lvgl.OPA(100),
-      bg_color = "#f3e5f5",
+      bg_color = "#fafafa",
       scrollbar_mode = lvgl.SCROLLBAR_MODE.OFF,
     }
 
-    header:Label { text = opts.breadcrumb }
+    header:Label {
+      text = opts.breadcrumb,
+      text_font = font.fusion_10,
+    }
 
     local buttons = header:Object({
       flex = {
@@ -60,11 +64,9 @@ function browser.create(opts)
       h = lvgl.SIZE_CONTENT,
       pad_column = 4,
     })
-    local enqueue = buttons:Button {}
-    enqueue:Label { text = "Enqueue" }
-    enqueue:add_flag(lvgl.FLAG.HIDDEN)
-    local play = buttons:Button {}
-    play:Label { text = "Play all" }
+    local enqueue = widgets.IconBtn(buttons, "//lua/img/enqueue.png", "Enqueue")
+    -- enqueue:add_flag(lvgl.FLAG.HIDDEN)
+    local play = widgets.IconBtn(buttons, "//lua/img/play_small.png", "Play")
   end
 
   screen.list = lvgl.List(screen.root, {
@@ -74,6 +76,9 @@ function browser.create(opts)
     scrollbar_mode = lvgl.SCROLLBAR_MODE.OFF,
   })
 
+  local back = screen.list:add_btn(nil, "< Back")
+  back:onClicked(backstack.pop)
+
   screen.focused_item = 0
   screen.last_item = 0
   screen.add_item = function(item)
@@ -92,7 +97,9 @@ function browser.create(opts)
           })
         end)
       else
-        print("selected track", contents)
+        print("add", contents)
+        legacy_ui.open_now_playing()
+        -- backstack.push(playing)
       end
     end)
     btn:onevent(lvgl.EVENT.FOCUSED, function()
diff --git a/lua/font.lua b/lua/font.lua
new file mode 100644
index 00000000..87246dc1
--- /dev/null
+++ b/lua/font.lua
@@ -0,0 +1,6 @@
+local lvgl = require("lvgl")
+
+return {
+  fusion_12 = lvgl.Font("fusion", 12, "normal"),
+  fusion_10 = lvgl.Font("fusion", 10, "normal"),
+}
diff --git a/lua/img/bat/0.png b/lua/img/bat/0.png
new file mode 100644
index 00000000..15639ef5
--- /dev/null
+++ b/lua/img/bat/0.png
diff --git a/lua/img/bat/0chg.png b/lua/img/bat/0chg.png
new file mode 100644
index 00000000..7267ade1
--- /dev/null
+++ b/lua/img/bat/0chg.png
diff --git a/lua/img/bat/100.png b/lua/img/bat/100.png
new file mode 100644
index 00000000..f762ec2f
--- /dev/null
+++ b/lua/img/bat/100.png
diff --git a/lua/img/bat/20.png b/lua/img/bat/20.png
new file mode 100644
index 00000000..b1fcca1b
--- /dev/null
+++ b/lua/img/bat/20.png
diff --git a/lua/img/bat/40.png b/lua/img/bat/40.png
new file mode 100644
index 00000000..fbba9c3b
--- /dev/null
+++ b/lua/img/bat/40.png
diff --git a/lua/img/bat/60.png b/lua/img/bat/60.png
new file mode 100644
index 00000000..97a8b605
--- /dev/null
+++ b/lua/img/bat/60.png
diff --git a/lua/img/bat/80.png b/lua/img/bat/80.png
new file mode 100644
index 00000000..ab90987b
--- /dev/null
+++ b/lua/img/bat/80.png
diff --git a/lua/img/bat/chg.png b/lua/img/bat/chg.png
new file mode 100644
index 00000000..af90f02b
--- /dev/null
+++ b/lua/img/bat/chg.png
diff --git a/lua/img/enqueue.png b/lua/img/enqueue.png
new file mode 100644
index 00000000..9f720969
--- /dev/null
+++ b/lua/img/enqueue.png
diff --git a/lua/img/play_small.png b/lua/img/play_small.png
new file mode 100644
index 00000000..a7361be4
--- /dev/null
+++ b/lua/img/play_small.png
diff --git a/lua/main.lua b/lua/main.lua
index 106f11c7..f2cbda3a 100644
--- a/lua/main.lua
+++ b/lua/main.lua
@@ -1,3 +1,5 @@
+require("font")
+
 local backstack = require("backstack")
 local main_menu = require("main_menu")
 
diff --git a/lua/main_menu.lua b/lua/main_menu.lua
index 7c236a23..50e930fb 100644
--- a/lua/main_menu.lua
+++ b/lua/main_menu.lua
@@ -20,7 +20,7 @@ return function()
   })
   menu.root:center()
 
-  menu.status_bar = widgets.StatusBar(menu.root, {})
+  menu.status_bar = widgets.StatusBar(menu.root, {transparent_bg = true})
 
   menu.list = lvgl.List(menu.root, {
     w = lvgl.PCT(100),
diff --git a/lua/playing.lua b/lua/playing.lua
new file mode 100644
index 00000000..89bb27f7
--- /dev/null
+++ b/lua/playing.lua
@@ -0,0 +1,95 @@
+local lvgl = require("lvgl")
+local widgets = require("widgets")
+local backstack = require("backstack")
+local font = require("font")
+
+return function(opts)
+  local screen = {}
+  screen.root = lvgl.Object(nil, {
+    flex = {
+      flex_direction = "column",
+      flex_wrap = "wrap",
+      justify_content = "center",
+      align_items = "center",
+      align_content = "center",
+    },
+    w = lvgl.HOR_RES(),
+    h = lvgl.VER_RES(),
+  })
+  screen.root:center()
+
+  screen.status_bar = widgets.StatusBar(screen.root, {
+    back_cb = backstack.pop,
+    transparent_bg = true,
+  })
+
+  local track_info = screen.root:Object {
+    flex = {
+      flex_direction = "column",
+      justify_content = "center",
+      align_items = "center",
+      align_content = "center",
+    },
+    w = 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",
+    text_font = font.fusion_10,
+  }
+
+  local title = track_info:Label {
+    text = "A really good song",
+  }
+
+  local scrubber = screen.root:Object {}
+
+  local times = screen.root:Object {
+    flex = {
+      flex_direction = "row",
+      justify_content = "center",
+      align_items = "space-between",
+      align_content = "center",
+    },
+    w = lvgl.PCT(100),
+    h = lvgl.SIZE_CONTENT,
+  }
+  local cur_time = track_info:Label {
+    text = "1:09",
+  }
+  local end_time = track_info:Label {
+    text = "4:20",
+  }
+
+
+  local controls = screen.root:Object {
+    flex = {
+      flex_direction = "row",
+      justify_content = "center",
+      align_items = "space-evenly",
+      align_content = "center",
+    },
+    w = lvgl.PCT(100),
+    h = lvgl.SIZE_CONTENT,
+  }
+  controls:Label {
+    text = ">",
+  }
+  controls:Label {
+    text = ">",
+  }
+  controls:Label {
+    text = ">",
+  }
+  controls:Label {
+    text = ">",
+  }
+
+  return screen
+end
diff --git a/lua/widgets.lua b/lua/widgets.lua
index 76f7c839..95615a8c 100644
--- a/lua/widgets.lua
+++ b/lua/widgets.lua
@@ -2,6 +2,7 @@ local lvgl = require("lvgl")
 local power = require("power")
 local bluetooth = require("bluetooth")
 local playback = require("playback")
+local font = require("font")
 
 local widgets = {}
 
@@ -19,12 +20,18 @@ function widgets.StatusBar(parent, opts)
     h = lvgl.SIZE_CONTENT,
     pad_top = 1,
     pad_bottom = 1,
+    pad_left = 4,
     pad_column = 1,
-    bg_opa = lvgl.OPA(100),
-    bg_color = "#e1bee7",
     scrollbar_mode = lvgl.SCROLLBAR_MODE.OFF,
   }
 
+  if not opts.transparent_bg then
+    status_bar.root:set {
+      bg_opa = lvgl.OPA(100),
+      bg_color = "#fafafa",
+    }
+  end
+
   if opts.back_cb then
     status_bar.back = status_bar.root:Button {
       w = lvgl.SIZE_CONTENT,
@@ -36,8 +43,10 @@ function widgets.StatusBar(parent, opts)
 
   status_bar.title = status_bar.root:Label {
     w = lvgl.PCT(100),
-    h = 16,
+    h = lvgl.SIZE_CONTENT,
+    text_font = font.fusion_10,
     text = "",
+    align = lvgl.ALIGN.CENTER,
     flex_grow = 1,
   }
   if opts.title then
@@ -47,24 +56,50 @@ function widgets.StatusBar(parent, opts)
   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 {
+    src = "//lua/img/bat/chg.png"
+  }
+  status_bar.chg:center()
 
-  status_bar.bindings = {
-    power.battery_pct:bind(function(percent)
-      local src
-      if percent >= 95 then
-        src = "battery_full.png"
-      elseif percent >= 75 then
-        src = "battery_80.png"
-      elseif percent >= 55 then
-        src = "battery_60.png"
-      elseif percent >= 35 then
-        src = "battery_40.png"
-      elseif percent >= 15 then
-        src = "battery_20.png"
+  local is_charging = nil
+  local percent = nil
+
+  function update_battery_icon()
+    if is_charging == nil or percent == nil then return end
+    local src
+    if percent >= 95 then
+      src = "100.png"
+    elseif percent >= 75 then
+      src = "80.png"
+    elseif percent >= 55 then
+      src = "60.png"
+    elseif percent >= 35 then
+      src = "40.png"
+    elseif percent >= 15 then
+      src = "20.png"
+    else
+      if is_charging then
+        src = "0chg.png"
       else
-        src = "battery_empty.png"
+        src = "0.png"
       end
-      status_bar.battery:set_src("//lua/assets/" .. src)
+    end
+    if is_charging then
+      status_bar.chg:clear_flag(lvgl.FLAG.HIDDEN)
+    else
+      status_bar.chg:add_flag(lvgl.FLAG.HIDDEN)
+    end
+    status_bar.battery:set_src("//lua/img/bat/" .. src)
+  end
+
+  status_bar.bindings = {
+    power.battery_pct:bind(function(pct)
+      percent = pct
+      update_battery_icon()
+    end),
+    power.plugged_in:bind(function(p)
+      is_charging = p
+      update_battery_icon()
     end),
     playback.playing:bind(function(playing)
       if playing then
@@ -99,4 +134,23 @@ function widgets.StatusBar(parent, opts)
   return status_bar
 end
 
+function widgets.IconBtn(parent, icon, text)
+  local btn = parent:Button {
+    flex = {
+      flex_direction = "row",
+      justify_content = "flex-start",
+      align_items = "center",
+      align_content = "center",
+    },
+    w = lvgl.SIZE_CONTENT,
+    h = lvgl.SIZE_CONTENT,
+    pad_top = 1,
+    pad_bottom = 1,
+    pad_left = 1,
+    pad_column = 1,
+  }
+  btn:Image { src = icon }
+  btn:Label { text = text, text_font = font.fusion_10 }
+end
+
 return widgets