MovixOpenSource/src

Frontend Movix

Le frontend Movix porte l'expérience utilisateur complète : navigation dans le catalogue, pages détails, lecture vidéo, Live TV, WatchParty, profils, listes partagées, Wishboard, VIP et Wrapped.

Le point important pour contribuer ici : src/App.tsx ne fait pas que router. Il centralise aussi plusieurs comportements transverses, dont la persistance locale et la sync de certains morceaux de localStorage vers POST /api/sync.

Démarrage

cp .env.example .env
npm install
npm run dev

Le serveur Vite écoute sur http://localhost:3000.

Commandes utiles :

npm run lint
npm run build
npm run preview
npm run wasm:watchparty-sync:setup
npm run wasm:watchparty-sync:build

Ce que le frontend gère

• découverte de films, séries, anime, collections et fiches personnes
• pages de lecture pour films, séries et anime
• Live TV et providers annexes
• WatchParty, création de room, join, liste publique et Sync Pro
• comptes, auth, profils multiples et sessions
• listes partagées, suggestions, Wishboard et soumission de liens
• pages VIP, dons, cadeaux, invoices et Wrapped

Variables d'environnement utiles

Les variables principales sont documentées dans .env.example :

• VITE_MAIN_API
• VITE_TMDB_API_KEY
• VITE_SITE_URL
• VITE_WATCHPARTY_API
• VITE_PROXY_BASE_URL
• VITE_API_PROXY_BASE_URL
• VITE_PROXIES_EMBED_API
• VITE_RIVESTREAM_PROXIES
• VITE_SUPPORT_TELEGRAM_URL
• VITE_TURNSTILE_SITE_KEY
• VITE_TURNSTILE_INVISIBLE_SITEKEY

La normalisation des URLs runtime est centralisée dans src/config/runtime.ts.

Architecture

src/
|-- main.tsx                 # Point d'entrée
|-- App.tsx                  # Routing principal + comportements transverses
|-- pages/                   # Une page = une route
|-- components/              # UI et composants métier
|-- context/                 # État global via React Context
|-- services/                # Appels HTTP
|-- hooks/                   # Hooks custom
|-- utils/                   # Helpers
|-- config/                  # Runtime, Firebase, proxies
|-- workers/                 # Web workers, dont WatchParty Sync
|-- i18n/                    # Traductions
`-- components/ui/           # Primitives UI réutilisables

Routes à connaître

Le routeur principal est dans src/App.tsx. Les grandes familles de routes sont :

• navigation catalogue : /, /movies, /tv-shows, /collections, /movie/:id, /tv/:id
• lecture : /watch/movie/:tmdbid, /watch/tv/:tmdbid/s/:season/e/:episode, /watch/anime/...
• social / communautaire : /wishboard, /list/:shareCode, /top10, /wrapped
• compte / profils / VIP : /profile, /profile-selection, /settings, /vip, /vip/don
• temps réel : /watchparty/create, /watchparty/join, /watchparty/room/:roomId
• services annexes : /live-tv, /debrid, /extension, /ftv

État global

Movix n'utilise ni Redux ni Zustand. L'état global passe surtout par React Context, le stockage local et quelques synchronisations backend.

Les contexts à connaître en premier :

• AuthContext.tsx
• ProfileContext.tsx
• SearchContext.tsx
• VipModalContext.tsx
• AdFreePopupContext.tsx
• AdWarningContext.tsx
• IntroContext.tsx

Où intervenir selon le sujet

• Auth et persistance : src/App.tsx, src/context/AuthContext.tsx, src/context/ProfileContext.tsx
• Calls backend : src/services/ puis les pages/composants consommateurs
• WatchParty : src/pages/WatchParty*.tsx, src/hooks/useWatchParty.ts, src/utils/watchparty.ts, src/workers/watchpartySync.worker.ts
• Lecture vidéo : src/pages/Watch/ et les composants *Player*
• Traductions : src/i18n/

Notes de contribution

• Les imports inutilisés cassent le lint.
• Certaines features de lecture combinent plusieurs players et plusieurs proxies ; évite les simplifications rapides.
• Si tu touches une feature transversale, regarde aussi le backend correspondant dans API/Mainapi/ ou API/watchpartyAPI/.