feat: Episode list mode

MiaoMint · MiaoMint · commit 9c3066bb8a75 · 2023-09-05T15:54:22.000+08:00
diff --git a/lib/pages/detail/widgets/detail_episodes.dart b/lib/pages/detail/widgets/detail_episodes.dart
@@ -5,6 +5,7 @@ import 'package:get/get.dart';
 import 'package:miru_app/models/extension.dart';
 import 'package:miru_app/pages/detail/controller.dart';
 import 'package:miru_app/pages/detail/widgets/detail_continue_play.dart';
+import 'package:miru_app/utils/miru_storage.dart';
 import 'package:miru_app/widgets/card_tile.dart';
 import 'package:miru_app/utils/i18n.dart';
 import 'package:miru_app/widgets/platform_widget.dart';
@@ -23,6 +24,7 @@ class _DetailEpisodesState extends State<DetailEpisodes> {
   List<fluent.ComboBoxItem<int>>? comboBoxItems;
   List<DropdownMenuItem<int>>? dropdownItems;
   late List<ExtensionEpisodeGroup> episodes = [];
+  late String listMode = MiruStorage.getSetting(SettingKey.listMode);
 
   Widget _buildAndroidEpisodes(BuildContext context) {
     return Column(
@@ -101,8 +103,23 @@ class _DetailEpisodesState extends State<DetailEpisodes> {
     } else {
       episodesString = 'reader.chapters'.i18n;
     }
-    return CardTile(
+
+    Widget cardTile(Widget child) {
+      return CardTile(
         title: episodesString,
+        leading: fluent.IconButton(
+          icon: Icon(
+            listMode == "grid"
+                ? fluent.FluentIcons.view_list
+                : fluent.FluentIcons.grid_view_medium,
+          ),
+          onPressed: () {
+            setState(() {
+              listMode == "grid" ? listMode = "list" : listMode = "grid";
+              MiruStorage.setSetting(SettingKey.listMode, listMode);
+            });
+          },
+        ),
         trailing: Row(
           children: [
             const DetailContinuePlay(),
@@ -118,12 +135,20 @@ class _DetailEpisodesState extends State<DetailEpisodes> {
             )
           ],
         ),
-        child: LayoutBuilder(builder: (context, constraints) {
-          return Container(
-            constraints: const BoxConstraints(
-              maxHeight: 500,
-            ),
-            child: GridView.builder(
+        child: Container(
+          constraints: const BoxConstraints(
+            maxHeight: 500,
+          ),
+          child: child,
+        ),
+      );
+    }
+
+    if (listMode == "grid") {
+      return cardTile(
+        LayoutBuilder(
+          builder: (context, constraints) {
+            return GridView.builder(
               shrinkWrap: true,
               itemCount: episodes.isEmpty
                   ? 0
@@ -149,9 +174,33 @@ class _DetailEpisodesState extends State<DetailEpisodes> {
                   },
                 );
               },
-            ),
+            );
+          },
+        ),
+      );
+    }
+
+    return cardTile(
+      ListView.builder(
+        shrinkWrap: true,
+        padding: const EdgeInsets.all(0),
+        itemCount:
+            episodes.isEmpty ? 0 : episodes[c.selectEpGroup.value].urls.length,
+        itemBuilder: (context, index) {
+          return fluent.ListTile(
+            title: Text(episodes[c.selectEpGroup.value].urls[index].name),
+            onPressed: () {
+              c.goWatch(
+                context,
+                episodes[c.selectEpGroup.value].urls,
+                index,
+                c.selectEpGroup.value,
+              );
+            },
           );
-        }));
+        },
+      ),
+    );
   }
 
   @override
diff --git a/lib/utils/miru_storage.dart b/lib/utils/miru_storage.dart
@@ -112,6 +112,7 @@ class MiruStorage {
     await _initSetting(SettingKey.theme, 'system');
     await _initSetting(SettingKey.enableNSFW, false);
     await _initSetting(SettingKey.videoPlayer, 'built-in');
+    await _initSetting(SettingKey.listMode, "grid");
   }
 
   static _initSetting(String key, dynamic value) async {
@@ -139,4 +140,5 @@ class SettingKey {
   static String enableNSFW = 'EnableNSFW';
   static String videoPlayer = 'VideoPlayer';
   static String databaseVersion = 'DatabaseVersion';
+  static String listMode = 'ListMode';
 }
diff --git a/lib/widgets/card_tile.dart b/lib/widgets/card_tile.dart
@@ -6,8 +6,10 @@ class CardTile extends StatelessWidget {
     required this.title,
     required this.child,
     this.trailing,
+    this.leading,
   }) : super(key: key);
   final String title;
+  final Widget? leading;
   final Widget? trailing;
   final Widget child;
 
@@ -34,6 +36,8 @@ class CardTile extends StatelessWidget {
                     fontWeight: FontWeight.bold,
                   ),
                 ),
+                const SizedBox(width: 3),
+                if (leading != null) leading!,
                 const Spacer(),
                 if (trailing != null) trailing!
               ],

Original file line number	Diff line number	Diff line change
`@@ -112,6 +112,7 @@ class MiruStorage {`
`112`	`112`	`await _initSetting(SettingKey.theme, 'system');`
`113`	`113`	`await _initSetting(SettingKey.enableNSFW, false);`
`114`	`114`	`await _initSetting(SettingKey.videoPlayer, 'built-in');`
	`115`	`+ await _initSetting(SettingKey.listMode, "grid");`
`115`	`116`	`}`
`116`	`117`
`117`	`118`	`static _initSetting(String key, dynamic value) async {`
`@@ -139,4 +140,5 @@ class SettingKey {`
`139`	`140`	`static String enableNSFW = 'EnableNSFW';`
`140`	`141`	`static String videoPlayer = 'VideoPlayer';`
`141`	`142`	`static String databaseVersion = 'DatabaseVersion';`
	`143`	`+ static String listMode = 'ListMode';`
`142`	`144`	`}`