Update redirect picture in documentation

* fix(server): Server freezes when getting statistic
* remove dead code

.github/workflows/build_push_docker_latest.yml

@@ -26,6 +26,12 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push Immich Mono Repo
         uses: docker/build-push-action@v3.2.0
         with:
@@ -33,8 +39,11 @@ jobs:
           file: ./server/Dockerfile
           platforms: linux/arm/v7,linux/amd64,linux/arm64
           push: true
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           tags: |
             altran1502/immich-server:latest
+            ghcr.io/${{ github.repository_owner }}/immich-server:latest
 
   build_and_push_machine_learning_latest:
     runs-on: ubuntu-latest
@@ -54,6 +63,12 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and Push Machine Learning
         uses: docker/build-push-action@v3.2.0
         with:
@@ -61,8 +76,11 @@ jobs:
           file: ./machine-learning/Dockerfile
           platforms: linux/arm/v7,linux/amd64,linux/arm64
           push: true
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           tags: |
             altran1502/immich-machine-learning:latest
+            ghcr.io/${{ github.repository_owner }}/immich-machine-learning:latest
 
   build_and_push_web_latest:
     runs-on: ubuntu-latest
@@ -81,6 +99,12 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and Push Web
         uses: docker/build-push-action@v3.2.0
         with:
@@ -91,6 +115,7 @@ jobs:
           push: true
           tags: |
             altran1502/immich-web:latest
+            ghcr.io/${{ github.repository_owner }}/immich-web:latest
 
   build_and_push_nginx_latest:
     runs-on: ubuntu-latest
@@ -109,6 +134,12 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and Push Proxy
         uses: docker/build-push-action@v3.2.0
         with:
@@ -118,3 +149,4 @@ jobs:
           push: true
           tags: |
             altran1502/immich-proxy:latest
+            ghcr.io/${{ github.repository_owner }}/immich-proxy:latest

.github/workflows/build_push_docker_staging.yml

@@ -27,6 +27,13 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        if: ${{ github.repository == 'immich-app/immich' }}
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push Immich Mono Repo
         uses: docker/build-push-action@v3.2.0
         with:
