Phase 1–3 dokumentiertPhase 4 vorbereitetVirelio TV

VIRELIO Developer Portal

Zentrale Dokumentation für Virelio TV: Vision, Brand Book, Design System, Mockups, technische Architektur, Roadmap und Entwicklungsgrundlage.

Projektstatus

1.0

Orion

Fundament für Marke, Designsystem und MVP-Architektur.

Mockups integriert

Produktvision, User Flow, Dashboard, UI Kit, Roadmap und Core Screens.

Web

Referenz zuerst

Virelio Web als UX- und Design-Referenz vor Android.

Native

Android danach

Kotlin, Jetpack Compose und Media3/ExoPlayer.

Vision

Virelio TV wird als moderne Premium-Media-App entwickelt. Die App stellt keine eigenen Sender, Streams oder Inhalte bereit. Benutzer verwenden eigene, rechtmäßig genutzte Playlists oder Zugangsdaten.

Premium statt Standard-IPTV

Optik und Bedienung sollen sich eher wie Netflix, Plex oder Jellyfin anfühlen.

Schnell und ruhig

Der Benutzer soll mit wenigen Klicks beim gewünschten Sender sein.

Skalierbar

Android Mobile zuerst, danach Android TV, iOS, Apple TV und Cloud-Funktionen.

Phasenübersicht

Phase 1

abgeschlossen

Vision & UI/UX-Grundlage

Zielbild, Produktidee, Sitemap, User Flow und erste Mockups.

Phase 2

abgeschlossen

Designsystem & Projektgrundlage

Farben, Typografie, Layoutregeln, Komponentenlogik und Projektstruktur.

Phase 3

abgeschlossen

UI Kit & Komponenten

Buttons, Cards, Navigation, Player Controls, Listen, Inputs und Component Kit.

Phase 4

vorbereitet

Web-first Architektur

Design Portal, Web App, API-Struktur und spätere native Android-App.

Phase 5

nächster Schritt

Virelio Web Entwicklung

React/Vite Web-App mit Home Dashboard, Dummy-Daten, Senderliste und Player-Prototyp.

Mockup-Galerie

Alle bisher erstellten Mockups sind hier als Projektartefakte zentral abgelegt.

Produktvision

Erste hochwertige App-Vision mit mehreren Mobile Screens.

Sitemap & User Flow

Struktur vom Onboarding bis zur Live-TV-Nutzung.

Home Dashboard

Zentraler Startscreen mit Navigation, Favoriten und Live-Inhalten.

Component Kit

Buttons, Cards, Inputs, Player Controls und UI-Grundelemente.

Roadmap

Produktplan mit Phasen, Milestones und Tech Stack.

Core Screens

Live-TV, Player, EPG, Playlist-Verwaltung und Settings als abgeschlossene Mockup-Bereiche.

Brand Book · Orion

Element	Definition
Marke	Virelio
Produkt	Virelio TV
Slogan	Watch Beautifully.
Positionierung	Moderner Player für eigene, rechtmäßig genutzte Media-Quellen.
Codename	Orion 1.0

Produktfamilie

Virelio TVVirelio Design SystemVirelio CloudVirelio SignageVirelio Monitor

Design System

Das Virelio Design System definiert die gemeinsame visuelle Sprache für Web, Android, Android TV, iOS und spätere Virelio-Produkte.

Midnight
#070B16

Night Blue
#101A34

Virelio Blue
#3D7CFF

Electric Purple
#7B5CFF

Emerald
#22C55E

Signal Red
#EF4444

Typografie

Primär: Inter. Fallback: Segoe UI / System Sans. Größen: Display 40–48, Headline 28–32, Title 20–24, Body 16, Caption 12–14.

Komponenten

Buttons

Primary, Secondary, Ghost, Icon Button.

Cards

Senderkarte, Kategoriekarte, Playlistkarte, Dashboardkarte.

Navigation

Mobile Bottom Navigation, Sidebar, TV-Fokusnavigation.

Player Controls

Play/Pause, Senderwechsel, Live Badge, Fullscreen, Fehlerstatus.

EPG

Jetzt, als Nächstes, Timeline, Programmkarten.

Dialogs

Rechtlicher Hinweis, Playlist löschen, Fehler, Importstatus.

Technische Architektur

