Buisz · IPTV

Een IPTV-player in Netflix-stijl voor je eigen M3U/M3U8-playlists en de Xtream Codes API. Eigen Buisz-merkidentiteit — geen kloon van bestaande apps.

Buisz is een speler, geen contentbron. De app bevat of levert zelf geen streams of zenders. Je laadt je eigen legale playlist (M3U-URL, M3U-bestand of Xtream-inloggegevens). Er is geen koppeling met of distributie van illegale contentbronnen.

Status: fase 3 — distributie (box-first)

De Netflix-stijl UI uit fase 1 is gekoppeld aan echte bronnen (fase 2), en fase 3 maakt 'm klaar voor een externe box (Android TV / Fire Stick / Apple TV via HDMI): EPG (nu/straks), afstandsbediening-navigatie incl. back-knop, installeerbaarheid (PWA), en een productie-proxy voor web-deploys. Standaard start de app met demodata (src/data/mockContent.ts); via Bron toevoegen (rechtsboven) laad je je eigen M3U-playlist, M3U-bestand of Xtream-account.

Aan de slag

npm install
npm run dev # start op http://localhost:5173

Andere scripts:

npm run build # type-check (tsc) + productie-build (modern + ES5-legacy)
npm run preview # bekijk de productie-build lokaal
npm run build:proxy # build met de productie-proxy ingeschakeld (VITE_PROXY_BASE=/__proxy)
npm run serve # serveer dist/ + /__proxy met server/proxy.mjs (poort 4173)

Elke build levert twee bundels: een moderne ES2015-modulebundel én een ES5-legacy-bundel met polyfills (via @vitejs/plugin-legacy), zodat oude TV-engines (Tizen 3.0/Chromium M47, LG webOS 3.5/Chromium 38) de app via nomodule kunnen laden. De support-matrix, optimalisaties en distributiekeuzes staan in docs/platforms.md.

Een bron laden

1. Klik rechtsboven op de bron-knop (toont de actieve bron, standaard "Demo-bron").
2. Kies een tabblad:
   • Xtream — host, poort, gebruikersnaam, wachtwoord. Het live-URL-formaat is instelbaar (.ts, .m3u8, zonder /live/, of een eigen template) omdat providers hierin verschillen.
   • M3U-URL — directe link naar een .m3u/.m3u8, met optionele EPG-URL.
   • M3U-bestand — upload een lokale playlist.
3. Optioneel: een TMDB-sleutel om kale titels te verrijken met poster, omschrijving en cast (lui geladen bij het openen van een detail).

De bron wordt lokaal bewaard (localStorage); Xtream-gegevens verlaten je apparaat niet.

CORS: echte Xtream-servers en M3U-URL's sturen geen CORS-headers. In dev haalt een ingebouwde proxy (/__proxy, zie vite.config.ts) ze server-side op. Afspelen van streams in de browser kan alsnog door CORS geblokkeerd worden — op de doel-box (Android TV / Fire Stick) speelt dit rechtstreeks af.

Wat zit erin

UI (fase 1):

• NavBar — sectie-tabs + bronkiezer met de actieve bron.
• HeroBanner — uitgelichte content met scrim, metadata en CTA's.
• ContentRow — horizontaal scrollende rijen met snap en scroll-knoppen.
• PosterCard — poster/thumbnail met focus-highlight (Buisgroen), live-badges en voortgangsbalk; vangt ontbrekende beelden netjes op.
• DetailOverlay — synopsis, cast, genres, afleveringenlijst en afspeelknoppen.

Client (fase 2):

• api/xtream.ts — Xtream-client: player_api.php-acties, configureerbaar live-URL-formaat, mappers naar het content-model, lui geladen series-info.
• api/m3u.ts — M3U/M3U_plus-parser: tvg-*/group-title-attributen, x-tvg-url EPG, classificatie live/film/serie, groepering naar rijen.
• api/tmdb.ts — optionele metadataverrijking via TMDB.
• api/catalog.ts + hooks/useCatalog.ts — bron-agnostische lader met persistentie en demo als standaard.
• components/Player.tsx — speler met hls.js (HLS) en mpegts.js (MPEG-TS), native fallback; libs worden lui geladen (aparte chunks).
• components/SourceModal.tsx — scherm om een bron te kiezen/laden.

