Recreating the mp3blaster interface with Textual

app.css

Screen {
    layout: grid;
    grid-size: 2;
    grid-columns: 4fr 1fr;
    grid-rows: 5 6 1fr 4;
    }
.top {
    column-span: 2;
    border-top: mp3top grey;
    border-left: mp3top grey;
    border-right: mp3top grey;
    grid-size: 3;
    grid-rows: 1fr 1fr 1fr 1fr;
    }
.left {
    border: mp3left grey;
    border-title-align: center;
    padding-left: 1;
    height: 100%;
    }
.leftspan {
    border: mp3leftspan grey;
    border-title-align: center;
    }
.right {
    border: mp3right grey;
    }
.bottomleft {
    border: mp3bottomleft grey;
    }
.bottomright {
    border: mp3bottomright grey;
    width: 100%;
    }

container {
    align-horizontal: right;
    width: 100%;
    height: 100%;
    }
.ar {
    border-title-align: right;
    }
Static {
    padding: 0;
    margin: 0;
    }

.status {
    width: 100%;
    }
Horizontal {
width: 100%;
}
Button {
    border: none;
    width: 3;
    min-width: 3;
    min-height: 1;
    color: black;
    background: yellow;
    }

.player {
    margin-right:1;
    height: 2
    }
.volume {
    height: 1;
    width: 4;
    background: black;
    color: white;
    }

app.py

from rich.markup import escape
from textual._border import (BORDER_CHARS, BORDER_LABEL_LOCATIONS,
                             BORDER_LOCATIONS)
from textual.app import App
from textual.containers import Grid, Horizontal, Vertical
from textual.css.constants import VALID_BORDER
from textual.widgets import Button, Checkbox, Label, ListItem, ListView

ALBUMS = [
    escape("[Alanis Morissette - Jagged Little Pill.]"),
    escape("[Alanis Morissette - Supposed Former Infatuation Junkie]"),
    escape("[Biork. - Honogenic]"),
    escape("[Coldplay - Parachutes]"),
    escape("[ELO - Time]"),
    escape("[George Michael - Listen Without Prejudice]"),
    escape("[Gerry Rafferty - City To City]"),
    escape("[Grandaddy - The Sophtware Slump"),
    escape("[Heather Nova - Dyster]"),
]

COMMANDS = {
    "1": "Select Files",
    "2": "Add Group",
    "5": "Set Group Title",
    "l": "Load/Add Playlist",
    "w": "Write Playlist",
    "C": "Clear Playlist",
    "m": "Move Files After",
    "M": "Move Files Before",
    "/": "Start Search",
    "f": "Toggle File Dispaly",
    "6": "Toggle Repeat",
    "7": "Toggle GroupShuffle",
}

MP3_BORDER_CHARS = {
    "mp3top": (("┌", "─", "┐"), ("│", " ", "│"), ("├", "─", "┤")),
    "mp3left": (("├", "─", "┬"), ("│", " ", "│"), ("│", " ", "│")),
    "mp3right": (("─", "─", "┤"), (" ", " ", "│"), (" ", " ", "│")),
    "mp3leftspan": (("├", "─", "┼"), ("│", " ", "│"), ("│", " ", "│")),
    "mp3rightspan": (("├", "─", "┤"), (" ", " ", "│"), (" ", " ", "│")),
    "mp3bottomleft": (("├", "─", "┼"), ("│", " ", "│"), ("└", "─", "┴")),
    "mp3bottomright": (("─", "─", "┤"), (" ", " ", "│"), ("─", "─", "┘")),
}


for key, value in MP3_BORDER_CHARS.items():
    BORDER_CHARS[key] = value


for location in (
    "mp3top",
    "mp3bottomleft",
    "mp3bottomright",
    "mp3left",
    "mp3right",
    "mp3leftspan",
    "mp3rightspan",
):
    VALID_BORDER.add(location)
    BORDER_LOCATIONS[location] = (
        (0, 0, 0),
        (0, 0, 0),
        (0, 0, 0),
    )
    BORDER_LABEL_LOCATIONS[location] = (0, 0)


class Mp3(App):
    CSS_PATH = "app.css"

    def compose(self):
        with Grid(classes="top ar") as g:
            g.border_title = "(-)"
            for command, text in COMMANDS.items():
                yield Label(f"[[magenta] {command} [/magenta]] {text}")

        yield Label(
            """Global Playback: Play current group, including subgroups
Next Song : 02 You Oughta Know, mp3""",
            classes="left status",
        )
        p = Label(
            """Mpa1 Layer3
44Khz 160kb
Stereo
Threads:500""",
            classes="right status ar",
        )
        p.border_title = "(+)"
        yield p
        l = ListView(
            *[ListItem(Label(album)) for album in ALBUMS],
            classes="leftspan",
        )
        l.border_title = "[[Default]]"
        yield l
        with Vertical(classes="right container"):
            yield Checkbox("Shuffle")
            yield Checkbox("Repeat")
            yield Label("[yellow]0[/yellow]:[yellow]19[/yellow]", classes="container")
            yield Label("[yellow]4[/yellow]:[yellow]45[/yellow]")
            with Horizontal():
                yield Button("|<\n b ", classes="player")
                yield Button("||\n p ", classes="player")
                yield Button(">|\n n ", classes="player")
            with Horizontal():
                yield Button("<<\n B ", classes="player")
                yield Button("[]\n s ", classes="player")
                yield Button(">>\n N ", classes="player")

        yield Label(
            """\
I> Alanis Morissette - All I Really Want
Jagged Little Pill""",
            classes="bottomleft status",
        )
        with Vertical(classes="bottomright") as p:
            p.border_title = "\[t]Mixer"
            yield Label("Vol")
            with Horizontal():
                yield Button("[[magenta]<[/magenta]]", classes="volume")
                yield Label("+[yellow]100[/yellow]%")
                yield Button("[[magenta]>[/magenta]]", classes="volume")