There are common elements within the two platforms' app structures:
A payloaded App's contents look very similar to an App destined to work with a hosted SDK and player location. In the diagrams below, green highlighted folders and files are what makes the payload difference. The configuration and metadata also differ to indicate whether the Web App is found within the App payload or whether it redirects to a hosted site. Each of the key files' contents are described below.
Tizen
Click here to see the Tizen diagram.
Tizen payload
The config.xml here lists the App requirements and privileges, including the permitted navigation domains. The <content> XML field directs the App to the internal index.html.
Click here to see the Tizen payload config.xml.
tizen payload config.xml
XML
<widget xmlns:tizen="http://tizen.org/ns/widgets"
xmlns="http://www.w3.org/ns/widgets" id="" version="1.0.0" height="1080" width="1920" viewmodes="maximized">
<!-- GENERAL -->
<tizen:application id="qUBvniWGU7.otv" package="qUBvniWGU7" required_version="2.3"/>
<name>otvPlayer</name>
<tizen:profile name="tv-samsung"/>
<content src="index.html"/>
<icon src="icon.png"/>
<!-- FEATURES -->
<feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
<!-- METADATA -->
<tizen:metadata key="http://samsung.com/tv/metadata/devel.api.version" value="2.3"/>
<tizen:metadata key="http://samsung.com/tv/metadata/multitasking.support" value="true"/>
<!-- PRIVILEGES -->
<tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
<tizen:privilege name="http://tizen.org/privilege/tv.audio"/>
<tizen:privilege name="http://developer.samsung.com/privilege/drmplay"/>
<tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
<tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<!-- SETTINGS -->
<tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
<!-- SECURITY -->
<access origin="*" subdomains="true"></access>
<tizen:allow-navigation>otvplayer.nagra.com</tizen:allow-navigation>
<access origin="https://otvplayer.nagra.com" subdomains="true"></access>
</widget>
This is supported by the index.html and any JavaScript and CSS needed to support the presentation of the entry page. Our simple example contains minimal text and icons with hyperlinks to the Web Apps within the payload folders.
Click here to see the Tizen payload index.html.
tizen payload index.html
XML
<!DOCTYPE html>
<html lang="en-gb" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nagra webOS Demo App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body><center>
<img src="https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/OpenTV_Player.svg">
<h1>Nagra CONNECT Player Demo App</h1>
<img width="25%" src="https://download.tizen.org/misc/Tizen-Brand/01-Primary-Assets/Lockup/On-Light/01-RGB/Tizen-Lockup-On-Light-RGB.png">
<p>
<a href="webapp-connecttv/index.html"><img src="
https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/Connected_TV.svg">opy-sdk-js Webapp embedded within payload of App</a>
</p>
<p>
<a href="example-code/index.html">opy-sdk-js Example Code embedded within payload of App<img src="
https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/Development_Tools.svg"></a>
</p>
<p>
<a href="dasc/sample_application/index.html"><img src="https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/ENABLE.svg">das-web-client Sample Application embedded within payload of App</a>
</p>
<p>
<a
href="https://otvplayer.nagra.com/demo/html5/latest/connecttv-router/"
>Browse to Hosted versions<img src="https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/Cloud_TV.svg"></a
>
</p></center>
</body>
</html>
Tizen hosted
The config.xml is exactly the same as above. The index.html must carry the registration of remote keys that the applications require.
Click here to see the Tizen hosted index.html.
tizen hosted index.html
XML
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<script type="text/javascript">
if (typeof tizen !== "undefined") {
tizen.tvinputdevice.registerKeyBatch([
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"ColorF0Red",
"ColorF1Green",
"ColorF2Yellow",
"ColorF3Blue",
"ChannelUp",
"ChannelDown",
"MediaPlay",
"MediaPause",
"MediaFastForward",
"MediaRewind",
"MediaStop",
]);
}
window.location.href =
"https://otvplayer.nagra.com/demo/html5/latest/connecttv-router/";
</script>
<body></body>
</html>
webOS
Click here to see the webOS diagram.
webOS payload
The appInfo.json file determines whether this is a Web or Native App via the type field, and the main field directs the App to the index.html file within the App.
Click here to see the webOS payload appInfo.json.
webOS payload appInfo.json
JS
{
"id": "com.nagra.opydemo",
"version": "1.0.0",
"vendor": "Nagra Media UK Ltd",
"type": "web",
"main": "index.html",
"title": "OpenTV Player",
"icon": "icon.png",
"iconColor": "#FFFFFF",
"largeIcon": "largeIcon.png",
"splashBackground": "launchBGImage.png",
"bgImage": "launchBGImage.png",
"uiRevision": 2
}
The index.html then provides the HTML and any JavaScript and CSS needed to support the entry page's presentation. The simple example contains only minimal text and icons with hyperlinks to the Web Apps within the payload folders.
Click here to see the webOS payload index.html.
webOS payload index.html
XML
<!DOCTYPE html>
<html lang="en-gb" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nagra webOS Demo App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body><center>
<img src="https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/OpenTV_Player.svg">
<h1>Nagra CONNECT Player Demo App</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/LG_WebOS_New.svg">
<p>
<a href="webapp-connecttv/index.html"><img src="
https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/Connected_TV.svg">opy-sdk-js Webapp embedded within payload of App</a>
</p>
<p>
<a href="example-code/index.html">opy-sdk-js Example Code embedded within payload of App<img src="
https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/Development_Tools.svg"></a>
</p>
<p>
<a href="dasc/sample_application/index.html"><img src="https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/ENABLE.svg">das-web-client Sample Application embedded within payload of App</a>
</p>
<p>
<a
href="https://otvplayer.nagra.com/demo/html5/latest/connecttv-router/"
>Browse to Hosted versions<img src="https://docs.nagra.com/sites/default/files/svg_icons/icons_blue/Cloud_TV.svg"></a
>
</p></center>
</body>
</html>
webOS hosted
The appInfo.json file will be identical to the payloaded example. The only difference for hosted is that the index.html file directs the App to the hosted URL specified.
Click here to see the webOS hosted index.html.
webOS hosted index.html
XML
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>Loading...</title>
<meta
http-equiv="refresh"
content="0;url=https://otvplayer.nagra.com/demo/html5/latest/connecttv-router/"
/>
</head>
<body></body>
</html>
