Add reverse geocoding and show asset location on map in detail view (#43)

* Added reserve geocoding, location in search suggestion, and search by location
* Added mapbox sdk to app
* Added mapbox to image detailed view

mobile/lib/modules/asset_viewer/ui/exif_bottom_sheet.dart

@@ -1,7 +1,12 @@
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/shared/models/immich_asset_with_exif.model.dart';
+import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:intl/intl.dart';
+import 'package:mapbox_gl/mapbox_gl.dart';
 import 'package:path/path.dart' as p;
 
 class ExifBottomSheet extends ConsumerWidget {
@@ -11,6 +16,54 @@ class ExifBottomSheet extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    _buildMap() {
+      return ref.watch(serverInfoProvider).mapboxInfo.isEnable
+          ? Padding(
+              padding: const EdgeInsets.symmetric(vertical: 16.0),
+              child: Container(
+                height: 150,
+                width: MediaQuery.of(context).size.width,
+                decoration: const BoxDecoration(
+                  borderRadius: BorderRadius.all(Radius.circular(15)),
+                ),
+                child: MapboxMap(
+                  doubleClickZoomEnabled: false,
+                  zoomGesturesEnabled: true,
+                  scrollGesturesEnabled: false,
+                  accessToken: ref.watch(serverInfoProvider).mapboxInfo.mapboxSecret,
+                  styleString: 'mapbox://styles/mapbox/streets-v11',
+                  initialCameraPosition: CameraPosition(
+                    zoom: 15.0,
+                    target: LatLng(assetDetail.exifInfo!.latitude!, assetDetail.exifInfo!.longitude!),
+                  ),
+                  onMapCreated: (MapboxMapController mapController) async {
+                    final ByteData bytes = await rootBundle.load("assets/location-pin.png");
+                    final Uint8List list = bytes.buffer.asUint8List();
+                    await mapController.addImage("assetImage", list);
+
+                    await mapController.addSymbol(
+                      SymbolOptions(
+                        geometry: LatLng(assetDetail.exifInfo!.latitude!, assetDetail.exifInfo!.longitude!),
+                        iconImage: "assetImage",
+                        iconSize: 0.2,
+                      ),
+                    );
+                  },
+                ),
+              ),
+            )
+          : Container();
+    }
+
+    _buildLocationText() {
+      return (assetDetail.exifInfo!.city != null && assetDetail.exifInfo!.state != null)
+          ? Text(
+              "${assetDetail.exifInfo!.city}, ${assetDetail.exifInfo!.state}",
+              style: TextStyle(fontSize: 12, color: Colors.grey[200], fontWeight: FontWeight.bold),
+            )
+          : Container();
+    }
+
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 8),
       child: ListView(
@@ -53,9 +106,11 @@ class ExifBottomSheet extends ConsumerWidget {
                         "LOCATION",
                         style: TextStyle(fontSize: 11, color: Colors.grey[400]),
                       ),
+                      _buildMap(),
+                      _buildLocationText(),
                       Text(
                         "${assetDetail.exifInfo!.latitude!.toStringAsFixed(4)}, ${assetDetail.exifInfo!.longitude!.toStringAsFixed(4)}",
-                        style: TextStyle(fontSize: 11, color: Colors.grey[400]),
+                        style: TextStyle(fontSize: 12, color: Colors.grey[400]),
                       )
                     ],
                   ),
@@ -89,8 +144,10 @@ class ExifBottomSheet extends ConsumerWidget {
                           "${assetDetail.exifInfo?.imageName!}${p.extension(assetDetail.originalPath)}",
                           style: const TextStyle(fontWeight: FontWeight.bold),
                         ),
-                        subtitle: Text(
-                            "${assetDetail.exifInfo?.exifImageHeight!} x ${assetDetail.exifInfo?.exifImageWidth!}  ${assetDetail.exifInfo?.fileSizeInByte!}B "),
+                        subtitle: assetDetail.exifInfo?.exifImageHeight != null
+                            ? Text(
+                                "${assetDetail.exifInfo?.exifImageHeight} x ${assetDetail.exifInfo?.exifImageWidth}  ${assetDetail.exifInfo?.fileSizeInByte!}B ")
+                            : Container(),
                       ),
                       assetDetail.exifInfo?.make != null
                           ? ListTile(

mobile/lib/modules/asset_viewer/ui/top_control_app_bar.dart

@@ -29,9 +29,9 @@ class TopControlAppBar extends StatelessWidget with PreferredSizeWidget {
           iconSize: iconSize,
           splashRadius: iconSize,
           onPressed: () {
-            print("backup");
+            print("download");
           },
-          icon: const Icon(Icons.backup_outlined),
+          icon: const Icon(Icons.cloud_download_rounded),
         ),
         IconButton(
           iconSize: iconSize,

mobile/lib/modules/home/views/home_page.dart

@@ -11,6 +11,7 @@ import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
 import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
 import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
 import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/providers/websocket.provider.dart';
 import 'package:sliver_tools/sliver_tools.dart';
 
@@ -28,6 +29,7 @@ class HomePage extends HookConsumerWidget {
     useEffect(() {
       ref.read(websocketProvider.notifier).connect();
       ref.read(assetProvider.notifier).getAllAsset();
+      ref.read(serverInfoProvider.notifier).getMapboxInfo();
       return null;
     }, []);