Multiple Applications

Primary Application

Thus far in the example we have only looked at the example portal itself, which is running in the primary browser on the STB. This page shows how the primary application can switch between itself and a secondary application, and how it should handle input.

Hole-punching for video

The HTML video element in the primary brower is used for a hole-punching effect. Set the coordinates for the video element, and assign it the CSS property "object-fit:fill". This means that the video will be rendered to the same coordinates in the compositor buffer as the video element. The video element becomes a hole in the primary application, and the video layer underneath will become visible. If the secondary app is in STATE_VISIBLE it will be shown in between the primary and the video. The following two diagrams illustrate this:

Hole punching with secondary in STATE_VISIBLE

Hole punching with secondary in STATE_HIDDEN

Fullscreen Transparency

As the primary application is always visible, a fullscreen video element is used to give the impression of switching applications entirely. The diagram below illustrates this. Here, the example portal, running in the primary application, is composed of one fullscreen video element, and also an orange menu bar. The z-index for the menu bar is set higher than the z-index of the video element, so it is drawn on top. The video element itself is a transparent hole, allowing the lower layers to be shown.

Like above, when the secondary application is hidden, the video will be shown. If the secondary is shown, the portal does not display the menu bar, and only the secondary is seen.

The KreaTV platform manages the Subtitle Renderer layer.

Boot image configuration

The secondary application is added with the kreatv-app-webkit-browser IIP. Please see the separate tutorial on configuring the boot image for multi-application support. A separate example is provided in the SDK at <sdk_root>/examples/example-secondary-app.tgz. It is a demonstration of an OTT service integration, and doesn't do anything beside scroll around in its menu (to show that key input events and focus is working correctly).

Initialization

The example portal, during its initialization, checks the state of the secondary applications. The current technical preview of multi-app provides only one secondary application, but it is likely that several secondary applications will be provided in coming releases. The portal iterates through the secondary applications, checking their state. For applications which have STATE_STOPPED, the portal calls ToiSecondaryApplication::start(). This makes the browser process start, but note that no URL is loaded yet.

initSecondaryApplication: function() {
  this.secondaryBrowser = this.getSecondaryBrowser();

  // iterate over secondary applications, starting them
  var applications = toi.applicationService.getSecondaryApplications();
  for (var i=0; i<applications.length; i++) {
    if (applications[i].getState() ==
        toi.consts.ToiSecondaryApplication.STATE_STOPPED) {
      console.log("starting application " + applications[i].getName());
      applications[i].start();
    }
  }
},

It also adds an event listener for ON_STATE_CHANGED, in case the secondary should crash. If this occurs, it will transition to STATE_STOPPED and the primary can call ToiSecondaryApplication::start().

Switching Applications

When the user clicks on the Video Store icon, it is time for the portal to switch applications. Here it is important to note that the primary application is actually always visible. It needs to do several tasks:

• Make the secondary application visible
• Make itself transparent (partially, or totally)
• Switch input focus, so the secondary receives key input events
• Subscribe to (also receive) some key press event (like the Back button)

The example portal does these things in the following showSecondaryBrowser() function:

showSecondaryBrowser: function() {
  if (!this.secondaryBrowser) {
    this.secondaryBrowser = this.getSecondaryBrowser();
    return;
  }
  this.secondaryBrowser.show(this.getUrl());
  this.secondaryBrowser.setInputFocus();
  this.secondaryBrowser.subscribeKey("BrowserBack");
},

When hiding the secondary application, the portal just needs to call ToiSecondaryApplication::hide(), reset the input focus, and unsubscribe from the key events.

hideSecondaryBrowser: function() {
  if (this.secondaryBrowser.getState() ==
        toi.consts.ToiSecondaryApplication.STATE_VISIBLE) {
    this.secondaryBrowser.hide();
    toi.applicationService.resetInputFocus();
    this.secondaryBrowser.unsubscribeKey("BrowserBack");
  }
},

The URL for the secondary application

The example portal passes a URL to the secondary application in the show() function call. This is read from a custom, user-defined configuration object, apps.secondary.starturl. Passing null causes the secondary to change state to STATE_VISIBLE without loading any URL (preserving the current state).