Displaying Media - Media Handlers

Templates frequently need to display media (pictures or video) in a controlled manner. This needs support for things like scaling inside a predetermined screen area, and the media, especially video, needs to be “preloaded” so it can be started without delays or glitches once onShift is called. The intrinsic duration of videos can also be useful, so videos are played in full, regardless of the CMS duration value.

The framework includes the Dise.Media namespace or at the root of your reference-namespace with ESM, which contains this functionality. Currently, there is support for pictures and video with auto-detection of type (currently based on file-extension and optional mime-type (if supplied by the template)) as well as optional support for legacy versions of Tizen, which did not support preloading properly and some issues in certain Android releases.

New Media handlers may be added for supporting new media types. This can be done outside of the framework itself and a reference to “your” Media handler is sufficient to get it included in the auto-detection flow.

Here’s a simple template that displays a media file from the CMS. Note that:

• a reference to “templateframework/framework/Media/Media.ts” is needed - in ESM it is always included.

• your css/less/sass should include “templateframework/framework/Media/Media.css” (or .less)

• this template expects the html to contain a fixed size div with the id “MediaContainer”

const DEFAULT_DURATION = 12;

interface CMSData {
    media: {
        url: string;
    }
}

class View extends Dise.SimpleViewBase {

    isDataValid(val: any): val is CMSData {
        return val != null && typeof val === 'object' &&
            typeof val.media?.url === 'string';
    }

    async main(helper: Dise.IDataHelper): Promise<boolean | string | void> {

        if (!this.isDataValid(helper.content))
            throw Error('Data invalid'); 
        // Now, TS knows data is verified to be of the CMSData type.

        const containerE = document.getElementById('MediaContainer');

        let duration = helper.getDuration(DEFAULT_DURATION);
        let mediaHandler: Dise.Media.IMediaHandler;

        [mediaHandler, duration] = await Dise.Media.preloadMedia(containerE, {
            url: helper.content.media.url,
            aspectMode: Dise.Media.AspectMode.letterbox,
            duration: duration,
            hideUntilStart: false
        });
        
        await this.waitForPlay({ 
            duration: duration,
            suggestedNextPreload: duration / 2
        });

        await mediaHandler.start();
    }
}

const ctrl = new Dise.TemplateController(new View());