Template Reuse

Terminology

• A template is the html+css+js to execute a template.
• A template instance is the CMS-data that references the template.

 For example, assume a Playlist with the following:

• Template instance 1.
• Some other template or a plain Content.
• Template instance 2.
• Template instance 3.

allowReuse - False

With allowReuse set to false in the template.json, each template instance (1-3) will be launched in a new iFrame. This means SimpleViewBase can be used.

allowReuse - True

With allowReuse set to true in template.json, consecutive instances of the same template will be launched in the same iFrame, so the sequence will be (from start-up):

1. New iFrame:
   1. Template instance 1.
2. The iFrame is removed.
3. New iFrame (or without one – if normal image/video content).
4. (A fresh) new iFrame, launched with:
   1. Template instance 2.
   2. Template instance 3.
   3. Template instance 1.
5. The iFrame is removed.
6. Go and repeat from step 3.

The template (in the iFrame) receives multiple instances in sequence, this allows a looping video as a background which plays gapless when switching to the next template-instance. If the Playlist only contains instance(s) of the same template, the iFrame and template will continuously play until the template/playlist is updated in a CMS.

When creating a template supporting reuse, it should subclass TemplateViewBase instead of SimpleViewBase. This is all event-based, so rather than a main()-method, the preload and onShift (play) are separated. See Basic Boilerplate Template for an example.

In the example above, after step 3, this will call these methods in the View:

1. onload
2. onMetadata with the data from instance 2
3. onPreload (or a derivative) with the data from instance 2
4. onShift

During instance 2 playback:

1. onMetadata with the data from instance 3
2. onPreload (or a derivative) with the data from instance 3
3. onShift

This requires more control of state-management in the template, since one must “double-buffer” the “current” and “next” instance, then switch either onShift() or based on timing.