Migrating Tizen to TOAST

This topic describes how to convert applications from Tizen to TOAST.

Related Info

Samples

TOAST

To migrate an application from Tizen to TOAST, you must create a TOAST application using the Tizen application as a template, and make the necessary changes in the code.

Some Tizen APIs do not have a TOAST equivalent. To detect when the application is run on a Samsung TV and can use Tizen-specific APIs, see How to detect platform.

Creating a TOAST Application

To migrate a Tizen application to TOAST:

Remove the existing "config.xml" file from the application.

ImportantThe Tizen "config.xml" file is not compatible with TOAST.
Configure the development environment.

Create a TOAST application, using the existing Tizen project as a template.

Use the create command with the --template flag:

# Create TOAST application using an existing Tizen project
cordova create MyTOASTApp --template=../../MyTizenApp
cd MyTOASTApp
npm install ../grunt-cordova-sectv
cp -rf ../grunt-cordova-sectv/sample/* ./
npm install
cordova platform add browser
cordova plugin add ../cordova-plugin-toast

# Run on browser platform
cordova build browser
cordova emulate browser

# Prepare for sectv-orsay platform
grunt sectv-prepare:sectv-orsay

# Prepare for sectv-tizen platform
grunt sectv-prepare:sectv-tizen

Make modifications to the code to use the TOAST API functionalities in the migrated application:
1. Remove the following code from the "index.html" file:
```
<script type="text/javascript" src="$WEBAPIS/webapis/webapis.js"></script>
```
2. Include the "cordova.js" and "toast.js" libraries in the "index.html" file:
```
<script src="cordova.js"></script>
<script src="toast.js"></script>
```
  NoteThe "cordova.js" library must be included before the "toast.js" library.
3. Before using the TOAST APIs, you must wait until Cordova is fully set up (the deviceready event occurs):
```
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  console.log("start the app");
}
```
4. Migrate functionality from Tizen API modules.
  
  The following section presents examples of how to migrate media playback functionalities to TOAST. For information on how to migrate functionality from other Tizen API modules, see the TOAST Wiki.
When you are ready to test the TOAST application, build and package it.

Migrating Media Playback Features

In TOAST, media playback functionalities are handled using the toast.Media and toast.MediaPlugin constructors.

NoteTOAST automatically manages the screensaver. It does not need to be explicitly managed, such as with the setScreenSaver() method of the AVPlay API.

To open media for playback:

Before:
```
webapis.avplay.open('url');
```

After:

var media = toast.Media.getInstance();
media.open('url');

To start media playback:

Before:

webapis.avplay.prepare();
webapis.avplay.setDisplayRect(x, y, width, height);
webapis.avplay.play();
var status = webapis.appcommon.AppCommonScreenSaverState.SCREEN_SAVER_OFF;
webapis.appcommon.setScreenSaver(status, function() {}, function() {});

After:

var elContainer = media.getContainerElement();
elContainer.style.position = 'fixed';
elContainer.style.left = 0 + 'px'; // 'x'
elContainer.style.top = 0 + 'px'; // 'y'
elContainer.style.width = 1920 + 'px'; // 'width'
elContainer.style.height = 1080 + 'px'; // 'height'
document.body.appendChild(elContainer);

media.play();

To stop media playback:

Before:

webapis.avplay.stop();
var status = webapis.appcommon.AppCommonScreenSaverState.SCREEN_SAVER_ON;
webapis.appcommon.setScreenSaver(status, function() {}, function() {});

After:
```
media.stop();
```

To pause media playback:

Before:

webapis.avplay.pause();
var status = webapis.appcommon.AppCommonScreenSaverState.SCREEN_SAVER_ON;
webapis.appcommon.setScreenSaver(status, function() {}, function() {});

After:
```
media.pause();
```

To jump forward during media playback:

Before:

webapis.avplay.jumpForward(10000); // Number of milliseconds to move forward

After:

var curPos = media.getCurrentPosition();
media.seekTo(curPos + 10000); // Position to seek to in milliseconds

To jump backward during media playback:

Before:

webapis.avplay.jumpBackward(10000); // Number of milliseconds to move backward

After:

var curPos = media.getCurrentPosition();
media.seekTo(curPos - 10000); // Position to seek to in milliseconds

To implement event listeners:

Before:

var listener = {
  onbufferingstart: function() {
    console.log('Buffering start.');
  },
  onbufferingprogress: function(percent) {
    console.log('Buffering progress data : ' + data1);
  },
  onbufferingcomplete: function() {
    console.log('Buffering complete.');
  },
  oncurrentplaytime: function(currentTime) {
    console.log('Current Playtime : ' + data1);
  },
  onbufferingcomplete: function() {
    console.log('Buffering complete.');
  },
  onevent: function(eventType, eventData) {
    console.log('event type error : ' + eventType + ', data: ' + eventData);
  },
  onerror: function(eventType) {
    console.log('event type error : ' + eventType);
  },
  onsubtitlechange: function(duration, text, data3, data4) {
    console.log('Subtitle Changed.');
  },  
  ondrmevent: function(drmEvent, drmData) {
    console.log('DRM callback: ' + drmEvent + ', data: ' + drmData);
  },
  onstreamcompleted: function() {
    console.log('Stream Completed');
  }
}
webapis.avplay.setListener(listener);

After:

media.setListener({
  onevent: function(evt) {
    switch (evt.type) {
      case 'STATE':
        console.log('Media State changed: ' + evt.data.oldState + ' -> ' + evt.data.state);
        break;
      case 'DURATION':
        console.log('Media duration updated: ' + evt.data.duration + 'ms');
        break;
      case 'POSITION':
        console.log('Media position updated: ' + evt.data.position + 'ms');
        break;
      case 'BUFFERINGPROGRESS':
        console.log('Media buffering in progress: ' + evt.data.bufferingPercentage + '%');
        if (evt.data.bufferingPercentage >= 100) {
          console.log('Buffering completed');
        }
        break;
      case 'ENDED':
        console.log('Media ended');
        break;
    }
  },
  onerror: function (err) {
    console.error('MediaError occured: ' + JSON.stringify(err));
  }
});

To play streaming, 4K, and DRM-enabled content, the toast.MediaPlugin constructor binds to the toast.Media constructor with specific configuration data. For example:

var media= toast.Media.getInstance();
var mediaPlugin = new toast.MediaPluginHLS();
media.resetPlugin(); 
media.attachPlugin(mediaPlugin);
media.open('http://mydomain.com/video.m3u8');

To play HTTP Live Streaming (HLS) content:

Before:

webapis.avplay.setStreamingProperty('ADAPTIVE_INFO', 'BITRATES=yourBitRates|STARTBITRATE=yourStartBitRate|SKIPBITRATE=yourSkipBitRate');

After:

var HLSData = {
  BITRATES : 'yourBitRates',
  STARTBITRATE : 'yourStartBitRate',
  SKIPBITRATE : 'yourSkipBitRate'
};
var mediaPlugin = new toast.MediaPluginHLS(HLSData);

To play 4K (UHD) video:

Before:

webapis.avplay.setStreamingProperty('SET_MODE_4K', 'TRUE');

After:

var mediaPlugin = new toast.MediaPluginUHD();

To play content with Widevine DRM:

Before:

webapis.avplay.open('url');

var widevineData = 'DEVICE_ID=myDeviceId|DEVICET_TYPE_ID=myDeviceTypeId|STREAM_ID=myStreamId|DRM_URL=http://yourDrmUrl.com|I_SEEK=yourI\_SEEK|CUR_TIME=yourCurTime|PORTAL=yourPortal|USER_DATA=yourUserData'
webapis.avplay.setStreamingProperty('WIDEVINE', wideVineData);

webapis.avplay.prepare();

After:

var wideVineData = {
  DEVICE_ID : 'yourDeviceId', 
  DEVICET_TYPE_ID : 'yourDeviceTypeId', for example, '60'
  STREAM_ID : 'yourStreamId',
  DRM_URL : 'http://yourDrmUrl.com',
  I_SEEK : 'yourI\_SEEK', for example, 'TIME'
  CUR_TIME : 'yourCurTime', for example, 'PTS'
  PORTAL : 'yourPortal',
  USER_DATA : 'yourUserData',
};
var mediaPlugin = new toast.MediaPluginWideVine(wideVineData);
media.attachPlugin(mediaPlugin);

// Widevine data must be set before calling the "open()" method
media.open('url');

To play content with PlayReady DRM:

Before:

var playReadyData = {
  LicenseServer  : 'myLicenseServer',
  CustomData  : 'myCustomData'
};
webapis.avplay.setDrm('PLAYREADY', 'SetProperties', JSON.stringify(playReadyData));

After:

var playReadyData = {
  LicenseServer  : 'myLicenseServer',
  CustomData  : 'myCustomData'
};
var mediaPlugin = new toast.MediaPluginPlayReady(playReadyData);