Files
fuckKomet/lib/widgets/bottom_sheet_music_player.dart
2025-11-30 23:30:40 +03:00

746 lines
29 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import '../services/music_player_service.dart';
class BottomSheetMusicPlayer extends StatefulWidget {
const BottomSheetMusicPlayer({super.key});
static final ValueNotifier<bool> isExpandedNotifier = ValueNotifier<bool>(
false,
);
static final ValueNotifier<bool> isFullscreenNotifier = ValueNotifier<bool>(
false,
);
@override
State<BottomSheetMusicPlayer> createState() => _BottomSheetMusicPlayerState();
}
enum _PlayerState { collapsed, expanded, fullscreen }
class _BottomSheetMusicPlayerState extends State<BottomSheetMusicPlayer>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _heightAnimation;
late Animation<double> _opacityAnimation;
_PlayerState _currentState = _PlayerState.collapsed;
static const Duration _animationDuration = Duration(milliseconds: 300);
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: _animationDuration,
);
_heightAnimation = CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOutCubic,
);
_opacityAnimation = CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
);
BottomSheetMusicPlayer.isExpandedNotifier.addListener(_onExpandedChanged);
BottomSheetMusicPlayer.isFullscreenNotifier.addListener(_onFullscreenChanged);
}
void _onExpandedChanged() {
final shouldBeExpanded = BottomSheetMusicPlayer.isExpandedNotifier.value;
if (shouldBeExpanded && _currentState == _PlayerState.collapsed) {
setState(() {
_currentState = _PlayerState.expanded;
_animationController.forward();
});
} else if (!shouldBeExpanded && _currentState != _PlayerState.collapsed) {
setState(() {
_currentState = _PlayerState.collapsed;
_animationController.reverse();
BottomSheetMusicPlayer.isFullscreenNotifier.value = false;
});
}
}
void _onFullscreenChanged() {
final shouldBeFullscreen = BottomSheetMusicPlayer.isFullscreenNotifier.value;
if (shouldBeFullscreen && _currentState != _PlayerState.fullscreen) {
setState(() {
_currentState = _PlayerState.fullscreen;
if (_animationController.value < 1.0) {
_animationController.forward();
}
});
} else if (!shouldBeFullscreen &&
_currentState == _PlayerState.fullscreen) {
setState(() {
_currentState = _PlayerState.expanded;
_animationController.value = 1.0;
});
}
}
@override
void dispose() {
BottomSheetMusicPlayer.isExpandedNotifier.removeListener(
_onExpandedChanged,
);
BottomSheetMusicPlayer.isFullscreenNotifier.removeListener(
_onFullscreenChanged,
);
_animationController.dispose();
super.dispose();
}
void _toggleExpand() {
HapticFeedback.lightImpact();
setState(() {
if (_currentState == _PlayerState.collapsed) {
// Tap on collapsed opens directly to fullscreen
_currentState = _PlayerState.fullscreen;
_animationController.forward();
BottomSheetMusicPlayer.isExpandedNotifier.value = true;
BottomSheetMusicPlayer.isFullscreenNotifier.value = true;
} else if (_currentState == _PlayerState.fullscreen) {
// From fullscreen, go to collapsed
_currentState = _PlayerState.collapsed;
_animationController.reverse();
BottomSheetMusicPlayer.isExpandedNotifier.value = false;
BottomSheetMusicPlayer.isFullscreenNotifier.value = false;
} else {
// From expanded, go to collapsed
_currentState = _PlayerState.collapsed;
_animationController.reverse();
BottomSheetMusicPlayer.isExpandedNotifier.value = false;
BottomSheetMusicPlayer.isFullscreenNotifier.value = false;
}
});
}
void _toggleFullscreen() {
HapticFeedback.mediumImpact();
setState(() {
if (_currentState == _PlayerState.fullscreen) {
_currentState = _PlayerState.expanded;
// Keep animation at 1.0 for expanded state
_animationController.value = 1.0;
BottomSheetMusicPlayer.isFullscreenNotifier.value = false;
} else {
// Transitioning from expanded to fullscreen
// Animation is already at 1.0, we'll use AnimatedContainer for smooth transition
_currentState = _PlayerState.fullscreen;
BottomSheetMusicPlayer.isFullscreenNotifier.value = true;
}
});
}
String _formatDuration(Duration duration) {
String twoDigits(int n) => n.toString().padLeft(2, '0');
final hours = duration.inHours;
final minutes = duration.inMinutes.remainder(60);
final seconds = duration.inSeconds.remainder(60);
if (hours > 0) {
return '${twoDigits(hours)}:${twoDigits(minutes)}:${twoDigits(seconds)}';
}
return '${twoDigits(minutes)}:${twoDigits(seconds)}';
}
@override
Widget build(BuildContext context) {
final musicPlayer = context.watch<MusicPlayerService>();
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final track = musicPlayer.currentTrack;
if (track == null) {
return const SizedBox.shrink();
}
return AnimatedBuilder(
animation: _heightAnimation,
builder: (context, child) {
final screenHeight = MediaQuery.of(context).size.height;
final collapsedHeight = 88.0;
final expandedHeight = screenHeight * 0.85;
final fullscreenHeight = screenHeight;
double targetHeight;
if (_currentState == _PlayerState.fullscreen) {
targetHeight = fullscreenHeight;
} else if (_currentState == _PlayerState.expanded) {
targetHeight = expandedHeight;
} else {
targetHeight = collapsedHeight;
}
// Interpolate between collapsed and target height
final currentHeight = collapsedHeight +
(targetHeight - collapsedHeight) * _heightAnimation.value;
return Material(
color: Colors.transparent,
elevation: 0,
child: AnimatedContainer(
duration: _animationDuration,
curve: Curves.easeInOutCubic,
height: currentHeight,
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest,
borderRadius: _currentState == _PlayerState.fullscreen
? BorderRadius.zero
: BorderRadius.only(
topLeft: const Radius.circular(28),
topRight: const Radius.circular(28),
bottomLeft: Radius.circular(
28 * (1 - _heightAnimation.value),
),
bottomRight: Radius.circular(
28 * (1 - _heightAnimation.value),
),
),
boxShadow: _currentState == _PlayerState.fullscreen
? []
: [
BoxShadow(
color: Colors.black.withOpacity(
0.15 * _heightAnimation.value,
),
blurRadius: 20,
offset: Offset(0, -6 * _heightAnimation.value),
),
],
),
child: ClipRRect(
borderRadius: _currentState == _PlayerState.fullscreen
? BorderRadius.zero
: BorderRadius.only(
topLeft: const Radius.circular(28),
topRight: const Radius.circular(28),
bottomLeft: Radius.circular(
28 * (1 - _heightAnimation.value),
),
bottomRight: Radius.circular(
28 * (1 - _heightAnimation.value),
),
),
child: _buildAnimatedContent(
context,
musicPlayer,
track,
colorScheme,
),
),
),
);
},
);
}
Widget _buildAnimatedContent(
BuildContext context,
MusicPlayerService musicPlayer,
MusicTrack track,
ColorScheme colorScheme,
) {
return AnimatedSwitcher(
duration: _animationDuration,
switchInCurve: Curves.easeInOutCubic,
switchOutCurve: Curves.easeInOutCubic,
transitionBuilder: (Widget child, Animation<double> animation) {
return FadeTransition(
opacity: animation,
child: SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0, 0.05),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.easeOutCubic,
),
),
child: child,
),
);
},
child: _currentState == _PlayerState.collapsed
? _buildCollapsedView(context, musicPlayer, track, colorScheme)
: _buildExpandedView(context, musicPlayer, track, colorScheme),
);
}
Widget _buildCollapsedView(
BuildContext context,
MusicPlayerService musicPlayer,
MusicTrack track,
ColorScheme colorScheme,
) {
return SafeArea(
key: const ValueKey('collapsed'),
top: false,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: _toggleExpand,
borderRadius: BorderRadius.circular(28),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
children: [
Hero(
tag: 'album-art-${track.id}',
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Container(
width: 64,
height: 64,
color: colorScheme.primaryContainer,
child: track.albumArtUrl != null
? Image.network(
track.albumArtUrl!,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return _buildAlbumArtPlaceholder(colorScheme);
},
errorBuilder: (context, error, stackTrace) =>
_buildAlbumArtPlaceholder(colorScheme),
)
: _buildAlbumArtPlaceholder(colorScheme),
),
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
track.title,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
letterSpacing: -0.2,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 6),
Text(
track.artist,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: colorScheme.onSurface.withOpacity(0.65),
fontSize: 13,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
const SizedBox(width: 12),
Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
HapticFeedback.selectionClick();
if (musicPlayer.isPlaying) {
musicPlayer.pause();
} else {
musicPlayer.resume();
}
},
borderRadius: BorderRadius.circular(24),
child: Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: colorScheme.primary,
shape: BoxShape.circle,
),
child: musicPlayer.isLoading
? Padding(
padding: const EdgeInsets.all(12),
child: CircularProgressIndicator(
strokeWidth: 2.5,
valueColor: AlwaysStoppedAnimation<Color>(
colorScheme.onPrimary,
),
),
)
: Icon(
musicPlayer.isPlaying ? Icons.pause : Icons.play_arrow,
size: 26,
color: colorScheme.onPrimary,
),
),
),
),
],
),
),
),
),
);
}
Widget _buildExpandedView(
BuildContext context,
MusicPlayerService musicPlayer,
MusicTrack track,
ColorScheme colorScheme,
) {
return SafeArea(
key: const ValueKey('expanded'),
top: _currentState == _PlayerState.fullscreen,
child: Column(
children: [
Row(
children: [
if (_currentState == _PlayerState.fullscreen)
Material(
color: Colors.transparent,
child: InkWell(
onTap: _toggleExpand,
borderRadius: BorderRadius.circular(24),
child: Container(
margin: const EdgeInsets.only(top: 8, right: 16),
padding: const EdgeInsets.all(12),
child: Icon(
Icons.fullscreen_exit_rounded,
color: colorScheme.onSurface,
size: 24,
),
),
),
),
],
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 8),
// Album art with hero animation
LayoutBuilder(
builder: (context, constraints) {
final maxWidth = constraints.maxWidth;
final albumSize = maxWidth < 380 ? maxWidth : 380.0;
return Hero(
tag: 'album-art-${track.id}',
child: Container(
width: albumSize,
height: albumSize,
margin: EdgeInsets.symmetric(
horizontal: (maxWidth - albumSize) / 2,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.25),
blurRadius: 30,
offset: const Offset(0, 12),
spreadRadius: 2,
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(32),
child: track.albumArtUrl != null
? Image.network(
track.albumArtUrl!,
fit: BoxFit.cover,
loadingBuilder:
(context, child, loadingProgress) {
if (loadingProgress == null) {
return child;
}
return _buildLargeAlbumArtPlaceholder(
context,
colorScheme,
);
},
errorBuilder:
(context, error, stackTrace) =>
_buildLargeAlbumArtPlaceholder(
context,
colorScheme,
),
)
: _buildLargeAlbumArtPlaceholder(
context,
colorScheme,
),
),
),
);
},
),
const SizedBox(height: 32),
// Track info
Text(
track.title,
style: Theme.of(context).textTheme.headlineMedium
?.copyWith(
fontWeight: FontWeight.bold,
letterSpacing: -0.5,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 12),
Text(
track.artist,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: colorScheme.onSurface.withOpacity(0.75),
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
if (track.album != null) ...[
const SizedBox(height: 8),
Text(
track.album!,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: colorScheme.onSurface.withOpacity(0.6),
),
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
const SizedBox(height: 40),
// Progress slider
Column(
children: [
SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: colorScheme.primary,
inactiveTrackColor:
colorScheme.surfaceContainerHigh,
thumbColor: colorScheme.primary,
overlayColor:
colorScheme.primary.withOpacity(0.1),
thumbShape: const RoundSliderThumbShape(
enabledThumbRadius: 8,
),
trackHeight: 4,
),
child: Slider(
value: musicPlayer.duration.inMilliseconds > 0
? (musicPlayer.position.inMilliseconds /
musicPlayer.duration.inMilliseconds)
.clamp(0.0, 1.0)
: 0.0,
onChanged: (value) {
HapticFeedback.selectionClick();
final newPosition = Duration(
milliseconds: (value *
musicPlayer.duration.inMilliseconds)
.round(),
);
musicPlayer.seek(newPosition);
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
_formatDuration(musicPlayer.position),
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(
color: colorScheme.onSurface
.withOpacity(0.7),
fontWeight: FontWeight.w500,
fontSize: 13,
),
),
Text(
_formatDuration(musicPlayer.duration),
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(
color: colorScheme.onSurface
.withOpacity(0.7),
fontWeight: FontWeight.w500,
fontSize: 13,
),
),
],
),
),
],
),
const SizedBox(height: 16),
// Control buttons
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
HapticFeedback.selectionClick();
musicPlayer.previous();
},
borderRadius: BorderRadius.circular(28),
child: Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHigh,
shape: BoxShape.circle,
),
child: Icon(
Icons.skip_previous_rounded,
size: 28,
color: colorScheme.onSurface,
),
),
),
),
const SizedBox(width: 24),
Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
HapticFeedback.mediumImpact();
if (musicPlayer.isPlaying) {
musicPlayer.pause();
} else {
musicPlayer.resume();
}
},
borderRadius: BorderRadius.circular(40),
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: colorScheme.primary,
shape: BoxShape.circle,
),
child: musicPlayer.isLoading
? Padding(
padding: const EdgeInsets.all(24),
child: CircularProgressIndicator(
strokeWidth: 3,
valueColor:
AlwaysStoppedAnimation<Color>(
colorScheme.onPrimary,
),
),
)
: Icon(
musicPlayer.isPlaying
? Icons.pause_rounded
: Icons.play_arrow_rounded,
size: 40,
color: colorScheme.onPrimary,
),
),
),
),
const SizedBox(width: 24),
Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
HapticFeedback.selectionClick();
musicPlayer.next();
},
borderRadius: BorderRadius.circular(28),
child: Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHigh,
shape: BoxShape.circle,
),
child: Icon(
Icons.skip_next_rounded,
size: 28,
color: colorScheme.onSurface,
),
),
),
),
],
),
SizedBox(
height: MediaQuery.of(context).padding.bottom + 24,
),
],
),
),
),
],
),
);
}
Widget _buildAlbumArtPlaceholder(ColorScheme colorScheme) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
colorScheme.primaryContainer,
colorScheme.primaryContainer.withOpacity(0.7),
],
),
),
child: Center(
child: Icon(
Icons.music_note_rounded,
color: colorScheme.onPrimaryContainer.withOpacity(0.7),
size: 32,
),
),
);
}
Widget _buildLargeAlbumArtPlaceholder(
BuildContext context,
ColorScheme colorScheme,
) {
return Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
colorScheme.primaryContainer,
colorScheme.primaryContainer.withOpacity(0.6),
],
),
),
child: Center(
child: Icon(
Icons.music_note_rounded,
color: colorScheme.onPrimaryContainer.withOpacity(0.6),
size: 100,
),
),
);
}
}