@@ -34,9 +41,13 @@ jobs:
           file: ./server/Dockerfile
           platforms: linux/arm/v7,linux/amd64,linux/arm64
           push: ${{ github.event_name == 'pull_request' && github.repository == 'immich-app/immich' }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           tags: |
             altran1502/immich-server:staging
             altran1502/immich-server:${{ github.event.pull_request.number }}
+            ghcr.io/${{ github.repository_owner }}/immich-server:staging
+            ghcr.io/${{ github.repository_owner }}/immich-server:${{ github.event.pull_request.number }}
 
   build_and_push_machine_learning_staging:
     runs-on: ubuntu-latest
@@ -57,6 +68,13 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        if: ${{ github.repository == 'immich-app/immich' }}
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and Push Machine Learning
         uses: docker/build-push-action@v3.2.0
         with:
@@ -64,9 +82,13 @@ jobs:
           file: ./machine-learning/Dockerfile
           platforms: linux/arm/v7,linux/amd64,linux/arm64
           push: ${{ github.event_name == 'pull_request' && github.repository == 'immich-app/immich' }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           tags: |
             altran1502/immich-machine-learning:staging
             altran1502/immich-machine-learning:${{ github.event.pull_request.number }}
+            ghcr.io/${{ github.repository_owner }}/immich-machine-learning:staging
+            ghcr.io/${{ github.repository_owner }}/immich-machine-learning:${{ github.event.pull_request.number }}
 
   build_and_push_web_staging:
     runs-on: ubuntu-latest
@@ -86,6 +108,13 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        if: ${{ github.repository == 'immich-app/immich' }}
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and Push Web
         uses: docker/build-push-action@v3.2.0
         with:
@@ -97,6 +126,8 @@ jobs:
           tags: |
             altran1502/immich-web:staging
             altran1502/immich-web:${{ github.event.pull_request.number }}
+            ghcr.io/${{ github.repository_owner }}/immich-web:staging
+            ghcr.io/${{ github.repository_owner }}/immich-web:${{ github.event.pull_request.number }}
 
   build_and_push_nginx_staging:
     runs-on: ubuntu-latest
@@ -116,6 +147,13 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        if: ${{ github.repository == 'immich-app/immich' }}
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and Push Proxy
         uses: docker/build-push-action@v3.2.0
         with:
@@ -126,3 +164,5 @@ jobs:
           tags: |
             altran1502/immich-proxy:staging
             altran1502/immich-proxy:${{ github.event.pull_request.number }}
+            ghcr.io/${{ github.repository_owner }}/immich-proxy:staging
+            ghcr.io/${{ github.repository_owner }}/immich-proxy:${{ github.event.pull_request.number }}

.github/workflows/build_push_server_release.yml

@@ -12,12 +12,12 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
         with:
-          ref: "main"
+          ref: 'main'
           fetch-depth: 0
 
-      - name: "Get Previous tag"
+      - name: 'Get Previous tag'
         id: previoustag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        uses: 'WyriHaximus/github-action-get-previous-tag@v1'
         with:
           fallback: latest
 
@@ -34,6 +34,13 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Build and push immich-server release
         uses: docker/build-push-action@v3.2.0
         with:
@@ -41,9 +48,13 @@ jobs:
           file: ./server/Dockerfile
           platforms: linux/arm/v7,linux/amd64,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           tags: |
             altran1502/immich-server:${{ steps.previoustag.outputs.tag }}
             altran1502/immich-server:release
+            ghcr.io/${{ github.repository_owner }}/immich-server:${{ steps.previoustag.outputs.tag }}
+            ghcr.io/${{ github.repository_owner }}/immich-server:release
 
   build_and_push_machine_learning_release:
     runs-on: ubuntu-latest
@@ -52,9 +63,9 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - name: "Get Previous tag"
+      - name: 'Get Previous tag'
         id: previoustag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        uses: 'WyriHaximus/github-action-get-previous-tag@v1'
         with:
           fallback: latest
       - name: Set up QEMU
@@ -67,6 +78,12 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and Push Machine Learning
         uses: docker/build-push-action@v3.2.0
         with:
@@ -74,9 +91,13 @@ jobs:
           file: ./machine-learning/Dockerfile
           platforms: linux/arm/v7,linux/amd64,linux/arm64
           push: true
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           tags: |
             altran1502/immich-machine-learning:${{ steps.previoustag.outputs.tag }}
             altran1502/immich-machine-learning:release
+            ghcr.io/${{ github.repository_owner }}/immich-machine-learning:${{ steps.previoustag.outputs.tag }}
+            ghcr.io/${{ github.repository_owner }}/immich-machine-learning:release
 
   build_and_push_web_release:
     runs-on: ubuntu-latest
@@ -84,12 +105,12 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
         with:
-          ref: "main"
+          ref: 'main'
           fetch-depth: 0
 
-      - name: "Get Previous tag"
+      - name: 'Get Previous tag'
         id: previoustag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        uses: 'WyriHaximus/github-action-get-previous-tag@v1'
         with:
           fallback: latest
 
@@ -106,6 +127,13 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Build and push immich-web release
         uses: docker/build-push-action@v3.2.0
         with:
@@ -117,6 +145,8 @@ jobs:
           tags: |
             altran1502/immich-web:${{ steps.previoustag.outputs.tag }}
             altran1502/immich-web:release
+            ghcr.io/${{ github.repository_owner }}/immich-web:${{ steps.previoustag.outputs.tag }}
+            ghcr.io/${{ github.repository_owner }}/immich-web:release
 
   build_and_push_nginx_release:
     runs-on: ubuntu-latest
@@ -124,12 +154,12 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
         with:
-          ref: "main"
+          ref: 'main'
           fetch-depth: 0
 
-      - name: "Get Previous tag"
+      - name: 'Get Previous tag'
         id: previoustag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        uses: 'WyriHaximus/github-action-get-previous-tag@v1'
         with:
           fallback: latest
 
@@ -146,6 +176,13 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Build and push immich-proxy release
         uses: docker/build-push-action@v3.2.0
         with:
@@ -156,3 +193,5 @@ jobs:
           tags: |
             altran1502/immich-proxy:release
             altran1502/immich-proxy:${{ steps.previoustag.outputs.tag }}
+            ghcr.io/${{ github.repository_owner }}/immich-proxy:${{ steps.previoustag.outputs.tag }}
+            ghcr.io/${{ github.repository_owner }}/immich-proxy:release

README.md

@@ -22,7 +22,7 @@
 
 - ⚠️ 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!**
+- ⚠️ **Do not use the app as the only way to store your photos and videos!**
 
 ## Content
 
@@ -35,6 +35,10 @@
 - [Support The Project](#support-the-project)
 - [Known Issues](#known-issues)
 
+## Documentation
+
+You can find the main documentation, including installation guides, at https://immich.app/.
+
 ## Demo
 
 You can access the web demo at https://demo.immich.app

docker/.env.example

@@ -67,3 +67,14 @@ JWT_SECRET=
 # 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=
+
+####################################################################################
+# Alternative Service Addresses - Optional
+####################################################################################
+
+# This is an advanced feature for users who may be running their immich services on different hosts. It will not change which address or port that services bind to within their containers, but it will change where other services look for their peers.
+# Note: immich-microservices is bound to 3002, but no references are made
+
+# IMMICH_WEB_URL=http://immich-web:3000
+# IMMICH_SERVER_URL=http://immich-server:3001
+# IMMICH_MACHINE_LEARNING_URL=http://immich-machine-learning:3003

docker/docker-compose.dev.yml

@@ -68,6 +68,9 @@ services:
     command: npm run dev --host
     env_file:
       - .env
+    environment:
+      # Rename these values for svelte public interface
+      - PUBLIC_IMMICH_SERVER_URL=${IMMICH_SERVER_URL}
     ports:
       - 3000:3000
       - 24678:24678
@@ -100,6 +103,10 @@ services:
   immich-proxy:
     container_name: immich_proxy
     image: immich-proxy-dev:latest
+    environment:
+      # Make sure these values get passed through from the env file
+      - IMMICH_SERVER_URL
+      - IMMICH_WEB_URL
     build:
       context: ../nginx
       dockerfile: Dockerfile

docker/docker-compose.staging.yml

@@ -47,6 +47,9 @@ services:
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
     env_file:
       - .env
+    environment:
+      # Rename these values for svelte public interface
+      - PUBLIC_IMMICH_SERVER_URL=${IMMICH_SERVER_URL}
     restart: always
 
   redis:
@@ -71,6 +74,10 @@ services:
   immich-proxy:
     container_name: immich_proxy
     image: altran1502/immich-proxy:staging
+    environment:
+      # Make sure these values get passed through from the env file
+      - IMMICH_SERVER_URL
+      - IMMICH_WEB_URL
     ports:
       - 2283:8080
     logging:

docker/docker-compose.test.yml

@@ -1,4 +1,4 @@
-version: "3.8"
+version: '3.8'
 
 services:
   immich-server-test:
@@ -9,7 +9,7 @@ services:
       target: builder
     command: npm run test:e2e
     expose:
-      - "3000"
+      - '3000'
     volumes:
       - ../server:/usr/src/app
       - /usr/src/app/node_modules

docker/docker-compose.yml

@@ -47,6 +47,9 @@ services:
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
     env_file:
       - .env
+    environment:
+      # Rename these values for svelte public interface
+      - PUBLIC_IMMICH_SERVER_URL=${IMMICH_SERVER_URL}
     restart: always
 
   redis:
@@ -71,6 +74,10 @@ services:
   immich-proxy:
     container_name: immich_proxy
     image: altran1502/immich-proxy:release
+    environment:
+      # Make sure these values get passed through from the env file
+      - IMMICH_SERVER_URL
+      - IMMICH_WEB_URL
     ports:
       - 2283:8080
     logging:

docs/.gitignore

@@ -18,3 +18,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

docs/docs/FAQ.md

@@ -2,4 +2,18 @@
 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

@@ -20,14 +20,23 @@ This environment includes the following services:
 
 All the services are packaged to run as with single Docker Compose command.
 
-After cloning the project, from the root directory run
+### Instructions
+
+1. Clone the project repo.
+2. Run `cp docker/.env.example docker/.env`.
+3. Edit `docker/.env` to provide values for the required variables `UPLOAD_LOCATION` and `JWT_SECRET`.
+4. From the root directory, run:
 
 ```bash title="Start development server"
 make dev # required Makefile installed on the system.
 ```
 
+5. Access the dev instance in your browser at http://localhost:2283, or connect via the mobile app.
+
 All the services will be started with hot-reloading enabled for a quick feedback loop.
 
+You can access the web from `http://your-machine-ip:2283` or `http://localhost:2283` and access the server from the mobile app at `http://your-machine-ip:2283/api`
+
 ### Mobile app
 
 The mobile app `(/mobile)` will required Flutter toolchain to be installed on your system.
@@ -80,3 +89,15 @@ OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generato
 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.
+
+## Database migrations
+
+After making any changes in the `server/libs/database/src/entities`, a database migration need to run in order to register the changes in the database. Follow the steps below to create a new migration.
+
+1. Attached to the server container shell.
+2. Run 
+```bash
+npm run typeorm -- migration:generate ./libs/database/src/<migration-name> -d libs/database/src/config/database.config.ts
+```
+3. Check if the migration file makes sense.
+4. Move the migration file to folder `server/libs/database/src/migrations` in your code editor.

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

@@ -22,7 +22,7 @@ The script will perform the following actions:
 
 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.
+The directory which is used to store the library files is `./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

@@ -9,7 +9,7 @@ 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)
+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
@@ -28,7 +28,7 @@ Install Immich using Portainer's Stack feature.
   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.
+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 into the editor.
 10. Switch back to "**Simple Mode**".
 
 <img
@@ -39,8 +39,8 @@ Install Immich using Portainer's Stack feature.
 />
 
 * 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
+* Populate `UPLOAD_LOCATION` with your preferred 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="Generate secure JWT_SECRET key"
 openssl rand -base64 128

docs/docs/installation/recommended-installation.md

@@ -69,9 +69,7 @@ LOG_LEVEL=simple
 # 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=
+JWT_SECRET=
 
 ###################################################################################
 # Reverse Geocoding
@@ -102,8 +100,8 @@ 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
+* Populate `UPLOAD_LOCATION` with your preferred 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

docs/docs/installation/requirements.md

@@ -12,14 +12,14 @@ Hardware and software requirements for Immich
 - [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.
+You can also use Podman to run the application. However, additional configuration 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.
+- **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.
+- **CPU**: At least 2 cores, preferred 4 cores.
 
 ## Installation methods
 

docs/docs/installation/unraid-installation.md

@@ -7,7 +7,7 @@ sidebar_position: 5
 Install Immich on Unraid.
 
 :::info Community contribution
-Please follow this community contributed [article](https://mfaz.dev/posts/immich-unraid/) to install Immich on Unraid.
+Please follow [this community contributed article](https://mfaz.dev/posts/immich-unraid/) to install Immich on Unraid.
 :::
 
 :::tip

docs/docs/overview/logo-meaning.md

@@ -10,7 +10,7 @@ I really like the Japanese culture, especially the books, history, and food. The
 
 ![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.
+One of my favorite books is [Taikō](https://www.goodreads.com/book/show/336228.Taiko), it is a 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."
 

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

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 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.
+As our hosts in the [selfhosted.show - In the episode 'The-organization-which-must-not-be-named is a Hostile Actor'](https://selfhosted.show/79?t=1418) said, this is a massive undertaking that 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.
 

docs/docs/overview/technology-stack.md

@@ -4,7 +4,7 @@ sidebar_position: 4
 
 # Technology stack
 
-The app is built with the following technologies
+The app is built with the following technologies:
 
 ## Frontend
 * [Flutter](https://flutter.dev/) for the mobile app

docs/docs/usage/automatic-backup.md

@@ -31,5 +31,5 @@ A native Android notification shows up when the background upload is in progress
 :::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.
+* If you reopen the app and the first page you see is the backup page, the counts will not 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

@@ -8,17 +8,19 @@ 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
+
+- 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
@@ -58,10 +60,9 @@ immich upload --email testuser@email.com --password password --server http://192
 ### Run from source
 
 ```bash title="Clone Repository"
-git clone https://github.com/alextran1502/immich-cli
+git clone https://github.com/immich-app/CLI
 ```
 
-
 ```bash title="Install dependencies"
 npm install
 ```

docs/docs/usage/oauth.md

@@ -0,0 +1,76 @@
+---
+sidebar_position: 5
+---
+
+# OAuth Authentication
+
+This page contains details about using OAuth 2 in Immich.
+
+## Overview
+
+Immich supports 3rd party authentication via [OpenID Connect][oidc] (OIDC), an identity layer built on top of OAuth2. OIDC is supported by most identity providers, including:
+
+- [Authentik](https://goauthentik.io/integrations/sources/oauth/#openid-connect)
+- [Authelia](https://www.authelia.com/configuration/identity-providers/open-id-connect/)
+- [Okta](https://www.okta.com/openid-connect/)
+- [Google](https://developers.google.com/identity/openid-connect/openid-connect)
+
+## Prerequisites
+
+Before enabling OAuth in Immich, a new client application needs to be configured in the 3rd-party authentication server. While the specifics of this setup vary from provider to provider, the general approach should be the same.
+
+1. Create a new (Client) Application
+
+   1. The **Provider** type should be `OpenID Connect` or `OAuth2`
+   2. The **Client type** should be `Confidential`
+   3. The **Application** type should be `Web`
+   4. The **Grant** type should be `Authorization Code`
+
+2. Configure Redirect URIs/Origins
+
+  The **Sign-in redirect URIs** should include:
+
+  * All URLs that will be used to access the login page of the Immich web client (eg. `http://localhost:2283/auth/login`, `http://192.168.0.200:2283/auth/login`, `https://immich.example.com/auth/login`)
+  * Mobile app redirect URL `app.immich:/`
+  
+:::caution
+You **MUST** include `app.immich:/` as the redirect URI for iOS and Android mobile app to work properly. 
+
+**Authentik example**
+<img src={require('./img/authentik-redirect.png').default} title="Authentik Redirection URL" width="80%" />
+:::
+
+## Enable OAuth
+
+Once you have a new OAuth client application configured, Immich can be configured using the following environment variables:
+
+| Key                 | Type    | Default              | Description                                                               |
+| ------------------- | ------- | -------------------- | ------------------------------------------------------------------------- |
+| OAUTH_ENABLED       | boolean | false                | Enable/disable OAuth2                                                     |
+| OAUTH_ISSUER_URL    | URL     | (required)           | Required. Self-discovery URL for client (from previous step)              |
+| OAUTH_CLIENT_ID     | string  | (required)           | Required. Client ID (from previous step)                                  |
+| OAUTH_CLIENT_SECRET | string  | (required)           | Required. Client Secret (previous step                                    |
+| OAUTH_SCOPE         | string  | openid email profile | Full list of scopes to send with the request (space delimited)            |
+| OAUTH_AUTO_REGISTER | boolean | true                 | When true, will automatically register a user the first time they sign in |
+| OAUTH_BUTTON_TEXT   | string  | Login with OAuth     | Text for the OAuth button on the web                                      |
+
+:::info
+The Issuer URL should look something like the following, and return a valid json document.
+
+- `https://accounts.google.com/.well-known/openid-configuration`
+- `http://localhost:9000/application/o/immich/.well-known/openid-configuration`
+
+The `.well-known/openid-configuration` part of the url is optional and will be automatically added during discovery.
+:::
+
+Here is an example of a valid configuration for setting up Immich to use OAuth with Authentik:
+
+```
+OAUTH_ENABLED=true
+OAUTH_ISSUER_URL=http://192.168.0.187:9000/application/o/immich
+OAUTH_CLIENT_ID=f08f9c5b4f77dcfd3916b1c032336b5544a7b368
+OAUTH_CLIENT_SECRET=6fe2e697644da6ff6aef73387a457d819018189086fa54b151a6067fbb884e75f7e5c90be16d3c688cf902c6974817a85eab93007d76675041eaead8c39cf5a2
+OAUTH_BUTTON_TEXT=Login with Authentik
+```
+
+[oidc]: https://openid.net/connect/

docs/docusaurus.config.js

@@ -58,7 +58,7 @@ const config = {
     ({
       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!`,
+        content: `⚠️ The project is under <strong>very active</strong> development. Expect bugs and changes. Do not use it as <strong>the only way</strong> to store your photos and videos!`,
         backgroundColor: "#593f00",
         textColor: "#ffefc9",
         isCloseable: false,

docs/src/pages/index.module.css

@@ -54,3 +54,13 @@
 .introButton:hover {
   color: #000000;
 }
+
+.demoButton {
+  background-color: aquamarine;
+  color: #000000;
+  border-radius: 50px;
+}
+
+.demoButton:hover {
+  color: #000000;
+}

docs/src/pages/index.tsx

@@ -40,6 +40,15 @@ function HomepageHeader() {
               Installation
             </Link>
           </div>
+
+          <div className={styles.buttons}>
+            <Link
+              className={clsx("button button--lg", styles.demoButton)}
+              to="https://demo.immich.app/"
+            >
+              Demo
+            </Link>
+          </div>
         </div>
 
         <img src="/img/immich-screenshots.webp" alt="logo" />

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>

machine-learning/Dockerfile

@@ -1,43 +1,42 @@
 
-# Build stage
 FROM node:16-bullseye-slim as builder
 
 ARG DEBIAN_FRONTEND=noninteractive
 
 WORKDIR /usr/src/app
 
-COPY package.json package-lock.json ./
-
 RUN apt-get update
 RUN apt-get install gcc g++ make cmake python3 python3-pip ffmpeg -y
 
+COPY package.json package-lock.json ./
+
 RUN npm ci
 RUN npm rebuild @tensorflow/tfjs-node --build-from-source
 
 COPY . .
 
+
+FROM builder as prod
+
 RUN npm run build
 
+RUN npm prune --omit=dev
+
 
-# Prod stage
 FROM node:16-bullseye-slim
 
 ARG DEBIAN_FRONTEND=noninteractive
 
 WORKDIR /usr/src/app
 
-COPY package.json package-lock.json ./
-COPY entrypoint.sh ./
-
-RUN mkdir -p /usr/src/app/dist \
-  && mkdir -p /usr/src/app/node_modules \
-  && apt-get update \
+RUN apt-get update \
   && apt-get install -y ffmpeg \
   && rm -rf /var/cache/apt/lists
 
-COPY --from=builder /usr/src/app/node_modules ./node_modules
-COPY --from=builder /usr/src/app/dist ./dist
+COPY --from=prod /usr/src/app/node_modules ./node_modules
+COPY --from=prod /usr/src/app/dist ./dist
 
-RUN npm prune --production
+COPY package.json package-lock.json ./
+COPY entrypoint.sh ./
 
-# CMD [ "node", "dist/main" ]
+# CMD [ "node", "dist/main" ]

mobile/android/app/build.gradle

@@ -33,7 +33,7 @@ if (keystorePropertiesFile.exists()) {
 
 
 android {
-    compileSdkVersion flutter.compileSdkVersion
+    compileSdkVersion 33
 
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8

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

@@ -12,15 +12,26 @@
       </intent-filter>
 
     </activity>
+
+
+    <activity
+      android:name="com.linusu.flutter_web_auth.CallbackActivity"
+      android:exported="true">
+      <intent-filter android:label="flutter_web_auth">
+        <action android:name="android.intent.action.VIEW" />
+        <category android:name="android.intent.category.DEFAULT" />
+        <category android:name="android.intent.category.BROWSABLE" />
+        <data android:scheme="app.immich" />
+      </intent-filter>
+    </activity>
     <!-- Don't delete the meta-data below.
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
     <meta-data android:name="flutterEmbedding" android:value="2" />
     <!-- Disables default WorkManager initialization to use our custom initialization -->
     <provider
-        android:name="androidx.startup.InitializationProvider"
-        android:authorities="${applicationId}.androidx-startup"
-        tools:node="remove">
-    </provider>
+      android:name="androidx.startup.InitializationProvider"
+      android:authorities="${applicationId}.androidx-startup"
+      tools:node="remove"></provider>
   </application>
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

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

@@ -134,13 +134,13 @@ class BackupWorker(ctx: Context, params: WorkerParameters) : ListenableWorker(ct
     }
 
     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()
     }
 

mobile/android/fastlane/Fastfile

@@ -35,8 +35,8 @@ platform :android do
       task: 'bundle', 
       build_type: 'Release',
       properties: {
-        "android.injected.version.code" => 53,
-        "android.injected.version.name" => "1.34.0",
+        "android.injected.version.code" => 55,
+        "android.injected.version.name" => "1.36.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/54.txt

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

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

@@ -0,0 +1,3 @@
+* Added OAuth login option
+* Tidy-up dependencies, remove unused, replace rarely used ones
+* Added view LivePhotos feature

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

@@ -15,7 +15,7 @@ Once set up, this app can be used as photo and video backup solution directly fr
 * Object detection based on COCO SSD.
 * Search assets based on tags and exif data (lens, make, model, orientation)
 * Upload assets from your local computer/server using <a href='https://www.npmjs.com/package/immich' target='_blank' rel='nofollow'>immich cli tools</a>
-* [Optional] Reserve geocoding using Mapbox (Generous free-tier of 100,000 search/month)
+* Reverse geocoding from image exif data
 * Show asset's location information on map (OpenStreetMap).
 * Show curated places on the search page
 * Show curated objects on the search page

mobile/android/fastlane/report.xml

@@ -5,17 +5,17 @@
     
     
       
-      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000233">
+      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000315">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="1: bundleRelease" time="61.699536">
+      <testcase classname="fastlane.lanes" name="1: bundleRelease" time="185.624188">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="2: upload_to_play_store" time="46.210553">
+      <testcase classname="fastlane.lanes" name="2: upload_to_play_store" time="39.180655">
         
       </testcase>
     

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

@@ -1,3 +1,3 @@
 This is a client app for Immich Server and you will need to run/manage the server on your own in order to use the app.
 
-Github URL: https://github.com/alextran1502/immich
+Github URL: https://github.com/immich-app/immich

mobile/assets/i18n/en-US.json

@@ -109,7 +109,9 @@
   "login_form_err_invalid_email": "Invalid Email",
   "login_form_err_leading_whitespace": "Leading whitespace",
   "login_form_err_trailing_whitespace": "Trailing whitespace",
-  "login_form_failed_login": "Error logging you in, check server url, email and password",
+  "login_form_failed_login": "Error logging you in, check server URL, email and password",
+  "login_form_failed_get_oauth_server_config": "Error logging using OAuth, check server URL",
+  "login_form_failed_get_oauth_server_disable": "OAuth feature is not available on this server",
   "login_form_label_email": "Email",
   "login_form_label_password": "Password",
   "login_form_password_hint": "password",

mobile/assets/i18n/ko-KR.json

@@ -1,6 +1,9 @@
 {
   "album_info_card_backup_album_excluded": "제외됨",
   "album_info_card_backup_album_included": "포함됨",
+  "album_thumbnail_card_item": "1개 항목",
+  "album_thumbnail_card_items": "{}개 항목",
+  "album_thumbnail_card_shared": " · 공유",
   "album_viewer_appbar_share_delete": "앨범 삭제",
   "album_viewer_appbar_share_err_delete": "앨범 삭제 실패",
   "album_viewer_appbar_share_err_leave": "앨범에서 나가지 못했습니다",
@@ -9,6 +12,8 @@
   "album_viewer_appbar_share_leave": "앨범 나가기",
   "album_viewer_appbar_share_remove": "앨범에서 제거",
   "album_viewer_page_share_add_users": "사용자 추가",
+  "asset_list_settings_subtitle": "사진 배열 레이아웃 설정",
+  "asset_list_settings_title": "사진 배열",
   "backup_album_selection_page_albums_device": "기기의 앨범({})",
   "backup_album_selection_page_albums_tap": "포함하려면 탭하고 제외하려면 두 번 탭하세요",
   "backup_album_selection_page_assets_scatter": "미디어파일은 여러 앨범에 분산될 수 있습니다. 따라서 백업 프로세스 중에 앨범에서 포함하거나 제외할 수 있습니다.",
@@ -16,25 +21,29 @@
   "backup_album_selection_page_selection_info": "선택 정보",
   "backup_album_selection_page_total_assets": "총 미디어파일 수",
   "backup_all": "모두",
-  "backup_background_service_default_notification": "새 미디어파일 확인중...",
-  "backup_background_service_upload_failure_notification": "{} 업로드 실패",
-  "backup_background_service_in_progress_notification": "미디어파일 백업 중...",
-  "backup_background_service_current_upload_notification": "{} 업로드 중",
-  "backup_background_service_error_title": "백업 오류",
-  "backup_background_service_connection_failed_message": "서버에 연결하지 못했습니다. 다시 시도하는 중...",
   "backup_background_service_backup_failed_message": "미디어파일을 백업하지 못했습니다. 다시 시도하는 중...",
+  "backup_background_service_connection_failed_message": "서버에 연결하지 못했습니다. 다시 시도하는 중...",
+  "backup_background_service_current_upload_notification": "{} 업로드 중",
+  "backup_background_service_default_notification": "새 미디어파일 확인중...",
+  "backup_background_service_error_title": "백업 오류",
+  "backup_background_service_in_progress_notification": "미디어파일 백업 중...",
+  "backup_background_service_upload_failure_notification": "{} 업로드 실패",
   "backup_controller_page_albums": "백업대상",
+  "backup_controller_page_background_battery_info_link": "사용 가이드",
+  "backup_controller_page_background_battery_info_message": "최상의 백업 환경을 위해 Immich 앱의 백그라운드 활동을 제한하는 배터리 최적화기능을 꺼주세요.\n\n휴대폰마다 설정방법이 다르므로 제조업체별로 설정방법을 확인하세요.",
+  "backup_controller_page_background_battery_info_ok": "확인",
+  "backup_controller_page_background_battery_info_title": "배터리 최적화",
+  "backup_controller_page_background_charging": "충전 중일 때만",
+  "backup_controller_page_background_configure_error": "백그라운드 서비스를 구성하지 못했습니다",
+  "backup_controller_page_background_description": "백그라운드 서비스를 켜서 앱을 열지 않고도 새 미디어파일을 자동으로 백업합니다.",
+  "backup_controller_page_background_is_off": "자동 백그라운드 백업이 꺼져 있습니다",
+  "backup_controller_page_background_is_on": "자동 백그라운드 백업이 켜져 있습니다",
+  "backup_controller_page_background_turn_off": "백그라운드 서비스 끄기",
+  "backup_controller_page_background_turn_on": "백그라운드 서비스 켜기",
+  "backup_controller_page_background_wifi": "WiFi에서만",
   "backup_controller_page_backup": "백업",
   "backup_controller_page_backup_selected": "선택됨: ",
   "backup_controller_page_backup_sub": "백업된 사진 및 비디오",
-  "backup_controller_page_background_description": "백그라운드 서비스를 켜서 앱을 열지 않고도 새 미디어파일을 자동으로 백업합니다.",
-  "backup_controller_page_background_wifi": "WiFi에서만",
-  "backup_controller_page_background_charging": "충전 중일 때만",
-  "backup_controller_page_background_is_on": "자동 백그라운드 백업이 켜져 있습니다",
-  "backup_controller_page_background_is_off": "자동 백그라운드 백업이 꺼져 있습니다",
-  "backup_controller_page_background_turn_on": "백그라운드 서비스 켜기",
-  "backup_controller_page_background_turn_off": "백그라운드 서비스 끄기",
-  "backup_controller_page_background_configure_error": "백그라운드 서비스를 구성하지 못했습니다",
   "backup_controller_page_cancel": "취소",
   "backup_controller_page_created": "생성일: {}",
   "backup_controller_page_desc_backup": "새 미디어파일을 서버에 자동으로 업로드하려면 백업을 켜주세요.",
@@ -60,9 +69,28 @@
   "backup_controller_page_uploading_file_info": "파일 정보 업로드 중",
   "backup_err_only_album": "유일한 앨범은 제거할 수 없습니다",
   "backup_info_card_assets": "미디어",
+  "cache_settings_album_thumbnails": "라이브러리 페이지 썸네일 ({} 미디어)",
+  "cache_settings_clear_cache_button": "캐시 지우기",
+  "cache_settings_clear_cache_button_title": "앱의 캐시를 지웁니다. 이 작업은 캐시가 다시 빌드될 때까지 앱의 성능에 상당한 영향을 미칩니다.",
+  "cache_settings_image_cache_size": "이미재 캐시 크기 ({} 미디어)",
+  "cache_settings_statistics_album": "라이브러리 썸네일",
+  "cache_settings_statistics_assets": "{} 미디어 ({})",
+  "cache_settings_statistics_full": "전체 이미지",
+  "cache_settings_statistics_shared": "공유 앨범 썸네일",
+  "cache_settings_statistics_thumbnail": "썸네일",
+  "cache_settings_statistics_title": "캐시 사용률",
+  "cache_settings_subtitle": "Immich 앱의 캐싱 동작 제어",
+  "cache_settings_thumbnail_size": "썸네일 캐시 크기 ({} 미디어)",
+  "cache_settings_title": "캐시 설정",
+  "control_bottom_app_bar_add_to_album": "앨범에 추가",
+  "control_bottom_app_bar_album_info": "{} 항목",
+  "control_bottom_app_bar_album_info_shared": "{} 항목 · 공유됨",
+  "control_bottom_app_bar_create_new_album": "앨범 생성",
   "control_bottom_app_bar_delete": "삭제",
-  "create_shared_album_page_share": "공유",
+  "control_bottom_app_bar_share": "공유",
+  "create_album_page_untitled": "제목없음",
   "create_shared_album_page_create": "만들기",
+  "create_shared_album_page_share": "공유",
   "create_shared_album_page_share_add_assets": "사진 추가",
   "create_shared_album_page_share_select_photos": "사진 선택",
   "daily_title_text_date": "E, M월 d일",
@@ -75,6 +103,12 @@
   "exif_bottom_sheet_description": "설명 추가...",
   "exif_bottom_sheet_details": "상세정보",
   "exif_bottom_sheet_location": "위치",
+  "experimental_settings_subtitle": "문제시 책임지지 않습니다!",
+  "experimental_settings_title": "실험적기능",
+  "home_page_add_to_album_conflicts": "{album} 앨범에 {added} 미디어를 추가했습니다. {failed} 이미 앨범에 있는 항목입니다.",
+  "home_page_add_to_album_success": "{album} 앨범에 {added} 미디어를 추가했습니다. ",
+  "library_page_albums": "앨범",
+  "library_page_new_album": "새 앨범",
   "login_form_button_text": "로그인",
   "login_form_email_hint": "youremail@email.com",
   "login_form_endpoint_hint": "https://your-server-ip:port/api",
@@ -90,8 +124,8 @@
   "login_form_save_login": "로그인상태 유지",
   "monthly_title_text_date_format": "y년 M월",
   "profile_drawer_client_server_up_to_date": "클라이언트와 서버가 최신 상태입니다",
-  "profile_drawer_sign_out": "로그아웃",
   "profile_drawer_settings": "설정",
+  "profile_drawer_sign_out": "로그아웃",
   "search_bar_hint": "사진 검색",
   "search_page_no_objects": "발견된 사물이\n없습니다",
   "search_page_no_places": "발견된 장소가\n없습니다",
@@ -101,52 +135,47 @@
   "select_additional_user_for_sharing_page_suggestions": "초대 가능한 사용자 제안",
   "select_user_for_sharing_page_err_album": "앨범 생성 실패",
   "select_user_for_sharing_page_share_suggestions": "초대 가능한 사용자 제안",
+  "setting_notifications_notify_failures_grace_period": "백그라운드 백업 실패 알림: {}",
+  "setting_notifications_notify_hours": "{}시간 뒤",
+  "setting_notifications_notify_immediately": "즉시",
+  "setting_notifications_notify_minutes": "{}분 뒤",
+  "setting_notifications_notify_never": "알리지 않음",
+  "setting_notifications_single_progress_subtitle": "미디어별 상세 진행률 표시",
+  "setting_notifications_single_progress_title": "백그라운드 작업 세부 진행률 표시",
+  "setting_notifications_subtitle": "알림 기본 설정 조정",
+  "setting_notifications_title": "알림",
+  "setting_notifications_total_progress_subtitle": "전체 업로드 진행률(완료/전체)",
+  "setting_notifications_total_progress_title": "백그라운드 작업 전체 진행률 표시",
+  "setting_pages_app_bar_settings": "설정",
   "share_add": "추가",
   "share_add_photos": "사진 추가",
   "share_add_title": "새 앨범제목",
   "share_create_album": "앨범 만들기",
+  "share_dialog_preparing": "준비중...",
   "share_invite": "앨범에 초대",
   "sharing_page_album": "공유앨범",
   "sharing_page_description": "공유앨범을 만들어 다른 사용자들과 사진 및 비디오를 공유합니다.",
   "sharing_page_empty_list": "공유앨범 없음",
   "sharing_silver_appbar_create_shared_album": "공유앨범 만들기",
   "sharing_silver_appbar_share_partner": "파트너와 공유",
+  "tab_controller_nav_library": "라이브러리",
   "tab_controller_nav_photos": "사진",
   "tab_controller_nav_search": "검색",
   "tab_controller_nav_sharing": "공유",
-  "tab_controller_nav_library": "라이브러리",
+  "theme_setting_asset_list_storage_indicator_title": "미디어 타일에 스토리지 싱크여부 표시",
+  "theme_setting_asset_list_tiles_per_row_title": "한 줄에 표시할 미디어 수 ({})",
+  "theme_setting_dark_mode_switch": "다크모드",
+  "theme_setting_image_viewer_quality_subtitle": "디테일 이미지 뷰어 품질 조정",
+  "theme_setting_image_viewer_quality_title": "이미지 뷰어 품질",
+  "theme_setting_system_theme_switch": "자동(시스템 설정에 따름)",
+  "theme_setting_theme_subtitle": "앱테마 선택",
+  "theme_setting_theme_title": "테마",
+  "theme_setting_three_stage_loading_subtitle": "이 기능은 로딩 성능을 향상시킬 수 있지만 훨씬 더 많은 데이터를 사용합니다.",
+  "theme_setting_three_stage_loading_title": "3단계 로딩 활성화",
   "version_announcement_overlay_ack": "승인",
   "version_announcement_overlay_release_notes": "릴리스 정보",
   "version_announcement_overlay_text_1": "안녕하세요!",
   "version_announcement_overlay_text_2": "앱에 새로운 업데이트가 있습니다!",
   "version_announcement_overlay_text_3": "특히 WatchTower 또는 서버 응용 프로그램 자동 업데이트를 처리하는 메커니즘을 사용하는 경우 잘못된 구성을 방지하기 위해 docker-compose 및 .env 설정이 최신 상태인지 확인하세요.",
-  "version_announcement_overlay_title": "새 서버 버전 사용 가능 \uD83C\uDF89",
-  "album_thumbnail_card_item": "1개 항목",
-  "album_thumbnail_card_items": "{}개 항목",
-  "album_thumbnail_card_shared": " · 공유",
-  "library_page_albums": "앨범",
-  "library_page_new_album": "새 앨범",
-  "create_album_page_untitled": "제목없음",
-  "share_dialog_preparing": "준비중...",
-  "control_bottom_app_bar_share": "공유",
-  "setting_pages_app_bar_settings": "설정",
-  "theme_setting_theme_title": "테마",
-  "theme_setting_theme_subtitle": "앱테마 선택",
-  "theme_setting_system_theme_switch": "자동(시스템 설정에 따름)",
-  "theme_setting_dark_mode_switch": "다크모드",
-  "theme_setting_image_viewer_quality_title": "이미지 뷰어 품질",
-  "theme_setting_image_viewer_quality_subtitle": "디테일 이미지 뷰어 품질 조정",
-  "theme_setting_three_stage_loading_title": "3단계 로딩 활성화",
-  "theme_setting_three_stage_loading_subtitle": "이 기능은 로딩 성능을 향상시킬 수 있지만 훨씬 더 많은 데이터를 사용합니다.",
-  "asset_list_settings_title": "사진 배열",
-  "asset_list_settings_subtitle": "사진 배열 레이아웃 설정",
-  "theme_setting_asset_list_storage_indicator_title": "미디어 타일에 스토리지 싱크여부 표시",
-  "theme_setting_asset_list_tiles_per_row_title": "한 줄에 표시할 미디어 수 ({})",
-  "setting_notifications_title": "알림",
-  "setting_notifications_subtitle": "알림 기본 설정 조정",
-  "setting_notifications_notify_failures_grace_period": "백그라운드 백업 실패 알림: {}",
-  "setting_notifications_notify_immediately": "즉시",
-  "setting_notifications_notify_minutes": "{}분 뒤",
-  "setting_notifications_notify_hours": "{}시간 뒤",
-  "setting_notifications_notify_never": "알리지 않음"
+  "version_announcement_overlay_title": "새 서버 버전 사용 가능 🎉"
 }

mobile/ios/Podfile.lock

@@ -3,6 +3,8 @@ PODS:
   - flutter_udid (0.0.1):
     - Flutter
     - SAMKeychain
+  - flutter_web_auth (0.5.0):
+    - Flutter
   - fluttertoast (0.0.2):
     - Flutter
     - Toast
@@ -37,6 +39,7 @@ PODS:
 DEPENDENCIES:
   - Flutter (from `Flutter`)
   - flutter_udid (from `.symlinks/plugins/flutter_udid/ios`)
+  - flutter_web_auth (from `.symlinks/plugins/flutter_web_auth/ios`)
   - fluttertoast (from `.symlinks/plugins/fluttertoast/ios`)
   - image_picker_ios (from `.symlinks/plugins/image_picker_ios/ios`)
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
@@ -60,6 +63,8 @@ EXTERNAL SOURCES:
     :path: Flutter
   flutter_udid:
     :path: ".symlinks/plugins/flutter_udid/ios"
+  flutter_web_auth:
+    :path: ".symlinks/plugins/flutter_web_auth/ios"
   fluttertoast:
     :path: ".symlinks/plugins/fluttertoast/ios"
   image_picker_ios:
@@ -86,6 +91,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
   flutter_udid: 0848809dbed4c055175747ae6a45a8b4f6771e1c
+  flutter_web_auth: c25208760459cec375a3c39f6a8759165ca0fa4d
   fluttertoast: 16fbe6039d06a763f3533670197d01fc73459037
   FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
   image_picker_ios: b786a5dcf033a8336a657191401bfdf12017dabb

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 = 68;
+				CURRENT_PROJECT_VERSION = 71;
 				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 = 68;
+				CURRENT_PROJECT_VERSION = 71;
 				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 = 68;
+				CURRENT_PROJECT_VERSION = 71;
 				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.34.0</string>
+    <string>1.36.0</string>
     <key>CFBundleSignature</key>
     <string>????</string>
     <key>CFBundleVersion</key>
-    <string>68</string>
+    <string>71</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.34.0"
+      version_number: "1.36.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.000304">
+      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000333">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="1: increment_version_number" time="0.606546">
+      <testcase classname="fastlane.lanes" name="1: increment_version_number" time="0.777934">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="2: latest_testflight_build_number" time="3.706234">
+      <testcase classname="fastlane.lanes" name="2: latest_testflight_build_number" time="6.375897">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="3: increment_build_number" time="0.657686">
+      <testcase classname="fastlane.lanes" name="3: increment_build_number" time="0.664307">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="4: build_app" time="68.78265">
+      <testcase classname="fastlane.lanes" name="4: build_app" time="88.90147">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="5: upload_to_testflight" time="60.883182">
+      <testcase classname="fastlane.lanes" name="5: upload_to_testflight" time="79.807067">
         
       </testcase>
     

mobile/lib/main.dart

@@ -35,10 +35,12 @@ void main() async {
   await Future.wait([
     Hive.openBox(userInfoBox),
     Hive.openBox<HiveSavedLoginInfo>(hiveLoginInfoBox),
-    Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox),
     Hive.openBox(hiveGithubReleaseInfoBox),
     Hive.openBox(userSettingInfoBox),
-    Hive.openBox<HiveDuplicatedAssets>(duplicatedAssetsBox),
+    if (!Platform.isAndroid) Hive.openBox<HiveBackupAlbums>(hiveBackupInfoBox),
+    if (!Platform.isAndroid)
+      Hive.openBox<HiveDuplicatedAssets>(duplicatedAssetsBox),
+    if (!Platform.isAndroid) Hive.openBox(backgroundBackupInfoBox),
     EasyLocalization.ensureInitialized(),
   ]);
 
@@ -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 {
@@ -65,7 +66,7 @@ class AlbumService {
   }
 
   Future<AlbumResponseDto?> createAlbumWithGeneratedName(
-    Set<AssetResponseDto> assets,
+    Iterable<Asset> assets,
   ) async {
     return createAlbum(
         _getNextAlbumName(await getAlbums(isShared: false)), assets, []);
@@ -81,7 +82,7 @@ class AlbumService {
   }
 
   Future<AddAssetsResponseDto?> addAdditionalAssetToAlbum(
-    Set<AssetResponseDto> assets,
+    Iterable<Asset> assets,
     String albumId,
   ) async {
     try {

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);
@@ -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/services/image_viewer.service.dart

@@ -22,28 +22,58 @@ class ImageViewerService {
     try {
       String fileName = p.basename(asset.originalPath);
 
-      var res = await _apiService.assetApi.downloadFileWithHttpInfo(
-        asset.deviceAssetId,
-        asset.deviceId,
-        isThumb: false,
-        isWeb: false,
-      );
+      // Download LivePhotos image and motion part
+      if (asset.type == AssetTypeEnum.IMAGE && asset.livePhotoVideoId != null) {
+        var imageResponse = await _apiService.assetApi.downloadFileWithHttpInfo(
+          asset.id,
+          isThumb: false,
+          isWeb: false,
+        );
 
-      final AssetEntity? entity;
+        var motionReponse = await _apiService.assetApi.downloadFileWithHttpInfo(
+          asset.livePhotoVideoId!,
+          isThumb: false,
+          isWeb: false,
+        );
 
-      if (asset.type == AssetTypeEnum.IMAGE) {
-        entity = await PhotoManager.editor.saveImage(
-          res.bodyBytes,
+        final AssetEntity? entity;
+
+        final tempDir = await getTemporaryDirectory();
+        File videoFile = await File('${tempDir.path}/livephoto.mov').create();
+        File imageFile = await File('${tempDir.path}/livephoto.heic').create();
+        videoFile.writeAsBytesSync(motionReponse.bodyBytes);
+        imageFile.writeAsBytesSync(imageResponse.bodyBytes);
+
+        entity = await PhotoManager.editor.darwin.saveLivePhoto(
+          imageFile: imageFile,
+          videoFile: videoFile,
           title: p.basename(asset.originalPath),
         );
-      } else {
-        final tempDir = await getTemporaryDirectory();
-        File tempFile = await File('${tempDir.path}/$fileName').create();
-        tempFile.writeAsBytesSync(res.bodyBytes);
-        entity = await PhotoManager.editor.saveVideo(tempFile, title: fileName);
-      }
 
-      return entity != null;
+        return entity != null;
+      } else {
+        var res = await _apiService.assetApi.downloadFileWithHttpInfo(
+          asset.id,
+          isThumb: false,
+          isWeb: false,
+        );
+
+        final AssetEntity? entity;
+
+        if (asset.type == AssetTypeEnum.IMAGE) {
+          entity = await PhotoManager.editor.saveImage(
+            res.bodyBytes,
+            title: p.basename(asset.originalPath),
+          );
+        } else {
+          final tempDir = await getTemporaryDirectory();
+          File tempFile = await File('${tempDir.path}/$fileName').create();
+          tempFile.writeAsBytesSync(res.bodyBytes);
+          entity =
+              await PhotoManager.editor.saveVideo(tempFile, title: fileName);
+        }
+        return entity != null;
+      }
     } catch (e) {
       debugPrint("Error saving file $e");
       return false;

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

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

mobile/lib/modules/asset_viewer/ui/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,17 +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;
 
-  late CachedNetworkImageProvider fullProvider;
-  late CachedNetworkImageProvider previewProvider;
-  late CachedNetworkImageProvider thumbnailProvider;
+  late ImageProvider _fullProvider;
+  late ImageProvider _previewProvider;
+  late ImageProvider _thumbnailProvider;
 
   @override
   Widget build(BuildContext context) {
@@ -32,7 +37,7 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
   }
 
   void handleSwipUpDown(PointerMoveEvent details) {
-    int sensitivity = 10;
+    int sensitivity = 15;
 
     if (_zoomedIn) {
       return;
@@ -68,7 +73,7 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
 
   void _performStateTransition(
     _RemoteImageStatus newStatus,
-    CachedNetworkImageProvider provider,
+    ImageProvider provider,
   ) {
     if (_status == newStatus) return;
 
@@ -90,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);
       }),
     );
   }
@@ -139,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();
@@ -153,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,23 +1,25 @@
 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 {
+class TopControlAppBar extends HookConsumerWidget with PreferredSizeWidget {
   const TopControlAppBar({
     Key? key,
     required this.asset,
     required this.onMoreInfoPressed,
     required this.onDownloadPressed,
     required this.onSharePressed,
-    this.loading = false,
+    required this.onToggleMotionVideo,
+    required this.isPlayingMotionVideo,
   }) : super(key: key);
 
-  final AssetResponseDto asset;
+  final Asset asset;
   final Function onMoreInfoPressed;
-  final Function onDownloadPressed;
+  final VoidCallback? onDownloadPressed;
+  final VoidCallback onToggleMotionVideo;
   final Function onSharePressed;
-  final bool loading;
+  final bool isPlayingMotionVideo;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -38,26 +40,33 @@ class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
         ),
       ),
       actions: [
-        if (loading)
-          Center(
-            child: Container(
-              margin: const EdgeInsets.symmetric(horizontal: 15.0),
-              width: iconSize,
-              height: iconSize,
-              child: const CircularProgressIndicator(strokeWidth: 2.0),
+        if (asset.remote?.livePhotoVideoId != null)
+          IconButton(
+            iconSize: iconSize,
+            splashRadius: iconSize,
+            onPressed: () {
+              onToggleMotionVideo();
+            },
+            icon: isPlayingMotionVideo
+                ? Icon(
+                    Icons.motion_photos_pause_outlined,
+                    color: Colors.grey[200],
+                  )
+                : Icon(
+                    Icons.play_circle_outline_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,
-          onPressed: () {
-            onDownloadPressed();
-          },
-          icon: Icon(
-            Icons.cloud_download_rounded,
-            color: Colors.grey[200],
-          ),
-        ),
         IconButton(
           iconSize: iconSize,
           splashRadius: iconSize,
@@ -69,17 +78,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

@@ -2,7 +2,6 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:flutter_swipe_detector/flutter_swipe_detector.dart';
 import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
@@ -14,12 +13,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,19 +26,18 @@ class GalleryViewerPage extends HookConsumerWidget {
     required this.asset,
   }) : super(key: key);
 
-  AssetResponseDto? assetDetail;
+  Asset? assetDetail;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final Box<dynamic> box = Hive.box(userInfoBox);
     final appSettingService = ref.watch(appSettingsServiceProvider);
     final threeStageLoading = useState(false);
-    final loading = useState(false);
     final isZoomed = useState<bool>(false);
+    final indexOfAsset = useState(assetList.indexOf(asset));
+    final isPlayingMotionVideo = useState(false);
     ValueNotifier<bool> isZoomedListener = ValueNotifier<bool>(false);
 
-    int indexOfAsset = assetList.indexOf(asset);
-
     PageController controller =
         PageController(initialPage: assetList.indexOf(asset));
 
@@ -47,20 +45,21 @@ class GalleryViewerPage extends HookConsumerWidget {
       () {
         threeStageLoading.value = appSettingService
             .getSetting<bool>(AppSettingsEnum.threeStageLoading);
+        isPlayingMotionVideo.value = false;
         return null;
       },
       [],
     );
 
-    @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() {
@@ -87,21 +86,27 @@ class GalleryViewerPage extends HookConsumerWidget {
     return Scaffold(
       backgroundColor: Colors.black,
       appBar: TopControlAppBar(
-        loading: loading.value,
-        asset: assetList[indexOfAsset],
+        isPlayingMotionVideo: isPlayingMotionVideo.value,
+        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);
         },
+        onToggleMotionVideo: (() {
+          isPlayingMotionVideo.value = !isPlayingMotionVideo.value;
+        }),
       ),
       body: SafeArea(
         child: PageView.builder(
@@ -113,36 +118,49 @@ 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) {
-              return ImageViewerPage(
-                authToken: 'Bearer ${box.get(accessTokenKey)}',
-                isZoomedFunction: isZoomedMethod,
-                isZoomedListener: isZoomedListener,
-                asset: assetList[index],
-                heroTag: assetList[index].id,
-                threeStageLoading: threeStageLoading.value,
-              );
+            if (assetList[index].isImage) {
+              if (isPlayingMotionVideo.value) {
+                return VideoViewerPage(
+                  asset: assetList[index],
+                  isMotionVideo: true,
+                  onVideoEnded: () {
+                    isPlayingMotionVideo.value = false;
+                  },
+                );
+              } else {
+                return ImageViewerPage(
+                  authToken: 'Bearer ${box.get(accessTokenKey)}',
+                  isZoomedFunction: isZoomedMethod,
+                  isZoomedListener: isZoomedListener,
+                  asset: assetList[index],
+                  heroTag: assetList[index].id,
+                  threeStageLoading: threeStageLoading.value,
+                );
+              }
             } else {
-              return SwipeDetector(
-                onSwipeDown: (_) {
-                  AutoRouter.of(context).pop();
-                },
-                onSwipeUp: (_) {
-                  showInfo();
+              return GestureDetector(
+                onVerticalDragUpdate: (details) {
+                  const int sensitivity = 15;
+                  if (details.delta.dy > sensitivity) {
+                    // swipe down
+                    AutoRouter.of(context).pop();
+                  } else if (details.delta.dy < -sensitivity) {
+                    // swipe up
+                    showInfo();
+                  }
                 },
                 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}',
+                    isMotionVideo: false,
+                    onVideoEnded: () {},
                   ),
                 ),
               );

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

@@ -4,17 +4,16 @@ import 'package:flutter_hooks/flutter_hooks.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/providers/image_viewer_page_state.provider.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/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';
+import 'package:immich_mobile/shared/ui/immich_loading_indicator.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,23 +72,19 @@ 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 : () {},
             ),
           ),
         ),
         if (downloadAssetStatus == DownloadAssetStatus.loading)
           const Center(
-            child: DownloadLoadingIndicator(),
+            child: ImmichLoadingIndicator(),
           ),
       ],
     );

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';
@@ -5,47 +7,96 @@ import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:chewie/chewie.dart';
 import 'package:immich_mobile/modules/asset_viewer/models/image_viewer_page_state.model.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator.dart';
-import 'package:openapi/api.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/immich_loading_indicator.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;
+  final bool isMotionVideo;
+  final VoidCallback onVideoEnded;
 
-  VideoViewerPage({Key? key, required this.videoUrl, required this.asset})
-      : super(key: key);
+  const VideoViewerPage({
+    Key? key,
+    required this.asset,
+    required this.isMotionVideo,
+    required this.onVideoEnded,
+  }) : 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,
+          isMotionVideo: false,
+          onVideoEnded: () {},
+        ),
+        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 = isMotionVideo
+        ? '${box.get(serverEndpointKey)}/asset/file/${asset.remote?.livePhotoVideoId!}'
+        : '${box.get(serverEndpointKey)}/asset/file/${asset.id}';
 
     return Stack(
       children: [
         VideoThumbnailPlayer(
           url: videoUrl,
           jwtToken: jwtToken,
+          isMotionVideo: isMotionVideo,
+          onVideoEnded: onVideoEnded,
         ),
         if (downloadAssetStatus == DownloadAssetStatus.loading)
           const Center(
-            child: DownloadLoadingIndicator(),
+            child: ImmichLoadingIndicator(),
           ),
       ],
     );
   }
 }
 
-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})
-      : super(key: key);
+class VideoThumbnailPlayer extends StatefulWidget {
+  final String? url;
+  final String? jwtToken;
+  final File? file;
+  final bool isMotionVideo;
+  final VoidCallback onVideoEnded;
+
+  const VideoThumbnailPlayer({
+    Key? key,
+    this.url,
+    this.jwtToken,
+    this.file,
+    required this.onVideoEnded,
+    required this.isMotionVideo,
+  }) : super(key: key);
 
   @override
   State<VideoThumbnailPlayer> createState() => _VideoThumbnailPlayerState();
@@ -59,14 +110,23 @@ class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
   void initState() {
     super.initState();
     initializePlayer();
+
+    videoPlayerController.addListener(() {
+      if (videoPlayerController.value.position ==
+          videoPlayerController.value.duration) {
+        widget.onVideoEnded();
+      }
+    });
   }
 
   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();
@@ -84,7 +144,7 @@ class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
       autoPlay: true,
       autoInitialize: true,
       allowFullScreen: true,
-      showControls: true,
+      showControls: !widget.isMotionVideo,
       hideControlsTimer: const Duration(seconds: 5),
     );
   }

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

@@ -50,6 +50,11 @@ class BackgroundService {
       _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;
@@ -201,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);
@@ -219,6 +233,7 @@ class BackgroundService {
     }
     _hasLock = true;
     rp.listen(_heartbeatListener);
+    _hasAccessCompleter.complete(true);
     return true;
   }
 
@@ -271,6 +286,8 @@ class BackgroundService {
     }
     _wantsLockTime = 0;
     if (_hasLock) {
+      _hasAccessCompleter = Completer();
+      _hasAccess = _hasAccessCompleter.future;
       IsolateNameServer.removePortNameMapping(_portNameLock);
       _waitingIsolate?.send(true);
       _waitingIsolate = null;

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

@@ -1,7 +1,6 @@
-import 'package:equatable/equatable.dart';
 import 'package:photo_manager/photo_manager.dart';
 
-class ErrorUploadAsset extends Equatable {
+class ErrorUploadAsset {
   final String id;
   final DateTime createdAt;
   final String fileName;
@@ -42,14 +41,25 @@ class ErrorUploadAsset extends Equatable {
   }
 
   @override
-  List<Object> get props {
-    return [
-      id,
-      createdAt,
-      fileName,
-      fileType,
-      asset,
-      errorMessage,
-    ];
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is ErrorUploadAsset &&
+        other.id == id &&
+        other.createdAt == createdAt &&
+        other.fileName == fileName &&
+        other.fileType == fileType &&
+        other.asset == asset &&
+        other.errorMessage == errorMessage;
+  }
+
+  @override
+  int get hashCode {
+    return id.hashCode ^
+        createdAt.hashCode ^
+        fileName.hashCode ^
+        fileType.hashCode ^
+        asset.hashCode ^
+        errorMessage.hashCode;
   }
 }

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/backup/services/backup.service.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:io';
 
+import 'package:cancellation_token_http/http.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
@@ -263,6 +264,13 @@ class BackupService {
 
           req.files.add(assetRawUploadData);
 
+          if (entity.isLivePhoto) {
+            var livePhotoRawUploadData = await _getLivePhotoFile(entity);
+            if (livePhotoRawUploadData != null) {
+              req.files.add(livePhotoRawUploadData);
+            }
+          }
+
           setCurrentUploadAssetCb(
             CurrentUploadAsset(
               id: entity.id,
@@ -322,6 +330,33 @@ class BackupService {
     return !anyErrors;
   }
 
+  Future<MultipartFile?> _getLivePhotoFile(AssetEntity entity) async {
+    var motionFilePath = await entity.getMediaUrl();
+    // var motionFilePath = '/var/mobile/Media/DCIM/103APPLE/IMG_3371.MOV'
+
+    if (motionFilePath != null) {
+      var validPath = motionFilePath.replaceAll('file://', '');
+      var motionFile = File(validPath);
+      var fileStream = motionFile.openRead();
+      String originalFileName = await entity.titleAsync;
+      String fileNameWithoutPath = originalFileName.toString().split(".")[0];
+      var mimeType = FileHelper.getMimeType(validPath);
+
+      return http.MultipartFile(
+        "livePhotoData",
+        fileStream,
+        motionFile.lengthSync(),
+        filename: fileNameWithoutPath,
+        contentType: MediaType(
+          mimeType["type"],
+          mimeType["subType"],
+        ),
+      );
+    }
+
+    return null;
+  }
+
   String _getAssetType(AssetType assetType) {
     switch (assetType) {
       case AssetType.audio:

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

@@ -13,7 +13,6 @@ import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/providers/websocket.provider.dart';
 import 'package:immich_mobile/modules/backup/ui/backup_info_card.dart';
-import 'package:percent_indicator/linear_percent_indicator.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class BackupControllerPage extends HookConsumerWidget {
@@ -63,14 +62,11 @@ class BackupControllerPage extends HookConsumerWidget {
             children: [
               Padding(
                 padding: const EdgeInsets.only(top: 8.0),
-                child: LinearPercentIndicator(
-                  padding:
-                      const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
-                  barRadius: const Radius.circular(2),
-                  lineHeight: 10.0,
-                  percent: backupState.serverInfo.diskUsagePercentage / 100.0,
+                child: LinearProgressIndicator(
+                  minHeight: 10.0,
+                  value: backupState.serverInfo.diskUsagePercentage / 100.0,
                   backgroundColor: Colors.grey,
-                  progressColor: Theme.of(context).primaryColor,
+                  color: Theme.of(context).primaryColor,
                 ),
               ),
               Padding(
@@ -444,17 +440,21 @@ class BackupControllerPage extends HookConsumerWidget {
           children: [
             Padding(
               padding: const EdgeInsets.only(top: 8.0),
-              child: LinearPercentIndicator(
-                padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
-                barRadius: const Radius.circular(2),
-                lineHeight: 10.0,
-                trailing: Text(
-                  " ${backupState.progressInPercentage.toStringAsFixed(0)}%",
-                  style: const TextStyle(fontSize: 12),
-                ),
-                percent: backupState.progressInPercentage / 100.0,
-                backgroundColor: Colors.grey,
-                progressColor: Theme.of(context).primaryColor,
+              child: Row(
+                children: [
+                  Expanded(
+                    child: LinearProgressIndicator(
+                      minHeight: 10.0,
+                      value: backupState.progressInPercentage / 100.0,
+                      backgroundColor: Colors.grey,
+                      color: Theme.of(context).primaryColor,
+                    ),
+                  ),
+                  Text(
+                    " ${backupState.progressInPercentage.toStringAsFixed(0)}%",
+                    style: const TextStyle(fontSize: 12),
+                  )
+                ],
               ),
             ),
             Padding(

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

@@ -2,6 +2,7 @@ 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';
@@ -14,6 +15,7 @@ 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';
@@ -31,7 +33,7 @@ class HomePage extends HookConsumerWidget {
     final multiselectEnabled = ref.watch(multiselectProvider.notifier);
     final selectionEnabledHook = useState(false);
 
-    final selection = useState(<AssetResponseDto>{});
+    final selection = useState(<Asset>{});
     final albums = ref.watch(albumProvider);
     final albumService = ref.watch(albumServiceProvider);
 
@@ -60,7 +62,7 @@ class HomePage extends HookConsumerWidget {
     Widget buildBody() {
       void selectionListener(
         bool multiselect,
-        Set<AssetResponseDto> selectedAssets,
+        Set<Asset> selectedAssets,
       ) {
         selectionEnabledHook.value = multiselect;
         selection.value = selectedAssets;
@@ -76,9 +78,27 @@ class HomePage extends HookConsumerWidget {
         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(
-          selection.value,
+          assets,
           album.id,
         );
 
@@ -103,6 +123,7 @@ class HomePage extends HookConsumerWidget {
                   "added": result.successfullyAdded.toString(),
                 },
               ),
+              toastType: ToastType.success,
             );
           }
 
@@ -111,8 +132,11 @@ class HomePage extends HookConsumerWidget {
       }
 
       void onCreateNewAlbum() async {
-        final result =
-            await albumService.createAlbumWithGeneratedName(selection.value);
+        final Iterable<Asset> assets = remoteOnlySelection();
+        if (assets.isEmpty) {
+          return;
+        }
+        final result = await albumService.createAlbumWithGeneratedName(assets);
 
         if (result != null) {
           ref.watch(albumProvider.notifier).getAllAlbums();

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

@@ -5,21 +5,25 @@ part 'hive_saved_login_info.model.g.dart';
 @HiveType(typeId: 0)
 class HiveSavedLoginInfo {
   @HiveField(0)
-  String email;
+  String email; // DEPRECATED
 
   @HiveField(1)
-  String password;
+  String password; // DEPRECATED
 
   @HiveField(2)
   String serverUrl;
 
-  @HiveField(3)
+  @HiveField(3, defaultValue: false)
   bool isSaveLogin;
 
+  @HiveField(4, defaultValue: "")
+  String accessToken;
+
   HiveSavedLoginInfo({
     required this.email,
     required this.password,
     required this.serverUrl,
     required this.isSaveLogin,
+    required this.accessToken,
   });
 }

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

@@ -20,14 +20,15 @@ class HiveSavedLoginInfoAdapter extends TypeAdapter<HiveSavedLoginInfo> {
       email: fields[0] as String,
       password: fields[1] as String,
       serverUrl: fields[2] as String,
-      isSaveLogin: fields[3] as bool,
+      isSaveLogin: fields[3] == null ? false : fields[3] as bool,
+      accessToken: fields[4] == null ? '' : fields[4] as String,
     );
   }
 
   @override
   void write(BinaryWriter writer, HiveSavedLoginInfo obj) {
     writer
-      ..writeByte(4)
+      ..writeByte(5)
       ..writeByte(0)
       ..write(obj.email)
       ..writeByte(1)
@@ -35,7 +36,9 @@ class HiveSavedLoginInfoAdapter extends TypeAdapter<HiveSavedLoginInfo> {
       ..writeByte(2)
       ..write(obj.serverUrl)
       ..writeByte(3)
-      ..write(obj.isSaveLogin);
+      ..write(obj.isSaveLogin)
+      ..writeByte(4)
+      ..write(obj.accessToken);
   }
 
   @override

mobile/lib/modules/login/providers/authentication.provider.dart

@@ -74,15 +74,6 @@ class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
       return false;
     }
 
-    // Store device id to local storage
-    var deviceInfo = await _deviceInfoService.getDeviceInfo();
-    Hive.box(userInfoBox).put(deviceIdKey, deviceInfo["deviceId"]);
-
-    state = state.copyWith(
-      deviceId: deviceInfo["deviceId"],
-      deviceType: deviceInfo["deviceType"],
-    );
-
     // Make sign-in request
     try {
       var loginResponse = await _apiService.authenticationApi.login(
@@ -97,65 +88,15 @@ class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
         return false;
       }
 
-      Hive.box(userInfoBox).put(accessTokenKey, loginResponse.accessToken);
-
-      state = state.copyWith(
-        isAuthenticated: true,
-        userId: loginResponse.userId,
-        userEmail: loginResponse.userEmail,
-        firstName: loginResponse.firstName,
-        lastName: loginResponse.lastName,
-        profileImagePath: loginResponse.profileImagePath,
-        isAdmin: loginResponse.isAdmin,
-        shouldChangePassword: loginResponse.shouldChangePassword,
+      return setSuccessLoginInfo(
+        accessToken: loginResponse.accessToken,
+        isSavedLoginInfo: isSavedLoginInfo,
       );
-
-      // Login Success - Set Access Token to API Client
-      _apiService.setAccessToken(loginResponse.accessToken);
-
-      if (isSavedLoginInfo) {
-        // Save login info to local storage
-        Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox).put(
-          savedLoginInfoKey,
-          HiveSavedLoginInfo(
-            email: email,
-            password: password,
-            isSaveLogin: true,
-            serverUrl: Hive.box(userInfoBox).get(serverEndpointKey),
-          ),
-        );
-      } else {
-        Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox)
-            .delete(savedLoginInfoKey);
-      }
     } catch (e) {
       HapticFeedback.vibrate();
       debugPrint("Error logging in $e");
       return false;
     }
-
-    // Register device info
-    try {
-      DeviceInfoResponseDto? deviceInfo =
-          await _apiService.deviceInfoApi.createDeviceInfo(
-        CreateDeviceInfoDto(
-          deviceId: state.deviceId,
-          deviceType: state.deviceType,
-        ),
-      );
-
-      if (deviceInfo == null) {
-        debugPrint('Device Info Response is null');
-        return false;
-      }
-
-      state = state.copyWith(deviceInfo: deviceInfo);
-    } catch (e) {
-      debugPrint("ERROR Register Device Info: $e");
-      return false;
-    }
-
-    return true;
   }
 
   Future<bool> logout() async {
@@ -215,6 +156,74 @@ class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
       return false;
     }
   }
+
+  Future<bool> setSuccessLoginInfo({
+    required String accessToken,
+    required bool isSavedLoginInfo,
+  }) async {
+    Hive.box(userInfoBox).put(accessTokenKey, accessToken);
+
+    _apiService.setAccessToken(accessToken);
+    var userResponseDto = await _apiService.userApi.getMyUserInfo();
+
+    if (userResponseDto != null) {
+      var deviceInfo = await _deviceInfoService.getDeviceInfo();
+      Hive.box(userInfoBox).put(deviceIdKey, deviceInfo["deviceId"]);
+
+      state = state.copyWith(
+        isAuthenticated: true,
+        userId: userResponseDto.id,
+        userEmail: userResponseDto.email,
+        firstName: userResponseDto.firstName,
+        lastName: userResponseDto.lastName,
+        profileImagePath: userResponseDto.profileImagePath,
+        isAdmin: userResponseDto.isAdmin,
+        shouldChangePassword: userResponseDto.shouldChangePassword,
+        deviceId: deviceInfo["deviceId"],
+        deviceType: deviceInfo["deviceType"],
+      );
+
+      if (isSavedLoginInfo) {
+        // Save login info to local storage
+        Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox).put(
+          savedLoginInfoKey,
+          HiveSavedLoginInfo(
+            email: "",
+            password: "",
+            isSaveLogin: true,
+            serverUrl: Hive.box(userInfoBox).get(serverEndpointKey),
+            accessToken: accessToken,
+          ),
+        );
+      } else {
+        Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox)
+            .delete(savedLoginInfoKey);
+      }
+    }
+
+    // Register device info
+    try {
+      DeviceInfoResponseDto? deviceInfo =
+          await _apiService.deviceInfoApi.createDeviceInfo(
+        CreateDeviceInfoDto(
+          deviceId: state.deviceId,
+          deviceType: state.deviceType,
+        ),
+      );
+
+      if (deviceInfo == null) {
+        debugPrint('Device Info Response is null');
+        return false;
+      }
+
+      state = state.copyWith(deviceInfo: deviceInfo);
+    } catch (e) {
+      debugPrint("ERROR Register Device Info: $e");
+      return false;
+    }
+
+    return true;
+  }
 }
 
 final authenticationProvider =

mobile/lib/modules/login/providers/oauth.provider.dart

@@ -0,0 +1,6 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/login/services/oauth.service.dart';
+import 'package:immich_mobile/shared/providers/api.provider.dart';
+
+final OAuthServiceProvider =
+    Provider((ref) => OAuthService(ref.watch(apiServiceProvider)));

mobile/lib/modules/login/services/oauth.service.dart

@@ -0,0 +1,39 @@
+import 'package:immich_mobile/shared/services/api.service.dart';
+import 'package:openapi/api.dart';
+import 'package:flutter_web_auth/flutter_web_auth.dart';
+
+// Redirect URL = app.immich://
+
+class OAuthService {
+  final ApiService _apiService;
+  final callbackUrlScheme = 'app.immich';
+
+  OAuthService(this._apiService);
+
+  Future<OAuthConfigResponseDto?> getOAuthServerConfig(
+    String serverEndpoint,
+  ) async {
+    _apiService.setEndpoint(serverEndpoint);
+
+    return await _apiService.oAuthApi.generateConfig(
+      OAuthConfigDto(redirectUri: '$callbackUrlScheme:/'),
+    );
+  }
+
+  Future<LoginResponseDto?> oAuthLogin(String oauthUrl) async {
+    try {
+      var result = await FlutterWebAuth.authenticate(
+        url: oauthUrl,
+        callbackUrlScheme: callbackUrlScheme,
+      );
+
+      return await _apiService.oAuthApi.callback(
+        OAuthCallbackDto(
+          url: result,
+        ),
+      );
+    } catch (e) {
+      return null;
+    }
+  }
+}

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

@@ -6,11 +6,14 @@ 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/login/models/hive_saved_login_info.model.dart';
+import 'package:immich_mobile/modules/login/providers/oauth.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/providers/api.provider.dart';
 import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_toast.dart';
+import 'package:openapi/api.dart';
 
 class LoginForm extends HookConsumerWidget {
   const LoginForm({Key? key}) : super(key: key);
@@ -23,10 +26,47 @@ class LoginForm extends HookConsumerWidget {
         useTextEditingController.fromValue(TextEditingValue.empty);
     final serverEndpointController =
         useTextEditingController(text: 'login_form_endpoint_hint'.tr());
+    final apiService = ref.watch(apiServiceProvider);
+    final serverEndpointFocusNode = useFocusNode();
     final isSaveLoginInfo = useState<bool>(false);
+    final isLoading = useState<bool>(false);
+    final isOauthEnable = useState<bool>(false);
+    final oAuthButtonLabel = useState<String>('OAuth');
+
+    getServeLoginConfig() async {
+      if (!serverEndpointFocusNode.hasFocus) {
+        var urlText = serverEndpointController.text.trim();
+
+        try {
+          var endpointUrl = Uri.tryParse(urlText);
+
+          if (endpointUrl != null) {
+            isLoading.value = true;
+            apiService.setEndpoint(endpointUrl.toString());
+            var loginConfig = await apiService.oAuthApi.generateConfig(
+              OAuthConfigDto(redirectUri: endpointUrl.toString()),
+            );
+
+            if (loginConfig != null) {
+              isOauthEnable.value = loginConfig.enabled;
+              oAuthButtonLabel.value = loginConfig.buttonText ?? 'OAuth';
+            } else {
+              isOauthEnable.value = false;
+            }
+
+            isLoading.value = false;
+          }
+        } catch (_) {
+          isLoading.value = false;
+          isOauthEnable.value = false;
+        }
+      }
+    }
 
     useEffect(
       () {
+        serverEndpointFocusNode.addListener(getServeLoginConfig);
+
         var loginInfo = Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox)
             .get(savedLoginInfoKey);
 
@@ -37,6 +77,7 @@ class LoginForm extends HookConsumerWidget {
           isSaveLoginInfo.value = loginInfo.isSaveLogin;
         }
 
+        getServeLoginConfig();
         return null;
       },
       [],
@@ -67,7 +108,10 @@ class LoginForm extends HookConsumerWidget {
               ),
               EmailInput(controller: usernameController),
               PasswordInput(controller: passwordController),
-              ServerEndpointInput(controller: serverEndpointController),
+              ServerEndpointInput(
+                controller: serverEndpointController,
+                focusNode: serverEndpointFocusNode,
+              ),
               CheckboxListTile(
                 activeColor: Theme.of(context).primaryColor,
                 contentPadding: const EdgeInsets.symmetric(horizontal: 8),
@@ -92,12 +136,52 @@ class LoginForm extends HookConsumerWidget {
                   }
                 },
               ),
-              LoginButton(
-                emailController: usernameController,
-                passwordController: passwordController,
-                serverEndpointController: serverEndpointController,
-                isSavedLoginInfo: isSaveLoginInfo.value,
-              ),
+              if (isLoading.value)
+                const SizedBox(
+                  width: 24,
+                  height: 24,
+                  child: CircularProgressIndicator(
+                    strokeWidth: 2,
+                  ),
+                ),
+              if (!isLoading.value)
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    LoginButton(
+                      emailController: usernameController,
+                      passwordController: passwordController,
+                      serverEndpointController: serverEndpointController,
+                      isSavedLoginInfo: isSaveLoginInfo.value,
+                    ),
+                    if (isOauthEnable.value) ...[
+                      Padding(
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 16.0,
+                        ),
+                        child: Divider(
+                          color: Brightness.dark == Theme.of(context).brightness
+                              ? Colors.white
+                              : Colors.black,
+                        ),
+                      ),
+                      OAuthLoginButton(
+                        serverEndpointController: serverEndpointController,
+                        isSavedLoginInfo: isSaveLoginInfo.value,
+                        buttonLabel: oAuthButtonLabel.value,
+                        isLoading: isLoading,
+                        onLoginSuccess: () {
+                          isLoading.value = false;
+                          ref.watch(backupProvider.notifier).resumeBackup();
+                          AutoRouter.of(context).replace(
+                            const TabControllerRoute(),
+                          );
+                        },
+                      ),
+                    ],
+                  ],
+                )
             ],
           ),
         ),
@@ -108,9 +192,12 @@ class LoginForm extends HookConsumerWidget {
 
 class ServerEndpointInput extends StatelessWidget {
   final TextEditingController controller;
-
-  const ServerEndpointInput({Key? key, required this.controller})
-      : super(key: key);
+  final FocusNode focusNode;
+  const ServerEndpointInput({
+    Key? key,
+    required this.controller,
+    required this.focusNode,
+  }) : super(key: key);
 
   String? _validateInput(String? url) {
     if (url?.startsWith(RegExp(r'https?://')) == true) {
@@ -131,6 +218,7 @@ class ServerEndpointInput extends StatelessWidget {
       ),
       validator: _validateInput,
       autovalidateMode: AutovalidateMode.always,
+      focusNode: focusNode,
     );
   }
 }
@@ -200,13 +288,9 @@ class LoginButton extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return ElevatedButton(
+    return ElevatedButton.icon(
       style: ElevatedButton.styleFrom(
-        visualDensity: VisualDensity.standard,
-        backgroundColor: Theme.of(context).primaryColor,
-        foregroundColor: Colors.grey[50],
-        elevation: 2,
-        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 25),
+        padding: const EdgeInsets.symmetric(vertical: 12),
       ),
       onPressed: () async {
         // This will remove current cache asset state of previous user login.
@@ -238,10 +322,101 @@ class LoginButton extends ConsumerWidget {
           );
         }
       },
-      child: const Text(
+      icon: const Icon(Icons.login_rounded),
+      label: const Text(
         "login_form_button_text",
         style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
       ).tr(),
     );
   }
 }
+
+class OAuthLoginButton extends ConsumerWidget {
+  final TextEditingController serverEndpointController;
+  final bool isSavedLoginInfo;
+  final ValueNotifier<bool> isLoading;
+  final VoidCallback onLoginSuccess;
+  final String buttonLabel;
+
+  const OAuthLoginButton({
+    Key? key,
+    required this.serverEndpointController,
+    required this.isSavedLoginInfo,
+    required this.isLoading,
+    required this.onLoginSuccess,
+    required this.buttonLabel,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    var oAuthService = ref.watch(OAuthServiceProvider);
+
+    void performOAuthLogin() async {
+      ref.watch(assetProvider.notifier).clearAllAsset();
+      OAuthConfigResponseDto? oAuthServerConfig;
+
+      try {
+        oAuthServerConfig = await oAuthService
+            .getOAuthServerConfig(serverEndpointController.text);
+
+        isLoading.value = true;
+      } catch (e) {
+        ImmichToast.show(
+          context: context,
+          msg: "login_form_failed_get_oauth_server_config".tr(),
+          toastType: ToastType.error,
+        );
+        isLoading.value = false;
+        return;
+      }
+
+      if (oAuthServerConfig != null && oAuthServerConfig.enabled) {
+        var loginResponseDto =
+            await oAuthService.oAuthLogin(oAuthServerConfig.url!);
+
+        if (loginResponseDto != null) {
+          var isSuccess = await ref
+              .watch(authenticationProvider.notifier)
+              .setSuccessLoginInfo(
+                accessToken: loginResponseDto.accessToken,
+                isSavedLoginInfo: isSavedLoginInfo,
+              );
+
+          if (isSuccess) {
+            isLoading.value = false;
+            onLoginSuccess();
+          } else {
+            ImmichToast.show(
+              context: context,
+              msg: "login_form_failed_login".tr(),
+              toastType: ToastType.error,
+            );
+          }
+        }
+
+        isLoading.value = false;
+      } else {
+        ImmichToast.show(
+          context: context,
+          msg: "login_form_failed_get_oauth_server_disable".tr(),
+          toastType: ToastType.info,
+        );
+        isLoading.value = false;
+        return;
+      }
+    }
+
+    return ElevatedButton.icon(
+      style: ElevatedButton.styleFrom(
+        backgroundColor: Theme.of(context).primaryColor.withAlpha(230),
+        padding: const EdgeInsets.symmetric(vertical: 12),
+      ),
+      onPressed: performOAuthLogin,
+      icon: const Icon(Icons.pin_rounded),
+      label: Text(
+        buttonLabel,
+        style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+      ),
+    );
+  }
+}

mobile/lib/modules/search/models/search_result_page_state.model.dart

@@ -1,13 +1,14 @@
 import 'dart:convert';
 
 import 'package:collection/collection.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:openapi/api.dart';
 
 class SearchResultPageState {
   final bool isLoading;
   final bool isSuccess;
   final bool isError;
-  final List<AssetResponseDto> searchResult;
+  final List<Asset> searchResult;
 
   SearchResultPageState({
     required this.isLoading,
@@ -20,7 +21,7 @@ class SearchResultPageState {
     bool? isLoading,
     bool? isSuccess,
     bool? isError,
-    List<AssetResponseDto>? searchResult,
+    List<Asset>? searchResult,
   }) {
     return SearchResultPageState(
       isLoading: isLoading ?? this.isLoading,
@@ -44,8 +45,9 @@ class SearchResultPageState {
       isLoading: map['isLoading'] ?? false,
       isSuccess: map['isSuccess'] ?? false,
       isError: map['isError'] ?? false,
-      searchResult: List<AssetResponseDto>.from(
-        map['searchResult']?.map((x) => AssetResponseDto.mapFromJson(x)),
+      searchResult: List<Asset>.from(
+        map['searchResult']
+            ?.map((x) => Asset.remote(AssetResponseDto.fromJson(x))),
       ),
     );
   }

mobile/lib/modules/search/providers/search_result_page.provider.dart

@@ -6,8 +6,8 @@ import 'package:immich_mobile/modules/search/models/search_result_page_state.mod
 import 'package:immich_mobile/modules/search/services/search.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:immich_mobile/shared/models/asset.dart';
 import 'package:intl/intl.dart';
-import 'package:openapi/api.dart';
 
 class SearchResultPageNotifier extends StateNotifier<SearchResultPageState> {
   SearchResultPageNotifier(this._searchService)
@@ -30,8 +30,9 @@ class SearchResultPageNotifier extends StateNotifier<SearchResultPageState> {
       isSuccess: false,
     );
 
-    List<AssetResponseDto>? assets =
-        await _searchService.searchAsset(searchTerm);
+    List<Asset>? assets = (await _searchService.searchAsset(searchTerm))
+        ?.map((e) => Asset.remote(e))
+        .toList();
 
     if (assets != null) {
       state = state.copyWith(
@@ -61,12 +62,11 @@ final searchResultGroupByDateTimeProvider = StateProvider((ref) {
   var assets = ref.watch(searchResultPageProvider).searchResult;
 
   assets.sortByCompare<DateTime>(
-    (e) => DateTime.parse(e.createdAt),
+    (e) => e.createdAt,
     (a, b) => b.compareTo(a),
   );
   return assets.groupListsBy(
-    (element) => DateFormat('y-MM-dd')
-        .format(DateTime.parse(element.createdAt).toLocal()),
+    (element) => DateFormat('y-MM-dd').format(element.createdAt.toLocal()),
   );
 });
 

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

@@ -2,7 +2,6 @@ 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:flutter_spinkit/flutter_spinkit.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
@@ -10,6 +9,7 @@ import 'package:immich_mobile/modules/search/providers/search_result_page.provid
 import 'package:immich_mobile/modules/search/ui/search_suggestion_list.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/shared/ui/immich_loading_indicator.dart';
 
 class SearchResultPage extends HookConsumerWidget {
   const SearchResultPage({Key? key, required this.searchTerm})
@@ -122,11 +122,7 @@ class SearchResultPage extends HookConsumerWidget {
       }
 
       if (searchResultPageState.isLoading) {
-        return Center(
-          child: SpinKitDancingSquare(
-            color: Theme.of(context).primaryColor,
-          ),
-        );
+        return const Center(child: ImmichLoadingIndicator());
       }
 
       if (searchResultPageState.isSuccess) {

mobile/lib/routing/router.dart

@@ -22,6 +22,7 @@ import 'package:immich_mobile/modules/settings/views/settings_page.dart';
 import 'package:immich_mobile/routing/auth_guard.dart';
 import 'package:immich_mobile/modules/backup/views/backup_controller_page.dart';
 import 'package:immich_mobile/modules/asset_viewer/views/image_viewer_page.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:immich_mobile/shared/views/splash_screen.dart';

mobile/lib/routing/router.gr.dart

@@ -66,7 +66,10 @@ class _$AppRouter extends RootStackRouter {
       return MaterialPageX<dynamic>(
           routeData: routeData,
           child: VideoViewerPage(
-              key: args.key, videoUrl: args.videoUrl, asset: args.asset));
+              key: args.key,
+              asset: args.asset,
+              isMotionVideo: args.isMotionVideo,
+              onVideoEnded: args.onVideoEnded));
     },
     BackupControllerRoute.name: (routeData) {
       return MaterialPageX<dynamic>(
@@ -258,9 +261,7 @@ class TabControllerRoute extends PageRouteInfo<void> {
 /// [GalleryViewerPage]
 class GalleryViewerRoute extends PageRouteInfo<GalleryViewerRouteArgs> {
   GalleryViewerRoute(
-      {Key? key,
-      required List<AssetResponseDto> assetList,
-      required AssetResponseDto asset})
+      {Key? key, required List<Asset> assetList, required Asset asset})
       : super(GalleryViewerRoute.name,
             path: '/gallery-viewer-page',
             args: GalleryViewerRouteArgs(
@@ -275,9 +276,9 @@ class GalleryViewerRouteArgs {
 
   final Key? key;
 
-  final List<AssetResponseDto> assetList;
+  final List<Asset> assetList;
 
-  final AssetResponseDto asset;
+  final Asset asset;
 
   @override
   String toString() {
@@ -291,7 +292,7 @@ class ImageViewerRoute extends PageRouteInfo<ImageViewerRouteArgs> {
   ImageViewerRoute(
       {Key? key,
       required String heroTag,
-      required AssetResponseDto asset,
+      required Asset asset,
       required String authToken,
       required void Function() isZoomedFunction,
       required ValueNotifier<bool> isZoomedListener,
@@ -324,7 +325,7 @@ class ImageViewerRouteArgs {
 
   final String heroTag;
 
-  final AssetResponseDto asset;
+  final Asset asset;
 
   final String authToken;
 
@@ -344,28 +345,39 @@ class ImageViewerRouteArgs {
 /// [VideoViewerPage]
 class VideoViewerRoute extends PageRouteInfo<VideoViewerRouteArgs> {
   VideoViewerRoute(
-      {Key? key, required String videoUrl, required AssetResponseDto asset})
+      {Key? key,
+      required Asset asset,
+      required bool isMotionVideo,
+      required void Function() onVideoEnded})
       : super(VideoViewerRoute.name,
             path: '/video-viewer-page',
             args: VideoViewerRouteArgs(
-                key: key, videoUrl: videoUrl, asset: asset));
+                key: key,
+                asset: asset,
+                isMotionVideo: isMotionVideo,
+                onVideoEnded: onVideoEnded));
 
   static const String name = 'VideoViewerRoute';
 }
 
 class VideoViewerRouteArgs {
   const VideoViewerRouteArgs(
-      {this.key, required this.videoUrl, required this.asset});
+      {this.key,
+      required this.asset,
+      required this.isMotionVideo,
+      required this.onVideoEnded});
 
   final Key? key;
 
-  final String videoUrl;
+  final Asset asset;
 
-  final AssetResponseDto asset;
+  final bool isMotionVideo;
+
+  final void Function() onVideoEnded;
 
   @override
   String toString() {
-    return 'VideoViewerRouteArgs{key: $key, videoUrl: $videoUrl, asset: $asset}';
+    return 'VideoViewerRouteArgs{key: $key, asset: $asset, isMotionVideo: $isMotionVideo, onVideoEnded: $onVideoEnded}';
   }
 }
 

mobile/lib/shared/models/asset.dart

@@ -0,0 +1,126 @@
+import 'package:hive/hive.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:openapi/api.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+/// Asset (online or local)
+class Asset {
+  Asset.remote(this.remote) {
+    local = null;
+  }
+
+  Asset.local(this.local) {
+    remote = null;
+  }
+
+  late final AssetResponseDto? remote;
+  late final AssetEntity? local;
+
+  bool get isRemote => remote != null;
+  bool get isLocal => local != null;
+
+  String get deviceId =>
+      isRemote ? remote!.deviceId : Hive.box(userInfoBox).get(deviceIdKey);
+
+  String get deviceAssetId => isRemote ? remote!.deviceAssetId : local!.id;
+
+  String get id => isLocal ? local!.id : remote!.id;
+
+  double? get latitude =>
+      isLocal ? local!.latitude : remote!.exifInfo?.latitude?.toDouble();
+
+  double? get longitude =>
+      isLocal ? local!.longitude : remote!.exifInfo?.longitude?.toDouble();
+
+  DateTime get createdAt =>
+      isLocal ? local!.createDateTime : DateTime.parse(remote!.createdAt);
+
+  bool get isImage => isLocal
+      ? local!.type == AssetType.image
+      : remote!.type == AssetTypeEnum.IMAGE;
+
+  String get duration => isRemote
+      ? remote!.duration
+      : Duration(seconds: local!.duration).toString();
+
+  /// use only for tests
+  set createdAt(DateTime val) {
+    if (isRemote) {
+      remote!.createdAt = val.toIso8601String();
+    }
+  }
+
+  @override
+  bool operator ==(other) {
+    if (other is! Asset) return false;
+    return id == other.id && isLocal == other.isLocal;
+  }
+
+  @override
+  int get hashCode => id.hashCode;
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+    if (isLocal) {
+      json["local"] = _assetEntityToJson(local!);
+    } else {
+      json["remote"] = remote!.toJson();
+    }
+    return json;
+  }
+
+  static Asset? fromJson(dynamic value) {
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+      final l = json["local"];
+      if (l != null) {
+        return Asset.local(_assetEntityFromJson(l));
+      } else {
+        return Asset.remote(AssetResponseDto.fromJson(json["remote"]));
+      }
+    }
+    return null;
+  }
+}
+
+Map<String, dynamic> _assetEntityToJson(AssetEntity a) {
+  final json = <String, dynamic>{};
+  json["id"] = a.id;
+  json["typeInt"] = a.typeInt;
+  json["width"] = a.width;
+  json["height"] = a.height;
+  json["duration"] = a.duration;
+  json["orientation"] = a.orientation;
+  json["isFavorite"] = a.isFavorite;
+  json["title"] = a.title;
+  json["createDateSecond"] = a.createDateSecond;
+  json["modifiedDateSecond"] = a.modifiedDateSecond;
+  json["latitude"] = a.latitude;
+  json["longitude"] = a.longitude;
+  json["mimeType"] = a.mimeType;
+  json["subtype"] = a.subtype;
+  return json;
+}
+
+AssetEntity? _assetEntityFromJson(dynamic value) {
+  if (value is Map) {
+    final json = value.cast<String, dynamic>();
+    return AssetEntity(
+      id: json["id"],
+      typeInt: json["typeInt"],
+      width: json["width"],
+      height: json["height"],
+      duration: json["duration"],
+      orientation: json["orientation"],
+      isFavorite: json["isFavorite"],
+      title: json["title"],
+      createDateSecond: json["createDateSecond"],
+      modifiedDateSecond: json["modifiedDateSecond"],
+      latitude: json["latitude"],
+      longitude: json["longitude"],
+      mimeType: json["mimeType"],
+      subtype: json["subtype"],
+    );
+  }
+  return null;
+}

mobile/lib/shared/providers/asset.provider.dart

@@ -1,18 +1,23 @@
+import 'dart:collection';
+
 import 'package:flutter/foundation.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
 import 'package:immich_mobile/modules/home/services/asset_cache.service.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/services/device_info.service.dart';
 import 'package:collection/collection.dart';
 import 'package:intl/intl.dart';
 import 'package:openapi/api.dart';
 import 'package:photo_manager/photo_manager.dart';
 
-class AssetNotifier extends StateNotifier<List<AssetResponseDto>> {
+class AssetNotifier extends StateNotifier<List<Asset>> {
   final AssetService _assetService;
   final AssetCacheService _assetCacheService;
 
   final DeviceInfoService _deviceInfoService = DeviceInfoService();
+  bool _getAllAssetInProgress = false;
+  bool _deleteInProgress = false;
 
   AssetNotifier(this._assetService, this._assetCacheService) : super([]);
 
@@ -21,29 +26,38 @@ class AssetNotifier extends StateNotifier<List<AssetResponseDto>> {
   }
 
   getAllAsset() async {
-    final stopwatch = Stopwatch();
-
-
-    if (await _assetCacheService.isValid() && state.isEmpty) {
-      stopwatch.start();
-      state = await _assetCacheService.get();
-      debugPrint("Reading assets from cache: ${stopwatch.elapsedMilliseconds}ms");
-      stopwatch.reset();
+    if (_getAllAssetInProgress || _deleteInProgress) {
+      // guard against multiple calls to this method while it's still working
+      return;
     }
+    final stopwatch = Stopwatch();
+    try {
+      _getAllAssetInProgress = true;
+
+      final bool isCacheValid = await _assetCacheService.isValid();
+      if (isCacheValid && state.isEmpty) {
+        stopwatch.start();
+        state = await _assetCacheService.get();
+        debugPrint(
+            "Reading assets from cache: ${stopwatch.elapsedMilliseconds}ms");
+        stopwatch.reset();
+      }
+
+      stopwatch.start();
+      var allAssets = await _assetService.getAllAsset(urgent: !isCacheValid);
+      debugPrint("Query assets from API: ${stopwatch.elapsedMilliseconds}ms");
+      stopwatch.reset();
+
+      state = allAssets;
+    } finally {
+      _getAllAssetInProgress = false;
+    }
+    debugPrint("[getAllAsset] setting new asset state");
 
     stopwatch.start();
-    var allAssets = await _assetService.getAllAsset();
-    debugPrint("Query assets from API: ${stopwatch.elapsedMilliseconds}ms");
+    _cacheState();
+    debugPrint("Store assets in cache: ${stopwatch.elapsedMilliseconds}ms");
     stopwatch.reset();
-
-    if (allAssets != null) {
-      state = allAssets;
-
-      stopwatch.start();
-      _cacheState();
-      debugPrint("Store assets in cache: ${stopwatch.elapsedMilliseconds}ms");
-      stopwatch.reset();
-    }
   }
 
   clearAllAsset() {
@@ -52,80 +66,113 @@ class AssetNotifier extends StateNotifier<List<AssetResponseDto>> {
   }
 
   onNewAssetUploaded(AssetResponseDto newAsset) {
-    state = [...state, newAsset];
+    final int i = state.indexWhere(
+      (a) =>
+          a.isRemote ||
+          (a.id == newAsset.deviceAssetId && a.deviceId == newAsset.deviceId),
+    );
+
+    if (i == -1 || state[i].deviceAssetId != newAsset.deviceAssetId) {
+      state = [...state, Asset.remote(newAsset)];
+    } else {
+      // order is important to keep all local-only assets at the beginning!
+      state = [
+        ...state.slice(0, i),
+        ...state.slice(i + 1),
+        Asset.remote(newAsset),
+      ];
+      // TODO here is a place to unify local/remote assets by replacing the
+      // local-only asset in the state with a local&remote asset
+    }
     _cacheState();
   }
 
-  deleteAssets(Set<AssetResponseDto> deleteAssets) async {
+  deleteAssets(Set<Asset> deleteAssets) async {
+    _deleteInProgress = true;
+    try {
+      final localDeleted = await _deleteLocalAssets(deleteAssets);
+      final remoteDeleted = await _deleteRemoteAssets(deleteAssets);
+      final Set<String> deleted = HashSet();
+      deleted.addAll(localDeleted);
+      deleted.addAll(remoteDeleted);
+      if (deleted.isNotEmpty) {
+        state = state.where((a) => !deleted.contains(a.id)).toList();
+        _cacheState();
+      }
+    } finally {
+      _deleteInProgress = false;
+    }
+  }
+
+  Future<List<String>> _deleteLocalAssets(Set<Asset> assetsToDelete) async {
     var deviceInfo = await _deviceInfoService.getDeviceInfo();
     var deviceId = deviceInfo["deviceId"];
-    var deleteIdList = <String>[];
+    final List<String> local = [];
     // Delete asset from device
-    for (var asset in deleteAssets) {
-      // Delete asset on device if present
-      if (asset.deviceId == deviceId) {
+    for (final Asset asset in assetsToDelete) {
+      if (asset.isLocal) {
+        local.add(asset.id);
+      } else if (asset.deviceId == deviceId) {
+        // Delete asset on device if it is still present
         var localAsset = await AssetEntity.fromId(asset.deviceAssetId);
-
         if (localAsset != null) {
-          deleteIdList.add(localAsset.id);
+          local.add(localAsset.id);
         }
       }
     }
-
-    try {
-      await PhotoManager.editor.deleteWithIds(deleteIdList);
-    } catch (e) {
-      debugPrint("Delete asset from device failed: $e");
-    }
-
-    // Delete asset on server
-    List<DeleteAssetResponseDto>? deleteAssetResult =
-        await _assetService.deleteAssets(deleteAssets);
-
-    if (deleteAssetResult == null) {
-      return;
-    }
-
-    for (var asset in deleteAssetResult) {
-      if (asset.status == DeleteAssetStatus.SUCCESS) {
-        state =
-            state.where((immichAsset) => immichAsset.id != asset.id).toList();
+    if (local.isNotEmpty) {
+      try {
+        return await PhotoManager.editor.deleteWithIds(local);
+      } catch (e) {
+        debugPrint("Delete asset from device failed: $e");
       }
     }
+    return [];
+  }
 
-    _cacheState();
+  Future<Iterable<String>> _deleteRemoteAssets(
+    Set<Asset> assetsToDelete,
+  ) async {
+    final Iterable<AssetResponseDto> remote =
+        assetsToDelete.where((e) => e.isRemote).map((e) => e.remote!);
+    final List<DeleteAssetResponseDto> deleteAssetResult =
+        await _assetService.deleteAssets(remote) ?? [];
+    return deleteAssetResult
+        .where((a) => a.status == DeleteAssetStatus.SUCCESS)
+        .map((a) => a.id);
   }
 }
 
-final assetProvider =
-    StateNotifierProvider<AssetNotifier, List<AssetResponseDto>>((ref) {
+final assetProvider = StateNotifierProvider<AssetNotifier, List<Asset>>((ref) {
   return AssetNotifier(
       ref.watch(assetServiceProvider), ref.watch(assetCacheServiceProvider));
 });
 
 final assetGroupByDateTimeProvider = StateProvider((ref) {
-  var assets = ref.watch(assetProvider);
+  final assets = ref.watch(assetProvider).toList();
+  // `toList()` ist needed to make a copy as to NOT sort the original list/state
 
   assets.sortByCompare<DateTime>(
-    (e) => DateTime.parse(e.createdAt),
+    (e) => e.createdAt,
     (a, b) => b.compareTo(a),
   );
   return assets.groupListsBy(
-    (element) => DateFormat('y-MM-dd')
-        .format(DateTime.parse(element.createdAt).toLocal()),
+    (element) => DateFormat('y-MM-dd').format(element.createdAt.toLocal()),
   );
 });
 
 final assetGroupByMonthYearProvider = StateProvider((ref) {
-  var assets = ref.watch(assetProvider);
+  // TODO: remove `where` once temporary workaround is no longer needed (to only
+  // allow remote assets to be added to album). Keep `toList()` as to NOT sort
+  // the original list/state
+  final assets = ref.watch(assetProvider).where((e) => e.isRemote).toList();
 
   assets.sortByCompare<DateTime>(
-    (e) => DateTime.parse(e.createdAt),
+    (e) => e.createdAt,
     (a, b) => b.compareTo(a),
   );
 
   return assets.groupListsBy(
-    (element) => DateFormat('MMMM, y')
-        .format(DateTime.parse(element.createdAt).toLocal()),
+    (element) => DateFormat('MMMM, y').format(element.createdAt.toLocal()),
   );
 });

mobile/lib/shared/providers/release_info.provider.dart

@@ -1,7 +1,9 @@
-import 'package:dio/dio.dart';
+import 'dart:convert';
+
 import 'package:flutter/material.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:http/http.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/shared/views/version_announcement_overlay.dart';
 
@@ -9,21 +11,20 @@ class ReleaseInfoNotifier extends StateNotifier<String> {
   ReleaseInfoNotifier() : super("");
 
   void checkGithubReleaseInfo() async {
-    var dio = Dio();
+    final Client client = Client();
     var box = Hive.box(hiveGithubReleaseInfoBox);
 
     try {
       String? localReleaseVersion = box.get(githubReleaseInfoKey);
-
-      var res = await dio.get(
-        "https://api.github.com/repos/alextran1502/immich/releases/latest",
-        options: Options(
-          headers: {"Accept": "application/vnd.github.v3+json"},
-        ),
-      );
+      final res = await client.get(
+          Uri.parse(
+            "https://api.github.com/repos/immich-app/immich/releases/latest",
+          ),
+          headers: {"Accept": "application/vnd.github.v3+json"});
 
       if (res.statusCode == 200) {
-        String latestTagVersion = res.data["tag_name"];
+        final data = jsonDecode(res.body);
+        String latestTagVersion = data["tag_name"];
         state = latestTagVersion;
 
         debugPrint("Local release version $localReleaseVersion");

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

@@ -5,6 +5,7 @@ class ApiService {
 
   late UserApi userApi;
   late AuthenticationApi authenticationApi;
+  late OAuthApi oAuthApi;
   late AlbumApi albumApi;
   late AssetApi assetApi;
   late ServerInfoApi serverInfoApi;
@@ -14,6 +15,7 @@ class ApiService {
     _apiClient = ApiClient(basePath: endpoint);
     userApi = UserApi(_apiClient);
     authenticationApi = AuthenticationApi(_apiClient);
+    oAuthApi = OAuthApi(_apiClient);
     albumApi = AlbumApi(_apiClient);
     assetApi = AssetApi(_apiClient);
     serverInfoApi = ServerInfoApi(_apiClient);

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

@@ -1,140 +0,0 @@
-import 'dart:async';
-import 'dart:convert';
-
-import 'package:dio/dio.dart';
-import 'package:flutter/cupertino.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/utils/dio_http_interceptor.dart';
-
-final networkServiceProvider = Provider((_) => NetworkService());
-
-class NetworkService {
-  late final Dio dio;
-
-  NetworkService() {
-    dio = Dio();
-    dio.interceptors.add(AuthenticatedRequestInterceptor());
-  }
-
-  Future<dynamic> deleteRequest({required String url, dynamic data}) async {
-    try {
-      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
-      Response res = await dio.delete('$savedEndpoint/$url', data: data);
-
-      if (res.statusCode == 200) {
-        return res;
-      }
-    } on DioError catch (e) {
-      debugPrint("DioError: ${e.response}");
-    } catch (e) {
-      debugPrint("ERROR deleteRequest: ${e.toString()}");
-    }
-  }
-
-  Future<dynamic> getRequest({
-    required String url,
-    bool isByteResponse = false,
-    bool isStreamReponse = false,
-  }) async {
-    try {
-      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
-
-      if (isByteResponse) {
-        Response<List<int>> res = await dio.get<List<int>>(
-          '$savedEndpoint/$url',
-          options: Options(responseType: ResponseType.bytes),
-        );
-
-        if (res.statusCode == 200) {
-          return res;
-        }
-      } else if (isStreamReponse) {
-        Response<ResponseBody> res = await dio.get<ResponseBody>(
-          '$savedEndpoint/$url',
-          options: Options(responseType: ResponseType.stream),
-        );
-
-        if (res.statusCode == 200) {
-          return res;
-        }
-      } else {
-        Response res = await dio.get('$savedEndpoint/$url');
-        if (res.statusCode == 200) {
-          return res;
-        }
-      }
-    } on DioError catch (e) {
-      debugPrint("DioError: ${e.response}");
-    } catch (e) {
-      debugPrint("ERROR getRequest: ${e.toString()}");
-    }
-  }
-
-  Future<dynamic> postRequest({required String url, dynamic data}) async {
-    try {
-      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
-      var validUrl = Uri.parse('$savedEndpoint/$url').toString();
-      var res = await dio.post(validUrl, data: data);
-
-      return res;
-    } on DioError catch (e) {
-      debugPrint("[postRequest] DioError: ${e.response}");
-      return null;
-    } catch (e) {
-      debugPrint("ERROR PostRequest: $e");
-      return null;
-    }
-  }
-
-  Future<dynamic> putRequest({required String url, dynamic data}) async {
-    try {
-      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
-      var validUrl = Uri.parse('$savedEndpoint/$url').toString();
-      var res = await dio.put(validUrl, data: data);
-
-      return res;
-    } on DioError catch (e) {
-      debugPrint("DioError: ${e.response}");
-      return null;
-    } catch (e) {
-      debugPrint("ERROR PutRequest: $e");
-      return null;
-    }
-  }
-
-  Future<dynamic> patchRequest({required String url, dynamic data}) async {
-    try {
-      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
-      var validUrl = Uri.parse('$savedEndpoint/$url').toString();
-      var res = await dio.patch(validUrl, data: data);
-
-      return res;
-    } on DioError catch (e) {
-      debugPrint("DioError: ${e.response}");
-    } catch (e) {
-      debugPrint("ERROR PatchRequest: $e");
-    }
-  }
-
-  Future<bool> pingServer() async {
-    try {
-      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
-      var validUrl = Uri.parse('$savedEndpoint/server-info/ping').toString();
-
-      debugPrint("ping server at url $validUrl");
-
-      var res = await dio.get(validUrl);
-      var jsonRespsonse = jsonDecode(res.toString());
-
-      return jsonRespsonse["res"] == "pong";
-    } on DioError catch (e) {
-      debugPrint("[PING SERVER] DioError: ${e.response} - $e");
-      return false;
-    } catch (e) {
-      debugPrint("ERROR PingServer: $e");
-      return false;
-    }
-  }
-}

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

@@ -2,11 +2,11 @@ import 'dart:io';
 
 import 'package:flutter/material.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:openapi/api.dart';
+import 'package:path/path.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:share_plus/share_plus.dart';
-import 'package:path/path.dart' as p;
 import 'api.service.dart';
 
 final shareServiceProvider =
@@ -17,26 +17,27 @@ class ShareService {
 
   ShareService(this._apiService);
 
-  Future<void> shareAsset(AssetResponseDto asset) async {
+  Future<void> shareAsset(Asset asset) async {
     await shareAssets([asset]);
   }
 
-  Future<void> shareAssets(List<AssetResponseDto> assets) async {
+  Future<void> shareAssets(List<Asset> assets) async {
     final downloadedFilePaths = assets.map((asset) async {
-      final res = await _apiService.assetApi.downloadFileWithHttpInfo(
-        asset.deviceAssetId,
-        asset.deviceId,
-        isThumb: false,
-        isWeb: false,
-      );
-
-      final fileName = p.basename(asset.originalPath);
-
-      final tempDir = await getTemporaryDirectory();
-      final tempFile = await File('${tempDir.path}/$fileName').create();
-      tempFile.writeAsBytesSync(res.bodyBytes);
-
-      return tempFile.path;
+      if (asset.isRemote) {
+        final tempDir = await getTemporaryDirectory();
+        final fileName = basename(asset.remote!.originalPath);
+        final tempFile = await File('${tempDir.path}/$fileName').create();
+        final res = await _apiService.assetApi.downloadFileWithHttpInfo(
+          asset.remote!.id,
+          isThumb: false,
+          isWeb: false,
+        );
+        tempFile.writeAsBytesSync(res.bodyBytes);
+        return tempFile.path;
+      } else {
+        File? f = await asset.local!.file;
+        return f!.path;
+      }
     });
 
     Share.shareFiles(