Distributie (fase 3):

• api/epg.ts — XMLTV-parser; toont "nu/straks" op live-kanalen (poster + detail) op basis van x-tvg-url of een opgegeven EPG-URL.
• server/proxy.mjs — productie-server: serveert dist/ + dezelfde /__proxy CORS-proxy, zodat web-deploys ook met echte bronnen werken.
• PWA-manifest (public/manifest.webmanifest) — fullscreen, installeerbaar op een box of telefoon.

Bediening / TV-navigatie

• Pijltjestoetsen navigeren door de poster-rijen (spatial navigation); omhoog vanaf de bovenste rij springt naar de navigatiebalk. Enter opent, Esc of Backspace (de back-knop van een afstandsbediening) sluit de bovenste overlay.
• Zichtbare focus-highlight, responsive tot mobiel, en prefers-reduced-motion wordt gerespecteerd.

Designrichting

Eigen identiteit met de gangbare streaming-UX-patronen (donkere achtergrond, hero-banner, horizontale categorie-rijen, focus-highlight, detail-overlay). Het Buisz-palet maakt het onmiskenbaar geen kloon:

Token	Kleur	Rol
Antraciet	#13181b	Basis / achtergrond
Diepteal	#0e4f4a	Diepte / sfeergloed
Buisgroen	#34e3a8	Signature-accent (focus, CTA, live)
Mist	#e9f1f0	Voorgrond / tekst

Tokens staan in src/styles/tokens.css en tailwind.config.js.

Projectstructuur

src/
api/ xtream.ts, m3u.ts, tmdb.ts, epg.ts, catalog.ts, proxy.ts
components/ NavBar, HeroBanner, ContentRow, PosterCard, DetailOverlay,
SourceModal, Player
data/ mockContent.ts — demodata (demo-bron)
hooks/ useSpatialNav.ts — pijltjes-/remote-navigatie
useCatalog.ts — actieve bron + catalogus + EPG + persistentie
styles/ tokens.css — Buisz-kleur/type-tokens
types/ content.ts — bron-agnostische content-typen
source.ts — bron-configuratie
App.tsx
main.tsx
server/
proxy.mjs — productie-server + CORS-proxy
platforms/ — Tizen config.xml, webOS appinfo.json, iconen
scripts/ — gen-icons, package-tizen, package-webos
android/ — Capacitor Android TV-schil (TV-manifest)

Distributie (box-first, breed inzetbaar)

Eén web-app, per platform verpakt. Volledige onderbouwing + support-matrix: docs/platforms.md.

# Web / self-host (externe box of browser)
npm run build:proxy && npm run serve # http://localhost:4173 (dist/ + /__proxy)# Samsung Tizen → build/buisz.wgt (ongetekend; signeren via Tizen Studio)
npm run package:tizen
# LG webOS → build/app.buisz.iptv_*.ipk (via ares-package)
npm run package:webos
# Android TV / Google TV / Fire OS → Capacitor-schil in android/
npm run android:sync # kopieert de web-build naar de schil
npm run android:open # verder bouwen met Android Studio + Android SDK/Gradle

De Tizen/webOS-pakketten en de Capacitor-schil worden gegenereerd uit dezelfde web-build. De APK zelf bouw je met de Android SDK/Gradle (lokaal, niet in deze repo-build). De android/-AndroidManifest.xml is al voor TV ingericht (LEANBACK_LAUNCHER, android:banner, touch/leanback required="false").

Waarom box-first: oude én nieuwe TV's met één codebase, en de box levert de moderne codecs (HEVC/HLS/MPEG-TS) die veel oude TV's missen. Voor te oude TV's is de externe box de aanbevolen route i.p.v. bevroren engines najagen.

Tech

React 18 · Vite 5 · TypeScript · Tailwind CSS 3 · hls.js · mpegts.js · @vitejs/plugin-legacy (ES5-build voor oude TV's).