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 the opy-react-native-<version>-react-otvplayer.zip file and add the module to your project:
   • yarn add <filepath to extracted react-otvplayer>
3. Extract opy-react-native-<version>-examples.zip and copy the examples/basicPlaybackWeb files as described in examples/README.md to your project.
4. Build the App using scripts provided by the CRA system or your custom scripts:
   • yarn build
5. 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 )

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

   Click here to see the example code.

   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>