Roman/AudiOhm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Modernisation UI/UX et configuration Flutter multi-plateforme

Browse Source 
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
2026-01-19 07:44:40 +00:00
parent a89c7894cf
commit 85dad89d5b
100 changed files with 13570 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/lib/presentation/widgets/common/cached_network_image_with_fallback.dart
+1 -1
View File
@@ -4,7 +4,7 @@ library;
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import '../../core/theme/colors.dart';
import '../../../core/theme/colors.dart';
class CachedNetworkImageWithFallback extends StatelessWidget {
final String? imageUrl;
frontend/lib/presentation/widgets/common/clickable_wrapper.dart
+54
View File
@@ -0,0 +1,54 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
/// Wrapper widget that adds click cursor to clickable elements
/// Usage: ClickableWrapper(child: YourClickableWidget())
class ClickableWrapper extends StatelessWidget {
final Widget child;
final VoidCallback? onTap;
final VoidCallback? onDoubleTap;
final VoidCallback? onLongPress;
final bool isClickable;
const ClickableWrapper({
super.key,
required this.child,
this.onTap,
this.onDoubleTap,
this.onLongPress,
this.isClickable = true,
});
@override
Widget build(BuildContext context) {
if (!isClickable) {
return child;
}
return MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: onTap,
onDoubleTap: onDoubleTap,
onLongPress: onLongPress,
child: child,
),
);
}
}
/// Extension method to wrap any widget with click cursor
extension ClickableWrapperExtension on Widget {
Widget withClickCursor({
VoidCallback? onTap,
VoidCallback? onDoubleTap,
VoidCallback? onLongPress,
}) {
return ClickableWrapper(
onTap: onTap,
onDoubleTap: onDoubleTap,
onLongPress: onLongPress,
child: this,
);
}
}
frontend/lib/presentation/widgets/common/error_display.dart
+217
View File
@@ -0,0 +1,217 @@
import 'package:flutter/material.dart';
import '../../../core/theme/colors.dart';
/// Widget to display error messages in a user-friendly way
class ErrorDisplay extends StatelessWidget {
final String? errorMessage;
final VoidCallback? onRetry;
final Widget? child;
const ErrorDisplay({
super.key,
required this.errorMessage,
this.onRetry,
this.child,
});
@override
Widget build(BuildContext context) {
if (errorMessage == null) {
return child ?? const SizedBox.shrink();
}
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColors.error.withOpacity(0.1),
AppColors.error.withOpacity(0.05),
],
),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: AppColors.error.withOpacity(0.3),
width: 1,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Icon(
Icons.error_outline,
color: AppColors.error,
size: 20,
),
const SizedBox(width: 8),
Expanded(
child: Text(
errorMessage!,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
),
],
),
if (onRetry != null) ...[
const SizedBox(height: 12),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: onRetry,
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.error,
foregroundColor: AppColors.textInverted,
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: const Text(
'Retry',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
),
),
],
],
),
);
}
}
/// Small inline error message for compact spaces
class InlineError extends StatelessWidget {
final String message;
final VoidCallback? onRetry;
const InlineError({
super.key,
required this.message,
this.onRetry,
});
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.error_outline,
color: AppColors.error,
size: 16,
),
const SizedBox(width: 6),
Flexible(
child: Text(
message,
style: const TextStyle(
color: AppColors.error,
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
),
if (onRetry != null) ...[
const SizedBox(width: 8),
GestureDetector(
onTap: onRetry,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: AppColors.error.withOpacity(0.1),
borderRadius: BorderRadius.circular(4),
border: Border.all(
color: AppColors.error.withOpacity(0.3),
width: 1,
),
),
child: const Text(
'Retry',
style: TextStyle(
color: AppColors.error,
fontSize: 11,
fontWeight: FontWeight.w600,
),
),
),
),
],
],
);
}
}
/// Snackbar helper to show error messages
class ErrorSnackbar {
static void show(
BuildContext context,
String message, {
VoidCallback? action,
String? actionLabel,
Duration duration = const Duration(seconds: 4),
}) {
final snackBar = SnackBar(
content: Row(
children: [
const Icon(Icons.error_outline, color: Colors.white),
const SizedBox(width: 12),
Expanded(child: Text(message)),
],
),
backgroundColor: AppColors.error,
duration: duration,
action: action != null && actionLabel != null
? SnackBarAction(
label: actionLabel,
textColor: Colors.white,
onPressed: action,
)
: null,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
margin: const EdgeInsets.all(16),
);
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(snackBar);
}
static void showInfo(
BuildContext context,
String message, {
Duration duration = const Duration(seconds: 3),
}) {
final snackBar = SnackBar(
content: Row(
children: [
const Icon(Icons.info_outline, color: Colors.white),
const SizedBox(width: 12),
Expanded(child: Text(message)),
],
),
backgroundColor: AppColors.cyan,
duration: duration,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
margin: const EdgeInsets.all(16),
);
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(snackBar);
}
}
frontend/lib/presentation/widgets/common/mini_player.dart
+72 -40
View File
@@ -4,6 +4,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/theme/colors.dart';
import '../../providers/music_provider.dart';
import '../../pages/player/queue_view_page.dart';
import 'error_display.dart';
/// Mini Player Widget
class MiniPlayer extends ConsumerWidget {
@@ -19,56 +20,87 @@ class MiniPlayer extends ConsumerWidget {
final playerState = ref.watch(playerProvider);
final currentTrack = playerState.currentTrack;
final isPlaying = playerState.isPlaying;
final errorMessage = playerState.errorMessage;
return GestureDetector(
onTap: () {
// TODO: Open fullscreen player
},
child: Container(
height: 64,
decoration: BoxDecoration(
color: AppColors.surface,
border: Border(
top: BorderSide(
color: AppColors.cyan.withOpacity(0.2),
width: 1,
),
),
boxShadow: [
BoxShadow(
color: AppColors.cyan.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, -2),
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
// Album art
_buildAlbumArt(currentTrack),
const SizedBox(width: 12),
// Track info
Expanded(
child: _buildTrackInfo(currentTrack, playerState),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Error display (shown above mini player)
if (errorMessage != null)
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: AppColors.error.withOpacity(0.1),
border: Border(
bottom: BorderSide(
color: AppColors.error.withOpacity(0.3),
width: 1,
),
),
),
child: InlineError(
message: errorMessage,
onRetry: () {
// Retry loading the current track
if (currentTrack != null) {
ref.read(playerProvider.notifier).loadTrack(currentTrack);
}
},
),
),
// Mini player
Container(
height: 64,
decoration: BoxDecoration(
color: AppColors.surface,
border: Border(
top: BorderSide(
color: AppColors.cyan.withOpacity(0.2),
width: 1,
),
),
boxShadow: [
BoxShadow(
color: AppColors.cyan.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, -2),
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
// Album art
_buildAlbumArt(currentTrack),
const SizedBox(width: 12),
const SizedBox(width: 12),
// Controls
if (!compact)
_buildControls(ref, isPlaying)
else
_buildCompactControls(ref, isPlaying),
// Track info
Expanded(
child: _buildTrackInfo(currentTrack, playerState),
),
// Queue button
if (!compact) _buildQueueButton(context, ref),
],
const SizedBox(width: 12),
// Controls
if (!compact)
_buildControls(ref, isPlaying)
else
_buildCompactControls(ref, isPlaying),
// Queue button
if (!compact) _buildQueueButton(context, ref),
],
),
),
),
),
],
),
);
}
frontend/lib/presentation/widgets/common/skeleton_loading.dart
+302
View File
@@ -0,0 +1,302 @@
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import '../../../core/theme/colors.dart';
/// Skeleton loading card for albums/playlists/tracks
class ContentCardSkeleton extends StatelessWidget {
final double? width;
final double? height;
const ContentCardSkeleton({
super.key,
this.width,
this.height,
});
@override
Widget build(BuildContext context) {
return Shimmer.fromColors(
baseColor: AppColors.surfaceVariant,
highlightColor: AppColors.surfaceElevated,
child: Container(
width: width,
height: height,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Image placeholder
Expanded(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
),
),
const SizedBox(height: 12),
// Title placeholder
Container(
width: double.infinity,
height: 16,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(height: 8),
// Subtitle placeholder
Container(
width: 100,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
),
);
}
}
/// Skeleton for list items (e.g., track list items)
class ListItemSkeleton extends StatelessWidget {
final bool showLeading;
final bool showTrailing;
const ListItemSkeleton({
super.key,
this.showLeading = true,
this.showTrailing = true,
});
@override
Widget build(BuildContext context) {
return Shimmer.fromColors(
baseColor: AppColors.surfaceVariant,
highlightColor: AppColors.surfaceElevated,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
children: [
// Leading icon/image
if (showLeading) ...[
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(6),
),
),
const SizedBox(width: 12),
],
// Title and subtitle
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(height: 6),
Container(
width: 150,
height: 12,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
// Trailing icon
if (showTrailing) ...[
const SizedBox(width: 12),
Container(
width: 24,
height: 24,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
],
),
),
);
}
}
/// Skeleton for search results grid
class SearchGridSkeleton extends StatelessWidget {
final int itemCount;
const SearchGridSkeleton({
super.key,
this.itemCount = 6,
});
@override
Widget build(BuildContext context) {
return GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
),
itemCount: itemCount,
itemBuilder: (context, index) => const ContentCardSkeleton(),
);
}
}
/// Skeleton for horizontal scrolling lists
class HorizontalListSkeleton extends StatelessWidget {
final int itemCount;
final double itemHeight;
final double itemWidth;
const HorizontalListSkeleton({
super.key,
this.itemCount = 6,
this.itemHeight = 160,
this.itemWidth = 120,
});
@override
Widget build(BuildContext context) {
return SizedBox(
height: itemHeight,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: itemCount,
separatorBuilder: (context, index) => const SizedBox(width: 12),
itemBuilder: (context, index) => ContentCardSkeleton(
width: itemWidth,
height: itemHeight,
),
),
);
}
}
/// Full page skeleton with multiple sections
class PageSkeleton extends StatelessWidget {
final bool showHero;
final int sectionCount;
const PageSkeleton({
super.key,
this.showHero = true,
this.sectionCount = 3,
});
@override
Widget build(BuildContext context) {
return Shimmer.fromColors(
baseColor: AppColors.surfaceVariant,
highlightColor: AppColors.surfaceElevated,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Hero section
if (showHero) ...[
Container(
height: 180,
margin: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
),
],
// Sections
...List.generate(
sectionCount,
(index) => Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Section title
Container(
width: 150,
height: 24,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(height: 12),
// Horizontal list
SizedBox(
height: 160,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: 6,
separatorBuilder: (context, index) =>
const SizedBox(width: 12),
itemBuilder: (context, index) => Container(
width: 120,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
),
),
),
],
),
),
),
],
),
);
}
}
/// Circular loading indicator with theme colors
class ThemedCircularProgress extends StatelessWidget {
final double? size;
final double strokeWidth;
const ThemedCircularProgress({
super.key,
this.size,
this.strokeWidth = 3.0,
});
@override
Widget build(BuildContext context) {
return SizedBox(
width: size,
height: size,
child: CircularProgressIndicator(
strokeWidth: strokeWidth,
valueColor: const AlwaysStoppedAnimation<Color>(AppColors.cyan),
backgroundColor: AppColors.surfaceVariant,
),
);
}
}