Up Minor 1.5.0+8

* Update photo_manager pub package
* Added download endpoint for assets
* Successfully save a photo to the local device's gallery
* Save save a video to the local device's gallery
* Fixed #97
* Added download loading indicator
* Refactor and increase the font size for curated search thumbnail images
* Reposition loading animation on the search result page

.github/workflows/build_push_server_latest.yml

@@ -1,10 +1,6 @@
-name: Build Server
+name: Build Server - Latest
 
 on:
-  # Triggers the workflow on push or pull request events but only for the main branch
-  #schedule:
-  # * is a special character in YAML so you have to quote this string
-  #- cron:  '0 0 * * *'
   workflow_dispatch:
   push:
     branches: [main]

.github/workflows/build_push_server_release.yml

@@ -0,0 +1,38 @@
+name: Build Server - Release
+
+on:
+  workflow_dispatch:
+
+jobs:
+  buildandpush:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "main" # branch
+      # https://github.com/docker/setup-qemu-action#usage
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
+      # https://github.com/marketplace/actions/docker-setup-buildx
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v1.6.0
+      # https://github.com/docker/login-action#docker-hub
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      # https://github.com/docker/build-push-action#multi-platform-image
+      - name: Build and push Immich
+        uses: docker/build-push-action@v2.10.0
+        with:
+          context: ./server
+          file: ./server/Dockerfile
+          #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
+          platforms: linux/arm/v7,linux/amd64,linux/arm64
+          pull: true
+          push: true
+          tags: |
+            altran1502/immich-server:${{github.ref_name}}

Makefile

@@ -2,7 +2,13 @@ dev:
 	docker-compose -f ./docker/docker-compose.dev.yml up --remove-orphans
 
 dev-update:
-	docker-compose -f ./docker/docker-compose.dev.yml up --build -V  --remove-orphans
+	docker-compose -f ./docker/docker-compose.dev.yml up --build -V --remove-orphans
 
 dev-scale:
 	docker-compose -f ./docker/docker-compose.dev.yml up --build -V  --scale immich_server=3 --remove-orphans 
+
+prod:
+	docker-compose -f ./docker/docker-compose.yml up --build -V --remove-orphans
+
+prod-scale:
+	docker-compose -f ./docker/docker-compose.yml up --build -V --scale immich_server=3 --scale immich_microservices=3 --remove-orphans

PR_CHECKLIST.md

@@ -1,13 +1,17 @@
 # Deployment checklist for iOS/Android/Server
 
-[] Up version in [mobile/pubspec.yml](/mobile/pubspec.yaml)
+[ ] Up version in [mobile/pubspec.yml](/mobile/pubspec.yaml)
 
-[] Up version in [docker/docker-compose.yml](/docker/docker-compose.yml) for `immich_server` service
+[ ] Up version in [docker/docker-compose.yml](/docker/docker-compose.yml) for `immich_server` service
 
-[] Up version in [docker/docker-compose.gpu.yml](/docker/docker-compose.gpu.yml) for `immich_server` service
+[ ] Up version in [docker/docker-compose.gpu.yml](/docker/docker-compose.gpu.yml) for `immich_server` service
 
-[] Up version in [server/src/constants/server_version.constant.ts](/server/src/constants/server_version.constant.ts)
+[ ] Up version in [docker/docker-compose.dev.yml](/docker/docker-compose.gpu.yml) for `immich_server` service
 
-[] Up version in iOS Fastlane [/mobile/ios/fastlane/Fastfile](/mobile/ios/fastlane/Fastfile)
+[ ] Up version in [server/src/constants/server_version.constant.ts](/server/src/constants/server_version.constant.ts)
+
+[ ] Up version in iOS Fastlane [/mobile/ios/fastlane/Fastfile](/mobile/ios/fastlane/Fastfile)
+
+[ ] Add changelog to [Android Fastlane F-droid folder](/mobile/android/fastlane/metadata/android/en-US/changelogs)
 
 All of the version should be the same.

README.md

@@ -34,7 +34,8 @@ 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 seelct">
+  <img src="design/nsc3.png" width="150" title="Multiple select">
+  <img src="design/nsc4.jpeg" width="150" title="Curated Search Info">
   <img src="design/nsc6.png" width="150" title="EXIF Info">
 
 </p>

docker/.env.example

@@ -1,6 +1,3 @@
-# STAGE
-NODE_ENV=development
-
 # Database
 DB_USERNAME=postgres
 DB_PASSWORD=postgres

docker/docker-compose.dev.yml

@@ -2,11 +2,10 @@ version: "3.8"
 
 services:
   immich_server:
-    image: immich-server-dev:1.3.2
+    image: immich-server-dev:1.5.0
     build:
       context: ../server
-      target: development
+      dockerfile: Dockerfile
-      dockerfile: ../server/Dockerfile
     command: npm run start:dev
     expose:
       - "3000"
@@ -16,6 +15,8 @@ services:
       - /usr/src/app/node_modules
     env_file:
       - .env
+    environment:
+      - NODE_ENV=development
     depends_on:
       - redis
       - database
@@ -23,11 +24,10 @@ services:
       - immich_network
 
   immich_microservices:
-    image: immich-microservices-dev:1.3.2
+    image: immich-microservices-dev:1.5.0
     build:
       context: ../microservices
-      target: development
+      dockerfile: Dockerfile
-      dockerfile: ../microservices/Dockerfile
     command: npm run start:dev
     expose:
       - "3001"
@@ -37,6 +37,8 @@ services:
       - /usr/src/app/node_modules
     env_file:
       - .env
+    environment:
+      - NODE_ENV=development
     depends_on:
       - database
     networks:

docker/docker-compose.gpu.yml

@@ -2,11 +2,10 @@ version: "3.8"
 
 services:
   immich_server:
-    image: immich-server-dev:1.4.0
+    image: immich-server-dev:1.5.0
     build:
       context: ../server
-      target: development
+      dockerfile: Dockerfile
-      dockerfile: ../server/Dockerfile
     command: npm run start:dev
     expose:
       - "3000"
@@ -23,11 +22,10 @@ services:
       - immich_network
 
   immich_microservices:
-    image: immich-microservices-dev:1.4.0
+    image: immich-microservices-dev:1.5.0
     build:
       context: ../microservices
-      target: development
+      dockerfile: Dockerfile
-      dockerfile: ../microservices/Dockerfile
     command: npm run start:dev
     deploy:
       resources:

docker/docker-compose.yml

@@ -2,12 +2,11 @@ version: "3.8"
 
 services:
   immich_server:
-    image: immich-server:1.4.0
+    image: immich-server:1.5.0
     build:
       context: ../server
-      target: production
+      dockerfile: Dockerfile
-      dockerfile: ../server/Dockerfile
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
-    command: npm run start:prod
     expose:
       - "3000"
     volumes:
@@ -16,19 +15,21 @@ services:
       - /usr/src/app/node_modules
     env_file:
       - .env
