2022-04-24 04:08:45 +02:00
|
|
|
import 'package:auto_route/auto_route.dart';
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
|
|
import 'package:immich_mobile/modules/sharing/models/asset_selection_page_result.model.dart';
|
|
|
|
import 'package:immich_mobile/modules/sharing/providers/album_title.provider.dart';
|
|
|
|
import 'package:immich_mobile/modules/sharing/providers/asset_selection.provider.dart';
|
|
|
|
import 'package:immich_mobile/modules/sharing/ui/album_action_outlined_button.dart';
|
|
|
|
import 'package:immich_mobile/modules/sharing/ui/album_title_text_field.dart';
|
|
|
|
import 'package:immich_mobile/modules/sharing/ui/shared_album_thumbnail_image.dart';
|
|
|
|
import 'package:immich_mobile/routing/router.dart';
|
|
|
|
|
|
|
|
class CreateSharedAlbumPage extends HookConsumerWidget {
|
|
|
|
const CreateSharedAlbumPage({Key? key}) : super(key: key);
|
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
2022-06-22 07:23:35 +02:00
|
|
|
final albumTitleController =
|
|
|
|
useTextEditingController.fromValue(TextEditingValue.empty);
|
2022-04-24 04:08:45 +02:00
|
|
|
final albumTitleTextFieldFocusNode = useFocusNode();
|
|
|
|
final isAlbumTitleTextFieldFocus = useState(false);
|
|
|
|
final isAlbumTitleEmpty = useState(true);
|
2022-06-22 07:23:35 +02:00
|
|
|
final selectedAssets =
|
|
|
|
ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum;
|
2022-04-24 04:08:45 +02:00
|
|
|
|
|
|
|
_showSelectUserPage() {
|
|
|
|
AutoRouter.of(context).push(const SelectUserForSharingRoute());
|
|
|
|
}
|
|
|
|
|
|
|
|
void _onBackgroundTapped() {
|
|
|
|
albumTitleTextFieldFocusNode.unfocus();
|
|
|
|
isAlbumTitleTextFieldFocus.value = false;
|
|
|
|
|
|
|
|
if (albumTitleController.text.isEmpty) {
|
|
|
|
albumTitleController.text = 'Untitled';
|
|
|
|
ref.watch(albumTitleProvider.notifier).setAlbumTitle('Untitled');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_onSelectPhotosButtonPressed() async {
|
|
|
|
ref.watch(assetSelectionProvider.notifier).setIsAlbumExist(false);
|
|
|
|
|
2022-06-22 07:23:35 +02:00
|
|
|
AssetSelectionPageResult? selectedAsset = await AutoRouter.of(context)
|
|
|
|
.push<AssetSelectionPageResult?>(const AssetSelectionRoute());
|
2022-04-24 04:08:45 +02:00
|
|
|
|
|
|
|
if (selectedAsset == null) {
|
|
|
|
ref.watch(assetSelectionProvider.notifier).removeAll();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_buildTitleInputField() {
|
|
|
|
return Padding(
|
|
|
|
padding: const EdgeInsets.only(
|
|
|
|
right: 10,
|
|
|
|
left: 10,
|
|
|
|
),
|
|
|
|
child: AlbumTitleTextField(
|
|
|
|
isAlbumTitleEmpty: isAlbumTitleEmpty,
|
|
|
|
albumTitleTextFieldFocusNode: albumTitleTextFieldFocusNode,
|
|
|
|
albumTitleController: albumTitleController,
|
|
|
|
isAlbumTitleTextFieldFocus: isAlbumTitleTextFieldFocus),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
_buildTitle() {
|
|
|
|
if (selectedAssets.isEmpty) {
|
|
|
|
return const SliverToBoxAdapter(
|
|
|
|
child: Padding(
|
|
|
|
padding: EdgeInsets.only(top: 200, left: 18),
|
|
|
|
child: Text(
|
|
|
|
'ADD ASSETS',
|
|
|
|
style: TextStyle(fontSize: 12),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return const SliverToBoxAdapter();
|
|
|
|
}
|
|
|
|
|
|
|
|
_buildSelectPhotosButton() {
|
|
|
|
if (selectedAssets.isEmpty) {
|
|
|
|
return SliverToBoxAdapter(
|
|
|
|
child: Padding(
|
|
|
|
padding: const EdgeInsets.only(top: 16, left: 18, right: 18),
|
|
|
|
child: OutlinedButton.icon(
|
2022-05-30 00:32:30 +02:00
|
|
|
style: OutlinedButton.styleFrom(
|
|
|
|
alignment: Alignment.centerLeft,
|
2022-06-22 07:23:35 +02:00
|
|
|
padding:
|
|
|
|
const EdgeInsets.symmetric(vertical: 22, horizontal: 16),
|
|
|
|
side: const BorderSide(
|
|
|
|
color: Color.fromARGB(255, 206, 206, 206)),
|
|
|
|
shape: RoundedRectangleBorder(
|
|
|
|
borderRadius: BorderRadius.circular(5))),
|
2022-04-24 04:08:45 +02:00
|
|
|
onPressed: _onSelectPhotosButtonPressed,
|
|
|
|
icon: const Icon(Icons.add_rounded),
|
|
|
|
label: Padding(
|
|
|
|
padding: const EdgeInsets.only(left: 8.0),
|
|
|
|
child: Text(
|
|
|
|
'Select Photos',
|
2022-06-22 07:23:35 +02:00
|
|
|
style: TextStyle(
|
|
|
|
fontSize: 16,
|
|
|
|
color: Colors.grey[700],
|
|
|
|
fontWeight: FontWeight.bold),
|
2022-04-24 04:08:45 +02:00
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return const SliverToBoxAdapter();
|
|
|
|
}
|
|
|
|
|
|
|
|
_buildControlButton() {
|
|
|
|
if (selectedAssets.isNotEmpty) {
|
|
|
|
return Padding(
|
|
|
|
padding: const EdgeInsets.only(left: 12.0, top: 16, bottom: 16),
|
|
|
|
child: SizedBox(
|
|
|
|
height: 30,
|
|
|
|
child: ListView(
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
children: [
|
|
|
|
AlbumActionOutlinedButton(
|
|
|
|
iconData: Icons.add_photo_alternate_outlined,
|
|
|
|
onPressed: _onSelectPhotosButtonPressed,
|
|
|
|
labelText: "Add photos",
|
|
|
|
),
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return Container();
|
|
|
|
}
|
|
|
|
|
|
|
|
_buildSelectedImageGrid() {
|
|
|
|
if (selectedAssets.isNotEmpty) {
|
|
|
|
return SliverPadding(
|
|
|
|
padding: const EdgeInsets.only(top: 16),
|
|
|
|
sliver: SliverGrid(
|
|
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
|
|
crossAxisCount: 3,
|
|
|
|
crossAxisSpacing: 5.0,
|
|
|
|
mainAxisSpacing: 5,
|
|
|
|
),
|
|
|
|
delegate: SliverChildBuilderDelegate(
|
|
|
|
(BuildContext context, int index) {
|
|
|
|
return GestureDetector(
|
|
|
|
onTap: _onBackgroundTapped,
|
2022-06-22 07:23:35 +02:00
|
|
|
child: SharedAlbumThumbnailImage(
|
|
|
|
asset: selectedAssets.toList()[index]),
|
2022-04-24 04:08:45 +02:00
|
|
|
);
|
|
|
|
},
|
|
|
|
childCount: selectedAssets.length,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return const SliverToBoxAdapter();
|
|
|
|
}
|
|
|
|
|
|
|
|
return Scaffold(
|
|
|
|
appBar: AppBar(
|
|
|
|
elevation: 0,
|
|
|
|
centerTitle: false,
|
|
|
|
leading: IconButton(
|
|
|
|
onPressed: () {
|
|
|
|
ref.watch(assetSelectionProvider.notifier).removeAll();
|
|
|
|
AutoRouter.of(context).pop();
|
|
|
|
},
|
|
|
|
icon: const Icon(Icons.close_rounded)),
|
|
|
|
title: const Text(
|
|
|
|
'Create album',
|
|
|
|
style: TextStyle(color: Colors.black),
|
|
|
|
),
|
|
|
|
actions: [
|
|
|
|
TextButton(
|
2022-06-22 07:23:35 +02:00
|
|
|
onPressed: albumTitleController.text.isNotEmpty
|
|
|
|
? _showSelectUserPage
|
|
|
|
: null,
|
2022-04-24 04:08:45 +02:00
|
|
|
child: const Text(
|
|
|
|
'Share',
|
|
|
|
style: TextStyle(
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
],
|
|
|
|
),
|
|
|
|
body: GestureDetector(
|
|
|
|
onTap: _onBackgroundTapped,
|
|
|
|
child: CustomScrollView(
|
|
|
|
slivers: [
|
|
|
|
SliverAppBar(
|
|
|
|
elevation: 5,
|
|
|
|
leading: Container(),
|
|
|
|
pinned: true,
|
|
|
|
floating: false,
|
|
|
|
bottom: PreferredSize(
|
2022-06-22 07:23:35 +02:00
|
|
|
preferredSize: const Size.fromHeight(66.0),
|
2022-04-24 04:08:45 +02:00
|
|
|
child: Column(
|
|
|
|
children: [
|
|
|
|
_buildTitleInputField(),
|
|
|
|
_buildControlButton(),
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
_buildTitle(),
|
|
|
|
_buildSelectPhotosButton(),
|
|
|
|
_buildSelectedImageGrid(),
|
|
|
|
],
|
|
|
|
),
|
|
|
|
));
|
|
|
|
}
|
|
|
|
}
|