How do I write a template for the publication website?

This guide explains how you can write a template for the publication website and describes the available expressions.

A template for the publication website is a single HTML page which uses the Handlebars templating language (https://handlebarsjs.com/) to control the output based on the available expressions.

The Restreamer default template is available at https://github.com/datarhei/restreamer-ui/blob/main/public/_playersite/index.html.

Expressions

The available Handlebars expressions are:

Expression
Type
Description

player

string

Currently this value is always videojs.

playersite

boolean

Whether the playersite is enabled.

title

string

The sitename of the playersite as defined in the General section.

share

boolean

Whether to enable share buttons.

support

boolean

Whether to display a link to the datarhei project website.

chromecast

boolean

Whether to enable chromecast in the player.

airplay

boolean

Whether to enable airplay in the player.

url

string

The URL to the playersite.

textcolor_title

string

Text color for titles as defined in the Design section.

textcolor_default

string

Default text color as defined in the Design section.

textcolor_link

string

Link color as defined in the Design section.

textcolor_link_hover

string

Link :hover color as defined in the Design section.

bgcolor_header

string

Background color for the header as defined in the Design section.

bgcolor_selected

string

Background color for selected items as defined in the Design section.

bgcolor_unselected

string

Background color for unselected items as defined in the Design section.

bgcolor_default

string

Default background color as defined in the Design section.

hrcolor

string

Separator color as defined in the Design section (linecolor).

bgimage_url

string

URL of the background image, empty if no background image has been uploaded.

imprint_html

string

Imprint HTML content as defined in the Notes section.

terms_html

string

Terms HTML content as defined in the Notes section.

inject1

string

HTML content for the extended header as defined in the Code injection section.

inject2

string

HTML content for the extended channel list as defined in the Code injection section.

inject3

string

HTML content for the extended content area as defined in the Code injection section.

inject4

string

HTML content for the extended footer as defined in the Code injection section.

channels

array

List of all available channels, i.e. channel objects. See below.

channel_id

string

ID of the currently selected (or default) channel.

channel_name

string

Name of the currently selected (or default) channel.

channel_description

string

Description of the currently selected (or default) channel.

channel_descriptionhtml

string

Description of the currently selected (or default) channel as HTML.

channel_creator_name

string

Name of the creator of the currently selected (or default) channel.

channel_creator_description

string

Description of the creator of the currently selected (or default) channel.

channel_creator_description_html

string

Description of the creator of the currently selected (or default) channel as HTML.

channel_license

string

License of the currently selected (or default) channel.

channel_poster

string

URL of the poster (snapshot) image of the currently selected (or default) channel.

channel_width

number

The witdh of the player, currently always 640.

channel_height

number

The height of the player, currently always 360.

Channel object

Expression
Type
Description

id

string

Full channel ID, e.g. restreamer-ui:ingest:[UUID]

channelid

string

UUID of the channel.

name

string

Name of the channel.

available

boolean

Whether the channel is available, i.e. connected.

thumbnail

string

URL to the latest snapshot of that channel, empty if not available.

egresses

array(string)

List of egress UUIDs.

Many of those expressions are for manipulating the default template. If you write your own template you are not required to use all expressions. Pick the ones that are suitable for your needs.

The template is used to create the /index.html for the default channel and for each channel a /playersite_[channelid].html. The [channelid] will be replaced by the respective ID of that channel. This can be used to link to the rendered template of an individual channel.

Handlebars

The template language "Handlebars" is used for the publication website templates. If you are new to Handlebars, please check out their guide (https://handlebarsjs.com/guide/) in order to get up to speed.

There are two additional helper defined:

ifEquals

This helper lets you check if two values are equal, e.g.

{{#ifEquals player "videojs"}}
   ...
{{/ifEquals}}

ifnoteq

This helper lets you check if two values are not equal, e.g.

{{#ifnoteq channel_license "none"}}
   ...
{{/ifnoteq}}

Last updated