Refactor HomePage layout to separate title and audio player bar, enhancing clarity and organization
This commit is contained in:
@@ -405,7 +405,7 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
|
||||
backgroundColor: AppTheme.primaryBackground,
|
||||
body: Stack(
|
||||
children: [
|
||||
// Top bar: title, audio bar (if visible), nav buttons, all in a centered row
|
||||
// Top bar: title and nav buttons
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
@@ -417,51 +417,25 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
|
||||
children: [
|
||||
// Left spacer
|
||||
const Expanded(child: SizedBox()),
|
||||
// Center: title and audio bar
|
||||
// Center: title only
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Builder(
|
||||
builder: (context) {
|
||||
final screenWidth = MediaQuery.of(
|
||||
context,
|
||||
).size.width;
|
||||
final fontSize = screenWidth < 600 ? 24.0 : 48.0;
|
||||
return Text(
|
||||
'b0esche.cloud',
|
||||
style: TextStyle(
|
||||
fontFamily: 'PixelatedElegance',
|
||||
fontSize: fontSize,
|
||||
color: AppTheme.primaryText,
|
||||
decoration: TextDecoration.underline,
|
||||
decorationColor: AppTheme.primaryText,
|
||||
fontFeatures: const [
|
||||
FontFeature.slashedZero(),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
if (_showAudioBar &&
|
||||
_audioFileName != null &&
|
||||
_audioFileUrl != null) ...[
|
||||
const SizedBox(width: 24),
|
||||
SlideTransition(
|
||||
position: _audioBarOffset,
|
||||
child: AudioPlayerBar(
|
||||
fileName: _audioFileName!,
|
||||
fileUrl: _audioFileUrl!,
|
||||
onClose: () {
|
||||
_audioBarController.reverse();
|
||||
setState(() => _showAudioBar = false);
|
||||
},
|
||||
),
|
||||
child: Builder(
|
||||
builder: (context) {
|
||||
final screenWidth = MediaQuery.of(context).size.width;
|
||||
final fontSize = screenWidth < 600 ? 24.0 : 48.0;
|
||||
return Text(
|
||||
'b0esche.cloud',
|
||||
style: TextStyle(
|
||||
fontFamily: 'PixelatedElegance',
|
||||
fontSize: fontSize,
|
||||
color: AppTheme.primaryText,
|
||||
decoration: TextDecoration.underline,
|
||||
decorationColor: AppTheme.primaryText,
|
||||
fontFeatures: const [FontFeature.slashedZero()],
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
// Right: nav buttons
|
||||
@@ -498,6 +472,28 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
|
||||
),
|
||||
),
|
||||
),
|
||||
// Audio player bar (absolute, below title)
|
||||
if (_showAudioBar &&
|
||||
_audioFileName != null &&
|
||||
_audioFileUrl != null)
|
||||
Positioned(
|
||||
top: 56, // adjust as needed for spacing below top bar
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: SlideTransition(
|
||||
position: _audioBarOffset,
|
||||
child: Center(
|
||||
child: AudioPlayerBar(
|
||||
fileName: _audioFileName!,
|
||||
fileUrl: _audioFileUrl!,
|
||||
onClose: () {
|
||||
_audioBarController.reverse();
|
||||
setState(() => _showAudioBar = false);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Center(
|
||||
child: BlocBuilder<AuthBloc, AuthState>(
|
||||
builder: (context, state) {
|
||||
|
||||
@@ -50,11 +50,16 @@ class _AudioPlayerBarState extends State<AudioPlayerBar>
|
||||
Future<void> _initAudio() async {
|
||||
try {
|
||||
await _audioPlayer.setUrl(widget.fileUrl);
|
||||
setState(() {
|
||||
_duration = _audioPlayer.duration ?? Duration.zero;
|
||||
_isLoading = false;
|
||||
// Wait until duration is available
|
||||
_audioPlayer.durationStream.firstWhere((d) => d != null).then((d) async {
|
||||
setState(() {
|
||||
_duration = d ?? Duration.zero;
|
||||
_isLoading = false;
|
||||
});
|
||||
await _audioPlayer.play(); // Start playback automatically
|
||||
// Animate play icon
|
||||
if (mounted) _iconController.forward();
|
||||
});
|
||||
_audioPlayer.play(); // Start playback automatically
|
||||
_audioPlayer.positionStream.listen((pos) {
|
||||
setState(() {
|
||||
_position = pos;
|
||||
|
||||
Reference in New Issue
Block a user