alex/musicplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Alexander Heldt
2025-12-06 19:55:11 +01:00
parent fff9e32895
commit 73cf46eef4
4 changed files with 65 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/musicplayer/ui/layout.gleam
View File

@@ -18,8 +18,13 @@ pub type Section {
PlaybackTime PlaybackTime
} }
pub type Dimension {
Percent(width: Int, height: Int)
Flex
}
pub type Style { pub type Style {
Style(width_percent: Int, height_percent: Int) Style(dimensions: Dimension)
} }
/// A Nodes width and height is in percentage (of the available width/height of its parent Node) /// A Nodes width and height is in percentage (of the available width/height of its parent Node)
@@ -28,6 +33,7 @@ pub type Node {
Cell(content: String, style: Style) Cell(content: String, style: Style)
} }
/// The root node must use `Root` section
pub type Layout { pub type Layout {
Layout(width: Int, height: Int, nodes: dict.Dict(Section, Node)) Layout(width: Int, height: Int, nodes: dict.Dict(Section, Node))
} }
@@ -39,7 +45,7 @@ pub fn new() -> Layout {
Root, Root,
Row( Row(
content: "Music Player", content: "Music Player",
style: Style(width_percent: 100, height_percent: 100), style: Style(dimensions: Percent(width: 100, height: 100)),
children: [Header, Search, PlaybackTime], children: [Header, Search, PlaybackTime],
), ),
), ),
@@ -47,7 +53,7 @@ pub fn new() -> Layout {
Header, Header,
Row( Row(
content: "Foo (1) | Bar (2) | Baz (3)", content: "Foo (1) | Bar (2) | Baz (3)",
style: Style(width_percent: 100, height_percent: 33), style: Style(dimensions: Percent(width: 100, height: 33)),
children: [], children: [],
), ),
), ),
@@ -55,7 +61,7 @@ pub fn new() -> Layout {
Search, Search,
Row( Row(
content: "", content: "",
style: Style(width_percent: 100, height_percent: 33), style: Style(dimensions: Percent(width: 100, height: 33)),
children: [], children: [],
), ),
), ),
@@ -63,7 +69,7 @@ pub fn new() -> Layout {
PlaybackTime, PlaybackTime,
Row( Row(
content: "00:00", content: "00:00",
style: Style(width_percent: 100, height_percent: 33), style: Style(dimensions: Percent(width: 100, height: 33)),
children: [], children: [],
), ),
), ),
@@ -95,6 +101,7 @@ pub fn update_dimensions(layout: Layout, width: Int, height: Int) -> Layout {
pub fn render(layout: Layout) -> Nil { pub fn render(layout: Layout) -> Nil {
internal.clear_screen() internal.clear_screen()
[layout.width, layout.height] [layout.width, layout.height]
|> list.map(int.to_string) |> list.map(int.to_string)
|> string.join(" ") |> string.join(" ")
@@ -157,15 +164,22 @@ pub fn render_generic(
Ok(node) -> { Ok(node) -> {
let margin = 2.0 let margin = 2.0
let width = let #(width, height) = case node.style.dimensions {
container_width *. { int.to_float(node.style.width_percent) /. 100.0 } Flex -> todo
|> float.floor Percent(width:, height:) -> {
|> float.truncate let width =
container_width *. { int.to_float(width) /. 100.0 }
|> float.floor
|> float.truncate
let height = let height =
container_height *. { int.to_float(node.style.height_percent) /. 100.0 } container_height *. { int.to_float(height) /. 100.0 }
|> float.floor |> float.floor
|> float.truncate |> float.truncate
#(width, height)
}
}
let #(cx, cy) = case node { let #(cx, cy) = case node {
Row(..) -> #(container_tl_x, container_tl_y + { index * height }) Row(..) -> #(container_tl_x, container_tl_y + { index * height })
@@ -185,25 +199,30 @@ pub fn render_generic(
|> list.fold(parent, fn(acc_into, ic) { |> list.fold(parent, fn(acc_into, ic) {
let #(i, child) = ic let #(i, child) = ic
let cw = let #(width, height) = case node.style.dimensions {
container_width Flex -> todo
*. { int.to_float(node.style.width_percent) /. 100.0 } Percent(width:, height:) -> {
-. margin let width =
|> float.floor container_width *. { int.to_float(width) /. 100.0 } -. margin
|> float.floor
let ch = let height =
container_height container_height
*. { int.to_float(node.style.height_percent) /. 100.0 } *. { int.to_float(height) /. 100.0 }
-. margin -. margin
|> float.floor |> float.floor
#(width, height)
}
}
let child_origin_x = container_tl_x + 1 let child_origin_x = container_tl_x + 1
let child_origin_y = container_tl_y + 1 let child_origin_y = container_tl_y + 1
render_generic( render_generic(
layout, layout,
cw, width,
ch, height,
child_origin_x, child_origin_x,
child_origin_y, child_origin_y,
i, i,

14
src/musicplayer/ui/layout_examples/layout_examples.gleam
View File

@@ -1,7 +1,7 @@
import gleam/dict import gleam/dict
import musicplayer/ui/internal import musicplayer/ui/internal
import musicplayer/ui/layout.{Layout, Section, Style} import musicplayer/ui/layout.{Layout, Percent, Section, Style}
import musicplayer/ui/layout_examples/wait_for_input.{wait_for_input} import musicplayer/ui/layout_examples/wait_for_input.{wait_for_input}
pub fn main() { pub fn main() {
@@ -21,10 +21,10 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
let nodes = let nodes =
dict.from_list([ dict.from_list([
#( #(
Section("Root"), layout.Root,
layout.Row( layout.Row(
content: "container", content: "container",
style: Style(width_percent: 100, height_percent: 100), style: Style(dimensions: Percent(width: 100, height: 100)),
children: [ children: [
Section("Row1"), Section("Row1"),
Section("Row2"), Section("Row2"),
@@ -35,7 +35,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
Section("Row1"), Section("Row1"),
layout.Row( layout.Row(
content: "row 1", content: "row 1",
style: Style(width_percent: 100, height_percent: 50), style: Style(dimensions: Percent(width: 100, height: 50)),
children: [ children: [
Section("A"), Section("A"),
Section("A"), Section("A"),
@@ -46,21 +46,21 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
Section("A"), Section("A"),
layout.Cell( layout.Cell(
content: "cell 1", content: "cell 1",
style: Style(width_percent: 50, height_percent: 100), style: Style(dimensions: Percent(width: 50, height: 50)),
), ),
), ),
#( #(
Section("B"), Section("B"),
layout.Cell( layout.Cell(
content: "cell 2", content: "cell 2",
style: Style(width_percent: 50, height_percent: 100), style: Style(dimensions: Percent(width: 50, height: 50)),
), ),
), ),
#( #(
Section("Row2"), Section("Row2"),
layout.Row( layout.Row(
content: "row 2", content: "row 2",
style: Style(width_percent: 100, height_percent: 50), style: Style(dimensions: Percent(width: 50, height: 50)),
children: [], children: [],
), ),
), ),

19
test/musicplayer/ui/layout_test.gleam
View File

@@ -5,23 +5,23 @@ import gleeunit
import gleeunit/should import gleeunit/should
import musicplayer/ui/virtual_ansi import musicplayer/ui/virtual_ansi
import musicplayer/ui/layout.{Layout, Section, Style} import musicplayer/ui/layout.{Layout, Percent, Section, Style}
pub fn main() -> Nil { pub fn main() -> Nil {
gleeunit.main() gleeunit.main()
} }
pub fn foo_test() { pub fn percent_layout_test() {
let layout = let layout =
Layout( Layout(
width: 80, width: 80,
height: 20, height: 20,
nodes: dict.from_list([ nodes: dict.from_list([
#( #(
Section("Root"), layout.Root,
layout.Row( layout.Row(
content: "container", content: "container",
style: Style(width_percent: 100, height_percent: 100), style: Style(dimensions: Percent(width: 100, height: 100)),
children: [ children: [
Section("Row1"), Section("Row1"),
Section("Row2"), Section("Row2"),
@@ -32,7 +32,7 @@ pub fn foo_test() {
Section("Row1"), Section("Row1"),
layout.Row( layout.Row(
content: "row 1", content: "row 1",
style: Style(width_percent: 100, height_percent: 50), style: Style(dimensions: Percent(width: 100, height: 50)),
children: [ children: [
Section("A"), Section("A"),
Section("B"), Section("B"),
@@ -43,21 +43,21 @@ pub fn foo_test() {
Section("A"), Section("A"),
layout.Cell( layout.Cell(
content: "cell 1", content: "cell 1",
style: Style(width_percent: 50, height_percent: 100), style: Style(dimensions: Percent(width: 50, height: 100)),
), ),
), ),
#( #(
Section("B"), Section("B"),
layout.Cell( layout.Cell(
content: "cell 2", content: "cell 2",
style: Style(width_percent: 50, height_percent: 100), style: Style(dimensions: Percent(width: 50, height: 100)),
), ),
), ),
#( #(
Section("Row2"), Section("Row2"),
layout.Row( layout.Row(
content: "row 1", content: "row 1",
style: Style(width_percent: 100, height_percent: 50), style: Style(dimensions: Percent(width: 100, height: 50)),
children: [], children: [],
), ),
), ),
@@ -88,8 +88,7 @@ container───────────────────────
└──────────────────────────────────────────────────────────────────────────────┘ └──────────────────────────────────────────────────────────────────────────────┘
" "
let visual = let visual = virtual_ansi.render(layout)
virtual_ansi.render(layout, Section("Root"), layout.width, layout.height)
case visual == string.trim(expected) { case visual == string.trim(expected) {
True -> Nil True -> Nil
False -> { False -> {

10
test/musicplayer/ui/virtual_ansi.gleam
View File

@@ -3,12 +3,12 @@ import gleam/int
import gleam/list import gleam/list
import gleam/string import gleam/string
import musicplayer/ui/layout.{type Layout, type Section, Renders} import musicplayer/ui/layout.{type Layout, Renders}
pub type Screen = pub type Screen =
dict.Dict(#(Int, Int), String) dict.Dict(#(Int, Int), String)
pub fn render(layout: Layout, root: Section, width: Int, height: Int) -> String { pub fn render(layout: Layout) -> String {
let test_renders = let test_renders =
Renders( Renders(
box: fn(screen, x, y, w, h) { box(screen, x, y, w, h) }, box: fn(screen, x, y, w, h) { box(screen, x, y, w, h) },
@@ -18,12 +18,12 @@ pub fn render(layout: Layout, root: Section, width: Int, height: Int) -> String
let screen = let screen =
layout.render_generic( layout.render_generic(
layout, layout,
int.to_float(width), int.to_float(layout.width),
int.to_float(height), int.to_float(layout.height),
1, 1,
1, 1,
0, 0,
root, layout.Root,
dict.new(), dict.new(),
test_renders, test_renders,
) )