mirror of https://github.com/immich-app/immich.git
feat(mobile): Adds onboarding for permissions (#1865)
* adds onboarding * fixed error where login was taking you to permission page * fixed a bad rebase and added more checks to not start backup service on login if no gallery permission * forgot the permission handler import in AppDelegate * reverts album selection page * change to ref watch * added device_info_plus to podspec * removed unused import --------- Co-authored-by: Marty Fuhry <marty@fuhry.farm>pull/1901/head
martyfuhry
GitHub
parent
df1710f4cc
commit
12217bde8a
@ -0,0 +1,101 @@
|
|||||||
|
import 'dart:io';
|
||||||
|
|
||||||
|
import 'package:device_info_plus/device_info_plus.dart';
|
||||||
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
|
import 'package:permission_handler/permission_handler.dart';
|
||||||
|
|
||||||
|
class GalleryPermissionNotifier extends StateNotifier<PermissionStatus> {
|
||||||
|
GalleryPermissionNotifier()
|
||||||
|
: super(PermissionStatus.denied) // Denied is the intitial state
|
||||||
|
{
|
||||||
|
// Sets the initial state
|
||||||
|
getGalleryPermissionStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
get hasPermission => state.isGranted || state.isLimited;
|
||||||
|
|
||||||
|
/// Requests the gallery permission
|
||||||
|
Future<PermissionStatus> requestGalleryPermission() async {
|
||||||
|
// Android 32 and below uses Permission.storage
|
||||||
|
if (Platform.isAndroid) {
|
||||||
|
final androidInfo = await DeviceInfoPlugin().androidInfo;
|
||||||
|
if (androidInfo.version.sdkInt <= 32) {
|
||||||
|
// Android 32 and below need storage
|
||||||
|
final permission = await Permission.storage.request();
|
||||||
|
state = permission;
|
||||||
|
return permission;
|
||||||
|
} else {
|
||||||
|
// Android 33 need photo & video
|
||||||
|
final photos = await Permission.photos.request();
|
||||||
|
if (!photos.isGranted) {
|
||||||
|
// Don't ask twice for the same permission
|
||||||
|
return photos;
|
||||||
|
}
|
||||||
|
final videos = await Permission.videos.request();
|
||||||
|
|
||||||
|
// Return the joint result of those two permissions
|
||||||
|
final PermissionStatus status;
|
||||||
|
if (photos.isGranted && videos.isGranted) {
|
||||||
|
status = PermissionStatus.granted;
|
||||||
|
} else if (photos.isDenied || videos.isDenied) {
|
||||||
|
status = PermissionStatus.denied;
|
||||||
|
} else if (photos.isPermanentlyDenied || videos.isPermanentlyDenied) {
|
||||||
|
status = PermissionStatus.permanentlyDenied;
|
||||||
|
} else {
|
||||||
|
status = PermissionStatus.denied;
|
||||||
|
}
|
||||||
|
|
||||||
|
state = status;
|
||||||
|
return status;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// iOS can use photos
|
||||||
|
final photos = await Permission.photos.request();
|
||||||
|
state = photos;
|
||||||
|
return photos;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Checks the current state of the gallery permissions without
|
||||||
|
/// requesting them again
|
||||||
|
Future<PermissionStatus> getGalleryPermissionStatus() async {
|
||||||
|
// Android 32 and below uses Permission.storage
|
||||||
|
if (Platform.isAndroid) {
|
||||||
|
final androidInfo = await DeviceInfoPlugin().androidInfo;
|
||||||
|
if (androidInfo.version.sdkInt <= 32) {
|
||||||
|
// Android 32 and below need storage
|
||||||
|
final permission = await Permission.storage.status;
|
||||||
|
state = permission;
|
||||||
|
return permission;
|
||||||
|
} else {
|
||||||
|
// Android 33 needs photo & video
|
||||||
|
final photos = await Permission.photos.status;
|
||||||
|
final videos = await Permission.videos.status;
|
||||||
|
|
||||||
|
// Return the joint result of those two permissions
|
||||||
|
final PermissionStatus status;
|
||||||
|
if (photos.isGranted && videos.isGranted) {
|
||||||
|
status = PermissionStatus.granted;
|
||||||
|
} else if (photos.isDenied || videos.isDenied) {
|
||||||
|
status = PermissionStatus.denied;
|
||||||
|
} else if (photos.isPermanentlyDenied || videos.isPermanentlyDenied) {
|
||||||
|
status = PermissionStatus.permanentlyDenied;
|
||||||
|
} else {
|
||||||
|
status = PermissionStatus.denied;
|
||||||
|
}
|
||||||
|
|
||||||
|
state = status;
|
||||||
|
return status;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// iOS can use photos
|
||||||
|
final photos = await Permission.photos.status;
|
||||||
|
state = photos;
|
||||||
|
return photos;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
final galleryPermissionNotifier
|
||||||
|
= StateNotifierProvider<GalleryPermissionNotifier, PermissionStatus>
|
||||||
|
((ref) => GalleryPermissionNotifier());
|
||||||
@ -0,0 +1,201 @@
|
|||||||
|
import 'package:auto_route/auto_route.dart';
|
||||||
|
import 'package:easy_localization/easy_localization.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
|
import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
|
||||||
|
import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
|
||||||
|
import 'package:immich_mobile/modules/onboarding/providers/gallery_permission.provider.dart';
|
||||||
|
import 'package:immich_mobile/routing/router.dart';
|
||||||
|
import 'package:immich_mobile/shared/ui/immich_logo.dart';
|
||||||
|
import 'package:immich_mobile/shared/ui/immich_title_text.dart';
|
||||||
|
import 'package:permission_handler/permission_handler.dart';
|
||||||
|
|
||||||
|
class PermissionOnboardingPage extends HookConsumerWidget {
|
||||||
|
|
||||||
|
const PermissionOnboardingPage({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
|
final PermissionStatus permission = ref.watch(galleryPermissionNotifier);
|
||||||
|
|
||||||
|
// Navigate to the main Tab Controller when permission is granted
|
||||||
|
void goToHome() {
|
||||||
|
// Resume backup (if enable) then navigate
|
||||||
|
ref.watch(backupProvider.notifier).resumeBackup()
|
||||||
|
.catchError((error) {
|
||||||
|
debugPrint('PermissionOnboardingPage error: $error');
|
||||||
|
});
|
||||||
|
AutoRouter.of(context).replace(
|
||||||
|
const TabControllerRoute(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// When the permission is denied, we show a request permission page
|
||||||
|
buildRequestPermission() {
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'permission_onboarding_request',
|
||||||
|
style: Theme.of(context).textTheme.titleMedium,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
).tr(),
|
||||||
|
const SizedBox(height: 18),
|
||||||
|
ElevatedButton(
|
||||||
|
onPressed: () => ref
|
||||||
|
.read(galleryPermissionNotifier.notifier)
|
||||||
|
.requestGalleryPermission()
|
||||||
|
.then((permission) async {
|
||||||
|
if (permission.isGranted) {
|
||||||
|
// If permission is limited, we will show the limited
|
||||||
|
// permission page
|
||||||
|
goToHome();
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
child: const Text(
|
||||||
|
'permission_onboarding_grant_permission',
|
||||||
|
).tr(),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// When permission is granted from outside the app, this will show to
|
||||||
|
// let them continue on to the main timeline
|
||||||
|
buildPermissionGranted() {
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'permission_onboarding_permission_granted',
|
||||||
|
style: Theme.of(context).textTheme.titleMedium,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
).tr(),
|
||||||
|
const SizedBox(height: 18),
|
||||||
|
ElevatedButton(
|
||||||
|
onPressed: () => goToHome(),
|
||||||
|
child: const Text('permission_onboarding_get_started').tr(),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// iOS 14+ has limited permission options, which let someone just share
|
||||||
|
// a few photos with the app. If someone only has limited permissions, we
|
||||||
|
// inform that Immich works best when given full permission
|
||||||
|
buildPermissionLimited() {
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
const Icon(Icons.warning_outlined,
|
||||||
|
color: Colors.yellow,
|
||||||
|
size: 48,
|
||||||
|
),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
Text(
|
||||||
|
'permission_onboarding_permission_limited',
|
||||||
|
style: Theme.of(context).textTheme.titleMedium,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
).tr(),
|
||||||
|
const SizedBox(height: 18),
|
||||||
|
ElevatedButton(
|
||||||
|
onPressed: () => openAppSettings(),
|
||||||
|
child: const Text(
|
||||||
|
'permission_onboarding_go_to_settings',
|
||||||
|
).tr(),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 8.0),
|
||||||
|
TextButton(
|
||||||
|
onPressed: () => goToHome(),
|
||||||
|
child: const Text(
|
||||||
|
'permission_onboarding_continue_anyway',
|
||||||
|
).tr(),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
buildPermissionDenied() {
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
const Icon(Icons.warning_outlined,
|
||||||
|
color: Colors.red,
|
||||||
|
size: 48,
|
||||||
|
),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
Text(
|
||||||
|
'permission_onboarding_permission_denied',
|
||||||
|
style: Theme.of(context).textTheme.titleMedium,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
).tr(),
|
||||||
|
const SizedBox(height: 18),
|
||||||
|
ElevatedButton(
|
||||||
|
onPressed: () => openAppSettings(),
|
||||||
|
child: const Text(
|
||||||
|
'permission_onboarding_go_to_settings',
|
||||||
|
).tr(),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
final Widget child;
|
||||||
|
switch (permission) {
|
||||||
|
case PermissionStatus.limited:
|
||||||
|
child = buildPermissionLimited();
|
||||||
|
break;
|
||||||
|
case PermissionStatus.denied:
|
||||||
|
child = buildRequestPermission();
|
||||||
|
break;
|
||||||
|
case PermissionStatus.granted:
|
||||||
|
child = buildPermissionGranted();
|
||||||
|
break;
|
||||||
|
case PermissionStatus.restricted:
|
||||||
|
case PermissionStatus.permanentlyDenied:
|
||||||
|
child = buildPermissionDenied();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Scaffold(
|
||||||
|
body: SafeArea(
|
||||||
|
child: Center(
|
||||||
|
child: SizedBox(
|
||||||
|
width: 380,
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
const ImmichLogo(
|
||||||
|
heroTag: 'logo',
|
||||||
|
),
|
||||||
|
const ImmichTitleText(),
|
||||||
|
AnimatedSwitcher(
|
||||||
|
duration: const Duration(milliseconds: 500),
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(18.0),
|
||||||
|
child: child,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
TextButton(
|
||||||
|
child: const Text('permission_onboarding_log_out').tr(),
|
||||||
|
onPressed: () {
|
||||||
|
ref.read(authenticationProvider.notifier).logout();
|
||||||
|
AutoRouter.of(context).replace(
|
||||||
|
const LoginRoute(),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
],
|
||||||
|
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import 'package:permission_handler/permission_handler.dart';
|
|
||||||
|
|
||||||
/// This class is for requesting permissions in the app
|
|
||||||
class PermissionService {
|
|
||||||
/// Requests the notification permission
|
|
||||||
/// Note: In Android, this is always granted
|
|
||||||
Future<PermissionStatus> requestNotificationPermission() {
|
|
||||||
return Permission.notification.request();
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Whether the user has the permission or not
|
|
||||||
/// Note: In Android, this is always true
|
|
||||||
Future<bool> hasNotificationPermission() {
|
|
||||||
return Permission.notification.isGranted;
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Either the permission was granted already or else ask for the permission
|
|
||||||
Future<bool> hasOrAskForNotificationPermission() {
|
|
||||||
return requestNotificationPermission().then((p) => p.isGranted);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import 'package:auto_route/auto_route.dart';
|
||||||
|
import 'package:immich_mobile/modules/onboarding/providers/gallery_permission.provider.dart';
|
||||||
|
import 'package:immich_mobile/routing/router.dart';
|
||||||
|
|
||||||
|
class GalleryPermissionGuard extends AutoRouteGuard {
|
||||||
|
final GalleryPermissionNotifier _permission;
|
||||||
|
|
||||||
|
GalleryPermissionGuard(this._permission);
|
||||||
|
|
||||||
|
@override
|
||||||
|
void onNavigation(NavigationResolver resolver, StackRouter router) async {
|
||||||
|
final p = _permission.hasPermission;
|
||||||
|
if (p) {
|
||||||
|
resolver.next(true);
|
||||||
|
} else {
|
||||||
|
router.replaceAll([const PermissionOnboardingRoute()]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class ImmichLogo extends StatelessWidget {
|
||||||
|
final double size;
|
||||||
|
final dynamic heroTag;
|
||||||
|
|
||||||
|
const ImmichLogo({
|
||||||
|
super.key,
|
||||||
|
this.size = 100,
|
||||||
|
this.heroTag,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Hero(
|
||||||
|
tag: heroTag,
|
||||||
|
child: Image(
|
||||||
|
image: const AssetImage('assets/immich-logo-no-outline.png'),
|
||||||
|
width: size,
|
||||||
|
filterQuality: FilterQuality.high,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class ImmichTitleText extends StatelessWidget {
|
||||||
|
final double fontSize;
|
||||||
|
final Color? color;
|
||||||
|
|
||||||
|
const ImmichTitleText({
|
||||||
|
super.key,
|
||||||
|
this.fontSize = 48,
|
||||||
|
this.color,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Text(
|
||||||
|
'IMMICH',
|
||||||
|
style: TextStyle(
|
||||||
|
fontFamily: 'SnowburstOne',
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: fontSize,
|
||||||
|
color: color ?? Theme.of(context).primaryColor,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue