improved playback history screen

- still needs a proper design and improved implementation
jmshrv · Sep 20, 2023 · 7cfa464 · 7cfa464
1 parent e791df6
commit 7cfa464
Show file tree

Hide file tree

Showing 3 changed files with 604 additions and 72 deletions.
diff --git a/lib/components/PlaybackHistoryScreen/playback_history_list.dart b/lib/components/PlaybackHistoryScreen/playback_history_list.dart
@@ -9,6 +9,7 @@ import '../../services/playback_history_service.dart';
 import '../../models/jellyfin_models.dart' as jellyfin_models;
 import '../album_image.dart';
 import '../../services/process_artist.dart';
+import 'playback_history_list_tile.dart';
 
 class PlaybackHistoryList extends StatelessWidget {
   const PlaybackHistoryList({Key? key}) : super(key: key);
@@ -19,95 +20,81 @@ class PlaybackHistoryList extends StatelessWidget {
     final audioServiceHelper = GetIt.instance<AudioServiceHelper>();
 
     List<HistoryItem>? history;
+    List<MapEntry<DateTime, List<HistoryItem>>> groupedHistory;
 
-    return Scrollbar(
-      child: StreamBuilder<List<HistoryItem>>(
+    return StreamBuilder<List<HistoryItem>>(
         stream: playbackHistoryService.historyStream,
         builder: (context, snapshot) {
           if (snapshot.hasData) {
 
             history = snapshot.data;
-
-            return ListView.builder(
-              itemCount: history!.length,
-              reverse: true,
-              padding: const EdgeInsets.only(bottom: 160.0),
-              itemBuilder: (context, index) {
-                // return ListTile(
-                //   title: Text(history![index].item.item.title),
-                //   subtitle: Text(history![index].item.item.artist!),
-                // );
-                return Card(
-                  shape: RoundedRectangleBorder(
-                    borderRadius: BorderRadius.circular(12.0),
-                  ),
-                  child: ListTile(
-                    visualDensity: VisualDensity.compact,
-                    minVerticalPadding: 0.0,
-                    contentPadding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 8.0),
-                    leading: AlbumImage(
-                      borderRadius: const BorderRadius.only(
-                        topLeft: Radius.circular(7.0),
-                        bottomLeft: Radius.circular(7.0),
-                      ),
-                      item: history![index].item.item
-                                  .extras?["itemJson"] == null
-                              ? null
-                              : jellyfin_models.BaseItemDto.fromJson(history![index].item.item.extras?["itemJson"]),
-                    ),
-                    title: Text(
-                        history![index].item.item.title,
-                    ),
-                    subtitle: Text(processArtist(
-                        history![index].item.item.artist,
-                        context)),
-                    trailing: Container(
-                      alignment: Alignment.centerRight,
-                      margin: const EdgeInsets.only(right: 0.0),
-                      width: 95.0,
-                      height: 50.0,
-                      child: Row(
-                        mainAxisSize: MainAxisSize.min,  
+            // groupedHistory = playbackHistoryService.getHistoryGroupedByDate();
+            groupedHistory = playbackHistoryService.getHistoryGroupedByHour();
+
+            print(groupedHistory);
+
+            return CustomScrollView(
+              // use nested SliverList.builder()s to show history items grouped by date
+              slivers: groupedHistory.map((group) {
+                return SliverList(
+                  delegate: SliverChildBuilderDelegate(
+                    (context, index) {
+
+                      final actualIndex = group.value.length - index - 1;
+
+                      final historyItem = Card(
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(12.0),
+                        ),
+                        child: PlaybackHistoryListTile(
+                          actualIndex: actualIndex,
+                          item: group.value[actualIndex],
+                          audioServiceHelper: audioServiceHelper,
+                          onTap: () {
+                            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+                              content: Text(AppLocalizations.of(context)!.startingInstantMix),
+                            ));
+
+                            audioServiceHelper.startInstantMixForItem(jellyfin_models.BaseItemDto.fromJson(group.value[actualIndex].item.item.extras?["itemJson"])).catchError((e) {
+                              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+                                content: Text(AppLocalizations.of(context)!.anErrorHasOccured),
+                              ));
+                            });
+                          },
+                        ),
+                      );
+
+                      return index == 0 ?
+                      Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
-                          Text(
-                            "${history![index].item.item.duration?.inMinutes.toString().padLeft(2, '0')}:${((history![index].item.item.duration?.inSeconds ?? 0) % 60).toString().padLeft(2, '0')}",
-                            textAlign: TextAlign.end,
-                            style: TextStyle(
-                              color: Theme.of(context).textTheme.bodySmall?.color,
+                          Padding(
+                            padding: const EdgeInsets.only(left: 16.0, top: 8.0, bottom: 4.0),
+                            child: Text(
+                              "${group.key.hour % 12} ${group.key.hour >= 12 ? "pm" : "am"}",
+                              style: const TextStyle(
+                                fontSize: 16.0,
+                              ),
                             ),
                           ),
-                          IconButton(
-                            icon: const Icon(TablerIcons.dots_vertical),
-                            iconSize: 24.0,
-                            onPressed: () async => {},
-                          ),
+                          historyItem,
                         ],
-                      ),  
-                    ),
-                    onTap: () {
-                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
-                        content: Text(AppLocalizations.of(context)!.startingInstantMix),
-                      ));
-
-                      audioServiceHelper.startInstantMixForItem(jellyfin_models.BaseItemDto.fromJson(history![index].item.item.extras?["itemJson"])).catchError((e) {
-                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
-                          content: Text(AppLocalizations.of(context)!.anErrorHasOccured),
-                        ));
-                      });
-
-                    }
-                        // await _queueService.skipByOffset(indexOffset),
-                  )
+                      )
+                      : historyItem;
+                    },
+                    childCount: group.value.length,
+                  ),
                 );
-              },
+              }).toList(),
             );
           } else {
             return const Center(
               child: CircularProgressIndicator(),
             );
           }
-        },
-      ),
+        }
+
     );
   }
+
 }