Feat: Episode list layouts

lib/controllers/settings/settings.dart

@@ -137,6 +137,10 @@ class Settings extends GetxController {
   set carouselStyle(int value) =>
       _setUISetting((s) => s?.carouselStyle = value);
 
+  int get episodeListLayout => _getUISetting((s) => s.episodeListLayout);
+  set episodeListLayout(int value) =>
+      _setUISetting((s) => s?.episodeListLayout = value.clamp(0, 2).toInt());
+
   double get glowDensity => _getUISetting((s) => s.glowDensity);
   set glowDensity(double value) => _setUISetting((s) => s?.glowDensity = value);
 

lib/models/ui/ui_adaptor.dart

@@ -76,6 +76,9 @@ class UISettings extends HiveObject {
   @HiveField(23)
   int carouselStyle;
 
+  @HiveField(24)
+  int episodeListLayout;
+
   UISettings({
     this.glowMultiplier = 1.0,
     this.radiusMultiplier = 1.0,
@@ -101,6 +104,7 @@ class UISettings extends HiveObject {
     this.usePosterColor = false,
     this.enablePosterKenBurns = true,
     this.carouselStyle = 0,
+    this.episodeListLayout = 0,
   })  : homePageCards = homePageCards ??
             {
               "Continue Watching": true,
@@ -138,5 +142,6 @@ class UISettings extends HiveObject {
     homePageCardsMal = Map<String, bool>.from(homePageCardsMal);
     homePageCardsMal.putIfAbsent('Recommended Animes', () => true);
     homePageCardsMal.putIfAbsent('Recommended Mangas', () => true);
+    episodeListLayout = episodeListLayout.clamp(0, 2);
   }
 }

lib/screens/anime/watch/controls/widgets/bottom_sheet.dart

@@ -1,4 +1,5 @@
 import 'package:anymex/database/isar_models/track.dart';
+import 'package:anymex/controllers/settings/settings.dart';
 import 'package:anymex/screens/anime/watch/controller/player_controller.dart';
 import 'package:anymex/screens/anime/watch/player/base_player.dart';
 import 'package:anymex/screens/anime/widgets/episode/normal_episode.dart';
@@ -450,6 +451,14 @@ class BottomSheetItem {
 }
 
 class PlayerBottomSheets {
+  static EpisodeLayoutType _resolveEpisodeLayoutType() {
+    return switch (settingsController.episodeListLayout) {
+      1 => EpisodeLayoutType.compact,
+      2 => EpisodeLayoutType.blocks,
+      _ => EpisodeLayoutType.detailed,
+    };
+  }
+
   static Future<T?> show<T>(
       {required BuildContext context,
       required String title,
@@ -694,6 +703,7 @@ class PlayerBottomSheets {
       BuildContext context, PlayerController controller) {
     final episodes = controller.episodeList;
     final selectedEpisode = controller.currentEpisode;
+    final layoutType = _resolveEpisodeLayoutType();
     final offlineEpisode = controller.offlineStorage
         .getAnimeById(controller.anilistData.id)
         ?.episodes;
@@ -703,7 +713,7 @@ class PlayerBottomSheets {
       title: 'Episodes',
       isExpanded: true,
       content: ScrollablePositionedList.separated(
-        initialScrollIndex: selectedEpisode.value.number!.toInt() - 1,
+        initialScrollIndex: selectedEpisode.value.number.toInt() - 1,
         separatorBuilder: (context, i) => const SizedBox(height: 8),
         itemCount: episodes.length,
         itemBuilder: (context, index) {
@@ -714,7 +724,8 @@ class PlayerBottomSheets {
             episode: episode,
             isSelected: isSelected,
             onTap: () => controller.changeEpisode(episode),
-            layoutType: EpisodeLayoutType.compact,
+            layoutType: layoutType,
+            showTitleInBlockLayout: layoutType == EpisodeLayoutType.blocks,
             offlineEpisodes: offlineEpisode,
             fallbackImageUrl:
                 controller.anilistData.cover ?? controller.anilistData.poster,

lib/screens/anime/watch/controls/widgets/episodes_pane.dart

@@ -1,5 +1,6 @@
 import 'package:anymex/screens/anime/watch/controller/player_controller.dart';
 import 'package:anymex/screens/anime/widgets/episode/normal_episode.dart';
+import 'package:anymex/controllers/settings/settings.dart';
 import 'package:anymex/utils/theme_extensions.dart';
 import 'package:anymex/widgets/helper/platform_builder.dart';
 import 'package:dartotsu_extension_bridge/Mangayomi/string_extensions.dart';
@@ -168,6 +169,14 @@ class EpisodesPane extends StatelessWidget {
     controller.isEpisodePaneOpened.value = false;
   }
 
+  EpisodeLayoutType _resolveEpisodeLayoutType() {
+    return switch (settingsController.episodeListLayout) {
+      1 => EpisodeLayoutType.compact,
+      2 => EpisodeLayoutType.blocks,
+      _ => EpisodeLayoutType.detailed,
+    };
+  }
+
   @override
   Widget build(BuildContext context) {
     return Obx(() => EpisodeSidePane(
@@ -219,11 +228,13 @@ class EpisodesPane extends StatelessWidget {
                 child: Padding(
                   padding: const EdgeInsets.all(16),
                   child: ScrollablePositionedList.separated(
+                    key: ValueKey(settingsController.episodeListLayout),
                     initialScrollIndex:
-                        controller.currentEpisode.value.number!.toInt() - 1,
+                        controller.currentEpisode.value.number.toInt() - 1,
                     separatorBuilder: (context, i) => const SizedBox(height: 8),
                     itemCount: controller.episodeList.length,
                     itemBuilder: (context, index) {
+                      final layoutType = _resolveEpisodeLayoutType();
                       final episode = controller.episodeList[index];
                       final isSelected =
                           episode == controller.currentEpisode.value;
@@ -235,7 +246,9 @@ class EpisodesPane extends StatelessWidget {
                         episode: episode,
                         isSelected: isSelected,
                         onTap: () => controller.changeEpisode(episode),
-                        layoutType: EpisodeLayoutType.detailed,
+                        layoutType: layoutType,
+                        showTitleInBlockLayout:
+                            layoutType == EpisodeLayoutType.blocks,
                         offlineEpisodes: offlineEpisode,
                         fallbackImageUrl: controller.anilistData.cover ??
                             controller.anilistData.poster,

lib/screens/anime/widgets/episode/normal_episode.dart

@@ -9,12 +9,14 @@ import 'package:flutter/material.dart';
 enum EpisodeLayoutType {
   compact,
   detailed,
+  blocks,
 }
 
 class BetterEpisode extends StatelessWidget {
   final Episode episode;
   final bool isSelected;
   final EpisodeLayoutType layoutType;
+  final bool showTitleInBlockLayout;
   final String? fallbackImageUrl;
   final List<Episode>? offlineEpisodes;
   final VoidCallback? onTap;
@@ -24,6 +26,7 @@ class BetterEpisode extends StatelessWidget {
     required this.episode,
     this.isSelected = false,
     this.layoutType = EpisodeLayoutType.compact,
+    this.showTitleInBlockLayout = false,
     this.fallbackImageUrl,
     this.offlineEpisodes,
     this.onTap,
@@ -37,10 +40,17 @@ class BetterEpisode extends StatelessWidget {
 
     return GestureDetector(
       onTap: onTap,
-      child: layoutType == EpisodeLayoutType.compact
-          ? _buildCompactLayout(context, episodeProgress, isFiller, hasProgress)
-          : _buildDetailedLayout(
-              context, episodeProgress, isFiller, hasProgress),
+      child: switch (layoutType) {
+        EpisodeLayoutType.compact =>
+          _buildCompactLayout(context, episodeProgress, isFiller, hasProgress),
+        EpisodeLayoutType.detailed =>
+          _buildDetailedLayout(context, episodeProgress, isFiller, hasProgress),
+        EpisodeLayoutType.blocks => _buildBlockLayout(
+            context,
+            isFiller,
+            showTitle: showTitleInBlockLayout,
+          ),
+      },
     );
   }
 
@@ -68,6 +78,8 @@ class BetterEpisode extends StatelessWidget {
       return theme.colorScheme.primary.opaque(0.4, iReallyMeanIt: true);
     } else if (isFiller) {
       return Colors.orange.withOpacity(0.15);
+    } else if (layoutType == EpisodeLayoutType.blocks) {
+      return theme.colorScheme.secondaryContainer.opaque(0.25);
     } else {
       return theme.colorScheme.secondaryContainer.opaque(
         layoutType == EpisodeLayoutType.compact ? 0.4 : 0.5,
@@ -87,7 +99,7 @@ class BetterEpisode extends StatelessWidget {
   ) {
     return Container(
       clipBehavior: Clip.antiAlias,
-      height: 100,
+      height: 92,
       decoration: BoxDecoration(
         color: _getBackgroundColor(context, isFiller),
         borderRadius: BorderRadius.circular(12),
@@ -104,8 +116,8 @@ class BetterEpisode extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 if (isFiller)
-                  Padding(
-                    padding: const EdgeInsets.only(bottom: 2.0),
+                  const Padding(
+                    padding: EdgeInsets.only(bottom: 2.0),
                     child: AnymexText(
                       text: "[Filler]",
                       size: 10,
@@ -127,6 +139,107 @@ class BetterEpisode extends StatelessWidget {
     );
   }
 
+  Widget _buildBlockLayout(
+    BuildContext context,
+    bool isFiller, {
+    required bool showTitle,
+  }) {
+    if (!showTitle) {
+      return Container(
+        clipBehavior: Clip.antiAlias,
+        alignment: Alignment.center,
+        constraints: const BoxConstraints(minHeight: 44),
+        decoration: BoxDecoration(
+          color: _getBackgroundColor(context, isFiller),
+          borderRadius: BorderRadius.circular(10),
+          border: Border.all(
+            color: isFiller
+                ? Colors.orange.opaque(0.75)
+                : isSelected
+                    ? context.colors.primary.opaque(0.75)
+                    : context.colors.outline.opaque(0.25),
+            width: isSelected ? 1.4 : 1,
+          ),
+        ),
+        child: AnymexText(
+          text: episode.number,
+          size: 15,
+          variant: TextVariant.bold,
+          color: context.colors.onSurface,
+        ),
+      );
+    }
+
+    final title = (episode.title?.trim().isNotEmpty ?? false)
+        ? episode.title!
+        : 'Episode ${episode.number}';
+
+    return Container(
+      clipBehavior: Clip.antiAlias,
+      constraints: const BoxConstraints(minHeight: 58),
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
+      decoration: BoxDecoration(
+        color: _getBackgroundColor(context, isFiller),
+        borderRadius: BorderRadius.circular(10),
+        border: Border.all(
+          color: isFiller
+              ? Colors.orange.opaque(0.75)
+              : isSelected
+                  ? context.colors.primary.opaque(0.75)
+                  : context.colors.outline.opaque(0.25),
+          width: isSelected ? 1.4 : 1,
+        ),
+      ),
+      child: Row(
+        children: [
+          Container(
+            width: 48,
+            height: 34,
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(8),
+              color: isFiller
+                  ? Colors.orange.opaque(0.25)
+                  : context.colors.primary.opaque(0.2),
+              border: Border.all(
+                color: isFiller
+                    ? Colors.orange.opaque(0.8)
+                    : context.colors.primary.opaque(0.45),
+              ),
+            ),
+            child: AnymexText(
+              text: episode.number,
+              size: 13,
+              variant: TextVariant.bold,
+              color: context.colors.onSurface,
+            ),
+          ),
+          const SizedBox(width: 10),
+          Expanded(
+            child: AnymexText(
+              text: title,
+              variant: TextVariant.bold,
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+          if (isFiller)
+            Padding(
+              padding: const EdgeInsets.only(left: 8),
+              child: Container(
+                width: 8,
+                height: 8,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: Colors.orange.opaque(0.9),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
   Widget _buildDetailedLayout(
     BuildContext context,
     double progress,
@@ -170,7 +283,7 @@ class BetterEpisode extends StatelessWidget {
                               borderRadius: BorderRadius.circular(4),
                               border: Border.all(
                                   color: Colors.orange.withOpacity(0.5))),
-                          child: AnymexText(
+                          child: const AnymexText(
                             text: "FILLER",
                             size: 10,
                             color: Colors.orange,