ekoshell

The ekoshell plugin.

Example 

// in falcon player options
"plugins": {
     "ekoshell": {
         "components": {
             "watermark": true,
             "shareButton": {
                 "type": "twitter"
             }
         },
         "skipEOV": true,
         "muteMessage": {
             "showMuteMessage": false
         }
     }
}

Init Options

options : object

Initialization options for the ekoshell plugin.

options.components.fullscreenButton : object
property

Fullscreen Button.
The Fullscreen Button has 2 behaviors, the first is “fullscreen” which just means it will work as intended and enter the player to fullscreen,
the other behavior is “banner” which will open up the “download the app” banner. the default behavior is “fullscreen” but we override it in some cases when fullscreen is not supported.

Default: {
behavior: 'fullscreen'
}
Properties

Name Type Description
fullscreenButton boolean | object if set to false, hides the fullscreen button
behavior string see above description
icon object icon definitions
icon.maximize iconUrl the icon for maximizing (appears while not in fullscreen)
icon.minimize iconUrl the icon for minimizing (appears while in fullscreen)
order integer order index within the button strip (default: 30)

Example 

"components": {
     "fullscreenButton": {
         behavior: 'fullscreen'
     }
}

options.components.volumeButton : object
property

Volume Button

Properties

Name Type Description
volumeButton boolean | object if set to false, hides the volume button
icon object icon definitions
icon.default iconUrl default icon
icon.muted iconUrl the icon for muted mode
order integer order index within the button strip (default: 20)

options.components.subtitlesButton : object
property

Subtitles Button

Properties

Name Type Description
subtitlesButton boolean | object if set to false, hides the subtitles button
icon object icon definitions
icon.enabled iconUrl icon for when subtitles are disabled
icon.disabled iconUrl icon for when subtitles are enabled
order integer order index within the button strip (default: 10)

options.components.customButtons : object
property

Custom Buttons

Properties

Name Type Description
customButtons Array.<customButtonConfig> an array of customButtons

Example 

{
    id: "myCustomButton1",
    icon: "url_to_file.svg",
    location: "topRight", // false means it isn’t displayed
    order: 40,
},
{
    id: "myCustomButton2",
    icon: "url_to_file.svg",
    location: "bottomRight",
    order: 35
}

options.theme : object
property

Theme

Properties

Name Type Description
theme object configuration for the platform skin
theme.highlightColor string a CSS value for a highlight color
theme.font object an object describing platform fonts
theme.font.title string the name of a font family from Google Fonts to be used for titles
theme.font.paragraph string the name of a font family from Google Fonts to be used for runing text

Example 

{
  "highlightColor": "rgb(255,0,0,0.9)",
  "font": {
     "title": "Roboto",
     "paragraph": "Open Sans"
  }
}

options.components.transport : object
property

Transport controls (checkpoints, skip)

Default: {
checkpointsEnabled: true,
checkpointsEnabledOnMobile: true,
skipForward: false,
skipBackward: false
}
Example 

"components": {
     "transport":{
         "checkpointsEnabled": false
     }
}

options.components.ticker : object
property

Ticker messages

Default: {
checkpointSaved: true,
buffering: true,
skipping: true,
}
Example 

"components": {
     "ticker":{
         "checkpointSaved": false,
         "buffering": true,
         "skipping": true,
     }
}

options.components.watermark : boolean
property

Watermark

Default: true
Example 

"components": {
     "watermark": true
}

options.components.logoButton : object
property

Logo Button

Default: {
color: '#33ffcc',
url: null,
linkout: false
}
Example 

"components": {
     "logoButton": {
         "url": "https://eko.com"
         "linkout": true
     }
}

options.components.shareButton : boolean
property

Share Button

Default: true
Properties

Name Type Description
shareButton boolean | object if set to false, hides the share button
icon object icon definitions
icon.default iconUrl default share icon.
icon.os iconUrl icon to be displayed on iOS devices.
order integer order index within the button strip (default: 10)

Example 

// to disabled
"components": {
     "shareButton": false
}

options.components.share : array
property

Share Buttons ( will be replaced by the shared url)

Default: [
{
platform: 'facebook',
url: 'https://www.facebook.com/sharer/sharer.php?u&#x3D;'
},
{
platform: 'twitter',
url: 'https://twitter.com/intent/tweet?text&#x3D;&related=ekovideo'
}
]

