Tizen Implementation (Beta)

Sourcepoint's Tizen solution enables your organization to launch an OTT message campaign and collect end-user consent on Tizen OTT devices. In this article, we will cover how to implement our web-based solution for Tizen OTT devices.

If your organization is interested in implementing a native client Tizen solution, click here.

Requirements

In order to successfully utilize Sourcepoint's Tizen solution your organization will need to satisfy the following requirements:

  • OTT property with configured message campaign

  • Access to Tizen SDK

Sourcepoint's Tizen solution is currently in closed beta. In order to participate and access the Tizen SDK, please contact your Account Manager.

Import project

When granted access to Sourcepoint's Tizen SDK, clone the repo into your local workspace directory and:

  1. In Tizen Studio click File > Import menu item

  2. Choose the directory where you have just cloned the repo

  3. Select project to import from the list

Configure client details

The cloned files will allow your organization to demo an OTT message tied to a Sourcepoint controlled property. In this section, we will cover the necessary steps to edit the details of the cloned files to surface your organization's OTT message campaign.

index.html

Replace the accountId and propertyHref parameters in the index.html file with your account specific information.

<script type="text/javascript">
window._sp_queue = [];
window._sp_ = {
config: {
accountId: CLIENT_ACCOUNT_ID,
baseEndpoint: 'https://cdn.privacy-mgmt.com',
propertyHref: 'PROPERTY_NAME',
ccpa: { },
gdpr: { }
}
}
</script>
<script src="https://cdn.privacy-mgmt.com/unified/wrapperMessagingWithoutDetection.js"></script>

Additionally, to add event listeners to make the remote control work, the following script can be included in the index.html file:

<script type="application/javascript">
function Navigation(e){e=e||{},this.viewportModal=e.viewport||"[id^='sp_message_iframe_']",this.tvKey={KEY_ENTER:13,KEY_PAUSE:19,KEY_LEFT:37,KEY_UP:38,KEY_RIGHT:39,KEY_DOWN:40,KEY_0:48,KEY_1:49,KEY_2:50,KEY_3:51,KEY_4:52,KEY_5:53,KEY_6:54,KEY_7:55,KEY_8:56,KEY_9:57,KEY_EMPTY:189,KEY_RED:403,KEY_GREEN:404,KEY_YELLOW:405,KEY_BLUE:406,KEY_RW:412,KEY_STOP:413,KEY_PLAY:415,KEY_REC:416,KEY_FF:417,KEY_CH_UP:427,KEY_CH_DOWN:428,KEY_VOL_UP:447,KEY_VOL_DOWN:448,KEY_MUTE:449,KEY_INFO:457,KEY_GUIDE:458,KEY_RETURN:10009,KEY_SOURCE:10072,KEY_CHLIST:10073,KEY_MENU:10133,KEY_TOOLS:10135,KEY_ASPECT:10140,KEY_EMANUAL:10146,KEY_EXIT:10182,KEY_PRECH:10190,KEY_MTS:10195,KEY_3D:10199,KEY_TTX_MIX:10200,KEY_CAPTION:10221,KEY_SEARCH:10225,KEY_SOCCER:10228,KEY_REWIND_:10232,KEY_FF_:10233,KEY_PLAY_PAUSE:10252,KEY_EXTRA:10253},this.onLoad()}Navigation.prototype={onLoad:function(){this.registerKey("0"),this.registerKey("1"),this.bindEvents()},getViewportWindow:function(){const e=document.querySelector(this.viewportModal);return!!e&&e.contentWindow},getActiveElement:function(e=document.activeElement){const t=e.shadowRoot,i=e.contentDocument;return t&&t.activeElement?this.getActiveElement(t.activeElement):i&&i.activeElement?this.getActiveElement(i.activeElement):e},triggerClick:function(){const e=this.getActiveElement();let t=new Event("keydown",{bubbles:!0,cancelable:!0});t.keyCode=this.tvKey.KEY_ENTER,"font-weight: normal;"===e.style.cssText&&(t=new KeyboardEvent("keypress",{key:"Enter",bubbles:!0,charCode:0,keyCode:this.tvKey.KEY_ENTER})),e.dispatchEvent(t)},registerAllKey:function(){let e,t=window.tizen.tvinputdevice.getSupportedKeys();for(e=0;e<t.length;e+=1){try{this.registerKey(t[e].name)}catch(i){logger.error("[registerAllKey] Failed to register "+t[e].name)}this.tvKey[t[e].code]=t[e].name}logger.debug("[registerAllKey] Register all supported keys. [available:"+t.length+"; registered:"+e+"]")},registerKey:function(e){window.tizen.tvinputdevice.registerKey(e)},unregisterKey:function(e){window.tizen.tvinputdevice.unregisterKey(e)},onKeyDown:function(e){const t=tileNavigation.getViewportWindow();switch(e.keyCode){case tileNavigation.tvKey.KEY_ENTER:t&&tileNavigation.triggerClick();break;case tileNavigation.tvKey.KEY_EXIT:window.tizen.application.getCurrentApplication().exit();break;case tileNavigation.tvKey.KEY_1:logger.toolbarToggle();break;case tileNavigation.tvKey.KEY_0:window.location.reload();break;default:if(t){const i=new Event("keydown",{bubbles:!0,cancelable:!0});i.currentTarget=e.currentTarget,i.keyCode=e.keyCode,t.dispatchEvent(i)}}},bindEvents:function(){window.addEventListener("keydown",this.onKeyDown)}};
var tileNavigation,DemoCMP={},logger=new Logger({debugMode:!0});DemoCMP.LoadCMP=function(){tileNavigation=new Navigation;try{logger.debug("Widget version: "+window.tizen.application.getAppInfo().version)}catch(o){logger.debug(o)}},window.onload=DemoCMP.LoadCMP();
</script>

In the navigation.js file, you organization will be able to configure the methods for your project. In the table below, please find the available methods for your Tizen project.

Note: These methods are already configured in the demo file.

Method

Description

onLoad

runs on startup, trigger registerAllKey and bindEvents functions

getViewportWindow

get window object of an iframe

getActiveElement

get an active element of the document

triggerClick

handle enter button pressed event

registerAllKey

register all available keys of a remote control

registerKey

register a button of a remote control by key name

unregisterKey

unregister a button of a remote control by key name

onKeyDown

handle pressed keys of a remote

bindEvents

add event listener from a remote control

Run Tizen simulation

To test your configuration (or the demo configuration) in the Tizen simulator, right-click the project and navigate to Run As > Tizen Web Simulator Application (Samsung TV).

If successful, your OTT message campaign will be surfaced in the simulator.