Boilerplate Templates

There are multiple available Boilerplates to start from.

SimpleTemplate:

This is the most common way of implementing a Template.
Empty example:

class View extends Dise.SimpleViewBase {
    async main(helper: Dise.DataHelper): Promise<void> {

        // Executed while preloading and invisible
        // Insert your preloading code here

        await this.waitForPlay();

        // We are now visible and playing
        // Insert your playout code here
    }
}

new Dise.TemplateController(new View());

It's recommended to await this.waitForPlay().

• All code before calling await this.waitForPlay() will be executed in the onPreload stage.
• If an exception is thrown, it will be handled as a Client Alarm and logged and reported to the CMS.
• If anything is returned before calling this.waitForPlay(), the template will “reject”, i.e. the player will skip this and move forward to the next item in the playlist, nothing is changed visually on-screen.
• If falsy is returned after calling this.waitForPlay(), the Player will handle when to end the template.
• If truthy is returned after calling this.waitForPlay(), the template will be ended.
• If a string is returned after calling this.waitForPlay(), the template will be ended and a log entry written with the reason.

This makes creating a template straightforward, since most variables can simply be locals in main(). Some class member variables may be needed if support for things like onAttribute and the state needs to be accessible from multiple event handler methods.

Template

A "pure" template exposing the PlayerAPI directly. Support-overrides like onPreloadWithDataHelper() are still supported (as opposed to a plain onPreload(), which does not include the player-metadata as a parameter).

If Template-Reuse is needed or optional, subclass Dise.TemplateViewBase.

SimpleMediaTemplate

This Boilerplate is a SimpleTemplate using MediaHandlers to display a Media (Video or Image), with controlled media-preloading, scaling to aspect mode.

ES6SimpleMediaTemplate

Duplicate of SimpleMediaTemplate, but using the EcmaScript 6 Module (ESM) version of the TemplateFramework. Note the use of the "import" keyword as opposed to references in tsconfig.json and that a bundler such as WebPack is needed, rather than relying on TypeScript creating the file-bundle (template.js).

If you are using another framework for development like VUE, REACT, Angluar and others, using the ESM-version of the TemplateFramework is necessary. Wrapping it with own modules can be useful by e.g. converting the events to Streams in VUE will make it more streamlined. 

Keep in mind that we strongly discourage "copy & pasting" the current TemplateFramework repository and modifying it in-place, since you want to allow for simple adaption of changes from our side.

WorkerTemplate

Copy this as a basis for a Worker template.