added queue page; fixed display bugs

lib/presentation/pages/currently_playing.dart

@@ -9,6 +9,7 @@ import '../widgets/album_art.dart';
 import '../widgets/next_indicator.dart';
 import '../widgets/playback_control.dart';
 import '../widgets/time_progress_indicator.dart';
+import 'queue_page.dart';
 
 class CurrentlyPlayingPage extends StatelessWidget {
   const CurrentlyPlayingPage({Key key}) : super(key: key);
@@ -110,6 +111,11 @@ class CurrentlyPlayingPage extends StatelessWidget {
   }
 
   void openQueue(BuildContext context) {
-    print('Hello World');
+    Navigator.push(
+      context,
+      MaterialPageRoute<Widget>(
+        builder: (BuildContext context) => const QueuePage(),
+      ),
+    );
   }
 }

lib/presentation/pages/queue_page.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_mobx/flutter_mobx.dart';
+import 'package:mobx/mobx.dart';
+import 'package:provider/provider.dart';
+
+import '../../domain/entities/song.dart';
+import '../state/audio_store.dart';
+import '../widgets/album_art_list_tile.dart';
+
+class QueuePage extends StatelessWidget {
+  const QueuePage({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    print('QueuePage.build');
+    final AudioStore audioStore = Provider.of<AudioStore>(context);
+
+    return Scaffold(
+      body: SafeArea(
+        child: LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints constraints) =>
+              Observer(
+            builder: (BuildContext context) {
+              print('QueuePage.build -> Observer.build');
+              final ObservableStream<List<Song>> queueStream =
+                  audioStore.queueStream;
+
+              switch (queueStream.status) {
+                case StreamStatus.active:
+                  return Padding(
+                    padding: const EdgeInsets.only(
+                      left: 12.0,
+                      right: 12.0,
+                      top: 8.0,
+                    ),
+                    child: ListView.separated(
+                      itemCount: queueStream.value.length,
+                      itemBuilder: (_, int index) {
+                        final Song song = queueStream.value[index];
+                        return AlbumArtListTile(
+                          title: song.title,
+                          subtitle: '${song.artist} • ${song.album}',
+                          albumArtPath: song.albumArtPath,
+                        );
+                      },
+                      separatorBuilder: (BuildContext context, int index) =>
+                          const Divider(
+                        height: 4.0,
+                      ),
+                    ),
+                  );
+                case StreamStatus.waiting:
+                case StreamStatus.done:
+                  return Container();
+              }
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/state/audio_store.dart

@@ -20,6 +20,7 @@ abstract class _AudioStore with Store {
   bool _initialized = false;
   final List<ReactionDisposer> _disposers = [];
 
+  // TODO: naming and usage confusing!
   @observable
   ObservableStream<Song> currentSong;
   @observable

lib/presentation/widgets/play_pause_button.dart

@@ -6,7 +6,8 @@ import '../../domain/entities/playback_state.dart';
 import '../state/audio_store.dart';
 
 class PlayPauseButton extends StatelessWidget {
-  const PlayPauseButton({Key key, this.circle = false, this.iconSize = 24.0}) : super(key: key);
+  const PlayPauseButton({Key key, this.circle = false, this.iconSize = 24.0})
+      : super(key: key);
 
   final bool circle;
   final double iconSize;
@@ -20,22 +21,25 @@ class PlayPauseButton extends StatelessWidget {
         switch (audioStore.playbackStateStream.value) {
           case PlaybackState.playing:
             return IconButton(
-              icon: circle ? const Icon(Icons.pause_circle_filled) : const Icon(Icons.pause),
+              icon: circle
+                  ? const Icon(Icons.pause_circle_filled)
+                  : const Icon(Icons.pause),
               iconSize: iconSize,
               onPressed: () {
                 audioStore.pause();
               },
             );
           case PlaybackState.paused:
+          default:
             return IconButton(
-              icon: circle ? const Icon(Icons.play_circle_filled) : const Icon(Icons.play_arrow),
+              icon: circle
+                  ? const Icon(Icons.play_circle_filled)
+                  : const Icon(Icons.play_arrow),
               iconSize: iconSize,
               onPressed: () {
                 audioStore.play();
               },
             );
-          default:
-            return Container(height: 0, width: 0,);
         }
       },
     );

lib/presentation/widgets/time_progress_indicator.dart

@@ -14,6 +14,8 @@ class TimeProgressIndicator extends StatelessWidget {
 
     return Observer(
       builder: (BuildContext context) {
+        final int duration = audioStore.song?.duration ?? 1000;
+
         return Padding(
           padding: const EdgeInsets.symmetric(horizontal: 16.0),
           child: Row(
@@ -24,14 +26,14 @@ class TimeProgressIndicator extends StatelessWidget {
               ),
               Expanded(
                 child: Container(
-                  child: LinearProgressIndicator(value: audioStore.currentPositionStream.value / audioStore.currentSong.value.duration),
+                  child: LinearProgressIndicator(value: audioStore.currentPositionStream.value / duration),
                   height: 3.0,
                 ),
               ),
               Container(
                 width: 10,
               ),
-              Text(msToTimeString(audioStore.currentSong.value.duration)),
+              Text(msToTimeString(duration)),
             ],
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           ),