feat: Enable Area Magnification on mobile live player

Author: bdlukaa

lib/screens/layouts/desktop/multicast_view.dart

@@ -24,6 +24,7 @@ import 'package:bluecherry_client/models/device.dart';
 import 'package:bluecherry_client/providers/layouts_provider.dart';
 import 'package:bluecherry_client/providers/settings_provider.dart';
 import 'package:bluecherry_client/utils/constants.dart';
+import 'package:bluecherry_client/utils/methods.dart';
 import 'package:bluecherry_client/widgets/hover_button.dart';
 import 'package:bluecherry_client/widgets/misc.dart';
 import 'package:flutter/gestures.dart';
@@ -33,8 +34,9 @@ import 'package:unity_video_player/unity_video_player.dart';
 
 class MulticastViewport extends StatefulWidget {
   final Device? device;
+  final bool showMobileGrid;
 
-  const MulticastViewport({super.key, this.device});
+  const MulticastViewport({super.key, this.device, this.showMobileGrid = true});
 
   @override
   State<MulticastViewport> createState() => _MulticastViewportState();
@@ -187,13 +189,14 @@ class _MulticastViewportState extends State<MulticastViewport> {
                               (context, states) => SizedBox.expand(
                                 child: IgnorePointer(
                                   child:
-                                      states.isHovering
+                                      (isMobile && widget.showMobileGrid) ||
+                                              states.isHovering
                                           ? Container(
                                             decoration: BoxDecoration(
                                               border: Border.all(
                                                 color:
                                                     theme.colorScheme.secondary,
-                                                width: 2.25,
+                                                width: isMobile ? 0.5 : 2.25,
                                               ),
                                             ),
                                           )

lib/screens/players/live_player.dart

@@ -101,7 +101,7 @@ class _LivePlayerState extends State<LivePlayer> {
 
   @override
   Widget build(BuildContext context) {
-    if (isMobilePlatform) {
+    if (isMobile) {
       return _MobileLivePlayer(
         player: widget.player,
         device: widget.device,
@@ -133,12 +133,14 @@ class _MobileLivePlayer extends StatefulWidget {
 }
 
 class __MobileLivePlayerState extends State<_MobileLivePlayer> {
-  bool overlay = true;
+  var overlay = true;
   late UnityVideoFit fit =
       widget.device.server.additionalSettings.videoFit ??
       SettingsProvider.instance.kVideoFit.value;
 
   late bool ptzEnabled = widget.ptzEnabled;
+  var showMagnificationGrid =
+      SettingsProvider.instance.kMatrixedZoomEnabled.value;
 
   @override
   void initState() {
@@ -197,8 +199,26 @@ class __MobileLivePlayerState extends State<_MobileLivePlayer> {
                             strokeWidth: 3.45,
                           ),
                         )
-                      else if (commands.isNotEmpty)
-                        PTZData(commands: commands),
+                      else ...[
+                        if (showMagnificationGrid)
+                          Positioned.fill(
+                            child: Center(
+                              child: AspectRatio(
+                                aspectRatio:
+                                    controller.aspectRatio == 0 ||
+                                            controller.aspectRatio ==
+                                                double.infinity
+                                        ? 16 / 9
+                                        : controller.aspectRatio,
+                                child: MulticastViewport(
+                                  device: widget.device,
+                                  showMobileGrid: showMagnificationGrid,
+                                ),
+                              ),
+                            ),
+                          ),
+                        if (commands.isNotEmpty) PTZData(commands: commands),
+                      ],
                       PositionedDirectional(
                         top: 0.0,
                         start: 0.0,
@@ -235,12 +255,29 @@ class __MobileLivePlayerState extends State<_MobileLivePlayer> {
                               trailing: Row(
                                 mainAxisSize: MainAxisSize.min,
                                 children: [
-                                  CameraViewFitButton(
-                                    fit: fit,
-                                    onChanged: (newFit) {
-                                      setState(() => fit = newFit);
-                                    },
+                                  SquaredIconButton(
+                                    icon: Icon(
+                                      showMagnificationGrid
+                                          ? Icons.grid_on_rounded
+                                          : Icons.grid_off_rounded,
+                                    ),
+                                    tooltip:
+                                        showMagnificationGrid
+                                            ? 'Disable magnification grid'
+                                            : 'Enable magnification grid',
+                                    onPressed:
+                                        () => setState(
+                                          () =>
+                                              showMagnificationGrid =
+                                                  !showMagnificationGrid,
+                                        ),
                                   ),
+                                  // CameraViewFitButton(
+                                  //   fit: fit,
+                                  //   onChanged: (newFit) {
+                                  //     setState(() => fit = newFit);
+                                  //   },
+                                  // ),
                                   if (widget.device.hasPTZ)
                                     PTZToggleButton(
                                       ptzEnabled: ptzEnabled,

lib/screens/settings/server_and_devices.dart

@@ -504,6 +504,8 @@ class AreaMagnificationSettings extends StatelessWidget {
         ),
         OptionsChooserTile<MatrixType>(
           title: loc.defaultMatrixSize,
+          description:
+              'Double tap on the view to change the magnification area size',
           icon: Icons.view_quilt,
           value: settings.kMatrixSize.value,
           values: MatrixType.values.map((size) {