diff --git a/mobile/drift_schemas/main/drift_schema_v7.json b/mobile/drift_schemas/main/drift_schema_v7.json new file mode 100644 index 000000000..77f57c34d Binary files /dev/null and b/mobile/drift_schemas/main/drift_schema_v7.json differ diff --git a/mobile/lib/domain/models/map.model.dart b/mobile/lib/domain/models/map.model.dart new file mode 100644 index 000000000..ce0834f0c --- /dev/null +++ b/mobile/lib/domain/models/map.model.dart @@ -0,0 +1,18 @@ +import 'package:maplibre_gl/maplibre_gl.dart'; + +class Marker { + final LatLng location; + final String assetId; + + const Marker({required this.location, required this.assetId}); + + @override + bool operator ==(covariant Marker other) { + if (identical(this, other)) return true; + + return other.location == location && other.assetId == assetId; + } + + @override + int get hashCode => location.hashCode ^ assetId.hashCode; +} diff --git a/mobile/lib/domain/services/map.service.dart b/mobile/lib/domain/services/map.service.dart new file mode 100644 index 000000000..8c50a5aae --- /dev/null +++ b/mobile/lib/domain/services/map.service.dart @@ -0,0 +1,23 @@ +import 'package:immich_mobile/domain/models/map.model.dart'; +import 'package:immich_mobile/infrastructure/repositories/map.repository.dart'; +import 'package:maplibre_gl/maplibre_gl.dart'; + +typedef MapMarkerSource = Future> Function(LatLngBounds? bounds); + +typedef MapQuery = ({MapMarkerSource markerSource}); + +class MapFactory { + final DriftMapRepository _mapRepository; + + const MapFactory({required DriftMapRepository mapRepository}) : _mapRepository = mapRepository; + + MapService remote(String ownerId) => MapService(_mapRepository.remote(ownerId)); +} + +class MapService { + final MapMarkerSource _markerSource; + + MapService(MapQuery query) : _markerSource = query.markerSource; + + Future> Function(LatLngBounds? bounds) get getMarkers => _markerSource; +} diff --git a/mobile/lib/domain/services/timeline.service.dart b/mobile/lib/domain/services/timeline.service.dart index 9fa4106d1..53a8bc671 100644 --- a/mobile/lib/domain/services/timeline.service.dart +++ b/mobile/lib/domain/services/timeline.service.dart @@ -10,6 +10,7 @@ import 'package:immich_mobile/domain/services/setting.service.dart'; import 'package:immich_mobile/domain/utils/event_stream.dart'; import 'package:immich_mobile/infrastructure/repositories/timeline.repository.dart'; import 'package:immich_mobile/utils/async_mutex.dart'; +import 'package:maplibre_gl/maplibre_gl.dart'; typedef TimelineAssetSource = Future> Function(int index, int count); @@ -57,6 +58,8 @@ class TimelineFactory { TimelineService(_timelineRepository.person(userId, personId, groupBy)); TimelineService fromAssets(List assets) => TimelineService(_timelineRepository.fromAssets(assets)); + + TimelineService map(LatLngBounds bounds) => TimelineService(_timelineRepository.map(bounds, groupBy)); } class TimelineService { diff --git a/mobile/lib/infrastructure/entities/exif.entity.dart b/mobile/lib/infrastructure/entities/exif.entity.dart index e8c754134..87c32461d 100644 --- a/mobile/lib/infrastructure/entities/exif.entity.dart +++ b/mobile/lib/infrastructure/entities/exif.entity.dart @@ -95,6 +95,7 @@ class ExifInfo { ); } +@TableIndex(name: 'idx_lat_lng', columns: {#latitude, #longitude}) class RemoteExifEntity extends Table with DriftDefaultsMixin { const RemoteExifEntity(); diff --git a/mobile/lib/infrastructure/entities/exif.entity.drift.dart b/mobile/lib/infrastructure/entities/exif.entity.drift.dart index d45d6e8ef..c31050c32 100644 Binary files a/mobile/lib/infrastructure/entities/exif.entity.drift.dart and b/mobile/lib/infrastructure/entities/exif.entity.drift.dart differ diff --git a/mobile/lib/infrastructure/repositories/db.repository.dart b/mobile/lib/infrastructure/repositories/db.repository.dart index 0458a5b25..17cd590d7 100644 --- a/mobile/lib/infrastructure/repositories/db.repository.dart +++ b/mobile/lib/infrastructure/repositories/db.repository.dart @@ -21,7 +21,7 @@ import 'package:immich_mobile/infrastructure/entities/stack.entity.dart'; import 'package:immich_mobile/infrastructure/entities/user.entity.dart'; import 'package:immich_mobile/infrastructure/entities/user_metadata.entity.dart'; import 'package:immich_mobile/infrastructure/repositories/db.repository.steps.dart'; -import 'package:isar/isar.dart'; +import 'package:isar/isar.dart' hide Index; import 'db.repository.drift.dart'; @@ -66,7 +66,7 @@ class Drift extends $Drift implements IDatabaseRepository { : super(executor ?? driftDatabase(name: 'immich', native: const DriftNativeOptions(shareAcrossIsolates: true))); @override - int get schemaVersion => 6; + int get schemaVersion => 7; @override MigrationStrategy get migration => MigrationStrategy( @@ -112,6 +112,9 @@ class Drift extends $Drift implements IDatabaseRepository { await m.create(v6.uQRemoteAssetsOwnerChecksum); await m.create(v6.uQRemoteAssetsOwnerLibraryChecksum); }, + from6To7: (m, v7) async { + await m.createIndex(v7.idxLatLng); + }, ), ); diff --git a/mobile/lib/infrastructure/repositories/db.repository.drift.dart b/mobile/lib/infrastructure/repositories/db.repository.drift.dart index 2b7203eb4..fd170fc22 100644 Binary files a/mobile/lib/infrastructure/repositories/db.repository.drift.dart and b/mobile/lib/infrastructure/repositories/db.repository.drift.dart differ diff --git a/mobile/lib/infrastructure/repositories/db.repository.steps.dart b/mobile/lib/infrastructure/repositories/db.repository.steps.dart index 32b309881..9d6b02ab3 100644 Binary files a/mobile/lib/infrastructure/repositories/db.repository.steps.dart and b/mobile/lib/infrastructure/repositories/db.repository.steps.dart differ diff --git a/mobile/lib/infrastructure/repositories/map.repository.dart b/mobile/lib/infrastructure/repositories/map.repository.dart new file mode 100644 index 000000000..9b8cdcc19 --- /dev/null +++ b/mobile/lib/infrastructure/repositories/map.repository.dart @@ -0,0 +1,66 @@ +import 'package:drift/drift.dart'; +import 'package:immich_mobile/domain/models/asset/base_asset.model.dart'; +import 'package:immich_mobile/domain/models/map.model.dart'; +import 'package:immich_mobile/domain/services/map.service.dart'; +import 'package:immich_mobile/infrastructure/entities/exif.entity.drift.dart'; +import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.drift.dart'; +import 'package:immich_mobile/infrastructure/repositories/db.repository.dart'; +import 'package:maplibre_gl/maplibre_gl.dart'; + +class DriftMapRepository extends DriftDatabaseRepository { + final Drift _db; + + const DriftMapRepository(super._db) : _db = _db; + + MapQuery remote(String ownerId) => _mapQueryBuilder( + assetFilter: (row) => + row.deletedAt.isNull() & row.visibility.equalsValue(AssetVisibility.timeline) & row.ownerId.equals(ownerId), + ); + + MapQuery _mapQueryBuilder({Expression Function($RemoteAssetEntityTable row)? assetFilter}) { + return (markerSource: (bounds) => _watchMapMarker(assetFilter: assetFilter, bounds: bounds)); + } + + Future> _watchMapMarker({ + Expression Function($RemoteAssetEntityTable row)? assetFilter, + LatLngBounds? bounds, + }) async { + final assetId = _db.remoteExifEntity.assetId; + final latitude = _db.remoteExifEntity.latitude; + final longitude = _db.remoteExifEntity.longitude; + + final query = _db.remoteExifEntity.selectOnly() + ..addColumns([assetId, latitude, longitude]) + ..join([innerJoin(_db.remoteAssetEntity, _db.remoteAssetEntity.id.equalsExp(assetId), useColumns: false)]) + ..limit(10000); + + if (assetFilter != null) { + query.where(assetFilter(_db.remoteAssetEntity)); + } + + if (bounds != null) { + query.where(_db.remoteExifEntity.inBounds(bounds)); + } else { + query.where(latitude.isNotNull() & longitude.isNotNull()); + } + + final rows = await query.get(); + return List.generate(rows.length, (i) { + final row = rows[i]; + return Marker(assetId: row.read(assetId)!, location: LatLng(row.read(latitude)!, row.read(longitude)!)); + }, growable: false); + } +} + +extension MapBounds on $RemoteExifEntityTable { + Expression inBounds(LatLngBounds bounds) { + final southwest = bounds.southwest; + final northeast = bounds.northeast; + + final latInBounds = latitude.isBetweenValues(southwest.latitude, northeast.latitude); + final longInBounds = southwest.longitude <= northeast.longitude + ? longitude.isBetweenValues(southwest.longitude, northeast.longitude) + : (longitude.isBiggerOrEqualValue(southwest.longitude) | longitude.isSmallerOrEqualValue(northeast.longitude)); + return latInBounds & longInBounds; + } +} diff --git a/mobile/lib/infrastructure/repositories/timeline.repository.dart b/mobile/lib/infrastructure/repositories/timeline.repository.dart index 663db9b82..b4188f7ac 100644 --- a/mobile/lib/infrastructure/repositories/timeline.repository.dart +++ b/mobile/lib/infrastructure/repositories/timeline.repository.dart @@ -11,6 +11,8 @@ import 'package:immich_mobile/infrastructure/entities/local_asset.entity.dart'; import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.dart'; import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.drift.dart'; import 'package:immich_mobile/infrastructure/repositories/db.repository.dart'; +import 'package:immich_mobile/infrastructure/repositories/map.repository.dart'; +import 'package:maplibre_gl/maplibre_gl.dart'; import 'package:stream_transform/stream_transform.dart'; class DriftTimelineRepository extends DriftDatabaseRepository { @@ -427,6 +429,63 @@ class DriftTimelineRepository extends DriftDatabaseRepository { return query.map((row) => row.readTable(_db.remoteAssetEntity).toDto()).get(); } + TimelineQuery map(LatLngBounds bounds, GroupAssetsBy groupBy) => ( + bucketSource: () => _watchMapBucket(bounds, groupBy: groupBy), + assetSource: (offset, count) => _getMapBucketAssets(bounds, offset: offset, count: count), + ); + + Stream> _watchMapBucket(LatLngBounds bounds, {GroupAssetsBy groupBy = GroupAssetsBy.day}) { + if (groupBy == GroupAssetsBy.none) { + // TODO: Support GroupAssetsBy.none + throw UnsupportedError("GroupAssetsBy.none is not supported for _watchMapBucket"); + } + + final assetCountExp = _db.remoteAssetEntity.id.count(); + final dateExp = _db.remoteAssetEntity.createdAt.dateFmt(groupBy); + + final query = _db.remoteAssetEntity.selectOnly() + ..addColumns([assetCountExp, dateExp]) + ..join([ + innerJoin( + _db.remoteExifEntity, + _db.remoteExifEntity.assetId.equalsExp(_db.remoteAssetEntity.id), + useColumns: false, + ), + ]) + ..where( + _db.remoteExifEntity.inBounds(bounds) & + _db.remoteAssetEntity.visibility.equalsValue(AssetVisibility.timeline) & + _db.remoteAssetEntity.deletedAt.isNull(), + ) + ..groupBy([dateExp]) + ..orderBy([OrderingTerm.desc(dateExp)]); + + return query.map((row) { + final timeline = row.read(dateExp)!.dateFmt(groupBy); + final assetCount = row.read(assetCountExp)!; + return TimeBucket(date: timeline, assetCount: assetCount); + }).watch(); + } + + Future> _getMapBucketAssets(LatLngBounds bounds, {required int offset, required int count}) { + final query = + _db.remoteAssetEntity.select().join([ + innerJoin( + _db.remoteExifEntity, + _db.remoteExifEntity.assetId.equalsExp(_db.remoteAssetEntity.id), + useColumns: false, + ), + ]) + ..where( + _db.remoteExifEntity.inBounds(bounds) & + _db.remoteAssetEntity.visibility.equalsValue(AssetVisibility.timeline) & + _db.remoteAssetEntity.deletedAt.isNull(), + ) + ..orderBy([OrderingTerm.desc(_db.remoteAssetEntity.createdAt)]) + ..limit(count, offset: offset); + return query.map((row) => row.readTable(_db.remoteAssetEntity).toDto()).get(); + } + TimelineQuery _remoteQueryBuilder({ required Expression Function($RemoteAssetEntityTable row) filter, GroupAssetsBy groupBy = GroupAssetsBy.day, diff --git a/mobile/lib/presentation/pages/drift_map.page.dart b/mobile/lib/presentation/pages/drift_map.page.dart new file mode 100644 index 000000000..30da6410b --- /dev/null +++ b/mobile/lib/presentation/pages/drift_map.page.dart @@ -0,0 +1,38 @@ +import 'package:auto_route/auto_route.dart'; +import 'package:flutter/material.dart'; +import 'package:immich_mobile/extensions/build_context_extensions.dart'; +import 'package:immich_mobile/presentation/widgets/map/map.widget.dart'; +import 'package:maplibre_gl/maplibre_gl.dart'; + +@RoutePage() +class DriftMapPage extends StatelessWidget { + final LatLng? initialLocation; + + const DriftMapPage({super.key, this.initialLocation}); + + @override + Widget build(BuildContext context) { + return Scaffold( + extendBodyBehindAppBar: true, + body: Stack( + children: [ + DriftMap(initialLocation: initialLocation), + Positioned( + left: 16, + top: 60, + child: IconButton.filled( + color: Colors.white, + onPressed: () => context.pop(), + icon: const Icon(Icons.arrow_back_ios_new_rounded), + style: IconButton.styleFrom( + shape: const CircleBorder(side: BorderSide(width: 1, color: Colors.black26)), + padding: const EdgeInsets.all(8), + backgroundColor: Colors.indigo.withValues(alpha: 0.7), + ), + ), + ), + ], + ), + ); + } +} diff --git a/mobile/lib/presentation/pages/drift_place.page.dart b/mobile/lib/presentation/pages/drift_place.page.dart index e85bb90d5..f540cbd46 100644 --- a/mobile/lib/presentation/pages/drift_place.page.dart +++ b/mobile/lib/presentation/pages/drift_place.page.dart @@ -92,9 +92,8 @@ class _Map extends StatelessWidget { child: SizedBox( height: 200, width: context.width, - // TODO: migrate to DriftMapRoute after merging #19898 child: MapThumbnail( - onTap: (_, __) => context.pushRoute(MapRoute(initialLocation: currentLocation)), + onTap: (_, __) => context.pushRoute(DriftMapRoute(initialLocation: currentLocation)), zoom: 8, centre: currentLocation ?? const LatLng(21.44950, -157.91959), showAttribution: false, diff --git a/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart index 82f2e1c3b..acbf2ad74 100644 --- a/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart +++ b/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart @@ -69,7 +69,7 @@ class _BaseDraggableScrollableSheetState extends ConsumerState shouldCloseOnMinExtent: widget.shouldCloseOnMinExtent, builder: (BuildContext context, ScrollController scrollController) { return Card( - color: widget.backgroundColor ?? context.colorScheme.surfaceContainerHigh, + color: widget.backgroundColor ?? context.colorScheme.surface, borderOnForeground: false, clipBehavior: Clip.antiAlias, elevation: 6.0, @@ -78,25 +78,21 @@ class _BaseDraggableScrollableSheetState extends ConsumerState child: CustomScrollView( controller: scrollController, slivers: [ - SliverToBoxAdapter( - child: Column( - children: [ - const SizedBox(height: 10), - const _DragHandle(), - const SizedBox(height: 14), - if (widget.actions.isNotEmpty) + const SliverPersistentHeader(delegate: _DragHandleDelegate(), pinned: true), + if (widget.actions.isNotEmpty) + SliverToBoxAdapter( + child: Column( + children: [ SizedBox( height: 115, child: ListView(shrinkWrap: true, scrollDirection: Axis.horizontal, children: widget.actions), ), - if (widget.actions.isNotEmpty) ...[ const Divider(indent: 16, endIndent: 16), const SizedBox(height: 16), ], - ], + ), ), - ), - ...(widget.slivers ?? []), + if (widget.slivers != null) ...widget.slivers!, ], ), ); @@ -105,17 +101,42 @@ class _BaseDraggableScrollableSheetState extends ConsumerState } } +class _DragHandleDelegate extends SliverPersistentHeaderDelegate { + const _DragHandleDelegate(); + + @override + Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { + return const _DragHandle(); + } + + @override + bool shouldRebuild(_DragHandleDelegate oldDelegate) => false; + + @override + double get minExtent => 50.0; + + @override + double get maxExtent => 50.0; +} + class _DragHandle extends StatelessWidget { const _DragHandle(); @override Widget build(BuildContext context) { - return Container( - height: 6, - width: 32, - decoration: BoxDecoration( - color: context.themeData.dividerColor.lighten(amount: 0.6), - borderRadius: const BorderRadius.all(Radius.circular(20)), + return SizedBox( + height: 50, + child: Center( + child: SizedBox( + width: 32, + height: 6, + child: DecoratedBox( + decoration: BoxDecoration( + borderRadius: const BorderRadius.all(Radius.circular(20)), + color: context.themeData.dividerColor.lighten(amount: 0.6), + ), + ), + ), ), ); } diff --git a/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart new file mode 100644 index 000000000..0017621c3 --- /dev/null +++ b/mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart @@ -0,0 +1,42 @@ +import 'package:flutter/material.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart'; +import 'package:immich_mobile/presentation/widgets/map/map.state.dart'; +import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart'; +import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart'; + +class MapBottomSheet extends StatelessWidget { + const MapBottomSheet({super.key}); + + @override + Widget build(BuildContext context) { + return const BaseBottomSheet( + initialChildSize: 0.25, + maxChildSize: 0.9, + shouldCloseOnMinExtent: false, + resizeOnScroll: false, + actions: [], + slivers: [SliverFillRemaining(hasScrollBody: false, child: _ScopedMapTimeline())], + ); + } +} + +class _ScopedMapTimeline extends StatelessWidget { + const _ScopedMapTimeline(); + + @override + Widget build(BuildContext context) { + // TODO: this causes the timeline to switch to flicker to "loading" state and back. This is both janky and inefficient. + return ProviderScope( + overrides: [ + timelineServiceProvider.overrideWith((ref) { + final bounds = ref.watch(mapStateProvider).bounds; + final timelineService = ref.watch(timelineFactoryProvider).map(bounds); + ref.onDispose(timelineService.dispose); + return timelineService; + }), + ], + child: const Timeline(appBar: null, bottomSheet: null), + ); + } +} diff --git a/mobile/lib/presentation/widgets/map/map.state.dart b/mobile/lib/presentation/widgets/map/map.state.dart new file mode 100644 index 000000000..b849f954a --- /dev/null +++ b/mobile/lib/presentation/widgets/map/map.state.dart @@ -0,0 +1,61 @@ +import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:immich_mobile/providers/infrastructure/map.provider.dart'; +import 'package:maplibre_gl/maplibre_gl.dart'; + +class MapState { + final LatLngBounds bounds; + + const MapState({required this.bounds}); + + @override + bool operator ==(covariant MapState other) { + return bounds == other.bounds; + } + + @override + int get hashCode => bounds.hashCode; + + MapState copyWith({LatLngBounds? bounds}) { + return MapState(bounds: bounds ?? this.bounds); + } +} + +class MapStateNotifier extends Notifier { + MapStateNotifier(); + + bool setBounds(LatLngBounds bounds) { + if (state.bounds == bounds) { + return false; + } + state = state.copyWith(bounds: bounds); + return true; + } + + @override + MapState build() => MapState( + // TODO: set default bounds + bounds: LatLngBounds(northeast: const LatLng(0, 0), southwest: const LatLng(0, 0)), + ); +} + +// This provider watches the markers from the map service and serves the markers. +// It should be used only after the map service provider is overridden +final mapMarkerProvider = FutureProvider.family, LatLngBounds?>((ref, bounds) async { + final mapService = ref.watch(mapServiceProvider); + final markers = await mapService.getMarkers(bounds); + final features = List.filled(markers.length, const {}); + for (int i = 0; i < markers.length; i++) { + final marker = markers[i]; + features[i] = { + 'type': 'Feature', + 'id': marker.assetId, + 'geometry': { + 'type': 'Point', + 'coordinates': [marker.location.longitude, marker.location.latitude], + }, + }; + } + return {'type': 'FeatureCollection', 'features': features}; +}, dependencies: [mapServiceProvider]); + +final mapStateProvider = NotifierProvider(MapStateNotifier.new); diff --git a/mobile/lib/presentation/widgets/map/map.widget.dart b/mobile/lib/presentation/widgets/map/map.widget.dart new file mode 100644 index 000000000..6eab5741d --- /dev/null +++ b/mobile/lib/presentation/widgets/map/map.widget.dart @@ -0,0 +1,191 @@ +import 'dart:async'; + +import 'package:flutter/material.dart'; +import 'package:fluttertoast/fluttertoast.dart'; +import 'package:geolocator/geolocator.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:immich_mobile/extensions/asyncvalue_extensions.dart'; +import 'package:immich_mobile/extensions/build_context_extensions.dart'; +import 'package:immich_mobile/extensions/translate_extensions.dart'; +import 'package:immich_mobile/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart'; +import 'package:immich_mobile/presentation/widgets/map/map_utils.dart'; +import 'package:immich_mobile/presentation/widgets/map/map.state.dart'; +import 'package:immich_mobile/utils/async_mutex.dart'; +import 'package:immich_mobile/utils/debounce.dart'; +import 'package:immich_mobile/widgets/common/immich_toast.dart'; +import 'package:immich_mobile/widgets/map/map_theme_override.dart'; +import 'package:maplibre_gl/maplibre_gl.dart'; + +class CustomSourceProperties implements SourceProperties { + final Map data; + const CustomSourceProperties({required this.data}); + + @override + Map toJson() { + return { + "type": "geojson", + "data": data, + // "cluster": true, + // "clusterRadius": 1, + // "clusterMinPoints": 5, + // "tolerance": 0.1, + }; + } +} + +class DriftMap extends ConsumerStatefulWidget { + final LatLng? initialLocation; + + const DriftMap({super.key, this.initialLocation}); + + @override + ConsumerState createState() => _DriftMapState(); +} + +class _DriftMapState extends ConsumerState { + MapLibreMapController? mapController; + final _reloadMutex = AsyncMutex(); + final _debouncer = Debouncer(interval: const Duration(milliseconds: 500), maxWaitTime: const Duration(seconds: 2)); + + @override + void dispose() { + _debouncer.dispose(); + super.dispose(); + } + + void onMapCreated(MapLibreMapController controller) { + mapController = controller; + } + + Future onMapReady() async { + final controller = mapController; + if (controller == null) { + return; + } + + await controller.addSource( + MapUtils.defaultSourceId, + const CustomSourceProperties(data: {'type': 'FeatureCollection', 'features': []}), + ); + + await controller.addHeatmapLayer( + MapUtils.defaultSourceId, + MapUtils.defaultHeatMapLayerId, + MapUtils.defaultHeatmapLayerProperties, + ); + _debouncer.run(setBounds); + controller.addListener(onMapMoved); + } + + void onMapMoved() { + if (mapController!.isCameraMoving || !mounted) { + return; + } + + _debouncer.run(setBounds); + } + + Future setBounds() async { + final controller = mapController; + if (controller == null || !mounted) { + return; + } + + final bounds = await controller.getVisibleRegion(); + _reloadMutex.run(() async { + if (mounted && ref.read(mapStateProvider.notifier).setBounds(bounds)) { + final markers = await ref.read(mapMarkerProvider(bounds).future); + await reloadMarkers(markers); + } + }); + } + + Future reloadMarkers(Map markers) async { + final controller = mapController; + if (controller == null || !mounted) { + return; + } + + await controller.setGeoJsonSource(MapUtils.defaultSourceId, markers); + } + + Future onZoomToLocation() async { + final (location, error) = await MapUtils.checkPermAndGetLocation(context: context); + if (error != null) { + if (error == LocationPermission.unableToDetermine && context.mounted) { + ImmichToast.show( + context: context, + gravity: ToastGravity.BOTTOM, + toastType: ToastType.error, + msg: "map_cannot_get_user_location".t(context: context), + ); + } + return; + } + + final controller = mapController; + if (controller != null && location != null) { + controller.animateCamera( + CameraUpdate.newLatLngZoom(LatLng(location.latitude, location.longitude), MapUtils.mapZoomToAssetLevel), + duration: const Duration(milliseconds: 800), + ); + } + } + + @override + Widget build(BuildContext context) { + return Stack( + children: [ + _Map(initialLocation: widget.initialLocation, onMapCreated: onMapCreated, onMapReady: onMapReady), + _MyLocationButton(onZoomToLocation: onZoomToLocation), + const MapBottomSheet(), + ], + ); + } +} + +class _Map extends StatelessWidget { + final LatLng? initialLocation; + + const _Map({this.initialLocation, required this.onMapCreated, required this.onMapReady}); + + final MapCreatedCallback onMapCreated; + + final VoidCallback onMapReady; + + @override + Widget build(BuildContext context) { + final initialLocation = this.initialLocation; + return MapThemeOverride( + mapBuilder: (style) => style.widgetWhen( + onData: (style) => MapLibreMap( + initialCameraPosition: initialLocation == null + ? const CameraPosition(target: LatLng(0, 0), zoom: 0) + : CameraPosition(target: initialLocation, zoom: MapUtils.mapZoomToAssetLevel), + styleString: style, + onMapCreated: onMapCreated, + onStyleLoadedCallback: onMapReady, + ), + ), + ); + } +} + +class _MyLocationButton extends StatelessWidget { + const _MyLocationButton({required this.onZoomToLocation}); + + final VoidCallback onZoomToLocation; + + @override + Widget build(BuildContext context) { + return Positioned( + right: 0, + bottom: context.padding.bottom + 16, + child: ElevatedButton( + onPressed: onZoomToLocation, + style: ElevatedButton.styleFrom(shape: const CircleBorder()), + child: const Icon(Icons.my_location), + ), + ); + } +} diff --git a/mobile/lib/presentation/widgets/map/map_utils.dart b/mobile/lib/presentation/widgets/map/map_utils.dart new file mode 100644 index 000000000..1c18fc48d --- /dev/null +++ b/mobile/lib/presentation/widgets/map/map_utils.dart @@ -0,0 +1,138 @@ +import 'dart:async'; + +import 'package:flutter/material.dart'; +import 'package:geolocator/geolocator.dart'; +import 'package:immich_mobile/extensions/translate_extensions.dart'; +import 'package:immich_mobile/widgets/common/confirm_dialog.dart'; +import 'package:logging/logging.dart'; +import 'package:maplibre_gl/maplibre_gl.dart'; + +class MapUtils { + static final Logger _logger = Logger("MapUtils"); + + static const mapZoomToAssetLevel = 12.0; + static const defaultSourceId = 'asset-map-markers'; + static const defaultHeatMapLayerId = 'asset-heatmap-layer'; + static var markerCompleter = Completer()..complete(); + + static const defaultCircleLayerLayerProperties = CircleLayerProperties( + circleRadius: 10, + circleColor: "rgba(150,86,34,0.7)", + circleBlur: 1.0, + circleOpacity: 0.7, + circleStrokeWidth: 0.1, + circleStrokeColor: "rgba(203,46,19,0.5)", + circleStrokeOpacity: 0.7, + ); + + static const defaultHeatmapLayerProperties = HeatmapLayerProperties( + heatmapColor: [ + Expressions.interpolate, + ["linear"], + ["heatmap-density"], + 0.0, + "rgba(103,58,183,0.0)", + 0.3, + "rgb(103,58,183)", + 0.5, + "rgb(33,149,243)", + 0.7, + "rgb(76,175,79)", + 0.95, + "rgb(255,235,59)", + 1.0, + "rgb(255,86,34)", + ], + heatmapIntensity: [ + Expressions.interpolate, + ["linear"], + [Expressions.zoom], + 0, + 0.5, + 9, + 2, + ], + heatmapRadius: [ + Expressions.interpolate, + ["linear"], + [Expressions.zoom], + 0, + 4, + 4, + 8, + 9, + 16, + ], + heatmapOpacity: 0.7, + ); + + static Future<(Position?, LocationPermission?)> checkPermAndGetLocation({ + required BuildContext context, + bool silent = false, + }) async { + try { + bool serviceEnabled = await Geolocator.isLocationServiceEnabled(); + if (!serviceEnabled && !silent) { + showDialog(context: context, builder: (context) => _LocationServiceDisabledDialog(context)); + return (null, LocationPermission.deniedForever); + } + + LocationPermission permission = await Geolocator.checkPermission(); + bool shouldRequestPermission = false; + + if (permission == LocationPermission.denied && !silent) { + shouldRequestPermission = await showDialog( + context: context, + builder: (context) => _LocationPermissionDisabledDialog(context), + ); + if (shouldRequestPermission) { + permission = await Geolocator.requestPermission(); + } + } + + if (permission == LocationPermission.denied || permission == LocationPermission.deniedForever) { + // Open app settings only if you did not request for permission before + if (permission == LocationPermission.deniedForever && !shouldRequestPermission && !silent) { + await Geolocator.openAppSettings(); + } + return (null, LocationPermission.deniedForever); + } + + Position currentUserLocation = await Geolocator.getCurrentPosition( + locationSettings: const LocationSettings( + accuracy: LocationAccuracy.high, + distanceFilter: 0, + timeLimit: Duration(seconds: 5), + ), + ); + return (currentUserLocation, null); + } catch (error, stack) { + _logger.severe("Cannot get user's current location", error, stack); + return (null, LocationPermission.unableToDetermine); + } + } +} + +class _LocationServiceDisabledDialog extends ConfirmDialog { + _LocationServiceDisabledDialog(BuildContext context) + : super( + title: 'map_location_service_disabled_title'.t(context: context), + content: 'map_location_service_disabled_content'.t(context: context), + cancel: 'cancel'.t(context: context), + ok: 'yes'.t(context: context), + onOk: () async { + await Geolocator.openLocationSettings(); + }, + ); +} + +class _LocationPermissionDisabledDialog extends ConfirmDialog { + _LocationPermissionDisabledDialog(BuildContext context) + : super( + title: 'map_no_location_permission_title'.t(context: context), + content: 'map_no_location_permission_content'.t(context: context), + cancel: 'cancel'.t(context: context), + ok: 'yes'.t(context: context), + onOk: () {}, + ); +} diff --git a/mobile/lib/presentation/widgets/timeline/timeline.widget.dart b/mobile/lib/presentation/widgets/timeline/timeline.widget.dart index 94e13c4e9..b35aac59e 100644 --- a/mobile/lib/presentation/widgets/timeline/timeline.widget.dart +++ b/mobile/lib/presentation/widgets/timeline/timeline.widget.dart @@ -107,14 +107,10 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> { super.initState(); _eventSubscription = EventStream.shared.listen(_onEvent); - WidgetsBinding.instance.addPostFrameCallback((_) { - final currentTilesPerRow = ref.read(settingsProvider).get(Setting.tilesPerRow); - setState(() { - _perRow = currentTilesPerRow; - _scaleFactor = 7.0 - _perRow; - _baseScaleFactor = _scaleFactor; - }); - }); + final currentTilesPerRow = ref.read(settingsProvider).get(Setting.tilesPerRow); + _perRow = currentTilesPerRow; + _scaleFactor = 7.0 - _perRow; + _baseScaleFactor = _scaleFactor; ref.listenManual(multiSelectProvider.select((s) => s.isEnabled), _onMultiSelectionToggled); } diff --git a/mobile/lib/providers/infrastructure/map.provider.dart b/mobile/lib/providers/infrastructure/map.provider.dart new file mode 100644 index 000000000..e774cec75 --- /dev/null +++ b/mobile/lib/providers/infrastructure/map.provider.dart @@ -0,0 +1,24 @@ +import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:immich_mobile/infrastructure/repositories/map.repository.dart'; +import 'package:immich_mobile/providers/infrastructure/db.provider.dart'; +import 'package:immich_mobile/domain/services/map.service.dart'; +import 'package:immich_mobile/providers/user.provider.dart'; + +final mapRepositoryProvider = Provider((ref) => DriftMapRepository(ref.watch(driftProvider))); + +final mapServiceProvider = Provider( + (ref) { + final user = ref.watch(currentUserProvider); + if (user == null) { + throw Exception('User must be logged in to access map'); + } + + final mapService = ref.watch(mapFactoryProvider).remote(user.id); + return mapService; + }, + // Empty dependencies to inform the framework that this provider + // might be used in a ProviderScope + dependencies: const [], +); + +final mapFactoryProvider = Provider((ref) => MapFactory(mapRepository: ref.watch(mapRepositoryProvider))); diff --git a/mobile/lib/routing/router.dart b/mobile/lib/routing/router.dart index e75da235d..da2461782 100644 --- a/mobile/lib/routing/router.dart +++ b/mobile/lib/routing/router.dart @@ -89,6 +89,7 @@ import 'package:immich_mobile/presentation/pages/drift_favorite.page.dart'; import 'package:immich_mobile/presentation/pages/drift_library.page.dart'; import 'package:immich_mobile/presentation/pages/drift_local_album.page.dart'; import 'package:immich_mobile/presentation/pages/drift_locked_folder.page.dart'; +import 'package:immich_mobile/presentation/pages/drift_map.page.dart'; import 'package:immich_mobile/presentation/pages/drift_memory.page.dart'; import 'package:immich_mobile/presentation/pages/drift_partner_detail.page.dart'; import 'package:immich_mobile/presentation/pages/drift_people_collection.page.dart'; @@ -331,6 +332,7 @@ class AppRouter extends RootStackRouter { AutoRoute(page: DriftPersonRoute.page, guards: [_authGuard]), AutoRoute(page: DriftBackupOptionsRoute.page, guards: [_authGuard, _duplicateGuard]), AutoRoute(page: DriftAlbumOptionsRoute.page, guards: [_authGuard, _duplicateGuard]), + AutoRoute(page: DriftMapRoute.page, guards: [_authGuard, _duplicateGuard]), // required to handle all deeplinks in deep_link.service.dart // auto_route_library#1722 RedirectRoute(path: '*', redirectTo: '/'), diff --git a/mobile/lib/routing/router.gr.dart b/mobile/lib/routing/router.gr.dart index f5b3728ff..8c5064e75 100644 --- a/mobile/lib/routing/router.gr.dart +++ b/mobile/lib/routing/router.gr.dart @@ -892,6 +892,45 @@ class DriftLockedFolderRoute extends PageRouteInfo { ); } +/// generated route for +/// [DriftMapPage] +class DriftMapRoute extends PageRouteInfo { + DriftMapRoute({ + Key? key, + LatLng? initialLocation, + List? children, + }) : super( + DriftMapRoute.name, + args: DriftMapRouteArgs(key: key, initialLocation: initialLocation), + initialChildren: children, + ); + + static const String name = 'DriftMapRoute'; + + static PageInfo page = PageInfo( + name, + builder: (data) { + final args = data.argsAs( + orElse: () => const DriftMapRouteArgs(), + ); + return DriftMapPage(key: args.key, initialLocation: args.initialLocation); + }, + ); +} + +class DriftMapRouteArgs { + const DriftMapRouteArgs({this.key, this.initialLocation}); + + final Key? key; + + final LatLng? initialLocation; + + @override + String toString() { + return 'DriftMapRouteArgs{key: $key, initialLocation: $initialLocation}'; + } +} + /// generated route for /// [DriftMemoryPage] class DriftMemoryRoute extends PageRouteInfo { diff --git a/mobile/lib/utils/async_mutex.dart b/mobile/lib/utils/async_mutex.dart index c61e6b13f..b97ab9b05 100644 --- a/mobile/lib/utils/async_mutex.dart +++ b/mobile/lib/utils/async_mutex.dart @@ -5,7 +5,7 @@ class AsyncMutex { Future _running = Future.value(null); int _enqueued = 0; - get enqueued => _enqueued; + int get enqueued => _enqueued; /// Execute [operation] exclusively, after any currently running operations. /// Returns a [Future] with the result of the [operation]. diff --git a/mobile/lib/utils/debounce.dart b/mobile/lib/utils/debounce.dart index 5451b569c..4c8060142 100644 --- a/mobile/lib/utils/debounce.dart +++ b/mobile/lib/utils/debounce.dart @@ -27,8 +27,9 @@ class Debouncer { } Future? drain() { - if (_timer != null && _timer!.isActive) { - _timer!.cancel(); + final timer = _timer; + if (timer != null && timer.isActive) { + timer.cancel(); if (_lastAction != null) { _callAndRest(); } diff --git a/mobile/test/drift/main/generated/schema.dart b/mobile/test/drift/main/generated/schema.dart index d59002bf5..87de9194d 100644 Binary files a/mobile/test/drift/main/generated/schema.dart and b/mobile/test/drift/main/generated/schema.dart differ diff --git a/mobile/test/drift/main/generated/schema_v7.dart b/mobile/test/drift/main/generated/schema_v7.dart new file mode 100644 index 000000000..c91e1ac53 Binary files /dev/null and b/mobile/test/drift/main/generated/schema_v7.dart differ