Tweaking the mini-player in Code

How we’ll switch between the “Now Playing” screen and the mini-player

Okay, here’s the trick. The mini-player will be inside our “Now Playing” screen, all the time. We just hide it when “Now Playing” is shown, like this:

The album cover is a separate layer, as you know, which we resize and reposition when transitioning between the big and the small players.

Positioning the mini-player

We place Mini_Player inside the “Now Playing” screen’s ScrollComponent and change its y to zero so that it’s placed at the top.

Mini_Player.props =
    parent: scroll_now_playing.content
    y: 0

Positioning the “Play” and “Pause” buttons

We should rearrange the buttons. The “Play” button should be visible at first, in the spot where the “Pause” button is now.

First, we give Mini_Button_Play the same horizontal position as Mini_Button_Pause …

Mini_Button_Play.x = Mini_Button_Pause.x

… and then we hide Mini_Button_Pause.

Mini_Button_Pause.visible = no

Making the “Play” and “Pause” buttons react to taps

We’ll let these buttons also play() and pause() the music, with these (HTML5 audio) functions on the audio module’s player object:

Mini_Button_Play.onTap ->
    audio.player.play()
Mini_Button_Pause.onTap ->
    audio.player.pause()

Now, we could use these same onTap event handlers to make the buttons appear and disappear (to switch between the “Pause” and “Play” buttons).

But we were already listening to a few of the player’s events to know when the music started or stopped. If you remember, we’re using them to grow and shrink the album cover.

Go back to the Animating the Album Cover fold and add these lines:

# When the music started playing
audio.player.onplaying = ->
    $.Album_Cover.animate "playing"
    # Show and hide the small buttons
    Mini_Button_Play.visible = no
    Mini_Button_Pause.visible = yes
# When the music is paused
audio.player.onpause = ->
    $.Album_Cover.animate "paused"
    # Show and hide the small buttons
    Mini_Button_Play.visible = yes
    Mini_Button_Pause.visible = no

This way the small buttons will also change when we use the big buttons on the “Now Playing” screen.

To make the reverse also work (the big buttons should change when we tap the small ones), we add similar lines for $.Button_Play and $.Button_Pause.

# When the music started playing
audio.player.onplaying = ->
    $.Album_Cover.animate "playing"
    # Show and hide the small buttons
    Mini_Button_Play.visible = no
    Mini_Button_Pause.visible = yes
    # … and also the big buttons
    $.Button_Play.visible = no
    $.Button_Pause.visible = yes
# When the music is paused
audio.player.onpause = ->
    $.Album_Cover.animate "paused"
    # Show and hide the small buttons
    Mini_Button_Play.visible = yes
    Mini_Button_Pause.visible = no
    # … and also the big buttons
    $.Button_Play.visible = yes
    $.Button_Pause.visible = no

Now all buttons will change at the same time, independent of which “Play” or “Pause” button (big or small) was tapped.

All the “Play” and “Pause” buttons are functional