Sudheer Reddy Puthana 8853079c54
feat(mobile): add read only mode (#19368)
* feat(mobile): Add Kid (Readonly) Mode toggle

This commit introduces a "Kid (Readonly) Mode" feature.

- Adds a `KidModeProvider` to manage the state of Kid Mode.
- Implements a `KidModeCheckbox` widget in the app bar dialog to toggle Kid Mode.
- When Kid Mode is enabled,
  - Disables selecting the multigrid & the bottom bar
  - Removes the top bar from view

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Reverts the changes to devtools_options.yaml file

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

refactor: replace Kid Mode with Readonly Mode

This commit replaces the "Kid Mode" feature with a more generic "Readonly Mode".

- Renamed `KidModeProvider` to `ReadonlyModeProvider`.
- Readonly Mode state is now persisted in app settings.
- Added a new app setting `allowUserAvatarOverride` to toggle read-only mode.
- Updated translations.
- Added a message in the app bar dialog indicating when read-only mode is active.

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Address comments -

- Removes the `allowUserAvatarOverride` setting.
- Hides the bottom gallery bar when read-only mode is enabled.
- Adds an icon on the main app bar when read-only mode is enabled with a snackbar.

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Update to snackbar

- When toggling readonly mode from either the settings or the app bar, a snackbar notification will now appear.
- The readonly mode message in the profile drawer has been restyled.
- The upload button in the app bar is now hidden when readonly mode is enabled.

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Removes clearing of snackbar

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Address Comments

- Consolidated snackbar messages for enabling/disabling readonly mode.
- Ensured the "Select All" icon in asset group titles is hidden in readonly mode.

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Adds in the missing translation keys for readonly_mode

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Fix translation

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Fix check failure for BorderRadius

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Changes:
- Adjusted AppBar background color in readonly mode.
- Removes cross-out pencil icon button in favor of above.
- Hides the "Edit" icon next to date/time, disable description and onTap for people and location when readonly mode is enabled.

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

Address comments from Alex

- Moved readonly mode check to `GalleryAppBar` to hide the entire `TopControlAppBar` when readonly mode is enabled.
- Changed `toggleReadonlyMode` in `ImmichAppBar` to directly toggle the state.

Signed-off-by: Sudheer Puthana <Sud-Puth@users.noreply.github.com>

migrate readonly mode to new beta timeline

remove readonly mode from legacy UI

only show readonly functionality when on beta timeline

simplify selection icon

update generated provider

chore: more formatting

* fix: bad merge

* chore: use Notifier for readonlyModeProvider

* fix: drag select now honors readonly mode

* fix: disable asset bottom sheet in readonly

* fix: disable editing user icon when in readonly

* chore: remove generated file

* fix: disable tabs instead entire tab bar

This solves the issues with the scrubber

* chore: remove unneeded import

* chore: lint

* remove unused condition in bottomsheet

---------

Co-authored-by: Brandon Wees <brandonwees@gmail.com>
Co-authored-by: Alex <alex.tran1502@gmail.com>
2025-08-28 17:30:15 +00:00

210 lines
7.5 KiB
Dart

import 'dart:math' as math;
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/domain/services/timeline.service.dart';
import 'package:immich_mobile/presentation/widgets/images/thumbnail_tile.widget.dart';
import 'package:immich_mobile/presentation/widgets/timeline/fixed/row.dart';
import 'package:immich_mobile/presentation/widgets/timeline/header.widget.dart';
import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
import 'package:immich_mobile/presentation/widgets/timeline/segment_builder.dart';
import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart';
import 'package:immich_mobile/presentation/widgets/timeline/timeline_drag_region.dart';
import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
import 'package:immich_mobile/routing/router.dart';
class FixedSegment extends Segment {
final double tileHeight;
final int columnCount;
final double mainAxisExtend;
const FixedSegment({
required super.firstIndex,
required super.lastIndex,
required super.startOffset,
required super.endOffset,
required super.firstAssetIndex,
required super.bucket,
required this.tileHeight,
required this.columnCount,
required super.headerExtent,
required super.spacing,
required super.header,
}) : assert(tileHeight != 0),
mainAxisExtend = tileHeight + spacing;
@override
double indexToLayoutOffset(int index) {
final relativeIndex = index - gridIndex;
return relativeIndex < 0 ? startOffset : gridOffset + (mainAxisExtend * relativeIndex);
}
@override
int getMinChildIndexForScrollOffset(double scrollOffset) {
final adjustedOffset = scrollOffset - gridOffset;
if (!adjustedOffset.isFinite || adjustedOffset < 0) return firstIndex;
return gridIndex + (adjustedOffset / mainAxisExtend).floor();
}
@override
int getMaxChildIndexForScrollOffset(double scrollOffset) {
final adjustedOffset = scrollOffset - gridOffset;
if (!adjustedOffset.isFinite || adjustedOffset < 0) return firstIndex;
return gridIndex + (adjustedOffset / mainAxisExtend).ceil() - 1;
}
@override
Widget builder(BuildContext context, int index) {
final rowIndexInSegment = index - (firstIndex + 1);
final assetIndex = rowIndexInSegment * columnCount;
final assetCount = bucket.assetCount;
final numberOfAssets = math.min(columnCount, assetCount - assetIndex);
if (index == firstIndex) {
return TimelineHeader(bucket: bucket, header: header, height: headerExtent, assetOffset: firstAssetIndex);
}
return _FixedSegmentRow(
assetIndex: firstAssetIndex + assetIndex,
assetCount: numberOfAssets,
tileHeight: tileHeight,
spacing: spacing,
);
}
}
class _FixedSegmentRow extends ConsumerWidget {
final int assetIndex;
final int assetCount;
final double tileHeight;
final double spacing;
const _FixedSegmentRow({
required this.assetIndex,
required this.assetCount,
required this.tileHeight,
required this.spacing,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final isScrubbing = ref.watch(timelineStateProvider.select((s) => s.isScrubbing));
final timelineService = ref.read(timelineServiceProvider);
if (isScrubbing) {
return _buildPlaceholder(context);
}
if (timelineService.hasRange(assetIndex, assetCount)) {
return _buildAssetRow(context, timelineService.getAssets(assetIndex, assetCount), timelineService);
}
return FutureBuilder<List<BaseAsset>>(
future: timelineService.loadAssets(assetIndex, assetCount),
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return _buildPlaceholder(context);
}
return _buildAssetRow(context, snapshot.requireData, timelineService);
},
);
}
Widget _buildPlaceholder(BuildContext context) {
return SegmentBuilder.buildPlaceholder(context, assetCount, size: Size.square(tileHeight), spacing: spacing);
}
Widget _buildAssetRow(BuildContext context, List<BaseAsset> assets, TimelineService timelineService) {
return FixedTimelineRow(
dimension: tileHeight,
spacing: spacing,
textDirection: Directionality.of(context),
children: [
for (int i = 0; i < assets.length; i++)
TimelineAssetIndexWrapper(
assetIndex: assetIndex + i,
segmentIndex: 0, // For simplicity, using 0 for now
child: _AssetTileWidget(
key: ValueKey(Object.hash(assets[i].heroTag, assetIndex + i, timelineService.hashCode)),
asset: assets[i],
assetIndex: assetIndex + i,
),
),
],
);
}
}
class _AssetTileWidget extends ConsumerWidget {
final BaseAsset asset;
final int assetIndex;
const _AssetTileWidget({super.key, required this.asset, required this.assetIndex});
Future _handleOnTap(BuildContext ctx, WidgetRef ref, int assetIndex, BaseAsset asset, int? heroOffset) async {
final multiSelectState = ref.read(multiSelectProvider);
if (multiSelectState.forceEnable || multiSelectState.isEnabled) {
ref.read(multiSelectProvider.notifier).toggleAssetSelection(asset);
} else {
await ref.read(timelineServiceProvider).loadAssets(assetIndex, 1);
ref.read(isPlayingMotionVideoProvider.notifier).playing = false;
ctx.pushRoute(
AssetViewerRoute(
initialIndex: assetIndex,
timelineService: ref.read(timelineServiceProvider),
heroOffset: heroOffset,
),
);
}
}
void _handleOnLongPress(WidgetRef ref, BaseAsset asset) {
final multiSelectState = ref.read(multiSelectProvider);
if (multiSelectState.isEnabled || multiSelectState.forceEnable) {
return;
}
ref.read(hapticFeedbackProvider.notifier).heavyImpact();
ref.read(multiSelectProvider.notifier).toggleAssetSelection(asset);
}
bool _getLockSelectionStatus(WidgetRef ref) {
final lockSelectionAssets = ref.read(multiSelectProvider.select((state) => state.lockedSelectionAssets));
if (lockSelectionAssets.isEmpty) {
return false;
}
return lockSelectionAssets.contains(asset);
}
@override
Widget build(BuildContext context, WidgetRef ref) {
final heroOffset = TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
final lockSelection = _getLockSelectionStatus(ref);
final showStorageIndicator = ref.watch(timelineArgsProvider.select((args) => args.showStorageIndicator));
final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
return RepaintBoundary(
child: GestureDetector(
onTap: () => lockSelection ? null : _handleOnTap(context, ref, assetIndex, asset, heroOffset),
onLongPress: () => lockSelection || isReadonlyModeEnabled ? null : _handleOnLongPress(ref, asset),
child: ThumbnailTile(
asset,
lockSelection: lockSelection,
showStorageIndicator: showStorageIndicator,
heroOffset: heroOffset,
),
),
);
}
}