Virelio Platform
├─ design.virelio.ch  → Developer Portal / Design System
├─ app.virelio.ch     → Web-App / Referenzimplementierung
├─ api.virelio.ch     → spätere REST API / Cloud
└─ Android App        → Kotlin + Jetpack Compose + Media3

Web-first Strategie

Die Web-App wird zuerst umgesetzt, um UX, Navigation und Design schnell zu testen. Die Android-App wird danach nativ entwickelt und übernimmt Design Tokens, User Flows und Komponentenlogik.

Bereich	Empfehlung
Frontend	React + Vite + TypeScript
Styling	CSS Variables / Virelio Tokens
Player Web	HTML5 Video + hls.js
Android später	Kotlin + Jetpack Compose + Media3/ExoPlayer
Hosting	Statisch für Portal, später Web-App Build auf app.virelio.ch

Datenmodell MVP

Playlist
- id
- name
- type: M3U | XTREAM
- sourceUrl
- createdAt
- lastSyncAt

Channel
- id
- playlistId
- name
- logoUrl
- streamUrl
- groupName
- tvgId
- isFavorite
- lastWatchedAt

EpgProgram
- id
- channelId
- title
- description
- startTime
- endTime

UserSettings
- theme
- language
- autoRefresh
- startScreen
- parentalLockEnabled

Bisherige Architektur- und Produktentscheidungen

Entscheid	Begründung
Name: Virelio TV	Professionell, markenfähig, passt zum bestehenden Virelio-Umfeld.
Keine eigenen Inhalte	Rechtlich sauberer Player für eigene Quellen.
Web zuerst	Schnelle Iteration und Referenz für spätere native App.
Android nativ	Performance, Store-Qualität und Android-TV-Fokus.
Versionen nach Himmelskörpern	Eigene Identität für Roadmap und Releases.

Roadmap

Version	Codename	Ziel
1.0	Orion	Fundament, Portal, Designsystem, Web-MVP
1.1	Lyra	UI-Feinschliff, bessere Navigation
1.2	Pegasus	Player, M3U Parser, EPG-Ausbau
2.0	Polaris	Android TV und Plattform-Ausbau
3.0	Andromeda	Cloud, Sync, Geräteverwaltung

Was fehlt noch?

Logo finalisieren

App Icon, Favicon, Wortmarke und Einsatzregeln.

React-Projekt erstellen

Grundgerüst für app.virelio.ch mit Home Dashboard.

Mockups erweitern

Erledigt: Live-TV, Player, EPG, Playlist-Verwaltung und Settings sind integriert.

Rechtliche Texte

Disclaimer, Datenschutz, Impressum und Store-Texte.

Testdaten definieren

Dummy Channels, Kategorien, EPG-Beispiele und Player-Teststream.

Deployment-Struktur

design.virelio.ch, app.virelio.ch, api.virelio.ch.

Brand Update · Orion 1.0

VIRELIO als Dachmarke

Ab Orion 1.0 wird klar zwischen der Dachmarke VIRELIO und den einzelnen Produkten unterschieden. VIRELIO TV ist das erste Produkt innerhalb dieser Markenwelt.

VIRELIO

Simple. Beautiful. Connected.

Dachmarke

VIRELIO ist die zentrale Marke für alle zukünftigen Produkte und Services.

Produktmarke

VIRELIO TV ist das Media- und IPTV-Produkt.

Design System

VIRELIO Design System definiert UI, UX, Tokens, Komponenten und Motion.

Brand Level / Product Level

Ebene	Name	Verwendung
Dachmarke	VIRELIO	Brand Book, Developer Portal, allgemeine Kommunikation
Produkt	VIRELIO TV	Android App, Web App, IPTV Player, Store Listing
Produkt	VIRELIO Cloud	Sync, Geräteverwaltung, Premium-Funktionen
Produkt	VIRELIO Signage	Digital Signage und Bildschirmsteuerung
Produkt	VIRELIO Monitor	Monitoring, Dashboards und Analytics

Logo-Entscheid

Das hochgeladene Play-Symbol mit blau-violettem Verlauf wird als offizielles VIRELIO-Markenzeichen übernommen. Für die Dachmarke wird der Zusatz TV entfernt. Produktlogos ergänzen den jeweiligen Produktnamen.

✓ VIRELIO als Dachmarke definiert
✓ VIRELIO TV als erstes Produkt definiert
✓ Logo-Icon als offizielle Basis übernommen
✓ Produktfamilie dokumentiert