feat: Modernisation UI/UX et configuration Flutter multi-plateforme
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>
This commit is contained in:
root
@@ -0,0 +1,318 @@
|
||||
# Player Page Design Override
|
||||
|
||||
## Purpose
|
||||
This file contains **page-specific design rules** that **override** the master design system for the Audio Player page.
|
||||
|
||||
## Key Differences from Master
|
||||
|
||||
### Layout
|
||||
- Full-screen overlay mode for immersive experience
|
||||
- Larger touch targets (minimum 56px for player controls)
|
||||
- Fixed bottom mini-player (height: 90px)
|
||||
|
||||
### Visual Hierarchy
|
||||
- Album art is the **primary visual element** (dominates 40% of viewport)
|
||||
- Track info is secondary (artist name smaller, muted color)
|
||||
- Controls are tertiary but highly accessible
|
||||
|
||||
### Typography
|
||||
- Track title: **24px, weight 600** (larger than master H3)
|
||||
- Artist name: **16px, weight 400, color #9BA3B8**
|
||||
- Timestamps: **13px, weight 500, color #6B7280**
|
||||
|
||||
### Colors (Same as Master)
|
||||
- Background: `#0A0E27`
|
||||
- Surface: `#151932`
|
||||
- Primary Neon: `#00F0FF` (progress bar, play button)
|
||||
- Secondary Neon: `#BF00FF` (like button active)
|
||||
|
||||
### Components
|
||||
|
||||
#### Progress Bar
|
||||
```css
|
||||
/* Custom progress bar styling */
|
||||
.progress-container {
|
||||
height: 4px;
|
||||
background: #2A2F4A;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00F0FF 0%, #00C8FF 100%);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
|
||||
}
|
||||
|
||||
.progress-handle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #00F0FF;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
.progress-container:hover .progress-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
#### Control Buttons
|
||||
```css
|
||||
/* Primary Control (Play/Pause) */
|
||||
.btn-play-primary {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #00F0FF 0%, #00C8FF 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 24px rgba(0, 240, 255, 0.4);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.btn-play-primary:hover {
|
||||
box-shadow: 0 6px 32px rgba(0, 240, 255, 0.6);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Secondary Controls (Prev, Next, Shuffle) */
|
||||
.btn-control-secondary {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9BA3B8;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.btn-control-secondary:hover {
|
||||
color: #F0F4F8;
|
||||
background: rgba(240, 244, 248, 0.05);
|
||||
}
|
||||
|
||||
.btn-control-secondary.active {
|
||||
color: #00F0FF;
|
||||
}
|
||||
```
|
||||
|
||||
#### Album Art Display
|
||||
```css
|
||||
/* Large album art with glow */
|
||||
.album-art-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
aspect-ratio: 1/1;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.album-art {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Playing animation (subtle pulse) */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 20px 60px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 20px 80px rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.album-art.playing {
|
||||
animation: pulse-glow 3s ease-in-out infinite;
|
||||
}
|
||||
```
|
||||
|
||||
#### Mini Player (Bottom Bar)
|
||||
```css
|
||||
/* Persistent bottom mini-player */
|
||||
.mini-player {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 90px;
|
||||
background: linear-gradient(180deg, rgba(21,25,50,0.95) 0%, rgba(10,14,39,0.98) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 1px solid #2A2F4A;
|
||||
padding: 12px 24px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.mini-album-art {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mini-track-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mini-track-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #F0F4F8;
|
||||
}
|
||||
|
||||
.mini-artist-name {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
}
|
||||
|
||||
.mini-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
### Volume Control
|
||||
```css
|
||||
.volume-slider {
|
||||
-webkit-appearance: none;
|
||||
width: 100px;
|
||||
height: 4px;
|
||||
background: #2A2F4A;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #00F0FF;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
|
||||
}
|
||||
```
|
||||
|
||||
### Queue Panel (Slide-out)
|
||||
```css
|
||||
.queue-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
background: #151932;
|
||||
border-left: 1px solid #2A2F4A;
|
||||
transform: translateX(100%);
|
||||
transition: transform 300ms ease;
|
||||
z-index: 50;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.queue-panel.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.queue-item {
|
||||
display: grid;
|
||||
grid-template-columns: 48px 1fr auto;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
|
||||
.queue-item:hover {
|
||||
background: rgba(0, 240, 255, 0.05);
|
||||
}
|
||||
|
||||
.queue-item.active {
|
||||
background: rgba(0, 240, 255, 0.1);
|
||||
border: 1px solid #00F0FF;
|
||||
}
|
||||
```
|
||||
|
||||
## Responsive Adjustments
|
||||
|
||||
### Mobile (< 768px)
|
||||
- Mini player: Height 80px
|
||||
- Album art: Max-width 300px
|
||||
- Control buttons: 56px primary, 44px secondary
|
||||
- Queue panel: Full-width (100%)
|
||||
|
||||
### Tablet (768px - 1024px)
|
||||
- Mini player: Height 85px
|
||||
- Album art: Max-width 350px
|
||||
- Queue panel: Width 350px
|
||||
|
||||
### Desktop (> 1024px)
|
||||
- Use default sizes above
|
||||
|
||||
## Accessibility (Beyond Master)
|
||||
|
||||
### Keyboard Shortcuts
|
||||
- **Space**: Play/Pause
|
||||
- **Arrow Left/Right**: Seek ±10s
|
||||
- **Arrow Up/Down**: Volume ±10%
|
||||
- **Shift + Arrow Left/Right**: Previous/Next track
|
||||
- **M**: Mute/Unmute
|
||||
- **F**: Toggle fullscreen mode
|
||||
|
||||
### Screen Reader Announcements
|
||||
- Announce track changes (title + artist)
|
||||
- Announce playback state (playing/paused)
|
||||
- Announce volume changes (percentage)
|
||||
- Announce queue position ("Track 3 of 15")
|
||||
|
||||
### ARIA Labels
|
||||
```html
|
||||
<!-- Play/Pause Button -->
|
||||
<button aria-label="Pause" aria-pressed="true">
|
||||
<!-- Pause Icon -->
|
||||
</button>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div role="slider" aria-label="Track progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45">
|
||||
<!-- Progress UI -->
|
||||
</div>
|
||||
|
||||
<!-- Volume Slider -->
|
||||
<input type="range" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70">
|
||||
```
|
||||
|
||||
## Additional Anti-Patterns for Player
|
||||
|
||||
❌ **NEVER auto-play audio without user interaction** - Wait for explicit play action
|
||||
❌ **NEVER hide controls during video playback** - Keep controls always visible
|
||||
❌ **NEVER use instant seek jumps** - Animate progress bar smoothly
|
||||
❌ **NEVER skip keyboard navigation** - All controls must be keyboard-accessible
|
||||
❌ **NEVER ignore audio focus** - Pause when another app plays audio
|
||||
|
||||
---
|
||||
|
||||
*These page-specific rules override the master design system for the player page only.*
|
||||
Reference in New Issue
Block a user