118 - Implement shared album feature (immich-app#124)

* New features - Share album. Users can now create albums to share with existing people on the network. - Owner can delete the album. - Owner can invite the additional users to the album. - Shared users and the owner can add additional assets to the album. * In the asset viewer, the user can swipe up to see detailed information and swip down to dismiss. * Several UI enhancements.
Rodrigolmti · Apr 24, 2022 · 4309104 · 4309104
1 parent a3b84b3
commit 4309104
Show file tree

Hide file tree

Showing 87 changed files with 3,717 additions and 199 deletions.
diff --git a/README.md b/README.md
@@ -34,8 +34,9 @@ Loading ~4000 images/videos
 <p align="left">
   <img src="design/nsc1.png" width="150" title="Login With Custom URL">
   <img src="design/nsc2.png" width="150" title="Backup Setting Info">
-  <img src="design/nsc3.png" width="150" title="Multiple select">
-  <img src="design/nsc4.jpeg" width="150" title="Curated Search Info">
+  <img src="design/home-screen.jpeg" width="150" title="Home Screen">
+  <img src="design/search-screen.jpeg" width="150" title="Curated Search Info">
+  <img src="design/shared-albums.png" width="150" title="Shared Albums">
   <img src="design/nsc6.png" width="150" title="EXIF Info">
 
 </p>
@@ -63,6 +64,7 @@ This project is under heavy development, there will be continous functions, feat
 - Show asset's location information on map (OpenStreetMap).
 - Show curated places on the search page
 - Show curated objects on the search page
+- Shared album with users on the same server
 
 # Development
 
@@ -111,6 +113,14 @@ curl --location --request POST 'http://your-server-ip:2283/auth/signUp' \
 
 ## Run mobile app
 
+## F-Droid
+You can get the app on F-droid by cliking the image below.
+
+[<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
+    alt="Get it on F-Droid"
+    height="80">](https://f-droid.org/packages/app.alextran.immich)
+
+
 ## Android
 
 #### Download latest `apk` in release tab and run on your phone. You can follow this guide on how to do that

diff --git a/design/home-screen.jpeg b/design/home-screen.jpeg
diff --git a/design/search-screen.jpeg b/design/search-screen.jpeg
diff --git a/design/shared-albums.png b/design/shared-albums.png
diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
@@ -2,7 +2,7 @@ version: "3.8"
 
 services:
   immich_server:
-    image: immich-server-dev:1.6.0
+    image: immich-server-dev:1.7.0
     build:
       context: ../server
       dockerfile: Dockerfile
@@ -24,7 +24,7 @@ services:
       - immich_network
 
   immich_microservices:
-    image: immich-microservices-dev:1.6.0
+    image: immich-microservices-dev:1.7.0
     build:
       context: ../microservices
       dockerfile: Dockerfile

diff --git a/docker/docker-compose.gpu.yml b/docker/docker-compose.gpu.yml
@@ -2,7 +2,7 @@ version: "3.8"
 
 services:
   immich_server:
-    image: immich-server-dev:1.6.0
+    image: immich-server-dev:1.7.0
     build:
       context: ../server
       dockerfile: Dockerfile
@@ -22,7 +22,7 @@ services:
       - immich_network
 
   immich_microservices:
-    image: immich-microservices-dev:1.6.0
+    image: immich-microservices-dev:1.7.0
     build:
       context: ../microservices
       dockerfile: Dockerfile

diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
@@ -2,7 +2,7 @@ version: "3.8"
 
 services:
   immich_server:
-    image: immich-server:1.6.0
+    image: immich-server:1.7.0
     build:
       context: ../server
       dockerfile: Dockerfile
@@ -23,7 +23,7 @@ services:
     restart: unless-stopped
 
   immich_microservices:
-    image: immich-microservices:1.6.0
+    image: immich-microservices:1.7.0
     build:
       context: ../microservices
       dockerfile: Dockerfile

diff --git a/docker/settings/nginx-conf/nginx.conf b/docker/settings/nginx-conf/nginx.conf
@@ -10,11 +10,22 @@ map $http_upgrade $connection_upgrade {
 
 server {
 
+  gzip on;
+  gzip_min_length 1000;
+  gunzip on;
+
   client_max_body_size 50000M;
 
   listen 80;
   access_log off;
+
   location / {
+
+    # Compression
+    gzip_static         on;
+    gzip_min_length     1000;
+    gzip_comp_level     2;
+
     proxy_buffering off;
     proxy_buffer_size 16k;
     proxy_busy_buffers_size 24k;

diff --git a/mobile/android/app/build.gradle b/mobile/android/app/build.gradle
@@ -81,4 +81,5 @@ flutter {
 
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation 'com.android.support:multidex:1.0.3'
 }
diff --git a/mobile/android/fastlane/metadata/android/en-US/changelogs/11.txt b/mobile/android/fastlane/metadata/android/en-US/changelogs/11.txt
@@ -0,0 +1,7 @@
+* New features 
+  - Share album. Users can now create albums to share with existing people on the network.
+  - Owner can delete the album.
+  - Owner can invite the additional users to the album.
+  - Shared users and the owner can add additional assets to the album.
+* In the asset viewer, the user can swipe up to see detailed information and swip down to dismiss.
+* Several UI enhancements.
diff --git a/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/2_en-US.png b/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/2_en-US.png
diff --git a/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/4_en-US.png b/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/4_en-US.png
diff --git a/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/5_en-US.png b/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/5_en-US.png
diff --git a/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/6_en-US.png b/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/6_en-US.png
diff --git a/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/7_en-US.png b/mobile/android/fastlane/metadata/android/en-US/images/phoneScreenshots/7_en-US.png
diff --git a/mobile/ios/fastlane/Fastfile b/mobile/ios/fastlane/Fastfile
@@ -19,7 +19,7 @@ platform :ios do
   desc "iOS Beta"
   lane :beta do
     increment_version_number(
-      version_number: "1.6.0"
+      version_number: "1.7.0"
     )
     increment_build_number(
       build_number: latest_testflight_build_number + 1,

diff --git a/mobile/lib/constants/immich_colors.dart b/mobile/lib/constants/immich_colors.dart
@@ -0,0 +1,3 @@
+import 'package:flutter/material.dart';
+
+const immichBackgroundColor = Color(0xFFf6f8fe);
diff --git a/mobile/lib/main.dart b/mobile/lib/main.dart
@@ -2,20 +2,20 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/constants/immich_colors.dart';
+import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/routing/tab_navigation_observer.dart';
 import 'package:immich_mobile/shared/providers/app_state.provider.dart';
 import 'package:immich_mobile/shared/providers/backup.provider.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/providers/websocket.provider.dart';
+import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
 import 'constants/hive_box.dart';
 
 void main() async {
   await Hive.initFlutter();
   await Hive.openBox(userInfoBox);
-  // Hive.registerAdapter(ImmichBackUpAssetAdapter());
-  // Hive.deleteBoxFromDisk(hiveImmichBox);
 
   SystemChrome.setSystemUIOverlayStyle(
     const SystemUiOverlayStyle(
@@ -87,28 +87,33 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp.router(
-      title: 'Immich',
+    return MaterialApp(
       debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-        brightness: Brightness.light,
-        primarySwatch: Colors.indigo,
-        // textTheme: GoogleFonts.workSansTextTheme(
-        //   Theme.of(context).textTheme.apply(fontSizeFactor: 1.0),
-        // ),
-        fontFamily: 'WorkSans',
-        snackBarTheme: const SnackBarThemeData(contentTextStyle: TextStyle(fontFamily: 'WorkSans')),
-        scaffoldBackgroundColor: const Color(0xFFf6f8fe),
-        appBarTheme: const AppBarTheme(
-          backgroundColor: Colors.white,
-          foregroundColor: Colors.indigo,
-          elevation: 1,
-          centerTitle: true,
-          systemOverlayStyle: SystemUiOverlayStyle.dark,
-        ),
+      home: Stack(
+        children: [
+          MaterialApp.router(
+            title: 'Immich',
+            debugShowCheckedModeBanner: false,
+            theme: ThemeData(
+              brightness: Brightness.light,
+              primarySwatch: Colors.indigo,
+              fontFamily: 'WorkSans',
+              snackBarTheme: const SnackBarThemeData(contentTextStyle: TextStyle(fontFamily: 'WorkSans')),
+              scaffoldBackgroundColor: immichBackgroundColor,
+              appBarTheme: const AppBarTheme(
+                backgroundColor: immichBackgroundColor,
+                foregroundColor: Colors.indigo,
+                elevation: 1,
+                centerTitle: true,
+                systemOverlayStyle: SystemUiOverlayStyle.dark,
+              ),
+            ),
+            routeInformationParser: _immichRouter.defaultRouteParser(),
+            routerDelegate: _immichRouter.delegate(navigatorObservers: () => [TabNavigationObserver(ref: ref)]),
+          ),
+          const ImmichLoadingOverlay(),
+        ],
       ),
-      routeInformationParser: _immichRouter.defaultRouteParser(),
-      routerDelegate: _immichRouter.delegate(navigatorObservers: () => [TabNavigationObserver(ref: ref)]),
     );
   }
 }
diff --git a/mobile/lib/modules/asset_viewer/views/image_viewer_page.dart b/mobile/lib/modules/asset_viewer/views/image_viewer_page.dart
@@ -1,6 +1,8 @@
+import 'package:auto_route/auto_route.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_swipe_detector/flutter_swipe_detector.dart';
 import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
@@ -35,6 +37,18 @@ class ImageViewerPage extends HookConsumerWidget {
       assetDetail = await _assetService.getAssetById(asset.id);
     }
 
+    showInfo() {
+      showModalBottomSheet(
+        backgroundColor: Colors.black,
+        barrierColor: Colors.transparent,
+        isScrollControlled: false,
+        context: context,
+        builder: (context) {
+          return ExifBottomSheet(assetDetail: assetDetail!);
+        },
+      );
+    }
+
     useEffect(() {
       getAssetExif();
       return null;
@@ -44,79 +58,77 @@ class ImageViewerPage extends HookConsumerWidget {
       backgroundColor: Colors.black,
       appBar: TopControlAppBar(
         asset: asset,
-        onMoreInfoPressed: () {
-          showModalBottomSheet(
-            backgroundColor: Colors.black,
-            barrierColor: Colors.transparent,
-            isScrollControlled: false,
-            context: context,
-            builder: (context) {
-              return ExifBottomSheet(assetDetail: assetDetail!);
-            },
-          );
-        },
+        onMoreInfoPressed: showInfo,
         onDownloadPressed: () {
           ref.watch(imageViewerStateProvider.notifier).downloadAsset(asset, context);
         },
       ),
-      body: SafeArea(
-        child: Stack(
-          children: [
-            Center(
-              child: Hero(
-                tag: heroTag,
-                child: CachedNetworkImage(
-                  fit: BoxFit.cover,
-                  imageUrl: imageUrl,
-                  httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-                  fadeInDuration: const Duration(milliseconds: 250),
-                  errorWidget: (context, url, error) => ConstrainedBox(
-                    constraints: const BoxConstraints(maxWidth: 300),
-                    child: Wrap(
-                      spacing: 32,
-                      runSpacing: 32,
-                      alignment: WrapAlignment.center,
-                      children: [
-                        const Text(
-                          "Failed To Render Image - Possibly Corrupted Data",
-                          textAlign: TextAlign.center,
-                          style: TextStyle(fontSize: 16, color: Colors.white),
-                        ),
-                        SingleChildScrollView(
-                          child: Text(
-                            error.toString(),
+      body: SwipeDetector(
+        onSwipeDown: (_) {
+          AutoRouter.of(context).pop();
+        },
+        onSwipeUp: (_) {
+          showInfo();
+        },
+        child: SafeArea(
+          child: Stack(
+            children: [
+              Center(
+                child: Hero(
+                  tag: heroTag,
+                  child: CachedNetworkImage(
+                    fit: BoxFit.cover,
+                    imageUrl: imageUrl,
+                    httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+                    fadeInDuration: const Duration(milliseconds: 250),
+                    errorWidget: (context, url, error) => ConstrainedBox(
+                      constraints: const BoxConstraints(maxWidth: 300),
+                      child: Wrap(
+                        spacing: 32,
+                        runSpacing: 32,
+                        alignment: WrapAlignment.center,
+                        children: [
+                          const Text(
+                            "Failed To Render Image - Possibly Corrupted Data",
                             textAlign: TextAlign.center,
-                            style: TextStyle(fontSize: 12, color: Colors.grey[400]),
+                            style: TextStyle(fontSize: 16, color: Colors.white),
                           ),
-                        ),
-                      ],
+                          SingleChildScrollView(
+                            child: Text(
+                              error.toString(),
+                              textAlign: TextAlign.center,
+                              style: TextStyle(fontSize: 12, color: Colors.grey[400]),
+                            ),
+                          ),
+                        ],
+                      ),
                     ),
+                    placeholder: (context, url) {
+                      return CachedNetworkImage(
+                        cacheKey: thumbnailUrl,
+                        fit: BoxFit.cover,
+                        imageUrl: thumbnailUrl,
+                        httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+                        placeholderFadeInDuration: const Duration(milliseconds: 0),
+                        progressIndicatorBuilder: (context, url, downloadProgress) => Transform.scale(
+                          scale: 0.2,
+                          child: CircularProgressIndicator(value: downloadProgress.progress),
+                        ),
+                        errorWidget: (context, url, error) => Icon(
+                          Icons.error,
+                          color: Colors.grey[300],
+                        ),
+                      );
+                    },
                   ),
-                  placeholder: (context, url) {
-                    return CachedNetworkImage(
-                      cacheKey: thumbnailUrl,
-                      fit: BoxFit.cover,
-                      imageUrl: thumbnailUrl,
-                      httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-                      placeholderFadeInDuration: const Duration(milliseconds: 0),
-                      progressIndicatorBuilder: (context, url, downloadProgress) => Transform.scale(
-                        scale: 0.2,
-                        child: CircularProgressIndicator(value: downloadProgress.progress),
-                      ),
-                      errorWidget: (context, url, error) => Icon(
-                        Icons.error,
-                        color: Colors.grey[300],
-                      ),
-                    );
-                  },
                 ),
               ),
-            ),
-            if (downloadAssetStatus == DownloadAssetStatus.loading)
-              const Center(
-                child: DownloadLoadingIndicator(),
-              ),
-          ],
+              if (downloadAssetStatus == DownloadAssetStatus.loading)
+                const Center(
+                  child: DownloadLoadingIndicator(),
+                ),
+            ],
+          ),
         ),
       ),
     );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import 'package:flutter/material.dart';

		const immichBackgroundColor = Color(0xFFf6f8fe);