options.components.copyLinkButton : boolean
property

Copy Link Button

Default: true
Example 

"components": {
     "copyLinkButton": true
}

options.components.endScreen : object
property

End Screen Overlay

Default: {
shouldShow: true,
linkout: false,
shouldNavigateToNextVideo: true
}
Example 

"components": {
     "endScreen": {
         "shouldShow": false,
         "shouldNavigateToNextVideo": false
     }
}

options.components.pauseScreen : object
property

Pause Screen Overlay

Default: {
title: true,
subTitle: true,
startOver: true,
watchTime: true,

}
Properties

Name Type Description
title boolean show the project title
subtitle boolean show the the project title
startOver boolean show the “start over” button’
watchTime boolean show the “time to watch” caption
background string a CSS definition for the pause screen background.

Example 

"components": {
     "pauseScreen": {
         "subTitle": false,
         "background": "url(path/to/img.png), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(255,0,0,1) 100%) 100% 100% no-repeat, #002266"
     }
}

options.components.bufferingScreen : object
property

Buffering Screen Overlay

Properties

Name Type Description
backButton boolean show the back button
title boolean show the project title

options.components.backButton : object
property

backButton

Default: {
title: '',
pageUrl: null,
linkout: false,
isStandAlone: true
}
Example 

"components": {
     "backButton": {
         "title": "Explore Stories",
     }
}

options.components.feedback : boolean
property

Feedback

Default: true
Example 

"components": {
     "feedback": false
}

options.eovNextTimer : number
property

Timer Duration for playing next video after reaching the End Of Video experience

Default: 10
Example 

"eovNextTimer": 15

options.skipEOV : boolean
property

Skip End Of Video experience

Default: false
Example 

"skipEOV": true

options.projectInfo : object
property

Project Info - project title and the estimated watch time

Default: {
title: '',
watchTime: 0
}
Example 

"projectInfo": {
     "title": "My Project Name"
     "watchTime": 7
}

options.appUrl : object
property

App URL - when linking to app store

Default: {
iOS: ''
}
Example 

"appUrl": {
     "iOS": "https://appstore.url"
}

options.env : object
property

What Environment is the project playing

Default: {
isEmbed: false,
isPreview: false
}
Example 

"env": {
     "isEmbed": true
}

options.rotationHint : object
property

Rotate Your Screen Hint

Default: {
showRotationHint: true,
hideRotationHintTimer: 0
}
Example 

"rotationHint": {
     "hideRotationHintTimer": 10
}

options.muteMessage : object
property

If player is audio locked (browser limitations) should we show the Mute Message

Default: {
showMuteMessage: true,
muteMessageTimer: 0
}
Example 

"muteMessage": {
     "showMuteMessage": true,
     "muteMessageTimer": 15
}

options.ringerMessage : object
property

If in iOS should we show the Ringer Message, won’t show if muteMessage is disabled

Default: {
showRingerMessage: true,
ringerMessageTimer: 6
}
Example 

"ringerMessage": {
     "showRingerMessage": false
}

options.enableOnboarding : boolean
property

Enables ekoshell onboarding (When enabled, controls are expanded at project start and collapse after a timeout)

Default: true
Example 

(disabling onboarding)
"enableOnboarding": false

Methods

setLocation : string
property

Changes a button’s location or hides it

Param Type Description
buttonId string the button id. Could be “fullscreen”, “volume”, “share”, “subtitles” or the id of a custom button specified in the customButtons array
location string | bool one of the following: “bottomRight”, “topRight”, false

Example 

// show 'myCustomButton1' in the topRight buttonStrip
ekoshell.setLocation('myCustomButton1', 'topRight');

Example 

// hide 'myCustomButton1'
ekoshell.setLocation('myCustomButton1', false);

Definitions

iconUrl : object

A url to an svg file containing the icon. Icons in the button strip should have a viewbox of 27x27 and a size of 27x27

customButtonConfig : object

A configuration of a custom button in a buttonStrip

Properties

Name Type Description
customButtonConfig.id string a unique id for the button
customButtonConfig.label string a textual description of the button (required)
customButtonConfig.icon iconUrl the icon for the button
customButtonConfig.location string can be either “topRight”, “bottomRight” or false (doesn’t appear)
customButtonConfig.order integer order index within the button strip
Rate this page:
☆ ☆ ☆ ☆ ☆
X
Tell us more!