alexa - audioPlayer.Play issue displaying content on Echo Show Now Playing screen

Question

I am having issues understanding how to display images on the Echo Show inside the audioPlayer 'Now Playing' screen.

I am currently playing an audio file and want to display an image on the 'Now Playing' screen. The closest I have been able to get is the following code which displays the image and title just before the audio starts, but then disappears immediately and the Echo Show goes to the 'Now Playing' screen with no background image and no metadata. I feel I'm close, but just cannot understand how to update the 'Now Playing' screen, rather than the screen that comes immediately before it.

This is part of the code (which works as per above):

var handlers = {
  'LaunchRequest': function() {
   this.emit('PlayStream');        
   },

'PlayStream': function() {
 let builder = new Alexa.templateBuilders.BodyTemplate1Builder();
 let template = builder.setTitle('Test Title')
    .setBackgroundImage(makeImage('https://link_to_my_image.png'))
    .setTextContent(makePlainText('Test Text'))
    .build();

 this.response.speak('OK.').

 audioPlayerPlay(
    'REPLACE_ALL', 
    stream.url, 
    stream.url, 
    null, 
    0)
    .renderTemplate(template);

 this.emit(':responseReady');  
 }

I have been looking at this page https://developer.amazon.com/docs/custom-skills/audioplayer-interface-reference.html but cannot understand how to convert the structure of what is on that page into my code. I assume that, from the code on the page :

{
  "type": "AudioPlayer.Play",
  "playBehavior": "valid playBehavior value such as ENQUEUE",
  "audioItem": {
    "stream": {
      "url": "https://url-of-the-stream-to-play",
      "token": "opaque token representing this stream",
      "expectedPreviousToken": "opaque token representing the previous stream",
      "offsetInMilliseconds": 0
    },
    "metadata": {
      "title": "title of the track to display",
      "subtitle": "subtitle of the track to display",
      "art": {
        "sources": [
          {
            "url": "https://url-of-the-album-art-image.png"
          }
        ]
      },
      "backgroundImage": {
        "sources": [
          {
            "url": "https://url-of-the-background-image.png"
          }
        ]
      }
    }
  }
}

I somehow need to get this part :

"metadata": {
          "title": "title of the track to display",
          "subtitle": "subtitle of the track to display",
          "art": {
            "sources": [
              {
                "url": "https://url-of-the-album-art-image.png"
              }
            ]
          },

Into this block of my code :

audioPlayerPlay(
        'REPLACE_ALL', 
        streamInfo.url, 
        streamInfo.url, 
        null, 
        0)
        .renderTemplate(template);

(and could probably lose the .renderTemplate(template); part as it only flashes up briefly before the 'Now Playing' screen loads anyway.

Any ideas on how to achieve this?

Thanks!

Update :

I have added the following to index.js:

var metadata = { 
    title: "title of the track to display",
    subtitle: "subtitle of the track to display",
    art: { 
        sources: {
            url: "https://url-of-the-album-art-image.png"
            } 
        }
    };

And modified the audioPlayer as follows :

audioPlayerPlay(
    'REPLACE_ALL', 
    stream.url, 
    stream.url, 
    null, 
    0,
    metadata)
    .renderTemplate(template);

And modified the responseBuilder.js as indicated:

audioPlayerPlay(behavior, url, token, expectedPreviousToken, offsetInMilliseconds, metadata) {
    const audioPlayerDirective = {
        type : DIRECTIVE_TYPES.AUDIOPLAYER.PLAY,
        playBehavior: behavior,
        audioItem: {
            stream: {
                url: url,
                token: token,
                expectedPreviousToken: expectedPreviousToken,
                offsetInMilliseconds: offsetInMilliseconds,   
                metadata : metadata 
            }
        }
    };

    this._addDirective(audioPlayerDirective);
    return this;
}

But I'm still not getting anything displayed on the 'Now Playing' screen.

Answer 1

For some reason the Echo Show is not updating in realtime and needs to be rebooted before it will show whatever is passed in the metadata variable, which is why I wasn't seeing any results.

Simply passing a variable as such works fine. I just need to find out why the content gets stuck on the 'Now Playing' screen and requires a reboot to work.

var "metadata": {
      "title": "title of the track to display",
      "subtitle": "subtitle of the track to display",
      "art": {
        "sources": [
          {
            "url": "https://url-of-the-album-art-image.png"
          }
        ]
      },