Added changelog for F-droid

* Update mobile dependencies

* Added image picker

* Added mechanism to upload profile image

* Added image type to send to web

* Added styling for circle avatar

* Fixxed issue with sharp cannot resize image properly

* Finished displaying and uploading user profile

* Added user profile to web

.github/FUNDING.yml

@@ -1,3 +1,4 @@
 # These are supported funding model platforms
 
 github: alextran1502
+custom: https://www.buymeacoffee.com/altran1502?new=1

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,15 +1,26 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: "[BUG]"
-labels: bug
+title: '[BUG] <title>'
+labels: bug, need triage
 assignees: ''
 
 ---
 
+<!--
+Note: Please search to see if an issue already exists for the bug you encountered.
+-->
+
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 
+**Task List**
+[ ] I have read thoroughly the README setup and installation instructions.
+[ ] If my setup is different, I have included my docker-compose file.
+[ ] I have included my redacted `.env` file.
+[ ] I have included information on my machine, and environment.
+
 **To Reproduce**
 Steps to reproduce the behavior:
 1. Go to '...'

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -0,0 +1,32 @@
+name: Feature Request
+description: Request a feature that you would like for the app
+title: "[Feature]: "
+labels: ["feature", "need triage"]
+assignees:
+  - ""
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this feature request!
+
+  - type: textarea
+    id: feature-detail
+    attributes:
+      label: Feature detail
+      placeholder: Describe the feature you would like to see for the app
+    validations:
+      required: true
+
+  - type: dropdown
+    id: platform
+    attributes:
+      label: Platform
+      description: Choose the platform for the feature
+      options:
+        - Web
+        - Mobile App
+        - Server
+    validations:
+      required: true

.github/workflows/build_push_docker_latest.yml

@@ -0,0 +1,96 @@
+name: Build and Push Docker Image - Latest
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build_and_push_server_latest:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          # ref: "main" # branch
+          fetch-depth: 0
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2.0.0
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and push Immich
+        uses: docker/build-push-action@v3.0.0
+        with:
+          context: ./server
+          file: ./server/Dockerfile
+          platforms: linux/arm/v7,linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: |
+            altran1502/immich-server:latest
+
+  build_and_push_microservice_latest:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          # ref: "main" # branch
+          fetch-depth: 0
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2.0.0
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and Push Microservices
+        uses: docker/build-push-action@v3.0.0
+        with:
+          context: ./microservices
+          file: ./microservices/Dockerfile
+          platforms: linux/arm/v7,linux/amd64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: |
+            altran1502/immich-microservices:latest
+
+  build_and_push_web_latest:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          # ref: "main" # branch
+          fetch-depth: 0
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2.0.0
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and Push Web
+        uses: docker/build-push-action@v3.0.0
+        with:
+          context: ./web
+          file: ./web/Dockerfile
+          platforms: linux/arm/v7,linux/amd64,linux/arm64
+          target: prod
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: |
+            altran1502/immich-web:latest

.github/workflows/build_push_server_latest.yml

@@ -1,42 +0,0 @@
-name: Build Server - Latest
-
-on:
-  workflow_dispatch:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-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:latest

.github/workflows/build_push_server_release.yml

@@ -1,4 +1,4 @@
-name: Build Server - Release
+name: Build and push Docker image - Release
 
 on:
   workflow_dispatch:
@@ -6,35 +6,117 @@ on:
     types: [published]
 
 jobs:
-  buildandpush:
+  build_and_push_server_release:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
         with:
-          ref: "main" # branch
-      # https://github.com/docker/setup-qemu-action#usage
+          ref: "main"
+          fetch-depth: 0
+
+      - name: "Get Previous tag"
+        id: previoustag
+        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        with:
+          fallback: latest
+
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1.2.0
-      # https://github.com/marketplace/actions/docker-setup-buildx
+        uses: docker/setup-qemu-action@v2.0.0
+
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v1.6.0
-      # https://github.com/docker/login-action#docker-hub
+        uses: docker/setup-buildx-action@v2.0.0
+
       - name: Login to Docker Hub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         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
+
+      - name: Build and push immich-server release
+        uses: docker/build-push-action@v3.0.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
+          push: ${{ github.event_name != 'pull_request' }}
           tags: |
-            altran1502/immich-server:${{github.ref_name}}
+            altran1502/immich-server:${{ steps.previoustag.outputs.tag }}
+
+  build_and_push_microservice_release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "main"
+          fetch-depth: 0
+
+      - name: "Get Previous tag"
+        id: previoustag
+        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        with:
+          fallback: latest
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2.0.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push immich-microservices release
+        uses: docker/build-push-action@v3.0.0
+        with:
+          context: ./microservices
+          file: ./microservices/Dockerfile
+          platforms: linux/arm/v7,linux/amd64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: |
+            altran1502/immich-microservices:${{ steps.previoustag.outputs.tag }}
+
+  build_and_push_web_release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "main"
+          fetch-depth: 0
+
+      - name: "Get Previous tag"
+        id: previoustag
+        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        with:
+          fallback: latest
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2.0.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push immich-web release
+        uses: docker/build-push-action@v3.0.0
+        with:
+          context: ./web
+          file: ./web/Dockerfile
+          platforms: linux/arm/v7,linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          target: prod
+          tags: |
+            altran1502/immich-web:${{ steps.previoustag.outputs.tag }}

Makefile

@@ -5,7 +5,16 @@ dev-update:
 	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 
+	docker-compose -f ./docker/docker-compose.dev.yml up --build -V  --scale immich_server=3 --remove-orphans
+
+stage:
+	docker-compose -f ./docker/docker-compose.staging.yml up --build -V --remove-orphans
+
+test-e2e:
+	docker-compose -f ./docker/docker-compose.test.yml --env-file ./docker/.env.test up --abort-on-container-exit --exit-code-from immich_server_test
 
 prod:
-	docker-compose -f ./docker/docker-compose.yml up --build -V --remove-orphans
+	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

NOTES.md

@@ -0,0 +1,9 @@
+# TODO
+
+Server scenario with web
+
+[ ] 1 user exist without admin right -> make admin on first check
+
+[ ] 2 users exist without admin right -> ask user to choose which account will be the admin
+
+[ X ] No users exist -> prompt signup form for Admin

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.dev.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

@@ -31,50 +31,73 @@ Loading ~4000 images/videos
 
 ## Screenshots
 
+### Mobile client
 <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/login-screen.png" width="150" title="Login With Custom URL">
+  <img src="design/backup-screen.png" width="150" title="Backup Setting Info">
+  <img src="design/selective-backup-screen.png" width="150" title="Backup Setting 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>
 
+### Web client
+<p align="center">
+  <img src="design/dashboard_photos.jpeg" width="100%" title="Home Dashboard">
 </p>
 
 # Note
 
 **!! NOT READY FOR PRODUCTION! DO NOT USE TO STORE YOUR ASSETS !!**
 
-This project is under heavy development, there will be continous functions, features and api changes.
+This project is under heavy development, there will be continuous functions, features and api changes.
 
 # Features
 
