Curate a List of Items

Many controllers read a list of items and then manage their playout.

Examples include lists that are constantly updating such as chat messages or lists that are prepared such as a class list for a graduation.

A common need is to be able to parse a list, display it, and allow the user to pick items in the list and play them in.

This example reads random images from various artists and builds a list of them.

Take a look at the source code to see how it works.

Of particular interest:

Pre-Render

As each image is downloaded, a scheduleAction call is made to prepare that item so it will be ready to play whenever the user clicks the play button.

scheduler.scheduleAction('render', inputName, '', {
  Name: jsonReply.author,
  Subtitle: jsonReply.url,
  Image: requestPicture.responseURL,
});

These renders will be cached in the project, so that they can be played in any order whenever they are needed.

Automatic Action

Each list item includes a “Play” button. Pressing this sends the “automatic” action to the scheduler. “automatic” is a natural choice for lists.

• If the title is not playing, “automatic” becomes “animateIn” and animates the Title in with the selected list item’s values.

• If the title is live with another list item, “automatic” becomes “update” and animates only the changes.

• If the title is live with the current list item, “automatic” becomes “animateOut” and animates the Title out.

// When the user clicks play, use the automatic action
// which will animate in, animate out, or update,
// depending on Title play status and Variable values.
scheduler.scheduleAction('automatic', inputName, '', {
  Name: jsonReply.author,
  Subtitle: jsonReply.url,
  Image: requestPicture.responseURL,
});

This saves you from writing special state logic to track the status of the Titles and determine what action to take when the Play button is clicked.

Dynamic Input Definition

Although prior examples showed setting up variables in the XML configuration, they can also be set manually through the API using the updateInputDefinition command.

// Redefine this input as having the three variables that we wish to use for this list.
scheduler.updateInputDefinition(ServiceHandler.inputName, {
  variables: {
    Name: { type: 'text', tags: 'name' },
    Subtitle: { type: 'text' },
    Image: { type: 'image' },
  },
});