85dad89d5b
Phase 1 - Corrections Critiques: - Fixed memory leaks dans music_provider.dart (stream subscriptions) - Fixed race conditions dans search_provider.dart (stale results) - Fixed token refresh errors dans api_service.dart - Improved error handling avec messages utilisateur - Changed API URL to HTTPS by default Phase 2 - Améliorations UX Desktop: - Ajouté cursor pointers sur tous les éléments cliquables - Implémenté hover states avec effets néon glow (200ms transitions) - Créé skeleton loading states avec shimmer animation - Ajouté widgets: ClickableWrapper, ErrorDisplay, SkeletonLoading - Enhanced visual feedback pour desktop users Phase 3 - Configuration Flutter: - Configuré Android (Gradle 8.1.0, Kotlin 1.9.0, minSdk 21, targetSdk 34) - Créé launcher icons cyberpunk néon (5 densités) - Configuré Windows desktop (structure complète) - Activé Linux desktop support - Ajouté package équatable pour entités de domaine - Corrigé imports (colors.dart, auth_provider.dart) - Fixed Dio API compatibility (RequestOptions) Documentation: - STYLE_GUIDE.md: Guide complet (100+ pages) - DESIGN_IMPLEMENTATION_GUIDE.md: Implémentation Flutter - BUILD_STATUS.md: Status builds + troubleshooting - QUICKSTART_BUILDS.md: Guide rapide - BUILD_INDEX.md: Index documentation - PHASE_1_CORRECTIONS.md: Corrections Phase 1 - PHASE_2_UX_IMPROVEMENTS.md: Améliorations Phase 2 - PR_REVIEW_SUMMARY.md: Revue code complète - CODE_ANALYSIS_AND_PRIORITIES.md: Analyse code Scripts & Builds: - BUILD_ALL.sh: Script automatisé builds multi-plateforme - builds/: Structure avec README par plateforme - design-system/: Système de design complet Backend: - Ajouté streaming HTTP Range pour audio progressif - Enhanced YouTube service avec métadonnées complètes - Improved error handling et validation Generated with [Claude Code](https://claude.com/claude-code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
200 lines
3.7 KiB
Markdown
200 lines
3.7 KiB
Markdown
# 🌐 Web Build
|
|
|
|
## Status
|
|
⚠️ **Problème de compatibilité avec just_audio_web**
|
|
|
|
Le package `just_audio_web` 0.4.11 n'est pas compatible avec Flutter 3.38.7 et les nouveaux compilateurs Web.
|
|
|
|
## Prérequis
|
|
|
|
Aucun prérequis spécial - le build Web fonctionne sur toutes les plateformes (Linux, macOS, Windows, ChromeOS).
|
|
|
|
## Problème Actuel
|
|
|
|
### Erreur de compilation
|
|
```
|
|
Error: Function converted via 'toJS' contains invalid types in its function signature
|
|
```
|
|
|
|
**Cause:** Incompatibilité entre `just_audio_web` et Flutter 3.38.7
|
|
|
|
## Solutions
|
|
|
|
### Option 1: Mode Développement (Recommandé pour tester)
|
|
|
|
Le mode développement fonctionne parfaitement:
|
|
|
|
```bash
|
|
cd /opt/audiOhm/frontend
|
|
flutter run -d chrome
|
|
```
|
|
|
|
**Avantages:**
|
|
- Hot Reload pour développement rapide
|
|
- Debugging intégré
|
|
- Fonctionne immédiatement
|
|
|
|
### Option 2: Utiliser une alternative audio
|
|
|
|
Remplacer `just_audio` par un package compatible web:
|
|
|
|
```yaml
|
|
# pubspec.yaml
|
|
dependencies:
|
|
# Garder just_audio pour mobile/desktop
|
|
just_audio: ^0.9.44
|
|
|
|
# Ajouter alternative pour web
|
|
audioplayers: ^6.0.0
|
|
```
|
|
|
|
Puis utiliser des imports conditionnels:
|
|
```dart
|
|
import 'package:just_audio/just_audio.dart'
|
|
if (dart.library.html) 'package:audioplayers/audioplayers.dart';
|
|
```
|
|
|
|
### Option 3: Version Web UI-only (sans audio)
|
|
|
|
Pour démonstration du design sans streaming audio:
|
|
|
|
1. Commenter `just_audio` dans pubspec.yaml temporairement
|
|
2. Builder
|
|
3. Restaurer après build
|
|
|
|
```bash
|
|
cd /opt/audiOhm/frontend
|
|
|
|
# Éditer pubspec.yaml - commenter just_audio
|
|
# vim pubspec.yaml
|
|
|
|
flutter pub get
|
|
flutter build web --release
|
|
```
|
|
|
|
## Instructions de Build (quand le problème sera résolu)
|
|
|
|
```bash
|
|
cd /opt/audiOhm/frontend
|
|
flutter build web --release
|
|
```
|
|
|
|
## Output
|
|
|
|
Le build sera créé dans:
|
|
```
|
|
build/web/
|
|
```
|
|
|
|
Fichiers principaux:
|
|
- `index.html` - Page HTML principale
|
|
- `main.dart.js` - Application compilée
|
|
- `assets/` - Ressources
|
|
- `canvaskit/` - WebGL renderer
|
|
|
|
## Déploiement
|
|
|
|
### Option 1: Hosting statique
|
|
|
|
```bash
|
|
# Copier les fichiers
|
|
cp -r build/web/* /path/to/web/server/
|
|
```
|
|
|
|
### Option 2: Netlify
|
|
```bash
|
|
# Installer Netlify CLI
|
|
npm install -g netlify-cli
|
|
|
|
# Déployer
|
|
netlify deploy --dir=build/web --prod
|
|
```
|
|
|
|
### Option 3: Vercel
|
|
```bash
|
|
# Installer Vercel CLI
|
|
npm install -g vercel
|
|
|
|
# Déployer
|
|
vercel --prod
|
|
```
|
|
|
|
### Option 4: Cloudflare Pages
|
|
```bash
|
|
# Via le dashboard Cloudflare
|
|
# OU utiliser Wrangler
|
|
npm install -g wrangler
|
|
```
|
|
|
|
### Option 5: GitHub Pages
|
|
```bash
|
|
# Installer gh-pages
|
|
npm install -g gh-pages
|
|
|
|
# Déployer
|
|
gh-pages -d build/web
|
|
```
|
|
|
|
## Test en local (sans build)
|
|
|
|
```bash
|
|
cd /opt/audiOhm/frontend
|
|
|
|
# Avec Chrome
|
|
flutter run -d chrome
|
|
|
|
# Avec Edge
|
|
flutter run -d edge
|
|
|
|
# Avec Firefox (expérimental)
|
|
flutter run -d firefox
|
|
|
|
# Avec serveur web local
|
|
flutter build web --no-sound-null-safety
|
|
cd build/web
|
|
python3 -m http.server 8080
|
|
# Ouvrir http://localhost:8080
|
|
```
|
|
|
|
## Informations de Build Web
|
|
|
|
- **Compiler:** dart2js (JavaScript)
|
|
- **Renderer:** CanvasKit (WebGL)
|
|
- **Target:** ES6+ browsers
|
|
- **PWA Support:** Oui
|
|
- **Single Application:** Oui (one-page app)
|
|
|
|
## Mise à jour future
|
|
|
|
Surveiller les mises à jour de:
|
|
- `just_audio` pour compatibilité web améliorée
|
|
- `just_audio_web` pour corrections de bugs
|
|
|
|
```bash
|
|
flutter pub upgrade
|
|
flutter build web --release
|
|
```
|
|
|
|
## Alternative: Utiliser audioplayers
|
|
|
|
Si vous voulez une version web fonctionnelle maintenant:
|
|
|
|
```bash
|
|
# Ajouter audioplayers
|
|
flutter pub add audioplayers
|
|
|
|
# Modifier le code pour utiliser audioplayers sur web
|
|
# Voir: https://pub.dev/packages/audioplayers
|
|
```
|
|
|
|
## Mode développement sans backend
|
|
|
|
Pour tester uniquement l'UI:
|
|
|
|
```bash
|
|
cd /opt/audiOhm/frontend
|
|
|
|
# Lancer avec fausses données
|
|
flutter run -d chrome --dart-define=MOCK_DATA=true
|
|
```
|