-- Upload and view assets(videos/images).
+- Upload and view assets (videos/images).
+- Auto Backup.
+- Download asset to local device.
 - 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 [immich cli tools](https://www.npmjs.com/package/immich)
-- [Optional] Reserve geocoding using Mapbox (Generous free-tier of 100,000 search/month)
+- [Optional] Reverse 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
+- Shared album with users on the same server
+- Selective backup - albums can be included and excluded during the backup process.
+- Web interface is available for administrative tasks (creating new users) and viewing assets on the server - additional features are coming.
 
-# Development
+# System Requirement
 
-You can use docker compose for development, there are several services that compose Immich
+**OS**: Preferred unix-based operating system (Ubuntu, Debian, MacOS...etc). 
 
-1. NestJs
-2. PostgreSQL
-3. Redis
-4. Nginx
-5. TensorFlow
+I haven't tested with `Docker for Windows` as well as `WSL` on Windows
 
-## Populate .env file
+*Raspberry Pi can be used but `microservices` container has to be comment out in `docker-compose` since TensorFlow has not been supported in Docker image on arm64v7 yet.*
+
+**RAM**: At least 2GB, preffered 4GB.
+
+**Core**: At least 2 cores, preffered 4 cores.
+
+# Getting Started
+
+You can use docker compose for development and testing out the application, there are several services that compose Immich:
+
+1. **NestJs** - Backend of the application
+2. **SvelteKit** - Web frontend of the application
+3. **PostgreSQL** - Main database of the application
+4. **Redis** - For sharing websocket instance between docker instances and background tasks message queue.
+5. **Nginx** - Load balancing and optimized file uploading.
+6. **TensorFlow** - Object Detection and Image Classification.
+
+## Step 1: Populate .env file
 
 Navigate to `docker` directory and run
 
@@ -88,61 +111,151 @@ Notice that if set `ENABLE_MAPBOX` to `true`, you will have to provide `MAPBOX_K
 
 Pay attention to the key `UPLOAD_LOCATION`, this directory must exist and is owned by the user that run the `docker-compose` command below.
 
-To start, run
+**Example**
 
 ```bash
-docker-compose -f ./docker/docker-compose.yml up --build -V
+###################################################################################
+# Database
+###################################################################################
+DB_USERNAME=postgres
+DB_PASSWORD=postgres
+DB_DATABASE_NAME=immich
+
+###################################################################################
+# Upload File Config
+###################################################################################
+UPLOAD_LOCATION=<put-the-path-of-the-upload-folder-here>
+
+###################################################################################
+# JWT SECRET
+###################################################################################
+JWT_SECRET=randomstringthatissolongandpowerfulthatnoonecanguess
+
+###################################################################################
+# MAPBOX
+####################################################################################
+# ENABLE_MAPBOX is either true of false -> if true, you have to provide MAPBOX_KEY
+ENABLE_MAPBOX=false
+MAPBOX_KEY=
+
+###################################################################################
+# WEB
+###################################################################################
+# This is the URL of your vm/server where you host Immich, so that the web frontend
+# know where can it make the request to.
+# For example: If your server IP address is 10.1.11.50, the environment variable will
+# be VITE_SERVER_ENDPOINT=http://10.1.11.50:2283
+VITE_SERVER_ENDPOINT=http://192.168.1.216:2283
+```
+
+## Step 2: Start the server
+
+To **start**, run
+
+```bash
+docker-compose -f ./docker/docker-compose.yml up 
+```
+
+If you have a few thousand photos/videos, I suggest running docker-compose with *scaling* option for the `immich_server` container to handle high I/O load when using fast scrolling.
+
+```bash
+docker-compose -f ./docker/docker-compose.yml up --scale immich-server=5 
+```
+
+To *update* docker-compose with newest image (if you have started the docker-compose previously)
+
+```bash
+docker-compose -f ./docker/docker-compose.yml pull && docker-compose -f ./docker/docker-compose.yml up
 ```
 
 The server will be running at `http://your-ip:2283` through `Nginx`
 
-## Register User
+## Step 3: Register User
 
-Use the command below on your terminal to create user as we don't have user interface for this function yet.
-
-```bash
-curl --location --request POST 'http://your-server-ip:2283/auth/signUp' \
---header 'Content-Type: application/json' \
---data-raw '{
-    "email": "testuser@email.com",
-    "password": "password"
-}'
-```
-
-## Run mobile app
-
-### Android
-
-Download `apk` in release tab and run on your phone. You can follow this guide on how to do that
-
-- [Run APK on Android](https://www.lifewire.com/install-apk-on-android-4177185)
-
-### iOS
-
-You can download the app from Apple AppStore [here](https://apps.apple.com/us/app/immich/id1613945652):
+Access the web interface at `http://your-ip:2285` to register an admin account.
 
 <p align="left">
-  <img src="design/ios-qr-code.png" width="250" title="Apple App Store">
+  <img src="design/admin-registration-form.png" width="300" title="Admin Registration">
 <p/>
 
+Additional accounts on the server can be created by the admin account.
+
+<p align="left">
+  <img src="design/admin-interface.png" width="500" title="Admin User Management">
+<p/>
+
+## Step 4: Run mobile app
+
+The app is distributed on several platforms below.
+
+## F-Droid
+You can get the app on F-droid by clicking 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
+
+#### Get the app on Google Play Store [here](https://play.google.com/store/apps/details?id=app.alextran.immich) 
+
+*The App version might be lagging behind the latest release due to the review process.*
+
+<p align="left">
+  <img src="design/google-play-qr-code.png" width="200" title="Google Play Store">
+<p/>
+
+## iOS
+
+#### Get the app on Apple AppStore [here](https://apps.apple.com/us/app/immich/id1613945652):
+
+*The App version might be lagging behind the latest release due to the review process.*
+
+
+<p align="left">
+  <img src="design/ios-qr-code.png" width="200" title="Apple App Store">
+<p/>
+
+
+# Development
+
+The development environment can be started from the root of the project after populating the `.env` file with the command:
+
+```bash
+make dev # required Makefile installed on the system.
+``` 
+
+All servers and web container are hot reload for quick feedback loop.
+
 # Support
 
-If you like the app, find it helpful, and want to support me to offset the cost of publishing to AppStores, you can sponsor the project with [**Github Sponsore**](https://github.com/sponsors/alextran1502).
+If you like the app, find it helpful, and want to support me to offset the cost of publishing to AppStores, you can sponsor the project with [**Github Sponsor**](https://github.com/sponsors/alextran1502), or a one time donation with the Buy Me a coffee link below.
 
-This is also a meaningful way to give me motivation and encounragment to continue working on the app.
+[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/altran1502)
 
-Cheer! 🎉
+This is also a meaningful way to give me motivation and encouragement to continue working on the app.
+
+Cheers! 🎉
 
 # Known Issue
 
-TensorFlow doesn't run with older CPU architecture, it requires CPU with AVX and AVX2 instruction set. If you encounter the error `illegal instruction core dump` when running the docker-compose command above, check for your CPU flags with the command and make sure you see `AVX` and `AVX2`. Otherwise, switch to a different VM/desktop with different architecture.
+## TensorFlow Build Issue
 
+*This is a known issue on RaspberryPi 4 arm64-v7 and incorrect Promox setup*
+
+TensorFlow doesn't run with older CPU architecture, it requires a CPU with AVX and AVX2 instruction set. If you encounter the error `illegal instruction core dump` when running the docker-compose command above, check for your CPU flags with the command and make sure you see `AVX` and `AVX2`:
+ 
 ```bash
 more /proc/cpuinfo | grep flags
-```
-
-If you are running virtualization in Promox, the VM doesn't have the flag enable.
-
+``` 
+  
+If you are running virtualization in Promox, the VM doesn't have the flag enabled.
+  
 You need to change the CPU type from `kvm64` to `host` under VMs hardware tab.
-
+  
 `Hardware > Processors > Edit > Advanced > Type (dropdown menu) > host`
+ 
+Otherwise you can:
+- edit `docker-compose.yml` file and comment the whole `immich_microservices` service **which will disable machine learning features like object detection and image classification**
+- switch to a different VM/desktop with different architecture.

docker/.env.example

@@ -1,15 +1,63 @@
+###################################################################################
 # Database
+###################################################################################
+
+DB_HOSTNAME=immich_postgres
 DB_USERNAME=postgres
 DB_PASSWORD=postgres
-DB_DATABASE_NAME=
+DB_DATABASE_NAME=immich
 
+
+
+
+
+###################################################################################
+# Redis
+###################################################################################
+
+REDIS_HOSTNAME=immich_redis
+
+
+
+
+
+###################################################################################
 # Upload File Config
+###################################################################################
+
 UPLOAD_LOCATION=absolute_location_on_your_machine_where_you_want_to_store_the_backup
 
-# JWT SECRET
-JWT_SECRET=
 
+
+
+###################################################################################
+# JWT SECRET
+###################################################################################
+
+JWT_SECRET=randomstringthatissolongandpowerfulthatnoonecanguess
+
+
+
+
+###################################################################################
 # MAPBOX
-## ENABLE_MAPBOX is either true of false -> if true, you have to provide MAPBOX_KEY
-ENABLE_MAPBOX= 
-MAPBOX_KEY=
+####################################################################################
+
+# ENABLE_MAPBOX is either true of false -> if true, you have to provide MAPBOX_KEY
+ENABLE_MAPBOX=false
+MAPBOX_KEY=
+
+
+
+
+###################################################################################
+# WEB
+###################################################################################
+
+# This is the URL of your vm/server where you host Immich, so that the web frontend
+# know where can it make the request to.
+# For example: If your server IP address is 10.1.11.50, the environment variable will
+# be VITE_SERVER_ENDPOINT=http://10.1.11.50:2283
+# !CAUTION! THERE IS NO FORWARD SLASH AT THE END
+
+VITE_SERVER_ENDPOINT=

docker/.env.test

@@ -0,0 +1,16 @@
+DB_HOSTNAME=immich_postgres_test
+# Database
+DB_USERNAME=postgres
+DB_PASSWORD=postgres
+DB_DATABASE_NAME=e2e_test
+
+# Upload File Config
+UPLOAD_LOCATION=./upload
+
+# JWT SECRET
+JWT_SECRET=randomstringthatissolongandpowerfulthatnoonecanguess
+
+# MAPBOX
+## ENABLE_MAPBOX is either true of false -> if true, you have to provide MAPBOX_KEY
+ENABLE_MAPBOX=false
+MAPBOX_KEY=

docker/docker-compose.dev.yml

@@ -1,11 +1,11 @@
 version: "3.8"
 
 services:
-  immich_server:
-    image: immich-server-dev:1.3.2
+  immich-server:
+    image: immich-server-dev:1.9.0
     build:
       context: ../server
-      dockerfile: ../server/Dockerfile
+      dockerfile: Dockerfile
     command: npm run start:dev
     expose:
       - "3000"
@@ -21,13 +21,13 @@ services:
       - redis
       - database
     networks:
-      - immich_network
+      - immich-network
 
-  immich_microservices:
-    image: immich-microservices-dev:1.3.2
+  immich-microservices:
+    image: immich-microservices-dev:1.9.0
     build:
       context: ../microservices
-      dockerfile: ../microservices/Dockerfile
+      dockerfile: Dockerfile
     command: npm run start:dev
     expose:
       - "3001"
@@ -42,14 +42,32 @@ services:
     depends_on:
       - database
     networks:
-      - immich_network
+      - immich-network
 
+  immich-web:
+    image: immich-web-dev:1.9.0
+    build:
+      context: ../web
+      dockerfile: Dockerfile
+      target: dev
+    command: npm run dev --host
+    env_file:
+      - .env
+    ports:
+      - 3002:3002
+      - 24678:24678
+    volumes:
+      - ../web:/usr/src/app
+      - /usr/src/app/node_modules
+    networks:
+      - immich-network
+    restart: always
 
   redis:
     container_name: immich_redis
     image: redis:6.2
     networks:
-      - immich_network
+      - immich-network
 
   database:
     container_name: immich_postgres
@@ -66,7 +84,7 @@ services:
     ports:
       - 5432:5432
     networks:
-      - immich_network
+      - immich-network
 
   nginx:
     container_name: proxy_nginx
@@ -79,11 +97,11 @@ services:
     logging:
       driver: none
     networks:
-      - immich_network
+      - immich-network
     depends_on:
-      - immich_server
+      - immich-server
 
 networks:
-  immich_network:
+  immich-network:
 volumes:
   pgdata:

docker/docker-compose.gpu.yml

@@ -1,11 +1,11 @@
 version: "3.8"
 
 services:
-  immich_server:
-    image: immich-server-dev:1.4.0
+  immich-server:
+    image: immich-server-dev:1.9.0
     build:
       context: ../server
-      dockerfile: ../server/Dockerfile
+      dockerfile: Dockerfile
     command: npm run start:dev
     expose:
       - "3000"
@@ -19,13 +19,13 @@ services:
       - redis
       - database
     networks:
-      - immich_network
+      - immich-network
 
-  immich_microservices:
-    image: immich-microservices-dev:1.4.0
+  immich-microservices:
+    image: immich-microservices-dev:1.9.0
     build:
       context: ../microservices
-      dockerfile: ../microservices/Dockerfile
+      dockerfile: Dockerfile
     command: npm run start:dev
     deploy:
       resources:
@@ -46,13 +46,13 @@ services:
       - database
       - immich_server
     networks:
-      - immich_network
+      - immich-network
 
   redis:
     container_name: immich_redis
     image: redis:6.2
     networks:
-      - immich_network
+      - immich-network
 
   database:
     container_name: immich_postgres
@@ -69,7 +69,7 @@ services:
     ports:
       - 5432:5432
     networks:
-      - immich_network
+      - immich-network
 
   nginx:
     container_name: proxy_nginx
@@ -82,11 +82,11 @@ services:
     logging:
       driver: none
     networks:
-      - immich_network
+      - immich-network
     depends_on:
-      - immich_server
+      - immich-server
 
 networks:
-  immich_network:
+  immich-network:
 volumes:
   pgdata:

docker/docker-compose.staging.yml

@@ -0,0 +1,105 @@
+version: "3.8"
+
+services:
+  immich-server:
+    image: immich-server-staging:latest
+    build:
+      context: ../server
+      dockerfile: Dockerfile
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
+    expose:
+      - "3000"
+    volumes:
+      - ${UPLOAD_LOCATION}:/usr/src/app/upload
+    env_file:
+      - .env
+    environment:
+      - NODE_ENV=production
+    depends_on:
+      - redis
+      - database
+    networks:
+      - immich-network
+    restart: always
+
+  immich-microservices:
+    image: immich-microservices-staging:latest
+    build:
+      context: ../microservices
+      dockerfile: Dockerfile
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
+    expose:
+      - "3001"
+    volumes:
+      - ${UPLOAD_LOCATION}:/usr/src/app/upload
+    env_file:
+      - .env
+    environment:
+      - NODE_ENV=production
+    depends_on:
+      - database
+    networks:
+      - immich-network
+    restart: always
+
+  immich-web:
+    image: immich-web-staging:latest
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
+    build:
+      context: ../web
+      dockerfile: Dockerfile
+      target: prod
+    env_file:
+      - .env
+    ports:
+      - 2285:3000
+    networks:
+      - immich-network
+    restart: always
+
+
+  redis:
+    container_name: immich_redis
+    image: redis:6.2
+    networks:
+      - immich-network
+    restart: always
+    
+
+  database:
+    container_name: immich_postgres
+    image: postgres:14
+    env_file:
+      - .env
+    environment:
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+      POSTGRES_USER: ${DB_USERNAME}
+      POSTGRES_DB: ${DB_DATABASE_NAME}
+      PG_DATA: /var/lib/postgresql/data
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    ports:
+      - 5432:5432
+    networks:
+      - immich-network
+
+  nginx:
+    container_name: proxy_nginx
+    image: nginx:latest
+    volumes:
+      - ./settings/nginx-conf:/etc/nginx/conf.d
+    ports:
+      - 2283:80
+      - 2284:443
+    logging:
+      driver: none
+    networks:
+      - immich-network
+    depends_on:
+      - immich-server
+    restart: always
+
+networks:
+  immich-network:
+volumes:
+  pgdata:

docker/docker-compose.test.yml

@@ -0,0 +1,52 @@
+version: "3.8"
+
+services:
+  immich_server_test:
+    image: immich-server-dev:1.9.0
+    build:
+      context: ../server
+      dockerfile: Dockerfile
+    command: npm run test:e2e
+    expose:
+      - "3000"
+    volumes:
+      - ../server:/usr/src/app
+      - /usr/src/app/node_modules
+    env_file:
+      - .env.test
+    environment:
+      - NODE_ENV=development
+    depends_on:
+      - redis
+      - database
+    networks:
+      - immich_network_test
+
+
+  redis:
+    container_name: immich_redis_test
+    image: redis:6.2
+    networks:
+      - immich_network_test
+
+  database:
+    container_name: immich_postgres_test
+    image: postgres:14
+    env_file:
+      - .env.test
+    environment:
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+      POSTGRES_USER: ${DB_USERNAME}
+      POSTGRES_DB: ${DB_DATABASE_NAME}
+      PG_DATA: /var/lib/postgresql/data
+    volumes:
+      - pgdata-test:/var/lib/postgresql/data
+    ports:
+      - 5432:5432
+    networks:
+      - immich_network_test
+
+networks:
+  immich_network_test:
+volumes:
+  pgdata-test:

docker/docker-compose.yml

@@ -1,13 +1,9 @@
 version: "3.8"
 
 services:
-  immich_server:
-    image: immich-server:1.4.0
-    build:
-      context: ../server
-      dockerfile: ../server/Dockerfile
+  immich-server:
+    image: altran1502/immich-server:latest
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
-    restart: unless-stopped
     expose:
       - "3000"
     volumes:
@@ -20,15 +16,12 @@ services:
       - redis
       - database
     networks:
-      - immich_network
+      - immich-network
+    restart: always
 
-  immich_microservices:
-    image: immich-microservices:1.4.0
-    build:
-      context: ../microservices
-      dockerfile: ../microservices/Dockerfile
+  immich-microservices:
+    image: altran1502/immich-microservices:latest
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
-    restart: unless-stopped
     expose:
       - "3001"
     volumes:
@@ -40,14 +33,28 @@ services:
     depends_on:
       - database
     networks:
-      - immich_network
+      - immich-network
+    restart: always
+
+  immich-web:
+    image: altran1502/immich-web:latest
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
+    env_file:
+      - .env
+    ports:
+      - 2285:3000
+    networks:
+      - immich-network
+    restart: always
 
 
   redis:
     container_name: immich_redis
     image: redis:6.2
     networks:
-      - immich_network
+      - immich-network
+    restart: always
+    
 
   database:
     container_name: immich_postgres
@@ -64,8 +71,9 @@ services:
     ports:
       - 5432:5432
     networks:
-      - immich_network
-
+      - immich-network
+    restart: always
+    
   nginx:
     container_name: proxy_nginx
     image: nginx:latest
@@ -77,11 +85,12 @@ services:
     logging:
       driver: none
     networks:
-      - immich_network
+      - immich-network
     depends_on:
-      - immich_server
+      - immich-server
+    restart: always
 
 networks:
-  immich_network:
+  immich-network:
 volumes:
-  pgdata:
+  pgdata:

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;
@@ -30,6 +41,6 @@ server {
     proxy_set_header Connection "upgrade";
     proxy_set_header Host $host;
 
-    proxy_pass http://immich_server:3000;
+    proxy_pass http://immich-server:3000;
   }
 }

microservices/src/config/database.config.ts

@@ -2,7 +2,7 @@ import { TypeOrmModuleOptions } from '@nestjs/typeorm';
 
 export const databaseConfig: TypeOrmModuleOptions = {
   type: 'postgres',
-  host: 'immich_postgres',
+  host: process.env.DB_HOSTNAME || 'immich_postgres',
   port: 5432,
   username: process.env.DB_USERNAME,
   password: process.env.DB_PASSWORD,

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

@@ -5,7 +5,7 @@ import { ImageClassifierService } from './image-classifier.service';
 export class ImageClassifierController {
   constructor(
     private readonly imageClassifierService: ImageClassifierService,
-  ) {}
+  ) { }
 
   @Post('/tagImage')
   async tagImage(@Body('thumbnailPath') thumbnailPath: string) {

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

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

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

@@ -1,11 +1,12 @@
 import { Body, Controller, Post } from '@nestjs/common';
 import { ObjectDetectionService } from './object-detection.service';
+import { Logger } from '@nestjs/common';
 
 @Controller('object-detection')
 export class ObjectDetectionController {
   constructor(
     private readonly objectDetectionService: ObjectDetectionService,
-  ) {}
+  ) { }
 
   @Post('/detectObject')
   async detectObject(@Body('thumbnailPath') thumbnailPath: string) {

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
@@ -81,4 +81,5 @@ flutter {
 
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation 'com.android.support:multidex:1.0.3'
 }

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

@@ -1,5 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="app.alextran.immich">
-  <application android:label="Immich" android:name="${applicationName}" android:usesCleartextTraffic="true" android:icon="@mipmap/ic_launcher">
+  <application android:label="Immich" android:name="${applicationName}" android:usesCleartextTraffic="true" android:icon="@mipmap/ic_launcher" android:requestLegacyExternalStorage="true">
     <activity android:name=".MainActivity" android:exported="true" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">
       <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user
@@ -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/app/src/main/java/io/flutter/app/FlutterMultiDexApplication.java

@@ -1,16 +1,21 @@
 // Generated file.
+//
 // If you wish to remove Flutter's multidex support, delete this entire file.
+//
+// Modifications to this file should be done in a copy under a different name
+// as this file may be regenerated.
 
 package io.flutter.app;
 
+import android.app.Application;
 import android.content.Context;
 import androidx.annotation.CallSuper;
 import androidx.multidex.MultiDex;
 
 /**
- * Extension of {@link io.flutter.app.FlutterApplication}, adding multidex support.
+ * Extension of {@link android.app.Application}, adding multidex support.
  */
-public class FlutterMultiDexApplication extends FlutterApplication {
+public class FlutterMultiDexApplication extends Application {
   @Override
   @CallSuper
   protected void attachBaseContext(Context base) {

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

@@ -0,0 +1,2 @@
+* Accepting webp file format
+* Fixed backup stop when an asset is of wrong file type. The app will now skip that asset and try its best to perform the backup operation on the rest of the assets.

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.

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

@@ -0,0 +1 @@
+* Album name is now editable

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

@@ -0,0 +1,2 @@
+* New Feature - Selection backup. User can now select a combination of albums to be included or excluded during the backup process, and only unique photos, and videos that are not overlapping between the two groups will be backup.
+* Bug fix - Show correct count of backup and remainder assets.

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

@@ -0,0 +1 @@
+* Hotfix: Permission is being requested now when open backup screen on Android10

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

@@ -0,0 +1 @@
+* User can now upload profile picture from the home page control drawer.

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/changelogs/9.txt

@@ -0,0 +1 @@
+* Added inline font, remove google-font dependency in pubspec.

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

@@ -1 +1 @@
-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.
+This is a client app for the self-hostable Immich Server

mobile/ios/Podfile.lock

@@ -9,11 +9,13 @@ PODS:
   - FMDB (2.7.5):
     - FMDB/standard (= 2.7.5)
   - FMDB/standard (2.7.5)
+  - image_picker_ios (0.0.1):
+    - Flutter
   - package_info_plus (0.4.5):
     - Flutter
   - path_provider_ios (0.0.1):
     - Flutter
-  - photo_manager (1.0.0):
+  - photo_manager (2.0.0):
     - Flutter
     - FlutterMacOS
   - SAMKeychain (1.5.3)
@@ -30,6 +32,7 @@ DEPENDENCIES:
   - Flutter (from `Flutter`)
   - flutter_udid (from `.symlinks/plugins/flutter_udid/ios`)
   - fluttertoast (from `.symlinks/plugins/fluttertoast/ios`)
+  - image_picker_ios (from `.symlinks/plugins/image_picker_ios/ios`)
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_ios (from `.symlinks/plugins/path_provider_ios/ios`)
   - photo_manager (from `.symlinks/plugins/photo_manager/ios`)
@@ -50,6 +53,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/flutter_udid/ios"
   fluttertoast:
     :path: ".symlinks/plugins/fluttertoast/ios"
+  image_picker_ios:
+    :path: ".symlinks/plugins/image_picker_ios/ios"
   package_info_plus:
     :path: ".symlinks/plugins/package_info_plus/ios"
   path_provider_ios:
@@ -66,11 +71,12 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Flutter: 50d75fe2f02b26cc09d224853bb45737f8b3214a
   flutter_udid: 0848809dbed4c055175747ae6a45a8b4f6771e1c
-  fluttertoast: 6122fa75143e992b1d3470f61000f591a798cc58
+  fluttertoast: 16fbe6039d06a763f3533670197d01fc73459037
   FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
+  image_picker_ios: b786a5dcf033a8336a657191401bfdf12017dabb
   package_info_plus: 6c92f08e1f853dc01228d6f553146438dafcd14e
-  path_provider_ios: 7d7ce634493af4477d156294792024ec3485acd5
-  photo_manager: 84fa94fbeb82e607333ea9a13c43b58e0903a463
+  path_provider_ios: 14f3d2fd28c4fdb42f44e0f751d12861c43cee02
+  photo_manager: 4f6810b7dfc4feb03b461ac1a70dacf91fba7604
   SAMKeychain: 483e1c9f32984d50ca961e26818a534283b4cd5c
   sqflite: 6d358c025f5b867b29ed92fc697fd34924e11904
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196

mobile/ios/Runner.xcodeproj/project.pbxproj

@@ -360,7 +360,7 @@
 				CODE_SIGN_ENTITLEMENTS = Runner/RunnerProfile.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2;
+				CURRENT_PROJECT_VERSION = 14;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -495,7 +495,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2;
+				CURRENT_PROJECT_VERSION = 14;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -522,7 +522,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2;
+				CURRENT_PROJECT_VERSION = 14;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;

mobile/ios/Runner/Info.plist

@@ -1,66 +1,80 @@
 <?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>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>$(DEVELOPMENT_LANGUAGE)</string>
-	<key>CFBundleDisplayName</key>
-	<string>Immich</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>immich_mobile</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>$(FLUTTER_BUILD_NAME)</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>2</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>MGLMapboxMetricsEnabledSettingShownInApp</key>
-	<true/>
-	<key>NSAppTransportSecurity</key>
-	<dict>
-		<key>NSAllowsArbitraryLoads</key>
-		<true/>
-	</dict>
-	<key>NSLocationAlwaysUsageDescription</key>
-	<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>NSPhotoLibraryUsageDescription</key>
-	<string>We need to manage backup your photos album</string>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIMainStoryboardFile</key>
-	<string>Main</string>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UISupportedInterfaceOrientations~ipad</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationPortraitUpsideDown</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIUserInterfaceStyle</key>
-	<string>Light</string>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<true/>
-	<key>io.flutter.embedded_views_preview</key>
-	<true/>
-	<key>ITSAppUsesNonExemptEncryption</key>
-	<false/>
-</dict>
-</plist>
+  <dict>
+    <key>CFBundleDevelopmentRegion</key>
+    <string>$(DEVELOPMENT_LANGUAGE)</string>
+    <key>CFBundleDisplayName</key>
+    <string>Immich</string>
+    <key>CFBundleExecutable</key>
+    <string>$(EXECUTABLE_NAME)</string>
+    <key>CFBundleIdentifier</key>
+    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+    <key>CFBundleInfoDictionaryVersion</key>
+    <string>6.0</string>
+    <key>CFBundleName</key>
+    <string>immich_mobile</string>
+    <key>CFBundlePackageType</key>
+    <string>APPL</string>
+    <key>CFBundleShortVersionString</key>
+    <string>1.10.0</string>
+    <key>CFBundleSignature</key>
+    <string>????</string>
+    <key>CFBundleVersion</key>
+    <string>14</string>
+    <key>LSRequiresIPhoneOS</key>
+    <true />
+    <key>MGLMapboxMetricsEnabledSettingShownInApp</key>
+    <true />
+    <key>NSAppTransportSecurity</key>
+    <dict>
+      <key>NSAllowsArbitraryLoads</key>
+      <true />
+    </dict>
+    <key>NSLocationAlwaysUsageDescription</key>
+    <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>NSPhotoLibraryUsageDescription</key>
+    <string>We need to manage backup your photos album</string>
+
+    <key>NSPhotoLibraryAddUsageDescription</key>
+    <string>We need to manage backup your photos album</string>
+
+    <key>NSCameraUsageDescription</key>
+    <string>We need to access the camera to let you take beautiful video using this app</string>
+
+    <key>NSMicrophoneUsageDescription</key>
+    <string>We need to access the microphone to let you take beautiful video using this app</string>
+
+    <key>UILaunchStoryboardName</key>
+    <string>LaunchScreen</string>
+    <key>UIMainStoryboardFile</key>
+    <string>Main</string>
+    <key>UISupportedInterfaceOrientations</key>
+    <array>
+      <string>UIInterfaceOrientationPortrait</string>
+      <string>UIInterfaceOrientationLandscapeLeft</string>
+      <string>UIInterfaceOrientationLandscapeRight</string>
+    </array>
+    <key>UISupportedInterfaceOrientations~ipad</key>
+    <array>
+      <string>UIInterfaceOrientationPortrait</string>
+      <string>UIInterfaceOrientationPortraitUpsideDown</string>
+      <string>UIInterfaceOrientationLandscapeLeft</string>
+      <string>UIInterfaceOrientationLandscapeRight</string>
+    </array>
+    <key>UIUserInterfaceStyle</key>
+    <string>Light</string>
+    <key>UIViewControllerBasedStatusBarAppearance</key>
+    <true />
+    <key>io.flutter.embedded_views_preview</key>
+    <true />
+    <key>ITSAppUsesNonExemptEncryption</key>
+    <false />
+    <key>CADisableMinimumFrameDurationOnPhone</key>
+    <true />
+  </dict>
+</plist>

mobile/ios/fastlane/Fastfile

@@ -19,11 +19,11 @@ platform :ios do
   desc "iOS Beta"
   lane :beta do
     increment_version_number(
-      version_number: "1.4.0"
+      version_number: "1.10.0"
+    )
+    increment_build_number(
+      build_number: latest_testflight_build_number + 1,
     )
-    increment_build_number({
-      build_number: 0
-    })
     build_app(scheme: "Runner",
               workspace: "Runner.xcworkspace",
               xcargs: "-allowProvisioningUpdates")

mobile/ios/fastlane/README.md

@@ -21,7 +21,7 @@ For _fastlane_ installation instructions, see [Installing _fastlane_](https://do
 [bundle exec] fastlane ios beta
 ```
 
-iOS deployment
+iOS Beta
 
 ----
 

mobile/ios/fastlane/report.xml

@@ -5,27 +5,12 @@
     
     
       
-      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000332">
+      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000946">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="1: latest_testflight_build_number" time="4.608292">
-        
-      </testcase>
-    
-      
-      <testcase classname="fastlane.lanes" name="2: increment_build_number" time="0.747162">
-        
-      </testcase>
-    
-      
-      <testcase classname="fastlane.lanes" name="3: build_app" time="88.727281">
-        
-      </testcase>
-    
-      
-      <testcase classname="fastlane.lanes" name="4: upload_to_testflight" time="7.79397">
+      <testcase classname="fastlane.lanes" name="1: increment_version_number" time="16.3225">
         
       </testcase>
     

mobile/lib/constants/hive_box.dart

@@ -3,9 +3,13 @@ const String userInfoBox = "immichBoxUserInfo"; // Box
 const String accessTokenKey = "immichBoxAccessTokenKey"; // Key 1
 const String deviceIdKey = 'immichBoxDeviceIdKey'; // Key 2
 
-// SERVER ENDPOINT
+// Server endpoint
 const String serverEndpointKey = 'immichBoxServerEndpoint';
 
-// KEY
-const String hiveAllAsssetKey = "allAssets";
-const String hiveBackupProgressKey = "backupProgressAssets";
+// Login Info
+const String hiveLoginInfoBox = "immichLoginInfoBox";
+const String savedLoginInfoKey = "immichSavedLoginInfoKey";
+
+// Backup Info
+const String hiveBackupInfoBox = "immichBackupAlbumInfoBox";
+const String backupInfoKey = "immichBackupAlbumInfoKey";

mobile/lib/constants/immich_colors.dart

@@ -0,0 +1,3 @@
+import 'package:flutter/material.dart';
+
+const immichBackgroundColor = Color(0xFFf6f8fe);

mobile/lib/main.dart

@@ -2,21 +2,28 @@ 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/modules/backup/models/hive_backup_albums.model.dart';
+import 'package:immich_mobile/modules/login/models/hive_saved_login_info.model.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/modules/backup/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';
-import 'package:google_fonts/google_fonts.dart';
 
 void main() async {
   await Hive.initFlutter();
+
+  Hive.registerAdapter(HiveSavedLoginInfoAdapter());
+  Hive.registerAdapter(HiveBackupAlbumsAdapter());
+
   await Hive.openBox(userInfoBox);
-  // Hive.registerAdapter(ImmichBackUpAssetAdapter());
-  // Hive.deleteBoxFromDisk(hiveImmichBox);
+  await Hive.openBox<HiveSavedLoginInfo>(hiveLoginInfoBox);
+  await Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox);
 
   SystemChrome.setSystemUIOverlayStyle(
     const SystemUiOverlayStyle(
@@ -69,7 +76,7 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
   }
 
   Future<void> initApp() async {
-    WidgetsBinding.instance?.addObserver(this);
+    WidgetsBinding.instance.addObserver(this);
   }
 
   @override
@@ -80,7 +87,7 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
 
   @override
   void dispose() {
-    WidgetsBinding.instance?.removeObserver(this);
+    WidgetsBinding.instance.removeObserver(this);
     super.dispose();
   }
 
@@ -88,26 +95,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),
-        ),
-        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)]),
     );
   }
 }

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 {
-      'isBottomSheetEnable': isBottomSheetEnable,
-    };
+    final result = <String, dynamic>{};
+
+    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> {
-  ImageViewerPageStateNotifier() : super(ImageViewerPageState(isBottomSheetEnable: false));
+class ImageViewerStateNotifier extends StateNotifier<ImageViewerPageState> {
+  final ImageViewerService _imageViewerService = ImageViewerService();
 
-  void toggleBottomSheet() {
-    bool isBottomSheetEnable = state.isBottomSheetEnable;
+  ImageViewerStateNotifier() : super(ImageViewerPageState(downloadAssetStatus: DownloadAssetStatus.idle));
 
-    if (isBottomSheetEnable) {
-      state.copyWith(isBottomSheetEnable: false);
+  void downloadAsset(ImmichAsset asset, BuildContext context) async {
+    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>(
-    ((ref) => ImageViewerPageStateNotifier()));
+final imageViewerStateProvider =
+    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 {
-  const TopControlAppBar({Key? key, required this.asset, required this.onMoreInfoPressed}) : super(key: key);
+class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
+  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

@@ -1,9 +1,14 @@
+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';
+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,12 +30,25 @@ class ImageViewerPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final downloadAssetStatus = ref.watch(imageViewerStateProvider).downloadAssetStatus;
     var box = Hive.box(userInfoBox);
 
     getAssetExif() async {
       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;
@@ -40,66 +58,76 @@ 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: 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(),
-                        textAlign: TextAlign.center,
-                        style: TextStyle(fontSize: 12, color: Colors.grey[400]),
+      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: 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(),
+                ),
+            ],
           ),
         ),
       ),

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

@@ -0,0 +1,159 @@
+import 'package:auto_route/auto_route.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';
+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';
+
+// ignore: must_be_immutable
+class VideoViewerPage extends HookConsumerWidget {
+  final String videoUrl;
+  final ImmichAsset asset;
+  ImmichAssetWithExif? assetDetail;
+  final AssetService _assetService = AssetService();
+
+  VideoViewerPage({Key? key, required this.videoUrl, required this.asset}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final downloadAssetStatus = ref.watch(imageViewerStateProvider).downloadAssetStatus;
+
+    String jwtToken = Hive.box(userInfoBox).get(accessTokenKey);
+
+    void showInfo() {
+      showModalBottomSheet(
+        backgroundColor: Colors.black,
+        barrierColor: Colors.transparent,
+        isScrollControlled: false,
+        context: context,
+        builder: (context) {
+          return ExifBottomSheet(assetDetail: assetDetail!);
+        },
+      );
+    }
+
+    getAssetExif() async {
+      assetDetail = await _assetService.getAssetById(asset.id);
+    }
+
+    useEffect(() {
+      getAssetExif();
+      return null;
+    }, []);
+
+    return Scaffold(
+      backgroundColor: Colors.black,
+      appBar: TopControlAppBar(
+        asset: asset,
+        onMoreInfoPressed: () {
+          showInfo();
+        },
+        onDownloadPressed: () {
+          ref.watch(imageViewerStateProvider.notifier).downloadAsset(asset, context);
+        },
+      ),
+      body: SwipeDetector(
+        onSwipeDown: (_) {
+          AutoRouter.of(context).pop();
+        },
+        onSwipeUp: (_) {
+          showInfo();
+        },
+        child: SafeArea(
+          child: Stack(
+            children: [
+              VideoThumbnailPlayer(
+                url: videoUrl,
+                jwtToken: jwtToken,
+              ),
+              if (downloadAssetStatus == DownloadAssetStatus.loading)
+                const Center(
+                  child: DownloadLoadingIndicator(),
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class VideoThumbnailPlayer extends StatefulWidget {
+  final String url;
+  final String? jwtToken;
+
+  const VideoThumbnailPlayer({Key? key, required this.url, this.jwtToken}) : super(key: key);
+
+  @override
+  State<VideoThumbnailPlayer> createState() => _VideoThumbnailPlayerState();
+}
+
+class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
+  late VideoPlayerController videoPlayerController;
+  ChewieController? chewieController;
+
+  @override
+  void initState() {
+    super.initState();
+    initializePlayer();
+  }
+
+  Future<void> initializePlayer() async {
+    try {
+      videoPlayerController =
+          VideoPlayerController.network(widget.url, httpHeaders: {"Authorization": "Bearer ${widget.jwtToken}"});
+
+      await videoPlayerController.initialize();
+      _createChewieController();
+      setState(() {});
+    } catch (e) {
+      debugPrint("ERROR initialize video player");
+    }
+  }
+
+  _createChewieController() {
+    chewieController = ChewieController(
+      showOptions: true,
+      showControlsOnInitialize: false,
+      videoPlayerController: videoPlayerController,
+      autoPlay: true,
+      autoInitialize: false,
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    videoPlayerController.pause();
+    videoPlayerController.dispose();
+    chewieController?.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return chewieController != null && chewieController!.videoPlayerController.value.isInitialized
+        ? SizedBox(
+            child: Chewie(
+              controller: chewieController!,
+            ),
+          )
+        : const SizedBox(
+            width: 75,
+            height: 75,
+            child: CircularProgressIndicator.adaptive(
+              strokeWidth: 2,
+            ),
+          );
+  }
+}

mobile/lib/modules/backup/models/available_album.model.dart

@@ -0,0 +1,35 @@
+import 'dart:typed_data';
+
+import 'package:photo_manager/photo_manager.dart';
+
+class AvailableAlbum {
+  final AssetPathEntity albumEntity;
+  final Uint8List? thumbnailData;
+  AvailableAlbum({
+    required this.albumEntity,
+    this.thumbnailData,
+  });
+
+  AvailableAlbum copyWith({
+    AssetPathEntity? albumEntity,
+    Uint8List? thumbnailData,
+  }) {
+    return AvailableAlbum(
+      albumEntity: albumEntity ?? this.albumEntity,
+      thumbnailData: thumbnailData ?? this.thumbnailData,
+    );
+  }
+
+  @override
+  String toString() => 'AvailableAlbum(albumEntity: $albumEntity, thumbnailData: $thumbnailData)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is AvailableAlbum && other.albumEntity == albumEntity && other.thumbnailData == thumbnailData;
+  }
+
+  @override
+  int get hashCode => albumEntity.hashCode ^ thumbnailData.hashCode;
+}

mobile/lib/modules/backup/models/backup_state.model.dart

@@ -0,0 +1,88 @@
+import 'package:dio/dio.dart';
+import 'package:equatable/equatable.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+import 'package:immich_mobile/modules/backup/models/available_album.model.dart';
+import 'package:immich_mobile/shared/models/server_info.model.dart';
+
+enum BackUpProgressEnum { idle, inProgress, done }
+
+class BackUpState extends Equatable {
+  // enum
+  final BackUpProgressEnum backupProgress;
+  final List<String> allAssetOnDatabase;
+  final double progressInPercentage;
+  final CancelToken cancelToken;
+  final ServerInfo serverInfo;
+
+  /// All available albums on the device
+  final List<AvailableAlbum> availableAlbums;
+  final Set<AssetPathEntity> selectedBackupAlbums;
+  final Set<AssetPathEntity> excludedBackupAlbums;
+
+  /// Assets that are not overlapping in selected backup albums and excluded backup albums
+  final Set<AssetEntity> allUniqueAssets;
+
+  /// All assets from the selected albums that have been backup
+  final Set<String> selectedAlbumsBackupAssetsIds;
+
+  const BackUpState({
+    required this.backupProgress,
+    required this.allAssetOnDatabase,
+    required this.progressInPercentage,
+    required this.cancelToken,
+    required this.serverInfo,
+    required this.availableAlbums,
+    required this.selectedBackupAlbums,
+    required this.excludedBackupAlbums,
+    required this.allUniqueAssets,
+    required this.selectedAlbumsBackupAssetsIds,
+  });
+
+  BackUpState copyWith({
+    BackUpProgressEnum? backupProgress,
+    List<String>? allAssetOnDatabase,
+    double? progressInPercentage,
+    CancelToken? cancelToken,
+    ServerInfo? serverInfo,
+    List<AvailableAlbum>? availableAlbums,
+    Set<AssetPathEntity>? selectedBackupAlbums,
+    Set<AssetPathEntity>? excludedBackupAlbums,
+    Set<AssetEntity>? allUniqueAssets,
+    Set<String>? selectedAlbumsBackupAssetsIds,
+  }) {
+    return BackUpState(
+      backupProgress: backupProgress ?? this.backupProgress,
+      allAssetOnDatabase: allAssetOnDatabase ?? this.allAssetOnDatabase,
+      progressInPercentage: progressInPercentage ?? this.progressInPercentage,
+      cancelToken: cancelToken ?? this.cancelToken,
+      serverInfo: serverInfo ?? this.serverInfo,
+      availableAlbums: availableAlbums ?? this.availableAlbums,
+      selectedBackupAlbums: selectedBackupAlbums ?? this.selectedBackupAlbums,
+      excludedBackupAlbums: excludedBackupAlbums ?? this.excludedBackupAlbums,
+      allUniqueAssets: allUniqueAssets ?? this.allUniqueAssets,
+      selectedAlbumsBackupAssetsIds: selectedAlbumsBackupAssetsIds ?? this.selectedAlbumsBackupAssetsIds,
+    );
+  }
+
+  @override
+  String toString() {
+    return 'BackUpState(backupProgress: $backupProgress, allAssetOnDatabase: $allAssetOnDatabase, progressInPercentage: $progressInPercentage, cancelToken: $cancelToken, serverInfo: $serverInfo, availableAlbums: $availableAlbums, selectedBackupAlbums: $selectedBackupAlbums, excludedBackupAlbums: $excludedBackupAlbums, allUniqueAssets: $allUniqueAssets, selectedAlbumsBackupAssetsIds: $selectedAlbumsBackupAssetsIds)';
+  }
+
+  @override
+  List<Object> get props {
+    return [
+      backupProgress,
+      allAssetOnDatabase,
+      progressInPercentage,
+      cancelToken,
+      serverInfo,
+      availableAlbums,
+      selectedBackupAlbums,
+      excludedBackupAlbums,
+      allUniqueAssets,
+      selectedAlbumsBackupAssetsIds,
+    ];
+  }
+}

mobile/lib/modules/backup/models/hive_backup_albums.model.dart

@@ -0,0 +1,66 @@
+import 'dart:convert';
+
+import 'package:collection/collection.dart';
+import 'package:hive/hive.dart';
+
+part 'hive_backup_albums.model.g.dart';
+
+@HiveType(typeId: 1)
+class HiveBackupAlbums {
+  @HiveField(0)
+  List<String> selectedAlbumIds;
+
+  @HiveField(1)
+  List<String> excludedAlbumsIds;
+
+  HiveBackupAlbums({
+    required this.selectedAlbumIds,
+    required this.excludedAlbumsIds,
+  });
+
+  @override
+  String toString() => 'HiveBackupAlbums(selectedAlbumIds: $selectedAlbumIds, excludedAlbumsIds: $excludedAlbumsIds)';
+
+  HiveBackupAlbums copyWith({
+    List<String>? selectedAlbumIds,
+    List<String>? excludedAlbumsIds,
+  }) {
+    return HiveBackupAlbums(
+      selectedAlbumIds: selectedAlbumIds ?? this.selectedAlbumIds,
+      excludedAlbumsIds: excludedAlbumsIds ?? this.excludedAlbumsIds,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    final result = <String, dynamic>{};
+
+    result.addAll({'selectedAlbumIds': selectedAlbumIds});
+    result.addAll({'excludedAlbumsIds': excludedAlbumsIds});
+
+    return result;
+  }
+
+  factory HiveBackupAlbums.fromMap(Map<String, dynamic> map) {
+    return HiveBackupAlbums(
+      selectedAlbumIds: List<String>.from(map['selectedAlbumIds']),
+      excludedAlbumsIds: List<String>.from(map['excludedAlbumsIds']),
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory HiveBackupAlbums.fromJson(String source) => HiveBackupAlbums.fromMap(json.decode(source));
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    final listEquals = const DeepCollectionEquality().equals;
+
+    return other is HiveBackupAlbums &&
+        listEquals(other.selectedAlbumIds, selectedAlbumIds) &&
+        listEquals(other.excludedAlbumsIds, excludedAlbumsIds);
+  }
+
+  @override
+  int get hashCode => selectedAlbumIds.hashCode ^ excludedAlbumsIds.hashCode;
+}

mobile/lib/modules/backup/models/hive_backup_albums.model.g.dart

@@ -0,0 +1,44 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'hive_backup_albums.model.dart';
+
+// **************************************************************************
+// TypeAdapterGenerator
+// **************************************************************************
+
+class HiveBackupAlbumsAdapter extends TypeAdapter<HiveBackupAlbums> {
+  @override
+  final int typeId = 1;
+
+  @override
+  HiveBackupAlbums read(BinaryReader reader) {
+    final numOfFields = reader.readByte();
+    final fields = <int, dynamic>{
+      for (int i = 0; i < numOfFields; i++) reader.readByte(): reader.read(),
+    };
+    return HiveBackupAlbums(
+      selectedAlbumIds: (fields[0] as List).cast<String>(),
+      excludedAlbumsIds: (fields[1] as List).cast<String>(),
+    );
+  }
+
+  @override
+  void write(BinaryWriter writer, HiveBackupAlbums obj) {
+    writer
+      ..writeByte(2)
+      ..writeByte(0)
+      ..write(obj.selectedAlbumIds)
+      ..writeByte(1)
+      ..write(obj.excludedAlbumsIds);
+  }
+
+  @override
+  int get hashCode => typeId.hashCode;
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is HiveBackupAlbumsAdapter &&
+          runtimeType == other.runtimeType &&
+          typeId == other.typeId;
+}

mobile/lib/modules/backup/providers/backup.provider.dart

@@ -0,0 +1,347 @@
+import 'package:dio/dio.dart';
+import 'package:flutter/foundation.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/backup/models/available_album.model.dart';
+import 'package:immich_mobile/modules/backup/models/hive_backup_albums.model.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/shared/services/server_info.service.dart';
+import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
+import 'package:immich_mobile/shared/models/server_info.model.dart';
+import 'package:immich_mobile/modules/backup/services/backup.service.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+class BackupNotifier extends StateNotifier<BackUpState> {
+  BackupNotifier({this.ref})
+      : super(
+          BackUpState(
+            backupProgress: BackUpProgressEnum.idle,
+            allAssetOnDatabase: const [],
+            progressInPercentage: 0,
+            cancelToken: CancelToken(),
+            serverInfo: ServerInfo(
+              diskAvailable: "0",
+              diskAvailableRaw: 0,
+              diskSize: "0",
+              diskSizeRaw: 0,
+              diskUsagePercentage: 0.0,
+              diskUse: "0",
+              diskUseRaw: 0,
+            ),
+            availableAlbums: const [],
+            selectedBackupAlbums: const {},
+            excludedBackupAlbums: const {},
+            allUniqueAssets: const {},
+            selectedAlbumsBackupAssetsIds: const {},
+          ),
+        );
+
+  Ref? ref;
+  final BackupService _backupService = BackupService();
+  final ServerInfoService _serverInfoService = ServerInfoService();
+
+  ///
+  /// UI INTERACTION
+  ///
+  /// Album selection
+  /// Due to the overlapping assets across multiple albums on the device
+  /// We have method to include and exclude albums
+  /// The total unique assets will be used for backing mechanism
+  ///
+  void addAlbumForBackup(AssetPathEntity album) {
+    if (state.excludedBackupAlbums.contains(album)) {
+      removeExcludedAlbumForBackup(album);
+    }
+
+    state = state.copyWith(selectedBackupAlbums: {...state.selectedBackupAlbums, album});
+    _updateBackupAssetCount();
+  }
+
+  void addExcludedAlbumForBackup(AssetPathEntity album) {
+    if (state.selectedBackupAlbums.contains(album)) {
+      removeAlbumForBackup(album);
+    }
+    state = state.copyWith(excludedBackupAlbums: {...state.excludedBackupAlbums, album});
+    _updateBackupAssetCount();
+  }
+
+  void removeAlbumForBackup(AssetPathEntity album) {
+    Set<AssetPathEntity> currentSelectedAlbums = state.selectedBackupAlbums;
+
+    currentSelectedAlbums.removeWhere((a) => a == album);
+
+    state = state.copyWith(selectedBackupAlbums: currentSelectedAlbums);
+    _updateBackupAssetCount();
+  }
+
+  void removeExcludedAlbumForBackup(AssetPathEntity album) {
+    Set<AssetPathEntity> currentExcludedAlbums = state.excludedBackupAlbums;
+
+    currentExcludedAlbums.removeWhere((a) => a == album);
+
+    state = state.copyWith(excludedBackupAlbums: currentExcludedAlbums);
+    _updateBackupAssetCount();
+  }
+
+  ///
+  /// Get all album on the device
+  /// Get all selected and excluded album from the user's persistent storage
+  /// If this is the first time performing backup - set the default selected album to be
+  /// the one that has all assets (Recent on Android, Recents on iOS)
+  ///
+  Future<void> getBackupAlbumsInfo() async {
+    // Get all albums on the device
+    List<AvailableAlbum> availableAlbums = [];
+    List<AssetPathEntity> albums = await PhotoManager.getAssetPathList(hasAll: true, type: RequestType.common);
+
+    for (AssetPathEntity album in albums) {
+      AvailableAlbum availableAlbum = AvailableAlbum(albumEntity: album);
+
+      var assetList = await album.getAssetListRange(start: 0, end: album.assetCount);
+
+      if (assetList.isNotEmpty) {
+        var thumbnailAsset = assetList.first;
+        var thumbnailData = await thumbnailAsset.thumbnailDataWithSize(const ThumbnailSize(512, 512));
+        availableAlbum = availableAlbum.copyWith(thumbnailData: thumbnailData);
+      }
+
+      availableAlbums.add(availableAlbum);
+    }
+
+    state = state.copyWith(availableAlbums: availableAlbums);
+
+    // Put persistent storage info into local state of the app
+    // Get local storage on selected backup album
+    Box<HiveBackupAlbums> backupAlbumInfoBox = Hive.box<HiveBackupAlbums>(hiveBackupInfoBox);
+    HiveBackupAlbums? backupAlbumInfo = backupAlbumInfoBox.get(
+      backupInfoKey,
+      defaultValue: HiveBackupAlbums(
+        selectedAlbumIds: [],
+        excludedAlbumsIds: [],
+      ),
+    );
+
+    if (backupAlbumInfo == null) {
+      debugPrint("[ERROR] getting Hive backup album infomation");
+      return;
+    }
+
+    // First time backup - set isAll album is the default one for backup.
+    if (backupAlbumInfo.selectedAlbumIds.isEmpty) {
+      debugPrint("First time backup setup recent album as default");
+
+      // Get album that contains all assets
+      var list = await PhotoManager.getAssetPathList(hasAll: true, onlyAll: true, type: RequestType.common);
+      AssetPathEntity albumHasAllAssets = list.first;
+
+      backupAlbumInfoBox.put(
+        backupInfoKey,
+        HiveBackupAlbums(
+          selectedAlbumIds: [albumHasAllAssets.id],
+          excludedAlbumsIds: [],
+        ),
+      );
+
+      backupAlbumInfo = backupAlbumInfoBox.get(backupInfoKey);
+    }
+
+    // Generate AssetPathEntity from id to add to local state
+    try {
+      for (var selectedAlbumId in backupAlbumInfo!.selectedAlbumIds) {
+        var albumAsset = await AssetPathEntity.fromId(selectedAlbumId);
+        state = state.copyWith(selectedBackupAlbums: {...state.selectedBackupAlbums, albumAsset});
+      }
+
+      for (var excludedAlbumId in backupAlbumInfo.excludedAlbumsIds) {
+        var albumAsset = await AssetPathEntity.fromId(excludedAlbumId);
+        state = state.copyWith(excludedBackupAlbums: {...state.excludedBackupAlbums, albumAsset});
+      }
+    } catch (e) {
+      debugPrint("[ERROR] Failed to generate album from id $e");
+    }
+  }
+
+  ///
+  /// From all the selected and albums assets
+  /// Find the assets that are not overlapping between the two sets
+  /// Those assets are unique and are used as the total assets
+  ///
+  void _updateBackupAssetCount() async {
+    Set<AssetEntity> assetsFromSelectedAlbums = {};
+    Set<AssetEntity> assetsFromExcludedAlbums = {};
+
+    for (var album in state.selectedBackupAlbums) {
+      var assets = await album.getAssetListRange(start: 0, end: album.assetCount);
+      assetsFromSelectedAlbums.addAll(assets);
+    }
+
+    for (var album in state.excludedBackupAlbums) {
+      var assets = await album.getAssetListRange(start: 0, end: album.assetCount);
+      assetsFromExcludedAlbums.addAll(assets);
+    }
+
+    Set<AssetEntity> allUniqueAssets = assetsFromSelectedAlbums.difference(assetsFromExcludedAlbums);
+    List<String> allAssetOnDatabase = await _backupService.getDeviceBackupAsset();
+
+    // Find asset that were backup from selected albums
+    Set<String> selectedAlbumsBackupAssets = Set.from(allUniqueAssets.map((e) => e.id));
+    selectedAlbumsBackupAssets.removeWhere((assetId) => !allAssetOnDatabase.contains(assetId));
+
+    if (allUniqueAssets.isEmpty) {
+      debugPrint("No Asset On Device");
+      state = state.copyWith(
+        backupProgress: BackUpProgressEnum.idle,
+        allAssetOnDatabase: allAssetOnDatabase,
+        allUniqueAssets: {},
+        selectedAlbumsBackupAssetsIds: selectedAlbumsBackupAssets,
+      );
+      return;
+    } else {
+      state = state.copyWith(
+        allAssetOnDatabase: allAssetOnDatabase,
+        allUniqueAssets: allUniqueAssets,
+        selectedAlbumsBackupAssetsIds: selectedAlbumsBackupAssets,
+      );
+    }
+
+    // Save to persistent storage
+    _updatePersistentAlbumsSelection();
+  }
+
+  ///
+  /// Get all necessary information for calculating the available albums,
+  /// which albums are selected or excluded
+  /// and then update the UI according to those information
+  ///
+  void getBackupInfo() async {
+    await getBackupAlbumsInfo();
+    _updateServerInfo();
+    _updateBackupAssetCount();
+  }
+
+  ///
+  /// Save user selection of selected albums and excluded albums to
+  /// Hive database
+  ///
+  void _updatePersistentAlbumsSelection() {
+    Box<HiveBackupAlbums> backupAlbumInfoBox = Hive.box<HiveBackupAlbums>(hiveBackupInfoBox);
+    backupAlbumInfoBox.put(
+      backupInfoKey,
+      HiveBackupAlbums(
+        selectedAlbumIds: state.selectedBackupAlbums.map((e) => e.id).toList(),
+        excludedAlbumsIds: state.excludedBackupAlbums.map((e) => e.id).toList(),
+      ),
+    );
+  }
+
+  ///
+  /// Invoke backup process
+  ///
+  void startBackupProcess() async {
+    _updateServerInfo();
+    _updateBackupAssetCount();
+
+    state = state.copyWith(backupProgress: BackUpProgressEnum.inProgress);
+
+    var authResult = await PhotoManager.requestPermissionExtend();
+    if (authResult.isAuth) {
+      await PhotoManager.clearFileCache();
+
+      if (state.allUniqueAssets.isEmpty) {
+        debugPrint("No Asset On Device - Abort Backup Process");
+        state = state.copyWith(backupProgress: BackUpProgressEnum.idle);
+        return;
+      }
+
+      Set<AssetEntity> assetsWillBeBackup = state.allUniqueAssets;
+
+      // Remove item that has already been backed up
+      for (var assetId in state.allAssetOnDatabase) {
+        assetsWillBeBackup.removeWhere((e) => e.id == assetId);
+      }
+
+      if (assetsWillBeBackup.isEmpty) {
+        state = state.copyWith(backupProgress: BackUpProgressEnum.idle);
+      }
+
+      // Perform Backup
+      state = state.copyWith(cancelToken: CancelToken());
+      _backupService.backupAsset(assetsWillBeBackup, state.cancelToken, _onAssetUploaded, _onUploadProgress);
+    } else {
+      PhotoManager.openSetting();
+    }
+  }
+
+  void cancelBackup() {
+    state.cancelToken.cancel('Cancel Backup');
+    state = state.copyWith(backupProgress: BackUpProgressEnum.idle, progressInPercentage: 0.0);
+  }
+
+  void _onAssetUploaded(String deviceAssetId, String deviceId) {
+    state = state.copyWith(
+        selectedAlbumsBackupAssetsIds: {...state.selectedAlbumsBackupAssetsIds, deviceAssetId},
+        allAssetOnDatabase: [...state.allAssetOnDatabase, deviceAssetId]);
+
+    if (state.allUniqueAssets.length - state.selectedAlbumsBackupAssetsIds.length == 0) {
+      state = state.copyWith(backupProgress: BackUpProgressEnum.done, progressInPercentage: 0.0);
+    }
+
+    _updateServerInfo();
+  }
+
+  void _onUploadProgress(int sent, int total) {
+    state = state.copyWith(progressInPercentage: (sent.toDouble() / total.toDouble() * 100));
+  }
+
+  void _updateServerInfo() async {
+    var serverInfo = await _serverInfoService.getServerInfo();
+
+    // Update server info
+    state = state.copyWith(
+      serverInfo: ServerInfo(
+        diskSize: serverInfo.diskSize,
+        diskUse: serverInfo.diskUse,
+        diskAvailable: serverInfo.diskAvailable,
+        diskSizeRaw: serverInfo.diskSizeRaw,
+        diskUseRaw: serverInfo.diskUseRaw,
+        diskAvailableRaw: serverInfo.diskAvailableRaw,
+        diskUsagePercentage: serverInfo.diskUsagePercentage,
+      ),
+    );
+  }
+
+  void resumeBackup() {
+    var authState = ref?.read(authenticationProvider);
+
+    // Check if user is login
+    var accessKey = Hive.box(userInfoBox).get(accessTokenKey);
+
+    // User has been logged out return
+    if (authState != null) {
+      if (accessKey == null || !authState.isAuthenticated) {
+        debugPrint("[resumeBackup] not authenticated - abort");
+        return;
+      }
+
+      // Check if this device is enable backup by the user
+      if ((authState.deviceInfo.deviceId == authState.deviceId) && authState.deviceInfo.isAutoBackup) {
+        // check if backup is alreayd in process - then return
+        if (state.backupProgress == BackUpProgressEnum.inProgress) {
+          debugPrint("[resumeBackup] Backup is already in progress - abort");
+          return;
+        }
+
+        // Run backup
+        debugPrint("[resumeBackup] Start back up");
+        startBackupProcess();
+      }
+
+      return;
+    }
+  }
+}
+
+final backupProvider = StateNotifierProvider<BackupNotifier, BackUpState>((ref) {
+  return BackupNotifier(ref: ref);
+});

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

@@ -26,7 +26,7 @@ class BackupService {
     return result.cast<String>();
   }
 
-  backupAsset(List<AssetEntity> assetList, CancelToken cancelToken, Function(String, String) singleAssetDoneCb,
+  backupAsset(Set<AssetEntity> assetList, CancelToken cancelToken, Function(String, String) singleAssetDoneCb,
       Function(int, int) uploadProgress) async {
     var dio = Dio();
     dio.interceptors.add(AuthenticatedRequestInterceptor());
@@ -73,7 +73,7 @@ class BackupService {
           });
 
           // Build thumbnail multipart data
-          var thumbnailData = await entity.thumbDataWithSize(1280, 720);
+          var thumbnailData = await entity.thumbnailDataWithSize(const ThumbnailSize(1440, 2560));
           if (thumbnailData != null) {
             thumbnailUploadData = MultipartFile.fromBytes(
               List.from(thumbnailData),
@@ -112,7 +112,10 @@ class BackupService {
         }
       } on DioError catch (e) {
         debugPrint("DioError backupAsset: ${e.response}");
-        break;
+        if (e.type == DioErrorType.cancel || e.type == DioErrorType.other) {
+          return;
+        }
+        continue;
       } catch (e) {
         debugPrint("ERROR backupAsset: ${e.toString()}");
         continue;

mobile/lib/modules/backup/ui/album_info_card.dart

@@ -0,0 +1,185 @@
+import 'dart:typed_data';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/ui/immich_toast.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+class AlbumInfoCard extends HookConsumerWidget {
+  final Uint8List? imageData;
+  final AssetPathEntity albumInfo;
+
+  const AlbumInfoCard({Key? key, this.imageData, required this.albumInfo}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final bool isSelected = ref.watch(backupProvider).selectedBackupAlbums.contains(albumInfo);
+    final bool isExcluded = ref.watch(backupProvider).excludedBackupAlbums.contains(albumInfo);
+
+    ColorFilter selectedFilter = ColorFilter.mode(Theme.of(context).primaryColor.withAlpha(100), BlendMode.darken);
+    ColorFilter excludedFilter = ColorFilter.mode(Colors.red.withAlpha(75), BlendMode.darken);
+    ColorFilter unselectedFilter = const ColorFilter.mode(Colors.black, BlendMode.color);
+
+    _buildSelectedTextBox() {
+      if (isSelected) {
+        return Chip(
+          visualDensity: VisualDensity.compact,
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+          label: const Text(
+            "INCLUDED",
+            style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold),
+          ),
+          backgroundColor: Theme.of(context).primaryColor,
+        );
+      } else if (isExcluded) {
+        return Chip(
+          visualDensity: VisualDensity.compact,
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+          label: const Text(
+            "EXCLUDED",
+            style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold),
+          ),
+          backgroundColor: Colors.red[300],
+        );
+      }
+
+      return Container();
+    }
+
+    _buildImageFilter() {
+      if (isSelected) {
+        return selectedFilter;
+      } else if (isExcluded) {
+        return excludedFilter;
+      } else {
+        return unselectedFilter;
+      }
+    }
+
+    return GestureDetector(
+      onTap: () {
+        HapticFeedback.selectionClick();
+
+        if (isSelected) {
+          if (ref.watch(backupProvider).selectedBackupAlbums.length == 1) {
+            ImmichToast.show(
+              context: context,
+              msg: "Cannot remove the only album",
+              toastType: ToastType.error,
+              gravity: ToastGravity.BOTTOM,
+            );
+            return;
+          }
+
+          ref.watch(backupProvider.notifier).removeAlbumForBackup(albumInfo);
+        } else {
+          ref.watch(backupProvider.notifier).addAlbumForBackup(albumInfo);
+        }
+      },
+      onDoubleTap: () {
+        HapticFeedback.selectionClick();
+
+        if (isExcluded) {
+          ref.watch(backupProvider.notifier).removeExcludedAlbumForBackup(albumInfo);
+        } else {
+          if (ref.watch(backupProvider).selectedBackupAlbums.length == 1 &&
+              ref.watch(backupProvider).selectedBackupAlbums.contains(albumInfo)) {
+            ImmichToast.show(
+              context: context,
+              msg: "Cannot exclude the only album",
+              toastType: ToastType.error,
+              gravity: ToastGravity.BOTTOM,
+            );
+            return;
+          }
+
+          ref.watch(backupProvider.notifier).addExcludedAlbumForBackup(albumInfo);
+        }
+      },
+      child: Card(
+        margin: const EdgeInsets.all(1),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(12), // if you need this
+          side: const BorderSide(
+            color: Color(0xFFC9C9C9),
+            width: 1,
+          ),
+        ),
+        elevation: 0,
+        borderOnForeground: false,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Stack(
+              children: [
+                Container(
+                  width: 200,
+                  height: 200,
+                  decoration: BoxDecoration(
+                    borderRadius: const BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12)),
+                    image: DecorationImage(
+                      colorFilter: _buildImageFilter(),
+                      image: imageData != null
+                          ? MemoryImage(imageData!)
+                          : const AssetImage('assets/immich-logo-no-outline.png') as ImageProvider,
+                      fit: BoxFit.cover,
+                    ),
+                  ),
+                  child: null,
+                ),
+                Positioned(bottom: 10, left: 25, child: _buildSelectedTextBox())
+              ],
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 8.0),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  SizedBox(
+                    width: 140,
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: 25.0),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            albumInfo.name,
+                            style: TextStyle(
+                                fontSize: 14, color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold),
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 2.0),
+                            child: Text(
+                              albumInfo.assetCount.toString() + (albumInfo.isAll ? " (ALL)" : ""),
+                              style: TextStyle(fontSize: 12, color: Colors.grey[600]),
+                            ),
+                          )
+                        ],
+                      ),
+                    ),
+                  ),
+                  IconButton(
+                    onPressed: () {
+                      AutoRouter.of(context).push(AlbumPreviewRoute(album: albumInfo));
+                    },
+                    icon: Icon(
+                      Icons.image_outlined,
+                      color: Theme.of(context).primaryColor,
+                      size: 24,
+                    ),
+                    splashRadius: 25,
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/modules/backup/ui/backup_info_card.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+
+class BackupInfoCard extends StatelessWidget {
+  final String title;
+  final String subtitle;
+  final String info;
+  const BackupInfoCard({Key? key, required this.title, required this.subtitle, required this.info}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(5), // if you need this
+        side: const BorderSide(
+          color: Colors.black12,
+          width: 1,
+        ),
+      ),
+      elevation: 0,
+      borderOnForeground: false,
+      child: ListTile(
+        minVerticalPadding: 15,
+        isThreeLine: true,
+        title: Text(
+          title,
+          style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+        ),
+        subtitle: Padding(
+          padding: const EdgeInsets.only(top: 8.0),
+          child: Text(
+            subtitle,
+            style: const TextStyle(color: Color(0xFF808080), fontSize: 12),
+          ),
+        ),
+        trailing: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              info,
+              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+            ),
+            const Text("assets"),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/modules/backup/views/album_preview_page.dart

@@ -0,0 +1,84 @@
+import 'dart:typed_data';
+
+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/shared/ui/immich_loading_indicator.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+class AlbumPreviewPage extends HookConsumerWidget {
+  final AssetPathEntity album;
+  const AlbumPreviewPage({Key? key, required this.album}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final assets = useState<List<AssetEntity>>([]);
+
+    _getAssetsInAlbum() async {
+      assets.value = await album.getAssetListRange(start: 0, end: album.assetCount);
+    }
+
+    useEffect(() {
+      _getAssetsInAlbum();
+      return null;
+    }, []);
+
+    return Scaffold(
+      appBar: AppBar(
+        elevation: 0,
+        title: Column(
+          children: [
+            Text(
+              "${album.name} (${album.assetCount})",
+              style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 4.0),
+              child: Text(
+                "ID ${album.id}",
+                style: TextStyle(fontSize: 10, color: Colors.grey[600], fontWeight: FontWeight.bold),
+              ),
+            ),
+          ],
+        ),
+        leading: IconButton(
+          onPressed: () => AutoRouter.of(context).pop(),
+          icon: const Icon(Icons.arrow_back_ios_new_rounded),
+        ),
+      ),
+      body: GridView.builder(
+        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 5,
+          crossAxisSpacing: 2,
+          mainAxisSpacing: 2,
+        ),
+        itemCount: assets.value.length,
+        itemBuilder: (context, index) {
+          Future<Uint8List?> thumbData =
+              assets.value[index].thumbnailDataWithSize(const ThumbnailSize(200, 200), quality: 50);
+
+          return FutureBuilder<Uint8List?>(
+            future: thumbData,
+            builder: ((context, snapshot) {
+              if (snapshot.hasData && snapshot.data != null) {
+                return Image.memory(
+                  snapshot.data!,
+                  width: 100,
+                  height: 100,
+                  fit: BoxFit.cover,
+                );
+              }
+
+              return const SizedBox(
+                width: 100,
+                height: 100,
+                child: ImmichLoadingIndicator(),
+              );
+            }),
+          );
+        },
+      ),
+    );
+  }
+}

mobile/lib/modules/backup/views/backup_album_selection_page.dart

@@ -0,0 +1,244 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
+import 'package:immich_mobile/modules/backup/ui/album_info_card.dart';
+import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+import 'package:immich_mobile/shared/ui/immich_toast.dart';
+
+class BackupAlbumSelectionPage extends HookConsumerWidget {
+  const BackupAlbumSelectionPage({Key? key}) : super(key: key);
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final availableAlbums = ref.watch(backupProvider).availableAlbums;
+    final selectedBackupAlbums = ref.watch(backupProvider).selectedBackupAlbums;
+    final excludedBackupAlbums = ref.watch(backupProvider).excludedBackupAlbums;
+
+    useEffect(() {
+      ref.read(backupProvider.notifier).getBackupAlbumsInfo();
+      return null;
+    }, []);
+
+    _buildAlbumSelectionList() {
+      if (availableAlbums.isEmpty) {
+        return const Center(
+          child: ImmichLoadingIndicator(),
+        );
+      }
+
+      return SizedBox(
+        height: 265,
+        child: ListView.builder(
+          scrollDirection: Axis.horizontal,
+          itemCount: availableAlbums.length,
+          physics: const BouncingScrollPhysics(),
+          itemBuilder: ((context, index) {
+            var thumbnailData = availableAlbums[index].thumbnailData;
+            return Padding(
+              padding: index == 0 ? const EdgeInsets.only(left: 16.00) : const EdgeInsets.all(0),
+              child: AlbumInfoCard(imageData: thumbnailData, albumInfo: availableAlbums[index].albumEntity),
+            );
+          }),
+        ),
+      );
+    }
+
+    _buildSelectedAlbumNameChip() {
+      return selectedBackupAlbums.map((album) {
+        void removeSelection() {
+          if (ref.watch(backupProvider).selectedBackupAlbums.length == 1) {
+            ImmichToast.show(
+              context: context,
+              msg: "Cannot remove the only album",
+              toastType: ToastType.error,
+              gravity: ToastGravity.BOTTOM,
+            );
+            return;
+          }
+
+          ref.watch(backupProvider.notifier).removeAlbumForBackup(album);
+        }
+
+        return Padding(
+          padding: const EdgeInsets.only(right: 8.0),
+          child: GestureDetector(
+            onTap: removeSelection,
+            child: Chip(
+              visualDensity: VisualDensity.compact,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+              label: Text(
+                album.name,
+                style: const TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold),
+              ),
+              backgroundColor: Theme.of(context).primaryColor,
+              deleteIconColor: Colors.white,
+              deleteIcon: const Icon(
+                Icons.cancel_rounded,
+                size: 15,
+              ),
+              onDeleted: removeSelection,
+            ),
+          ),
+        );
+      }).toSet();
+    }
+
+    _buildExcludedAlbumNameChip() {
+      return excludedBackupAlbums.map((album) {
+        void removeSelection() {
+          ref.watch(backupProvider.notifier).removeExcludedAlbumForBackup(album);
+        }
+
+        return GestureDetector(
+          onTap: removeSelection,
+          child: Padding(
+            padding: const EdgeInsets.only(right: 8.0),
+            child: Chip(
+              visualDensity: VisualDensity.compact,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+              label: Text(
+                album.name,
+                style: const TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold),
+              ),
+              backgroundColor: Colors.red[300],
+              deleteIconColor: Colors.white,
+              deleteIcon: const Icon(
+                Icons.cancel_rounded,
+                size: 15,
+              ),
+              onDeleted: removeSelection,
+            ),
+          ),
+        );
+      }).toSet();
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        leading: IconButton(
+          onPressed: () => AutoRouter.of(context).pop(),
+          icon: const Icon(Icons.arrow_back_ios_rounded),
+        ),
+        title: const Text(
+          "Select Albums",
+          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+        ),
+        elevation: 0,
+      ),
+      body: ListView(
+        physics: const ClampingScrollPhysics(),
+        children: [
+          const Padding(
+            padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
+            child: Text(
+              "Selection Info",
+              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+            ),
+          ),
+          // Selected Album Chips
+
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16.0),
+            child: Wrap(
+              children: [..._buildSelectedAlbumNameChip(), ..._buildExcludedAlbumNameChip()],
+            ),
+          ),
+
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8),
+            child: Card(
+              margin: const EdgeInsets.all(0),
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(5), // if you need this
+                side: const BorderSide(
+                  color: Color.fromARGB(255, 235, 235, 235),
+                  width: 1,
+                ),
+              ),
+              elevation: 0,
+              borderOnForeground: false,
+              child: Column(
+                children: [
+                  ListTile(
+                    visualDensity: VisualDensity.compact,
+                    title: Text(
+                      "Total unique assets",
+                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Colors.grey[700]),
+                    ),
+                    trailing: Text(
+                      ref.watch(backupProvider).allUniqueAssets.length.toString(),
+                      style: const TextStyle(fontWeight: FontWeight.bold),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+          ListTile(
+            title: Text(
+              "Albums on device (${availableAlbums.length.toString()})",
+              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+            ),
+            subtitle: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 8.0),
+              child: Text(
+                "Tap to include, double tap to exclude",
+                style: TextStyle(
+                  fontSize: 12,
+                  color: Theme.of(context).primaryColor,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+            trailing: IconButton(
+              splashRadius: 16,
+              icon: Icon(
+                Icons.info,
+                size: 20,
+                color: Theme.of(context).primaryColor,
+              ),
+              onPressed: () {
+                // show the dialog
+                showDialog(
+                  context: context,
+                  builder: (BuildContext context) {
+                    return AlertDialog(
+                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                      elevation: 5,
+                      title: Text(
+                        'Selection Info',
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.bold,
+                          color: Theme.of(context).primaryColor,
+                        ),
+                      ),
+                      content: SingleChildScrollView(
+                        child: ListBody(
+                          children: [
+                            Text(
+                              'Assets can scatter across multiple albums. Thus, albums can be included or excluded during the backup process.',
+                              style: TextStyle(fontSize: 14, color: Colors.grey[700]),
+                            ),
+                          ],
+                        ),
+                      ),
+                    );
+                  },
+                );
+              },
+            ),
+          ),
+
+          Padding(
+            padding: const EdgeInsets.only(bottom: 16.0),
+            child: _buildAlbumSelectionList(),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/modules/backup/views/backup_controller_page.dart

@@ -0,0 +1,302 @@
+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/login/models/authentication_state.model.dart';
+import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/providers/websocket.provider.dart';
+import 'package:immich_mobile/modules/backup/ui/backup_info_card.dart';
+import 'package:percent_indicator/linear_percent_indicator.dart';
+
+class BackupControllerPage extends HookConsumerWidget {
+  const BackupControllerPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    BackUpState backupState = ref.watch(backupProvider);
+    AuthenticationState _authenticationState = ref.watch(authenticationProvider);
+    bool shouldBackup =
+        backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length == 0 ? false : true;
+
+    useEffect(() {
+      if (backupState.backupProgress != BackUpProgressEnum.inProgress) {
+        ref.read(backupProvider.notifier).getBackupInfo();
+      }
+
+      ref.watch(websocketProvider.notifier).stopListenToEvent('on_upload_success');
+      return null;
+    }, []);
+
+    Widget _buildStorageInformation() {
+      return ListTile(
+        leading: Icon(
+          Icons.storage_rounded,
+          color: Theme.of(context).primaryColor,
+        ),
+        title: const Text(
+          "Server Storage",
+          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+        ),
+        subtitle: Padding(
+          padding: const EdgeInsets.only(top: 8.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(top: 8.0),
+                child: LinearPercentIndicator(
+                  padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
+                  barRadius: const Radius.circular(2),
+                  lineHeight: 6.0,
+                  percent: backupState.serverInfo.diskUsagePercentage / 100.0,
+                  backgroundColor: Colors.grey,
+                  progressColor: Theme.of(context).primaryColor,
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 12.0),
+                child: Text('${backupState.serverInfo.diskUse} of ${backupState.serverInfo.diskSize} used'),
+              ),
+            ],
+          ),
+        ),
+      );
+    }
+
+    ListTile _buildBackupController() {
+      var backUpOption = _authenticationState.deviceInfo.isAutoBackup ? "on" : "off";
+      var isAutoBackup = _authenticationState.deviceInfo.isAutoBackup;
+      var backupBtnText = _authenticationState.deviceInfo.isAutoBackup ? "off" : "on";
+      return ListTile(
+        isThreeLine: true,
+        leading: isAutoBackup
+            ? Icon(
+                Icons.cloud_done_rounded,
+                color: Theme.of(context).primaryColor,
+              )
+            : const Icon(Icons.cloud_off_rounded),
+        title: Text(
+          "Back up is $backUpOption",
+          style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+        ),
+        subtitle: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              !isAutoBackup
+                  ? const Text(
+                      "Turn on backup to automatically upload new assets to the server.",
+                      style: TextStyle(fontSize: 14),
+                    )
+                  : Container(),
+              Padding(
+                padding: const EdgeInsets.only(top: 8.0),
+                child: OutlinedButton(
+                  onPressed: () {
+                    isAutoBackup
+                        ? ref.watch(authenticationProvider.notifier).setAutoBackup(false)
+                        : ref.watch(authenticationProvider.notifier).setAutoBackup(true);
+                  },
+                  child: Text("Turn $backupBtnText Backup", style: const TextStyle(fontWeight: FontWeight.bold)),
+                ),
+              )
+            ],
+          ),
+        ),
+      );
+    }
+
+    Widget _buildSelectedAlbumName() {
+      var text = "Selected: ";
+      var albums = ref.watch(backupProvider).selectedBackupAlbums;
+
+      if (albums.isNotEmpty) {
+        for (var album in albums) {
+          if (album.name == "Recent" || album.name == "Recents") {
+            text += "${album.name} (All), ";
+          } else {
+            text += "${album.name}, ";
+          }
+        }
+
+        return Padding(
+          padding: const EdgeInsets.only(top: 8.0),
+          child: Text(
+            text.trim().substring(0, text.length - 2),
+            style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 12, fontWeight: FontWeight.bold),
+          ),
+        );
+      } else {
+        return Padding(
+          padding: const EdgeInsets.only(top: 8.0),
+          child: Text(
+            "None selected",
+            style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 12, fontWeight: FontWeight.bold),
+          ),
+        );
+      }
+    }
+
+    Widget _buildExcludedAlbumName() {
+      var text = "Excluded: ";
+      var albums = ref.watch(backupProvider).excludedBackupAlbums;
+
+      if (albums.isNotEmpty) {
+        for (var album in albums) {
+          text += "${album.name}, ";
+        }
+
+        return Padding(
+          padding: const EdgeInsets.only(top: 8.0),
+          child: Text(
+            text.trim().substring(0, text.length - 2),
+            style: TextStyle(color: Colors.red[300], fontSize: 12, fontWeight: FontWeight.bold),
+          ),
+        );
+      } else {
+        return Container();
+      }
+    }
+
+    _buildFolderSelectionTile() {
+      return Card(
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(5), // if you need this
+          side: const BorderSide(
+            color: Colors.black12,
+            width: 1,
+          ),
+        ),
+        elevation: 0,
+        borderOnForeground: false,
+        child: ListTile(
+          minVerticalPadding: 15,
+          title: const Text("Backup Albums", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
+          subtitle: Padding(
+            padding: const EdgeInsets.only(top: 8.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const Text(
+                  "Albums to be backup",
+                  style: TextStyle(color: Color(0xFF808080), fontSize: 12),
+                ),
+                _buildSelectedAlbumName(),
+                _buildExcludedAlbumName()
+              ],
+            ),
+          ),
+          trailing: OutlinedButton(
+            onPressed: () {
+              AutoRouter.of(context).push(const BackupAlbumSelectionRoute());
+            },
+            child: const Padding(
+              padding: EdgeInsets.symmetric(
+                vertical: 16.0,
+              ),
+              child: Text(
+                "Select",
+                style: TextStyle(fontWeight: FontWeight.bold),
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        elevation: 0,
+        title: const Text(
+          "Backup",
+          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+        ),
+        leading: IconButton(
+            onPressed: () {
+              ref.watch(websocketProvider.notifier).listenUploadEvent();
+              AutoRouter.of(context).pop(true);
+            },
+            splashRadius: 24,
+            icon: const Icon(
+              Icons.arrow_back_ios_rounded,
+            )),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: ListView(
+          // crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const Padding(
+              padding: EdgeInsets.all(8.0),
+              child: Text(
+                "Backup Information",
+                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+              ),
+            ),
+            _buildFolderSelectionTile(),
+            BackupInfoCard(
+              title: "Total",
+              subtitle: "All unique photos and videos from selected albums",
+              info: "${backupState.allUniqueAssets.length}",
+            ),
+            BackupInfoCard(
+              title: "Backup",
+              subtitle: "Photos and videos from selected albums that are backup",
+              info: "${backupState.selectedAlbumsBackupAssetsIds.length}",
+            ),
+            BackupInfoCard(
+              title: "Remainder",
+              subtitle: "Photos and videos that has not been backing up from selected albums",
+              info: "${backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length}",
+            ),
+            const Divider(),
+            _buildBackupController(),
+            const Divider(),
+            _buildStorageInformation(),
+            const Divider(),
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Text(
+                  "Asset that were being backup: ${backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length} [${backupState.progressInPercentage.toStringAsFixed(0)}%]"),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(left: 8.0),
+              child: Row(children: [
+                const Text("Backup Progress:"),
+                const Padding(padding: EdgeInsets.symmetric(horizontal: 2)),
+                backupState.backupProgress == BackUpProgressEnum.inProgress
+                    ? const CircularProgressIndicator.adaptive()
+                    : const Text("Done"),
+              ]),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Container(
+                child: backupState.backupProgress == BackUpProgressEnum.inProgress
+                    ? ElevatedButton(
+                        style: ElevatedButton.styleFrom(primary: Colors.red[300]),
+                        onPressed: () {
+                          ref.read(backupProvider.notifier).cancelBackup();
+                        },
+                        child: const Text("Cancel"),
+                      )
+                    : ElevatedButton(
+                        onPressed: shouldBackup
+                            ? () {
+                                ref.read(backupProvider.notifier).startBackupProcess();
+                              }
+                            : null,
+                        child: const Text("Start Backup"),
+                      ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/modules/home/providers/upload_profile_image.provider.dart

@@ -0,0 +1,93 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:image_picker/image_picker.dart';
+
+import 'package:immich_mobile/shared/services/user.service.dart';
+
+enum UploadProfileStatus {
+  idle,
+  loading,
+  success,
+  failure,
+}
+
+class UploadProfileImageState {
+  // enum
+  final UploadProfileStatus status;
+  final String profileImagePath;
+  UploadProfileImageState({
+    required this.status,
+    required this.profileImagePath,
+  });
+
+  UploadProfileImageState copyWith({
+    UploadProfileStatus? status,
+    String? profileImagePath,
+  }) {
+    return UploadProfileImageState(
+      status: status ?? this.status,
+      profileImagePath: profileImagePath ?? this.profileImagePath,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    final result = <String, dynamic>{};
+
+    result.addAll({'status': status.index});
+    result.addAll({'profileImagePath': profileImagePath});
+
+    return result;
+  }
+
+  factory UploadProfileImageState.fromMap(Map<String, dynamic> map) {
+    return UploadProfileImageState(
+      status: UploadProfileStatus.values[map['status'] ?? 0],
+      profileImagePath: map['profileImagePath'] ?? '',
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory UploadProfileImageState.fromJson(String source) => UploadProfileImageState.fromMap(json.decode(source));
+
+  @override
+  String toString() => 'UploadProfileImageState(status: $status, profileImagePath: $profileImagePath)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is UploadProfileImageState && other.status == status && other.profileImagePath == profileImagePath;
+  }
+
+  @override
+  int get hashCode => status.hashCode ^ profileImagePath.hashCode;
+}
+
+class UploadProfileImageNotifier extends StateNotifier<UploadProfileImageState> {
+  UploadProfileImageNotifier()
+      : super(UploadProfileImageState(
+          profileImagePath: '',
+          status: UploadProfileStatus.idle,
+        ));
+
+  Future<bool> upload(XFile file) async {
+    state = state.copyWith(status: UploadProfileStatus.loading);
+
+    var res = await UserService().uploadProfileImage(file);
+
+    if (res != null) {
+      debugPrint("Succesfully upload profile image");
+      state = state.copyWith(status: UploadProfileStatus.success, profileImagePath: res.profileImagePath);
+      return true;
+    }
+
+    state = state.copyWith(status: UploadProfileStatus.failure);
+    return false;
+  }
+}
+
+final uploadProfileImageProvider =
+    StateNotifierProvider<UploadProfileImageNotifier, UploadProfileImageState>(((ref) => UploadProfileImageNotifier()));

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

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/modules/home/providers/home_page_state.provider.dart';
 
 class DeleteDialog extends ConsumerWidget {

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

@@ -11,40 +11,44 @@ class ImageGrid extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return SliverGrid(
-      gridDelegate:
-          const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 5.0, mainAxisSpacing: 5),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 4,
+        crossAxisSpacing: 5.0,
+        mainAxisSpacing: 5,
+      ),
       delegate: SliverChildBuilderDelegate(
         (BuildContext context, int index) {
           var assetType = assetGroup[index].type;
 
           return GestureDetector(
-              onTap: () {},
-              child: Stack(
-                children: [
-                  ThumbnailImage(asset: assetGroup[index]),
-                  assetType == 'IMAGE'
-                      ? Container()
-                      : Positioned(
-                          top: 5,
-                          right: 5,
-                          child: Row(
-                            children: [
-                              Text(
-                                assetGroup[index].duration.toString().substring(0, 7),
-                                style: const TextStyle(
-                                  color: Colors.white,
-                                  fontSize: 10,
-                                ),
-                              ),
-                              const Icon(
-                                Icons.play_circle_outline_rounded,
+            onTap: () {},
+            child: Stack(
+              children: [
+                ThumbnailImage(asset: assetGroup[index]),
+                assetType == 'IMAGE'
+                    ? Container()
+                    : Positioned(
+                        top: 5,
+                        right: 5,
+                        child: Row(
+                          children: [
+                            Text(
+                              assetGroup[index].duration.toString().substring(0, 7),
+                              style: const TextStyle(
                                 color: Colors.white,
+                                fontSize: 10,
                               ),
-                            ],
-                          ),
-                        )
-                ],
-              ));
+                            ),
+                            const Icon(
+                              Icons.play_circle_outline_rounded,
+                              color: Colors.white,
+                            ),
+                          ],
+                        ),
+                      )
+              ],
+            ),
+          );
         },
         childCount: assetGroup.length,
       ),

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

@@ -1,14 +1,13 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:badges/badges.dart';
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/shared/models/backup_state.model.dart';
+import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
 import 'package:immich_mobile/shared/models/server_info_state.model.dart';
-import 'package:immich_mobile/shared/providers/backup.provider.dart';
+import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 
 class ImmichSliverAppBar extends ConsumerWidget {
@@ -30,7 +29,6 @@ class ImmichSliverAppBar extends ConsumerWidget {
       floating: true,
       pinned: false,
       snap: false,
-      backgroundColor: Colors.grey[200],
       shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
       leading: Builder(
         builder: (BuildContext context) {
@@ -41,7 +39,7 @@ class ImmichSliverAppBar extends ConsumerWidget {
                 child: IconButton(
                   splashRadius: 25,
                   icon: const Icon(
-                    Icons.account_circle_rounded,
+                    Icons.face_outlined,
                     size: 30,
                   ),
                   onPressed: () {
@@ -79,12 +77,11 @@ class ImmichSliverAppBar extends ConsumerWidget {
       ),
       title: Text(
         'IMMICH',
-        style: GoogleFonts.snowburstOne(
-          textStyle: TextStyle(
-            fontWeight: FontWeight.bold,
-            fontSize: 22,
-            color: Theme.of(context).primaryColor,
-          ),
+        style: TextStyle(
+          fontFamily: 'SnowburstOne',
+          fontWeight: FontWeight.bold,
+          fontSize: 22,
+          color: Theme.of(context).primaryColor,
         ),
       ),
       actions: [
@@ -121,15 +118,20 @@ class ImmichSliverAppBar extends ConsumerWidget {
                       ),
                       child: const Icon(Icons.backup_rounded)),
               tooltip: 'Backup Controller',
-              onPressed: () {
-                AutoRouter.of(context).push(const BackupControllerRoute());
+              onPressed: () async {
+                var onPop = await AutoRouter.of(context).push(const BackupControllerRoute());
+
+                if (onPop != null && onPop == true) {
+                  onPopBack!();
+                }
               },
             ),
             _backupState.backupProgress == BackUpProgressEnum.inProgress
                 ? Positioned(
                     bottom: 5,
                     child: Text(
-                      _backupState.backingUpAssetCount.toString(),
+                      (_backupState.allUniqueAssets.length - _backupState.selectedAlbumsBackupAssetsIds.length)
+                          .toString(),
                       style: const TextStyle(fontSize: 9, fontWeight: FontWeight.bold),
                     ),
                   )

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

@@ -1,25 +1,33 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.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:image_picker/image_picker.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/home/providers/upload_profile_image.provider.dart';
+import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/shared/models/server_info_state.model.dart';
-import 'package:immich_mobile/shared/providers/backup.provider.dart';
+import 'package:immich_mobile/modules/backup/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/ui/immich_loading_indicator.dart';
 import 'package:package_info_plus/package_info_plus.dart';
+import 'dart:math';
 
 class ProfileDrawer extends HookConsumerWidget {
   const ProfileDrawer({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    String endpoint = Hive.box(userInfoBox).get(serverEndpointKey);
     AuthenticationState _authState = ref.watch(authenticationProvider);
     ServerInfoState _serverInfoState = ref.watch(serverInfoProvider);
-
+    final uploadProfileImageStatus = ref.watch(uploadProfileImageProvider).status;
     final appInfo = useState({});
+    var dummmy = Random().nextInt(1024);
 
     _getPackageInfo() async {
       PackageInfo packageInfo = await PackageInfo.fromPlatform();
@@ -30,19 +38,74 @@ class ProfileDrawer extends HookConsumerWidget {
       };
     }
 
+    _buildUserProfileImage() {
+      if (_authState.profileImagePath.isEmpty) {
+        return const CircleAvatar(
+          radius: 35,
+          backgroundImage: AssetImage('assets/immich-logo-no-outline.png'),
+          backgroundColor: Colors.transparent,
+        );
+      }
+
+      if (uploadProfileImageStatus == UploadProfileStatus.idle) {
+        if (_authState.profileImagePath.isNotEmpty) {
+          return CircleAvatar(
+            radius: 35,
+            backgroundImage: NetworkImage('$endpoint/user/profile-image/${_authState.userId}?d=${dummmy++}'),
+            backgroundColor: Colors.transparent,
+          );
+        } else {
+          return const CircleAvatar(
+            radius: 35,
+            backgroundImage: AssetImage('assets/immich-logo-no-outline.png'),
+            backgroundColor: Colors.transparent,
+          );
+        }
+      }
+
+      if (uploadProfileImageStatus == UploadProfileStatus.success) {
+        return CircleAvatar(
+          radius: 35,
+          backgroundImage: NetworkImage('$endpoint/user/profile-image/${_authState.userId}?d=${dummmy++}'),
+          backgroundColor: Colors.transparent,
+        );
+      }
+
+      if (uploadProfileImageStatus == UploadProfileStatus.failure) {
+        return const CircleAvatar(
+          radius: 35,
+          backgroundImage: AssetImage('assets/immich-logo-no-outline.png'),
+          backgroundColor: Colors.transparent,
+        );
+      }
+
+      if (uploadProfileImageStatus == UploadProfileStatus.loading) {
+        return const ImmichLoadingIndicator();
+      }
+
+      return Container();
+    }
+
+    _pickUserProfileImage() async {
+      final XFile? image = await ImagePicker().pickImage(source: ImageSource.gallery, maxHeight: 1024, maxWidth: 1024);
+
+      if (image != null) {
+        var success = await ref.watch(uploadProfileImageProvider.notifier).upload(image);
+
+        if (success) {
+          ref
+              .watch(authenticationProvider.notifier)
+              .updateUserProfileImagePath(ref.read(uploadProfileImageProvider).profileImagePath);
+        }
+      }
+    }
+
     useEffect(() {
       _getPackageInfo();
-
+      _buildUserProfileImage();
       return null;
     }, []);
-
     return Drawer(
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.only(
-          topRight: Radius.circular(5),
-          bottomRight: Radius.circular(5),
-        ),
-      ),
       child: Column(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
@@ -51,22 +114,60 @@ class ProfileDrawer extends HookConsumerWidget {
             padding: EdgeInsets.zero,
             children: [
               DrawerHeader(
-                decoration: BoxDecoration(
-                  color: Colors.grey[200],
+                decoration: const BoxDecoration(
+                  gradient: LinearGradient(
+                    colors: [Color.fromARGB(255, 216, 219, 238), Color.fromARGB(255, 226, 230, 231)],
+                    begin: Alignment.centerRight,
+                    end: Alignment.centerLeft,
+                  ),
                 ),
                 child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  crossAxisAlignment: CrossAxisAlignment.center,
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    const Image(
-                      image: AssetImage('assets/immich-logo-no-outline.png'),
-                      width: 50,
-                      filterQuality: FilterQuality.high,
+                    Stack(
+                      clipBehavior: Clip.none,
+                      children: [
+                        _buildUserProfileImage(),
+                        Positioned(
+                          bottom: 0,
+                          right: -5,
+                          child: GestureDetector(
+                            onTap: _pickUserProfileImage,
+                            child: Material(
+                              color: Colors.grey[50],
+                              elevation: 2,
+                              shape: RoundedRectangleBorder(
+                                borderRadius: BorderRadius.circular(50.0),
+                              ),
+                              child: Padding(
+                                padding: const EdgeInsets.all(5.0),
+                                child: Icon(
+                                  Icons.edit,
+                                  color: Theme.of(context).primaryColor,
+                                  size: 14,
+                                ),
+                              ),
+                            ),
+                          ),
+                        ),
+                      ],
                     ),
                     const Padding(padding: EdgeInsets.all(8)),
                     Text(
-                      _authState.userEmail,
-                      style: TextStyle(color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold),
+                      "${_authState.firstName} ${_authState.lastName}",
+                      style: TextStyle(
+                        color: Theme.of(context).primaryColor,
+                        fontWeight: FontWeight.bold,
+                        fontSize: 24,
+                      ),
+                    ),
+                    Padding(
+                      padding: const EdgeInsets.only(top: 4.0),
+                      child: Text(
+                        _authState.userEmail,
+                        style: TextStyle(color: Colors.grey[800], fontSize: 12),
+                      ),
                     )
                   ],
                 ),
@@ -79,7 +180,7 @@ class ProfileDrawer extends HookConsumerWidget {
                 ),
                 title: const Text(
                   "Sign Out",
-                  style: TextStyle(color: Colors.black54, fontSize: 14),
+                  style: TextStyle(color: Colors.black54, fontSize: 14, fontWeight: FontWeight.bold),
                 ),
                 onTap: () async {
                   bool res = await ref.read(authenticationProvider.notifier).logout();
@@ -97,7 +198,15 @@ class ProfileDrawer extends HookConsumerWidget {
           Padding(
             padding: const EdgeInsets.all(8.0),
             child: Card(
+              elevation: 0,
               color: Colors.grey[100],
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(5), // if you need this
+                side: const BorderSide(
+                  color: Color.fromARGB(101, 201, 201, 201),
+                  width: 1,
+                ),
+              ),
               child: Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8),
                 child: Column(

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/home/views/home_page.dart

@@ -10,10 +10,9 @@ import 'package:immich_mobile/modules/home/ui/image_grid.dart';
 import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
 import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
 import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
-import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/providers/websocket.provider.dart';
-import 'package:sliver_tools/sliver_tools.dart';
 
 class HomePage extends HookConsumerWidget {
   const HomePage({Key? key}) : super(key: key);
@@ -33,6 +32,23 @@ class HomePage extends HookConsumerWidget {
       return null;
     }, []);
 
+    void reloadAllAsset() {
+      ref.read(assetProvider.notifier).getAllAsset();
+    }
+
+    _buildSelectedItemCountIndicator() {
+      return isMultiSelectEnable
+          ? DisableMultiSelectButton(
+              onPressed: ref.watch(homePageStateProvider.notifier).disableMultiSelect,
+              selectedItemCount: homePageState.selectedItems.length,
+            )
+          : Container();
+    }
+
+    _buildBottomAppBar() {
+      return isMultiSelectEnable ? const ControlBottomAppBar() : Container();
+    }
+
     Widget _buildBody() {
       if (assetGroupByDateTime.isNotEmpty) {
         int? lastMonth;
@@ -66,47 +82,51 @@ class HomePage extends HookConsumerWidget {
         });
       }
 
+      _buildSliverAppBar() {
+        return isMultiSelectEnable
+            ? const SliverToBoxAdapter(
+                child: SizedBox(
+                  height: 70,
+                  child: null,
+                ),
+              )
+            : ImmichSliverAppBar(
+                onPopBack: reloadAllAsset,
+              );
+      }
+
       return SafeArea(
         bottom: !isMultiSelectEnable,
         top: !isMultiSelectEnable,
         child: Stack(
           children: [
-            DraggableScrollbar.semicircle(
-              backgroundColor: Theme.of(context).primaryColor,
-              controller: _scrollController,
-              heightScrollThumb: 48.0,
-              child: CustomScrollView(
+            CustomScrollView(
+              slivers: [
+                _buildSliverAppBar(),
+              ],
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 50.0),
+              child: DraggableScrollbar.semicircle(
+                backgroundColor: Theme.of(context).primaryColor,
                 controller: _scrollController,
-                slivers: [
-                  SliverAnimatedSwitcher(
-                    child: isMultiSelectEnable
-                        ? const SliverToBoxAdapter(
-                            child: SizedBox(
-                              height: 70,
-                              child: null,
-                            ),
-                          )
-                        : const ImmichSliverAppBar(),
-                    duration: const Duration(milliseconds: 350),
-                  ),
-                  ..._imageGridGroup
-                ],
+                heightScrollThumb: 48.0,
+                child: CustomScrollView(
+                  controller: _scrollController,
+                  slivers: [
+                    ..._imageGridGroup,
+                  ],
+                ),
               ),
             ),
-            isMultiSelectEnable
-                ? DisableMultiSelectButton(
-                    onPressed: ref.watch(homePageStateProvider.notifier).disableMultiSelect,
-                    selectedItemCount: homePageState.selectedItems.length,
-                  )
-                : Container(),
-            isMultiSelectEnable ? const ControlBottomAppBar() : Container(),
+            _buildSelectedItemCountIndicator(),
+            _buildBottomAppBar(),
           ],
         ),
       );
     }
 
     return Scaffold(
-      // key: _scaffoldKey,
       drawer: const ProfileDrawer(),
       body: _buildBody(),
     );

mobile/lib/modules/login/models/authentication_state.model.dart

@@ -8,6 +8,11 @@ class AuthenticationState {
   final String userId;
   final String userEmail;
   final bool isAuthenticated;
+  final String firstName;
+  final String lastName;
+  final bool isAdmin;
+  final bool isFirstLogin;
+  final String profileImagePath;
   final DeviceInfoRemote deviceInfo;
 
   AuthenticationState({
@@ -16,6 +21,11 @@ class AuthenticationState {
     required this.userId,
     required this.userEmail,
     required this.isAuthenticated,
+    required this.firstName,
+    required this.lastName,
+    required this.isAdmin,
+    required this.isFirstLogin,
+    required this.profileImagePath,
     required this.deviceInfo,
   });
 
@@ -25,6 +35,11 @@ class AuthenticationState {
     String? userId,
     String? userEmail,
     bool? isAuthenticated,
+    String? firstName,
+    String? lastName,
+    bool? isAdmin,
+    bool? isFirstLoggedIn,
+    String? profileImagePath,
     DeviceInfoRemote? deviceInfo,
   }) {
     return AuthenticationState(
@@ -33,24 +48,36 @@ class AuthenticationState {
       userId: userId ?? this.userId,
       userEmail: userEmail ?? this.userEmail,
       isAuthenticated: isAuthenticated ?? this.isAuthenticated,
+      firstName: firstName ?? this.firstName,
+      lastName: lastName ?? this.lastName,
+      isAdmin: isAdmin ?? this.isAdmin,
+      isFirstLogin: isFirstLoggedIn ?? isFirstLogin,
+      profileImagePath: profileImagePath ?? this.profileImagePath,
       deviceInfo: deviceInfo ?? this.deviceInfo,
     );
   }
 
   @override
   String toString() {
-    return 'AuthenticationState(deviceId: $deviceId, deviceType: $deviceType, userId: $userId, userEmail: $userEmail, isAuthenticated: $isAuthenticated, deviceInfo: $deviceInfo)';
+    return 'AuthenticationState(deviceId: $deviceId, deviceType: $deviceType, userId: $userId, userEmail: $userEmail, isAuthenticated: $isAuthenticated, firstName: $firstName, lastName: $lastName, isAdmin: $isAdmin, isFirstLoggedIn: $isFirstLogin, profileImagePath: $profileImagePath, deviceInfo: $deviceInfo)';
   }
 
   Map<String, dynamic> toMap() {
-    return {
-      'deviceId': deviceId,
-      'deviceType': deviceType,
-      'userId': userId,
-      'userEmail': userEmail,
-      'isAuthenticated': isAuthenticated,
-      'deviceInfo': deviceInfo.toMap(),
-    };
+    final result = <String, dynamic>{};
+
+    result.addAll({'deviceId': deviceId});
+    result.addAll({'deviceType': deviceType});
+    result.addAll({'userId': userId});
+    result.addAll({'userEmail': userEmail});
+    result.addAll({'isAuthenticated': isAuthenticated});
+    result.addAll({'firstName': firstName});
+    result.addAll({'lastName': lastName});
+    result.addAll({'isAdmin': isAdmin});
+    result.addAll({'isFirstLogin': isFirstLogin});
+    result.addAll({'profileImagePath': profileImagePath});
+    result.addAll({'deviceInfo': deviceInfo.toMap()});
+
+    return result;
   }
 
   factory AuthenticationState.fromMap(Map<String, dynamic> map) {
@@ -60,6 +87,11 @@ class AuthenticationState {
       userId: map['userId'] ?? '',
       userEmail: map['userEmail'] ?? '',
       isAuthenticated: map['isAuthenticated'] ?? false,
+      firstName: map['firstName'] ?? '',
+      lastName: map['lastName'] ?? '',
+      isAdmin: map['isAdmin'] ?? false,
+      isFirstLogin: map['isFirstLogin'] ?? false,
+      profileImagePath: map['profileImagePath'] ?? '',
       deviceInfo: DeviceInfoRemote.fromMap(map['deviceInfo']),
     );
   }
@@ -78,6 +110,11 @@ class AuthenticationState {
         other.userId == userId &&
         other.userEmail == userEmail &&
         other.isAuthenticated == isAuthenticated &&
+        other.firstName == firstName &&
+        other.lastName == lastName &&
+        other.isAdmin == isAdmin &&
+        other.isFirstLogin == isFirstLogin &&
+        other.profileImagePath == profileImagePath &&
         other.deviceInfo == deviceInfo;
   }
 
@@ -88,6 +125,11 @@ class AuthenticationState {
         userId.hashCode ^
         userEmail.hashCode ^
         isAuthenticated.hashCode ^
+        firstName.hashCode ^
+        lastName.hashCode ^
+        isAdmin.hashCode ^
+        isFirstLogin.hashCode ^
+        profileImagePath.hashCode ^
         deviceInfo.hashCode;
   }
 }

mobile/lib/modules/login/models/hive_saved_login_info.model.dart

@@ -0,0 +1,20 @@
+import 'package:hive/hive.dart';
+
+part 'hive_saved_login_info.model.g.dart';
+
+@HiveType(typeId: 0)
+class HiveSavedLoginInfo {
+  @HiveField(0)
+  String email;
+
+  @HiveField(1)
+  String password;
+
+  @HiveField(2)
+  String serverUrl;
+
+  @HiveField(3)
+  bool isSaveLogin;
+
+  HiveSavedLoginInfo({required this.email, required this.password, required this.serverUrl, required this.isSaveLogin});
+}

mobile/lib/modules/login/models/hive_saved_login_info.model.g.dart

@@ -0,0 +1,50 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'hive_saved_login_info.model.dart';
+
+// **************************************************************************
+// TypeAdapterGenerator
+// **************************************************************************
+
+class HiveSavedLoginInfoAdapter extends TypeAdapter<HiveSavedLoginInfo> {
+  @override
+  final int typeId = 0;
+
+  @override
+  HiveSavedLoginInfo read(BinaryReader reader) {
+    final numOfFields = reader.readByte();
+    final fields = <int, dynamic>{
+      for (int i = 0; i < numOfFields; i++) reader.readByte(): reader.read(),
+    };
+    return HiveSavedLoginInfo(
+      email: fields[0] as String,
+      password: fields[1] as String,
+      serverUrl: fields[2] as String,
+      isSaveLogin: fields[3] as bool,
+    );
+  }
+
+  @override
+  void write(BinaryWriter writer, HiveSavedLoginInfo obj) {
+    writer
+      ..writeByte(4)
+      ..writeByte(0)
+      ..write(obj.email)
+      ..writeByte(1)
+      ..write(obj.password)
+      ..writeByte(2)
+      ..write(obj.serverUrl)
+      ..writeByte(3)
+      ..write(obj.isSaveLogin);
+  }
+
+  @override
+  int get hashCode => typeId.hashCode;
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is HiveSavedLoginInfoAdapter &&
+          runtimeType == other.runtimeType &&
+          typeId == other.typeId;
+}