Back to our layout

Inside the grid, we have declared a track-list component to represent our track listing, which will flex vertically, taking up all the vertical space and leaving only a height of 100 for player-controls. We indicate track-list as row="0" col="0", since rows and columns are index-based. The flexible (remainder) vertical height is defined via the GridLayout's * in the rows attribute. The bottom section of the grid (row 1) will represent the player controls, allowing users to play/pause the mix and shuttle the playback position.

Now that we have the app's primary view defined in a rather abstract way, let's dive into the two custom components we need to build, track-list and player-controls.