+    environment:
+      - NODE_ENV=production
     depends_on:
       - redis
       - database
     networks:
       - immich_network
+    restart: unless-stopped
 
   immich_microservices:
-    image: immich-microservices:1.4.0
+    image: immich-microservices:1.5.0
     build:
       context: ../microservices
-      target: production
+      dockerfile: Dockerfile
-      dockerfile: ../microservices/Dockerfile
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
-    command: npm run start:prod
     expose:
       - "3001"
     volumes:
@@ -37,11 +38,13 @@ services:
       - /usr/src/app/node_modules
     env_file:
       - .env
+    environment:
+      - NODE_ENV=production
     depends_on:
       - database
     networks:
       - immich_network
-
+    restart: unless-stopped
 
   redis:
     container_name: immich_redis
@@ -105,4 +108,4 @@ services:
 networks:
   immich_network:
 volumes:
-  pgdata:
+  pgdata:

fastlane/README.md

@@ -0,0 +1,3 @@
+This directory exists because of the F-Droid build process. F-Droid is using the same directory structure as Fastlane for the app metadata.
+
+Because F-Droid expects the metadata to be located in the root of the repository we need to have this symlink.

fastlane/metadata

@@ -0,0 +1 @@
+../mobile/android/fastlane/metadata

microservices/Dockerfile

@@ -1,7 +1,4 @@
-##################################
+FROM node:16-bullseye-slim 
-# DEVELOPMENT
-##################################
-FROM node:16-bullseye-slim AS development
 
 ARG DEBIAN_FRONTEND=noninteractive
 
@@ -17,27 +14,3 @@ RUN npm install
 COPY . .
 
 RUN npm run build
-
-#################################
-# PRODUCTION
-#################################
-FROM node:16-bullseye-slim AS production
-
-ARG DEBIAN_FRONTEND=noninteractive
-ARG NODE_ENV=production
-ENV NODE_ENV=${NODE_ENV}
-
-WORKDIR /usr/src/app
-
-COPY package.json package-lock.json ./
-
-RUN apt-get update
-RUN apt-get install gcc g++ make cmake python3 python3-pip ffmpeg -y
-
-RUN npm install --only=production
-
-COPY . .
-
-COPY --from=development /usr/src/app/dist ./dist
-
-CMD ["node", "dist/main"]

microservices/entrypoint.sh

@@ -0,0 +1,2 @@
+# npm run typeorm migration:run
+npm run build && npm run start:prod

microservices/src/image-classifier/image-classifier.service.ts

@@ -39,6 +39,7 @@ export class ImageClassifierService {
           }
         }
 
+        tf.dispose(decodedImage);
         return tags;
       }
     } catch (e) {

microservices/src/main.ts

@@ -1,10 +1,25 @@
 import { NestFactory } from '@nestjs/core';
 import { AppModule } from './app.module';
+import { Logger } from '@nestjs/common';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
 
-  await app.listen(3001);
+  await app.listen(3001, () => {
+    if (process.env.NODE_ENV == 'development') {
+      Logger.log(
+        'Running Immich Microservices in DEVELOPMENT environment',
+        'IMMICH MICROSERVICES',
+      );
+    }
+
+    if (process.env.NODE_ENV == 'production') {
+      Logger.log(
+        'Running Immich Microservices in PRODUCTION environment',
+        'IMMICH MICROSERVICES',
+      );
+    }
+  });
 }
 
 bootstrap();

microservices/src/object-detection/object-detection.service.ts

@@ -29,6 +29,7 @@ export class ObjectDetectionService {
           }
         }
 
