finalize view

Author: Vito0912

lib/features/library/list/list_view.dart

@@ -0,0 +1,69 @@
+import 'package:abs_flutter/api/library_items/library_item.dart';
+import 'package:abs_flutter/api/list/collection.dart';
+import 'package:abs_flutter/api/list/playlist.dart';
+import 'package:abs_flutter/features/library/item_components/library_item_widget.dart';
+import 'package:abs_flutter/models/library_preview_item.dart';
+import 'package:abs_flutter/provider/list_provider.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+
+class ListsItemView extends ConsumerWidget {
+  const ListsItemView({super.key, required this.id, required this.type});
+  final String id;
+  final ListViewType type;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final PlaylistCollectionNotifier items =
+        ref.watch(playlistCollectionProvider);
+
+    if (items.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (items.error != null) {
+      return Center(child: Text('Error: ${items.error}'));
+    }
+
+    final List<LibraryItem> libraryItems = [];
+    String title = '';
+    if (type == ListViewType.collection) {
+      final Collection? collection = items.getCollectionById(id);
+      libraryItems.addAll(collection?.items ?? []);
+      title = collection?.name ?? '';
+    } else {
+      final Playlist? playlist = items.getPlaylistById(id);
+      libraryItems.addAll(playlist?.items
+              ?.map((e) => e.libraryItem)
+              .where((element) => element != null)
+              .map((e) => e!) ??
+          []);
+      title = playlist?.name ?? '';
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(title),
+      ),
+      body: LayoutBuilder(
+        builder: (BuildContext context, BoxConstraints constraints) {
+          return AlignedGridView.count(
+            crossAxisCount: constraints.maxWidth ~/ 190,
+            mainAxisSpacing: 12,
+            crossAxisSpacing: 12,
+            padding: const EdgeInsets.only(top: 0, left: 8, right: 8),
+            itemCount: libraryItems.length,
+            itemBuilder: (context, index) {
+              return LibraryItemWidget(
+                  item: LibraryPreviewItem.fromLibraryItem(libraryItems[index]),
+                  collapseSeries: libraryItems[index].collapsedSeries);
+            },
+          );
+        },
+      ),
+    );
+  }
+}
+
+enum ListViewType { collection, playlist }

lib/models/library_preview_item.dart

@@ -1,4 +1,6 @@
 import 'package:abs_flutter/api/library/collapsed_series.dart';
+import 'package:abs_flutter/api/library_items/library_item.dart';
+import 'package:abs_flutter/generated/l10n.dart';
 import 'package:flutter/foundation.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 
@@ -25,4 +27,16 @@ class LibraryPreviewItem with _$LibraryPreviewItem {
 
   factory LibraryPreviewItem.fromJson(Map<String, dynamic> json) =>
       _$LibraryPreviewItemFromJson(json);
+
+  factory LibraryPreviewItem.fromLibraryItem(LibraryItem item) {
+    return LibraryPreviewItem(
+        id: item.id,
+        title: item.media?.title ?? S.current.unknown,
+        subtitle: item.media?.subtitle ?? '',
+        authors: item.media?.authors ?? [],
+        mediaType: item.mediaType ?? 'book',
+        hasBook: item.media?.hasBook,
+        hasAudio: item.media?.hasAudio,
+        collapsedSeries: item.collapsedSeries);
+  }
 }

lib/provider/list_provider.dart

@@ -1,5 +1,7 @@
 import 'dart:developer';
 
+import 'package:abs_flutter/api/list/collection.dart';
+import 'package:abs_flutter/api/list/playlist.dart';
 import 'package:abs_flutter/api/list/response/collection_response.dart';
 import 'package:abs_flutter/api/list/response/playlist_response.dart';
 import 'package:abs_flutter/api/routes/abs_api.dart';
@@ -20,7 +22,9 @@ class PlaylistCollectionNotifier extends ChangeNotifier {
   Object? _error;
   bool _isLoading = false;
 
-  PlaylistCollectionNotifier(this.ref);
+  PlaylistCollectionNotifier(this.ref) {
+    fetchAll();
+  }
 
   PlaylistResponse? get playlists => _playlists;
   CollectionResponse? get collections => _collections;
@@ -70,6 +74,14 @@ class PlaylistCollectionNotifier extends ChangeNotifier {
     }
   }
 
+  Collection? getCollectionById(String id) {
+    return _collections?.items.firstWhere((element) => element.id == id);
+  }
+
+  Playlist? getPlaylistById(String id) {
+    return _playlists?.items.firstWhere((element) => element.id == id);
+  }
+
   Future<void> refresh() async {
     _playlists = null;
     _collections = null;

lib/util/router.dart

@@ -7,6 +7,7 @@ import 'package:abs_flutter/features/download/download_page.dart';
 import 'package:abs_flutter/features/ereader/ereader.dart';
 import 'package:abs_flutter/features/home/home.dart';
 import 'package:abs_flutter/features/library/item/item_view.dart';
+import 'package:abs_flutter/features/library/list/list_view.dart';
 import 'package:abs_flutter/features/library/series/single_series_view.dart';
 import 'package:abs_flutter/features/logging/log_view.dart';
 import 'package:abs_flutter/features/player/car_player_page.dart';
@@ -70,6 +71,16 @@ final router = GoRouter(
                     builder: (context, state) => SingleSeriesView(
                         seriesName: state.pathParameters['seriesName']!,
                         seriesId: state.pathParameters['id']!)),
+                GoRoute(
+                    path: '/playlist-view/:id',
+                    builder: (context, state) => ListsItemView(
+                        type: ListViewType.playlist,
+                        id: state.pathParameters['id']!)),
+                GoRoute(
+                    path: '/collection-view/:id',
+                    builder: (context, state) => ListsItemView(
+                        type: ListViewType.collection,
+                        id: state.pathParameters['id']!)),
                 GoRoute(
                   path: '/logs',
                   builder: (context, state) => const LogView(),