Platform Support: LG WebOS 4 (Legacy Chromium) Compatibility Fixes

[panctronic]

Currently, the Ontime client fails to load and render correctly on LG WebOS 4 (firmware 4.0.1-169). This platform uses an older embedded Chromium engine (roughly Chrome 53–56) that does not support the modern web standards ontime relies on.

Impact
When attempting to run the client on LG WebOS 4, users experience:

• Total App Failure: The app crashes before React can even mount due to unrecognized modern JavaScript syntax.
• Runtime Errors: Data fetching and text resizing fail due to missing browser APIs.
• Severe Visual Breakage: Layouts are squished with no spacing, overlays (like the blackout screen and messages) do not appear, and text sizing is incorrect.

Reproduction Environment

• Hardware: Tested on an LG 22SM3G-B (21.5" Smart Signage Display)
• OS: LG WebOS 4 (Firmware 4.0.1-169) (latest at time of testing).
• Configuration: Out-of-the-box settings.
• Launch Method: Utilizing the native "Play via URL" feature, pointed directly at the timer view (http://$ONTIME:4001/timer).

Root Causes & Proposed Fixes

• JavaScript Compilation (ES2015+): The current build emits modern syntax (arrow functions, classes, const/let) which the legacy engine rejects.
  • Fix: Implement a legacy build step (via @vitejs/plugin-legacy) to transpile the output down to ES5 for older browsers.
• Missing Web APIs: The legacy browser lacks support for AbortController and ResizeObserver.
  • Fix: Introduce standard polyfills for these APIs during legacy builds.
• Modern CSS Incompatibilities: The legacy engine silently ignores modern CSS features such as gap, inset, clamp(), min(), and color-mix(). Additionally, 100vh calculates incorrectly on this specific display.
  • Fix: Provide explicit CSS fallbacks (e.g., standard margins instead of gap, explicit top/bottom/left/right instead of inset, px fallbacks for responsive sizing) and inject a small inline script to accurately calculate viewport height.

Scope & Safety

• Backward Compatible: The fixes consist purely of Vite build configuration updates and CSS/JS fallbacks. Modern browsers will continue to receive the optimized, modern build and should be completely unaffected.

[cpvalente]

Hi!

I agree that improving compatibility is great.
With such an old chrome version it may be more of a challenge than what it seems suggested here and would take some testing.

Could you try and configure the legacy build in vite and test with your screens?

We would welcome a user PR to address this

[panctronic]

The attached draft PR is mostly functional, though I have primarily tested it only on the timer view. The "progress bar" on the timer view is still missing the white moving progress bar, but the rest of the functionality seems to accurately mirror a modern browser.