{"id":70887,"date":"2025-03-30T15:30:04","date_gmt":"2025-03-30T10:00:04","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=70887"},"modified":"2025-04-03T09:25:51","modified_gmt":"2025-04-03T03:55:51","slug":"porting-samsung-lg-html-react-app-to-vizio-key-modifications","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/porting-samsung-lg-html-react-app-to-vizio-key-modifications\/","title":{"rendered":"Porting Samsung\/LG HTML &amp; React App to Vizio: Key Modifications"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>Adapting a React-based application originally built for Samsung&#8217;s Tizen OS or LG&#8217;s webOS to run on Vizio&#8217;s SmartCast platform requires modifications to align with its Chromium-based HTML5 environment. Developers must address differences in runtime behavior, packaging formats, platform-specific APIs, and hardware capabilities. This blog outlines the key technical adjustments for a smooth transition and optimal performance on Vizio SmartCast.<\/p>\n<h2>1. Platform Differences &amp; Key Considerations<\/h2>\n<h6><\/h6>\n<table style=\"width: 100%; border-collapse: collapse; border-style: solid; border-color: #e3e3e3; height: 141px;\">\n<tbody>\n<tr style=\"border-collapse: collapse; background-color: #d71b7f;\">\n<th style=\"width: 20.5263%; border-style: solid; border-color: #adadad; text-align: center; vertical-align: middle; height: 45px;\" scope=\"row\"><span style=\"color: #ffffff;\">Feature<\/span><\/th>\n<th style=\"width: 25.9869%; border-style: solid; border-color: #adadad; text-align: center; vertical-align: middle; height: 45px;\" scope=\"row\"><span style=\"color: #ffffff;\"> Samsung (Tizen)<\/span><\/th>\n<th style=\"width: 26.0526%; border-style: solid; border-color: #adadad; text-align: center; vertical-align: middle; height: 45px;\" scope=\"row\"><span style=\"color: #ffffff;\">LG (WebOS)<\/span><\/th>\n<th style=\"width: 27.4342%; border-style: solid; border-color: #adadad; text-align: center; vertical-align: middle; height: 45px;\" scope=\"row\"><span style=\"color: #ffffff;\">Vizio (SmartCast)<\/span><\/th>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 20.5263%; border-style: solid; border-color: #adadad; background-color: #e6e6e6; height: 24px; text-align: center; vertical-align: middle;\"><strong><span style=\"color: #000000;\">App Deployment<\/span><\/strong><\/td>\n<td style=\"width: 25.9869%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">Installed via Tizen Studio or Tizen Store<\/span><\/td>\n<td style=\"width: 26.0526%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">Installed via webOS Developer Mode or LG Content Store<\/span><\/td>\n<td style=\"width: 27.4342%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">Hosted on a remote web server (no direct installation)<\/span><\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 20.5263%; border-style: solid; border-color: #adadad; background-color: #e6e6e6; height: 24px; text-align: center; vertical-align: middle;\"><strong><span style=\"color: #000000;\"> Packaging\/ Structure<\/span><\/strong><\/td>\n<td style=\"width: 25.9869%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">Uses <code>.wgt<\/code> packages include specific configuration files (e.g., <code>config.xml<\/code>)<\/span><\/td>\n<td style=\"width: 26.0526%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">Uses <code>.ipk<\/code> packaging, configuration via <code>appinfo.json<\/code>, and related metadata<\/span><\/td>\n<td style=\"width: 27.4342%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">HTML5\/JavaScript app hosted on a web server (minimal packaging requirements)<\/span><\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 20.5263%; border-style: solid; border-color: #adadad; background-color: #e6e6e6; height: 24px; text-align: center; vertical-align: middle;\"><strong><span style=\"color: #000000;\">API Support<\/span><\/strong><\/td>\n<td style=\"width: 25.9869%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">Tizen-specific APIs (e.g., <code>webAPIs, avplay, tvinputdevice<\/code>)<\/span><\/td>\n<td style=\"width: 26.0526%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">webOS-specific APIs, support for Enact UI components<\/span><\/td>\n<td style=\"width: 27.4342%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">Standard HTML5 and ECMAScript features, limited proprietary<\/span><\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 20.5263%; border-style: solid; border-color: #adadad; background-color: #e6e6e6; height: 24px; text-align: center; vertical-align: middle;\"><strong><span style=\"color: #000000;\">Navigatio<\/span><span style=\"color: #000000;\">n<\/span><\/strong><\/td>\n<td style=\"width: 25.9869%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\"><code>tizen.tvinputdevice<\/code><\/span><\/td>\n<td style=\"width: 26.0526%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\"><code>window.webOS<\/code><\/span><\/td>\n<td style=\"width: 27.4342%; border-style: solid; border-color: #adadad; height: 24px; text-align: center; vertical-align: middle;\"><span style=\"color: #000000;\">Standard HTML5 APIs<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Key Note:<\/strong> Vizio does not support Tizen or webOS-specific APIs, so developers must use standard HTML5 and JavaScript instead.<\/p>\n<h2>2. Codebase Refactoring<\/h2>\n<p>For a comprehensive guide on starting initial app development, refer to <a href=\"https:\/\/www.tothenew.com\/blog\/vizio-smart-tv-a-comprehensive-guide-to-start-initial-app-development\/\">this blog<\/a>.<\/p>\n<h3><strong>File Structure Adjustments<\/strong><\/h3>\n<ul>\n<li><strong>Samsung\/LG:<\/strong> Includes platform-specific config files (Tizen\u2019s <code>config.xml<\/code> or LG\u2019s <code>appinfo.json<\/code>).<\/li>\n<li><strong>Vizio: <\/strong>Developers can use the same directory structure of Samsung\/LG by removing or refactoring proprietary configuration files to align with SmartCast deployment guidelines. Alternatively, they can consolidate assets (HTML, CSS, JavaScript) into a standard web directory structure.<\/li>\n<\/ul>\n<h3>Dependency Management<\/h3>\n<ul>\n<li>Remove proprietary dependencies like Tizen\u2019s webapis or webOS Luna Service calls.<\/li>\n<li>Replace with standard libraries that are universally supported by modern browsers.<\/li>\n<\/ul>\n<h3>Mandatory code Modifications for Vizio<\/h3>\n<p>After integrating the Companion Library, developers must update the following code to enable these functionalities.<\/p>\n<ul>\n<li>\n<h4><strong>Application Exit<\/strong><\/h4>\n<\/li>\n<\/ul>\n<pre style=\"padding-left: 40px;\">window.VIZIO.exitApplication()<\/pre>\n<ul>\n<li>\n<h4><strong>Updating Key Event Handling<\/strong><\/h4>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\">If <strong><code>tizen.tvinputdevice<\/code><\/strong> (Samsung) or <strong><code>window.webOS<\/code><\/strong> (LG) is used for key event detection, replace it with standard JavaScript event listeners.<\/p>\n<pre style=\"padding-left: 40px;\">useEffect(() =&gt; {\r\n   const handleKeyDown = event =&gt; {\r\n       if (event.key === \"Enter\") console.log(\"Enter pressed\");\r\n   };\r\n   document.addEventListener(\"keydown\", handleKeyDown);\r\n   return () =&gt; document.removeEventListener(\"keydown\", handleKeyDown);\r\n}, []);<\/pre>\n<ul>\n<li>\n<h4><strong>Accessibility Support<\/strong><\/h4>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\">Once the companion library is integrated (<a href=\"https:\/\/www.tothenew.com\/blog\/vizio-smart-tv-a-comprehensive-guide-to-start-initial-app-development\/\">library integration guide<\/a>), the ChromeVox text-to-speech accessibility library does not need to be integrated separately.<\/p>\n<h4 style=\"padding-left: 40px;\">Text-to-Speech Functions and Events:<\/h4>\n<pre style=\"padding-left: 40px;\">\/\/To stop a TTS command:\r\nwindow.VIZIO.Chromevox.play(\"Hello!\");\r\n\r\n\/\/To stop a TTS command:\r\nwindow.VIZIO.Chromevox.play(\" \");<\/pre>\n<h4 style=\"padding-left: 40px;\">Closed Captioning:<\/h4>\n<pre style=\"padding-left: 40px;\">\/\/Get Closed Captioning status \r\nwindow.VIZIO.setClosedCaptionHandler(callbackFunction) \r\n\r\n\/\/Closed Caption Style \r\nwindow.VIZIO.getClosedCaptionStyles(callbackFunction) \r\n\/\/Ex: \r\nwindow.VIZIO.getClosedCaptionStyles(function(captionStyleObj){ console.log(captionStyleObj) });<\/pre>\n<ul>\n<li>\n<h4>Device Information &amp; Connectivity<\/h4>\n<\/li>\n<\/ul>\n<h4 style=\"padding-left: 40px;\">Get Device ID:<\/h4>\n<pre style=\"padding-left: 40px;\">window.VIZIO.getDeviceId(cb)\r\n\/\/Ex:\r\nwindow.VIZIO.getDeviceId(function(deviceId){\r\n   console.log(\"Unique Device Id: \" + deviceId)\r\n})<\/pre>\n<h4 style=\"padding-left: 40px;\">Retrieve Device Information:<\/h4>\n<pre style=\"padding-left: 40px;\">window.VIZIO.getDeviceInformation() \r\n\/\/Example Output: \r\n{ \r\n\"MODEL_NAME\": \"D43fM-K04\", \r\n\"CAPABILITIES\": { \r\n   \"VIZIO_PAY_CAPABLE\": true, \/\/Capable of VIZIO Account APIs \r\n   \"VIZIO_PLAN_BUNDLES_CAPABLE\": true, \/\/Capable of VIZIO Account Bundle Plan Purchases \r\n}, \r\n\"SYSTEM_INFO\": { \r\n   \"MODEL_GROUP\": 335, \r\n   \"MODEL_NAME\": \"D43fM-K04\", \r\n   \"SERIAL_NUMBER\": \"00LBVFK5KX00086\", \r\n   \"SERIES\": \"D\", \"SIZE\": 43, \/\/Screen Size \r\n   \"VERSION\": \"3.710.30.2-1\", \/\/Firmware Version \r\n   \"DIID\": \"4317801f-fa10-4283-95bf-e8c235384b2a\", \r\n   \"CHIPSET_NAME\": \"5583\" }, \r\n   \"SC_INFO\": \"partner-dev 99.11.1\"\r\n }<\/pre>\n<h4 style=\"padding-left: 40px;\"><strong>Detect Connection Status:<\/strong><\/h4>\n<pre style=\"padding-left: 40px;\">window.addEventListener('offline', function(e) {\r\n    console.log('The display is offline');\r\n});\r\nwindow.addEventListener('online', function(e) {\r\n    console.log('The display is online');\r\n});<\/pre>\n<h4 style=\"padding-left: 40px;\">Device Language Handler:<\/h4>\n<pre style=\"padding-left: 40px;\">window.VIZIO.setDeviceLanguageHandler(cb) \r\n\/\/Example: \r\nwindow.VIZIO.setDeviceLanguageHandler(function(deviceLanguage){ \r\n   console.log(\"setDeviceLanguageHandler language: \"+ deviceLanguage) \r\n});<\/pre>\n<h2><strong>3. Required Features for Certification<\/strong><\/h2>\n<ul>\n<li><strong>Performance Standards:<\/strong>\n<ul>\n<li>Splash page within 10 seconds, Ready to navigate at 15 seconds<\/li>\n<li>The player launches within 5 seconds, and starts playback within 10 seconds<\/li>\n<li>The user should not be stuck on a loading screen for more than 3 seconds<\/li>\n<\/ul>\n<\/li>\n<li><strong>Text-to-Speech (TTS):<\/strong> Must be available across all screens and settings persist on app launch.<\/li>\n<li><strong>Closed Captions (CC): <\/strong>Available on all content, supports remote, TV settings, and in-app options.<\/li>\n<li><strong>Parental Controls:<\/strong> Required for mature\/unrated content, with enable\/disable options and content blocking when activated.<\/li>\n<li><strong>Geo-Filtering: <\/strong> Display a warning screen for unsupported locations and configure settings for Canada and Mexico if applicable.<\/li>\n<li><strong>Quality of Service (QoS): <\/strong> Ensure support for HD, FHD, UHD, Bitstream Audio, Alternate Audio, Dolby Vision, and HDR10.<\/li>\n<li><strong>VIZIO Companion Library &amp; API Validation:<\/strong> Integrate the VIZIO companion library, bind to events after VIZIO_LIBRARY_DID_LOAD, implement the Content Change API, and ensure IFA API support for apps with advertising.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Porting Samsung\/LG Smart TV apps to Vizio requires removing platform-specific APIs and adopting standard <a href=\"https:\/\/www.tothenew.com\/digital-engineering\/web-development\">web<\/a> technologies like HTML5, JavaScript, and React hooks. Following these modifications ensures cross-platform compatibility and improved maintainability for a seamless user experience on Vizio SmartCast.<\/p>\n<p>Looking for a web development partner? <a href=\"https:\/\/www.tothenew.com\/contact-us\">Feel free to talk<\/a> to our experts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Adapting a React-based application originally built for Samsung&#8217;s Tizen OS or LG&#8217;s webOS to run on Vizio&#8217;s SmartCast platform requires modifications to align with its Chromium-based HTML5 environment. Developers must address differences in runtime behavior, packaging formats, platform-specific APIs, and hardware capabilities. This blog outlines the key technical adjustments for a smooth transition and [&hellip;]<\/p>\n","protected":false},"author":1972,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":151},"categories":[3477],"tags":[4661,7154,3629,3476,6532,6545],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/70887"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1972"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=70887"}],"version-history":[{"count":27,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/70887\/revisions"}],"predecessor-version":[{"id":71392,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/70887\/revisions\/71392"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=70887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=70887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=70887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}