Music streaming app: Adapted for low-end Samsung and LG TVs

Project recap in three points

The client is:

Large media entertainment company

The solution to adapt is:

Music streaming service platform

Platforms requested:

Smart TV apps for Samsung and LG TVs

Negotiating the project goals

Maintenance cost optimization was key for the client

“Working with the team to adapt our existing application for Samsung and LG Smart TV platforms is a crucial step in streamlining our development process. By unifying the code, we’re ensuring seamless support across multiple platforms while reducing maintenance costs. We’re excited to see how this project is making our team more efficient and our app even more accessible.”

Achieving unified code to eliminate the challenges of multiple code bases

“Acknowledging the challenges posed by maintaining several code bases, we consider it reasonable to move towards code unification. The progress made, with platforms like Sky STBs, Visio, Hisense, Xbox, and Comcast STB now on a unified HTML5 app, is a testament to the client’s commitment to simplifying their platform support.

Bringing Samsung and LG platforms onto the same code base is a crucial next step. However, the challenge remains in ensuring compatibility with older Chromium/WebKit versions required by certain TV models.”

Six key features of the app

Quick login with a QR code
Personalized playlists and albums
Artists and radio stations featured on the homepage
Advanced search and filtering by genres and top tracks
Simple account preference and settings management
Full music streaming player features

Refactor the app for low-end Samsung and LG TVs

Discover risks
Plan reconfigurations
Refactor the code
Transfer to Native Tizen AVPlay
Optimize the apps’ performance
Ensure high quality

Discover risks

To eliminate potential technical constraints, the team proposed analyzing the music distributor’s HTML5 app’s infrastructure, and third-party dependencies and libraries. This aimed to:

Clear identification of libraries to be replaced, enabling the initiation of third-party library confirmation flow.
Decision on whether to replace the custom music player with a native playback solution for Samsung and LG, in collaboration with the client’s team.
Launched MVP app on Tizen 2.4 and WebOS 1.4 with further performance and playback improvements based on the stage results.

Build a reconfiguration plan

Analyze the current build system to decide on the integration of low-end devices.
Investigate the existing autotest framework.
Prepare a broader environment, including devices with the current code base already in production.

Refactor the code for low-end device compatibility

Replace outdated polyfills to enable support for newer code features on older browsers.
Downgrade specific libraries that no longer support the replaced polyfills.
Analyze CSS to ensure full support for low-end TVs.
Refactor code to support updated libraries, CSS, and polyfills.

Transfer to Native Tizen AVPlay

Configure playback setup and stream types for Tizen.
Set up DRM configuration.
Create controls and interaction logic.
Adjust playback settings, including retries, quality, and buffering size.
Implement background playback.
For packaged Tizen apps, reconfigure package builds into a hybrid format if necessary.

Optimize the apps’ performance

Remove animations as the major bottleneck on low-end devices.
Remove shadows, complex gradients, and unsupported style properties for older devices.
Perform additional analysis and refactor code for better performance.

Ensure quality testing

Conduct full regression testing on targeted Samsung and LG TVs.
Perform regression testing on the client’s existing platforms.
Address any defects found during regression testing.

Optimizing code maintenance through its modularization

The team optimized code maintenance by splitting the code into two distinct versions, ensuring better compatibility and support management. Thus, the team improved long-term maintenance efficiency, isolated device-specific issues, and ensured smooth performance across various platforms.

Legacy apps

Launched on Samsung TVs (Chromium 47-63) and LG TVs (Chromium 53).
Focused on providing support exclusively for these devices, with no ongoing updates or support planned for future platforms.

New device apps

Launched on Samsung TVs (Chromium 69+) and LG TVs (Chromium 68+).
Continued updates and improvements for newer device generations with backwards compatibility support.

Oxagile's expert advice for low-end device compatibility

Adapting the existing code to work with older versions of Tizen and WebOS was a challenging task. The combination of working within the constraints of web-hosted app requirements, especially with Samsung’s restrictions, and the need to support outdated Chromium versions meant we had to make some non-obvious code modifications. But through Oxagile’s recommendations backed by real-life best practices, we were able to tackle these challenges and deliver the solution that met the client’s needs.

Challenge 1: Node modules compatibility for low-end devices

Run all node_modules through Babel to convert them into ES5 code for better support on low-end devices.

Challenge 2: Huge app size

Use a separate webpack.config for older operating systems to avoid the raise of the app’s size.

Challenge 3: UI performance and animation

Remove CSS-based animations on low-end TVs by creating separate style files and using webpack to load them accordingly.

Challenge 4: Caching collection

Carefully handle cache cleaning and memorization to ensure proper cache management, as low-end TVs lack automatic handling.

Challenge 5: Large page load and memory usage

Implement lazy loading for large pages and consider using react-window to render only visible areas to optimize memory usage and prevent crashes.

Do you think you may face similar challenges?

Let’s talk about the specifics of your streaming app for low-end devices.

Aligning with Samsung’s Content Security Policy

Content security

Inline scripts are not permitted in Tizen apps due to Samsung’s Content Security Policy (CSP), as they expose the app to potential attacks.

What did we do?

The team identified and removed inline scripts in the client’s Tizen app. We used external .js files to maintain security, as these files are more difficult to manipulate, especially when minified.

App testing for unparalleled quality

Smooth cross-platform operation

One of the critical aspects of the QA process was performing cross-device testing. It was essential to test the application across as many devices, Chromium versions, and Smart TV versions as possible to ensure consistent behavior and functionality.

Time-efficient testing process

The QA Engineer made effective use of developer tools to launch the project, inspect code errors, and gather console outputs. This approach not only accelerated the testing process but also helped the development team quickly identify issues, ultimately saving valuable time.

Meeting the high industry standards

Each identified bug was triaged according to its severity. All bugs categorized as major and higher were promptly addressed and fixed by the development team. This thorough approach ensured that the application was ready to meet the standards required to pass Smart TV market reviews, providing a smooth and functional user experience.

Project results

The project successfully met its primary objective, with the Smart TV apps being merged, tested, and handed over to the client’s development team for ongoing maintenance. Additionally, the applications were successfully launched on both the Samsung and LG app stores, marking a key milestone in the project’s completion.