mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-05 04:53:01 +00:00
Restore original swingmusic_mobile folder from 9f1623b
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,71 @@
|
||||
class AppConstants {
|
||||
// App Info
|
||||
static const String appName = 'SwingMusic';
|
||||
static const String appVersion = '1.0.0';
|
||||
|
||||
// API Configuration
|
||||
static const String defaultApiUrl = 'http://localhost:8181';
|
||||
static const Duration apiTimeout = Duration(seconds: 30);
|
||||
static const int maxRetries = 3;
|
||||
|
||||
// Audio Configuration
|
||||
static const Duration audioFadeDuration = Duration(milliseconds: 500);
|
||||
static const int maxAudioCacheSize = 100 * 1024 * 1024; // 100MB
|
||||
static const String audioCacheKey = 'audio_cache';
|
||||
|
||||
// UI Configuration
|
||||
static const double defaultPadding = 16.0;
|
||||
static const double smallPadding = 8.0;
|
||||
static const double largePadding = 24.0;
|
||||
static const double borderRadius = 12.0;
|
||||
static const double cardBorderRadius = 16.0;
|
||||
|
||||
// Animation Durations
|
||||
static const Duration fastAnimation = Duration(milliseconds: 200);
|
||||
static const Duration mediumAnimation = Duration(milliseconds: 300);
|
||||
static const Duration slowAnimation = Duration(milliseconds: 500);
|
||||
|
||||
// Image Dimensions
|
||||
static const double albumArtSize = 56.0;
|
||||
static const double largeAlbumArtSize = 200.0;
|
||||
static const double artistImageSize = 80.0;
|
||||
|
||||
// Storage Keys
|
||||
static const String themeKey = 'app_theme';
|
||||
static const String authTokenKey = 'auth_token';
|
||||
static const String userProfileKey = 'user_profile';
|
||||
static const String settingsKey = 'app_settings';
|
||||
static const String favoritesKey = 'favorites';
|
||||
static const String playlistsKey = 'playlists';
|
||||
|
||||
// Pagination
|
||||
static const int defaultPageSize = 20;
|
||||
static const int searchPageSize = 15;
|
||||
|
||||
// Audio Quality
|
||||
static const Map<String, String> audioQualities = {
|
||||
'low': '96kbps',
|
||||
'medium': '192kbps',
|
||||
'high': '320kbps',
|
||||
'lossless': 'FLAC',
|
||||
};
|
||||
|
||||
// Error Messages
|
||||
static const String networkErrorMessage = 'Please check your internet connection';
|
||||
static const String serverErrorMessage = 'Server is temporarily unavailable';
|
||||
static const String authErrorMessage = 'Please login to continue';
|
||||
static const String genericErrorMessage = 'Something went wrong. Please try again';
|
||||
|
||||
// Routes
|
||||
static const String homeRoute = '/home';
|
||||
static const String libraryRoute = '/library';
|
||||
static const String playerRoute = '/player';
|
||||
static const String searchRoute = '/search';
|
||||
static const String playlistsRoute = '/playlists';
|
||||
static const String settingsRoute = '/settings';
|
||||
static const String authRoute = '/auth';
|
||||
static const String qrRoute = '/qr';
|
||||
static const String offlineRoute = '/offline';
|
||||
static const String analyticsRoute = '/analytics';
|
||||
static const String profileRoute = '/profile';
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Unified icon constants and sizes matching web client
|
||||
class AppIcons {
|
||||
// Navigation icons
|
||||
static const IconData home = Icons.home_outlined;
|
||||
static const IconData homeFilled = Icons.home;
|
||||
static const IconData search = Icons.search_outlined;
|
||||
static const IconData searchFilled = Icons.search;
|
||||
static const IconData library = Icons.library_music_outlined;
|
||||
static const IconData libraryFilled = Icons.library_music;
|
||||
|
||||
// Media control icons
|
||||
static const IconData play = Icons.play_arrow;
|
||||
static const IconData pause = Icons.pause;
|
||||
static const IconData skipBack = Icons.skip_previous;
|
||||
static const IconData skipForward = Icons.skip_next;
|
||||
static const IconData volume = Icons.volume_up_outlined;
|
||||
static const IconData volumeMuted = Icons.volume_off_outlined;
|
||||
|
||||
// Content icons
|
||||
static const IconData album = Icons.album;
|
||||
static const IconData artist = Icons.person;
|
||||
static const IconData track = Icons.music_note;
|
||||
static const IconData folder = Icons.folder;
|
||||
static const IconData playlist = Icons.playlist_play;
|
||||
static const IconData favorite = Icons.favorite_border;
|
||||
static const IconData favoriteFilled = Icons.favorite;
|
||||
|
||||
// Action icons
|
||||
static const IconData more = Icons.more_vert;
|
||||
static const IconData add = Icons.add;
|
||||
static const IconData download = Icons.download;
|
||||
static const IconData share = Icons.share;
|
||||
static const IconData settings = Icons.settings;
|
||||
static const IconData notifications = Icons.notifications_outlined;
|
||||
static const IconData user = Icons.person;
|
||||
|
||||
// Status icons
|
||||
static const IconData playing = Icons.equalizer;
|
||||
static const IconData success = Icons.check_circle;
|
||||
static const IconData error = Icons.error;
|
||||
static const IconData warning = Icons.warning;
|
||||
static const IconData info = Icons.info;
|
||||
}
|
||||
|
||||
/// Unified icon sizes matching web client
|
||||
class AppIconSizes {
|
||||
static const double xs = 16.0;
|
||||
static const double sm = 20.0;
|
||||
static const double md = 24.0;
|
||||
static const double lg = 32.0;
|
||||
static const double xl = 48.0;
|
||||
static const double xxl = 64.0;
|
||||
|
||||
// Navigation icons
|
||||
static const double navigationSize = sm;
|
||||
|
||||
// Media control icons
|
||||
static const double mediaControlSize = lg;
|
||||
static const double mediaControlSmallSize = md;
|
||||
|
||||
// Content icons
|
||||
static const double contentIconSize = md;
|
||||
static const double contentIconLargeSize = lg;
|
||||
|
||||
// Action icons
|
||||
static const double actionIconSize = sm;
|
||||
static const double actionIconLargeSize = md;
|
||||
|
||||
// Status icons
|
||||
static const double statusIconSize = sm;
|
||||
static const double statusIconLargeSize = md;
|
||||
}
|
||||
|
||||
/// Icon widget with consistent styling
|
||||
class AppIcon extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final double? size;
|
||||
final Color? color;
|
||||
|
||||
const AppIcon({
|
||||
super.key,
|
||||
required this.icon,
|
||||
this.size,
|
||||
this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Icon(
|
||||
icon,
|
||||
size: size ?? AppIconSizes.contentIconSize,
|
||||
color: color ?? Theme.of(context).colorScheme.onSurface,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Unified spacing constants matching web client design tokens exactly
|
||||
class AppSpacing {
|
||||
// Base spacing unit (4px) matching web client
|
||||
static const double xs = 4.0; // 0.25rem = $smallest
|
||||
static const double sm = 8.0; // 0.5rem = $smaller
|
||||
static const double md = 12.0; // 0.75rem
|
||||
static const double lg = 16.0; // 1rem = $small
|
||||
static const double xl = 20.0; // 1.25rem
|
||||
static const double xxl = 24.0; // 1.5rem = $medium
|
||||
static const double xxxl = 32.0; // 2rem = $large
|
||||
static const double larger = 32.0; // $larger = 2rem
|
||||
|
||||
// Web client exact sizing from _variables.scss
|
||||
static const double bannerHeight = 288.0; // $banner-height: 18rem
|
||||
static const double songItemHeight = 64.0; // $song-item-height: 4rem
|
||||
static const double contentPaddingBottom = 32.0; // $content-padding-bottom: 2rem
|
||||
static const double navHeight = 72.0; // $navheight: 4.5rem
|
||||
static const double cardWidth = 172.0; // $cardwidth: 10.75rem
|
||||
static const double maxPadLeft = 80.0; // $maxpadleft: 5rem
|
||||
static const double padBottom = 64.0; // $padbottom: 4rem
|
||||
|
||||
// Web client specific component sizing
|
||||
static const double buttonHeight = 36.0; // 2.25rem from basic.scss
|
||||
static const double buttonMoreWidth = 40.0; // 2.5rem from basic.scss
|
||||
static const double progressBarHeight = 4.8; // 0.3rem from ProgressBar.scss
|
||||
static const double searchHeight = 36.0; // 2.25rem from inputs.scss
|
||||
static const double tabHeight = 32.0; // 2rem from search-tabheaders.scss
|
||||
static const double stateSize = 32.0; // 2rem from state.scss
|
||||
static const double explicitIconWidth = 14.4; // 0.9rem from basic.scss
|
||||
static const double spinnerSize = 20.0; // 1.25rem from basic.scss
|
||||
|
||||
// Grid spacing matching web client album-grid.scss
|
||||
static const double gridPadding = 16.0; // 1rem padding
|
||||
static const double gridGap = 16.0; // 1rem gap
|
||||
static const double gridGapVertical = 32.0; // 2rem vertical gap
|
||||
static const double gridMinWidth = 144.0; // 9rem min-width
|
||||
|
||||
// Consistent padding
|
||||
static const EdgeInsets paddingXS = EdgeInsets.all(xs);
|
||||
static const EdgeInsets paddingSM = EdgeInsets.all(sm);
|
||||
static const EdgeInsets paddingMD = EdgeInsets.all(md);
|
||||
static const EdgeInsets paddingLG = EdgeInsets.all(lg);
|
||||
static const EdgeInsets paddingXL = EdgeInsets.all(xl);
|
||||
|
||||
// Consistent margins
|
||||
static const EdgeInsets marginXS = EdgeInsets.all(xs);
|
||||
static const EdgeInsets marginSM = EdgeInsets.all(sm);
|
||||
static const EdgeInsets marginMD = EdgeInsets.all(md);
|
||||
static const EdgeInsets marginLG = EdgeInsets.all(lg);
|
||||
static const EdgeInsets marginXL = EdgeInsets.all(xl);
|
||||
|
||||
// Horizontal spacing
|
||||
static const EdgeInsets horizontalXS = EdgeInsets.symmetric(horizontal: xs);
|
||||
static const EdgeInsets horizontalSM = EdgeInsets.symmetric(horizontal: sm);
|
||||
static const EdgeInsets horizontalMD = EdgeInsets.symmetric(horizontal: md);
|
||||
static const EdgeInsets horizontalLG = EdgeInsets.symmetric(horizontal: lg);
|
||||
static const EdgeInsets horizontalXL = EdgeInsets.symmetric(horizontal: xl);
|
||||
|
||||
// Vertical spacing
|
||||
static const EdgeInsets verticalXS = EdgeInsets.symmetric(vertical: xs);
|
||||
static const EdgeInsets verticalSM = EdgeInsets.symmetric(vertical: sm);
|
||||
static const EdgeInsets verticalMD = EdgeInsets.symmetric(vertical: md);
|
||||
static const EdgeInsets verticalLG = EdgeInsets.symmetric(vertical: lg);
|
||||
static const EdgeInsets verticalXL = EdgeInsets.symmetric(vertical: xl);
|
||||
|
||||
// Card spacing matching web client album card
|
||||
static const EdgeInsets cardPadding = EdgeInsets.all(lg);
|
||||
static const EdgeInsets cardMargin = EdgeInsets.all(sm);
|
||||
|
||||
// List spacing
|
||||
static const EdgeInsets listPadding = EdgeInsets.symmetric(vertical: sm);
|
||||
static const double listItemSpacing = sm;
|
||||
|
||||
// Section spacing
|
||||
static const double sectionSpacing = xxl;
|
||||
static const EdgeInsets sectionPadding = EdgeInsets.all(lg);
|
||||
|
||||
// Button spacing matching web client
|
||||
static const EdgeInsets buttonPadding = EdgeInsets.symmetric(horizontal: lg, vertical: md);
|
||||
|
||||
// Form spacing
|
||||
static const double formFieldSpacing = md;
|
||||
static const EdgeInsets formPadding = EdgeInsets.all(lg);
|
||||
|
||||
// Animation and timing constants matching web client
|
||||
static const Duration transitionFast = Duration(milliseconds: 200); // 0.2s ease-out
|
||||
static const Duration transitionNormal = Duration(milliseconds: 250); // 0.25s ease
|
||||
static const Duration transitionSlow = Duration(milliseconds: 300); // 0.3s ease
|
||||
static const Duration spinnerDuration = Duration(milliseconds: 450); // 0.45s linear infinite
|
||||
static const Duration pulseDuration = Duration(milliseconds: 600); // 0.6s infinite
|
||||
static const Duration pulseDelay = Duration(milliseconds: 120); // $i * 0.12s
|
||||
|
||||
// Z-index values matching web client
|
||||
static const int dimmerZIndex = 1001; // From Global/index.scss
|
||||
}
|
||||
|
||||
/// Unified border radius constants matching web client exactly
|
||||
class AppBorderRadius {
|
||||
static const double xs = 4.0; // 0.25rem
|
||||
static const double sm = 8.0; // 0.5rem = $small
|
||||
static const double md = 12.0; // 0.75rem
|
||||
static const double lg = 16.0; // 1rem = $rounded
|
||||
static const double xl = 20.0; // 1.25rem = $rounded-lg
|
||||
static const double xxl = 24.0; // 1.5rem = $rounded-md
|
||||
static const double circular = 160.0; // 10rem = .circular
|
||||
static const double full = 9999.0;
|
||||
|
||||
// Web client specific border radius values
|
||||
static const double progressBar = 5.0; // 5px from ProgressBar.scss
|
||||
static const double input = 3.0; // 3px from inputs.scss
|
||||
static const double scrollbar = 16.0; // 16px from scrollbars.scss
|
||||
static const double searchInput = 3.0; // 3px from inputs.scss
|
||||
static const double duration = 8.0; // 0.5rem from BottomBar.scss
|
||||
static const double dragImage = 4.0; // $smaller from basic.scss
|
||||
static const double badge = 4.0; // $smaller from basic.scss
|
||||
static const double explicitIcon = 4.0; // $smaller from basic.scss
|
||||
|
||||
static BorderRadius circularXS = BorderRadius.circular(xs);
|
||||
static BorderRadius circularSM = BorderRadius.circular(sm);
|
||||
static BorderRadius circularMD = BorderRadius.circular(md);
|
||||
static BorderRadius circularLG = BorderRadius.circular(lg);
|
||||
static BorderRadius circularXL = BorderRadius.circular(xl);
|
||||
static BorderRadius circularXXL = BorderRadius.circular(xxl);
|
||||
static BorderRadius circularFull = BorderRadius.circular(full);
|
||||
static BorderRadius circularCircular = BorderRadius.circular(circular);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
enum AuthState {
|
||||
loggedOut,
|
||||
authenticating,
|
||||
authenticated,
|
||||
error;
|
||||
|
||||
String get displayName {
|
||||
switch (this) {
|
||||
case AuthState.loggedOut:
|
||||
return 'Logged Out';
|
||||
case AuthState.authenticating:
|
||||
return 'Authenticating';
|
||||
case AuthState.authenticated:
|
||||
return 'Authenticated';
|
||||
case AuthState.error:
|
||||
return 'Error';
|
||||
}
|
||||
}
|
||||
|
||||
bool get isLoggedIn => this == AuthState.authenticated;
|
||||
bool get isLoggedOut => this == AuthState.loggedOut;
|
||||
bool get isAuthenticating => this == AuthState.authenticating;
|
||||
bool get hasError => this == AuthState.error;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
enum RepeatMode {
|
||||
off,
|
||||
one,
|
||||
all;
|
||||
|
||||
String get displayName {
|
||||
switch (this) {
|
||||
case RepeatMode.off:
|
||||
return 'Off';
|
||||
case RepeatMode.one:
|
||||
return 'Repeat One';
|
||||
case RepeatMode.all:
|
||||
return 'Repeat All';
|
||||
}
|
||||
}
|
||||
|
||||
RepeatMode next() {
|
||||
switch (this) {
|
||||
case RepeatMode.off:
|
||||
return RepeatMode.all;
|
||||
case RepeatMode.all:
|
||||
return RepeatMode.one;
|
||||
case RepeatMode.one:
|
||||
return RepeatMode.off;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
enum ShuffleMode {
|
||||
off,
|
||||
on;
|
||||
|
||||
String get displayName {
|
||||
switch (this) {
|
||||
case ShuffleMode.off:
|
||||
return 'Off';
|
||||
case ShuffleMode.on:
|
||||
return 'On';
|
||||
}
|
||||
}
|
||||
|
||||
ShuffleMode toggle() {
|
||||
switch (this) {
|
||||
case ShuffleMode.off:
|
||||
return ShuffleMode.on;
|
||||
case ShuffleMode.on:
|
||||
return ShuffleMode.off;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AppTheme {
|
||||
// Unified color scheme matching web client exactly
|
||||
static const Color primaryColor = Color(0xFF006EFF); // $highlight-blue
|
||||
static const Color secondaryColor = Color(0xFF8B5CF6); // --color-secondary
|
||||
static const Color tertiaryColor = Color(0xFF10B981); // --color-accent
|
||||
|
||||
// Web client exact colors
|
||||
static const Color highlightBlue = Color(0xFF006EFF); // $highlight-blue
|
||||
static const Color darkestBlue = Color(0xFF234ECE); // $darkestblue
|
||||
static const Color darkBlue = Color(0xFF055EE2); // $darkblue
|
||||
|
||||
// Apple human design guideline colors (exact match)
|
||||
static const Color black = Color(0xFF181A1C); // $black
|
||||
static const Color white = Color(0xFFFFFFDE); // $white (with alpha)
|
||||
static const Color gray = Color(0xFF1A1919); // $gray
|
||||
static const Color gray1 = Color(0xFF8E8E93); // $gray1
|
||||
static const Color gray2 = Color(0xFF636366); // $gray2
|
||||
static const Color gray3 = Color(0xFF48484A); // $gray3
|
||||
static const Color gray4 = Color(0xFF3A3A3C); // $gray4
|
||||
static const Color gray5 = Color(0xFF2C2C2E); // $gray5
|
||||
static const Color body = Color(0xFF000000); // $body
|
||||
|
||||
// Semantic colors (exact match)
|
||||
static const Color red = Color(0xFFF7635C); // $red
|
||||
static const Color blue = Color(0xFF0A84FF); // $blue
|
||||
static const Color green = Color(0xFF5EF784); // $green
|
||||
static const Color yellow = Color(0xFFFFD60A); // $yellow
|
||||
static const Color orange = Color(0xFFFF9F0A); // $orange
|
||||
static const Color pink = Color(0xFFFF375F); // $pink
|
||||
static const Color purple = Color(0xFFBF5AF2); // $purple
|
||||
static const Color brown = Color(0xFFAC8E68); // $brown
|
||||
static const Color indigo = Color(0xFF5E5CE6); // $indigo
|
||||
static const Color teal = Color(0xFF40C8E0); // $teal
|
||||
static const Color lightBrown = Color(0xFFEBCA89); // $lightbrown
|
||||
|
||||
static const Color surfaceColor = Color(0xFFFAFAFA); // --color-surface
|
||||
static const Color surfaceVariantColor = Color(0xFFF5F5F5); // --color-surface-variant
|
||||
static const Color backgroundColor = Color(0xFFFFFFFF); // --color-background
|
||||
|
||||
static const Color onPrimaryColor = Color(0xFFFFFFFF); // --color-on-primary
|
||||
static const Color onSecondaryColor = Color(0xFFFFFFFF); // --color-on-secondary
|
||||
static const Color onTertiaryColor = Color(0xFFFFFFFF); // --color-on-accent
|
||||
static const Color onSurfaceColor = Color(0xFF1C1C1C); // --color-on-surface
|
||||
static const Color onBackgroundColor = Color(0xFF1C1C1C); // --color-on-background
|
||||
|
||||
static const Color outlineColor = Color(0xFFE5E7EB); // --color-border
|
||||
static const Color outlineVariantColor = Color(0xFFF3F4F6); // --color-divider
|
||||
|
||||
// Status colors
|
||||
static const Color successColor = Color(0xFF10B981);
|
||||
static const Color warningColor = Color(0xFFF59E0B);
|
||||
static const Color errorColor = Color(0xFFEF4444);
|
||||
static const Color infoColor = Color(0xFF3B82F6);
|
||||
|
||||
static ThemeData lightTheme = ThemeData(
|
||||
useMaterial3: true,
|
||||
// Exact font family matching web client with fallbacks
|
||||
fontFamily: 'SF Compact Display',
|
||||
colorScheme: const ColorScheme.light(
|
||||
primary: primaryColor,
|
||||
secondary: secondaryColor,
|
||||
tertiary: tertiaryColor,
|
||||
surface: surfaceColor,
|
||||
surfaceVariant: surfaceVariantColor,
|
||||
background: backgroundColor,
|
||||
onPrimary: onPrimaryColor,
|
||||
onSecondary: onSecondaryColor,
|
||||
onTertiary: onTertiaryColor,
|
||||
onSurface: onSurfaceColor,
|
||||
onBackground: onBackgroundColor,
|
||||
outline: outlineColor,
|
||||
outlineVariant: outlineVariantColor,
|
||||
),
|
||||
// Consistent transitions matching web client
|
||||
pageTransitionsTheme: const PageTransitionsTheme(
|
||||
builders: {
|
||||
TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
|
||||
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
|
||||
TargetPlatform.linux: FadeUpwardsPageTransitionsBuilder(),
|
||||
TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
|
||||
TargetPlatform.windows: FadeUpwardsPageTransitionsBuilder(),
|
||||
},
|
||||
),
|
||||
appBarTheme: const AppBarTheme(
|
||||
centerTitle: true,
|
||||
elevation: 0,
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: onSurfaceColor,
|
||||
),
|
||||
cardTheme: CardThemeData(
|
||||
elevation: 0, // Match web client flat design
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8), // Match web client rounded-sm ($small)
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), // Consistent padding
|
||||
elevation: 0, // Match web client flat design
|
||||
backgroundColor: primaryColor,
|
||||
foregroundColor: onPrimaryColor,
|
||||
textStyle: const TextStyle(
|
||||
fontFamily: 'SF Compact Display',
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
fontSize: 14, // Match web client font-size (0.9rem)
|
||||
),
|
||||
),
|
||||
),
|
||||
textTheme: const TextTheme(
|
||||
headlineLarge: TextStyle(
|
||||
fontSize: 36, // Match web client larger headings
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
letterSpacing: 0,
|
||||
height: 1.2,
|
||||
),
|
||||
headlineMedium: TextStyle(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
letterSpacing: 0,
|
||||
height: 1.2,
|
||||
),
|
||||
headlineSmall: TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
letterSpacing: 0,
|
||||
height: 1.2,
|
||||
),
|
||||
titleLarge: TextStyle(
|
||||
fontSize: 20, // Match web client title size
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
letterSpacing: 0,
|
||||
height: 1.3,
|
||||
),
|
||||
titleMedium: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500, // Match web client font-weight
|
||||
letterSpacing: 0.15,
|
||||
height: 1.3,
|
||||
),
|
||||
titleSmall: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
letterSpacing: 0.1,
|
||||
height: 1.3,
|
||||
),
|
||||
bodyLarge: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w400, // Match web client font-weight
|
||||
letterSpacing: 0.5,
|
||||
height: 1.4,
|
||||
),
|
||||
bodyMedium: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400, // Match web client font-weight
|
||||
letterSpacing: 0.25,
|
||||
height: 1.4,
|
||||
),
|
||||
bodySmall: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400, // Match web client font-weight
|
||||
letterSpacing: 0.4,
|
||||
height: 1.4,
|
||||
),
|
||||
labelLarge: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
letterSpacing: 0.1,
|
||||
height: 1.2,
|
||||
),
|
||||
labelMedium: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
letterSpacing: 0.5,
|
||||
height: 1.2,
|
||||
),
|
||||
labelSmall: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
letterSpacing: 0.5,
|
||||
height: 1.2,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
static ThemeData darkTheme = ThemeData(
|
||||
useMaterial3: true,
|
||||
// Exact font family matching web client with fallbacks
|
||||
fontFamily: 'SF Compact Display',
|
||||
colorScheme: const ColorScheme.dark(
|
||||
primary: Color(0xFF4A90E2), // Lighter version of $highlight-blue for dark mode
|
||||
secondary: Color(0xFFA78BFA), // Lighter secondary for dark mode
|
||||
tertiary: Color(0xFF34D399), // Lighter accent for dark mode
|
||||
surface: gray4, // Match web client $gray4 exactly
|
||||
surfaceVariant: gray5, // Match web client $gray5 exactly
|
||||
background: body, // Match web client $body exactly
|
||||
onPrimary: Color(0xFF1C1C1C), // Dark text on light primary
|
||||
onSecondary: Color(0xFF1C1C1C), // Dark text on light secondary
|
||||
onTertiary: Color(0xFF1C1C1C), // Dark text on light accent
|
||||
onSurface: white, // Match web client $white
|
||||
onBackground: white, // Match web client $white
|
||||
outline: gray3, // Match web client $gray4
|
||||
outlineVariant: gray4, // Match web client $gray5
|
||||
),
|
||||
appBarTheme: const AppBarTheme(
|
||||
centerTitle: true,
|
||||
elevation: 0,
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: white,
|
||||
),
|
||||
cardTheme: CardThemeData(
|
||||
elevation: 0, // Match web client flat design
|
||||
color: gray4, // Match web client card background
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8), // Match web client rounded-sm ($small)
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), // Consistent padding
|
||||
elevation: 0, // Match web client flat design
|
||||
backgroundColor: const Color(0xFF4A90E2), // Updated primary color for dark mode
|
||||
foregroundColor: const Color(0xFF1C1C1C), // Dark text on light primary
|
||||
textStyle: const TextStyle(
|
||||
fontFamily: 'SF Compact Display',
|
||||
fontWeight: FontWeight.w700, // Match web client font-weight
|
||||
fontSize: 14, // Match web client font-size (0.9rem)
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../data/models/album_model.dart';
|
||||
import '../../core/constants/app_spacing.dart';
|
||||
import '../../core/themes/app_theme.dart';
|
||||
|
||||
class AlbumCard extends StatefulWidget {
|
||||
final AlbumModel album;
|
||||
final VoidCallback? onTap;
|
||||
final double? width;
|
||||
final double? height;
|
||||
|
||||
const AlbumCard({
|
||||
super.key,
|
||||
required this.album,
|
||||
this.onTap,
|
||||
this.width,
|
||||
this.height,
|
||||
});
|
||||
|
||||
@override
|
||||
State<AlbumCard> createState() => _AlbumCardState();
|
||||
}
|
||||
|
||||
class _AlbumCardState extends State<AlbumCard> {
|
||||
bool _isHovered = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MouseRegion(
|
||||
onEnter: (_) => setState(() => _isHovered = true),
|
||||
onExit: (_) => setState(() => _isHovered = false),
|
||||
child: Card(
|
||||
clipBehavior: Clip.antiAlias,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: AppBorderRadius.circularLG,
|
||||
),
|
||||
color: _isHovered ? AppTheme.gray5 : null, // Match web client hover background
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: AppBorderRadius.circularLG,
|
||||
child: Container(
|
||||
width: width ?? 160,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Album Art
|
||||
Expanded(
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.surfaceVariant,
|
||||
borderRadius: AppBorderRadius.circularLG,
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: AppBorderRadius.circularLG,
|
||||
child: Stack(
|
||||
children: [
|
||||
if (album.image.isNotEmpty)
|
||||
Image.network(
|
||||
album.image,
|
||||
fit: BoxFit.cover,
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return _buildDefaultAlbumArt(context);
|
||||
},
|
||||
)
|
||||
else
|
||||
_buildDefaultAlbumArt(context),
|
||||
// Gradient overlay matching web client
|
||||
Positioned.fill(
|
||||
child: AnimatedOpacity(
|
||||
opacity: _isHovered ? 1.0 : 0.0,
|
||||
duration: AppSpacing.transitionNormal, // 0.25s ease from web client
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.bottomCenter,
|
||||
end: Alignment.topCenter,
|
||||
colors: [
|
||||
Colors.black.withValues(alpha: 0.6),
|
||||
Colors.transparent,
|
||||
],
|
||||
stops: const [0.0, 0.8],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// Play button overlay matching web client PlayBtn.vue exactly
|
||||
Positioned(
|
||||
bottom: 12,
|
||||
right: 12,
|
||||
child: AnimatedContainer(
|
||||
duration: AppSpacing.transitionNormal,
|
||||
transform: Matrix4.translationValues(
|
||||
0,
|
||||
_isHovered ? 0 : 16, // translateY(1rem) = 16px
|
||||
0,
|
||||
),
|
||||
child: AnimatedOpacity(
|
||||
opacity: _isHovered ? 1.0 : 0.0,
|
||||
duration: AppSpacing.transitionNormal,
|
||||
child: Container(
|
||||
width: 40, // 2.5rem = 40px
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: AppTheme.darkBlue, // $darkblue exact match
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
// Match web client shadow effects
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.3),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Icon(
|
||||
Icons.play_arrow,
|
||||
color: AppTheme.onPrimaryColor,
|
||||
size: 28, // 1.75rem = 28px
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Album Info
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
album.displayTitle,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 15, // 0.95rem from web client
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
album.artistNames,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.75),
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 13, // 0.8rem from web client
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
if (album.year.isNotEmpty) ...[
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
album.year,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.6),
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDefaultAlbumArt(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
Theme.of(context).colorScheme.primary.withOpacity(0.7),
|
||||
Theme.of(context).colorScheme.secondary.withOpacity(0.7),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.album,
|
||||
size: 48,
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../shared/providers/audio_provider.dart';
|
||||
|
||||
class MiniPlayer extends StatelessWidget {
|
||||
const MiniPlayer({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Consumer<AudioProvider>(
|
||||
builder: (context, audioProvider, child) {
|
||||
final currentTrack = audioProvider.currentTrack;
|
||||
|
||||
if (currentTrack == null) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
return Container(
|
||||
height: 80,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.surface,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, -2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
// Navigate to full player
|
||||
Navigator.pushNamed(context, '/player');
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
|
||||
child: Row(
|
||||
children: [
|
||||
// Album Art
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
child: Container(
|
||||
width: 56,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.surfaceVariant,
|
||||
),
|
||||
child: currentTrack.image.isNotEmpty
|
||||
? Image.network(
|
||||
currentTrack.image,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return _buildDefaultArt(context);
|
||||
},
|
||||
)
|
||||
: _buildDefaultArt(context),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 12),
|
||||
|
||||
// Track Info
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
currentTrack.displayTitle,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
currentTrack.artistNames,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Progress Indicator
|
||||
if (audioProvider.duration.inMilliseconds > 0)
|
||||
SizedBox(
|
||||
width: 40,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
'${audioProvider.positionFormatted} / ${audioProvider.durationFormatted}',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
fontSize: 10,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
LinearProgressIndicator(
|
||||
value: audioProvider.progress,
|
||||
backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 8),
|
||||
|
||||
// Play/Pause Button
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
if (audioProvider.isPlaying) {
|
||||
audioProvider.pause();
|
||||
} else {
|
||||
audioProvider.play();
|
||||
}
|
||||
},
|
||||
icon: audioProvider.isLoading
|
||||
? SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
),
|
||||
)
|
||||
: Icon(
|
||||
audioProvider.isPlaying ? Icons.pause : Icons.play_arrow,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDefaultArt(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
Theme.of(context).colorScheme.primary.withOpacity(0.7),
|
||||
Theme.of(context).colorScheme.secondary.withOpacity(0.7),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.music_note,
|
||||
size: 24,
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../data/models/track_model.dart';
|
||||
|
||||
class TrackListTile extends StatelessWidget {
|
||||
final TrackModel track;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onPlay;
|
||||
final bool isPlaying;
|
||||
final bool showAlbumArt;
|
||||
final Widget? trailing;
|
||||
|
||||
const TrackListTile({
|
||||
super.key,
|
||||
required this.track,
|
||||
this.onTap,
|
||||
this.onPlay,
|
||||
this.isPlaying = false,
|
||||
this.showAlbumArt = true,
|
||||
this.trailing,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListTile(
|
||||
onTap: onTap,
|
||||
dense: true,
|
||||
leading: showAlbumArt
|
||||
? ClipRRect(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
child: Container(
|
||||
width: 48,
|
||||
height: 48,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.surfaceVariant,
|
||||
),
|
||||
child: track.image.isNotEmpty
|
||||
? Image.network(
|
||||
track.image,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return _buildDefaultArt(context);
|
||||
},
|
||||
)
|
||||
: _buildDefaultArt(context),
|
||||
),
|
||||
)
|
||||
: SizedBox(
|
||||
width: 24,
|
||||
child: Center(
|
||||
child: isPlaying
|
||||
? Icon(
|
||||
Icons.equalizer,
|
||||
size: 16,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
)
|
||||
: Text(
|
||||
'${track.track}',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
title: Text(
|
||||
track.displayTitle,
|
||||
style: TextStyle(
|
||||
fontWeight: isPlaying ? FontWeight.w600 : FontWeight.normal,
|
||||
color: isPlaying
|
||||
? Theme.of(context).colorScheme.primary
|
||||
: Theme.of(context).colorScheme.onSurface,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
subtitle: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
track.artistNames,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
if (track.displayAlbum.isNotEmpty)
|
||||
Text(
|
||||
track.displayAlbum,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
trailing: trailing ??
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
track.durationFormatted,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
if (onPlay != null)
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
isPlaying ? Icons.pause : Icons.play_arrow,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
onPressed: onPlay,
|
||||
visualDensity: VisualDensity.compact,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDefaultArt(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
Theme.of(context).colorScheme.primary.withOpacity(0.7),
|
||||
Theme.of(context).colorScheme.secondary.withOpacity(0.7),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.music_note,
|
||||
size: 24,
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user