Our player controls should contain a play/pause toggle button for the entire mix. It should also present a slider control to allow us to skip ahead and rewind our playback.
Let's create app/modules/player/components/player-controls/player-controls.component.html (with a matching .ts):
<GridLayout rows="100" columns="75,*" row="1" col="0"> <Button [text]="playStatus" (tap)="togglePlay()" row="0" col="0"></Button> <Slider minValue="0" [maxValue]="duration" [value]="currentTime" row="0" col="1"></Slider></GridLayout>
We start with a single row GridLayout with an explicit 100 height. Then, the first column will be constrained to 75 wide to accommodate our play/pause toggle button. Then, the second column will ...