Additional changes for Samsung Hbb TV

The following additional changes are required to set up the App for Samsung HbbTV:

1. Add the HbbTV requires some additional tags in index.html file of the Application:

   Example HTML changes for Samsung HbbTV integration

   CODE

   <script>
         try {
           window._samsung_console_log_enabled = 1;
           var hbbTvApp = document
             .getElementById("appmgr")
             .getOwnerApplication(document);
           hbbTvApp.privateData.keyset.setValue(
             0x1 + 0x2 + 0x4 + 0x8 + 0x10 + 0x20 + 0x400
           );
           hbbTvApp.privateData.keyset.setValue(0xffff, [
             KeyEvent.VK_INFO,
             KeyEvent.VK_GUIDE,
             KeyEvent.VK_CHANNEL_UP,
             KeyEvent.VK_CHANNEL_DOWN,
             KeyEvent.VK_MENU,
             KeyEvent.VK_RETURN,
             KeyEvent.VK_PLAY,
             KeyEvent.VK_PAUSE,
             KeyEvent.VK_STOP,
             KeyEvent.VK_PLAY_PAUSE,
             KeyEvent.VK_FAST_FWD,
             KeyEvent.VK_REWIND,
             KeyEvent.VK_CHANNELS,
             KeyEvent.VK_VOLUME_UP,
             KeyEvent.VK_VOLUME_DOWN,
             KeyEvent.VK_MUTE,
           ]);
           hbbTvApp.opAppRequestForeground();
         } catch (e) {
           console.log("ERROR " + e);
         }
   </script>

2. Host the build on an HTTP(s) server. Launch the App from the HbbTV

Selecting the plugin development or production mode

Using webpack

In the webpack.config.js file of an application, use DefinePlugin, declare the constant as OTVPLAYER_PROD and set the value as either true or false. DefinePlugin should be in the plugin section of the config file.

• If the OTVPLAYER_PROD value is true, it uses the production build and does not contain logs.

• If the OTVPLAYER_PROD value is false, it uses the debug build and contains logs.

• If the OTVPLAYER_PROD value is undefined, it uses the production build.

plugins: [

     new webpack.DefinePlugin({
            OTVPLAYER_PROD: true,
     }),

     ......

]

Using react-scripts

1. At the root folder, create an .env file. In .env file of the application, create custom environment variables beginning with REACT_APP, declare a constant as REACT_APP_OTVPLAYER_PROD and set the value as either true or false.

2. To use the REACT_APP_OTVPLAYER_PROD value, you must have it defined in the environment. This can be done using two ways: either in your shell or in a .env file.

   • If the REACT_APP_OTVPLAYER_PROD value is true, it uses the production build and does not contain logs.

   • If the REACT_APP_OTVPLAYER_PROD value is false, it uses the debug build and contains logs.

   • If the REACT_APP_OTVPLAYER_PROD value is undefined, it uses the production build.

   JS

   REACT_APP_OTVPLAYER_PROD = true