Module: Customize Control Bars

This page describes the module bar helper, which allows you to create the control bar schema, to be passed as a parameter to the Player's embed.
As described in the embed parameters page, there is a specific parameter called bars, that accepts an input json which describes the position of the Player's elements in the various bars.
Creating this json can be tricky, so we decided to create a set of methods that will help you in creating this object.
To access these methods, simply do this: window.THRONSchemaHelper.methodName()

THRON Player has a set of control bars including multiple elements:

Top bar, available for all players
Bottom bar, available for all players
Right lateral bar, available for all players
Central bar, available for all players
Gallery Carousel bar, available for Image Playlists and Video Playlists

Each bar contains a group of elements; each group of elements contains a list of elements. Each bar can have one resizable group of elements; this means that its size will be responsive and will automatically adapt.

The video above shows the resizable groups in green

For each bar, developers can choose which groups to be shown both in standard and mobile view.
Mobile view indicates which elements to be shown on mobile devices; Standard for desktop.
If mobile view is not defined, mobile devices will use the standard view.
For example this json shows an extract of the bottom bar of a video:


    bottom: {
		standard: [
			{
			    resizable: true,
			    elements: ["playButton", "timeSeek", "timeInfoText", "volumeButton"]
			 },
			{
				elements: ["hdButton"]
			}
		],
		mobile: [
			{
				resizable: true,
				elements: ["playButton", "timeSeek", "timeInfoText"]
			}
		]
	}

Desktop and mobile will have a different views: mobile will not have the hd and volume button.




A complete list of element ids for each reproductor type follows:

{
     IMAGE: ["captionText", "shareButton", "downloadableButton", "zoomMinus", "zoomPlus", "zoomText", "fullscreenButton"],
     IMAGEGALLERY: ["captionText", "shareButton", "downloadableButton", "leftGallery", "rightGallery", "textGallery", "leftGallerySlider", "gallerySlider", "rightGallerySlider", "zoomMinus", "zoomPlus", "zoomText", "fullscreenButton"],
     THREESIXTY: ["captionText", "shareButton", "downloadableButton", "zoomMinus", "zoomPlus", "zoomText", "fullscreenButton", "leftGallery", "rightGallery", "textGallery", "leftGallerySlider", "gallerySlider", "rightGallerySlider"],
     VIDEO: ["captionText", "shareButton", "downloadableButton", "playButton", "timeSeek", "timeInfoText", "volumeButton", "hdButton", "speedButton", "fullscreenButton", "subtitleButton"],
     VIDEOGALLERY: ["captionText", "shareButton", "downloadableButton", "leftGallery", "rightGallery", "textGallery", "leftGallerySlider", "gallerySlider", "rightGallerySlider", "playButton", "timeSeek", "timeInfoText", "volumeButton", "hdButton", "speedButton", "fullscreenButton", "subtitleButton"],
     AUDIO: ["playButton", "captionText", "shareButton", "downloadableButton", "currentTime", "duration"],
     AUDIOGALLERY: ["textGallery", "leftGallery", "rightGallery", "playButton", "captionText", "shareButton", "downloadableButton", "currentTime", "duration"],
     URL: ["captionText", "shareButton", "downloadableButton", "urlInfoText"],
     PAGELET: ["shareButton", "downloadableButton", "urlInfoText"],
     OTHER: ["captionText", "shareButton", "downloadableButton", "downloadableText"],
     OTHER_DOCUMENT: ["captionTextAdvanced", "searchButton", "pageInformationText", "handTool", "cursorTool", "fullscreenButton", "zoomMinus", "zoomPlus", "scaleSelect", "downloadableButton", "shareButton", "backToThumbnailButton"],
     LIVEEVENT: ["shareButton", "downloadableButton", "playButton", "volumeButton", "fullscreenButton", "hdButton", "audioTracksButton"]
}

Each module method returns a schema which has to be passed to the Player as a parameter; here's some examples:

Examples

//Get default bar schema:
var params = {
 	sessId: "asessId",
 	clientId: "aclientId",
 	xcontentId: "acontentId"
 };
 var onBeforeInit = function(playerInstance){
 	var schema = window.THRONSchemaHelper.getSchema();
		console.log("SCHEMA:", schema);
 };
 window.player = THRONContentExperience("abwmp4", params);
 player.on("beforeInit", onBeforeInit);
