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 PlaylistsEach 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.
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 }; 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