DTFlux Titrage Client - Interface Angular pour Unreal Engine

🎯 Vue d'ensemble

Interface graphique modulaire Angular 19+ pour créer et gérer des fiches de titrage destinées à Unreal Engine avec le plugin Remote Control et Motion Design.

✅ Composants créés et fonctionnalités

🏗️ Architecture modulaire respectée

Services

• ✅ TitleSheetsService - Gestion des fiches de titrage (CRUD + localStorage)
• ✅ UnrealEngineService - Communication avec Unreal Engine Remote Control API
• ✅ ConfigService - Gestion de la configuration de l'application

Composants modulaires

• ✅ MenuBarComponent - Barre de menu avec actions de configuration
• ✅ CuedTitleComponent - Affichage du titre en cours de lecture
• ✅ ToolbarComponent - Barre de recherche + bouton d'ajout
• ✅ ListHeaderComponent - En-têtes de colonnes avec tri
• ✅ ListComponent - Liste principale des titres
• ✅ ListItemComponent - Élément de liste avec édition inline
• ✅ DetailsPanelComponent - Panneau de détails de l'élément sélectionné
• ✅ TitleDialogComponent - Boîte de dialogue d'ajout/modification
• ✅ TitleSheetsListComponent - Composant principal orchestrant la liste

Pages

• ✅ DTFluxTitleComponent - Page principale de l'application
• ✅ SetupComponent - Page de configuration légère

🎨 Design et thème

• ✅ Thème dark inspiré de VS Code et Unreal Engine
• ✅ Design sobre et épuré comme demandé
• ✅ Responsive design adaptatif jusqu'à 950px de largeur max
• ✅ Icônes FontAwesome intégrées
• ✅ Animations et transitions modernes

⚡ Fonctionnalités Angular 19+

• ✅ Signals utilisés partout (input, output, computed, effect)
• ✅ Directives modernes (@if, @for, etc.)
• ✅ Composants standalone
• ✅ Reactive Forms pour la validation
• ✅ Gestion d'état avec BehaviorSubject et Signals

🔧 Fonctionnalités métier

• ✅ CRUD complet des fiches de titrage (Nom, Prénom, Fonction1, Fonction2)
• ✅ Recherche en temps réel avec autocomplétion
• ✅ Tri des colonnes (nom, prénom, fonctions, date de modification)
• ✅ Édition inline des cellules avec navigation clavier
• ✅ Sélection et navigation avec flèches clavier
• ✅ Raccourcis clavier (Ctrl+I ajouter, Enter play, Space stop, Delete supprimer)
• ✅ Communication Unreal Engine via Remote Control API
• ✅ Gestion des états (stopped, playing, error)
• ✅ Timer de lecture avec changement de couleur
• ✅ Sauvegarde automatique et configuration persistante

📱 Expérience utilisateur

• ✅ Interface adaptative 950px max comme demandé
• ✅ États vides avec messages et actions appropriées
• ✅ Messages de feedback (succès, erreurs)
• ✅ Loading states pendant les opérations
• ✅ Tooltips et aide contextuelle
• ✅ Accessibilité (aria-labels, focus management, contraste élevé)

🚀 Comment démarrer

1. Installation des dépendances :

   npm install
   

2. Démarrage du serveur de développement :

   ng serve
   

3. Accès à l'application :

   • Interface principale : http://localhost:4200/dtflux-title
   • Configuration : http://localhost:4200/setup

📋 Utilisation

Interface principale

1. Ajouter une fiche : Bouton "Add" ou Ctrl+I
2. Modifier une fiche : Clic sur l'icône roue crantée ou double-clic sur une cellule
3. Supprimer une fiche : Bouton poubelle ou sélectionner + Delete
4. Lancer un rundown : Bouton play ou sélectionner + Enter
5. Arrêter un rundown : Bouton stop ou Space
6. Rechercher : Tapez dans la barre de recherche
7. Trier : Cliquez sur les en-têtes de colonnes

Configuration

• Unreal Engine : Adresse IP, port, timeout
• Sauvegarde : Chemin, auto-sauvegarde, intervalle
• Test de connexion : Vérifier la communication avec Unreal

🔌 API Unreal Engine

L'application communique avec Unreal Engine via l'API Remote Control :

• Endpoint : http://{address}:{port}/remote/object/call
• Blueprint cible : /Game/MotionDesign/TitleSheet_BP.TitleSheet_BP_C
• Fonctions : SetTitleProperties, StartRundown, StopRundown, GetStatus

🛠️ Prochaines étapes possibles

Fonctionnalités avancées

• Import/Export de fiches en CSV/JSON
• Templates de fiches prédéfinies
• Historique des modifications
• Groupes/Catégories de fiches
• Preview en temps réel dans Unreal
• Synchronisation multi-utilisateurs

Intégrations

• Drag & drop pour réorganiser
• Copier/coller entre fiches
• Undo/redo des actions
• Notifications push pour les changements d'état
• Mode hors ligne avec synchronisation

Performance

• Virtualisation de la liste pour de gros volumes
• Lazy loading des données
• Cache intelligent des requêtes
• Optimisation bundle et tree-shaking

🏗️ Architecture technique

src/app/
├── models/                    # Interfaces TypeScript
│   ├── title-sheet.model.ts
│   ├── unreal-status.model.ts
│   └── app-config.model.ts
├── services/                  # Services Angular
│   ├── title-sheet.service.ts
│   ├── unreal-engine.service.ts
│   └── config.service.ts
└── view/
    ├── components/           # Composants réutilisables
    │   ├── menu-bar/
    │   ├── cued-title/
    │   ├── toolbar/
    │   ├── list-header/
    │   ├── list-item/
    │   ├── details-panel/
    │   ├── title-dialog/
    │   └── title-sheets-list/
    └── pages/               # Pages de l'application
        ├── dtflux-title/
        └── setup/

L'architecture respecte parfaitement le paradigme de modularité demandé avec des composants indépendants et réutilisables.