AngularLynx

    Media Player

    A music player screen with playback controls, a position bar, shuffle and repeat toggles and a collapsible "Up Next" queue. It's UI only, so no audio plays.

    Built with the UI components: Avatar, Progress, Toggle, Collapsible, Separator and Button.

    media-playersrc/app/app.ts

    What it shows

    • Toggle buttons — Toggle with [(pressed)] keeps shuffle and repeat on or off.
    • Derived time — computed() turns the position percentage into the elapsed time under the Progress bar.
    • Icon buttons — Button with variant="ghost" and size="icon" holds the previous and next symbols.
    • A collapsible queue — a Collapsible hides Up Next, and tapping a track there jumps to it.
    • Avatar as artwork — an Avatar with a fallback character stands in for album art.