feat: serve map tile styles from tiles.immich.cloud (#12858)

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/lib/models/server_info/server_config.model.dart

@@ -4,11 +4,15 @@ class ServerConfig {
   final int trashDays;
   final String oauthButtonText;
   final String externalDomain;
+  final String mapDarkStyleUrl;
+  final String mapLightStyleUrl;
 
   const ServerConfig({
     required this.trashDays,
     required this.oauthButtonText,
     required this.externalDomain,
+    required this.mapDarkStyleUrl,
+    required this.mapLightStyleUrl,
   });
 
   ServerConfig copyWith({
@@ -20,6 +24,8 @@ class ServerConfig {
       trashDays: trashDays ?? this.trashDays,
       oauthButtonText: oauthButtonText ?? this.oauthButtonText,
       externalDomain: externalDomain ?? this.externalDomain,
+      mapDarkStyleUrl: mapDarkStyleUrl,
+      mapLightStyleUrl: mapLightStyleUrl,
     );
   }
 
@@ -30,7 +36,9 @@ class ServerConfig {
   ServerConfig.fromDto(ServerConfigDto dto)
       : trashDays = dto.trashDays,
         oauthButtonText = dto.oauthButtonText,
-        externalDomain = dto.externalDomain;
+        externalDomain = dto.externalDomain,
+        mapDarkStyleUrl = dto.mapDarkStyleUrl,
+        mapLightStyleUrl = dto.mapLightStyleUrl;
 
   @override
   bool operator ==(covariant ServerConfig other) {

mobile/lib/pages/search/map/map.page.dart

@@ -1,4 +1,5 @@
 import 'dart:math';
+
 import 'package:auto_route/auto_route.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -7,27 +8,27 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:geolocator/geolocator.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/latlngbounds_extension.dart';
 import 'package:immich_mobile/extensions/maplibrecontroller_extensions.dart';
 import 'package:immich_mobile/models/map/map_event.model.dart';
 import 'package:immich_mobile/models/map/map_marker.model.dart';
+import 'package:immich_mobile/providers/db.provider.dart';
 import 'package:immich_mobile/providers/map/map_marker.provider.dart';
 import 'package:immich_mobile/providers/map/map_state.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/debounce.dart';
+import 'package:immich_mobile/utils/immich_loading_overlay.dart';
 import 'package:immich_mobile/utils/map_utils.dart';
 import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
 import 'package:immich_mobile/widgets/map/map_app_bar.dart';
 import 'package:immich_mobile/widgets/map/map_asset_grid.dart';
 import 'package:immich_mobile/widgets/map/map_bottom_sheet.dart';
 import 'package:immich_mobile/widgets/map/map_theme_override.dart';
 import 'package:immich_mobile/widgets/map/positioned_asset_marker_icon.dart';
-import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/providers/db.provider.dart';
-import 'package:immich_mobile/widgets/common/immich_toast.dart';
-import 'package:immich_mobile/utils/immich_loading_overlay.dart';
-import 'package:immich_mobile/utils/debounce.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
 @RoutePage()
@@ -304,7 +305,7 @@ class MapPage extends HookConsumerWidget {
                         ),
                         Positioned(
                           right: 0,
-                          bottom: MediaQuery.of(context).padding.bottom + 16,
+                          bottom: MediaQuery.paddingOf(context).bottom + 16,
                           child: ElevatedButton(
                             onPressed: onZoomToLocation,
                             style: ElevatedButton.styleFrom(

mobile/lib/providers/map/map_state.provider.dart

@@ -1,28 +1,23 @@
-import 'dart:io';
-
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/response_extensions.dart';
 import 'package:immich_mobile/models/map/map_state.model.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
-import 'package:immich_mobile/providers/api.provider.dart';
-import 'package:logging/logging.dart';
-import 'package:openapi/api.dart';
-import 'package:path_provider/path_provider.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
 part 'map_state.provider.g.dart';
 
 @Riverpod(keepAlive: true)
 class MapStateNotifier extends _$MapStateNotifier {
-  final _log = Logger("MapStateNotifier");
-
   @override
   MapState build() {
     final appSettingsProvider = ref.read(appSettingsServiceProvider);
 
-    // Fetch and save the Style JSONs
-    loadStyles();
+    final lightStyleUrl =
+        ref.read(serverInfoProvider).serverConfig.mapLightStyleUrl;
+    final darkStyleUrl =
+        ref.read(serverInfoProvider).serverConfig.mapDarkStyleUrl;
+
     return MapState(
       themeMode: ThemeMode.values[
           appSettingsProvider.getSetting<int>(AppSettingsEnum.mapThemeMode)],
@@ -34,65 +29,11 @@ class MapStateNotifier extends _$MapStateNotifier {
           appSettingsProvider.getSetting<bool>(AppSettingsEnum.mapwithPartners),
       relativeTime:
           appSettingsProvider.getSetting<int>(AppSettingsEnum.mapRelativeDate),
+      lightStyleFetched: AsyncData(lightStyleUrl),
+      darkStyleFetched: AsyncData(darkStyleUrl),
     );
   }
 
-  void loadStyles() async {
-    final documents = (await getApplicationDocumentsDirectory()).path;
-
-    // Set to loading
-    state = state.copyWith(lightStyleFetched: const AsyncLoading());
-
-    // Fetch and save light theme
-    final lightResponse = await ref
-        .read(apiServiceProvider)
-        .mapApi
-        .getMapStyleWithHttpInfo(MapTheme.light);
-
-    if (lightResponse.statusCode >= HttpStatus.badRequest) {
-      state = state.copyWith(
-        lightStyleFetched: AsyncError(lightResponse.body, StackTrace.current),
-      );
-      _log.severe(
-        "Cannot fetch map light style",
-        lightResponse.toLoggerString(),
-      );
-      return;
-    }
-
-    final lightJSON = lightResponse.body;
-    final lightFile = await File("$documents/map-style-light.json")
-        .writeAsString(lightJSON, flush: true);
-
-    // Update state with path
-    state =
-        state.copyWith(lightStyleFetched: AsyncData(lightFile.absolute.path));
-
-    // Set to loading
-    state = state.copyWith(darkStyleFetched: const AsyncLoading());
-
-    // Fetch and save dark theme
-    final darkResponse = await ref
-        .read(apiServiceProvider)
-        .mapApi
-        .getMapStyleWithHttpInfo(MapTheme.dark);
-
-    if (darkResponse.statusCode >= HttpStatus.badRequest) {
-      state = state.copyWith(
-        darkStyleFetched: AsyncError(darkResponse.body, StackTrace.current),
-      );
-      _log.severe("Cannot fetch map dark style", darkResponse.toLoggerString());
-      return;
-    }
-
-    final darkJSON = darkResponse.body;
-    final darkFile = await File("$documents/map-style-dark.json")
-        .writeAsString(darkJSON, flush: true);
-
-    // Update state with path
-    state = state.copyWith(darkStyleFetched: AsyncData(darkFile.absolute.path));
-  }
-
   void switchTheme(ThemeMode mode) {
     ref.read(appSettingsServiceProvider).setSetting(
           AppSettingsEnum.mapThemeMode,

mobile/lib/providers/server_info.provider.dart

@@ -34,6 +34,9 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
               trashDays: 30,
               oauthButtonText: '',
               externalDomain: '',
+              mapLightStyleUrl:
+                  'https://tiles.immich.cloud/v1/style/light.json',
+              mapDarkStyleUrl: 'https://tiles.immich.cloud/v1/style/dark.json',
             ),
             serverDiskInfo: const ServerDiskInfo(
               diskAvailable: "0",

mobile/lib/utils/openapi_patching.dart

@@ -12,6 +12,19 @@ dynamic upgradeDto(dynamic value, String targetType) {
         addDefault(value, 'tags', TagsResponse().toJson());
       }
       break;
+    case 'ServerConfigDto':
+      if (value is Map) {
+        addDefault(
+          value,
+          'mapLightStyleUrl',
+          'https://tiles.immich.cloud/v1/style/light.json',
+        );
+        addDefault(
+          value,
+          'mapDarkStyleUrl',
+          'https://tiles.immich.cloud/v1/style/dark.json',
+        );
+      }
     case 'UserResponseDto':
       if (value is Map) {
         addDefault(value, 'profileChangedAt', DateTime.now().toIso8601String());