From a219b8c1a2b5aacfdc849f9480332a065db2e522 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leon=20B=C3=B6sche?= <leonboesche1999@gmail.com>
Date: Sat, 17 Jan 2026 01:51:43 +0100
Subject: [PATCH] Refactor HomePage layout to separate title and audio player
 bar, enhancing clarity and organization

---
 b0esche_cloud/lib/pages/home_page.dart        | 82 +++++++++----------
 .../lib/widgets/audio_player_bar.dart         | 13 ++-
 2 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/b0esche_cloud/lib/pages/home_page.dart b/b0esche_cloud/lib/pages/home_page.dart
index 6024283..388722d 100644
--- a/b0esche_cloud/lib/pages/home_page.dart
+++ b/b0esche_cloud/lib/pages/home_page.dart
@@ -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) {
diff --git a/b0esche_cloud/lib/widgets/audio_player_bar.dart b/b0esche_cloud/lib/widgets/audio_player_bar.dart
index 6195435..5ce5703 100644
--- a/b0esche_cloud/lib/widgets/audio_player_bar.dart
+++ b/b0esche_cloud/lib/widgets/audio_player_bar.dart
@@ -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;