Up version for release

* introduce Asset as composition of AssetResponseDTO and AssetEntity

* filter out duplicate assets (that are both local and remote, take only remote for now)

* only allow remote images to be added to albums

* introduce ImmichImage to render Asset using local or remote data

* optimized deletion of local assets

* local video file playback

* allow multiple methods to wait on background service finished

* skip local assets when adding to album from home screen

* fix and optimize delete

* show gray box placeholder for local assets

* add comments

* fix bug: duplicate assets in state after onNewAssetUploaded

README.md

@@ -1,36 +1,47 @@
-<h1 align="center"> Immich </h1>
- <p align="center"> <b>High performance self-hosted photo and video backup solution.</b> </p>
-<p align="center">
-  <img src="design/feature-panel.png"  title="Immich Logo">
-</p>
-
-<p align="center">
+<p align="center"> 
+  <br/>  
   <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-green.svg?color=3F51B5&style=for-the-badge&label=License&logoColor=000000&labelColor=ececec" alt="License: MIT"></a>
-  <a href="https://github.com/alextran1502/immich"><img src="https://img.shields.io/github/stars/alextran1502/immich.svg?style=for-the-badge&logo=github&color=3F51B5&label=Stars&logoColor=000000&labelColor=ececec" alt="Star on Github"></a>
-  <a href="https://immichci.little-home.net/viewType.html?buildTypeId=Immich_BuildAndroidAndGetArtifact&guest=1">
-    <img src="https://img.shields.io/teamcity/http/immichci.little-home.net/s/Immich_BuildAndroidAndGetArtifact.svg?style=for-the-badge&label=Android&logo=teamcity&logoColor=000000&labelColor=ececec" alt="Android Build"/>
-  </a>
-  <a href="https://immichci.little-home.net/viewType.html?buildTypeId=Immich_BuildAndPublishIOSToTestFlight&guest=1">
-    <img src="https://img.shields.io/teamcity/http/immichci.little-home.net/s/Immich_BuildAndPublishIOSToTestFlight.svg?style=for-the-badge&label=iOS&logo=teamcity&logoColor=000000&labelColor=ececec" alt="iOS Build"/>
-  </a>
-  <a href="https://actions-badge.atrox.dev/alextran1502/immich/goto?ref=main">
-    <img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Falextran1502%2Fimmich%2Fbadge%3Fref%3Dmain&style=for-the-badge&label=Github Action&logo=github&labelColor=ececec&logoColor=000000" />
-  </a>
   <a href="https://discord.gg/D8JsnBEuKb">
-    <img src="https://img.shields.io/discord/979116623879368755.svg?label=Immich%20Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Immich Discord"/>
+    <img src="https://img.shields.io/discord/979116623879368755.svg?label=Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Discord"/>
   </a>
   <br/>  
   <br/>   
 </p>
 
