Porting Samsung/LG HTML & React App to Vizio: Key Modifications

Introduction

Adapting a React-based application originally built for Samsung’s Tizen OS or LG’s webOS to run on Vizio’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.

1. Platform Differences & Key Considerations

Key Note: Vizio does not support Tizen or webOS-specific APIs, so developers must use standard HTML5 and JavaScript instead.

2. Codebase Refactoring

For a comprehensive guide on starting initial app development, refer to this blog.

File Structure Adjustments

• Samsung/LG: Includes platform-specific config files (Tizen’s config.xml or LG’s appinfo.json).
• Vizio: 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.

Dependency Management

• Remove proprietary dependencies like Tizen’s webapis or webOS Luna Service calls.
• Replace with standard libraries that are universally supported by modern browsers.

Mandatory code Modifications for Vizio

After integrating the Companion Library, developers must update the following code to enable these functionalities.

• Application Exit

window.VIZIO.exitApplication()

• Updating Key Event Handling

If tizen.tvinputdevice (Samsung) or window.webOS (LG) is used for key event detection, replace it with standard JavaScript event listeners.

useEffect(() => {
   const handleKeyDown = event => {
       if (event.key === "Enter") console.log("Enter pressed");
   };
   document.addEventListener("keydown", handleKeyDown);
   return () => document.removeEventListener("keydown", handleKeyDown);
}, []);

• Accessibility Support

Once the companion library is integrated (library integration guide), the ChromeVox text-to-speech accessibility library does not need to be integrated separately.

Text-to-Speech Functions and Events:

//To stop a TTS command:
window.VIZIO.Chromevox.play("Hello!");

//To stop a TTS command:
window.VIZIO.Chromevox.play(" ");

Closed Captioning:

//Get Closed Captioning status 
window.VIZIO.setClosedCaptionHandler(callbackFunction) 

//Closed Caption Style 
window.VIZIO.getClosedCaptionStyles(callbackFunction) 
//Ex: 
window.VIZIO.getClosedCaptionStyles(function(captionStyleObj){ console.log(captionStyleObj) });

• Device Information & Connectivity

Get Device ID:

window.VIZIO.getDeviceId(cb)
//Ex:
window.VIZIO.getDeviceId(function(deviceId){
   console.log("Unique Device Id: " + deviceId)
})

Retrieve Device Information:

window.VIZIO.getDeviceInformation() 
//Example Output: 
{ 
"MODEL_NAME": "D43fM-K04", 
"CAPABILITIES": { 
   "VIZIO_PAY_CAPABLE": true, //Capable of VIZIO Account APIs 
   "VIZIO_PLAN_BUNDLES_CAPABLE": true, //Capable of VIZIO Account Bundle Plan Purchases 
}, 
"SYSTEM_INFO": { 
   "MODEL_GROUP": 335, 
   "MODEL_NAME": "D43fM-K04", 
   "SERIAL_NUMBER": "00LBVFK5KX00086", 
   "SERIES": "D", "SIZE": 43, //Screen Size 
   "VERSION": "3.710.30.2-1", //Firmware Version 
   "DIID": "4317801f-fa10-4283-95bf-e8c235384b2a", 
   "CHIPSET_NAME": "5583" }, 
   "SC_INFO": "partner-dev 99.11.1"
 }

Detect Connection Status:

window.addEventListener('offline', function(e) {
    console.log('The display is offline');
});
window.addEventListener('online', function(e) {
    console.log('The display is online');
});

Device Language Handler:

window.VIZIO.setDeviceLanguageHandler(cb) 
//Example: 
window.VIZIO.setDeviceLanguageHandler(function(deviceLanguage){ 
   console.log("setDeviceLanguageHandler language: "+ deviceLanguage) 
});

3. Required Features for Certification

• Performance Standards:
  • Splash page within 10 seconds, Ready to navigate at 15 seconds
  • The player launches within 5 seconds, and starts playback within 10 seconds
  • The user should not be stuck on a loading screen for more than 3 seconds
• Text-to-Speech (TTS): Must be available across all screens and settings persist on app launch.
• Closed Captions (CC): Available on all content, supports remote, TV settings, and in-app options.
• Parental Controls: Required for mature/unrated content, with enable/disable options and content blocking when activated.
• Geo-Filtering: Display a warning screen for unsupported locations and configure settings for Canada and Mexico if applicable.
• Quality of Service (QoS): Ensure support for HD, FHD, UHD, Bitstream Audio, Alternate Audio, Dolby Vision, and HDR10.
• VIZIO Companion Library & API Validation: 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.

Conclusion

Porting Samsung/LG Smart TV apps to Vizio requires removing platform-specific APIs and adopting standard web 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.

Looking for a web development partner? Feel free to talk to our experts.