Work / Bibel TV

Bibel TV

One code base. Four runtimes. One editorial team behind all of them.

The brief

The brief

Relaunch Bibel TV's television offering completely: a Mediathek their audience can search, an EPG, four livestreams, and advertising that pays for it — on every set their audience already owns.

The constraint

Four runtimes, one editorial team, one budget, one release schedule.

The alternative quote they would otherwise have received was four separate builds, four submission processes, and an editorial team learning four back ends. For a broadcaster of this size that is not merely expensive; it is the reason multi-platform projects stall after the second platform.

Architecture

Targets

  • HbbTV browser runtime
    URL + Content-Type
    no store
  • Samsung Tizen Chromium runtime
    .wgt
    Seller Office
  • LG webOS Chromium runtime
    .ipk
    Content Store
  • Android TV WebView / native
    .apk
    Play Store

Adapters

  • HbbTV adapter: input · media · lifecycle · storage · packaging
  • Samsung Tizen adapter: input · media · lifecycle · storage · packaging
  • LG webOS adapter: input · media · lifecycle · storage · packaging
  • Android TV adapter: input · media · lifecycle · storage · packaging

The only platform-specific code — about 10%

Shared

One React application — about 90% of the codebase

  • Screens & routing
  • Component library & design tokens
  • Domain model & state
  • API clients — REST + GraphQL

Backend

  • Headless Drupal
  • Elasticsearch
  • EPG ingest
  • VAST ad server
  • Livestream origins
One React application carries the screens, the component library, the domain model and the API clients. A thin adapter per runtime handles the five things that cannot be shared: input, media, lifecycle, storage and packaging.

The Mediathek

Search that actually searches

Extreme close-up of the key rows of a television remote control
Every character costs four key presses. Tolerance for imprecise input is not a refinement.

Most television catalogues do not search; they filter. A database LIKE finds the programme whose title you typed correctly and nothing else — which on a remote control, where every character costs four key presses, is close to useless.

This one runs on Elasticsearch, so a viewer who gets halfway through a word, misspells a name or remembers a subtitle rather than a title still lands on the right programme. On a device where typing is expensive, tolerance for imprecise input is not a refinement — it is the difference between a search box people use and one they abandon.

The rest of the catalogue is the standard television problem: everything reachable with five keys, tiles loaded as they approach the screen and released as they leave it, and a playback position that survives the app being killed by a channel change.

Live

Four livestreams, and a channel change that feels like one

A wall of small broadcast preview monitors, each showing an abstract field of light
A web player reloads. A television does not, and viewers notice the difference without being able to name it.

Running four simultaneous streams is not the hard part. The hard part is what happens between them.

A web player reloads: spinner, black, picture. A television does not, and viewers notice the difference immediately even if they could not name it. Getting a stream handover to feel like a channel change means preparing the next stream before the current one is released, inside a memory budget that does not comfortably hold two, and accepting different answers on each runtime — video/broadcast and the A/V control object behave nothing like AVPlay, which behaves nothing like webOS media.

This is one of the five seams where the shared codebase deliberately stops and a platform adapter takes over. Why those seams exist →

EPG

Programme data, now and next

The schedule is fed from the broadcaster's own systems rather than maintained a second time by hand — which is the only arrangement that stays correct, because a schedule that is entered twice is a schedule that disagrees with itself by the second week.

On the client the grid is windowed: a slice of time around where the viewer is looking, prefetched in the direction they are moving, discarded behind them. Now-and-next is derived from the clock rather than polled, so the app stays accurate without talking to the backend every few seconds.

Advertising

VAST, inside the television player

VAST is an ad-serving standard written for web video players, and an HbbTV player is not one. The ad has to be requested, resolved and played by the same media pipeline that is showing the programme, on a device where switching sources is expensive and where a failed ad call must degrade into “show the programme”, never into a black screen.

Tracking has to survive the same conditions, because unreported impressions are unbilled impressions.

Behind it

One back end, four front ends

A rack of disk shelves with drive activity indicators
There is no “the Tizen version of the catalogue”. There is one catalogue.

A headless Drupal 9 with Elasticsearch, exposing REST and GraphQL. The editorial team works in one place, and all four applications read from it. There is no “the Tizen version of the catalogue” — there is one catalogue, and four runtimes that render it.

QA

The part no competitor can write

This application is the reference app for our HbbTV emulator. Every release of our tooling is measured against it — which means the tool we give developers away for free is regression-tested against a production broadcaster application, not against a demo we wrote ourselves.

One number from that measurement, because it says something about both: running the app under a recorded scenario produced 0 findings of run#not-reproducible, against 23 in an exploration run of the same app. The app is stable; the difference is what a recorded path buys you over a search.

How the test suite works →

Stack

  • Headless Drupal 9
  • Elasticsearch
  • REST + GraphQL
  • React
  • HbbTV
  • Samsung Tizen
  • LG webOS
  • Android TV
  • VAST

Live at hbbtv.bibeltv.de.

Tell us what you are building.

Christian answers these himself, usually within a working day.

Start a conversation