//Get video player buttons list
var params = {
 	sessId: "asessId",
 	clientId: "aclientId",
 	xcontentId: "acontentId"
 };
 var onBeforeInit = function(playerInstance){
 	var elements = window.THRONSchemaHelper.getContentTypeElements("VIDEO");
	    console.log(elements);
 };
 window.player = THRONContentExperience("abwmp4", params);
 player.on("beforeInit", onBeforeInit);
//Edit the video player bottom bar: show the share button on the right and the fullscreen on the left.
//Add resizable group in the middle
 var params = {
 	sessId: "asessId",
 	clientId: "aclientId",
 	xcontentId: "acontentId"
 };
 var onBeforeInit = function(playerInstance){
 	var schema = window.THRONSchemaHelper.getSchema();
 	window.THRONSchemaHelper.addGroupsToBar(schema, "VIDEO", "bottom", [{elements: ["shareButton"]}, {resizable:true, elements: []}, {elements: ["fullscreenButton"]}]);
 	var paramsAug = {bars: schema};
 	playerInstance.params(paramsAug);
 };
 window.player = THRONContentExperience("abwmp4", params);
 player.on("beforeInit", onBeforeInit);
//Move share button and play button next to the title
var params = {
 	sessId: "asessId",
 	clientId: "aclientId",
 	xcontentId: "acontentId"
 };
 var onBeforeInit = function(playerInstance){
     var schema = window.THRONSchemaHelper.getSchema();
		window.THRONSchemaHelper.insertBefore(schema, "VIDEO", "captionText", "playButton");
		window.THRONSchemaHelper.insertBefore(schema, "VIDEO", "captionText", "shareButton");
		var paramsAug = {bars: schema};
 	playerInstance.params(paramsAug);
 };
 window.player = THRONContentExperience("abwmp4", params);
 player.on("beforeInit", onBeforeInit);

Methods


<static> getSchema()

Returns the default bars schema

Returns:
Type
Object

<static> getContentTypeElements(contentType)

Returns a list of all elements for each content type (content type must be passed as param)

Parameters:
Name Type Description
contentType String

Content type to use

Returns:
Type
Array
Example
var params = {
 	sessId: "asessId",
 	clientId: "aclientId",
 	xcontentId: "acontentId"
};
var onBeforeInit = function(playerInstance){
		window.THRONSchemaHelper.getContentTypeElements("VIDEO");
};
window.player = THRONContentExperience("aDomId", params);
player.on("beforeInit", onBeforeInit);

<static> getElementsById(schema, contentType, elements)

Find elements into the bar schema.
It returns an object with the following attributes:

  • coordinates: an array of objects.
  • schema: the analyzed bar schema.
    Each coordinates object has the following attributes:
  • elementId: the element id found into schema
  • elementIndex: element position into group bar
  • groupIndex: group position into the bar
  • idBar: the id of the bar
  • barType: standard or mobile
Parameters:
Name Type Description
schema Object

the bar schema to be analyzed. If null, the method will use the default bar schema

contentType String

Content type to be used

elements Array

Elements to be found into the schema

Returns:
Type
Object
Example
var params = {
 	sessId: "asessId",
 	clientId: "aclientId",
 	xcontentId: "acontentId"
};
var onBeforeInit = function(playerInstance){
 	var schema = window.THRONSchemaHelper.getSchema();
		var elements = window.THRONSchemaHelper.getElementsById(schema, "VIDEO", "hdButton");
};
window.player = THRONContentExperience("aDomId", params);
player.on("beforeInit", onBeforeInit);

<static> removeElementsById(schema, contentType, elements, applyToStandardBar)

Removes elements from schema.

Parameters:
Name Type Description
schema Object

the bar schema to be analyzed. If null, the method will use the default bar schema

contentType String

Content type to be used

elements Array

Elements to be found into the schema

applyToStandardBar Boolean

Default is true. Removes elements from the standard bar

applyToMobileBar. Boolean

Default is true. Removes elements from the mobile bar

