feature: Added playback rate to video player options (#99)

Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>

lib/l10n/app_en.arb

@@ -1079,5 +1079,7 @@
   "autoNextOffSmartTitle": "Smart",
   "autoNextOffSmartDesc": "Shows the next-up screen when the credits start if no more then 10 seconds remain after the credits. Else it shows the next-up screen with 30 seconds of playtime remaining",
   "autoNextOffStaticTitle": "Static",
-  "autoNextOffStaticDesc": "Show the next-up screen when 30 seconds of playtime remain"
+  "autoNextOffStaticDesc": "Show the next-up screen when 30 seconds of playtime remain",
+  "playbackRate": "Playback rate",
+  "speed": "Speed"
 }

lib/screens/video_player/components/video_player_options_sheet.dart

@@ -19,13 +19,17 @@ import 'package:fladder/screens/playlists/add_to_playlists.dart';
 import 'package:fladder/screens/video_player/components/video_player_queue.dart';
 import 'package:fladder/screens/video_player/components/video_subtitle_controls.dart';
 import 'package:fladder/util/adaptive_layout.dart';
+import 'package:fladder/util/list_padding.dart';
 import 'package:fladder/util/localization_helper.dart';
 import 'package:fladder/util/refresh_state.dart';
 import 'package:fladder/util/string_extensions.dart';
 import 'package:fladder/widgets/shared/enum_selection.dart';
+import 'package:fladder/widgets/shared/fladder_slider.dart';
 import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
 import 'package:fladder/widgets/shared/spaced_list_tile.dart';
 
+final playbackRateProvider = StateProvider<double>((ref) => 1.0);
+
 Future<void> showVideoPlayerOptions(BuildContext context, Function() minimizePlayer) {
   return showBottomSheetPill(
     context: context,
@@ -172,6 +176,23 @@ class _VideoOptionsMobileState extends ConsumerState<VideoOptions> {
                 ],
               ),
             ),
+          ListTile(
+            onTap: () {
+              Navigator.of(context).pop();
+              showPlaybackSpeed(context);
+            },
+            title: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Expanded(
+                  flex: 3,
+                  child: Text(context.localized.playbackRate),
+                ),
+                const Spacer(),
+                Text("x${ref.watch(playbackRateProvider)}")
+              ],
+            ),
+          ),
         ],
       );
     }
@@ -183,7 +204,7 @@ class _VideoOptionsMobileState extends ConsumerState<VideoOptions> {
         shrinkWrap: true,
         controller: widget.controller,
         children: [
-          navTitle("Playback Settings", null),
+          navTitle(context.localized.playBackSettings, null),
           if (playbackState?.queue.isNotEmpty == true)
             ListTile(
               leading: const Icon(Icons.video_collection_rounded),
@@ -421,3 +442,53 @@ Future<void> showAudioSelection(BuildContext context) {
     },
   );
 }
+
+Future<void> showPlaybackSpeed(BuildContext context) {
+  return showDialog(
+    context: context,
+    builder: (context) {
+      return StatefulBuilder(builder: (context, setState) {
+        return Consumer(
+          builder: (context, ref, child) {
+            final player = ref.watch(videoPlayerProvider.select((value) => value.player));
+            final lastSpeed = ref.watch(playbackRateProvider);
+            return SimpleDialog(
+              contentPadding: const EdgeInsets.only(top: 8, bottom: 24),
+              title: Row(children: [Text(context.localized.playbackRate)]),
+              children: [
+                const Divider(),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 12).copyWith(top: 6),
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      Text("${context.localized.speed}: "),
+                      Flexible(
+                        child: SizedBox(
+                          width: 250,
+                          child: FladderSlider(
+                            min: 0.25,
+                            max: 10,
+                            value: lastSpeed,
+                            divisions: 39,
+                            onChanged: (value) {
+                              ref.read(playbackRateProvider.notifier).state = value;
+                              player?.setRate(value);
+                            },
+                          ),
+                        ),
+                      ),
+                      Text("x${lastSpeed.toStringAsFixed(2)}")
+                    ].addInBetween(const SizedBox(width: 8)),
+                  ),
+                )
+              ],
+            );
+          },
+        );
+      });
+    },
+  );
+}