Integrating the plugin for Web and HbbTV

Ensure your standard React Native Web project (basic-playback-web) is ready, and your Samsung HbbTV device is set up for development.

1. Create a project using the getting started guide at 

   https://necolas.github.io/react-native-web/docs/installation/

   .
   Make sure that the following dependencies are met:

   • react: 16.13.1

   • react-dom: 16.13.1

   • react-native-web: 0.14.13

2. Extract and unzip the following files from the release bundle provided:

   • React Native OTVPlayer module (opy-react-native-<version>-react-otvplayer.zip).

   • React Native OTVPlayer examples (opy-react-native-<version>-examples.zip)

3. Add the React Native OTVPlayer to your RN project:

   • yarn add <filepath to extracted react-otvplayer>

4. Copy the files from extracted examples/basicPlaybackWeb as described in examples/README.md to your project.

5. Build the App using scripts provided by the CRA system or your custom scripts:

   • yarn build

6. Host the build on an HTTP(s) server. Launch the App from the HbbTV / PC browser (Use the Play/Pause RCU keys for TV OR p/space Keyboard keys on PC browser )

7. Add the following tags to the index.html file.

   Click here to see the example code.

   <object
         id="appmgr"
         type="application/oipfApplicationManager"
         style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px">
   </object>
   <div
         style="
           width: 100%;
           height: auto;
           position: fixed;
           left: 0px;
           top: 0px;
           outline: transparent;
           -ant-user-input: disabled;
           -ant-highlight-colour: transparent;">
        <div
           id="root"
           style="position: absolute; top: 0; left: 0; width: 100%; height: auto">
        </div>
   </div>
   <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>