Returns:
Type
Object
Example
//Set the bottom bar of the video with share and fullscreen only. The first on the left and the second to the right.
var params = {
 	sessId: "asessId",
 	clientId: "aclientId",
 	xcontentId: "acontentId"
 };
 var onBeforeInit = function(playerInstance){
 	//Removes playButton and hdButton from schema bar
		var schema = window.THRONSchemaHelper.getSchema()
		var elements = window.THRONSchemaHelper.removeElementsById(schema, "VIDEO", ["hdButton", "playButton"]);
		//A simple verify: existsElements must false
		var existsElements = window.THRONSchemaHelper.getElementsById(schema, "VIDEO", ["hdButton", "playButton"]).coordinates.length > 0
		var paramsAug = {bars: schema};
 	playerInstance.params(paramsAug);
 };
 window.player = THRONContentExperience("abwmp4", params);
 player.on("beforeInit", onBeforeInit);

<static> addGroupsToBar(schema, contentType, idBar, schemaStandard, schemaMobile)

Define schema elements for a specific content type

Parameters:
Name Type Description
schema Object

the bar schema to be analyzed. If null, this method will use the default bar schema

contentType String

Content type to be used

idBar String

bar to be updated

schemaStandard Object

standard schema for bar "idbar"

schemaMobile Object

mobile schema for bar "idbar"

Returns:
Type
Object
Example
//Set the bottom of the video with  share and fullscreen only. The first on the left and the second on the right
var params = {
 	sessId: "asessId",
 	clientId: "aclientId",
 	xcontentId: "acontentId"
 };
 var onBeforeInit = function(playerInstance){
 	var schema = window.THRONSchemaHelper.getSchema();
		window.THRONSchemaHelper.addGroupsToBar(schema, "VIDEO", "bottom", [{elements: ["shareButton"]}, {resizable:true, elements: []}, {elements: ["fullscreenButton"]}]);
	    var paramsAug = {bars: schema};
 	playerInstance.params(paramsAug);
 };
 window.player = THRONContentExperience("abwmp4", params);
 player.on("beforeInit", onBeforeInit);

<static> insertAfter(schema, contentType, element, elementToAdd, applyToStandardBar, applyToMobileBar)

Insert an element after another (both passed as param)

Parameters:
Name Type Description
schema Object

the bar schema to be analyzed. If null, this method will use the default bar schema

contentType String

Content type to be used

element String

insert after this element

elementToAdd String

element to be inserted

applyToStandardBar Boolean

Default is true. The action will be done for standard elements

applyToMobileBar boolean

Default is true. The action will be done for mobile elements

Example
//add playButton after captionText:
var params = {
 	sessId: "asessId",
 	clientId: "aclientId",
 	xcontentId: "acontentId"
 };
 var onBeforeInit = function(playerInstance){
 	var schema = window.THRONSchemaHelper.getSchema();
		window.THRONSchemaHelper.insertAfter(schema, "VIDEO", "captionText", "playButton");
	    var paramsAug = {bars: schema};
 	playerInstance.params(paramsAug);
 };
 window.player = THRONContentExperience("abwmp4", params);
 player.on("beforeInit", onBeforeInit);

<static> insertBefore(schema, contentType, element, elementToAdd, applyToStandardBar, applyToMobileBar)

Insert an element before another (both passed as param)
//add playButton before captionText
var schema = window.THRONSchemaHelper.getSchema();
window.THRONSchemaHelper.insertBefore(schema, "VIDEO", "captionText", "playButton");

Parameters:
Name Type Description
schema Object

the bar schema to be analyzed. If null, this method will use the default bar schema

contentType String

Content type to be used

element String

insert before this element

elementToAdd String

element to be inserted

applyToStandardBar Boolean

Default is true. The action will be done for standard elements

applyToMobileBar boolean

Default is true. The action will be done for mobile elements


<static> getContentTypeSchema(schema)

Get all the contentType for the schema
var arrayContentTypeschema = window.THRONSchemaHelper.getContentTypeSchema();
window.THRONSchemaHelper.insertBefore(schema, "VIDEO", "captionText", "playButton");

Parameters:
Name Type Description
schema Object

the bar schema to be analyzed. If null, this method will use the default bar schema