+<p align="center">
+<img src="design/immich-logo.svg" width="150" title="Login With Custom URL">
+</p>
+<h3 align="center">Immich - High performance self-hosted photo and video backup solution</h3>
+<br/>
+<a href="https://immich.app">
+<img src="design/immich-screenshots.png" title="Main Screenshot">
+</a>
+<br/>
+
+## Disclaimer
+
+- ⚠️ The project is under **very active** development.
+- ⚠️ Expect bugs and breaking changes.
+- ⚠️ **Do not use as a single source to store of your photos and videos!**
+
+## Content
+
+- [Official Documentation](https://immich.app/docs/overview/introduction)
+- [Demo](#demo)
+- [Features](#features)
+- [Introduction](https://immich.app/docs/overview/introduction)
+- [Installation](https://immich.app/docs/installation/requirements)
+- [Contribution Guidelines](https://immich.app/docs/contribution-guidelines)
+- [Support The Project](#support-the-project)
+- [Known Issues](#known-issues)
+
 ## Demo
 
 You can access the web demo at https://demo.immich.app
 
-For the mobile app, you can use https://demo.immich.app/api for the `Server Endpoint URL`
+For the mobile app, you can use `https://demo.immich.app/api` for the `Server Endpoint URL`
 
-
-```
+```bash title="Demo Credential"
 The credential
 email: demo@immich.app
 password: demo
@@ -40,236 +51,52 @@ password: demo
 Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM
 ```
 
-## Content
-- [Features](#features)
-- [Screenshots](#screenshots)
-- [Installation](#installation)
-- [Update](#update)
-- [Mobile App](#mobile-app)
-- [App Beta Invitation links](#App-Beta-release-channel)
-- [Development](#development)
-- [Support](#support)
-- [Known Issues](#known-issues)
+# Features
 
-# Features 
+| Features                                    | Mobile  | Web |
+| ------------------------------------------- | ------- | --- |
+| Upload and view videos and photos           | Yes     | Yes |
+| Auto backup when the app is opened          | Yes     | N/A |
+| Selective album(s) for backup               | Yes     | N/A |
+| Download photos and videos to local device  | Yes     | Yes |
+| Multi-user support                          | Yes     | Yes |
+| Album                                       | Yes     | Yes |
+| Shared Albums                               | Yes     | Yes |
+| Quick navigation with draggable scrollbar   | Yes     | Yes |
+| Support RAW (HEIC, HEIF, DNG, Apple ProRaw) | Yes     | Yes |
+| Metadata view (EXIF, map)                   | Yes     | Yes |
+| Search by metadata, objects and image tags  | Yes     | No  |
+| Administrative functions (user management)  | N/A     | Yes |
+| Background backup                           | Android | N/A |
+| Virtual scroll                              | N/A     | Yes |
 
-> ⚠️ WARNING: **NOT READY FOR PRODUCTION! DO NOT USE TO STORE YOUR ASSETS**. This project is under heavy development. There will be continuous functions, features and api changes.
+# Support the project
 
-| Features | Mobile | Web |
-| - | - | - | 
-| Upload and view videos and photos | Yes | Yes 
-| Auto backup when the app is opened | Yes | N/A
-| Selective album(s) for backup | Yes | N/A
-| Download photos and videos to local device | Yes | Yes
-| Multi-user support | Yes | Yes
-| Album | Yes | Yes
-| Shared Albums | Yes | Yes
-| Quick navigation with draggable scrollbar | Yes | Yes
-| Support RAW (HEIC, HEIF, DNG, Apple ProRaw) | Yes | Yes
-| Metadata view (EXIF, map) | Yes | Yes
-| Search by metadata, objects and image tags | Yes | No
-| Administrative functions (user management) | N/A | Yes
-| Background backup | Android | N/A
-| Virtual scroll | N/A | Yes
+I've committed to this project, and I will not stop. I will keep updating the docs, adding new features, and fixing bugs. But I can't do it alone. So I need your help to give me additional motivation to keep going.
 
+As our hosts in the [selfhosted.show - In the episode 'The-organization-must-not-be-name is a Hostile Actor'](https://selfhosted.show/79?t=1418) said, this is a massive undertaking of what the team and I are doing. And I would love to someday be able to do this full-time, and I am asking for your help to make that happen.
 
-  <br/>  
+If you feel like this is the right cause and the app is something you are seeing yourself using for a long time, please consider supporting the project with the option below.
 
-# Screenshots
+## Donation
 
-### Mobile
-| | | | | |
-| - | - | - | - | - |
-| <img src="design/login-screen.png" width="150" title="Login With Custom URL"> <p align="center"> Login with custom URL </p> | <img src="design/backup-screen.png" width="150" title="Backup Setting Info"> <p align="center"> Backup Settings </p> | <img src="design/selective-backup-screen.png" width="150" title="Backup Setting Info"> <p align="center"> Backup selection </p> | <img src="design/home-screen.jpeg" width="150" title="Home Screen"> <p align="center"> Home Screen </p> | <img src="design/search-screen.jpeg" width="150" title="Curated Search Info"> <p align="center"> Curated search </p> |
-| <img src="design/shared-albums.png" width="150" title="Shared Albums"> <p align="center"> Shared albums </p>  |  <img src="design/nsc6.png" width="150" title="EXIF Info"> <p align="center"> EXIF info </p>  | <img src="https://media.giphy.com/media/y8ZeaAigGmNvlSoKhU/giphy.gif" width="150" title="Loading ~4000 images/videos"> <p align="center"> Loading ~4000 images/videos </p>  |
-
-### Web
-| Home Dashboard | Image view |
-| - | - |
-|<img src="design/web-home.jpeg"  width="100%" title="Home Dashboard"> | <img src="design/web-detail.jpeg" width="100%" title="Detail">|
-
-
-  <br/>  
-
-# Project Details
-## 💾 System Requirements
-
-- **OS**: Preferred unix-based operating system (Ubuntu, Debian, MacOS...etc). 
-
-- **RAM**: At least 2GB, preferred 4GB.
-
-- **Core**: At least 2 cores, preferred 4 cores.
-
-## 🔩 Technology Stack
-
-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 (COCO SSD) and Image Classification (ImageNet).
-
-
-  <br/>  
-
-# Installation
-
-NOTE: When using a reverse proxy in front of Immich (such as NGINX), the reverse proxy might require extra configuration to allow large files to be uploaded (such as `client_max_body_size` in the case of NGINX).
-## Testing one-step installation (not recommended for production)
-
-> ⚠️ *This installation method is for evaluating Immich before further customization to meet the users' needs.*
-
-*Applicable operating systems: Ubuntu, Debian, MacOS*
-
-- In the shell, from the directory of your choice, run the following command:
-
-```bash
-curl -o- https://raw.githubusercontent.com/immich-app/immich/main/install.sh | bash
-```
-
-This script will download the `docker-compose.yml` file and the `.env` file, then populate the necessary information, and finally run the `docker-compose up` or `docker compose up` (based on your docker's version) command. 
-
-The web application will be available at `http://<machine-ip-address>:2283`, and the server URL for the mobile app will be `http://<machine-ip-address>:2283/api`.
-
-The directory which is used to store the backup file is `./immich-app/immich-data`.
-
-
-  <br/>  
-
-## Custom installation (Recommended)
-
-### Step 1 - Download necessary files
-
-- Create a directory called `immich-app` and cd into it.
-
-- Get `docker-compose.yml`
-
-```bash
-wget https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml
-```
-
-- Get `.env`
-
-```bash
-wget -O .env https://raw.githubusercontent.com/immich-app/immich/main/docker/.env.example
-```
-
-### Step 2 - Populate .env file with custom information
-
-<a href="https://github.com/immich-app/immich/blob/main/docker/.env.example" target="_blank"><b>See the example <code>.env</code> file</b></a>
-
-* Populate custom database information if necessary.
-* Populate `UPLOAD_LOCATION` as prefered location for storing backup assets.
-* Populate a secret value for `JWT_SECRET`, you can use this command: `openssl rand -base64 128`
-
-### Step 3 - Start the containers
-
-- Run `docker-compose up` or `docker compose up` (based on your docker's version)
-
-### Step 4 - Register admin user
-
-- Navigate to the web at `http://<machine-ip-address>:2283` and follow the prompts to register admin user. 
-<p align="center">
-  <img src="design/admin-registration-form.png" width="300" title="Admin Registration">
-</p>
-
-- You can add and manage users from the administration page. 
-<p align="center">
- <img src="design/admin-interface.png" width="500" title="Admin User Management">
-</p>
-
-### Step 5 - Access the mobile app
-
-- Login the mobile app with the server endpoint URL at `http://<machine-ip-address>:2283/api`
-<p align="center">
-  <img src="design/login-screen.jpeg" width="250" title="Example login screen">
-</p> 
-
-  <br/>  
-
-## Update
-
-If you have installed, you can update the application by navigate to the directory that contains the `docker-compose.yml` file and run the following command:
-
-```bash
-docker-compose pull && docker-compose up -d
-```
-# Unraid Installation
-
-Please follow this [article](https://mfaz.dev/posts/immich-unraid/) for a tutorial on how to install Immich on Unraid
-
-
-# Mobile app
-
-| F-Droid | Google Play | iOS |
-| - | - | - |
-| <a href="https://f-droid.org/packages/app.alextran.immich"><img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" alt="Get it on F-Droid" height="80"></a> | <p align="left"> <a href="https://play.google.com/store/apps/details?id=app.alextran.immich"><img src="design/google-play-qr-code.png" width="200" title="Google Play Store"></a> <p/> | <p align="left"> <a href="https://apps.apple.com/us/app/immich/id1613945652"><img src="design/ios-qr-code.png" width="200" title="Apple App Store"></a> <p/> |
-
-> *The Play/App Store version might be lagging behind the latest release due to their review process.*
-
-# App Beta release channel
-
-You can opt-in to join app beta release channel by following the links below:
-* Android: Invitation link from [web](https://play.google.com/store/apps/details?id=app.alextran.immich) or from [mobile](https://play.google.com/store/apps/details?id=app.alextran.immich)
-* iOS: [TestFlight invitation link](https://testflight.apple.com/join/1vYsAa8P)
-  <br/>  
-
-# 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.
-
-## Note for developers
-### 1 - OpenAPI
-OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generator-cli` can be installed [here](https://openapi-generator.tech/docs/installation/). When you add a new or modify an existing endpoint, you must run the generate command below to update the client SDK.
-
-```bash
-npm run api:generate # Run from server directory
-```
-You can find the generated client SDK in the [`web/src/api`](web/src/api) for Typescript SDK and [`mobile/openapi`](mobile/openapi) for Dart SDK.
-
-
-  <br/>  
-
-# 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 [**one time**](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) or monthly donation from [**Github Sponsor**](https://github.com/sponsors/alextran1502).
-
-You can also donate using crypto currency with the following addresses:
-
-<p align="" style="display: flex; place-items: center; gap: 15px" title="Bitcoin(BTC)"><img src="design/bitcoin.png" width="25" title="Bitcoin"> <b>Bitcoin</b>: <code>1FvEp6P6NM8EZEkpGUFAN2LqJ1gxusNxZX</code></p>
-
-<p align="" style="display: flex; place-items: center; gap: 15px" title="Cardano(ADA)"> <img src="design/cardano.png" width="30" title="Cardano"> <b>Cardano</b>: <code>addr1qyy567vqhqrr3p7vpszr5p264gw89sqcwts2z8wqy4yek87cdmy79zazyjp7tmwhkluhk3krvslkzfvg0h43tytp3f5q49nycc</code> </p>
-
-
-This is also a meaningful way to give me motivation and encouragement to continue working on the app.
-
-Cheers! 🎉
-
-
-  <br/>  
+- [Monthly donation](https://github.com/sponsors/alextran1502) via GitHub Sponsors
+- [One-time donation](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) via Github Sponsors
 
 # Known Issues
 
 ## TensorFlow Build Issue
 
-*This is a known issue for incorrect Proxmox setup*
+_This is a known issue for incorrect Proxmox 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 Proxmox, 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`

docs/docs/FAQ.md

@@ -1,5 +1,19 @@
 ---
-sidebar_position: 4
+sidebar_position: 6
 ---
 
-# FAQ
+# FAQ
+
+### What is the difference between the cloud icon on the mobile app?
+
+| Icon                               | Description                                                                                                                                     |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![cloud](/img/cloud.svg)           | Asset is only available in the cloud and was uploaded from some other device (like the web client) or was deleted from this device after upload |
+| ![cloud-cross](/img/cloud-off.svg) | Asset is only available locally and has not yet been backed up                                                                                  |
+| ![cloud-done](/img/cloud-done.svg) | Asset was uploaded from this device and is now backed up in the cloud/server and still available in original on the device                      |
+
+### How can I sync an existing directory with Immich's server?
+Immich doesn't have the mechanism to sync an existing directory with the server. There is however, a helper CLI tool to help you bulk upload the existing photos and videos to the server. You can find the guide to use the CLI tool [here](/docs/usage/bulk-upload.md).
+
+### Why doesn't Immich watch an existing photo gallery directory?
+The initial approach of Immich is to become a backup tool, primarily for mobile device usage. Thus, all the assets must be uploaded from the mobile client. The app was architectured to perform that job well. 

docs/docs/contribution-guidelines.md

@@ -0,0 +1,82 @@
+---
+sidebar_position: 5
+---
+
+# Contribution guidelines
+
+## Environment setup
+
+### Server and web app
+
+This environment includes the following services:
+
+- Core server - `/server/apps/immich`
+- Machine learning - `/machine-learning`
+- Microservices - `/server/apps/microservicess`
+- Web app - `/web`
+- Redis
+- PostgreSQL development database with exposed port `5432` so you can use any database client to acess it
+- NGINX Proxy - `nginx/nginx.conf`
+
+All the services are packaged to run as with single Docker Compose command.
+
+After cloning the project, from the root directory run
+
+```bash title="Start development server"
+make dev # required Makefile installed on the system.
+```
+
+All the services will be started with hot-reloading enabled for a quick feedback loop.
+
+### Mobile app
+
+The mobile app `(/mobile)` will required Flutter toolchain to be installed on your system.
+
+Please refer to the [Flutter's official documentation](https://flutter.dev/docs/get-started/install) for more information on setting up the toolchain on your machine.
+
+## IDE setup
+
+### Lint / format extensions
+
+Setting these in the IDE give a better developer experience, auto-formatting code on save, and providing instant feedback on lint issues.
+
+### VSCode
+
+Install `Flutter`, `Prettier`, `ESLint` and `Svelte` extensions.
+
+in User `settings.json` (`cmd + shift + p` and search for `Open User Settings JSON`) add the following:
+
+```json title="settings.json"
+{
+  "editor.formatOnSave": true,
+  "[javascript][typescript][css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 2,
+    "editor.formatOnSave": true
+  },
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode",
+    "editor.tabSize": 2
+  },
+  "svelte.enable-ts-plugin": true,
+  "eslint.validate": ["javascript", "svelte"],
+  "[dart]": {
+    "editor.formatOnSave": true,
+    "editor.selectionHighlight": false,
+    "editor.suggest.snippetsPreventQuickSuggestions": false,
+    "editor.suggestSelection": "first",
+    "editor.tabCompletion": "onlySnippets",
+    "editor.wordBasedSuggestions": false,
+    "editor.defaultFormatter": "Dart-Code.dart-code"
+  }
+}
+```
+
+## OpenAPI generator
+
+OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generator-cli` can be installed [here](https://openapi-generator.tech/docs/installation/). When you add a new or modify an existing endpoint, you must run the command below to update the client SDK.
+
+```bash
+npm run api:generate # Run from the `server` directory
+```
+You can find the generated client SDK in the `web/src/api` for Typescript SDK and `mobile/openapi` for Dart SDK.

docs/docs/installation/one-step-installation.md

@@ -0,0 +1,29 @@
+---
+sidebar_position: 2
+---
+
+# One-step installation
+
+:::caution
+This method is for evaluation purposes only. It is not recommended for production use. For production usage, please refer to the recommended installation method [here](/docs/installation/recommended-installation).
+:::
+
+In the shell, from a directory of your choice, run the following command:
+
+```bash
+curl -o- https://raw.githubusercontent.com/immich-app/immich/main/install.sh | bash
+```
+
+The script will perform the following actions:
+
+1. Download [docker-compose.yml](https://github.com/immich-app/immich/blob/main/docker/docker-compose.yml), and the [.env](https://github.com/immich-app/immich/blob/main/docker/.env.example) file from the main branch of the [repository](https://github.com/immich-app/immich).
+2. Populate the `.env` file with necessary information based on the current directory path.
+3. Start the containers.
+
+The web application will be available at `http://<machine-ip-address>:2283`, and the server URL for the mobile app will be `http://<machine-ip-address>:2283/api`
+
+The directory which is used to store the backup file is `./immich-app/immich-data` relative to the current directory.
+
+:::tip
+For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
+:::

docs/docs/installation/portainer-installation.md

@@ -0,0 +1,54 @@
+---
+sidebar_position: 4
+---
+
+# Portainer
+
+Install Immich using Portainer's Stack feature.
+
+1. Go to "**Stacks**" in the left sidebar.
+2. Click on "**Add stack**".
+3. Give the stack a name (i.e. Immich), and select "**Web Editor**" as the build method.
+4. Copy the content of the `docker-compose.yml` file from the [GitHub repository](https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml)
+5. Replace `.env` with `stack.env` for all containers that need to use environment variables in the web editor.
+
+<img
+  src={require('./img/dot-env.png').default}
+  width="50%"
+  style={{border: '1px solid #ddd'}}
+  alt="Dot Env Example"
+/>
+
+8. Click on "**Advanced Mode**" in the **Environment Variables** section.
+
+<img
+  src={require('./img/env-1.png').default}
+  width="50%"
+  style={{border: '1px solid #ddd'}}
+  alt="Dot Env Example"
+/>
+
+9. Copy the content of the `.env.example` file from the [GitHub repository](https://raw.githubusercontent.com/immich-app/immich/main/docker/.env.example) and paste to the editor.
+10. Switch back to "**Simple Mode**".
+
+<img
+  src={require('./img/env-2.png').default}
+  width="50%"
+  style={{border: '1px solid #ddd'}}
+  alt="Dot Env Example"
+/>
+
+* Populate custom database information if necessary.
+* Populate `UPLOAD_LOCATION` as prefered location for storing backup assets.
+* Populate a secret value for `JWT_SECRET`, you can use the command below to generate a secured key
+
+```bash title="Generate secure JWT_SECRET key"
+openssl rand -base64 128
+```
+
+11. Click on "**Deploy the stack**".
+
+
+:::tip
+For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
+:::

docs/docs/installation/recommended-installation.md

@@ -0,0 +1,120 @@
+---
+sidebar_position: 3
+---
+
+
+# Recommended installation
+
+This is the recommended installation method for production use.
+
+### Step 1 - Download the required files
+
+From a directory of your choice (e.g. `./immich-app`) run the following commands
+
+```bash title="Get docker-compose.yml file"
+wget https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml
+```
+
+```bash title="Get .env file"
+wget -O .env https://raw.githubusercontent.com/immich-app/immich/main/docker/.env.example
+```
+
+### Step 2 - Populate the .env file with custom values
+
+<details>
+
+<summary>Example <code>.env</code> content</summary>
+
+```bash
+###################################################################################
+# Database
+###################################################################################
+
+DB_HOSTNAME=immich_postgres
+DB_USERNAME=postgres
+DB_PASSWORD=postgres
+DB_DATABASE_NAME=immich
+
+# Optional Database settings:
+# DB_PORT=5432
+
+###################################################################################
+# Redis
+###################################################################################
+
+REDIS_HOSTNAME=immich_redis
+
+# Optional Redis settings:
+# REDIS_PORT=6379
+# REDIS_DBINDEX=0
+# REDIS_PASSWORD=
+# REDIS_SOCKET=
+
+###################################################################################
+# Upload File Config
+###################################################################################
+
+UPLOAD_LOCATION=absolute_location_on_your_machine_where_you_want_to_store_the_backup
+
+###################################################################################
+# Log message level - [simple|verbose]
+###################################################################################
+
+LOG_LEVEL=simple
+
+###################################################################################
+# JWT SECRET
+###################################################################################
+
+# This JWT_SECRET is used to sign the authentication keys for user login
+# You should set it to a long randomly generated value
+# You can use this command to generate one: openssl rand -base64 128
+JWT_SECRET=kWPdavjCECB0yoXgUHA/vpwpIKdCi/4ODVLIOe9WIi6AQlFfjWEuIVhWT3DtJE+T
+CTckJnpwGgSK5AoqD+A8DZKsHCRdfVnlQIVqqmyR8isZTcxL5DWYQUSDRzyOO5OA
+ZRUTE63FxiYhrRoe/y1yr5mV1osGy6mm6NZW8T2Tjwc=
+
+###################################################################################
+# Reverse Geocoding
+####################################################################################
+
+# DISABLE_REVERSE_GEOCODING=false
+
+# Reverse geocoding is done locally which has a small impact on memory usage
+# This memory usage can be altered by changing the REVERSE_GEOCODING_PRECISION variable
+# This ranges from 0-3 with 3 being the most precise
+# 3 - Cities > 500 population: ~200MB RAM
+# 2 - Cities > 1000 population: ~150MB RAM
+# 1 - Cities > 5000 population: ~80MB RAM
+# 0 - Cities > 15000 population: ~40MB RAM
+
+# REVERSE_GEOCODING_PRECISION=3
+
+####################################################################################
+# WEB - Optional
+####################################################################################
+
+# Custom message on the login page, should be written in HTML form.
+# For example PUBLIC_LOGIN_PAGE_MESSAGE="This is a demo instance of Immich.<br><br>Email: <i>demo@demo.de</i><br>Password: <i>demo</i>"
+
+PUBLIC_LOGIN_PAGE_MESSAGE="My Family Photos and Videos Backup Server"
+```
+
+</details>
+
+* Populate custom database information if necessary.
+* Populate `UPLOAD_LOCATION` as prefered location for storing backup assets.
+* Populate a secret value for `JWT_SECRET`, you can use the command below to generate a secure key
+
+```bash title="Command to generate secure JWT_SECRET key"
+openssl rand -base64 128
+```
+
+### Step 3 - Start the containers
+
+```bash title="Start the containers using docker compose command"
+docker-compose up -d # or `docker compose up -d` based on your docker-compose version
+```
+
+:::tip
+For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
+:::

docs/docs/installation/requirements.md

@@ -0,0 +1,31 @@
+---
+sidebar_position: 1
+---
+
+
+# Requirements
+Hardware and software requirements for Immich
+
+## Software
+
+- [Docker](https://docs.docker.com/get-docker/)
+- [Docker Compose](https://docs.docker.com/compose/install/)
+
+:::info Podman
+You can also use Podman to run the application. However, additional configurations might be required on your end.
+:::
+
+## Hardware
+
+- **OS**: Preferred unix-based operating system (Ubuntu, Debian, MacOS...etc). Windows works too, with [Docker Desktop on Windows](https://docs.docker.com/desktop/install/windows-install/)
+- **Ram**: At least 2GB, preferred 4GB.
+- **Core**: At least 2 cores, preferred 4 cores.
+
+## Installation methods
+
+There are a couple installation methods that you can use to install the application. You can choose the one that suits you the best.
+
+1. [One-step installation (Evaluation only)](/docs/installation/one-step-installation)
+2. **[Docker Compose with manual configuration (Recommended)](/docs/installation/recommended-installation)**
+3. [Portainer](/docs/installation/portainer-installation)
+4. [Unraid (Community contribution)](/docs/installation/unraid-installation)

docs/docs/installation/unraid-installation.md

@@ -0,0 +1,15 @@
+---
+sidebar_position: 5
+---
+
+# Unraid
+
+Install Immich on Unraid.
+
+:::info Community contribution
+Please follow this community contributed [article](https://mfaz.dev/posts/immich-unraid/) to install Immich on Unraid.
+:::
+
+:::tip
+For more information on how to use the application, please refer to the [Post Installation](/docs/usage/post-installation) guide.
+:::

docs/docs/mobile-app-beta-program.md

@@ -1,5 +1,12 @@
 ---
-sidebar_position: 5
+sidebar_position: 4
 ---
 
-# Mobile App Beta Program
+
+# Mobile app Beta program
+
+Join the beta release channel to test the latest update of the app
+
+You can opt-in to join app beta release channel by following the links below:
+* Android: Invitation link from [web](https://play.google.com/store/apps/details?id=app.alextran.immich) or from [mobile](https://play.google.com/store/apps/details?id=app.alextran.immich)
+* iOS: [TestFlight invitation link](https://testflight.apple.com/join/1vYsAa8P)

docs/docs/overview/introduction.md

@@ -1,7 +0,0 @@
----
-sidebar_position: 1
----
-
-# Introduction
-
-This is the first

docs/docs/overview/introduction.mdx

@@ -0,0 +1,25 @@
+---
+sidebar_position: 1
+---
+
+# Introduction
+
+Hello, I am glad you are here.
+
+<p style={{textAlign: 'center'}}>
+
+![Introduction Image](https://user-images.githubusercontent.com/27055614/182044984-2ee6d1ed-c4a7-4331-8a4b-64fcde77fe1f.png)
+
+</p>
+
+My name is Alex. I am an Electrical Engineer by schooling, then turned into a Software Engineer by trade and the pure love of problem solving.
+
+We were lying in bed with our newborn, and my wife said, "We are starting to accumulate a lot of photos and videos of our baby, and I don't want to pay for **_App-Which-Must-Not-Be-Named_** anymore. You always want to build something for me, so why don't you build me an app which can do that?"
+
+That was how the idea started to grow in my head. After that, I began to find existing solutions in the self-hosting space with similar backup functionality and the performance level of the **_App-Which-Must-Not-Be-Named_**. I found that the current solutions mainly focus on the gallery-type application. However, I want a simple-to-use backup tool with a native mobile app that can view photos and videos efficiently. So I set sail on this journey as a hungry engineer on the hunt.
+
+Another motivation that pushed me to deliver my execution of the **_App-Which-Must-Not-Be-Named_** alternative or replacement is for contributing back to the open source community that I have greatly benefited from over the years.
+
+I'm proud to share this creation with you, which values privacy, memories, and the joy of looking back at those moments in an easy-to-use and friendly interface.
+
+If you like the application or it helps you in some way, please consider [supporting](./support-the-project.md) to the project. It will help me to continue to develop and maintain the application.

docs/docs/overview/logo-mearning.md

@@ -2,4 +2,16 @@
 sidebar_position: 2
 ---
 
-# Logo meaning
+# Logo meaning
+
+Why the colorful flower, you ask?
+
+I really like the Japanese culture, especially the books, history, and food. The current logo is a spin-off of [the Oda clan's symbol](https://en.wikipedia.org/wiki/Oda_clan). 
+
+![Oda_emblem](https://user-images.githubusercontent.com/27055614/182044504-a5ed33a8-5640-42de-b359-18fdbee9fb90.svg)
+
+One of my favorite books is [Taikō](https://www.goodreads.com/book/show/336228.Taiko), it is the story about a prominent figure in the history of Japan, [Toyotomy Hideyoshi](https://www.britannica.com/biography/Toyotomi-Hideyoshi). He came from nothing, and through his resilience and wonderful mind, he has become one of the most powerful rulers in Japan's history. I enjoy his personality and the way he moved through life.
+
+The color is an adaptation of **_App-Which-Must-Not-Be-Named_**'s color scheme, with an extra color (pink) to complete the flower's fifth petal. The petal layers are the same color scheme as the main layer rotating back and forth to "bring the flower to life."
+
+![image](https://user-images.githubusercontent.com/27055614/182044984-2ee6d1ed-c4a7-4331-8a4b-64fcde77fe1f.png)

docs/docs/overview/support-the-project.md

@@ -2,4 +2,19 @@
 sidebar_position: 3
 ---
 
-# Support the project
+# Support the project
+
+I've committed to this project, and I will not stop. I will keep updating the docs, adding new features, and fixing bugs. But I can't do it alone, so I need your help to give me additional motivation to keep going.
+
+As our hosts in the [selfhosted.show - In the episode 'The-organization-must-not-be-name is a Hostile Actor'](https://selfhosted.show/79?t=1418) said, this is a massive undertaking; what the team and I are doing. I would love to someday be able to do this full-time, and I am asking for your help to make that happen.
+
+If you feel like this is the right cause and the app is something you see yourself using for a long time, please consider supporting the project with the options below.
+
+## Donation
+
+* Monthly donation via [GitHub Sponsors](https://github.com/sponsors/alextran1502)
+* One-time donation via [Github Sponsors](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502)
+
+## Contribution
+
+If you are a programmer/developer and the app's [technology stack](./technology-stack.md) is something you are familiar with, please consider contributing to the project. The team and I are always looking for new contributors. You can refer to the [contribution guildelines](/docs/contribution-guidelines) to start leaving your mark on the project. 

docs/docs/overview/technology-stack.md

@@ -2,4 +2,22 @@
 sidebar_position: 4
 ---
 
-# Technology stack
+# Technology stack
+
+The app is built with the following technologies
+
+## Frontend
+* [Flutter](https://flutter.dev/) for the mobile app
+  * [Riverpod](https://riverpod.dev/) as state management.
+* [SvelteKit](https://kit.svelte.dev/) for the Web.
+
+## Backend
+* [Nest.js](https://nestjs.com/) for the server.
+  * [TypeORM](https://typeorm.io/) for database management.
+* [PostgreSQL](https://www.postgresql.org/) for the database.
+* [Redis](https://redis.io/) for communication between the core server and the microservices.
+* [NGINX](https://www.nginx.com/) for internal communication between containers and load balancing when scaling.
+
+## High level architecture
+
+![Immich Architecture](./img/app-architecture.png)

docs/docs/tutorial-basics/_category_.json

@@ -1,8 +0,0 @@
-{
-  "label": "Tutorial - Basics",
-  "position": 6,
-  "link": {
-    "type": "generated-index",
-    "description": "5 minutes to learn the most important Docusaurus concepts."
-  }
-}

docs/docs/tutorial-basics/congratulations.md

@@ -1,23 +0,0 @@
----
-sidebar_position: 6
----
-
-# Congratulations!
-
-You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
-
-Docusaurus has **much more to offer**!
-
-Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
-
-Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
-
-## What's next?
-
-- Read the [official documentation](https://docusaurus.io/)
-- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
-- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
-- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
-- Add a [search bar](https://docusaurus.io/docs/search)
-- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
-- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)

docs/docs/tutorial-basics/create-a-blog-post.md

@@ -1,34 +0,0 @@
----
-sidebar_position: 3
----
-
-# Create a Blog Post
-
-Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
-
-## Create your first Post
-
-Create a file at `blog/2021-02-28-greetings.md`:
-
-```md title="blog/2021-02-28-greetings.md"
----
-slug: greetings
-title: Greetings!
-authors:
-  - name: Joel Marcey
-    title: Co-creator of Docusaurus 1
-    url: https://github.com/JoelMarcey
-    image_url: https://github.com/JoelMarcey.png
-  - name: Sébastien Lorber
-    title: Docusaurus maintainer
-    url: https://sebastienlorber.com
-    image_url: https://github.com/slorber.png
-tags: [greetings]
----
-
-Congratulations, you have made your first post!
-
-Feel free to play around and edit this post as much you like.
-```
-
-A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).

docs/docs/tutorial-basics/create-a-document.md

@@ -1,57 +0,0 @@
----
-sidebar_position: 2
----
-
-# Create a Document
-
-Documents are **groups of pages** connected through:
-
-- a **sidebar**
-- **previous/next navigation**
-- **versioning**
-
-## Create your first Doc
-
-Create a Markdown file at `docs/hello.md`:
-
-```md title="docs/hello.md"
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
-
-## Configure the Sidebar
-
-Docusaurus automatically **creates a sidebar** from the `docs` folder.
-
-Add metadata to customize the sidebar label and position:
-
-```md title="docs/hello.md" {1-4}
----
-sidebar_label: 'Hi!'
-sidebar_position: 3
----
-
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-It is also possible to create your sidebar explicitly in `sidebars.js`:
-
-```js title="sidebars.js"
-module.exports = {
-  tutorialSidebar: [
-    'intro',
-    // highlight-next-line
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-};
-```

docs/docs/tutorial-basics/create-a-page.md

@@ -1,43 +0,0 @@
----
-sidebar_position: 1
----
-
-# Create a Page
-
-Add **Markdown or React** files to `src/pages` to create a **standalone page**:
-
-- `src/pages/index.js` → `localhost:3000/`
-- `src/pages/foo.md` → `localhost:3000/foo`
-- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
-
-## Create your first React Page
-
-Create a file at `src/pages/my-react-page.js`:
-
-```jsx title="src/pages/my-react-page.js"
-import React from 'react';
-import Layout from '@theme/Layout';
-
-export default function MyReactPage() {
-  return (
-    <Layout>
-      <h1>My React page</h1>
-      <p>This is a React page</p>
-    </Layout>
-  );
-}
-```
-
-A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
-
-## Create your first Markdown Page
-
-Create a file at `src/pages/my-markdown-page.md`:
-
-```mdx title="src/pages/my-markdown-page.md"
-# My Markdown page
-
-This is a Markdown page
-```
-
-A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).

docs/docs/tutorial-basics/deploy-your-site.md

@@ -1,31 +0,0 @@
----
-sidebar_position: 5
----
-
-# Deploy your site
-
-Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
-
-It builds your site as simple **static HTML, JavaScript and CSS files**.
-
-## Build your site
-
-Build your site **for production**:
-
-```bash
-npm run build
-```
-
-The static files are generated in the `build` folder.
-
-## Deploy your site
-
-Test your production build locally:
-
-```bash
-npm run serve
-```
-
-The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
-
-You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).

docs/docs/tutorial-basics/markdown-features.mdx

@@ -1,146 +0,0 @@
----
-sidebar_position: 4
----
-
-# Markdown Features
-
-Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
-
-## Front Matter
-
-Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
-
-```text title="my-doc.md"
-// highlight-start
----
-id: my-doc-id
-title: My document title
-description: My document description
-slug: /my-custom-url
----
-// highlight-end
-
-## Markdown heading
-
-Markdown text with [links](./hello.md)
-```
-
-## Links
-
-Regular Markdown links are supported, using url paths or relative file paths.
-
-```md
-Let's see how to [Create a page](/create-a-page).
-```
-
-```md
-Let's see how to [Create a page](./create-a-page.md).
-```
-
-**Result:** Let's see how to [Create a page](./create-a-page.md).
-
-## Images
-
-Regular Markdown images are supported.
-
-You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
-
-```md
-![Docusaurus logo](/img/docusaurus.png)
-```
-
-![Docusaurus logo](/img/docusaurus.png)
-
-You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
-
-## Code Blocks
-
-Markdown code blocks are supported with Syntax highlighting.
-
-    ```jsx title="src/components/HelloDocusaurus.js"
-    function HelloDocusaurus() {
-        return (
-            <h1>Hello, Docusaurus!</h1>
-        )
-    }
-    ```
-
-```jsx title="src/components/HelloDocusaurus.js"
-function HelloDocusaurus() {
-  return <h1>Hello, Docusaurus!</h1>;
-}
-```
-
-## Admonitions
-
-Docusaurus has a special syntax to create admonitions and callouts:
-
-    :::tip My tip
-
-    Use this awesome feature option
-
-    :::
-
-    :::danger Take care
-
-    This action is dangerous
-
-    :::
-
-:::tip My tip
-
-Use this awesome feature option
-
-:::
-
-:::danger Take care
-
-This action is dangerous
-
-:::
-
-## MDX and React Components
-
-[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
-
-```jsx
-export const Highlight = ({children, color}) => (
-  <span
-    style={{
-      backgroundColor: color,
-      borderRadius: '20px',
-      color: '#fff',
-      padding: '10px',
-      cursor: 'pointer',
-    }}
-    onClick={() => {
-      alert(`You clicked the color ${color} with label ${children}`)
-    }}>
-    {children}
-  </span>
-);
-
-This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
-
-This is <Highlight color="#1877F2">Facebook blue</Highlight> !
-```
-
-export const Highlight = ({children, color}) => (
-  <span
-    style={{
-      backgroundColor: color,
-      borderRadius: '20px',
-      color: '#fff',
-      padding: '10px',
-      cursor: 'pointer',
-    }}
-    onClick={() => {
-      alert(`You clicked the color ${color} with label ${children}`);
-    }}>
-    {children}
-  </span>
-);
-
-This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
-
-This is <Highlight color="#1877F2">Facebook blue</Highlight> !

docs/docs/tutorial-extras/_category_.json

@@ -1,7 +0,0 @@
-{
-  "label": "Tutorial - Extras",
-  "position": 6,
-  "link": {
-    "type": "generated-index"
-  }
-}

docs/docs/tutorial-extras/manage-docs-versions.md

@@ -1,55 +0,0 @@
----
-sidebar_position: 1
----
-
-# Manage Docs Versions
-
-Docusaurus can manage multiple versions of your docs.
-
-## Create a docs version
-
-Release a version 1.0 of your project:
-
-```bash
-npm run docusaurus docs:version 1.0
-```
-
-The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
-
-Your docs now have 2 versions:
-
-- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
-- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
-
-## Add a Version Dropdown
-
-To navigate seamlessly across versions, add a version dropdown.
-
-Modify the `docusaurus.config.js` file:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  themeConfig: {
-    navbar: {
-      items: [
-        // highlight-start
-        {
-          type: 'docsVersionDropdown',
-        },
-        // highlight-end
-      ],
-    },
-  },
-};
-```
-
-The docs version dropdown appears in your navbar:
-
-![Docs Version Dropdown](./img/docsVersionDropdown.png)
-
-## Update an existing version
-
-It is possible to edit versioned docs in their respective folder:
-
-- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
-- `docs/hello.md` updates `http://localhost:3000/docs/next/hello`

docs/docs/tutorial-extras/translate-your-site.md

@@ -1,88 +0,0 @@
----
-sidebar_position: 2
----
-
-# Translate your site
-
-Let's translate `docs/intro.md` to French.
-
-## Configure i18n
-
-Modify `docusaurus.config.js` to add support for the `fr` locale:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'fr'],
-  },
-};
-```
-
-## Translate a doc
-
-Copy the `docs/intro.md` file to the `i18n/fr` folder:
-
-```bash
-mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
-
-cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
-```
-
-Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
-
-## Start your localized site
-
-Start your site on the French locale:
-
-```bash
-npm run start -- --locale fr
-```
-
-Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.
-
-:::caution
-
-In development, you can only use one locale at a same time.
-
-:::
-
-## Add a Locale Dropdown
-
-To navigate seamlessly across languages, add a locale dropdown.
-
-Modify the `docusaurus.config.js` file:
-
-```js title="docusaurus.config.js"
-module.exports = {
-  themeConfig: {
-    navbar: {
-      items: [
-        // highlight-start
-        {
-          type: 'localeDropdown',
-        },
-        // highlight-end
-      ],
-    },
-  },
-};
-```
-
-The locale dropdown now appears in your navbar:
-
-![Locale Dropdown](./img/localeDropdown.png)
-
-## Build your localized site
-
-Build your site for a specific locale:
-
-```bash
-npm run build -- --locale fr
-```
-
-Or build your site to include all the locales at once:
-
-```bash
-npm run build
-```

docs/docs/usage/_category_.json

@@ -1,8 +1,8 @@
 {
-  "label": "How to use the app",
+  "label": "How to use the application",
   "position": 3,
   "link": {
     "type": "generated-index",
-    "description": "5 minutes to learn the most important Docusaurus concepts."
+    "description": "Quick start on how to use the app on mobile and the web"
   }
 }

docs/docs/usage/automatic-backup.md

@@ -0,0 +1,35 @@
+---
+sidebar_position: 2
+---
+
+
+# Automatic Backup
+
+A guide on how the foreground and background automatic backup works.
+
+<img src={require('./img/background-foreground-backup.png').default} width="50%" title="Foreground&Background Backup" />
+
+On iOS, there is only one option for automatic backup 
+  * [**Foreground backup**](#foreground-backup)
+
+On Android, there are two options for automatic backup 
+  * [**Foreground backup**](#foreground-backup) 
+  * [**Background backup**](#background-backup)
+
+## Foreground backup
+
+If foreground backup is enabled: whenever the app is opened or resumed, it will check if any photos or videos in the selected album(s) have yet to be uploaded to the cloud (the remainder count). If there are any, they will be uploaded.
+
+## Background backup
+
+Background backup is only available on Android thanks to the contribution effort of [@zoodyy](https://github.com/zoodyy). 
+
+If background backup is enabled. The app will periodically check if there are any new photos or videos in the selected album(s) to be uploaded to the cloud. If there are, it will upload them to the cloud in the background.
+
+A native Android notification shows up when the background upload is in progress. You can further customize the notification by going to the app's settings.
+
+:::note 
+* The app must be in the background for the backup worker to start running.
+* It is a well-known problem that some Android models are very strict with battery optimization settings, which can cause a problem with the background worker. Please visit [Don't kill my app](https://dontkillmyapp.com/) for a guide on disabling this setting on your phone. 
+* If you reopen the app and the first page you see is the backup page, the counts will reflect the background uploaded result. You have to navigate out of the page and come back to see the updated counts.
+:::

docs/docs/usage/bulk-upload.md

@@ -0,0 +1,75 @@
+---
+sidebar_position: 3
+---
+
+# Bulk Upload (Using the CLI)
+
+You can use the CLI to upload an existing gallery to the Immich server
+
+[Immich CLI Repository](https://github.com/immich-app/CLI)
+
+
+## Requirements
+* Node.js 16 or above
+* Npm
+
+## Installation
+```bash
+npm i -g immich
+```
+
+## Quick Start
+Specify user's credentials, Immich's server address and port, and the directory you would like to upload videos/photos from.
+
+```bash
+immich upload --email testuser@email.com --password password --server http://192.168.1.216:2283/api -d your/target/directory
+```
+
+---
+
+### Parameters
+
+| Parameter        | Description                                                         |
+| ---------------- | ------------------------------------------------------------------- |
+| --yes / -y       | Assume yes on all interactive prompts                               |
+| --delete / -da   | Delete local assets after upload                                    |
+| --email / -e     | User's email                                                        |
+| --password / -pw | User's password                                                     |
+| --server / -s    | Immich's server address                                             |
+| --directory / -d | Directory to upload from                                            |
+| --threads / -t   | Number of threads to use (Default 5)                                |
+| --album/ -al     | Create albums for assets based on the parent folder or a given name |
+
+### Run via Docker
+
+Be aware that as this runs inside a container it mounts your current directory as a volume, and for the -d flag you need to use the path inside the container.
+
+```bash
+docker run -it --rm -v $(pwd):/import ghcr.io/immich-app/immich-cli:latest upload --email testuser@email.com --password password --server http://192.168.1.216:2283/api -d /import
+```
+
+Optionally, you can create an alias:
+
+```bash
+alias immich="docker run -it --rm -v $(pwd):/import ghcr.io/immich-app/immich-cli:latest"
+immich upload --email testuser@email.com --password password --server http://192.168.1.216:2283/api -d /import
+```
+
+### Run from source
+
+```bash title="Clone Repository"
+git clone https://github.com/alextran1502/immich-cli
+```
+
+
+```bash title="Install dependencies"
+npm install
+```
+
+```bash title="Build the project"
+npm run build
+```
+
+```bash title="Run the command"
+node bin/index.js upload --email testuser@email.com --password password --server http://192.168.1.216:2283/api -d your/target/directory
+```

docs/docs/usage/post-installation.md

@@ -0,0 +1,57 @@
+---
+sidebar_position: 1
+---
+
+# Post Installation
+
+This page contains information about what to do after you have installed the application.
+
+## Step 1 - Download the mobile app
+
+The mobile app can be downloaded from
+
+- [Google Play Store](https://play.google.com/store/apps/details?id=app.alextran.immich)
+- [Apple App Store](https://apps.apple.com/us/app/immich/id1613945652)
+- [F-Droid](https://f-droid.org/packages/app.alextran.immich)
+
+## Step 2 - Register the admin user
+
+The first user to register will be the admin user. The admin user will be able to add other users to the application.
+
+To register for the admin user, access the web application at `http://<machine-ip-address>:2283` and click on the **Getting Started** button.
+
+<img src={require('./img/admin-registration-form.png').default} width="500" title="Admin Registration" />
+
+Follow the prompts to register as the admin user and log in to the application.
+
+## Step 3 - Create a new user (optional)
+
+If you have a family member who wants to use the application, you can create a new account. The default password is `password`, and the user can change their password after logging in to the application for the first time.
+
+<img src={require('./img/create-new-user.png').default} title="Admin Registration" />
+
+## Step 4 - Access the mobile app
+
+Login to the mobile app with the server endpoint URL at `http://<machine-ip-address>:2283/api`
+
+<img src={require('./img/sign-in-phone.jpeg').default} width="50%" title="Mobile App Sign In" />
+
+## Step 5 - Back up your photos and videos
+
+Navigate to the backup screen by clicking on the cloud icon in the top right corner of the screen.
+
+<img src={require('./img/backup-header.png').default} width="50%" title="Backup button" />
+
+You can select which album(s) you want to back up to the Immich server from the backup screen.
+
+<img src={require('./img/album-selection.png').default} width="50%" title="Backup button" />
+
+Scroll down to the bottom and press "**Start Backup**" to start the backup process. 
+
+You can also enable auto foreground or background backup (only on Android). For more information about the app mechanism, please visit the next pages.
+
+
+:::tip Application Mechanism
+#### [Foreground and background backup](/docs/usage/automatic-backup)
+#### [Bulk upload (using the CLI)](/docs/usage/bulk-upload)
+:::

docs/docs/usage/update.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 4
+---
+
+# Update the application
+
+If you are using Docker Compose, update the application use the following commands in the directory where the `docker-compose.yml` file is located:
+
+```bash title="Update Immich"
+docker-compose pull && docker-compose up -d # Or `docker compose`
+```

docs/docusaurus.config.js

@@ -6,9 +6,9 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "Immich Documentation",
+  title: "Immich",
   tagline:
-    "Self-hosted photo and video backup solution directly from your mobile phone",
+    "High performance self-hosted photo and video backup solution directly from your mobile phone",
   url: "https://documentation.immich.app",
   baseUrl: "/",
   onBrokenLinks: "throw",
@@ -34,19 +34,18 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
+          showLastUpdateAuthor: true,
+          showLastUpdateTime: true,
+
           sidebarPath: require.resolve("./sidebars.js"),
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl:
-            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
-        },
-        blog: {
-          showReadingTime: true,
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
+          editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
         },
+        // blog: {
+        //   showReadingTime: true,
+        //   editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
+        // },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
         },
@@ -57,16 +56,23 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      announcementBar: {
+        id: "site_announcement_immich",
+        content: `⚠️ The project is under <strong>very active</strong> development. Expect bugs and changes. Do not use as a <strong>single source</strong> to store of your photos and videos!`,
+        backgroundColor: "#593f00",
+        textColor: "#ffefc9",
+        isCloseable: false,
+      },
       docs: {
         sidebar: {
           autoCollapseCategories: false,
         },
       },
       navbar: {
-        title: "Immich",
         logo: {
           alt: "Immich University Logo",
-          src: "img/logo.png",
+          src: "img/color-logo.png",
+          srcDark: "img/logo.png",
         },
         items: [
           {
@@ -74,7 +80,7 @@ const config = {
             position: "right",
             label: "Documentation",
           },
-          { to: "/blog", label: "Blog", position: "right" },
+          // { to: "/blog", label: "Blog", position: "right" },
           {
             href: "https://github.com/immich-app/immich",
             label: "GitHub",
@@ -83,7 +89,7 @@ const config = {
         ],
       },
       footer: {
-        style: "dark",
+        style: "light",
         links: [
           {
             title: "Overview",
@@ -121,7 +127,7 @@ const config = {
             ],
           },
         ],
-        copyright: `Alex Tran - For my family`,
+        copyright: `Immich is available as open source under the terms of the MIT License.`,
       },
       prism: {
         theme: lightCodeTheme,

docs/package-lock.json

@@ -10356,31 +10356,20 @@
       }
     },
     "node_modules/serve-handler": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.3.tgz",
-      "integrity": "sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==",
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
+      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
       "dependencies": {
         "bytes": "3.0.0",
         "content-disposition": "0.5.2",
         "fast-url-parser": "1.1.3",
         "mime-types": "2.1.18",
-        "minimatch": "3.0.4",
+        "minimatch": "3.1.2",
         "path-is-inside": "1.0.2",
         "path-to-regexp": "2.2.1",
         "range-parser": "1.2.0"
       }
     },
-    "node_modules/serve-handler/node_modules/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/serve-handler/node_modules/path-to-regexp": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
@@ -19878,28 +19867,20 @@
       }
     },
     "serve-handler": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.3.tgz",
-      "integrity": "sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==",
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
+      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
       "requires": {
         "bytes": "3.0.0",
         "content-disposition": "0.5.2",
         "fast-url-parser": "1.1.3",
         "mime-types": "2.1.18",
-        "minimatch": "3.0.4",
+        "minimatch": "3.1.2",
         "path-is-inside": "1.0.2",
         "path-to-regexp": "2.2.1",
         "range-parser": "1.2.0"
       },
       "dependencies": {
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        },
         "path-to-regexp": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",

docs/src/css/custom.css

@@ -4,10 +4,11 @@
  * work well for content-centric websites.
  */
 
-@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Snowburst+One&display=swap");
 
 html {
-  font-family: "Work Sans", sans-serif;
+  font-family: "Overpass", sans-serif;
 }
 
 /* You can override the default Infima variables here. */

docs/src/pages/index.module.css

@@ -5,10 +5,13 @@
 
 .heroBanner {
   padding: 4rem 0;
-  text-align: center;
   position: relative;
   overflow: hidden;
-  height: 40rem;
+  text-align: center;
+  background: #606c88;
+  background: -webkit-linear-gradient(to top, #4e5362, #606c88);
+  background: linear-gradient(to top, #4e5362, #606c88);
+  color: whitesmoke;
 }
 
 @media screen and (max-width: 996px) {
@@ -22,3 +25,32 @@
   align-items: center;
   justify-content: center;
 }
+
+.buttonsRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 4rem;
+  gap: 1rem;
+}
+
+.installButton {
+  background-color: #adcbfa;
+  color: #000000;
+  border-radius: 50px;
+}
+
+.installButton:hover {
+  color: #000000;
+}
+
+.introButton {
+  background-color: #e6ebf5;
+  color: #000000;
+  border-radius: 50px;
+}
+
+.introButton:hover {
+  color: #000000;
+}

docs/src/pages/index.tsx

@@ -12,16 +12,37 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
+        <h1
+          className="hero__title"
+          style={{
+            fontFamily: "Snowburst One",
+            color: "#adcbfa",
+          }}
+        >
+          IMMICH
+        </h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="docs/installation/requirements"
-          >
-            Getting Started
-          </Link>
+        <div className={styles.buttonsRow}>
+          <div className={styles.buttons}>
+            <Link
+              className={clsx("button button--lg", styles.introButton)}
+              to="docs/overview/introduction"
+            >
+              Introduction
+            </Link>
+          </div>
+
+          <div className={styles.buttons}>
+            <Link
+              className={clsx("button button--lg", styles.installButton)}
+              to="docs/installation/requirements"
+            >
+              Installation
+            </Link>
+          </div>
         </div>
+
+        <img src="/img/immich-screenshots.webp" alt="logo" />
       </div>
     </header>
   );
@@ -31,13 +52,11 @@ export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={`${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      title={`Home`}
+      description="immich Self-hosted photo and video backup solution directly from your mobile phone "
     >
       <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
+      <main>{/* <HomepageFeatures /> */}</main>
     </Layout>
   );
 }

docs/static/img/cloud-done.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="#4250af"><path d="M12.65 39q-4 0-6.825-2.825T3 29.3q0-3.7 2.5-6.475Q8 20.05 11.6 19.7q.75-4.65 4.275-7.65 3.525-3 8.225-3 5.2 0 8.825 3.775Q36.55 16.6 36.55 21.9v1.9h.6q3.3-.1 5.575 2.075Q45 28.05 45 31.4q0 3.1-2.25 5.35Q40.5 39 37.4 39Zm7.95-6.2q.3 0 .55-.125.25-.125.5-.325l8.95-9q.3-.3.325-.75.025-.45-.325-.75-.3-.35-.75-.35t-.75.35l-8.45 8.4-4.05-4.05q-.3-.25-.75-.275-.45-.025-.75.275-.35.35-.35.8 0 .45.35.75l4.55 4.6q.2.2.45.325t.5.125Zm-7.95 3.95H37.4q2.2 0 3.775-1.575Q42.75 33.6 42.75 31.4t-1.575-3.75Q39.6 26.1 37.4 26.1h-3.1v-4.2q0-4.4-3.025-7.5-3.025-3.1-7.375-3.1-4.3 0-7.35 3.1t-3.05 7.5h-1q-2.95 0-5.1 2.15-2.15 2.15-2.15 5.3 0 3.1 2.175 5.25t5.225 2.15ZM24 24Z"/></svg>

docs/static/img/cloud-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="#4250af"><path d="m42.15 37.1-1.8-1.8q1.15-.8 1.775-1.8t.625-2.4q0-2.1-1.525-3.625T37.55 25.95H34.3V21.9q0-4.3-3.025-7.275-3.025-2.975-7.325-2.975-1.4 0-2.925.425T18.2 13.45l-1.6-1.65q1.8-1.3 3.6-1.85t3.7-.55q5.25 0 8.95 3.7 3.7 3.7 3.7 8.9v1.75h.6q3.3-.05 5.575 2.05Q45 27.9 45 31.1q0 1.55-.675 3.2-.675 1.65-2.175 2.8Zm-1.75 6.55-5-5.05H12.55q-4.05 0-6.8-2.725T3 29.1q0-3.85 2.525-6.4 2.525-2.55 6.075-2.9.05-.75.375-1.875T12.8 16L5.55 8.75q-.3-.3-.325-.775Q5.2 7.5 5.55 7.15q.35-.35.8-.35.45 0 .8.35l34.9 34.9q.3.3.325.775.025.475-.325.825-.35.35-.825.35t-.825-.35Zm-27.85-7.3h20.6L14.6 17.8q-.55.85-.825 1.975Q13.5 20.9 13.5 22h-.95q-3.05 0-5.175 2T5.25 29q0 3.05 2.125 5.2 2.125 2.15 5.175 2.15ZM29.3 24.4ZM23.85 27Z"/></svg>

docs/static/img/cloud.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="#4250af"><path d="M12.65 39q-4 0-6.825-2.825T3 29.3q0-3.65 2.45-6.45 2.45-2.8 6.15-3.15.75-4.65 4.275-7.65 3.525-3 8.225-3 5.2 0 8.825 3.775Q36.55 16.6 36.55 21.9v1.9h.6q3.3-.1 5.575 2.075Q45 28.05 45 31.4q0 3.1-2.25 5.35Q40.5 39 37.4 39Zm0-2.25H37.4q2.2 0 3.775-1.575Q42.75 33.6 42.75 31.4t-1.575-3.75Q39.6 26.1 37.4 26.1h-3.1v-4.2q0-4.4-3.025-7.5-3.025-3.1-7.375-3.1-4.3 0-7.35 3.1t-3.05 7.5h-.95q-3.05 0-5.175 2.15t-2.125 5.3q0 3.05 2.175 5.225t5.225 2.175ZM24 24Z"/></svg>

mobile/android/app/src/main/kotlin/com/example/mobile/BackupWorker.kt

@@ -50,6 +50,7 @@ class BackupWorker(ctx: Context, params: WorkerParameters) : ListenableWorker(ct
     private var timeBackupStarted: Long = 0L
     private var notificationBuilder: NotificationCompat.Builder? = null
     private var notificationDetailBuilder: NotificationCompat.Builder? = null
+    private var fgFuture: ListenableFuture<Void>? = null
 
     override fun startWork(): ListenableFuture<ListenableWorker.Result> {
 
@@ -112,6 +113,7 @@ class BackupWorker(ctx: Context, params: WorkerParameters) : ListenableWorker(ct
         Handler(Looper.getMainLooper()).postAtFrontOfQueue {
             backgroundChannel.invokeMethod("systemStop", null)
         }
+        waitOnSetForegroundAsync()
         // cannot await/get(block) on resolvableFuture as its already cancelled (would throw CancellationException)
         // instead, wait for 5 seconds until forcefully stopping backup work
         Handler(Looper.getMainLooper()).postDelayed({
@@ -119,15 +121,27 @@ class BackupWorker(ctx: Context, params: WorkerParameters) : ListenableWorker(ct
         }, 5000)
     }
 
+    private fun waitOnSetForegroundAsync() {
+        val fgFuture = this.fgFuture
+        if (fgFuture != null && !fgFuture.isCancelled() && !fgFuture.isDone()) {
+            try {
+                fgFuture.get(500, TimeUnit.MILLISECONDS)
+            }
+            catch (e: Exception) {
+                // ignored, there is nothing to be done
+            }
+        }
+    }
 
     private fun stopEngine(result: Result?) {
+        clearBackgroundNotification()
+        engine?.destroy()
+        engine = null
         if (result != null) {
             Log.d(TAG, "stopEngine result=${result}")
             resolvableFuture.set(result)
         }
-        engine?.destroy()
-        engine = null
-        clearBackgroundNotification()
+        waitOnSetForegroundAsync()
     }
 
     override fun onMethodCall(call: MethodCall, r: MethodChannel.Result) {
@@ -207,8 +221,8 @@ class BackupWorker(ctx: Context, params: WorkerParameters) : ListenableWorker(ct
 
     private fun showInfo(notification: Notification, isDetail: Boolean = false) {
         val id = if(isDetail) NOTIFICATION_DETAIL_ID else NOTIFICATION_ID
-        if (isIgnoringBatteryOptimizations) {
-            setForegroundAsync(ForegroundInfo(id, notification))
+        if (isIgnoringBatteryOptimizations && !isDetail) {
+            fgFuture = setForegroundAsync(ForegroundInfo(id, notification))
         } else {
             notificationManager.notify(id, notification)
         }

mobile/android/fastlane/Fastfile

@@ -35,8 +35,8 @@ platform :android do
       task: 'bundle', 
       build_type: 'Release',
       properties: {
-        "android.injected.version.code" => 52,
-        "android.injected.version.name" => "1.33.0",
+        "android.injected.version.code" => 54,
+        "android.injected.version.name" => "1.35.0",
       }
     )
     upload_to_play_store(skip_upload_apk: true, skip_upload_images: true, skip_upload_screenshots: true, aab: '../build/app/outputs/bundle/release/app-release.aab')

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

@@ -0,0 +1,6 @@
+* Reduce app startup time by loading Hive boxes in parallel
+* Throttle detail progress notifications & wait on foregroundInfo
+* Throttle all background backup progress notifications 
+* Add selected assets to album
+* Enhanced vertical swiping motion in image viewer
+* Enhance the bottom app bar on the home page

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

@@ -0,0 +1 @@
+* Local assets are now shown in the app

mobile/assets/i18n/en-US.json

@@ -171,5 +171,11 @@
   "version_announcement_overlay_text_3": " and ensure your docker-compose and .env setup is up-to-date to prevent any misconfigurations, especially if you use WatchTower or any mechanism that handles updating your server application automatically.",
   "version_announcement_overlay_title": "New Server Version Available \uD83C\uDF89",
   "experimental_settings_title": "Experimental",
-  "experimental_settings_subtitle": "Use at your own risk!"
+  "experimental_settings_subtitle": "Use at your own risk!",
+  "control_bottom_app_bar_add_to_album": "Add to album",
+  "home_page_add_to_album_success": "Added {added} assets to album {album}.",
+  "home_page_add_to_album_conflicts": "Added {added} assets to album {album}. {failed} assets are already in the album.",
+  "control_bottom_app_bar_album_info": "{} items",
+  "control_bottom_app_bar_album_info_shared": "{} items · Shared",
+  "control_bottom_app_bar_create_new_album": "Create new album"
 }

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 = 62;
+				CURRENT_PROJECT_VERSION = 68;
 				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 = 62;
+				CURRENT_PROJECT_VERSION = 68;
 				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 = 62;
+				CURRENT_PROJECT_VERSION = 68;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;

mobile/ios/Runner/Info.plist

@@ -17,11 +17,11 @@
     <key>CFBundlePackageType</key>
     <string>APPL</string>
     <key>CFBundleShortVersionString</key>
-    <string>1.30.1</string>
+    <string>1.34.0</string>
     <key>CFBundleSignature</key>
     <string>????</string>
     <key>CFBundleVersion</key>
-    <string>62</string>
+    <string>68</string>
     <key>LSRequiresIPhoneOS</key>
     <true />
     <key>MGLMapboxMetricsEnabledSettingShownInApp</key>

mobile/ios/fastlane/Fastfile

@@ -19,7 +19,7 @@ platform :ios do
   desc "iOS Beta"
   lane :beta do
     increment_version_number(
-      version_number: "1.33.0"
+      version_number: "1.35.0"
     )
     increment_build_number(
       build_number: latest_testflight_build_number + 1,

mobile/ios/fastlane/report.xml

@@ -5,32 +5,32 @@
     
     
       
-      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000209">
+      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000304">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="1: increment_version_number" time="0.78333">
+      <testcase classname="fastlane.lanes" name="1: increment_version_number" time="0.606546">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="2: latest_testflight_build_number" time="3.947588">
+      <testcase classname="fastlane.lanes" name="2: latest_testflight_build_number" time="3.706234">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="3: increment_build_number" time="0.505399">
+      <testcase classname="fastlane.lanes" name="3: increment_build_number" time="0.657686">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="4: build_app" time="80.954627">
+      <testcase classname="fastlane.lanes" name="4: build_app" time="68.78265">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="5: upload_to_testflight" time="58.295965">
+      <testcase classname="fastlane.lanes" name="5: upload_to_testflight" time="60.883182">
         
       </testcase>
     

mobile/lib/main.dart

@@ -28,17 +28,21 @@ import 'constants/hive_box.dart';
 
 void main() async {
   await Hive.initFlutter();
-
   Hive.registerAdapter(HiveSavedLoginInfoAdapter());
   Hive.registerAdapter(HiveBackupAlbumsAdapter());
   Hive.registerAdapter(HiveDuplicatedAssetsAdapter());
 
-  await Hive.openBox(userInfoBox);
-  await Hive.openBox<HiveSavedLoginInfo>(hiveLoginInfoBox);
-  await Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox);
-  await Hive.openBox(hiveGithubReleaseInfoBox);
-  await Hive.openBox(userSettingInfoBox);
-  await Hive.openBox<HiveDuplicatedAssets>(duplicatedAssetsBox);
+  await Future.wait([
+    Hive.openBox(userInfoBox),
+    Hive.openBox<HiveSavedLoginInfo>(hiveLoginInfoBox),
+    Hive.openBox(hiveGithubReleaseInfoBox),
+    Hive.openBox(userSettingInfoBox),
+    if (!Platform.isAndroid) Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox),
+    if (!Platform.isAndroid)
+      Hive.openBox<HiveDuplicatedAssets>(duplicatedAssetsBox),
+    if (!Platform.isAndroid) Hive.openBox(backgroundBackupInfoBox),
+    EasyLocalization.ensureInitialized(),
+  ]);
 
   SystemChrome.setSystemUIOverlayStyle(
     const SystemUiOverlayStyle(
@@ -46,8 +50,6 @@ void main() async {
     ),
   );
 
-  await EasyLocalization.ensureInitialized();
-
   if (kReleaseMode && Platform.isAndroid) {
     try {
       await FlutterDisplayMode.setHighRefreshRate();
@@ -86,8 +88,8 @@ class ImmichAppState extends ConsumerState<ImmichApp>
         var isAuthenticated = ref.watch(authenticationProvider).isAuthenticated;
 
         if (isAuthenticated) {
+          ref.read(backupProvider.notifier).resumeBackup();
           ref.read(backgroundServiceProvider).resumeServiceIfEnabled();
-          ref.watch(backupProvider.notifier).resumeBackup();
           ref.watch(assetProvider.notifier).getAllAsset();
           ref.watch(serverInfoProvider.notifier).getServerVersion();
         }

mobile/lib/modules/album/models/asset_selection_page_result.model.dart

@@ -1,10 +1,9 @@
 import 'package:collection/collection.dart';
-
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 
 class AssetSelectionPageResult {
-  final Set<AssetResponseDto> selectedNewAsset;
-  final Set<AssetResponseDto> selectedAdditionalAsset;
+  final Set<Asset> selectedNewAsset;
+  final Set<Asset> selectedAdditionalAsset;
   final bool isAlbumExist;
 
   AssetSelectionPageResult({
@@ -14,8 +13,8 @@ class AssetSelectionPageResult {
   });
 
   AssetSelectionPageResult copyWith({
-    Set<AssetResponseDto>? selectedNewAsset,
-    Set<AssetResponseDto>? selectedAdditionalAsset,
+    Set<Asset>? selectedNewAsset,
+    Set<Asset>? selectedAdditionalAsset,
     bool? isAlbumExist,
   }) {
     return AssetSelectionPageResult(

mobile/lib/modules/album/models/asset_selection_state.model.dart

@@ -1,12 +1,11 @@
 import 'package:collection/collection.dart';
-
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 
 class AssetSelectionState {
   final Set<String> selectedMonths;
-  final Set<AssetResponseDto> selectedNewAssetsForAlbum;
-  final Set<AssetResponseDto> selectedAdditionalAssetsForAlbum;
-  final Set<AssetResponseDto> selectedAssetsInAlbumViewer;
+  final Set<Asset> selectedNewAssetsForAlbum;
+  final Set<Asset> selectedAdditionalAssetsForAlbum;
+  final Set<Asset> selectedAssetsInAlbumViewer;
   final bool isMultiselectEnable;
 
   /// Indicate the asset selection page is navigated from existing album
@@ -22,9 +21,9 @@ class AssetSelectionState {
 
   AssetSelectionState copyWith({
     Set<String>? selectedMonths,
-    Set<AssetResponseDto>? selectedNewAssetsForAlbum,
-    Set<AssetResponseDto>? selectedAdditionalAssetsForAlbum,
-    Set<AssetResponseDto>? selectedAssetsInAlbumViewer,
+    Set<Asset>? selectedNewAssetsForAlbum,
+    Set<Asset>? selectedAdditionalAssetsForAlbum,
+    Set<Asset>? selectedAssetsInAlbumViewer,
     bool? isMultiselectEnable,
     bool? isAlbumExist,
   }) {

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

@@ -1,6 +1,7 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/album/services/album.service.dart';
 import 'package:immich_mobile/modules/album/services/album_cache.service.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:openapi/api.dart';
 
 class AlbumNotifier extends StateNotifier<List<AlbumResponseDto>> {
@@ -13,7 +14,6 @@ class AlbumNotifier extends StateNotifier<List<AlbumResponseDto>> {
   }
 
   getAllAlbums() async {
-
     if (await _albumCacheService.isValid() && state.isEmpty) {
       state = await _albumCacheService.get();
     }
@@ -34,7 +34,7 @@ class AlbumNotifier extends StateNotifier<List<AlbumResponseDto>> {
 
   Future<AlbumResponseDto?> createAlbum(
     String albumTitle,
-    Set<AssetResponseDto> assets,
+    Set<Asset> assets,
   ) async {
     AlbumResponseDto? album =
         await _albumService.createAlbum(albumTitle, assets, []);

mobile/lib/modules/album/providers/asset_selection.provider.dart

@@ -1,7 +1,6 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/album/models/asset_selection_state.model.dart';
-
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 
 class AssetSelectionNotifier extends StateNotifier<AssetSelectionState> {
   AssetSelectionNotifier()
@@ -22,15 +21,15 @@ class AssetSelectionNotifier extends StateNotifier<AssetSelectionState> {
 
   void removeAssetsInMonth(
     String removedMonth,
-    List<AssetResponseDto> assetsInMonth,
+    List<Asset> assetsInMonth,
   ) {
-    Set<AssetResponseDto> currentAssetList = state.selectedNewAssetsForAlbum;
+    Set<Asset> currentAssetList = state.selectedNewAssetsForAlbum;
     Set<String> currentMonthList = state.selectedMonths;
 
     currentMonthList
         .removeWhere((selectedMonth) => selectedMonth == removedMonth);
 
-    for (AssetResponseDto asset in assetsInMonth) {
+    for (Asset asset in assetsInMonth) {
       currentAssetList.removeWhere((e) => e.id == asset.id);
     }
 
@@ -40,7 +39,7 @@ class AssetSelectionNotifier extends StateNotifier<AssetSelectionState> {
     );
   }
 
-  void addAdditionalAssets(List<AssetResponseDto> assets) {
+  void addAdditionalAssets(List<Asset> assets) {
     state = state.copyWith(
       selectedAdditionalAssetsForAlbum: {
         ...state.selectedAdditionalAssetsForAlbum,
@@ -49,7 +48,7 @@ class AssetSelectionNotifier extends StateNotifier<AssetSelectionState> {
     );
   }
 
-  void addAllAssetsInMonth(String month, List<AssetResponseDto> assetsInMonth) {
+  void addAllAssetsInMonth(String month, List<Asset> assetsInMonth) {
     state = state.copyWith(
       selectedMonths: {...state.selectedMonths, month},
       selectedNewAssetsForAlbum: {
@@ -59,7 +58,7 @@ class AssetSelectionNotifier extends StateNotifier<AssetSelectionState> {
     );
   }
 
-  void addNewAssets(List<AssetResponseDto> assets) {
+  void addNewAssets(List<Asset> assets) {
     state = state.copyWith(
       selectedNewAssetsForAlbum: {
         ...state.selectedNewAssetsForAlbum,
@@ -68,20 +67,20 @@ class AssetSelectionNotifier extends StateNotifier<AssetSelectionState> {
     );
   }
 
-  void removeSelectedNewAssets(List<AssetResponseDto> assets) {
-    Set<AssetResponseDto> currentList = state.selectedNewAssetsForAlbum;
+  void removeSelectedNewAssets(List<Asset> assets) {
+    Set<Asset> currentList = state.selectedNewAssetsForAlbum;
 
-    for (AssetResponseDto asset in assets) {
+    for (Asset asset in assets) {
       currentList.removeWhere((e) => e.id == asset.id);
     }
 
     state = state.copyWith(selectedNewAssetsForAlbum: currentList);
   }
 
-  void removeSelectedAdditionalAssets(List<AssetResponseDto> assets) {
-    Set<AssetResponseDto> currentList = state.selectedAdditionalAssetsForAlbum;
+  void removeSelectedAdditionalAssets(List<Asset> assets) {
+    Set<Asset> currentList = state.selectedAdditionalAssetsForAlbum;
 
-    for (AssetResponseDto asset in assets) {
+    for (Asset asset in assets) {
       currentList.removeWhere((e) => e.id == asset.id);
     }
 
@@ -109,7 +108,7 @@ class AssetSelectionNotifier extends StateNotifier<AssetSelectionState> {
     );
   }
 
-  void addAssetsInAlbumViewer(List<AssetResponseDto> assets) {
+  void addAssetsInAlbumViewer(List<Asset> assets) {
     state = state.copyWith(
       selectedAssetsInAlbumViewer: {
         ...state.selectedAssetsInAlbumViewer,
@@ -118,10 +117,10 @@ class AssetSelectionNotifier extends StateNotifier<AssetSelectionState> {
     );
   }
 
-  void removeAssetsInAlbumViewer(List<AssetResponseDto> assets) {
-    Set<AssetResponseDto> currentList = state.selectedAssetsInAlbumViewer;
+  void removeAssetsInAlbumViewer(List<Asset> assets) {
+    Set<Asset> currentList = state.selectedAssetsInAlbumViewer;
 
-    for (AssetResponseDto asset in assets) {
+    for (Asset asset in assets) {
       currentList.removeWhere((e) => e.id == asset.id);
     }
 

mobile/lib/modules/album/providers/shared_album.provider.dart

@@ -2,10 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/album/services/album.service.dart';
 import 'package:immich_mobile/modules/album/services/album_cache.service.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:openapi/api.dart';
 
 class SharedAlbumNotifier extends StateNotifier<List<AlbumResponseDto>> {
-  SharedAlbumNotifier(this._sharedAlbumService, this._sharedAlbumCacheService) : super([]);
+  SharedAlbumNotifier(this._sharedAlbumService, this._sharedAlbumCacheService)
+      : super([]);
 
   final AlbumService _sharedAlbumService;
   final SharedAlbumCacheService _sharedAlbumCacheService;
@@ -16,7 +18,7 @@ class SharedAlbumNotifier extends StateNotifier<List<AlbumResponseDto>> {
 
   Future<AlbumResponseDto?> createSharedAlbum(
     String albumName,
-    Set<AssetResponseDto> assets,
+    Set<Asset> assets,
     List<String> sharedUserIds,
   ) async {
     try {

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

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:flutter/foundation.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/providers/api.provider.dart';
 import 'package:immich_mobile/shared/services/api.service.dart';
 import 'package:openapi/api.dart';
@@ -29,7 +30,7 @@ class AlbumService {
 
   Future<AlbumResponseDto?> createAlbum(
     String albumName,
-    Set<AssetResponseDto> assets,
+    Iterable<Asset> assets,
     List<String> sharedUserIds,
   ) async {
     try {
@@ -46,6 +47,31 @@ class AlbumService {
     }
   }
 
+  /*
+   * Creates names like Untitled, Untitled (1), Untitled (2), ...
+   */
+  String _getNextAlbumName(List<AlbumResponseDto>? albums) {
+    const baseName = "Untitled";
+
+    if (albums != null) {
+      for (int round = 0; round < albums.length; round++) {
+        final proposedName = "$baseName${round == 0 ? "" : " ($round)"}";
+
+        if (albums.where((a) => a.albumName == proposedName).isEmpty) {
+          return proposedName;
+        }
+      }
+    }
+    return baseName;
+  }
+
+  Future<AlbumResponseDto?> createAlbumWithGeneratedName(
+    Iterable<Asset> assets,
+  ) async {
+    return createAlbum(
+        _getNextAlbumName(await getAlbums(isShared: false)), assets, []);
+  }
+
   Future<AlbumResponseDto?> getAlbumDetail(String albumId) async {
     try {
       return await _apiService.albumApi.getAlbumInfo(albumId);
@@ -55,8 +81,8 @@ class AlbumService {
     }
   }
 
-  Future<bool> addAdditionalAssetToAlbum(
-    Set<AssetResponseDto> assets,
+  Future<AddAssetsResponseDto?> addAdditionalAssetToAlbum(
+    Iterable<Asset> assets,
     String albumId,
   ) async {
     try {
@@ -64,10 +90,10 @@ class AlbumService {
         albumId,
         AddAssetsDto(assetIds: assets.map((asset) => asset.id).toList()),
       );
-      return result != null;
+      return result;
     } catch (e) {
       debugPrint("Error addAdditionalAssetToAlbum  ${e.toString()}");
-      return false;
+      return null;
     }
   }
 

mobile/lib/modules/album/ui/album_viewer_thumbnail.dart

@@ -1,18 +1,15 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.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/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/utils/image_url_builder.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/immich_image.dart';
 
 class AlbumViewerThumbnail extends HookConsumerWidget {
-  final AssetResponseDto asset;
-  final List<AssetResponseDto> assetList;
+  final Asset asset;
+  final List<Asset> assetList;
   final bool showStorageIndicator;
 
   const AlbumViewerThumbnail({
@@ -24,8 +21,6 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    var box = Hive.box(userInfoBox);
-    var thumbnailRequestUrl = getThumbnailUrl(asset);
     var deviceId = ref.watch(authenticationProvider).deviceId;
     final selectedAssetsInAlbumViewer =
         ref.watch(assetSelectionProvider).selectedAssetsInAlbumViewer;
@@ -120,27 +115,7 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
     _buildThumbnailImage() {
       return Container(
         decoration: BoxDecoration(border: drawBorderColor()),
-        child: CachedNetworkImage(
-          cacheKey: asset.id,
-          width: 300,
-          height: 300,
-          memCacheHeight: 200,
-          fit: BoxFit.cover,
-          imageUrl: thumbnailRequestUrl,
-          httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-          fadeInDuration: const Duration(milliseconds: 250),
-          progressIndicatorBuilder: (context, url, downloadProgress) =>
-              Transform.scale(
-            scale: 0.2,
-            child: CircularProgressIndicator(value: downloadProgress.progress),
-          ),
-          errorWidget: (context, url, error) {
-            return Icon(
-              Icons.image_not_supported_outlined,
-              color: Theme.of(context).primaryColor,
-            );
-          },
-        ),
+        child: ImmichImage(asset, width: 300, height: 300),
       );
     }
 
@@ -167,7 +142,7 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
         children: [
           _buildThumbnailImage(),
           if (showStorageIndicator) _buildAssetStoreLocationIcon(),
-          if (asset.type != AssetTypeEnum.IMAGE) _buildVideoLabel(),
+          if (!asset.isImage) _buildVideoLabel(),
           if (isMultiSelectionEnable) _buildAssetSelectionIcon(),
         ],
       ),

mobile/lib/modules/album/ui/asset_grid_by_month.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/album/ui/selection_thumbnail_image.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 
 class AssetGridByMonth extends HookConsumerWidget {
-  final List<AssetResponseDto> assetGroup;
+  final List<Asset> assetGroup;
   const AssetGridByMonth({Key? key, required this.assetGroup})
       : super(key: key);
   @override

mobile/lib/modules/album/ui/month_group_title.dart

@@ -2,11 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 
 class MonthGroupTitle extends HookConsumerWidget {
   final String month;
-  final List<AssetResponseDto> assetGroup;
+  final List<Asset> assetGroup;
 
   const MonthGroupTitle({
     Key? key,

mobile/lib/modules/album/ui/selection_thumbnail_image.dart

@@ -1,29 +1,24 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.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/album/providers/asset_selection.provider.dart';
-import 'package:immich_mobile/utils/image_url_builder.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/immich_image.dart';
 
 class SelectionThumbnailImage extends HookConsumerWidget {
-  final AssetResponseDto asset;
+  final Asset asset;
 
   const SelectionThumbnailImage({Key? key, required this.asset})
       : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    var box = Hive.box(userInfoBox);
-    var thumbnailRequestUrl = getThumbnailUrl(asset);
     var selectedAsset =
         ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum;
     var newAssetsForAlbum =
         ref.watch(assetSelectionProvider).selectedAdditionalAssetsForAlbum;
     var isAlbumExist = ref.watch(assetSelectionProvider).isAlbumExist;
 
-    Widget _buildSelectionIcon(AssetResponseDto asset) {
+    Widget _buildSelectionIcon(Asset asset) {
       var isSelected = selectedAsset.map((item) => item.id).contains(asset.id);
       var isNewlySelected =
           newAssetsForAlbum.map((item) => item.id).contains(asset.id);
@@ -110,30 +105,7 @@ class SelectionThumbnailImage extends HookConsumerWidget {
         children: [
           Container(
             decoration: BoxDecoration(border: drawBorderColor()),
-            child: CachedNetworkImage(
-              cacheKey: asset.id,
-              width: 150,
-              height: 150,
-              memCacheHeight: asset.type == AssetTypeEnum.IMAGE ? 150 : 150,
-              fit: BoxFit.cover,
-              imageUrl: thumbnailRequestUrl,
-              httpHeaders: {
-                "Authorization": "Bearer ${box.get(accessTokenKey)}"
-              },
-              fadeInDuration: const Duration(milliseconds: 250),
-              progressIndicatorBuilder: (context, url, downloadProgress) =>
-                  Transform.scale(
-                scale: 0.2,
-                child:
-                    CircularProgressIndicator(value: downloadProgress.progress),
-              ),
-              errorWidget: (context, url, error) {
-                return Icon(
-                  Icons.image_not_supported_outlined,
-                  color: Theme.of(context).primaryColor,
-                );
-              },
-            ),
+            child: ImmichImage(asset, width: 150, height: 150),
           ),
           Padding(
             padding: const EdgeInsets.all(3.0),
@@ -142,7 +114,7 @@ class SelectionThumbnailImage extends HookConsumerWidget {
               child: _buildSelectionIcon(asset),
             ),
           ),
-          if (asset.type != AssetTypeEnum.IMAGE)
+          if (!asset.isImage)
             Positioned(
               bottom: 5,
               right: 5,

mobile/lib/modules/album/ui/shared_album_thumbnail_image.dart

@@ -1,49 +1,23 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.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/utils/image_url_builder.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/immich_image.dart';
 
 class SharedAlbumThumbnailImage extends HookConsumerWidget {
-  final AssetResponseDto asset;
+  final Asset asset;
 
   const SharedAlbumThumbnailImage({Key? key, required this.asset})
       : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    var box = Hive.box(userInfoBox);
-
     return GestureDetector(
       onTap: () {
         // debugPrint("View ${asset.id}");
       },
       child: Stack(
         children: [
-          CachedNetworkImage(
-            cacheKey: asset.id,
-            width: 500,
-            height: 500,
-            memCacheHeight: 500,
-            fit: BoxFit.cover,
-            imageUrl: getThumbnailUrl(asset),
-            httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-            fadeInDuration: const Duration(milliseconds: 250),
-            progressIndicatorBuilder: (context, url, downloadProgress) =>
-                Transform.scale(
-              scale: 0.2,
-              child:
-                  CircularProgressIndicator(value: downloadProgress.progress),
-            ),
-            errorWidget: (context, url, error) {
-              return Icon(
-                Icons.image_not_supported_outlined,
-                color: Theme.of(context).primaryColor,
-              );
-            },
-          ),
+          ImmichImage(asset, width: 500, height: 500),
         ],
       ),
     );

mobile/lib/modules/album/views/album_viewer_page.dart

@@ -16,6 +16,7 @@ import 'package:immich_mobile/modules/album/ui/album_viewer_thumbnail.dart';
 import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 import 'package:immich_mobile/shared/ui/immich_sliver_persistent_app_bar_delegate.dart';
 import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
@@ -38,9 +39,9 @@ class AlbumViewerPage extends HookConsumerWidget {
     /// If they exist, add to selected asset state to show they are already selected.
     void _onAddPhotosPressed(AlbumResponseDto albumInfo) async {
       if (albumInfo.assets.isNotEmpty == true) {
-        ref
-            .watch(assetSelectionProvider.notifier)
-            .addNewAssets(albumInfo.assets.toList());
+        ref.watch(assetSelectionProvider.notifier).addNewAssets(
+              albumInfo.assets.map((e) => Asset.remote(e)).toList(),
+            );
       }
 
       ref.watch(assetSelectionProvider.notifier).setIsAlbumExist(true);
@@ -53,13 +54,13 @@ class AlbumViewerPage extends HookConsumerWidget {
         if (returnPayload.selectedAdditionalAsset.isNotEmpty) {
           ImmichLoadingOverlayController.appLoader.show();
 
-          var isSuccess =
+          var addAssetsResult =
               await ref.watch(albumServiceProvider).addAdditionalAssetToAlbum(
                     returnPayload.selectedAdditionalAsset,
                     albumId,
                   );
 
-          if (isSuccess) {
+          if (addAssetsResult != null && addAssetsResult.successfullyAdded > 0) {
             ref.refresh(sharedAlbumDetailProvider(albumId));
           }
 
@@ -205,8 +206,9 @@ class AlbumViewerPage extends HookConsumerWidget {
             delegate: SliverChildBuilderDelegate(
               (BuildContext context, int index) {
                 return AlbumViewerThumbnail(
-                  asset: albumInfo.assets[index],
-                  assetList: albumInfo.assets,
+                  asset: Asset.remote(albumInfo.assets[index]),
+                  assetList:
+                      albumInfo.assets.map((e) => Asset.remote(e)).toList(),
                   showStorageIndicator: showStorageIndicator,
                 );
               },

mobile/lib/modules/album/views/create_album_page.dart

@@ -166,7 +166,7 @@ class CreateAlbumPage extends HookConsumerWidget {
                 return GestureDetector(
                   onTap: _onBackgroundTapped,
                   child: SharedAlbumThumbnailImage(
-                    asset: selectedAssets.toList()[index],
+                    asset: selectedAssets.elementAt(index),
                   ),
                 );
               },

mobile/lib/modules/album/views/sharing_page.dart

@@ -18,7 +18,6 @@ class SharingPage extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     var box = Hive.box(userInfoBox);
-    var thumbnailRequestUrl = '${box.get(serverEndpointKey)}/asset/thumbnail';
     final List<AlbumResponseDto> sharedAlbums = ref.watch(sharedAlbumProvider);
 
     useEffect(

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

@@ -1,9 +1,9 @@
-import 'package:auto_route/auto_route.dart';
 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/asset_viewer/services/image_viewer.service.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/services/share.service.dart';
 import 'package:immich_mobile/shared/ui/immich_toast.dart';
 import 'package:immich_mobile/shared/ui/share_dialog.dart';
@@ -47,7 +47,7 @@ class ImageViewerStateNotifier extends StateNotifier<ImageViewerPageState> {
     state = state.copyWith(downloadAssetStatus: DownloadAssetStatus.idle);
   }
 
-  void shareAsset(AssetResponseDto asset, BuildContext context) async {
+  void shareAsset(Asset asset, BuildContext context) async {
     showDialog(
       context: context,
       builder: (BuildContext buildContext) {

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

@@ -2,12 +2,13 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:openapi/api.dart';
 import 'package:path/path.dart' as p;
 import 'package:latlong2/latlong.dart';
 
 class ExifBottomSheet extends ConsumerWidget {
-  final AssetResponseDto assetDetail;
+  final Asset assetDetail;
 
   const ExifBottomSheet({Key? key, required this.assetDetail})
       : super(key: key);
@@ -26,8 +27,8 @@ class ExifBottomSheet extends ConsumerWidget {
           child: FlutterMap(
             options: MapOptions(
               center: LatLng(
-                assetDetail.exifInfo?.latitude?.toDouble() ?? 0,
-                assetDetail.exifInfo?.longitude?.toDouble() ?? 0,
+                assetDetail.latitude ?? 0,
+                assetDetail.longitude ?? 0,
               ),
               zoom: 16.0,
             ),
@@ -48,8 +49,8 @@ class ExifBottomSheet extends ConsumerWidget {
                   Marker(
                     anchorPos: AnchorPos.align(AnchorAlign.top),
                     point: LatLng(
-                      assetDetail.exifInfo?.latitude?.toDouble() ?? 0,
-                      assetDetail.exifInfo?.longitude?.toDouble() ?? 0,
+                      assetDetail.latitude ?? 0,
+                      assetDetail.longitude ?? 0,
                     ),
                     builder: (ctx) => const Image(
                       image: AssetImage('assets/location-pin.png'),
@@ -63,9 +64,11 @@ class ExifBottomSheet extends ConsumerWidget {
       );
     }
 
+    ExifResponseDto? exifInfo = assetDetail.remote?.exifInfo;
+
     _buildLocationText() {
       return Text(
-        "${assetDetail.exifInfo!.city}, ${assetDetail.exifInfo!.state}",
+        "${exifInfo?.city}, ${exifInfo?.state}",
         style: TextStyle(
           fontSize: 12,
           color: Colors.grey[200],
@@ -78,10 +81,10 @@ class ExifBottomSheet extends ConsumerWidget {
       padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 8),
       child: ListView(
         children: [
-          if (assetDetail.exifInfo?.dateTimeOriginal != null)
+          if (exifInfo?.dateTimeOriginal != null)
             Text(
               DateFormat('date_format'.tr()).format(
-                assetDetail.exifInfo!.dateTimeOriginal!.toLocal(),
+                exifInfo!.dateTimeOriginal!.toLocal(),
               ),
               style: TextStyle(
                 color: Colors.grey[400],
@@ -101,7 +104,7 @@ class ExifBottomSheet extends ConsumerWidget {
           ),
 
           // Location
-          if (assetDetail.exifInfo?.latitude != null)
+          if (assetDetail.latitude != null)
             Padding(
               padding: const EdgeInsets.only(top: 32.0),
               child: Column(
@@ -115,21 +118,22 @@ class ExifBottomSheet extends ConsumerWidget {
                     "exif_bottom_sheet_location",
                     style: TextStyle(fontSize: 11, color: Colors.grey[400]),
                   ).tr(),
-                  if (assetDetail.exifInfo?.latitude != null &&
-                      assetDetail.exifInfo?.longitude != null)
+                  if (assetDetail.latitude != null &&
+                      assetDetail.longitude != null)
                     _buildMap(),
-                  if (assetDetail.exifInfo?.city != null &&
-                      assetDetail.exifInfo?.state != null)
+                  if (exifInfo != null &&
+                      exifInfo.city != null &&
+                      exifInfo.state != null)
                     _buildLocationText(),
                   Text(
-                    "${assetDetail.exifInfo?.latitude?.toStringAsFixed(4)}, ${assetDetail.exifInfo?.longitude?.toStringAsFixed(4)}",
+                    "${assetDetail.latitude?.toStringAsFixed(4)}, ${assetDetail.longitude?.toStringAsFixed(4)}",
                     style: TextStyle(fontSize: 12, color: Colors.grey[400]),
                   )
                 ],
               ),
             ),
           // Detail
-          if (assetDetail.exifInfo != null)
+          if (exifInfo != null)
             Padding(
               padding: const EdgeInsets.only(top: 32.0),
               child: Column(
@@ -153,16 +157,16 @@ class ExifBottomSheet extends ConsumerWidget {
                     iconColor: Colors.grey[300],
                     leading: const Icon(Icons.image),
                     title: Text(
-                      "${assetDetail.exifInfo?.imageName!}${p.extension(assetDetail.originalPath)}",
+                      "${exifInfo.imageName!}${p.extension(assetDetail.remote!.originalPath)}",
                       style: const TextStyle(fontWeight: FontWeight.bold),
                     ),
-                    subtitle: assetDetail.exifInfo?.exifImageHeight != null
+                    subtitle: exifInfo.exifImageHeight != null
                         ? Text(
-                            "${assetDetail.exifInfo?.exifImageHeight} x ${assetDetail.exifInfo?.exifImageWidth}  ${assetDetail.exifInfo?.fileSizeInByte!}B ",
+                            "${exifInfo.exifImageHeight} x ${exifInfo.exifImageWidth}  ${exifInfo.fileSizeInByte!}B ",
                           )
                         : null,
                   ),
-                  if (assetDetail.exifInfo?.make != null)
+                  if (exifInfo.make != null)
                     ListTile(
                       contentPadding: const EdgeInsets.all(0),
                       dense: true,
@@ -170,11 +174,11 @@ class ExifBottomSheet extends ConsumerWidget {
                       iconColor: Colors.grey[300],
                       leading: const Icon(Icons.camera),
                       title: Text(
-                        "${assetDetail.exifInfo?.make} ${assetDetail.exifInfo?.model}",
+                        "${exifInfo.make} ${exifInfo.model}",
                         style: const TextStyle(fontWeight: FontWeight.bold),
                       ),
                       subtitle: Text(
-                        "ƒ/${assetDetail.exifInfo?.fNumber}   1/${(1 / (assetDetail.exifInfo?.exposureTime ?? 1)).toStringAsFixed(0)}   ${assetDetail.exifInfo?.focalLength}mm   ISO${assetDetail.exifInfo?.iso} ",
+                        "ƒ/${exifInfo.fNumber}   1/${(1 / (exifInfo.exposureTime ?? 1)).toStringAsFixed(0)}   ${exifInfo.focalLength}mm   ISO${exifInfo.iso} ",
                       ),
                     ),
                 ],

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

@@ -1,18 +1,22 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+import 'package:openapi/api.dart';
+import 'package:photo_manager/photo_manager.dart'
+    show AssetEntityImageProvider, ThumbnailSize;
 import 'package:photo_view/photo_view.dart';
 
 enum _RemoteImageStatus { empty, thumbnail, preview, full }
 
 class _RemotePhotoViewState extends State<RemotePhotoView> {
-  late CachedNetworkImageProvider _imageProvider;
+  late ImageProvider _imageProvider;
   _RemoteImageStatus _status = _RemoteImageStatus.empty;
   bool _zoomedIn = false;
 
-  static const int swipeThreshold = 100;
-  late CachedNetworkImageProvider fullProvider;
-  late CachedNetworkImageProvider previewProvider;
-  late CachedNetworkImageProvider thumbnailProvider;
+  late ImageProvider _fullProvider;
+  late ImageProvider _previewProvider;
+  late ImageProvider _thumbnailProvider;
 
   @override
   Widget build(BuildContext context) {
@@ -20,34 +24,33 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
 
     return IgnorePointer(
       ignoring: !allowMoving,
-      child: PhotoView(
-        imageProvider: _imageProvider,
-        minScale: PhotoViewComputedScale.contained,
-        enablePanAlways: true,
-        scaleStateChangedCallback: _scaleStateChanged,
-        onScaleEnd: _onScaleListener,
+      child: Listener(
+        onPointerMove: handleSwipUpDown,
+        child: PhotoView(
+          imageProvider: _imageProvider,
+          minScale: PhotoViewComputedScale.contained,
+          enablePanAlways: false,
+          scaleStateChangedCallback: _scaleStateChanged,
+        ),
       ),
     );
   }
 
-  void _onScaleListener(
-    BuildContext context,
-    ScaleEndDetails details,
-    PhotoViewControllerValue controllerValue,
-  ) {
-    // Disable swipe events when zoomed in
+  void handleSwipUpDown(PointerMoveEvent details) {
+    int sensitivity = 10;
+
     if (_zoomedIn) {
       return;
     }
-    if (controllerValue.position.dy > swipeThreshold) {
+
+    if (details.delta.dy > sensitivity) {
       widget.onSwipeDown();
-    } else if (controllerValue.position.dy < -swipeThreshold) {
+    } else if (details.delta.dy < -sensitivity) {
       widget.onSwipeUp();
     }
   }
 
   void _scaleStateChanged(PhotoViewScaleState state) {
-    // _onScaleListener;
     _zoomedIn = state != PhotoViewScaleState.initial;
     if (_zoomedIn) {
       widget.isZoomedListener.value = true;
@@ -70,7 +73,7 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
 
   void _performStateTransition(
     _RemoteImageStatus newStatus,
-    CachedNetworkImageProvider provider,
+    ImageProvider provider,
   ) {
     if (_status == newStatus) return;
 
@@ -92,40 +95,58 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
   }
 
   void _loadImages() {
-    thumbnailProvider = _authorizedImageProvider(
-      widget.thumbnailUrl,
-      widget.cacheKey,
-    );
-    _imageProvider = thumbnailProvider;
+    if (widget.asset.isLocal) {
+      _imageProvider = AssetEntityImageProvider(
+        widget.asset.local!,
+        isOriginal: false,
+        thumbnailSize: const ThumbnailSize.square(250),
+      );
+      _fullProvider = AssetEntityImageProvider(widget.asset.local!);
+      _fullProvider.resolve(const ImageConfiguration()).addListener(
+        ImageStreamListener((ImageInfo image, _) {
+          _performStateTransition(
+            _RemoteImageStatus.full,
+            _fullProvider,
+          );
+        }),
+      );
+      return;
+    }
 
-    thumbnailProvider.resolve(const ImageConfiguration()).addListener(
+    _thumbnailProvider = _authorizedImageProvider(
+      getThumbnailUrl(widget.asset.remote!),
+      widget.asset.id,
+    );
+    _imageProvider = _thumbnailProvider;
+
+    _thumbnailProvider.resolve(const ImageConfiguration()).addListener(
       ImageStreamListener((ImageInfo imageInfo, _) {
         _performStateTransition(
           _RemoteImageStatus.thumbnail,
-          thumbnailProvider,
+          _thumbnailProvider,
         );
       }),
     );
 
-    if (widget.previewUrl != null) {
-      previewProvider = _authorizedImageProvider(
-        widget.previewUrl!,
-        "${widget.cacheKey}_previewStage",
+    if (widget.threeStageLoading) {
+      _previewProvider = _authorizedImageProvider(
+        getThumbnailUrl(widget.asset.remote!, type: ThumbnailFormat.JPEG),
+        "${widget.asset.id}_previewStage",
       );
-      previewProvider.resolve(const ImageConfiguration()).addListener(
+      _previewProvider.resolve(const ImageConfiguration()).addListener(
         ImageStreamListener((ImageInfo imageInfo, _) {
-          _performStateTransition(_RemoteImageStatus.preview, previewProvider);
+          _performStateTransition(_RemoteImageStatus.preview, _previewProvider);
         }),
       );
     }
 
-    fullProvider = _authorizedImageProvider(
-      widget.imageUrl,
-      "${widget.cacheKey}_fullStage",
+    _fullProvider = _authorizedImageProvider(
+      getImageUrl(widget.asset.remote!),
+      "${widget.asset.id}_fullStage",
     );
-    fullProvider.resolve(const ImageConfiguration()).addListener(
+    _fullProvider.resolve(const ImageConfiguration()).addListener(
       ImageStreamListener((ImageInfo imageInfo, _) {
-        _performStateTransition(_RemoteImageStatus.full, fullProvider);
+        _performStateTransition(_RemoteImageStatus.full, _fullProvider);
       }),
     );
   }
@@ -141,11 +162,11 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
     super.dispose();
 
     if (_status == _RemoteImageStatus.full) {
-      await fullProvider.evict();
+      await _fullProvider.evict();
     } else if (_status == _RemoteImageStatus.preview) {
-      await previewProvider.evict();
+      await _previewProvider.evict();
     } else if (_status == _RemoteImageStatus.thumbnail) {
-      await thumbnailProvider.evict();
+      await _thumbnailProvider.evict();
     }
 
     await _imageProvider.evict();
@@ -155,23 +176,18 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
 class RemotePhotoView extends StatefulWidget {
   const RemotePhotoView({
     Key? key,
-    required this.thumbnailUrl,
-    required this.imageUrl,
+    required this.asset,
     required this.authToken,
+    required this.threeStageLoading,
     required this.isZoomedFunction,
     required this.isZoomedListener,
     required this.onSwipeDown,
     required this.onSwipeUp,
-    this.previewUrl,
-    required this.cacheKey,
   }) : super(key: key);
 
-  final String thumbnailUrl;
-  final String imageUrl;
+  final Asset asset;
   final String authToken;
-  final String? previewUrl;
-  final String cacheKey;
-
+  final bool threeStageLoading;
   final void Function() onSwipeDown;
   final void Function() onSwipeUp;
   final void Function() isZoomedFunction;

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

@@ -1,7 +1,7 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 
 class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
   const TopControlAppBar({
@@ -13,9 +13,9 @@ class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
     this.loading = false,
   }) : super(key: key);
 
-  final AssetResponseDto asset;
+  final Asset asset;
   final Function onMoreInfoPressed;
-  final Function onDownloadPressed;
+  final VoidCallback? onDownloadPressed;
   final Function onSharePressed;
   final bool loading;
 
@@ -47,17 +47,16 @@ class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
               child: const CircularProgressIndicator(strokeWidth: 2.0),
             ),
           ),
-        IconButton(
-          iconSize: iconSize,
-          splashRadius: iconSize,
-          onPressed: () {
-            onDownloadPressed();
-          },
-          icon: Icon(
-            Icons.cloud_download_rounded,
-            color: Colors.grey[200],
+        if (!asset.isLocal)
+          IconButton(
+            iconSize: iconSize,
+            splashRadius: iconSize,
+            onPressed: onDownloadPressed,
+            icon: Icon(
+              Icons.cloud_download_rounded,
+              color: Colors.grey[200],
+            ),
           ),
-        ),
         IconButton(
           iconSize: iconSize,
           splashRadius: iconSize,
@@ -69,17 +68,18 @@ class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
             color: Colors.grey[200],
           ),
         ),
-        IconButton(
-          iconSize: iconSize,
-          splashRadius: iconSize,
-          onPressed: () {
-            onMoreInfoPressed();
-          },
-          icon: Icon(
-            Icons.more_horiz_rounded,
-            color: Colors.grey[200],
-          ),
-        )
+        if (asset.isRemote)
+          IconButton(
+            iconSize: iconSize,
+            splashRadius: iconSize,
+            onPressed: () {
+              onMoreInfoPressed();
+            },
+            icon: Icon(
+              Icons.more_horiz_rounded,
+              color: Colors.grey[200],
+            ),
+          )
       ],
     );
   }

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

@@ -14,12 +14,12 @@ import 'package:immich_mobile/modules/asset_viewer/views/video_viewer_page.dart'
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
 import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 
 // ignore: must_be_immutable
 class GalleryViewerPage extends HookConsumerWidget {
-  late List<AssetResponseDto> assetList;
-  final AssetResponseDto asset;
+  late List<Asset> assetList;
+  final Asset asset;
 
   GalleryViewerPage({
     Key? key,
@@ -27,7 +27,7 @@ class GalleryViewerPage extends HookConsumerWidget {
     required this.asset,
   }) : super(key: key);
 
-  AssetResponseDto? assetDetail;
+  Asset? assetDetail;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -37,8 +37,7 @@ class GalleryViewerPage extends HookConsumerWidget {
     final loading = useState(false);
     final isZoomed = useState<bool>(false);
     ValueNotifier<bool> isZoomedListener = ValueNotifier<bool>(false);
-
-    int indexOfAsset = assetList.indexOf(asset);
+    final indexOfAsset = useState(assetList.indexOf(asset));
 
     PageController controller =
         PageController(initialPage: assetList.indexOf(asset));
@@ -52,15 +51,15 @@ class GalleryViewerPage extends HookConsumerWidget {
       [],
     );
 
-    @override
-    initState(int index) {
-      indexOfAsset = index;
-    }
-
     getAssetExif() async {
-      assetDetail = await ref
-          .watch(assetServiceProvider)
-          .getAssetById(assetList[indexOfAsset].id);
+      if (assetList[indexOfAsset.value].isRemote) {
+        assetDetail = await ref
+            .watch(assetServiceProvider)
+            .getAssetById(assetList[indexOfAsset.value].id);
+      } else {
+        // TODO local exif parsing?
+        assetDetail = assetList[indexOfAsset.value];
+      }
     }
 
     void showInfo() {
@@ -88,19 +87,20 @@ class GalleryViewerPage extends HookConsumerWidget {
       backgroundColor: Colors.black,
       appBar: TopControlAppBar(
         loading: loading.value,
-        asset: assetList[indexOfAsset],
+        asset: assetList[indexOfAsset.value],
         onMoreInfoPressed: () {
           showInfo();
         },
-        onDownloadPressed: () {
-          ref
-              .watch(imageViewerStateProvider.notifier)
-              .downloadAsset(assetList[indexOfAsset], context);
-        },
+        onDownloadPressed: assetList[indexOfAsset.value].isLocal
+            ? null
+            : () {
+                ref.watch(imageViewerStateProvider.notifier).downloadAsset(
+                    assetList[indexOfAsset.value].remote!, context);
+              },
         onSharePressed: () {
           ref
               .watch(imageViewerStateProvider.notifier)
-              .shareAsset(assetList[indexOfAsset], context);
+              .shareAsset(assetList[indexOfAsset.value], context);
         },
       ),
       body: SafeArea(
@@ -113,14 +113,13 @@ class GalleryViewerPage extends HookConsumerWidget {
           itemCount: assetList.length,
           scrollDirection: Axis.horizontal,
           onPageChanged: (value) {
+            indexOfAsset.value = value;
             HapticFeedback.selectionClick();
           },
           itemBuilder: (context, index) {
-            initState(index);
-
             getAssetExif();
 
-            if (assetList[index].type == AssetTypeEnum.IMAGE) {
+            if (assetList[index].isImage) {
               return ImageViewerPage(
                 authToken: 'Bearer ${box.get(accessTokenKey)}',
                 isZoomedFunction: isZoomedMethod,
@@ -139,11 +138,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                 },
                 child: Hero(
                   tag: assetList[index].id,
-                  child: VideoViewerPage(
-                    asset: assetList[index],
-                    videoUrl:
-                        '${box.get(serverEndpointKey)}/asset/file?aid=${assetList[index].deviceAssetId}&did=${assetList[index].deviceId}',
-                  ),
+                  child: VideoViewerPage(asset: assetList[index]),
                 ),
               );
             }

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

@@ -8,13 +8,12 @@ import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/remote_photo_view.dart';
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
-import 'package:immich_mobile/utils/image_url_builder.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 
 // ignore: must_be_immutable
 class ImageViewerPage extends HookConsumerWidget {
   final String heroTag;
-  final AssetResponseDto asset;
+  final Asset asset;
   final String authToken;
   final ValueNotifier<bool> isZoomedListener;
   final void Function() isZoomedFunction;
@@ -30,7 +29,7 @@ class ImageViewerPage extends HookConsumerWidget {
     required this.threeStageLoading,
   }) : super(key: key);
 
-  AssetResponseDto? assetDetail;
+  Asset? assetDetail;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -38,8 +37,13 @@ class ImageViewerPage extends HookConsumerWidget {
         ref.watch(imageViewerStateProvider).downloadAssetStatus;
 
     getAssetExif() async {
-      assetDetail =
-          await ref.watch(assetServiceProvider).getAssetById(asset.id);
+      if (asset.isRemote) {
+        assetDetail =
+            await ref.watch(assetServiceProvider).getAssetById(asset.id);
+      } else {
+        // TODO local exif parsing?
+        assetDetail = asset;
+      }
     }
 
     useEffect(
@@ -68,17 +72,13 @@ class ImageViewerPage extends HookConsumerWidget {
           child: Hero(
             tag: heroTag,
             child: RemotePhotoView(
-              thumbnailUrl: getThumbnailUrl(asset),
-              cacheKey: asset.id,
-              imageUrl: getImageUrl(asset),
-              previewUrl: threeStageLoading
-                  ? getThumbnailUrl(asset, type: ThumbnailFormat.JPEG)
-                  : null,
+              asset: asset,
               authToken: authToken,
+              threeStageLoading: threeStageLoading,
               isZoomedFunction: isZoomedFunction,
               isZoomedListener: isZoomedListener,
               onSwipeDown: () => AutoRouter.of(context).pop(),
-              onSwipeUp: () => showInfo(),
+              onSwipeUp: asset.isRemote ? showInfo : () {},
             ),
           ),
         ),

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

@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -6,24 +8,41 @@ 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:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:photo_manager/photo_manager.dart';
 import 'package:video_player/video_player.dart';
 
 // ignore: must_be_immutable
 class VideoViewerPage extends HookConsumerWidget {
-  final String videoUrl;
-  final AssetResponseDto asset;
-  AssetResponseDto? assetDetail;
+  final Asset asset;
 
-  VideoViewerPage({Key? key, required this.videoUrl, required this.asset})
-      : super(key: key);
+  const VideoViewerPage({Key? key, required this.asset}) : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    if (asset.isLocal) {
+      final AsyncValue<File> videoFile = ref.watch(_fileFamily(asset.local!));
+      return videoFile.when(
+        data: (data) => VideoThumbnailPlayer(file: data),
+        error: (error, stackTrace) => Icon(
+          Icons.image_not_supported_outlined,
+          color: Theme.of(context).primaryColor,
+        ),
+        loading: () => const Center(
+          child: SizedBox(
+            width: 75,
+            height: 75,
+            child: CircularProgressIndicator.adaptive(),
+          ),
+        ),
+      );
+    }
     final downloadAssetStatus =
         ref.watch(imageViewerStateProvider).downloadAssetStatus;
-
-    String jwtToken = Hive.box(userInfoBox).get(accessTokenKey);
+    final box = Hive.box(userInfoBox);
+    final String jwtToken = box.get(accessTokenKey);
+    final String videoUrl =
+        '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}';
 
     return Stack(
       children: [
@@ -40,11 +59,21 @@ class VideoViewerPage extends HookConsumerWidget {
   }
 }
 
-class VideoThumbnailPlayer extends StatefulWidget {
-  final String url;
-  final String? jwtToken;
+final _fileFamily =
+    FutureProvider.family<File, AssetEntity>((ref, entity) async {
+  final file = await entity.file;
+  if (file == null) {
+    throw Exception();
+  }
+  return file;
+});
 
-  const VideoThumbnailPlayer({Key? key, required this.url, this.jwtToken})
+class VideoThumbnailPlayer extends StatefulWidget {
+  final String? url;
+  final String? jwtToken;
+  final File? file;
+
+  const VideoThumbnailPlayer({Key? key, this.url, this.jwtToken, this.file})
       : super(key: key);
 
   @override
@@ -63,10 +92,12 @@ class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
 
   Future<void> initializePlayer() async {
     try {
-      videoPlayerController = VideoPlayerController.network(
-        widget.url,
-        httpHeaders: {"Authorization": "Bearer ${widget.jwtToken}"},
-      );
+      videoPlayerController = widget.file == null
+          ? VideoPlayerController.network(
+              widget.url!,
+              httpHeaders: {"Authorization": "Bearer ${widget.jwtToken}"},
+            )
+          : VideoPlayerController.file(widget.file!);
 
       await videoPlayerController.initialize();
       _createChewieController();

mobile/lib/modules/backup/background_service/background.service.dart

@@ -33,6 +33,7 @@ class BackgroundService {
   static const MethodChannel _backgroundChannel =
       MethodChannel('immich/backgroundChannel');
   static final NumberFormat numberFormat = NumberFormat("###0.##");
+  static const notifyInterval = Duration(milliseconds: 400);
   bool _isBackgroundInitialized = false;
   CancellationToken? _cancellationToken;
   bool _canceledBySystem = false;
@@ -43,8 +44,17 @@ class BackgroundService {
   bool _errorGracePeriodExceeded = true;
   int _uploadedAssetsCount = 0;
   int _assetsToUploadCount = 0;
-  int _lastDetailProgressUpdate = 0;
-  String _lastPrintedProgress = "";
+  String _lastPrintedDetailContent = "";
+  String? _lastPrintedDetailTitle;
+  late final _Throttle _throttledNotifiy =
+      _Throttle(_updateProgress, notifyInterval);
+  late final _Throttle _throttledDetailNotify =
+      _Throttle(_updateDetailProgress, notifyInterval);
+  Completer<bool> _hasAccessCompleter = Completer();
+  late Future<bool> _hasAccess =
+      Platform.isAndroid ? _hasAccessCompleter.future : Future.value(true);
+
+  Future<bool> get hasAccess => _hasAccess;
 
   bool get isBackgroundInitialized {
     return _isBackgroundInitialized;
@@ -196,6 +206,15 @@ class BackgroundService {
     if (!Platform.isAndroid) {
       return true;
     }
+    if (_hasLock) {
+      debugPrint("WARNING: [acquireLock] called more than once");
+      return true;
+    }
+    if (_hasAccessCompleter.isCompleted) {
+      debugPrint("WARNING: [acquireLock] _hasAccessCompleter is completed");
+      _hasAccessCompleter = Completer();
+      _hasAccess = _hasAccessCompleter.future;
+    }
     final int lockTime = Timeline.now;
     _wantsLockTime = lockTime;
     final ReceivePort rp = ReceivePort(_portNameLock);
@@ -214,6 +233,7 @@ class BackgroundService {
     }
     _hasLock = true;
     rp.listen(_heartbeatListener);
+    _hasAccessCompleter.complete(true);
     return true;
   }
 
@@ -266,6 +286,8 @@ class BackgroundService {
     }
     _wantsLockTime = 0;
     if (_hasLock) {
+      _hasAccessCompleter = Completer();
+      _hasAccess = _hasAccessCompleter.future;
       IsolateNameServer.removePortNameMapping(_portNameLock);
       _waitingIsolate?.send(true);
       _waitingIsolate = null;
@@ -319,11 +341,14 @@ class BackgroundService {
     Hive.registerAdapter(HiveBackupAlbumsAdapter());
     Hive.registerAdapter(HiveDuplicatedAssetsAdapter());
 
-    await Hive.openBox(userInfoBox);
-    await Hive.openBox<HiveSavedLoginInfo>(hiveLoginInfoBox);
-    await Hive.openBox(userSettingInfoBox);
-    await Hive.openBox(backgroundBackupInfoBox);
-    await Hive.openBox<HiveDuplicatedAssets>(duplicatedAssetsBox);
+    await Future.wait([
+      Hive.openBox(userInfoBox),
+      Hive.openBox<HiveSavedLoginInfo>(hiveLoginInfoBox),
+      Hive.openBox(userSettingInfoBox),
+      Hive.openBox(backgroundBackupInfoBox),
+      Hive.openBox<HiveDuplicatedAssets>(duplicatedAssetsBox),
+      Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox),
+    ]);
 
     ApiService apiService = ApiService();
     apiService.setEndpoint(Hive.box(userInfoBox).get(serverEndpointKey));
@@ -332,7 +357,7 @@ class BackgroundService {
     AppSettingsService settingsService = AppSettingsService();
 
     final Box<HiveBackupAlbums> box =
-        await Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox);
+        Hive.box<HiveBackupAlbums>(hiveBackupInfoBox);
     final HiveBackupAlbums? backupAlbumInfo = box.get(backupInfoKey);
     if (backupAlbumInfo == null) {
       return true;
@@ -434,34 +459,40 @@ class BackgroundService {
   }
 
   void _onAssetUploaded(String deviceAssetId, String deviceId, bool isDup) {
-    debugPrint("Uploaded $deviceAssetId from $deviceId");
     _uploadedAssetsCount++;
-    _updateNotification(
-      progress: _uploadedAssetsCount,
-      max: _assetsToUploadCount,
-      content: _formatAssetBackupProgress(),
-    );
+    _throttledNotifiy();
   }
 
   void _onProgress(int sent, int total) {
-    final int now = Timeline.now;
-    // limit updates to 10 per second (or Android drops important notifications)
-    if (now > _lastDetailProgressUpdate + 100000) {
-      final String msg = _humanReadableBytesProgress(sent, total);
-      // only update if message actually differs (to stop many useless notification updates on large assets or slow connections)
-      if (msg != _lastPrintedProgress) {
-        _lastDetailProgressUpdate = now;
-        _lastPrintedProgress = msg;
-        _updateNotification(
-          progress: sent,
-          max: total,
-          isDetail: true,
-          content: msg,
-        );
-      }
+    _throttledDetailNotify(progress: sent, total: total);
+  }
+
+  void _updateDetailProgress(String? title, int progress, int total) {
+    final String msg =
+        total > 0 ? _humanReadableBytesProgress(progress, total) : "";
+    // only update if message actually differs (to stop many useless notification updates on large assets or slow connections)
+    if (msg != _lastPrintedDetailContent || _lastPrintedDetailTitle != title) {
+      _lastPrintedDetailContent = msg;
+      _lastPrintedDetailTitle = title;
+      _updateNotification(
+        progress: total > 0 ? (progress * 1000) ~/ total : 0,
+        max: 1000,
+        isDetail: true,
+        title: title,
+        content: msg,
+      );
     }
   }
 
+  void _updateProgress(String? title, int progress, int total) {
+    _updateNotification(
+      progress: _uploadedAssetsCount,
+      max: _assetsToUploadCount,
+      title: title,
+      content: _formatAssetBackupProgress(),
+    );
+  }
+
   void _onBackupError(ErrorUploadAsset errorAssetInfo) {
     _showErrorNotification(
       title: "backup_background_service_upload_failure_notification"
@@ -471,14 +502,11 @@ class BackgroundService {
   }
 
   void _onSetCurrentBackupAsset(CurrentUploadAsset currentUploadAsset) {
-    _updateNotification(
-      title: "backup_background_service_current_upload_notification"
-          .tr(args: [currentUploadAsset.fileName]),
-      content: "",
-      isDetail: true,
-      progress: 0,
-      max: 0,
-    );
+    _throttledDetailNotify.title =
+        "backup_background_service_current_upload_notification"
+            .tr(args: [currentUploadAsset.fileName]);
+    _throttledDetailNotify.progress = 0;
+    _throttledDetailNotify.total = 0;
   }
 
   bool _isErrorGracePeriodExceeded(AppSettingsService appSettingsService) {
@@ -529,6 +557,43 @@ class BackgroundService {
   }
 }
 
+class _Throttle {
+  _Throttle(this._fun, Duration interval) : _interval = interval.inMicroseconds;
+  final void Function(String?, int, int) _fun;
+  final int _interval;
+  int _invokedAt = 0;
+  Timer? _timer;
+
+  String? title;
+  int progress = 0;
+  int total = 0;
+
+  void call({
+    final String? title,
+    final int progress = 0,
+    final int total = 0,
+  }) {
+    final time = Timeline.now;
+    this.title = title ?? this.title;
+    this.progress = progress;
+    this.total = total;
+    if (time > _invokedAt + _interval) {
+      _timer?.cancel();
+      _onTimeElapsed();
+    } else {
+      _timer ??= Timer(Duration(microseconds: _interval), _onTimeElapsed);
+    }
+  }
+
+  void _onTimeElapsed() {
+    _invokedAt = Timeline.now;
+    _fun(title, progress, total);
+    _timer = null;
+    // clear title to not send/overwrite it next time if unchanged
+    title = null;
+  }
+}
+
 /// entry point called by Kotlin/Java code; needs to be a top-level function
 @pragma('vm:entry-point')
 void _nativeEntry() {

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

@@ -46,6 +46,17 @@ class HiveBackupAlbums {
     );
   }
 
+  /// Returns a deep copy to allow safe modification without changing the global
+  /// state of [HiveBackupAlbums] before actually saving the changes
+  HiveBackupAlbums deepCopy() {
+    return HiveBackupAlbums(
+      selectedAlbumIds: selectedAlbumIds.toList(),
+      excludedAlbumsIds: excludedAlbumsIds.toList(),
+      lastSelectedBackupTime: lastSelectedBackupTime.toList(),
+      lastExcludedBackupTime: lastExcludedBackupTime.toList(),
+    );
+  }
+
   Map<String, dynamic> toMap() {
     final result = <String, dynamic>{};
 

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

@@ -565,11 +565,16 @@ class BackupNotifier extends StateNotifier<BackUpState> {
       state = state.copyWith(backupProgress: BackUpProgressEnum.inBackground);
       final bool hasLock = await _backgroundService.acquireLock();
       if (!hasLock) {
+        debugPrint("WARNING [resumeBackup] failed to acquireLock");
         return;
       }
-      Box<HiveBackupAlbums> box =
-          await Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox);
-      HiveBackupAlbums? albums = box.get(backupInfoKey);
+      await Future.wait([
+        Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox),
+        Hive.openBox<HiveDuplicatedAssets>(duplicatedAssetsBox),
+        Hive.openBox(backgroundBackupInfoBox),
+      ]);
+      final HiveBackupAlbums? albums =
+          Hive.box<HiveBackupAlbums>(hiveBackupInfoBox).get(backupInfoKey);
       Set<AvailableAlbum> selectedAlbums = state.selectedBackupAlbums;
       Set<AvailableAlbum> excludedAlbums = state.excludedBackupAlbums;
       if (albums != null) {
@@ -584,8 +589,7 @@ class BackupNotifier extends StateNotifier<BackUpState> {
           albums.lastExcludedBackupTime,
         );
       }
-      await Hive.openBox<HiveDuplicatedAssets>(duplicatedAssetsBox);
-      final Box backgroundBox = await Hive.openBox(backgroundBackupInfoBox);
+      final Box backgroundBox = Hive.box(backgroundBackupInfoBox);
       state = state.copyWith(
         backupProgress: previous,
         selectedBackupAlbums: selectedAlbums,

mobile/lib/modules/home/services/asset.service.dart

@@ -1,34 +1,90 @@
 import 'dart:async';
 
 import 'package:flutter/material.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/backup/background_service/background.service.dart';
+import 'package:immich_mobile/modules/backup/models/hive_backup_albums.model.dart';
+import 'package:immich_mobile/modules/backup/services/backup.service.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/providers/api.provider.dart';
 import 'package:immich_mobile/shared/services/api.service.dart';
 import 'package:openapi/api.dart';
+import 'package:photo_manager/src/types/entity.dart';
 
 final assetServiceProvider = Provider(
   (ref) => AssetService(
     ref.watch(apiServiceProvider),
+    ref.watch(backupServiceProvider),
+    ref.watch(backgroundServiceProvider),
   ),
 );
 
 class AssetService {
   final ApiService _apiService;
+  final BackupService _backupService;
+  final BackgroundService _backgroundService;
 
-  AssetService(this._apiService);
+  AssetService(this._apiService, this._backupService, this._backgroundService);
 
-  Future<List<AssetResponseDto>?> getAllAsset() async {
+  /// Returns all local, remote assets in that order
+  Future<List<Asset>> getAllAsset({bool urgent = false}) async {
+    final List<Asset> assets = [];
     try {
-      return await _apiService.assetApi.getAllAssets();
+      // not using `await` here to fetch local & remote assets concurrently
+      final Future<List<AssetResponseDto>?> remoteTask =
+          _apiService.assetApi.getAllAssets();
+      final Iterable<AssetEntity> newLocalAssets;
+      final List<AssetEntity> localAssets = await _getLocalAssets(urgent);
+      final List<AssetResponseDto> remoteAssets = await remoteTask ?? [];
+      if (remoteAssets.isNotEmpty && localAssets.isNotEmpty) {
+        final String deviceId = Hive.box(userInfoBox).get(deviceIdKey);
+        final Set<String> existingIds = remoteAssets
+            .where((e) => e.deviceId == deviceId)
+            .map((e) => e.deviceAssetId)
+            .toSet();
+        newLocalAssets = localAssets.where((e) => !existingIds.contains(e.id));
+      } else {
+        newLocalAssets = localAssets;
+      }
+
+      assets.addAll(newLocalAssets.map((e) => Asset.local(e)));
+      // the order (first all local, then remote assets) is important!
+      assets.addAll(remoteAssets.map((e) => Asset.remote(e)));
     } catch (e) {
       debugPrint("Error [getAllAsset]  ${e.toString()}");
-      return null;
+    }
+    return assets;
+  }
+
+  /// if [urgent] is `true`, do not block by waiting on the background service
+  /// to finish running. Returns an empty list instead after a timeout.
+  Future<List<AssetEntity>> _getLocalAssets(bool urgent) async {
+    try {
+      final Future<bool> hasAccess = urgent
+          ? _backgroundService.hasAccess
+              .timeout(const Duration(milliseconds: 250))
+          : _backgroundService.hasAccess;
+      if (!await hasAccess) {
+        throw Exception("Error [getAllAsset] failed to gain access");
+      }
+      final box = await Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox);
+      final HiveBackupAlbums? backupAlbumInfo = box.get(backupInfoKey);
+
+      return backupAlbumInfo != null
+          ? await _backupService
+              .buildUploadCandidates(backupAlbumInfo.deepCopy())
+          : [];
+    } catch (e) {
+      debugPrint("Error [_getLocalAssets] ${e.toString()}");
+      return [];
     }
   }
 
-  Future<AssetResponseDto?> getAssetById(String assetId) async {
+  Future<Asset?> getAssetById(String assetId) async {
     try {
-      return await _apiService.assetApi.getAssetById(assetId);
+      return Asset.remote(await _apiService.assetApi.getAssetById(assetId));
     } catch (e) {
       debugPrint("Error [getAssetById]  ${e.toString()}");
       return null;
@@ -36,12 +92,12 @@ class AssetService {
   }
 
   Future<List<DeleteAssetResponseDto>?> deleteAssets(
-    Set<AssetResponseDto> deleteAssets,
+    Iterable<AssetResponseDto> deleteAssets,
   ) async {
     try {
-      List<String> payload = [];
+      final List<String> payload = [];
 
-      for (var asset in deleteAssets) {
+      for (final asset in deleteAssets) {
         payload.add(asset.id);
       }
 

mobile/lib/modules/home/services/asset_cache.service.dart

@@ -1,27 +1,24 @@
 import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/services/json_cache.dart';
-import 'package:openapi/api.dart';
 
-
-class AssetCacheService extends JsonCache<List<AssetResponseDto>> {
+class AssetCacheService extends JsonCache<List<Asset>> {
   AssetCacheService() : super("asset_cache");
 
   @override
-  void put(List<AssetResponseDto> data) {
+  void put(List<Asset> data) {
     putRawData(data.map((e) => e.toJson()).toList());
   }
 
   @override
-  Future<List<AssetResponseDto>> get() async {
+  Future<List<Asset>> get() async {
     try {
       final mapList = await readRawData() as List<dynamic>;
 
-      final responseData = mapList
-          .map((e) => AssetResponseDto.fromJson(e))
-          .whereNotNull()
-          .toList();
+      final responseData =
+          mapList.map((e) => Asset.fromJson(e)).whereNotNull().toList();
 
       return responseData;
     } catch (e) {
@@ -33,5 +30,5 @@ class AssetCacheService extends JsonCache<List<AssetResponseDto>> {
 }
 
 final assetCacheServiceProvider = Provider(
-      (ref) => AssetCacheService(),
+  (ref) => AssetCacheService(),
 );

mobile/lib/modules/home/ui/asset_grid/asset_grid_data_structure.dart

@@ -1,6 +1,6 @@
 import 'dart:math';
 
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 
 enum RenderAssetGridElementType {
   assetRow,
@@ -9,7 +9,7 @@ enum RenderAssetGridElementType {
 }
 
 class RenderAssetGridRow {
-  final List<AssetResponseDto> assets;
+  final List<Asset> assets;
 
   RenderAssetGridRow(this.assets);
 }
@@ -19,7 +19,7 @@ class RenderAssetGridElement {
   final RenderAssetGridRow? assetRow;
   final String? title;
   final DateTime date;
-  final List<AssetResponseDto>? relatedAssetList;
+  final List<Asset>? relatedAssetList;
 
   RenderAssetGridElement(
     this.type, {
@@ -31,13 +31,15 @@ class RenderAssetGridElement {
 }
 
 List<RenderAssetGridElement> assetsToRenderList(
-    List<AssetResponseDto> assets, int assetsPerRow) {
+  List<Asset> assets,
+  int assetsPerRow,
+) {
   List<RenderAssetGridElement> elements = [];
 
   int cursor = 0;
   while (cursor < assets.length) {
     int rowElements = min(assets.length - cursor, assetsPerRow);
-    final date = DateTime.parse(assets[cursor].createdAt);
+    final date = assets[cursor].createdAt;
 
     final rowElement = RenderAssetGridElement(
       RenderAssetGridElementType.assetRow,
@@ -55,7 +57,9 @@ List<RenderAssetGridElement> assetsToRenderList(
 }
 
 List<RenderAssetGridElement> assetGroupsToRenderList(
-    Map<String, List<AssetResponseDto>> assetGroups, int assetsPerRow) {
+  Map<String, List<Asset>> assetGroups,
+  int assetsPerRow,
+) {
   List<RenderAssetGridElement> elements = [];
   DateTime? lastDate;
 
@@ -64,8 +68,11 @@ List<RenderAssetGridElement> assetGroupsToRenderList(
 
     if (lastDate == null || lastDate!.month != date.month) {
       elements.add(
-        RenderAssetGridElement(RenderAssetGridElementType.monthTitle,
-            title: groupName, date: date),
+        RenderAssetGridElement(
+          RenderAssetGridElementType.monthTitle,
+          title: groupName,
+          date: date,
+        ),
       );
     }
 

mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart

@@ -14,7 +14,7 @@ class DisableMultiSelectButton extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return Padding(
-        padding: const EdgeInsets.only(left: 16.0, top: 15),
+        padding: const EdgeInsets.only(left: 16.0, top: 16.0),
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 4.0),
           child: ElevatedButton.icon(

mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart

@@ -4,7 +4,7 @@ import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/thumbnail_image.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 import 'asset_grid_data_structure.dart';
 import 'daily_title_text.dart';
@@ -13,7 +13,7 @@ import 'draggable_scrollbar_custom.dart';
 
 typedef ImmichAssetGridSelectionListener = void Function(
   bool,
-  Set<AssetResponseDto>,
+  Set<Asset>,
 );
 
 class ImmichAssetGridState extends State<ImmichAssetGrid> {
@@ -24,20 +24,20 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
   bool _scrolling = false;
   final Set<String> _selectedAssets = HashSet();
 
-  List<AssetResponseDto> get _assets {
+  List<Asset> get _assets {
     return widget.renderList
         .map((e) {
           if (e.type == RenderAssetGridElementType.assetRow) {
             return e.assetRow!.assets;
           } else {
-            return List<AssetResponseDto>.empty();
+            return List<Asset>.empty();
           }
         })
         .flattened
         .toList();
   }
 
-  Set<AssetResponseDto> _getSelectedAssets() {
+  Set<Asset> _getSelectedAssets() {
     return _selectedAssets
         .map((e) => _assets.firstWhereOrNull((a) => a.id == e))
         .whereNotNull()
@@ -48,7 +48,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
     widget.listener?.call(selectionActive, _getSelectedAssets());
   }
 
-  void _selectAssets(List<AssetResponseDto> assets) {
+  void _selectAssets(List<Asset> assets) {
     setState(() {
       for (var e in assets) {
         _selectedAssets.add(e.id);
@@ -57,7 +57,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
     });
   }
 
-  void _deselectAssets(List<AssetResponseDto> assets) {
+  void _deselectAssets(List<Asset> assets) {
     setState(() {
       for (var e in assets) {
         _selectedAssets.remove(e.id);
@@ -74,7 +74,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
     _callSelectionListener(false);
   }
 
-  bool _allAssetsSelected(List<AssetResponseDto> assets) {
+  bool _allAssetsSelected(List<Asset> assets) {
     return widget.selectionActive &&
         assets.firstWhereOrNull((e) => !_selectedAssets.contains(e.id)) == null;
   }
@@ -85,7 +85,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
   }
 
   Widget _buildThumbnailOrPlaceholder(
-    AssetResponseDto asset,
+    Asset asset,
     bool placeholder,
   ) {
     if (placeholder) {
@@ -114,7 +114,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
 
     return Row(
       key: Key("asset-row-${row.assets.first.id}"),
-      children: row.assets.map((AssetResponseDto asset) {
+      children: row.assets.map((Asset asset) {
         bool last = asset == row.assets.last;
 
         return Container(
@@ -134,7 +134,7 @@ class ImmichAssetGridState extends State<ImmichAssetGrid> {
   Widget _buildTitle(
     BuildContext context,
     String title,
-    List<AssetResponseDto> assets,
+    List<Asset> assets,
   ) {
     return DailyTitleText(
       isoDate: title,

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

@@ -1,18 +1,15 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 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/constants/hive_box.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/utils/image_url_builder.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/immich_image.dart';
 
 class ThumbnailImage extends HookConsumerWidget {
-  final AssetResponseDto asset;
-  final List<AssetResponseDto> assetList;
+  final Asset asset;
+  final List<Asset> assetList;
   final bool showStorageIndicator;
   final bool useGrayBoxPlaceholder;
   final bool isSelected;
@@ -34,12 +31,9 @@ class ThumbnailImage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    var box = Hive.box(userInfoBox);
-    var thumbnailRequestUrl = getThumbnailUrl(asset);
     var deviceId = ref.watch(authenticationProvider).deviceId;
 
-
-    Widget buildSelectionIcon(AssetResponseDto asset) {
+    Widget buildSelectionIcon(Asset asset) {
       if (isSelected) {
         return Icon(
           Icons.check_circle,
@@ -87,41 +81,11 @@ class ThumbnailImage extends HookConsumerWidget {
                       )
                     : const Border(),
               ),
-              child: CachedNetworkImage(
-                cacheKey: 'thumbnail-image-${asset.id}',
+              child: ImmichImage(
+                asset,
                 width: 300,
                 height: 300,
-                memCacheHeight: 200,
-                maxWidthDiskCache: 200,
-                maxHeightDiskCache: 200,
-                fit: BoxFit.cover,
-                imageUrl: thumbnailRequestUrl,
-                httpHeaders: {
-                  "Authorization": "Bearer ${box.get(accessTokenKey)}"
-                },
-                fadeInDuration: const Duration(milliseconds: 250),
-                progressIndicatorBuilder: (context, url, downloadProgress) {
-                  if (useGrayBoxPlaceholder) {
-                    return const DecoratedBox(
-                      decoration: BoxDecoration(color: Colors.grey),
-                    );
-                  }
-                  return Transform.scale(
-                    scale: 0.2,
-                    child: CircularProgressIndicator(
-                      value: downloadProgress.progress,
-                    ),
-                  );
-                },
-                errorWidget: (context, url, error) {
-                  debugPrint("Error getting thumbnail $url = $error");
-                  CachedNetworkImage.evictFromCache(thumbnailRequestUrl);
-
-                  return Icon(
-                    Icons.image_not_supported_outlined,
-                    color: Theme.of(context).primaryColor,
-                  );
-                },
+                useGrayBoxPlaceholder: useGrayBoxPlaceholder,
               ),
             ),
             if (multiselectEnabled)
@@ -137,14 +101,16 @@ class ThumbnailImage extends HookConsumerWidget {
                 right: 10,
                 bottom: 5,
                 child: Icon(
-                  (deviceId != asset.deviceId)
-                      ? Icons.cloud_done_outlined
-                      : Icons.photo_library_rounded,
+                  asset.isRemote
+                      ? (deviceId == asset.deviceId
+                          ? Icons.cloud_done_outlined
+                          : Icons.cloud_outlined)
+                      : Icons.cloud_off_outlined,
                   color: Colors.white,
                   size: 18,
                 ),
               ),
-            if (asset.type != AssetTypeEnum.IMAGE)
+            if (!asset.isImage)
               Positioned(
                 top: 5,
                 right: 5,

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

@@ -1,64 +1,220 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.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/home/ui/delete_diaglog.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+import 'package:openapi/api.dart';
 
 class ControlBottomAppBar extends ConsumerWidget {
   final Function onShare;
   final Function onDelete;
+  final Function(AlbumResponseDto album) onAddToAlbum;
+  final void Function() onCreateNewAlbum;
 
-  const ControlBottomAppBar(
-      {Key? key, required this.onShare, required this.onDelete})
-      : super(key: key);
+  final List<AlbumResponseDto> albums;
+
+  const ControlBottomAppBar({
+    Key? key,
+    required this.onShare,
+    required this.onDelete,
+    required this.albums,
+    required this.onAddToAlbum,
+    required this.onCreateNewAlbum,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return Positioned(
-      bottom: 0,
-      left: 0,
-      child: Container(
-        width: MediaQuery.of(context).size.width,
-        height: MediaQuery.of(context).size.height * 0.15,
-        decoration: BoxDecoration(
-          borderRadius: const BorderRadius.only(
-            topLeft: Radius.circular(8),
-            topRight: Radius.circular(8),
+    Widget renderActionButtons() {
+      return Row(
+        children: [
+          ControlBoxButton(
+            iconData: Icons.ios_share_rounded,
+            label: "control_bottom_app_bar_share".tr(),
+            onPressed: () {
+              onShare();
+            },
           ),
-          color: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.95),
-        ),
-        child: Column(
-          children: [
-            Padding(
-              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          ControlBoxButton(
+            iconData: Icons.delete_outline_rounded,
+            label: "control_bottom_app_bar_delete".tr(),
+            onPressed: () {
+              showDialog(
+                context: context,
+                builder: (BuildContext context) {
+                  return DeleteDialog(
+                    onDelete: onDelete,
+                  );
+                },
+              );
+            },
+          ),
+        ],
+      );
+    }
+
+    Widget renderAlbums() {
+      Widget renderAlbum(AlbumResponseDto album) {
+        final box = Hive.box(userInfoBox);
+
+        return Padding(
+          padding: const EdgeInsets.only(left: 8.0),
+          child: GestureDetector(
+            onTap: () => onAddToAlbum(album),
+            child: Container(
+              width: 112,
+              padding: const EdgeInsets.all(6),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  ControlBoxButton(
-                    iconData: Icons.delete_forever_rounded,
-                    label: "control_bottom_app_bar_delete".tr(),
-                    onPressed: () {
-                      showDialog(
-                        context: context,
-                        builder: (BuildContext context) {
-                          return DeleteDialog(
-                            onDelete: onDelete,
-                          );
-                        },
-                      );
-                    },
+                  ClipRRect(
+                    borderRadius: BorderRadius.circular(8),
+                    child: CachedNetworkImage(
+                      width: 100,
+                      height: 100,
+                      fit: BoxFit.cover,
+                      imageUrl: getAlbumThumbnailUrl(
+                        album,
+                        type: ThumbnailFormat.JPEG,
+                      ),
+                      httpHeaders: {
+                        "Authorization": "Bearer ${box.get(accessTokenKey)}"
+                      },
+                      cacheKey: "${album.albumThumbnailAssetId}",
+                    ),
                   ),
-                  ControlBoxButton(
-                    iconData: Icons.share,
-                    label: "control_bottom_app_bar_share".tr(),
-                    onPressed: () {
-                      onShare();
-                    },
+                  Padding(
+                    padding: const EdgeInsets.only(top: 12),
+                    child: Text(
+                      album.albumName,
+                      style: const TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 12.0,
+                      ),
+                    ),
                   ),
                 ],
               ),
-            )
-          ],
+            ),
+          ),
+        );
+      }
+
+      return SizedBox(
+        height: 200,
+        child: ListView.builder(
+          scrollDirection: Axis.horizontal,
+          itemBuilder: (buildContext, i) => renderAlbum(albums[i]),
+          itemCount: albums.length,
         ),
+      );
+    }
+
+    return DraggableScrollableSheet(
+      initialChildSize: 0.30,
+      minChildSize: 0.15,
+      maxChildSize: 0.57,
+      snap: true,
+      builder: (
+        BuildContext context,
+        ScrollController scrollController,
+      ) {
+        return SingleChildScrollView(
+          controller: scrollController,
+          child: Card(
+            elevation: 12.0,
+            shape: const RoundedRectangleBorder(
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(12),
+                topRight: Radius.circular(12),
+              ),
+            ),
+            margin: const EdgeInsets.all(0),
+            child: Container(
+              decoration: const BoxDecoration(
+                borderRadius: BorderRadius.only(
+                  topLeft: Radius.circular(12),
+                  topRight: Radius.circular(12),
+                ),
+              ),
+              child: Column(
+                children: <Widget>[
+                  const SizedBox(height: 12),
+                  const CustomDraggingHandle(),
+                  const SizedBox(height: 12),
+                  renderActionButtons(),
+                  const Divider(
+                    indent: 16,
+                    endIndent: 16,
+                    thickness: 1,
+                  ),
+                  AddToAlbumTitleRow(
+                    onCreateNewAlbum: () => onCreateNewAlbum(),
+                  ),
+                  renderAlbums(),
+                  const SizedBox(height: 200),
+                ],
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class AddToAlbumTitleRow extends StatelessWidget {
+  const AddToAlbumTitleRow({
+    super.key,
+    required this.onCreateNewAlbum,
+  });
+
+  final VoidCallback onCreateNewAlbum;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          const Text(
+            "control_bottom_app_bar_add_to_album",
+            style: TextStyle(
+              fontSize: 14,
+              fontWeight: FontWeight.bold,
+            ),
+          ).tr(),
+          TextButton(
+            onPressed: onCreateNewAlbum,
+            child: Text(
+              "control_bottom_app_bar_create_new_album",
+              style: TextStyle(
+                color: Theme.of(context).primaryColor,
+                fontWeight: FontWeight.bold,
+                fontSize: 14,
+              ),
+            ).tr(),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class CustomDraggingHandle extends StatelessWidget {
+  const CustomDraggingHandle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 5,
+      width: 30,
+      decoration: BoxDecoration(
+        color: Colors.grey[500],
+        borderRadius: BorderRadius.circular(16),
       ),
     );
   }
@@ -78,19 +234,20 @@ class ControlBoxButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      width: 60,
+    return MaterialButton(
+      padding: const EdgeInsets.all(10),
+      shape: const CircleBorder(),
+      onPressed: () => onPressed(),
       child: Column(
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
-          IconButton(
-            onPressed: () {
-              onPressed();
-            },
-            icon: Icon(iconData, size: 30),
+          Icon(iconData, size: 24),
+          const SizedBox(height: 6),
+          Text(
+            label,
+            style: const TextStyle(fontSize: 12.0),
           ),
-          Text(label)
         ],
       ),
     );

mobile/lib/modules/home/views/home_page.dart

@@ -1,6 +1,11 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.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/album/providers/album.provider.dart';
+import 'package:immich_mobile/modules/album/services/album.service.dart';
 import 'package:immich_mobile/modules/home/providers/home_page_render_list_provider.dart';
 import 'package:immich_mobile/modules/home/providers/multiselect.provider.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
@@ -9,10 +14,13 @@ import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
 import 'package:immich_mobile/modules/home/ui/profile_drawer/profile_drawer.dart';
 import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/models/asset.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:immich_mobile/shared/services/share.service.dart';
+import 'package:immich_mobile/shared/ui/immich_toast.dart';
 import 'package:openapi/api.dart';
 
 class HomePage extends HookConsumerWidget {
@@ -23,14 +31,26 @@ class HomePage extends HookConsumerWidget {
     final appSettingService = ref.watch(appSettingsServiceProvider);
     var renderList = ref.watch(renderListProvider);
     final multiselectEnabled = ref.watch(multiselectProvider.notifier);
-    final selection = useState(<AssetResponseDto>{});
+    final selectionEnabledHook = useState(false);
+
+    final selection = useState(<Asset>{});
+    final albums = ref.watch(albumProvider);
+    final albumService = ref.watch(albumServiceProvider);
 
     useEffect(
       () {
         ref.read(websocketProvider.notifier).connect();
         ref.read(assetProvider.notifier).getAllAsset();
+        ref.read(albumProvider.notifier).getAllAlbums();
         ref.watch(serverInfoProvider.notifier).getServerVersion();
-        return null;
+
+        selectionEnabledHook.addListener(() {
+          multiselectEnabled.state = selectionEnabledHook.value;
+        });
+
+        return () {
+          selectionEnabledHook.dispose();
+        };
       },
       [],
     );
@@ -42,43 +62,108 @@ class HomePage extends HookConsumerWidget {
     Widget buildBody() {
       void selectionListener(
         bool multiselect,
-        Set<AssetResponseDto> selectedAssets,
+        Set<Asset> selectedAssets,
       ) {
-        multiselectEnabled.state = multiselect;
+        selectionEnabledHook.value = multiselect;
         selection.value = selectedAssets;
       }
 
       void onShareAssets() {
         ref.watch(shareServiceProvider).shareAssets(selection.value.toList());
-        multiselectEnabled.state = false;
+        selectionEnabledHook.value = false;
       }
 
       void onDelete() {
         ref.watch(assetProvider.notifier).deleteAssets(selection.value);
-        multiselectEnabled.state = false;
+        selectionEnabledHook.value = false;
+      }
+
+      Iterable<Asset> remoteOnlySelection() {
+        final Set<Asset> assets = selection.value;
+        final bool onlyRemote = assets.every((e) => e.isRemote);
+        if (!onlyRemote) {
+          ImmichToast.show(
+            context: context,
+            msg: "Can not add local assets to albums yet, skipping",
+            gravity: ToastGravity.BOTTOM,
+          );
+          return assets.where((a) => a.isRemote);
+        }
+        return assets;
+      }
+
+      void onAddToAlbum(AlbumResponseDto album) async {
+        final Iterable<Asset> assets = remoteOnlySelection();
+        if (assets.isEmpty) {
+          return;
+        }
+        final result = await albumService.addAdditionalAssetToAlbum(
+          assets,
+          album.id,
+        );
+
+        if (result != null) {
+          if (result.alreadyInAlbum.isNotEmpty) {
+            ImmichToast.show(
+              context: context,
+              msg: "home_page_add_to_album_conflicts".tr(
+                namedArgs: {
+                  "album": album.albumName,
+                  "added": result.successfullyAdded.toString(),
+                  "failed": result.alreadyInAlbum.length.toString()
+                },
+              ),
+            );
+          } else {
+            ImmichToast.show(
+              context: context,
+              msg: "home_page_add_to_album_success".tr(
+                namedArgs: {
+                  "album": album.albumName,
+                  "added": result.successfullyAdded.toString(),
+                },
+              ),
+              toastType: ToastType.success,
+            );
+          }
+
+          selectionEnabledHook.value = false;
+        }
+      }
+
+      void onCreateNewAlbum() async {
+        final Iterable<Asset> assets = remoteOnlySelection();
+        if (assets.isEmpty) {
+          return;
+        }
+        final result = await albumService.createAlbumWithGeneratedName(assets);
+
+        if (result != null) {
+          ref.watch(albumProvider.notifier).getAllAlbums();
+          selectionEnabledHook.value = false;
+
+          AutoRouter.of(context).push(AlbumViewerRoute(albumId: result.id));
+        }
       }
 
       return SafeArea(
         bottom: !multiselectEnabled.state,
-        top: !multiselectEnabled.state,
+        top: true,
         child: Stack(
           children: [
             CustomScrollView(
               slivers: [
-                multiselectEnabled.state
-                    ? const SliverToBoxAdapter(
-                        child: SizedBox(
-                          height: 70,
-                          child: null,
-                        ),
-                      )
-                    : ImmichSliverAppBar(
-                        onPopBack: reloadAllAsset,
-                      ),
+                if (!multiselectEnabled.state)
+                  ImmichSliverAppBar(
+                    onPopBack: reloadAllAsset,
+                  ),
               ],
             ),
             Padding(
-              padding: const EdgeInsets.only(top: 60.0, bottom: 0.0),
+              padding: EdgeInsets.only(
+                top: selectionEnabledHook.value ? 0 : 60,
+                bottom: 0.0,
+              ),
               child: ImmichAssetGrid(
                 renderList: renderList,
                 assetsPerRow:
@@ -86,15 +171,17 @@ class HomePage extends HookConsumerWidget {
                 showStorageIndicator: appSettingService
                     .getSetting(AppSettingsEnum.storageIndicator),
                 listener: selectionListener,
-                selectionActive: multiselectEnabled.state,
+                selectionActive: selectionEnabledHook.value,
               ),
             ),
-            if (multiselectEnabled.state) ...[
+            if (selectionEnabledHook.value)
               ControlBottomAppBar(
                 onShare: onShareAssets,
                 onDelete: onDelete,
+                onAddToAlbum: onAddToAlbum,
+                albums: albums,
+                onCreateNewAlbum: onCreateNewAlbum,
               ),
-            ],
           ],
         ),
       );