+        tf.dispose(decodedImage);
         return [...tags];
       }
     } catch (e) {

mobile/android/app/build.gradle

@@ -51,7 +51,7 @@ android {
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "app.alextran.immich"
-        minSdkVersion 20
+        minSdkVersion 21
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

mobile/android/app/src/main/AndroidManifest.xml

@@ -20,4 +20,7 @@
   </application>
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+  <uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION" />
 </manifest>

mobile/android/fastlane/metadata/android/en-US/changelogs/6.txt

@@ -0,0 +1 @@
+* Added curated locations and objects on the search page

mobile/android/fastlane/metadata/android/en-US/changelogs/8.txt

@@ -0,0 +1,2 @@
+* User can now download assets to local device
+* Increased the font size for curated image thumbnail information on the seach page

mobile/android/fastlane/metadata/android/en-US/full_description.txt

@@ -0,0 +1,21 @@
+This is a client app for the self-hostable Immich Server (which can be found with the app's source repo). You will need to run/manage the server on your own in order to use the app.
+
+Once set up, this app can be used as photo and video backup solution directly from your mobile phone.
+
+<b>Features:</b>
+
+* Upload and view assets(videos/images).
+* Multi-user supported.
+* Quick navigation with drag scroll bar.
+* Auto Backup.
+* Support HEIC/HEIF Backup.
+* Extract and display EXIF info.
+* Real-time render from multi-device upload event.
+* Image Tagging/Classification based on ImageNet dataset
+* Object detection based on COCO SSD.
+* Search assets based on tags and exif data (lens, make, model, orientation)
+* Upload assets from your local computer/server using <a href='https://www.npmjs.com/package/immich' target='_blank' rel='nofollow'>immich cli tools</a>
+* [Optional] Reserve geocoding using Mapbox (Generous free-tier of 100,000 search/month)
+* Show asset's location information on map (OpenStreetMap).
+* Show curated places on the search page
+* Show curated objects on the search page

mobile/android/fastlane/metadata/android/en-US/short_description.txt

@@ -0,0 +1 @@
+This is a client app for the self-hostable Immich Server

mobile/android/fastlane/metadata/android/en-US/title.txt

@@ -0,0 +1 @@
+Immich

mobile/android/gradle/wrapper/gradle-wrapper.properties

@@ -4,3 +4,4 @@ distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
 distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
+distributionSha256Sum=0080de8491f0918e4f529a6db6820fa0b9e818ee2386117f4394f95feb1d5583

mobile/ios/Podfile.lock

@@ -13,7 +13,7 @@ PODS:
     - Flutter
   - path_provider_ios (0.0.1):
     - Flutter
-  - photo_manager (1.0.0):
+  - photo_manager (2.0.0):
     - Flutter
     - FlutterMacOS
   - SAMKeychain (1.5.3)
@@ -70,7 +70,7 @@ SPEC CHECKSUMS:
   FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
   package_info_plus: 6c92f08e1f853dc01228d6f553146438dafcd14e
   path_provider_ios: 7d7ce634493af4477d156294792024ec3485acd5
-  photo_manager: 84fa94fbeb82e607333ea9a13c43b58e0903a463
+  photo_manager: 4f6810b7dfc4feb03b461ac1a70dacf91fba7604
   SAMKeychain: 483e1c9f32984d50ca961e26818a534283b4cd5c
   sqflite: 6d358c025f5b867b29ed92fc697fd34924e11904
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196

mobile/ios/Runner/Info.plist

@@ -1,66 +1,72 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<dict>
+  <dict>
-	<key>CFBundleDevelopmentRegion</key>
+    <key>CFBundleDevelopmentRegion</key>
-	<string>$(DEVELOPMENT_LANGUAGE)</string>
+    <string>$(DEVELOPMENT_LANGUAGE)</string>
-	<key>CFBundleDisplayName</key>
+    <key>CFBundleDisplayName</key>
-	<string>Immich</string>
+    <string>Immich</string>
-	<key>CFBundleExecutable</key>
+    <key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
+    <string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
+    <key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
+    <key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
+    <string>6.0</string>
-	<key>CFBundleName</key>
+    <key>CFBundleName</key>
-	<string>immich_mobile</string>
+    <string>immich_mobile</string>
-	<key>CFBundlePackageType</key>
+    <key>CFBundlePackageType</key>
-	<string>APPL</string>
+    <string>APPL</string>
-	<key>CFBundleShortVersionString</key>
+    <key>CFBundleShortVersionString</key>
-	<string>$(FLUTTER_BUILD_NAME)</string>
+    <string>$(FLUTTER_BUILD_NAME)</string>
-	<key>CFBundleSignature</key>
+    <key>CFBundleSignature</key>
-	<string>????</string>
+    <string>????</string>
-	<key>CFBundleVersion</key>
+    <key>CFBundleVersion</key>
-	<string>2</string>
+    <string>2</string>
-	<key>LSRequiresIPhoneOS</key>
+    <key>LSRequiresIPhoneOS</key>
-	<true/>
+    <true />
-	<key>MGLMapboxMetricsEnabledSettingShownInApp</key>
+    <key>MGLMapboxMetricsEnabledSettingShownInApp</key>
-	<true/>
+    <true />
-	<key>NSAppTransportSecurity</key>
+    <key>NSAppTransportSecurity</key>
-	<dict>
+    <dict>
-		<key>NSAllowsArbitraryLoads</key>
+      <key>NSAllowsArbitraryLoads</key>
-		<true/>
+      <true />
-	</dict>
+    </dict>
-	<key>NSLocationAlwaysUsageDescription</key>
+    <key>NSLocationAlwaysUsageDescription</key>
-	<string>Enable location setting to show position of assets on map</string>
+    <string>Enable location setting to show position of assets on map</string>
-	<key>NSLocationWhenInUseUsageDescription</key>
+
-	<string>Enable location setting to show position of assets on map</string>
+    <key>NSLocationWhenInUseUsageDescription</key>
-	<key>NSPhotoLibraryUsageDescription</key>
+    <string>Enable location setting to show position of assets on map</string>
-	<string>We need to manage backup your photos album</string>
+
-	<key>UILaunchStoryboardName</key>
+    <key>NSPhotoLibraryUsageDescription</key>
-	<string>LaunchScreen</string>
+    <string>We need to manage backup your photos album</string>
-	<key>UIMainStoryboardFile</key>
+
-	<string>Main</string>
+    <key>NSPhotoLibraryAddUsageDescription</key>
-	<key>UISupportedInterfaceOrientations</key>
+    <string>We need to manage backup your photos album</string>
-	<array>
+
-		<string>UIInterfaceOrientationPortrait</string>
+    <key>UILaunchStoryboardName</key>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
+    <string>LaunchScreen</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
+    <key>UIMainStoryboardFile</key>
-	</array>
+    <string>Main</string>
-	<key>UISupportedInterfaceOrientations~ipad</key>
+    <key>UISupportedInterfaceOrientations</key>
-	<array>
+    <array>
-		<string>UIInterfaceOrientationPortrait</string>
+      <string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+      <string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
+      <string>UIInterfaceOrientationLandscapeRight</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
+    </array>
-	</array>
+    <key>UISupportedInterfaceOrientations~ipad</key>
-	<key>UIUserInterfaceStyle</key>
+    <array>
-	<string>Light</string>
+      <string>UIInterfaceOrientationPortrait</string>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
+      <string>UIInterfaceOrientationPortraitUpsideDown</string>
-	<true/>
+      <string>UIInterfaceOrientationLandscapeLeft</string>
-	<key>io.flutter.embedded_views_preview</key>
+      <string>UIInterfaceOrientationLandscapeRight</string>
-	<true/>
+    </array>
-	<key>ITSAppUsesNonExemptEncryption</key>
+    <key>UIUserInterfaceStyle</key>
-	<false/>
+    <string>Light</string>
-</dict>
+    <key>UIViewControllerBasedStatusBarAppearance</key>
-</plist>
+    <true />
+    <key>io.flutter.embedded_views_preview</key>
+    <true />
+    <key>ITSAppUsesNonExemptEncryption</key>
+    <false />
+  </dict>
+</plist>

mobile/ios/fastlane/Fastfile

@@ -19,7 +19,7 @@ platform :ios do
   desc "iOS Beta"
   lane :beta do
     increment_version_number(
-      version_number: "1.4.0"
+      version_number: "1.5.0"
     )
     increment_build_number({
       build_number: 0

mobile/lib/main.dart

@@ -97,6 +97,7 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
         textTheme: GoogleFonts.workSansTextTheme(
           Theme.of(context).textTheme.apply(fontSizeFactor: 1.0),
         ),
+        snackBarTheme: SnackBarThemeData(contentTextStyle: TextStyle(fontFamily: GoogleFonts.workSans().fontFamily)),
         scaffoldBackgroundColor: const Color(0xFFf6f8fe),
         appBarTheme: const AppBarTheme(
           backgroundColor: Colors.white,

mobile/lib/modules/asset_viewer/models/image_viewer_page_state.model.dart

@@ -1,28 +1,34 @@
 import 'dart:convert';
 
+enum DownloadAssetStatus { idle, loading, success, error }
+
 class ImageViewerPageState {
-  final bool isBottomSheetEnable;
+  // enum
+  final DownloadAssetStatus downloadAssetStatus;
+
   ImageViewerPageState({
-    required this.isBottomSheetEnable,
+    required this.downloadAssetStatus,
   });
 
   ImageViewerPageState copyWith({
-    bool? isBottomSheetEnable,
+    DownloadAssetStatus? downloadAssetStatus,
   }) {
     return ImageViewerPageState(
-      isBottomSheetEnable: isBottomSheetEnable ?? this.isBottomSheetEnable,
+      downloadAssetStatus: downloadAssetStatus ?? this.downloadAssetStatus,
     );
   }
 
   Map<String, dynamic> toMap() {
-    return {
+    final result = <String, dynamic>{};
-      'isBottomSheetEnable': isBottomSheetEnable,
+
-    };
+    result.addAll({'downloadAssetStatus': downloadAssetStatus.index});
+
+    return result;
   }
 
   factory ImageViewerPageState.fromMap(Map<String, dynamic> map) {
     return ImageViewerPageState(
-      isBottomSheetEnable: map['isBottomSheetEnable'] ?? false,
+      downloadAssetStatus: DownloadAssetStatus.values[map['downloadAssetStatus'] ?? 0],
     );
   }
 
@@ -31,15 +37,15 @@ class ImageViewerPageState {
   factory ImageViewerPageState.fromJson(String source) => ImageViewerPageState.fromMap(json.decode(source));
 
   @override
-  String toString() => 'ImageViewerPageState(isBottomSheetEnable: $isBottomSheetEnable)';
+  String toString() => 'ImageViewerPageState(downloadAssetStatus: $downloadAssetStatus)';
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
 
-    return other is ImageViewerPageState && other.isBottomSheetEnable == isBottomSheetEnable;
+    return other is ImageViewerPageState && other.downloadAssetStatus == downloadAssetStatus;
   }
 
   @override
-  int get hashCode => isBottomSheetEnable.hashCode;
+  int get hashCode => downloadAssetStatus.hashCode;
 }

mobile/lib/modules/asset_viewer/models/request_download_asset_info.model.dart

@@ -0,0 +1,6 @@
+class RequestDownloadAssetInfo {
+  final String assetId;
+  final String deviceId;
+
+  RequestDownloadAssetInfo(this.assetId, this.deviceId);
+}

mobile/lib/modules/asset_viewer/providers/image_viewer_page_state.provider.dart

@@ -1,21 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/asset_viewer/models/image_viewer_page_state.model.dart';
-import 'package:immich_mobile/modules/home/models/home_page_state.model.dart';
+import 'package:immich_mobile/modules/asset_viewer/services/image_viewer.service.dart';
 import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:immich_mobile/shared/ui/immich_toast.dart';
 
-class ImageViewerPageStateNotifier extends StateNotifier<ImageViewerPageState> {
+class ImageViewerStateNotifier extends StateNotifier<ImageViewerPageState> {
-  ImageViewerPageStateNotifier() : super(ImageViewerPageState(isBottomSheetEnable: false));
+  final ImageViewerService _imageViewerService = ImageViewerService();
 
-  void toggleBottomSheet() {
+  ImageViewerStateNotifier() : super(ImageViewerPageState(downloadAssetStatus: DownloadAssetStatus.idle));
-    bool isBottomSheetEnable = state.isBottomSheetEnable;
 
-    if (isBottomSheetEnable) {
+  void downloadAsset(ImmichAsset asset, BuildContext context) async {
-      state.copyWith(isBottomSheetEnable: false);
+    state = state.copyWith(downloadAssetStatus: DownloadAssetStatus.loading);
+
+    bool isSuccess = await _imageViewerService.downloadAssetToDevice(asset);
+
+    if (isSuccess) {
+      state = state.copyWith(downloadAssetStatus: DownloadAssetStatus.success);
+
+      ImmichToast.show(
+        context: context,
+        msg: "Download Success",
+        toastType: ToastType.success,
+        gravity: ToastGravity.BOTTOM,
+      );
     } else {
-      state.copyWith(isBottomSheetEnable: true);
+      state = state.copyWith(downloadAssetStatus: DownloadAssetStatus.error);
+      ImmichToast.show(
+        context: context,
+        msg: "Download Error",
+        toastType: ToastType.error,
+        gravity: ToastGravity.BOTTOM,
+      );
     }
+
+    state = state.copyWith(downloadAssetStatus: DownloadAssetStatus.idle);
   }
 }
 
-final homePageStateProvider = StateNotifierProvider<ImageViewerPageStateNotifier, ImageViewerPageState>(
+final imageViewerStateProvider =
-    ((ref) => ImageViewerPageStateNotifier()));
+    StateNotifierProvider<ImageViewerStateNotifier, ImageViewerPageState>(((ref) => ImageViewerStateNotifier()));

mobile/lib/modules/asset_viewer/services/image_viewer.service.dart

@@ -0,0 +1,50 @@
+import 'dart:io';
+
+import 'package:flutter/foundation.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:path/path.dart' as p;
+import 'package:http/http.dart' as http;
+
+import 'package:photo_manager/photo_manager.dart';
+import 'package:path_provider/path_provider.dart';
+
+class ImageViewerService {
+  Future<bool> downloadAssetToDevice(ImmichAsset asset) async {
+    try {
+      String fileName = p.basename(asset.originalPath);
+      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
+      Uri filePath =
+          Uri.parse("$savedEndpoint/asset/download?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false");
+
+      var res = await http.get(
+        filePath,
+        headers: {"Authorization": "Bearer ${Hive.box(userInfoBox).get(accessTokenKey)}"},
+      );
+
+      final AssetEntity? entity;
+
+      if (asset.type == 'IMAGE') {
+        entity = await PhotoManager.editor.saveImage(
+          res.bodyBytes,
+          title: p.basename(asset.originalPath),
+        );
+      } else {
+        final tempDir = await getTemporaryDirectory();
+        File tempFile = await File('${tempDir.path}/$fileName').create();
+        tempFile.writeAsBytesSync(res.bodyBytes);
+        entity = await PhotoManager.editor.saveVideo(tempFile, title: fileName);
+      }
+
+      if (entity != null) {
+        return true;
+      }
+    } catch (e) {
+      debugPrint("Error saving file $e");
+      return false;
+    }
+
+    return false;
+  }
+}

mobile/lib/modules/asset_viewer/ui/download_loading_indicator.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
+
+class DownloadLoadingIndicator extends StatelessWidget {
+  const DownloadLoadingIndicator({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 60,
+      width: 60,
+      decoration: BoxDecoration(
+        color: Theme.of(context).primaryColor,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: const SpinKitDancingSquare(
+        color: Colors.white,
+        size: 30.0,
+      ),
+    );
+  }
+}

mobile/lib/modules/asset_viewer/ui/top_control_app_bar.dart

@@ -1,14 +1,19 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/shared/models/immich_asset.model.dart';
 
-class TopControlAppBar extends StatelessWidget with PreferredSizeWidget {
+class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
-  const TopControlAppBar({Key? key, required this.asset, required this.onMoreInfoPressed}) : super(key: key);
+  const TopControlAppBar(
+      {Key? key, required this.asset, required this.onMoreInfoPressed, required this.onDownloadPressed})
+      : super(key: key);
 
   final ImmichAsset asset;
   final Function onMoreInfoPressed;
+  final Function onDownloadPressed;
+
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     double iconSize = 18.0;
 
     return AppBar(
@@ -29,7 +34,7 @@ class TopControlAppBar extends StatelessWidget with PreferredSizeWidget {
           iconSize: iconSize,
           splashRadius: iconSize,
           onPressed: () {
-            print("download");
+            onDownloadPressed();
           },
           icon: const Icon(Icons.cloud_download_rounded),
         ),

mobile/lib/modules/asset_viewer/views/image_viewer_page.dart

@@ -4,6 +4,9 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/asset_viewer/models/image_viewer_page_state.model.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
@@ -25,6 +28,7 @@ class ImageViewerPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final downloadAssetStatus = ref.watch(imageViewerStateProvider).downloadAssetStatus;
     var box = Hive.box(userInfoBox);
 
     getAssetExif() async {
@@ -42,65 +46,77 @@ class ImageViewerPage extends HookConsumerWidget {
         asset: asset,
         onMoreInfoPressed: () {
           showModalBottomSheet(
-              backgroundColor: Colors.black,
+            backgroundColor: Colors.black,
-              barrierColor: Colors.transparent,
+            barrierColor: Colors.transparent,
-              isScrollControlled: false,
+            isScrollControlled: false,
-              context: context,
+            context: context,
-              builder: (context) {
+            builder: (context) {
-                return ExifBottomSheet(assetDetail: assetDetail!);
+              return ExifBottomSheet(assetDetail: assetDetail!);
-              });
+            },
+          );
+        },
+        onDownloadPressed: () {
+          ref.watch(imageViewerStateProvider.notifier).downloadAsset(asset, context);
         },
       ),
       body: SafeArea(
-        child: Center(
+        child: Stack(
-          child: Hero(
+          children: [
-            tag: heroTag,
+            Center(
-            child: CachedNetworkImage(
+              child: Hero(
-              fit: BoxFit.cover,
+                tag: heroTag,
-              imageUrl: imageUrl,
+                child: CachedNetworkImage(
-              httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+                  fit: BoxFit.cover,
-              fadeInDuration: const Duration(milliseconds: 250),
+                  imageUrl: imageUrl,
-              errorWidget: (context, url, error) => ConstrainedBox(
+                  httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-                constraints: const BoxConstraints(maxWidth: 300),
+                  fadeInDuration: const Duration(milliseconds: 250),
-                child: Wrap(
+                  errorWidget: (context, url, error) => ConstrainedBox(
-                  spacing: 32,
+                    constraints: const BoxConstraints(maxWidth: 300),
-                  runSpacing: 32,
+                    child: Wrap(
-                  alignment: WrapAlignment.center,
+                      spacing: 32,
-                  children: [
+                      runSpacing: 32,
-                    const Text(
+                      alignment: WrapAlignment.center,
-                      "Failed To Render Image - Possibly Corrupted Data",
+                      children: [
-                      textAlign: TextAlign.center,
+                        const Text(
-                      style: TextStyle(fontSize: 16, color: Colors.white),
+                          "Failed To Render Image - Possibly Corrupted Data",
+                          textAlign: TextAlign.center,
+                          style: TextStyle(fontSize: 16, color: Colors.white),
+                        ),
+                        SingleChildScrollView(
+                          child: Text(
+                            error.toString(),
+                            textAlign: TextAlign.center,
+                            style: TextStyle(fontSize: 12, color: Colors.grey[400]),
+                          ),
+                        ),
+                      ],
                     ),
-                    SingleChildScrollView(
+                  ),
-                      child: Text(
+                  placeholder: (context, url) {
-                        error.toString(),
+                    return CachedNetworkImage(
-                        textAlign: TextAlign.center,
+                      cacheKey: thumbnailUrl,
-                        style: TextStyle(fontSize: 12, color: Colors.grey[400]),
+                      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(),
+              ),
+          ],
         ),
       ),
     );

mobile/lib/modules/asset_viewer/views/video_viewer_page.dart

@@ -1,35 +1,74 @@
-import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hive/hive.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:chewie/chewie.dart';
+import 'package:immich_mobile/modules/asset_viewer/models/image_viewer_page_state.model.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
+import 'package:immich_mobile/modules/home/services/asset.service.dart';
+import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:immich_mobile/shared/models/immich_asset_with_exif.model.dart';
 import 'package:video_player/video_player.dart';
 
-class VideoViewerPage extends StatelessWidget {
+// ignore: must_be_immutable
+class VideoViewerPage extends HookConsumerWidget {
   final String videoUrl;
+  final ImmichAsset asset;
+  ImmichAssetWithExif? assetDetail;
+  final AssetService _assetService = AssetService();
 
-  const VideoViewerPage({Key? key, required this.videoUrl}) : super(key: key);
+  VideoViewerPage({Key? key, required this.videoUrl, required this.asset}) : super(key: key);
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final downloadAssetStatus = ref.watch(imageViewerStateProvider).downloadAssetStatus;
+
     String jwtToken = Hive.box(userInfoBox).get(accessTokenKey);
 
+    getAssetExif() async {
+      assetDetail = await _assetService.getAssetById(asset.id);
+    }
+
+    useEffect(() {
+      getAssetExif();
+      return null;
+    }, []);
+
     return Scaffold(
       backgroundColor: Colors.black,
-      appBar: AppBar(
+      appBar: TopControlAppBar(
-        systemOverlayStyle: SystemUiOverlayStyle.light,
+        asset: asset,
-        backgroundColor: Colors.black,
+        onMoreInfoPressed: () {
-        leading: IconButton(
+          showModalBottomSheet(
-            onPressed: () {
+            backgroundColor: Colors.black,
-              AutoRouter.of(context).pop();
+            barrierColor: Colors.transparent,
+            isScrollControlled: false,
+            context: context,
+            builder: (context) {
+              return ExifBottomSheet(assetDetail: assetDetail!);
             },
-            icon: const Icon(Icons.arrow_back_ios)),
+          );
+        },
+        onDownloadPressed: () {
+          ref.watch(imageViewerStateProvider.notifier).downloadAsset(asset, context);
+        },
       ),
       body: SafeArea(
-        child: VideoThumbnailPlayer(
+        child: Stack(
-          url: videoUrl,
+          children: [
-          jwtToken: jwtToken,
+            VideoThumbnailPlayer(
+              url: videoUrl,
+              jwtToken: jwtToken,
+            ),
+            if (downloadAssetStatus == DownloadAssetStatus.loading)
+              const Center(
+                child: DownloadLoadingIndicator(),
+              ),
+          ],
         ),
       ),
     );

mobile/lib/modules/home/ui/thumbnail_image.dart

@@ -65,8 +65,8 @@ class ThumbnailImage extends HookConsumerWidget {
           } else {
             AutoRouter.of(context).push(
               VideoViewerRoute(
-                videoUrl: '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
+                  videoUrl: '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
-              ),
+                  asset: asset),
             );
           }
         }

mobile/lib/modules/login/ui/login_form.dart

@@ -128,9 +128,10 @@ class LoginButton extends ConsumerWidget {
             AutoRouter.of(context).pushNamed("/tab-controller-page");
           } else {
             ImmichToast.show(
-                context: context,
+              context: context,
-                msg: "Error logging you in, check server url, email and password!",
+              msg: "Error logging you in, check server url, email and password!",
-                toastType: ToastType.error);
+              toastType: ToastType.error,
+            );
           }
         },
         child: const Text("Login"));

mobile/lib/modules/search/ui/thumbnail_with_info.dart

@@ -0,0 +1,67 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/utils/capitalize_first_letter.dart';
+
+class ThumbnailWithInfo extends StatelessWidget {
+  const ThumbnailWithInfo({Key? key, required this.textInfo, required this.imageUrl, required this.onTap})
+      : super(key: key);
+
+  final String textInfo;
+  final String imageUrl;
+  final Function onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    var box = Hive.box(userInfoBox);
+
+    return GestureDetector(
+      onTap: () {
+        onTap();
+      },
+      child: Padding(
+        padding: const EdgeInsets.only(right: 8.0),
+        child: SizedBox(
+          width: MediaQuery.of(context).size.width / 2,
+          child: Stack(
+            alignment: Alignment.bottomCenter,
+            children: [
+              Container(
+                foregroundDecoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(10),
+                  color: Colors.black26,
+                ),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(10),
+                  child: CachedNetworkImage(
+                    width: 250,
+                    height: 250,
+                    fit: BoxFit.cover,
+                    imageUrl: imageUrl,
+                    httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+                  ),
+                ),
+              ),
+              Positioned(
+                bottom: 8,
+                left: 10,
+                child: SizedBox(
+                  width: MediaQuery.of(context).size.width / 3,
+                  child: Text(
+                    textInfo.capitalizeFirstLetter(),
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 16,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/lib/modules/search/views/search_page.dart

@@ -1,5 +1,4 @@
 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:hive_flutter/hive_flutter.dart';
@@ -10,6 +9,7 @@ import 'package:immich_mobile/modules/search/models/curated_object.model.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
 import 'package:immich_mobile/modules/search/ui/search_bar.dart';
 import 'package:immich_mobile/modules/search/ui/search_suggestion_list.dart';
+import 'package:immich_mobile/modules/search/ui/thumbnail_with_info.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/utils/capitalize_first_letter.dart';
 
@@ -40,12 +40,12 @@ class SearchPage extends HookConsumerWidget {
 
     _buildPlaces() {
       return curatedLocation.when(
-        loading: () => const CircularProgressIndicator(),
+        loading: () => const SizedBox(width: 60, height: 60, child: CircularProgressIndicator.adaptive()),
         error: (err, stack) => Text('Error: $err'),
         data: (curatedLocations) {
           return curatedLocations.isNotEmpty
               ? SizedBox(
-                  height: MediaQuery.of(context).size.width / 3,
+                  height: MediaQuery.of(context).size.width / 2,
                   child: ListView.builder(
                     padding: const EdgeInsets.only(left: 16),
                     scrollDirection: Axis.horizontal,
@@ -66,7 +66,7 @@ class SearchPage extends HookConsumerWidget {
                   ),
                 )
               : SizedBox(
-                  height: MediaQuery.of(context).size.width / 3,
+                  height: MediaQuery.of(context).size.width / 2,
                   child: ListView.builder(
                     padding: const EdgeInsets.only(left: 16),
                     scrollDirection: Axis.horizontal,
@@ -87,12 +87,12 @@ class SearchPage extends HookConsumerWidget {
 
     _buildThings() {
       return curatedObjects.when(
-        loading: () => const CircularProgressIndicator(),
+        loading: () => const SizedBox(width: 60, height: 60, child: CircularProgressIndicator.adaptive()),
         error: (err, stack) => Text('Error: $err'),
         data: (objects) {
           return objects.isNotEmpty
               ? SizedBox(
-                  height: MediaQuery.of(context).size.width / 3,
+                  height: MediaQuery.of(context).size.width / 2,
                   child: ListView.builder(
                     padding: const EdgeInsets.only(left: 16),
                     scrollDirection: Axis.horizontal,
@@ -114,7 +114,7 @@ class SearchPage extends HookConsumerWidget {
                   ),
                 )
               : SizedBox(
-                  height: MediaQuery.of(context).size.width / 3,
+                  height: MediaQuery.of(context).size.width / 2,
                   child: ListView.builder(
                     padding: const EdgeInsets.only(left: 16),
                     scrollDirection: Axis.horizontal,
@@ -172,66 +172,3 @@ class SearchPage extends HookConsumerWidget {
     );
   }
 }
-
-class ThumbnailWithInfo extends StatelessWidget {
-  const ThumbnailWithInfo({Key? key, required this.textInfo, required this.imageUrl, required this.onTap})
-      : super(key: key);
-
-  final String textInfo;
-  final String imageUrl;
-  final Function onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    var box = Hive.box(userInfoBox);
-
-    return GestureDetector(
-      onTap: () {
-        onTap();
-      },
-      child: Padding(
-        padding: const EdgeInsets.only(right: 8.0),
-        child: SizedBox(
-          width: MediaQuery.of(context).size.width / 3,
-          height: MediaQuery.of(context).size.width / 3,
-          child: Stack(
-            alignment: Alignment.bottomCenter,
-            children: [
-              Container(
-                foregroundDecoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(10),
-                  color: Colors.black26,
-                ),
-                child: ClipRRect(
-                  borderRadius: BorderRadius.circular(10),
-                  child: CachedNetworkImage(
-                    width: 150,
-                    height: 150,
-                    fit: BoxFit.cover,
-                    imageUrl: imageUrl,
-                    httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-                  ),
-                ),
-              ),
-              Positioned(
-                bottom: 8,
-                left: 10,
-                child: SizedBox(
-                  width: MediaQuery.of(context).size.width / 3,
-                  child: Text(
-                    textInfo.capitalizeFirstLetter(),
-                    style: const TextStyle(
-                      color: Colors.white,
-                      fontWeight: FontWeight.bold,
-                      fontSize: 12,
-                    ),
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

mobile/lib/modules/search/views/search_result_page.dart

@@ -1,6 +1,7 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/ui/daily_title_text.dart';
 import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart';
@@ -107,7 +108,10 @@ class SearchResultPage extends HookConsumerWidget {
       }
 
       if (searchResultPageState.isLoading) {
-        return const CircularProgressIndicator.adaptive();
+        return Center(
+            child: SpinKitDancingSquare(
+          color: Theme.of(context).primaryColor,
+        ));
       }
 
       if (searchResultPageState.isSuccess) {

mobile/lib/routing/router.dart

@@ -9,7 +9,7 @@ import 'package:immich_mobile/shared/models/immich_asset.model.dart';
 import 'package:immich_mobile/shared/views/backup_controller_page.dart';
 import 'package:immich_mobile/modules/asset_viewer/views/image_viewer_page.dart';
 import 'package:immich_mobile/shared/views/tab_controller_page.dart';
-import 'package:immich_mobile/shared/views/video_viewer_page.dart';
+import 'package:immich_mobile/modules/asset_viewer/views/video_viewer_page.dart';
 
 part 'router.gr.dart';
 

mobile/lib/routing/router.gr.dart

@@ -44,7 +44,8 @@ class _$AppRouter extends RootStackRouter {
       final args = routeData.argsAs<VideoViewerRouteArgs>();
       return MaterialPageX<dynamic>(
           routeData: routeData,
-          child: VideoViewerPage(key: args.key, videoUrl: args.videoUrl));
+          child: VideoViewerPage(
+              key: args.key, videoUrl: args.videoUrl, asset: args.asset));
     },
     BackupControllerRoute.name: (routeData) {
       return MaterialPageX<dynamic>(
@@ -163,24 +164,29 @@ class ImageViewerRouteArgs {
 /// generated route for
 /// [VideoViewerPage]
 class VideoViewerRoute extends PageRouteInfo<VideoViewerRouteArgs> {
-  VideoViewerRoute({Key? key, required String videoUrl})
+  VideoViewerRoute(
+      {Key? key, required String videoUrl, required ImmichAsset asset})
       : super(VideoViewerRoute.name,
             path: '/video-viewer-page',
-            args: VideoViewerRouteArgs(key: key, videoUrl: videoUrl));
+            args: VideoViewerRouteArgs(
+                key: key, videoUrl: videoUrl, asset: asset));
 
   static const String name = 'VideoViewerRoute';
 }
 
 class VideoViewerRouteArgs {
-  const VideoViewerRouteArgs({this.key, required this.videoUrl});
+  const VideoViewerRouteArgs(
+      {this.key, required this.videoUrl, required this.asset});
 
   final Key? key;
 
   final String videoUrl;
 
+  final ImmichAsset asset;
+
   @override
   String toString() {
-    return 'VideoViewerRouteArgs{key: $key, videoUrl: $videoUrl}';
+    return 'VideoViewerRouteArgs{key: $key, videoUrl: $videoUrl, asset: $asset}';
   }
 }
 

mobile/lib/shared/models/immich_asset.model.dart

@@ -10,6 +10,8 @@ class ImmichAsset {
   final String modifiedAt;
   final bool isFavorite;
   final String? duration;
+  final String originalPath;
+  final String resizePath;
 
   ImmichAsset({
     required this.id,
@@ -21,6 +23,8 @@ class ImmichAsset {
     required this.modifiedAt,
     required this.isFavorite,
     this.duration,
+    required this.originalPath,
+    required this.resizePath,
   });
 
   ImmichAsset copyWith({
@@ -33,6 +37,8 @@ class ImmichAsset {
     String? modifiedAt,
     bool? isFavorite,
     String? duration,
+    String? originalPath,
+    String? resizePath,
   }) {
     return ImmichAsset(
       id: id ?? this.id,
@@ -44,6 +50,8 @@ class ImmichAsset {
       modifiedAt: modifiedAt ?? this.modifiedAt,
       isFavorite: isFavorite ?? this.isFavorite,
       duration: duration ?? this.duration,
+      originalPath: originalPath ?? this.originalPath,
+      resizePath: resizePath ?? this.resizePath,
     );
   }
 
@@ -58,6 +66,8 @@ class ImmichAsset {
       'modifiedAt': modifiedAt,
       'isFavorite': isFavorite,
       'duration': duration,
+      'originalPath': originalPath,
+      'resizePath': resizePath,
     };
   }
 
@@ -72,6 +82,8 @@ class ImmichAsset {
       modifiedAt: map['modifiedAt'] ?? '',
       isFavorite: map['isFavorite'] ?? false,
       duration: map['duration'],
+      originalPath: map['originalPath'] ?? '',
+      resizePath: map['resizePath'] ?? '',
     );
   }
 
@@ -81,7 +93,7 @@ class ImmichAsset {
 
   @override
   String toString() {
-    return 'ImmichAsset(id: $id, deviceAssetId: $deviceAssetId, userId: $userId, deviceId: $deviceId, type: $type, createdAt: $createdAt, modifiedAt: $modifiedAt, isFavorite: $isFavorite, duration: $duration)';
+    return 'ImmichAsset(id: $id, deviceAssetId: $deviceAssetId, userId: $userId, deviceId: $deviceId, type: $type, createdAt: $createdAt, modifiedAt: $modifiedAt, isFavorite: $isFavorite, duration: $duration, originalPath: $originalPath, resizePath: $resizePath)';
   }
 
   @override
@@ -97,7 +109,9 @@ class ImmichAsset {
         other.createdAt == createdAt &&
         other.modifiedAt == modifiedAt &&
         other.isFavorite == isFavorite &&
-        other.duration == duration;
+        other.duration == duration &&
+        other.originalPath == originalPath &&
+        other.resizePath == resizePath;
   }
 
   @override
@@ -110,6 +124,8 @@ class ImmichAsset {
         createdAt.hashCode ^
         modifiedAt.hashCode ^
         isFavorite.hashCode ^
-        duration.hashCode;
+        duration.hashCode ^
+        originalPath.hashCode ^
+        resizePath.hashCode;
   }
 }

mobile/lib/shared/services/backup.service.dart

@@ -73,7 +73,7 @@ class BackupService {
           });
 
           // Build thumbnail multipart data
-          var thumbnailData = await entity.thumbDataWithSize(1280, 720);
+          var thumbnailData = await entity.thumbnailDataWithSize(const ThumbnailSize(720, 1280));
           if (thumbnailData != null) {
             thumbnailUploadData = MultipartFile.fromBytes(
               List.from(thumbnailData),

mobile/lib/shared/services/network.service.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:convert';
 
 import 'package:dio/dio.dart';
@@ -25,16 +26,36 @@ class NetworkService {
     }
   }
 
-  Future<dynamic> getRequest({required String url}) async {
+  Future<dynamic> getRequest({required String url, bool isByteResponse = false, bool isStreamReponse = false}) async {
     try {
       var dio = Dio();
       dio.interceptors.add(AuthenticatedRequestInterceptor());
 
       var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
-      Response res = await dio.get('$savedEndpoint/$url');
 
-      if (res.statusCode == 200) {
+      if (isByteResponse) {
-        return res;
+        Response<List<int>> res = await dio.get<List<int>>(
+          '$savedEndpoint/$url',
+          options: Options(responseType: ResponseType.bytes),
+        );
+
+        if (res.statusCode == 200) {
+          return res;
+        }
+      } else if (isStreamReponse) {
+        Response<ResponseBody> res = await dio.get<ResponseBody>(
+          '$savedEndpoint/$url',
+          options: Options(responseType: ResponseType.stream),
+        );
+
+        if (res.statusCode == 200) {
+          return res;
+        }
+      } else {
+        Response res = await dio.get('$savedEndpoint/$url');
+        if (res.statusCode == 200) {
+          return res;
+        }
       }
     } on DioError catch (e) {
       debugPrint("DioError: ${e.response}");

mobile/lib/shared/ui/immich_toast.dart

@@ -8,12 +8,24 @@ class ImmichToast {
     required BuildContext context,
     required String msg,
     ToastType toastType = ToastType.info,
+    ToastGravity gravity = ToastGravity.TOP,
   }) {
     FToast fToast;
 
     fToast = FToast();
     fToast.init(context);
 
+    _getColor(ToastType type, BuildContext context) {
+      switch (type) {
+        case ToastType.info:
+          return Theme.of(context).primaryColor;
+        case ToastType.success:
+          return const Color.fromARGB(255, 78, 140, 124);
+        case ToastType.error:
+          return const Color.fromARGB(255, 220, 48, 85);
+      }
+    }
+
     fToast.showToast(
       child: Container(
         padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
@@ -36,8 +48,8 @@ class ImmichToast {
                 : Container(),
             (toastType == ToastType.success)
                 ? const Icon(
-                    Icons.check,
+                    Icons.check_circle_rounded,
-                    color: Color.fromARGB(255, 104, 248, 140),
+                    color: Color.fromARGB(255, 78, 140, 124),
                   )
                 : Container(),
             (toastType == ToastType.error)
@@ -53,7 +65,7 @@ class ImmichToast {
               child: Text(
                 msg,
                 style: TextStyle(
-                  color: Theme.of(context).primaryColor,
+                  color: _getColor(toastType, context),
                   fontWeight: FontWeight.bold,
                   fontSize: 15,
                 ),
@@ -62,7 +74,7 @@ class ImmichToast {
           ],
         ),
       ),
-      gravity: ToastGravity.TOP,
+      gravity: gravity,
       toastDuration: const Duration(seconds: 2),
     );
   }

mobile/pubspec.lock

@@ -328,6 +328,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.0-dev.0"
+  flutter_spinkit:
+    dependency: "direct main"
+    description:
+      name: flutter_spinkit
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.1.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -680,7 +687,7 @@ packages:
       name: photo_manager
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.10"
+    version: "2.0.6"
   photo_view:
     dependency: "direct main"
     description:

mobile/pubspec.yaml

@@ -1,8 +1,8 @@
 name: immich_mobile
-description: A new Flutter project.
+description: Immich - selfhosted backup media file on mobile phone
 
 publish_to: "none"
-version: 1.4.0+0
+version: 1.5.0+8
 
 environment:
   sdk: ">=2.15.1 <3.0.0"
@@ -11,7 +11,7 @@ dependencies:
   flutter:
     sdk: flutter
   cupertino_icons: ^1.0.2
-  photo_manager: ^1.3.10
+  photo_manager: ^2.0.6
   flutter_hooks: ^0.18.0
   hooks_riverpod: ^2.0.0-dev.0
   hive:
@@ -33,10 +33,10 @@ dependencies:
   badges: ^2.0.2
   photo_view: ^0.13.0
   socket_io_client: ^2.0.0-beta.4-nullsafety.0
-  # mapbox_gl: ^0.15.0
   flutter_map: ^0.14.0
   flutter_udid: ^2.0.0
   package_info_plus: ^1.4.0
+  flutter_spinkit: ^5.1.0
 
 dev_dependencies:
   flutter_test:

server/Dockerfile

@@ -1,7 +1,4 @@
-##################################
+FROM node:16-alpine3.14
-# DEVELOPMENT
-##################################
-FROM node:16-alpine3.14 AS development
 
 ARG DEBIAN_FRONTEND=noninteractive
 
@@ -15,27 +12,4 @@ RUN npm install
 
 COPY . .
 
-RUN npm run build
+RUN npm run build
-
-#################################
-# PRODUCTION
-#################################
-FROM node:16-alpine3.14 AS production
-
-ARG DEBIAN_FRONTEND=noninteractive
-ARG NODE_ENV=production
-ENV NODE_ENV=${NODE_ENV}
-
-WORKDIR /usr/src/app
-
-COPY package.json package-lock.json ./
-
-RUN apk add --update-cache build-base python3
-
-RUN npm install --only=production
-
-COPY . .
-
-COPY --from=development /usr/src/app/dist ./dist
-
-CMD ["node", "dist/main"]

server/entrypoint.sh

@@ -1,2 +1,2 @@
 # npm run typeorm migration:run
-npm run start:dev
+npm run build && npm run start:prod

server/src/api-v1/asset/asset.controller.ts

@@ -76,6 +76,15 @@ export class AssetController {
     return 'ok';
   }
 
+  @Get('/download')
+  async downloadFile(
+    @GetAuthUser() authUser: AuthUserDto,
+    @Response({ passthrough: true }) res: Res,
+    @Query(ValidationPipe) query: ServeFileDto,
+  ) {
+    return this.assetService.downloadFile(authUser, query, res);
+  }
+
   @Get('/file')
   async serveFile(
     @Headers() headers,

server/src/api-v1/asset/asset.service.ts

@@ -13,6 +13,7 @@ import { Response as Res } from 'express';
 import { promisify } from 'util';
 import { DeleteAssetDto } from './dto/delete-asset.dto';
 import { SearchAssetDto } from './dto/search-asset.dto';
+import path from 'path';
 
 const fileInfo = promisify(stat);
 
@@ -146,10 +147,26 @@ export class AssetService {
     });
   }
 
+  public async downloadFile(authUser: AuthUserDto, query: ServeFileDto, res: Res) {
+    let file = null;
+    const asset = await this.findOne(authUser, query.did, query.aid);
+
+    if (query.isThumb === 'false' || !query.isThumb) {
+      file = createReadStream(asset.originalPath);
+    } else {
+      file = createReadStream(asset.resizePath);
+    }
+
+    return new StreamableFile(file);
+  }
+
   public async serveFile(authUser: AuthUserDto, query: ServeFileDto, res: Res, headers: any) {
     let file = null;
     const asset = await this.findOne(authUser, query.did, query.aid);
 
+    if (!asset) {
+      throw new BadRequestException('Asset does not exist');
+    }
     // Handle Sending Images
     if (asset.type == AssetType.IMAGE || query.isThumb == 'true') {
       res.set({

server/src/app.module.ts

@@ -46,6 +46,8 @@ import { CommunicationModule } from './api-v1/communication/communication.module
 })
 export class AppModule implements NestModule {
   configure(consumer: MiddlewareConsumer): void {
-    // consumer.apply(AppLoggerMiddleware).forRoutes('*');
+    if (process.env.NODE_ENV == 'development') {
+      consumer.apply(AppLoggerMiddleware).forRoutes('*');
+    }
   }
 }

server/src/constants/server_version.constant.ts

@@ -3,7 +3,7 @@
 
 export const serverVersion = {
   major: 1,
-  minor: 4,
+  minor: 5,
   patch: 0,
-  build: 0,
+  build: 8,
 };

server/src/main.ts

@@ -1,3 +1,4 @@
+import { Logger } from '@nestjs/common';
 import { NestFactory } from '@nestjs/core';
 import { NestExpressApplication } from '@nestjs/platform-express';
 import { AppModule } from './app.module';
@@ -10,6 +11,14 @@ async function bootstrap() {
 
   app.useWebSocketAdapter(new RedisIoAdapter(app));
 
-  await app.listen(3000);
+  await app.listen(3000, () => {
+    if (process.env.NODE_ENV == 'development') {
+      Logger.log('Running Immich Server in DEVELOPMENT environment', 'IMMICH SERVER');
+    }
+
+    if (process.env.NODE_ENV == 'production') {
+      Logger.log('Running Immich Server in PRODUCTION environment', 'IMMICH SERVER');
+    }
+  });
 }
 bootstrap();