refactor: tinker & responsiveness

lib/core/database/settings/schema.dart

@@ -14,7 +14,7 @@ class SettingsSchema {
     this.backgroundColor,
     this.disableAnimations = false,
     this.useSystemPreferredTheme = false,
-    this.scaleMultiplier = RelativeScaleData.defaultMultiplier,
+    this.scaleMultiplier = RelativeScaleData.defaultScaleMultiplier,
   });
 
   factory SettingsSchema.fromJson(final JsonMap json) =>

lib/core/player/video_player.dart

@@ -30,8 +30,8 @@ class _PlayerPageState extends State<PlayerPage> {
 
   @override
   void dispose() {
-    _player.dispose();
     super.dispose();
+    _player.dispose();
   }
 
   Future<void> _setDataSource() async {

lib/ui/base.dart

@@ -12,14 +12,14 @@ class BaseApp extends StatefulWidget {
 
 class _BaseAppState extends State<BaseApp> {
   late ThemerThemeData theme;
-  late RelativeScaleData scale;
+  late double scaleMultiplier;
   late String translationId;
 
   @override
   void initState() {
     super.initState();
     theme = Themer.defaultTheme();
-    scale = RelativeScaleData.defaultScale;
+    scaleMultiplier = RelativeScaleData.defaultScaleMultiplier;
     translationId = '';
     AppEvents.stream.listen((final AppEvent event) {
       if (event == AppEvent.settingsChange) {
@@ -29,10 +29,10 @@ class _BaseAppState extends State<BaseApp> {
             theme = nTheme;
           });
         }
-        final RelativeScaleData nScale = RelativeScaleData.fromSettings();
-        if (scale != nScale) {
+        final double nScaleMultiplier = RelativeScaleData.getScaleMultiplier();
+        if (scaleMultiplier != nScaleMultiplier) {
           setState(() {
-            scale = nScale;
+            scaleMultiplier = nScaleMultiplier;
           });
         }
       }
@@ -57,7 +57,10 @@ class _BaseAppState extends State<BaseApp> {
           final Widget? child,
         ) =>
             RelativeScaler(
-          data: scale,
+          data: RelativeScaleData(
+            multiplier: scaleMultiplier,
+            screen: RelativeScaleData.getScreenSize(context),
+          ),
           child: TranslationWrapper(
             id: translationId,
             child: Builder(

lib/ui/components/anilist/media_row.dart

@@ -14,12 +14,16 @@ class AnilistMediaRow extends StatelessWidget {
         results
             .map(
               (final AnilistMedia x) => SizedBox(
-                width: context.r.scale(tileWidthScale),
+                width: getTileWidth(context.r),
                 child: AnilistMediaTile(x),
               ),
             )
             .toList(),
       );
 
-  static const double tileWidthScale = 7.5;
+  static const double tileWidthAny = 8;
+  static const double tileWidthMd = 9;
+
+  static double getTileWidth(final RelativeScaler r) =>
+      r.scale(tileWidthAny, md: tileWidthMd);
 }

lib/ui/components/anilist/media_slide.dart

@@ -61,12 +61,14 @@ class _AnilistMediaSlideState extends State<AnilistMediaSlide>
                 ),
             ],
           ),
-          SizedBox(height: context.r.scale(0.25)),
+          SizedBox(height: context.r.scale(0.5)),
           Text(
             widget.media.titleUserPreferred,
-            style: Theme.of(context)
-                .textTheme
-                .headlineSmall!
+            style: context.r
+                .responsive(
+                  Theme.of(context).textTheme.titleLarge,
+                  md: Theme.of(context).textTheme.headlineSmall,
+                )!
                 .copyWith(fontWeight: FontWeight.bold),
           ),
           SizedBox(height: context.r.scale(0.25)),
@@ -111,8 +113,14 @@ class _AnilistMediaSlideState extends State<AnilistMediaSlide>
                     begin: Alignment.topCenter,
                     end: Alignment.bottomCenter,
                     colors: <Color>[
-                      Theme.of(context).colorScheme.background.withOpacity(0.3),
-                      Theme.of(context).colorScheme.background.withOpacity(0.7),
+                      Theme.of(context)
+                          .colorScheme
+                          .background
+                          .withOpacity(0.25),
+                      Theme.of(context)
+                          .colorScheme
+                          .background
+                          .withOpacity(0.75),
                     ],
                   ),
                 ),
@@ -130,24 +138,34 @@ class _AnilistMediaSlideState extends State<AnilistMediaSlide>
           child: IgnorePointer(
             child: Padding(
               padding: EdgeInsets.all(context.r.scale(1)),
-              child: Row(
-                // mainAxisSize: MainAxisSize.min,
-                // mainAxisAlignment: MainAxisAlignment.end,
-                // crossAxisAlignment: CrossAxisAlignment.start,
-                children: <Widget>[
-                  buildThumbnail(context),
-                  // SizedBox(height: context.r.scale(0.5)),
-                  SizedBox(width: context.r.scale(1.5)),
-                  Expanded(
-                    child: Column(
-                      mainAxisAlignment: MainAxisAlignment.end,
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: <Widget>[
-                        buildContent(context),
-                      ],
+              child: context.r.responsiveBuilder(
+                () => Column(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: <Widget>[
+                    Expanded(
+                      child: buildThumbnail(context),
                     ),
-                  ),
-                ],
+                    SizedBox(height: context.r.scale(1)),
+                    buildContent(context),
+                  ],
+                ),
+                md: () => Row(
+                  children: <Widget>[
+                    buildThumbnail(context),
+                    SizedBox(width: context.r.scale(1.5)),
+                    Expanded(
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.end,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: <Widget>[
+                          buildContent(context),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
               ),
             ),
           ),

lib/ui/components/anilist/media_tile.dart

@@ -16,12 +16,12 @@ class AnilistMediaTile extends StatelessWidget {
         onTap: () {
           Navigator.of(context).pusher.pushToViewPageFromMedia(media);
         },
-        borderRadius: BorderRadius.circular(context.r.scale(0.25)),
+        borderRadius: BorderRadius.circular(context.r.scale(0.5)),
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
             ClipRRect(
-              borderRadius: BorderRadius.circular(context.r.scale(0.25)),
+              borderRadius: BorderRadius.circular(context.r.scale(0.5)),
               child: AspectRatio(
                 aspectRatio: coverRatio,
                 child: Stack(
@@ -75,14 +75,15 @@ class AnilistMediaTile extends StatelessWidget {
                 ),
               ),
             ),
-            SizedBox(height: context.r.scale(0.25)),
+            SizedBox(height: context.r.scale(0.5)),
             Flexible(
               child: Text(
                 media.titleUserPreferred,
-                style: Theme.of(context).textTheme.bodyLarge,
+                style: Theme.of(context).textTheme.bodyMedium,
                 textAlign: TextAlign.center,
               ),
             ),
+            SizedBox(height: context.r.scale(0.25)),
           ],
         ),
       );
@@ -98,16 +99,22 @@ class AnilistMediaTile extends StatelessWidget {
   }) =>
       DecoratedBox(
         decoration: BoxDecoration(
-          color: backgroundColor ?? Theme.of(context).bottomAppBarTheme.color,
-          borderRadius: BorderRadius.circular(context.r.scale(0.2)),
+          color: backgroundColor ?? Theme.of(context).colorScheme.background,
+          borderRadius: BorderRadius.circular(context.r.scale(0.3)),
         ),
         child: Padding(
-          padding: EdgeInsets.symmetric(horizontal: context.r.scale(0.2)),
+          padding: EdgeInsets.only(
+            top: context.r.scale(0.05),
+            bottom: context.r.scale(0.1),
+            left: context.r.scale(0.25),
+            right: context.r.scale(0.25),
+          ),
           child: DefaultTextStyle(
-            style: Theme.of(context)
-                .textTheme
-                .labelLarge!
-                .copyWith(fontWeight: FontWeight.normal, color: textColor),
+            style: Theme.of(context).textTheme.labelLarge!.copyWith(
+                  fontWeight: FontWeight.normal,
+                  color:
+                      textColor ?? Theme.of(context).colorScheme.onBackground,
+                ),
             child: Row(
               mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
@@ -116,10 +123,10 @@ class AnilistMediaTile extends StatelessWidget {
                   IconTheme(
                     data: Theme.of(context)
                         .iconTheme
-                        .copyWith(size: context.r.scale(0.65)),
+                        .copyWith(size: context.r.scale(1)),
                     child: icon,
                   ),
-                  SizedBox(width: context.r.scale(0.15)),
+                  SizedBox(width: context.r.scale(0.25)),
                 ],
                 child,
               ],
@@ -131,42 +138,58 @@ class AnilistMediaTile extends StatelessWidget {
   static Widget buildFormatChip({
     required final BuildContext context,
     required final AnilistMedia media,
+    final Color? backgroundColor,
+    final Color? textColor,
   }) =>
       AnilistMediaTile.buildChip(
         context: context,
         icon: media.status == AnilistMediaStatus.releasing
             ? AnilistMediaTile.ongoingIcon
             : null,
         child: Text(media.format.getTitleCase(context.t)),
+        backgroundColor: backgroundColor,
+        textColor: textColor,
       );
 
   static Widget buildWatchtimeChip({
     required final BuildContext context,
     required final AnilistMedia media,
+    final Color? backgroundColor,
+    final Color? textColor,
   }) =>
       AnilistMediaTile.buildChip(
         context: context,
         child: Text(media.getWatchtime(context.t)),
+        backgroundColor: backgroundColor,
+        textColor: textColor,
       );
 
   static Widget buildRatingChip({
     required final BuildContext context,
     required final AnilistMedia media,
+    final Color? backgroundColor,
+    final Color? textColor,
   }) =>
       AnilistMediaTile.buildChip(
         context: context,
         icon: AnilistMediaTile.ratingIcon,
         child: Text('${media.averageScore}%'),
+        backgroundColor: backgroundColor,
+        textColor: textColor,
       );
 
   static Widget buildAirdateChip({
     required final BuildContext context,
     required final AnilistMedia media,
+    final Color? backgroundColor,
+    final Color? textColor,
   }) =>
       AnilistMediaTile.buildChip(
         context: context,
         icon: airdateIcon,
         child: Text(media.airdate),
+        backgroundColor: backgroundColor,
+        textColor: textColor,
       );
 
   static Widget buildNSFWChip({

lib/ui/components/body_padding.dart

@@ -13,8 +13,12 @@ class HorizontalBodyPadding extends StatelessWidget {
   Widget build(final BuildContext context) =>
       Padding(padding: padding(context), child: child);
 
-  static const double sizeScale = 0.75;
-  static double size(final BuildContext context) => context.r.scale(sizeScale);
+  static const double paddingAny = 0.75;
+  static const double paddingMd = 1;
+
+  static double paddingValue(final BuildContext context) =>
+      context.r.scale(paddingAny, md: paddingMd);
+
   static EdgeInsets padding(final BuildContext context) =>
-      EdgeInsets.symmetric(horizontal: size(context));
+      EdgeInsets.symmetric(horizontal: paddingValue(context));
 }

lib/ui/components/cross_draggable_scroll_behaviour.dart

@@ -0,0 +1,25 @@
+import 'dart:ui';
+import 'package:kazahana/core/exports.dart';
+
+class DraggableScrollBehavior extends MaterialScrollBehavior {
+  @override
+  Set<PointerDeviceKind> get dragDevices => <PointerDeviceKind>{
+        PointerDeviceKind.touch,
+        PointerDeviceKind.mouse,
+      };
+}
+
+class DraggableScrollConfiguration extends StatelessWidget {
+  const DraggableScrollConfiguration({
+    required this.child,
+    super.key,
+  });
+
+  final Widget child;
+
+  @override
+  Widget build(final BuildContext context) => ScrollConfiguration(
+        behavior: DraggableScrollBehavior(),
+        child: child,
+      );
+}

lib/ui/components/exports.dart

@@ -1,5 +1,6 @@
 export 'anilist/exports.dart';
 export 'body_padding.dart';
+export 'cross_draggable_scroll_behaviour.dart';
 export 'rounded_back_button.dart';
 export 'scrollable_row.dart';
 export 'slideshow.dart';