Refactor HomePage layout to separate title and audio player bar, enhancing clarity and organization

This commit is contained in:
Leon Bösche
2026-01-17 01:51:43 +01:00
parent 2c565c3b50
commit a219b8c1a2
2 changed files with 48 additions and 47 deletions

View File

@@ -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) {

View File

@@ -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;