Merge branch 'main' of github.com:immich-app/immich

Up server version
Fixed checkbox render performance (#448 )
2025-12-09 01:10:08 +03:00 · 2022-08-09 19:12:32 -05:00 · 2022-08-09 19:12:21 -05:00 · 2022-08-09 19:10:55 -05:00 · 2022-08-08 23:43:48 -05:00 · 2022-08-08 22:55:35 -05:00
56 changed files with 667 additions and 199 deletions
--- a/.github/workflows/build_push_docker_latest.yml
+++ b/.github/workflows/build_push_docker_latest.yml
@@ -27,7 +27,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and push Immich Mono Repo
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./server
          file: ./server/Dockerfile
@@ -55,7 +55,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and Push Machine Learning
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./machine-learning
          file: ./machine-learning/Dockerfile
@@ -82,7 +82,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and Push Web
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./web
          file: ./web/Dockerfile
@@ -110,7 +110,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and Push Proxy
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./nginx
          file: ./nginx/Dockerfile
--- a/.github/workflows/build_push_docker_staging.yml
+++ b/.github/workflows/build_push_docker_staging.yml
@@ -30,7 +30,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and push Immich Mono Repo
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./server
          file: ./server/Dockerfile
@@ -59,7 +59,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and Push Machine Learning
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./machine-learning
          file: ./machine-learning/Dockerfile
@@ -87,7 +87,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and Push Web
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./web
          file: ./web/Dockerfile
@@ -116,7 +116,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and Push Proxy
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./nginx
          file: ./nginx/Dockerfile
--- a/.github/workflows/build_push_server_release.yml
+++ b/.github/workflows/build_push_server_release.yml
@@ -35,7 +35,7 @@ jobs:
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push immich-server release
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./server
          file: ./server/Dockerfile
@@ -68,7 +68,7 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build and Push Machine Learning
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./machine-learning
          file: ./machine-learning/Dockerfile
@@ -107,7 +107,7 @@ jobs:
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push immich-web release
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./web
          file: ./web/Dockerfile
@@ -147,7 +147,7 @@ jobs:
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push immich-proxy release
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: ./nginx
          file: ./nginx/Dockerfile
--- a/README.md
+++ b/README.md
@@ -137,7 +137,7 @@ wget -O .env wget https://raw.githubusercontent.com/immich-app/immich/main/docke
 * Populate customised database information if necessary.
 * Populate `UPLOAD_LOCATION` as prefered location for storing backup assets.
 * Populate a secret value for `JWT_SECRET`
-* [Optional] Popluate Mapbox value.
+* [Optional] Populate Mapbox value.

 **Example**

@@ -169,7 +169,7 @@ MAPBOX_KEY=

 ### Step 3 - Start the containers

-Run `docker-compose up` or `docker-compose up` (based on your docker's version)
+Run `docker-compose up` or `docker compose up` (based on your docker's version)

 ### Step 4 - Register admin user

--- a/mobile/android/fastlane/Fastfile
+++ b/mobile/android/fastlane/Fastfile
@@ -30,8 +30,8 @@ platform :android do
      task: 'bundle', 
      build_type: 'Release',
      properties: {
-        "android.injected.version.code" => 30,
-        "android.injected.version.name" => "1.20.0",
+        "android.injected.version.code" => 31,
+        "android.injected.version.name" => "1.21.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')
--- a/mobile/android/fastlane/README.md
+++ b/mobile/android/fastlane/README.md
@@ -15,13 +15,21 @@ For _fastlane_ installation instructions, see [Installing _fastlane_](https://do

 ## Android

+### android build
+
+```sh
+[bundle exec] fastlane android build
+```
+
+Build Android
+
 ### android release

 ```sh
 [bundle exec] fastlane android release
 ```

-Update AAB to PlayStore
+Build and Release Android

 ----

--- a/mobile/android/fastlane/metadata/android/en-US/changelogs/31.txt
+++ b/mobile/android/fastlane/metadata/android/en-US/changelogs/31.txt
@@ -0,0 +1,3 @@
+* Improve performance 
+* Fix album title overflow
+* New feature - Share asset from mobile to other apps
--- a/mobile/android/fastlane/report.xml
+++ b/mobile/android/fastlane/report.xml
@@ -5,17 +5,17 @@
    
    
      
-      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000204">
+      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000221">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="1: bundleRelease" time="11.673502">
+      <testcase classname="fastlane.lanes" name="1: bundleRelease" time="55.750133">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="2: upload_to_play_store" time="37.162935">
+      <testcase classname="fastlane.lanes" name="2: upload_to_play_store" time="35.558064">
        
      </testcase>
    
--- a/mobile/assets/i18n/de-DE.json
+++ b/mobile/assets/i18n/de-DE.json
@@ -47,6 +47,7 @@
  "backup_info_card_assets": "Elemente",
  "control_bottom_app_bar_delete": "Löschen",
  "create_shared_album_page_share": "Teilen",
+  "create_shared_album_page_create": "Erstellen",
  "create_shared_album_page_share_add_assets": "ELEMENTE HINZUFÜGEN",
  "create_shared_album_page_share_select_photos": "Fotos auswählen",
  "daily_title_text_date": "E, dd MMM",
@@ -97,10 +98,19 @@
  "tab_controller_nav_photos": "Fotos",
  "tab_controller_nav_search": "Suche",
  "tab_controller_nav_sharing": "Teilen",
+  "tab_controller_nav_library": "Bibliothek",
  "version_announcement_overlay_ack": "Ich habe verstanden",
  "version_announcement_overlay_release_notes": "Änderungsprotokoll",
  "version_announcement_overlay_text_1": "Hallo mein Freund! Es gibt eine neue Version von",
  "version_announcement_overlay_text_2": "Bitte nehm dir die Zeit und lese das ",
  "version_announcement_overlay_text_3": " und achte darauf, dass deine docker-compose und .env Dateien aktuell sind, vor allem wenn du ein System für automatische Updates benutzt (z.B. Watchtower).",
-  "version_announcement_overlay_title": "Neue Server-Version verfügbar \uD83C\uDF89"
+  "version_announcement_overlay_title": "Neue Server-Version verfügbar \uD83C\uDF89",
+  "album_thumbnail_card_item": "1 Element",
+  "album_thumbnail_card_items": "{} Elemente",
+  "album_thumbnail_card_shared": " · Geteilt",
+  "library_page_albums": "Alben",
+  "library_page_new_album": "Neues Album",
+  "create_album_page_untitled": "Unbenannt",
+  "share_dialog_preparing": "Vorbereiten...",
+  "control_bottom_app_bar_share": "Teilen"
 }
--- a/mobile/assets/i18n/en-US.json
+++ b/mobile/assets/i18n/en-US.json
@@ -104,5 +104,13 @@
  "version_announcement_overlay_text_1": "Hi friend, there is a new release of",
  "version_announcement_overlay_text_2": "please take your time to visit the ",
  "version_announcement_overlay_text_3": " and ensure your docker-compose and .env setup is up-to-date to prevent any misconfigurations, especially if you use WatchTower or any mechanism that handles updating your server application automatically.",
-  "version_announcement_overlay_title": "New Server Version Available \uD83C\uDF89"
+  "version_announcement_overlay_title": "New Server Version Available \uD83C\uDF89",
+  "album_thumbnail_card_item": "1 item",
+  "album_thumbnail_card_items": "{} items",
+  "album_thumbnail_card_shared": " · Shared",
+  "library_page_albums": "Albums",
+  "library_page_new_album": "New album",
+  "create_album_page_untitled": "Untitled",
+  "share_dialog_preparing": "Preparing...",
+  "control_bottom_app_bar_share": "Share"
 }
--- a/mobile/ios/Podfile.lock
+++ b/mobile/ios/Podfile.lock
@@ -19,6 +19,8 @@ PODS:
    - Flutter
    - FlutterMacOS
  - SAMKeychain (1.5.3)
+  - share_plus (0.0.1):
+    - Flutter
  - shared_preferences_ios (0.0.1):
    - Flutter
  - sqflite (0.0.2):
@@ -40,6 +42,7 @@ DEPENDENCIES:
  - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
  - path_provider_ios (from `.symlinks/plugins/path_provider_ios/ios`)
  - photo_manager (from `.symlinks/plugins/photo_manager/ios`)
+  - share_plus (from `.symlinks/plugins/share_plus/ios`)
  - shared_preferences_ios (from `.symlinks/plugins/shared_preferences_ios/ios`)
  - sqflite (from `.symlinks/plugins/sqflite/ios`)
  - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
@@ -67,6 +70,8 @@ EXTERNAL SOURCES:
    :path: ".symlinks/plugins/path_provider_ios/ios"
  photo_manager:
    :path: ".symlinks/plugins/photo_manager/ios"
+  share_plus:
+    :path: ".symlinks/plugins/share_plus/ios"
  shared_preferences_ios:
    :path: ".symlinks/plugins/shared_preferences_ios/ios"
  sqflite:
@@ -88,6 +93,7 @@ SPEC CHECKSUMS:
  path_provider_ios: 14f3d2fd28c4fdb42f44e0f751d12861c43cee02
  photo_manager: 4f6810b7dfc4feb03b461ac1a70dacf91fba7604
  SAMKeychain: 483e1c9f32984d50ca961e26818a534283b4cd5c
+  share_plus: 056a1e8ac890df3e33cb503afffaf1e9b4fbae68
  shared_preferences_ios: 548a61f8053b9b8a49ac19c1ffbc8b92c50d68ad
  sqflite: 6d358c025f5b867b29ed92fc697fd34924e11904
  Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
--- a/mobile/ios/Runner.xcodeproj/project.pbxproj
+++ b/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 = 38;
+				CURRENT_PROJECT_VERSION = 40;
 				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 = 38;
+				CURRENT_PROJECT_VERSION = 40;
 				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 = 38;
+				CURRENT_PROJECT_VERSION = 40;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
--- a/mobile/ios/Runner/Info.plist
+++ b/mobile/ios/Runner/Info.plist
@@ -17,11 +17,11 @@
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
-    <string>1.20.0</string>
+    <string>1.21.0</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
-    <string>38</string>
+    <string>40</string>
    <key>LSRequiresIPhoneOS</key>
    <true />
    <key>MGLMapboxMetricsEnabledSettingShownInApp</key>
--- a/mobile/ios/fastlane/Fastfile
+++ b/mobile/ios/fastlane/Fastfile
@@ -19,7 +19,7 @@ platform :ios do
  desc "iOS Beta"
  lane :beta do
    increment_version_number(
-      version_number: "1.20.0"
+    version_number: "1.21.0"
    )
    increment_build_number(
      build_number: latest_testflight_build_number + 1,
--- a/mobile/ios/fastlane/report.xml
+++ b/mobile/ios/fastlane/report.xml
@@ -5,34 +5,32 @@
    
    
      
-      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000213">
+      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000205">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="1: increment_version_number" time="2.088407">
+      <testcase classname="fastlane.lanes" name="1: increment_version_number" time="0.360401">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="2: latest_testflight_build_number" time="22.635867">
+      <testcase classname="fastlane.lanes" name="2: latest_testflight_build_number" time="4.012696">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="3: increment_build_number" time="0.376681">
+      <testcase classname="fastlane.lanes" name="3: increment_build_number" time="0.378836">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="4: build_app" time="91.762747">
+      <testcase classname="fastlane.lanes" name="4: build_app" time="80.023705">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="5: upload_to_testflight" time="49.149884">
-        
-          <failure message="/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/actions/actions_helper.rb:67:in `execute_action&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/runner.rb:255:in `block in execute_action&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/runner.rb:229:in `chdir&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/runner.rb:229:in `execute_action&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/runner.rb:157:in `trigger_action_by_name&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/fast_file.rb:159:in `method_missing&apos;&#10;Fastfile:30:in `block (2 levels) in parsing_binding&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/lane.rb:33:in `call&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/runner.rb:49:in `block in execute&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/runner.rb:45:in `chdir&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/runner.rb:45:in `execute&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/lane_manager.rb:47:in `cruise_lane&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/command_line_handler.rb:36:in `handle&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/commands_generator.rb:110:in `block (2 levels) in run&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/commander-4.6.0/lib/commander/command.rb:187:in `call&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/commander-4.6.0/lib/commander/command.rb:157:in `run&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/commander-4.6.0/lib/commander/runner.rb:444:in `run_active_command&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane_core/lib/fastlane_core/ui/fastlane_runner.rb:124:in `run!&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/commander-4.6.0/lib/commander/delegates.rb:18:in `run!&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/commands_generator.rb:354:in `run&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/commands_generator.rb:43:in `start&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/fastlane/lib/fastlane/cli_tools_distributor.rb:123:in `take_off&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/gems/fastlane-2.207.0/bin/fastlane:23:in `&lt;top (required)&gt;&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/bin/fastlane:25:in `load&apos;&#10;/opt/homebrew/Cellar/fastlane/2.207.0/libexec/bin/fastlane:25:in `&lt;main&gt;&apos;&#10;&#10;Error uploading ipa file: &#10; [Transporter Error Output]: ERROR ITMS-90186: Invalid Pre-Release Train. The train version &apos;1.19.0&apos; is closed for new build submissions
+      <testcase classname="fastlane.lanes" name="5: upload_to_testflight" time="98.18403">
        
      </testcase>
    
--- a/mobile/lib/main.dart
+++ b/mobile/lib/main.dart
@@ -1,6 +1,10 @@
+import 'dart:io';
+
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_displaymode/flutter_displaymode.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/immich_colors.dart';
@@ -49,6 +53,14 @@ void main() async {
    Locale('it', 'IT'),
  ];

+  if (kReleaseMode && Platform.isAndroid) {
+    try {
+      await FlutterDisplayMode.setHighRefreshRate();
+    } catch (e) {
+      debugPrint("Error setting high refresh rate: $e");
+    }
+  }
+
  runApp(
    EasyLocalization(
      supportedLocales: locales,
--- a/mobile/lib/modules/album/ui/album_thumbnail_card.dart
+++ b/mobile/lib/modules/album/ui/album_thumbnail_card.dart
@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
@@ -15,6 +16,8 @@ class AlbumThumbnailCard extends StatelessWidget {
  Widget build(BuildContext context) {
    var box = Hive.box(userInfoBox);

+    final cardSize = MediaQuery.of(context).size.width / 2 - 18;
+
    return GestureDetector(
      onTap: () {
        AutoRouter.of(context).push(AlbumViewerRoute(albumId: album.id));
@@ -27,8 +30,8 @@ class AlbumThumbnailCard extends StatelessWidget {
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: FadeInImage(
-                width: MediaQuery.of(context).size.width / 2 - 18,
-                height: MediaQuery.of(context).size.width / 2 - 18,
+                width: cardSize,
+                height: cardSize,
                fit: BoxFit.cover,
                placeholder: MemoryImage(kTransparentImage),
                image: NetworkImage(
@@ -43,11 +46,14 @@ class AlbumThumbnailCard extends StatelessWidget {
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
-              child: Text(
-                album.albumName,
-                style: const TextStyle(
-                  fontWeight: FontWeight.bold,
-                  fontSize: 12,
+              child: SizedBox(
+                width: cardSize,
+                child: Text(
+                  album.albumName,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 12,
+                  ),
                ),
              ),
            ),
@@ -55,18 +61,20 @@ class AlbumThumbnailCard extends StatelessWidget {
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
-                  '${album.assets.length} item${album.assets.length > 1 ? 's' : ''}',
+                  album.assets.length == 1
+                      ? 'album_thumbnail_card_item'
+                      : 'album_thumbnail_card_items',
                  style: const TextStyle(
                    fontSize: 10,
                  ),
-                ),
+                ).tr(args: ['${album.assets.length }']),
                if (album.shared)
                  const Text(
-                    ' · Shared',
+                    'album_thumbnail_card_shared',
                    style: TextStyle(
                      fontSize: 10,
                    ),
-                  )
+                  ).tr()
              ],
            )
          ],
--- a/mobile/lib/modules/album/ui/album_viewer_thumbnail.dart
+++ b/mobile/lib/modules/album/ui/album_viewer_thumbnail.dart
@@ -8,6 +8,7 @@ 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';

 class AlbumViewerThumbnail extends HookConsumerWidget {
@@ -24,8 +25,7 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
  Widget build(BuildContext context, WidgetRef ref) {
    final cacheKey = useState(1);
    var box = Hive.box(userInfoBox);
-    var thumbnailRequestUrl =
-        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';
+    var thumbnailRequestUrl = getThumbnailUrl(asset);
    var deviceId = ref.watch(authenticationProvider).deviceId;
    final selectedAssetsInAlbumViewer =
        ref.watch(assetSelectionProvider).selectedAssetsInAlbumViewer;
@@ -37,7 +37,6 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
        GalleryViewerRoute(
          asset: asset,
          assetList: assetList,
-          thumbnailRequestUrl: thumbnailRequestUrl,
        ),
      );
    }
--- a/mobile/lib/modules/album/ui/shared_album_thumbnail_image.dart
+++ b/mobile/lib/modules/album/ui/shared_album_thumbnail_image.dart
@@ -4,6 +4,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';

 class SharedAlbumThumbnailImage extends HookConsumerWidget {
@@ -17,8 +18,6 @@ class SharedAlbumThumbnailImage extends HookConsumerWidget {
    final cacheKey = useState(1);

    var box = Hive.box(userInfoBox);
-    var thumbnailRequestUrl =
-        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';

    return GestureDetector(
      onTap: () {
@@ -32,7 +31,7 @@ class SharedAlbumThumbnailImage extends HookConsumerWidget {
            height: 500,
            memCacheHeight: 500,
            fit: BoxFit.cover,
-            imageUrl: thumbnailRequestUrl,
+            imageUrl: getThumbnailUrl(asset),
            httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
            fadeInDuration: const Duration(milliseconds: 250),
            progressIndicatorBuilder: (context, url, downloadProgress) =>
--- a/mobile/lib/modules/album/views/create_album_page.dart
+++ b/mobile/lib/modules/album/views/create_album_page.dart
@@ -37,8 +37,10 @@ class CreateAlbumPage extends HookConsumerWidget {
      isAlbumTitleTextFieldFocus.value = false;

      if (albumTitleController.text.isEmpty) {
-        albumTitleController.text = 'Untitled';
-        ref.watch(albumTitleProvider.notifier).setAlbumTitle('Untitled');
+        albumTitleController.text = 'create_album_page_untitled'.tr();
+        ref
+            .watch(albumTitleProvider.notifier)
+            .setAlbumTitle('create_album_page_untitled'.tr());
      }
    }

--- a/mobile/lib/modules/album/views/library_page.dart
+++ b/mobile/lib/modules/album/views/library_page.dart
@@ -1,4 +1,5 @@
 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:hooks_riverpod/hooks_riverpod.dart';
@@ -66,15 +67,15 @@ class LibraryPage extends HookConsumerWidget {
                ),
              ),
            ),
-            const Padding(
-              padding: EdgeInsets.only(top: 8.0),
-              child: Text(
-                "New album",
+            Padding(
+              padding: const EdgeInsets.only(top: 8.0),
+              child: const Text(
+                'library_page_new_album',
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                ),
-              ),
+              ).tr(),
            )
          ],
        ),
@@ -85,13 +86,13 @@ class LibraryPage extends HookConsumerWidget {
      body: CustomScrollView(
        slivers: [
          _buildAppBar(),
-          const SliverToBoxAdapter(
+          SliverToBoxAdapter(
            child: Padding(
-              padding: EdgeInsets.all(12.0),
-              child: Text(
-                "Albums",
+              padding: const EdgeInsets.all(12.0),
+              child: const Text(
+                'library_page_albums',
                style: TextStyle(fontWeight: FontWeight.bold),
-              ),
+              ).tr(),
            ),
          ),
          SliverPadding(
--- a/mobile/lib/modules/asset_viewer/providers/image_viewer_page_state.provider.dart
+++ b/mobile/lib/modules/asset_viewer/providers/image_viewer_page_state.provider.dart
@@ -1,15 +1,19 @@
+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/services/share.service.dart';
 import 'package:immich_mobile/shared/ui/immich_toast.dart';
+import 'package:immich_mobile/shared/ui/share_dialog.dart';
 import 'package:openapi/api.dart';

 class ImageViewerStateNotifier extends StateNotifier<ImageViewerPageState> {
  final ImageViewerService _imageViewerService;
+  final ShareService _shareService;

-  ImageViewerStateNotifier(this._imageViewerService)
+  ImageViewerStateNotifier(this._imageViewerService, this._shareService)
      : super(
          ImageViewerPageState(
            downloadAssetStatus: DownloadAssetStatus.idle,
@@ -42,9 +46,23 @@ class ImageViewerStateNotifier extends StateNotifier<ImageViewerPageState> {

    state = state.copyWith(downloadAssetStatus: DownloadAssetStatus.idle);
  }
+
+  void shareAsset(AssetResponseDto asset, BuildContext context) async {
+    showDialog(
+      context: context,
+      builder: (BuildContext buildContext) {
+        _shareService
+            .shareAsset(asset)
+            .then((_) => Navigator.of(buildContext).pop());
+        return const ShareDialog();
+      },
+      barrierDismissible: false,
+    );
+  }
 }

 final imageViewerStateProvider =
    StateNotifierProvider<ImageViewerStateNotifier, ImageViewerPageState>(
-  ((ref) => ImageViewerStateNotifier(ref.watch(imageViewerServiceProvider))),
+  ((ref) => ImageViewerStateNotifier(
+      ref.watch(imageViewerServiceProvider), ref.watch(shareServiceProvider))),
 );
--- a/mobile/lib/modules/asset_viewer/ui/remote_photo_view.dart
+++ b/mobile/lib/modules/asset_viewer/ui/remote_photo_view.dart
@@ -3,7 +3,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:photo_view/photo_view.dart';

-enum _RemoteImageStatus { empty, thumbnail, full }
+enum _RemoteImageStatus { empty, thumbnail, preview, full }

 class _RemotePhotoViewState extends State<RemotePhotoView> {
  late CachedNetworkImageProvider _imageProvider;
@@ -15,13 +15,16 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
  @override
  Widget build(BuildContext context) {
    bool allowMoving = _status == _RemoteImageStatus.full;
-    return PhotoView(
-      imageProvider: _imageProvider,
-      minScale: PhotoViewComputedScale.contained,
-      maxScale: allowMoving ? 1.0 : PhotoViewComputedScale.contained,
-      enablePanAlways: true,
-      scaleStateChangedCallback: _scaleStateChanged,
-      onScaleEnd: _onScaleListener,
+
+    return IgnorePointer(
+      ignoring: !allowMoving,
+      child: PhotoView(
+        imageProvider: _imageProvider,
+        minScale: PhotoViewComputedScale.contained,
+        enablePanAlways: true,
+        scaleStateChangedCallback: _scaleStateChanged,
+        onScaleEnd: _onScaleListener,
+      ),
    );
  }

@@ -52,6 +55,14 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
    widget.isZoomedFunction();
  }

+  void _fireStartLoadingEvent() {
+    if (widget.onLoadingStart != null) widget.onLoadingStart!();
+  }
+
+  void _fireFinishedLoadingEvent() {
+    if (widget.onLoadingCompleted != null) widget.onLoadingCompleted!();
+  }
+
  CachedNetworkImageProvider _authorizedImageProvider(String url) {
    return CachedNetworkImageProvider(
      url,
@@ -64,14 +75,25 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
    _RemoteImageStatus newStatus,
    CachedNetworkImageProvider provider,
  ) {
-    // Transition to same status is forbidden
    if (_status == newStatus) return;
-    // Transition full -> thumbnail is forbidden
+
    if (_status == _RemoteImageStatus.full &&
        newStatus == _RemoteImageStatus.thumbnail) return;

+    if (_status == _RemoteImageStatus.preview &&
+        newStatus == _RemoteImageStatus.thumbnail) return;
+
+    if (_status == _RemoteImageStatus.full &&
+        newStatus == _RemoteImageStatus.preview) return;
+
    if (!mounted) return;

+    if (newStatus != _RemoteImageStatus.full) {
+      _fireStartLoadingEvent();
+    } else {
+      _fireFinishedLoadingEvent();
+    }
+
    setState(() {
      _status = newStatus;
      _imageProvider = provider;
@@ -92,6 +114,16 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
      }),
    );

+    if (widget.previewUrl != null) {
+      CachedNetworkImageProvider previewProvider =
+          _authorizedImageProvider(widget.previewUrl!);
+      previewProvider.resolve(const ImageConfiguration()).addListener(
+        ImageStreamListener((ImageInfo imageInfo, _) {
+          _performStateTransition(_RemoteImageStatus.preview, previewProvider);
+        }),
+      );
+    }
+
    CachedNetworkImageProvider fullProvider =
        _authorizedImageProvider(widget.imageUrl);
    fullProvider.resolve(const ImageConfiguration()).addListener(
@@ -109,20 +141,26 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
 }

 class RemotePhotoView extends StatefulWidget {
-  const RemotePhotoView({
-    Key? key,
-    required this.thumbnailUrl,
-    required this.imageUrl,
-    required this.authToken,
-    required this.isZoomedFunction,
-    required this.isZoomedListener,
-    required this.onSwipeDown,
-    required this.onSwipeUp,
-  }) : super(key: key);
+  const RemotePhotoView(
+      {Key? key,
+      required this.thumbnailUrl,
+      required this.imageUrl,
+      required this.authToken,
+      required this.isZoomedFunction,
+      required this.isZoomedListener,
+      required this.onSwipeDown,
+      required this.onSwipeUp,
+      this.previewUrl,
+      this.onLoadingCompleted,
+      this.onLoadingStart})
+      : super(key: key);

  final String thumbnailUrl;
  final String imageUrl;
  final String authToken;
+  final String? previewUrl;
+  final Function? onLoadingCompleted;
+  final Function? onLoadingStart;

  final void Function() onSwipeDown;
  final void Function() onSwipeUp;
--- a/mobile/lib/modules/asset_viewer/ui/top_control_app_bar.dart
+++ b/mobile/lib/modules/asset_viewer/ui/top_control_app_bar.dart
@@ -11,11 +11,15 @@ class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
    required this.asset,
    required this.onMoreInfoPressed,
    required this.onDownloadPressed,
+    required this.onSharePressed,
+    this.loading = false
  }) : super(key: key);

  final AssetResponseDto asset;
  final Function onMoreInfoPressed;
  final Function onDownloadPressed;
+  final Function onSharePressed;
+  final bool loading;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
@@ -35,6 +39,14 @@ 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),
+          ),
+        ) ,
        IconButton(
          iconSize: iconSize,
          splashRadius: iconSize,
@@ -53,6 +65,14 @@ class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
              ? const Icon(Icons.favorite_rounded)
              : const Icon(Icons.favorite_border_rounded),
        ),
+        IconButton(
+          iconSize: iconSize,
+          splashRadius: iconSize,
+          onPressed: () {
+            onSharePressed();
+          },
+          icon: const Icon(Icons.share),
+        ),
        IconButton(
          iconSize: iconSize,
          splashRadius: iconSize,
--- a/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
+++ b/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
@@ -17,13 +17,13 @@ import 'package:openapi/api.dart';
 class GalleryViewerPage extends HookConsumerWidget {
  late List<AssetResponseDto> assetList;
  final AssetResponseDto asset;
-  final String thumbnailRequestUrl;
+
+  static const _threeStageLoading = false;

  GalleryViewerPage({
    Key? key,
    required this.assetList,
    required this.asset,
-    required this.thumbnailRequestUrl,
  }) : super(key: key);

  AssetResponseDto? assetDetail;
@@ -32,6 +32,7 @@ class GalleryViewerPage extends HookConsumerWidget {
    final Box<dynamic> box = Hive.box(userInfoBox);

    int indexOfAsset = assetList.indexOf(asset);
+    final loading = useState(false);

    @override
    void initState(int index) {
@@ -74,6 +75,7 @@ class GalleryViewerPage extends HookConsumerWidget {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: TopControlAppBar(
+        loading: loading.value,
        asset: assetList[indexOfAsset],
        onMoreInfoPressed: () {
          showInfo();
@@ -82,6 +84,10 @@ class GalleryViewerPage extends HookConsumerWidget {
          ref
              .watch(imageViewerStateProvider.notifier)
              .downloadAsset(assetList[indexOfAsset], context);
+        }, onSharePressed: () {
+          ref
+              .watch(imageViewerStateProvider.notifier)
+              .shareAsset(assetList[indexOfAsset], context);
        },
      ),
      body: SafeArea(
@@ -98,15 +104,14 @@ class GalleryViewerPage extends HookConsumerWidget {
            getAssetExif();
            if (assetList[index].type == AssetTypeEnum.IMAGE) {
              return ImageViewerPage(
-                thumbnailUrl:
-                    '${box.get(serverEndpointKey)}/asset/thumbnail/${assetList[index].id}',
-                imageUrl:
-                    '${box.get(serverEndpointKey)}/asset/file?aid=${assetList[index].deviceAssetId}&did=${assetList[index].deviceId}&isThumb=false',
                authToken: 'Bearer ${box.get(accessTokenKey)}',
                isZoomedFunction: isZoomedMethod,
                isZoomedListener: isZoomedListener,
+                onLoadingCompleted: () => loading.value = false,
+                onLoadingStart: () => loading.value = _threeStageLoading,
                asset: assetList[index],
                heroTag: assetList[index].id,
+                threeStageLoading: _threeStageLoading
              );
            } else {
              return SwipeDetector(
--- a/mobile/lib/modules/asset_viewer/views/image_viewer_page.dart
+++ b/mobile/lib/modules/asset_viewer/views/image_viewer_page.dart
@@ -8,27 +8,30 @@ import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/remote_photo_view.dart';
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';

 // ignore: must_be_immutable
 class ImageViewerPage extends HookConsumerWidget {
-  final String imageUrl;
  final String heroTag;
-  final String thumbnailUrl;
  final AssetResponseDto asset;
  final String authToken;
  final ValueNotifier<bool> isZoomedListener;
  final void Function() isZoomedFunction;
+  final void Function() onLoadingCompleted;
+  final void Function() onLoadingStart;
+  final bool threeStageLoading;

  ImageViewerPage({
    Key? key,
-    required this.imageUrl,
    required this.heroTag,
-    required this.thumbnailUrl,
    required this.asset,
    required this.authToken,
    required this.isZoomedFunction,
    required this.isZoomedListener,
+    required this.onLoadingCompleted,
+    required this.onLoadingStart,
+    required this.threeStageLoading,
  }) : super(key: key);

  AssetResponseDto? assetDetail;
@@ -68,14 +71,18 @@ class ImageViewerPage extends HookConsumerWidget {
          child: Hero(
            tag: heroTag,
            child: RemotePhotoView(
-              thumbnailUrl: thumbnailUrl,
-              imageUrl: imageUrl,
-              authToken: authToken,
-              isZoomedFunction: isZoomedFunction,
-              isZoomedListener: isZoomedListener,
-              onSwipeDown: () => AutoRouter.of(context).pop(),
-              onSwipeUp: () => showInfo(),
-            ),
+                thumbnailUrl: getThumbnailUrl(asset),
+                imageUrl: getImageUrl(asset),
+                previewUrl: threeStageLoading
+                    ? getThumbnailUrl(asset, type: ThumbnailFormat.JPEG)
+                    : null,
+                authToken: authToken,
+                isZoomedFunction: isZoomedFunction,
+                isZoomedListener: isZoomedListener,
+                onSwipeDown: () => AutoRouter.of(context).pop(),
+                onSwipeUp: () => showInfo(),
+                onLoadingCompleted: onLoadingCompleted,
+                onLoadingStart: onLoadingStart),
          ),
        ),
        if (downloadAssetStatus == DownloadAssetStatus.loading)
--- a/mobile/lib/modules/home/providers/home_page_state.provider.dart
+++ b/mobile/lib/modules/home/providers/home_page_state.provider.dart
@@ -1,9 +1,16 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/models/home_page_state.model.dart';
+import 'package:immich_mobile/shared/services/share.service.dart';
+import 'package:immich_mobile/shared/ui/share_dialog.dart';
 import 'package:openapi/api.dart';

 class HomePageStateNotifier extends StateNotifier<HomePageState> {
-  HomePageStateNotifier()
+
+  final ShareService _shareService;
+
+  HomePageStateNotifier(this._shareService)
      : super(
          HomePageState(
            isMultiSelectEnable: false,
@@ -64,9 +71,22 @@ class HomePageStateNotifier extends StateNotifier<HomePageState> {

    state = state.copyWith(selectedItems: currentList);
  }
+
+  void shareAssets(List<AssetResponseDto> assets, BuildContext context) {
+    showDialog(
+      context: context,
+      builder: (BuildContext buildContext) {
+        _shareService
+            .shareAssets(assets)
+            .then((_) => Navigator.of(buildContext).pop());
+        return const ShareDialog();
+      },
+      barrierDismissible: false,
+    );
+  }
 }

 final homePageStateProvider =
    StateNotifierProvider<HomePageStateNotifier, HomePageState>(
-  ((ref) => HomePageStateNotifier()),
+  ((ref) => HomePageStateNotifier(ref.watch(shareServiceProvider))),
 );
--- a/mobile/lib/modules/home/ui/control_bottom_app_bar.dart
+++ b/mobile/lib/modules/home/ui/control_bottom_app_bar.dart
@@ -1,12 +1,16 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/ui/delete_diaglog.dart';

-class ControlBottomAppBar extends StatelessWidget {
+import '../../../shared/providers/asset.provider.dart';
+import '../providers/home_page_state.provider.dart';
+
+class ControlBottomAppBar extends ConsumerWidget {
  const ControlBottomAppBar({Key? key}) : super(key: key);

  @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
    return Positioned(
      bottom: 0,
      left: 0,
@@ -25,7 +29,7 @@ class ControlBottomAppBar extends StatelessWidget {
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ControlBoxButton(
                    iconData: Icons.delete_forever_rounded,
@@ -39,6 +43,20 @@ class ControlBottomAppBar extends StatelessWidget {
                      );
                    },
                  ),
+                  ControlBoxButton(
+                    iconData: Icons.share,
+                    label: "control_bottom_app_bar_share".tr(),
+                    onPressed: () {
+                      final homePageState = ref.watch(homePageStateProvider);
+                      ref.watch(homePageStateProvider.notifier).shareAssets(
+                            homePageState.selectedItems.toList(),
+                            context,
+                          );
+                      ref
+                          .watch(homePageStateProvider.notifier)
+                          .disableMultiSelect();
+                    },
+                  ),
                ],
              ),
            )
@@ -67,7 +85,7 @@ class ControlBoxButton extends StatelessWidget {
      width: 60,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(
            onPressed: () {
--- a/mobile/lib/modules/home/ui/thumbnail_image.dart
+++ b/mobile/lib/modules/home/ui/thumbnail_image.dart
@@ -9,6 +9,7 @@ import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/modules/home/providers/home_page_state.provider.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';

 class ThumbnailImage extends HookConsumerWidget {
@@ -23,8 +24,7 @@ class ThumbnailImage extends HookConsumerWidget {
    final cacheKey = useState(1);

    var box = Hive.box(userInfoBox);
-    var thumbnailRequestUrl =
-        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';
+    var thumbnailRequestUrl = getThumbnailUrl(asset);
    var selectedAsset = ref.watch(homePageStateProvider).selectedItems;
    var isMultiSelectEnable =
        ref.watch(homePageStateProvider).isMultiSelectEnable;
@@ -65,7 +65,6 @@ class ThumbnailImage extends HookConsumerWidget {
          AutoRouter.of(context).push(
            GalleryViewerRoute(
              assetList: assetList,
-              thumbnailRequestUrl: thumbnailRequestUrl,
              asset: asset,
            ),
          );
--- a/mobile/lib/modules/home/views/home_page.dart
+++ b/mobile/lib/modules/home/views/home_page.dart
@@ -76,6 +76,7 @@ class HomePage extends HookConsumerWidget {

          imageGridGroup.add(
            DailyTitleText(
+              key: Key('${dateGroup.toString()}title'),
              isoDate: dateGroup,
              assetGroup: immichAssetList,
            ),
--- a/mobile/lib/routing/router.gr.dart
+++ b/mobile/lib/routing/router.gr.dart
@@ -46,10 +46,7 @@ class _$AppRouter extends RootStackRouter {
      return MaterialPageX<dynamic>(
          routeData: routeData,
          child: GalleryViewerPage(
-              key: args.key,
-              assetList: args.assetList,
-              asset: args.asset,
-              thumbnailRequestUrl: args.thumbnailRequestUrl));
+              key: args.key, assetList: args.assetList, asset: args.asset));
    },
    ImageViewerRoute.name: (routeData) {
      final args = routeData.argsAs<ImageViewerRouteArgs>();
@@ -57,13 +54,14 @@ class _$AppRouter extends RootStackRouter {
          routeData: routeData,
          child: ImageViewerPage(
              key: args.key,
-              imageUrl: args.imageUrl,
              heroTag: args.heroTag,
-              thumbnailUrl: args.thumbnailUrl,
              asset: args.asset,
              authToken: args.authToken,
              isZoomedFunction: args.isZoomedFunction,
-              isZoomedListener: args.isZoomedListener));
+              isZoomedListener: args.isZoomedListener,
+              onLoadingCompleted: args.onLoadingCompleted,
+              onLoadingStart: args.onLoadingStart,
+              threeStageLoading: args.threeStageLoading));
    },
    VideoViewerRoute.name: (routeData) {
      final args = routeData.argsAs<VideoViewerRouteArgs>();
@@ -258,25 +256,18 @@ class GalleryViewerRoute extends PageRouteInfo<GalleryViewerRouteArgs> {
  GalleryViewerRoute(
      {Key? key,
      required List<AssetResponseDto> assetList,
-      required AssetResponseDto asset,
-      required String thumbnailRequestUrl})
+      required AssetResponseDto asset})
      : super(GalleryViewerRoute.name,
            path: '/gallery-viewer-page',
            args: GalleryViewerRouteArgs(
-                key: key,
-                assetList: assetList,
-                asset: asset,
-                thumbnailRequestUrl: thumbnailRequestUrl));
+                key: key, assetList: assetList, asset: asset));

  static const String name = 'GalleryViewerRoute';
 }

 class GalleryViewerRouteArgs {
  const GalleryViewerRouteArgs(
-      {this.key,
-      required this.assetList,
-      required this.asset,
-      required this.thumbnailRequestUrl});
+      {this.key, required this.assetList, required this.asset});

  final Key? key;

@@ -284,11 +275,9 @@ class GalleryViewerRouteArgs {

  final AssetResponseDto asset;

-  final String thumbnailRequestUrl;
-
  @override
  String toString() {
-    return 'GalleryViewerRouteArgs{key: $key, assetList: $assetList, asset: $asset, thumbnailRequestUrl: $thumbnailRequestUrl}';
+    return 'GalleryViewerRouteArgs{key: $key, assetList: $assetList, asset: $asset}';
  }
 }

@@ -297,24 +286,26 @@ class GalleryViewerRouteArgs {
 class ImageViewerRoute extends PageRouteInfo<ImageViewerRouteArgs> {
  ImageViewerRoute(
      {Key? key,
-      required String imageUrl,
      required String heroTag,
-      required String thumbnailUrl,
      required AssetResponseDto asset,
      required String authToken,
      required void Function() isZoomedFunction,
-      required ValueNotifier<bool> isZoomedListener})
+      required ValueNotifier<bool> isZoomedListener,
+      required void Function() onLoadingCompleted,
+      required void Function() onLoadingStart,
+      required bool threeStageLoading})
      : super(ImageViewerRoute.name,
            path: '/image-viewer-page',
            args: ImageViewerRouteArgs(
                key: key,
-                imageUrl: imageUrl,
                heroTag: heroTag,
-                thumbnailUrl: thumbnailUrl,
                asset: asset,
                authToken: authToken,
                isZoomedFunction: isZoomedFunction,
-                isZoomedListener: isZoomedListener));
+                isZoomedListener: isZoomedListener,
+                onLoadingCompleted: onLoadingCompleted,
+                onLoadingStart: onLoadingStart,
+                threeStageLoading: threeStageLoading));

  static const String name = 'ImageViewerRoute';
 }
@@ -322,22 +313,19 @@ class ImageViewerRoute extends PageRouteInfo<ImageViewerRouteArgs> {
 class ImageViewerRouteArgs {
  const ImageViewerRouteArgs(
      {this.key,
-      required this.imageUrl,
      required this.heroTag,
-      required this.thumbnailUrl,
      required this.asset,
      required this.authToken,
      required this.isZoomedFunction,
-      required this.isZoomedListener});
+      required this.isZoomedListener,
+      required this.onLoadingCompleted,
+      required this.onLoadingStart,
+      required this.threeStageLoading});

  final Key? key;

-  final String imageUrl;
-
  final String heroTag;

-  final String thumbnailUrl;
-
  final AssetResponseDto asset;

  final String authToken;
@@ -346,9 +334,15 @@ class ImageViewerRouteArgs {

  final ValueNotifier<bool> isZoomedListener;

+  final void Function() onLoadingCompleted;
+
+  final void Function() onLoadingStart;
+
+  final bool threeStageLoading;
+
  @override
  String toString() {
-    return 'ImageViewerRouteArgs{key: $key, imageUrl: $imageUrl, heroTag: $heroTag, thumbnailUrl: $thumbnailUrl, asset: $asset, authToken: $authToken, isZoomedFunction: $isZoomedFunction, isZoomedListener: $isZoomedListener}';
+    return 'ImageViewerRouteArgs{key: $key, heroTag: $heroTag, asset: $asset, authToken: $authToken, isZoomedFunction: $isZoomedFunction, isZoomedListener: $isZoomedListener, onLoadingCompleted: $onLoadingCompleted, onLoadingStart: $onLoadingStart, threeStageLoading: $threeStageLoading}';
  }
 }

--- a/mobile/lib/shared/services/share.service.dart
+++ b/mobile/lib/shared/services/share.service.dart
@@ -0,0 +1,45 @@
+
+import 'dart:io';
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/providers/api.provider.dart';
+import 'package:openapi/api.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 =
+  Provider((ref) => ShareService(ref.watch(apiServiceProvider)));
+
+class ShareService {
+  final ApiService _apiService;
+
+  ShareService(this._apiService);
+
+  Future<void> shareAsset(AssetResponseDto asset) async {
+    await shareAssets([asset]);
+  }
+
+  Future<void> shareAssets(List<AssetResponseDto> 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;
+    });
+
+    Share.shareFiles(await Future.wait(downloadedFilePaths));
+  }
+
+}
--- a/mobile/lib/shared/ui/share_dialog.dart
+++ b/mobile/lib/shared/ui/share_dialog.dart
@@ -0,0 +1,23 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+class ShareDialog extends StatelessWidget {
+  const ShareDialog({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          const CircularProgressIndicator(),
+          Container(
+            margin: const EdgeInsets.only(top: 12),
+            child: const Text('share_dialog_preparing')
+                .tr(),
+          )
+        ],
+      ),
+    );
+  }
+}
--- a/mobile/lib/utils/image_url_builder.dart
+++ b/mobile/lib/utils/image_url_builder.dart
@@ -0,0 +1,16 @@
+import 'package:hive/hive.dart';
+import 'package:openapi/api.dart';
+
+import '../constants/hive_box.dart';
+
+String getThumbnailUrl(final AssetResponseDto asset,
+    {ThumbnailFormat type = ThumbnailFormat.WEBP}) {
+  final box = Hive.box(userInfoBox);
+
+  return '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}?format=${type.value}';
+}
+
+String getImageUrl(final AssetResponseDto asset) {
+  final box = Hive.box(userInfoBox);
+  return '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false';
+}
--- a/mobile/pubspec.lock
+++ b/mobile/pubspec.lock
@@ -328,6 +328,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "3.3.0"
+  flutter_displaymode:
+    dependency: "direct main"
+    description:
+      name: flutter_displaymode
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.0"
  flutter_hooks:
    dependency: "direct main"
    description:
@@ -868,6 +875,48 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "0.27.3"
+  share_plus:
+    dependency: "direct main"
+    description:
+      name: share_plus
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.10"
+  share_plus_linux:
+    dependency: transitive
+    description:
+      name: share_plus_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.0"
+  share_plus_macos:
+    dependency: transitive
+    description:
+      name: share_plus_macos
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1"
+  share_plus_platform_interface:
+    dependency: transitive
+    description:
+      name: share_plus_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.3"
+  share_plus_web:
+    dependency: transitive
+    description:
+      name: share_plus_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1"
+  share_plus_windows:
+    dependency: transitive
+    description:
+      name: share_plus_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1"
  shared_preferences:
    dependency: transitive
    description:
--- a/mobile/pubspec.yaml
+++ b/mobile/pubspec.yaml
@@ -2,7 +2,7 @@ name: immich_mobile
 description: Immich - selfhosted backup media file on mobile phone

 publish_to: "none"
-version: 1.20.0+30
+version: 1.21.0+31

 environment:
  sdk: ">=2.17.0 <3.0.0"
@@ -41,6 +41,8 @@ dependencies:
  http: 0.13.4
  cancellation_token_http: ^1.1.0
  easy_localization: ^3.0.1
+  share_plus: ^4.0.10
+  flutter_displaymode: ^0.4.0

  path: ^1.8.1
  path_provider: ^2.0.11
--- a/server/apps/immich/src/constants/server_version.constant.ts
+++ b/server/apps/immich/src/constants/server_version.constant.ts
@@ -10,7 +10,7 @@ export interface IServerVersion {

 export const serverVersion: IServerVersion = {
  major: 1,
-  minor: 20,
-  patch: 0,
+  minor: 21,
+  patch: 1,
  build: 0,
 };
--- a/web/src/api/api.ts
+++ b/web/src/api/api.ts
@@ -1,4 +1,3 @@
-import { serverEndpoint } from '$lib/constants';
 import {
 	AlbumApi,
 	AssetApi,
--- a/web/src/hooks.ts
+++ b/web/src/hooks.ts
@@ -1,6 +1,6 @@
 import type { ExternalFetch, GetSession, Handle } from '@sveltejs/kit';
 import * as cookie from 'cookie';
-import { api, serverApi } from '@api';
+import { serverApi } from '@api';

 export const handle: Handle = async ({ event, resolve }) => {
 	const cookies = cookie.parse(event.request.headers.get('cookie') || '');
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -12,7 +12,6 @@
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
 	import AssetSelection from './asset-selection.svelte';
 	import _ from 'lodash-es';
-	import AlbumAppBar from './album-app-bar.svelte';
 	import UserSelectionModal from './user-selection-modal.svelte';
 	import ShareInfoModal from './share-info-modal.svelte';
 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
@@ -22,6 +21,7 @@
 	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
 	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
 	import ThumbnailSelection from './thumbnail-selection.svelte';
+	import ControlAppBar from '../shared-components/control-app-bar.svelte';

 	export let album: AlbumResponseDto;

@@ -272,7 +272,7 @@
 <section class="bg-immich-bg">
 	<!-- Multiselection mode app bar -->
 	{#if isMultiSelectionMode}
-		<AlbumAppBar
+		<ControlAppBar
 			on:close-button-click={clearMultiSelectAssetAssetHandler}
 			backIcon={Close}
 			tailwindClasses={'bg-white shadow-md'}
@@ -289,12 +289,12 @@
 					/>
 				{/if}
 			</svelte:fragment>
-		</AlbumAppBar>
+		</ControlAppBar>
 	{/if}

 	<!-- Default app bar -->
 	{#if !isMultiSelectionMode}
-		<AlbumAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
+		<ControlAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
 			<svelte:fragment slot="trailing">
 				{#if album.assets.length > 0}
 					<CircleIconButton
@@ -329,7 +329,7 @@
 					>
 				{/if}
 			</svelte:fragment>
-		</AlbumAppBar>
+		</ControlAppBar>
 	{/if}

 	<section class="m-auto my-[160px] w-[60%]">
--- a/web/src/lib/components/album-page/asset-selection.svelte
+++ b/web/src/lib/components/album-page/asset-selection.svelte
@@ -8,9 +8,9 @@
 	import moment from 'moment';
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
 	import { AssetResponseDto } from '@api';
-	import AlbumAppBar from './album-app-bar.svelte';
 	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
 	import { albumUploadAssetStore } from '$lib/stores/album-upload-asset';
+	import ControlAppBar from '../shared-components/control-app-bar.svelte';

 	const dispatch = createEventDispatcher();

@@ -172,7 +172,7 @@
 	transition:fly={{ y: 500, duration: 100, easing: quintOut }}
 	class="absolute top-0 left-0 w-full h-full py-[160px]  bg-immich-bg z-[9999]"
 >
-	<AlbumAppBar on:close-button-click={() => dispatch('go-back')}>
+	<ControlAppBar on:close-button-click={() => dispatch('go-back')}>
 		<svelte:fragment slot="leading">
 			{#if selectedAsset.size == 0}
 				<p class="text-lg">Add to album</p>
@@ -195,7 +195,7 @@
 				><span class="px-2">Done</span></button
 			>
 		</svelte:fragment>
-	</AlbumAppBar>
+	</ControlAppBar>

 	<section class="flex flex-wrap gap-14  px-20 overflow-y-auto">
 		{#each $assetsGroupByDate as assetsInDateGroup, groupIndex}
--- a/web/src/lib/components/album-page/thumbnail-selection.svelte
+++ b/web/src/lib/components/album-page/thumbnail-selection.svelte
@@ -3,8 +3,8 @@
 	import { createEventDispatcher } from 'svelte';
 	import { quintOut } from 'svelte/easing';
 	import { fly } from 'svelte/transition';
+	import ControlAppBar from '../shared-components/control-app-bar.svelte';
 	import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
-	import AlbumAppBar from './album-app-bar.svelte';

 	export let album: AlbumResponseDto;

@@ -24,7 +24,7 @@
 	transition:fly={{ y: 500, duration: 100, easing: quintOut }}
 	class="absolute top-0 left-0 w-full h-full py-[160px]  bg-immich-bg z-[9999]"
 >
-	<AlbumAppBar on:close-button-click={() => dispatch('close')}>
+	<ControlAppBar on:close-button-click={() => dispatch('close')}>
 		<svelte:fragment slot="leading">
 			<p class="text-lg">Select album cover</p>
 		</svelte:fragment>
@@ -37,7 +37,7 @@
 				><span class="px-2">Done</span></button
 			>
 		</svelte:fragment>
-	</AlbumAppBar>
+	</ControlAppBar>

 	<section class="flex flex-wrap gap-14  px-20 overflow-y-auto">
 		<!-- Image grid -->
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
--- a/web/src/lib/components/shared-components/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar.svelte
@@ -4,7 +4,6 @@
 	import type { ImmichUser } from '$lib/models/immich-user';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { fade, fly, slide } from 'svelte/transition';
-	import { serverEndpoint } from '../../constants';
 	import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
 	import { clickOutside } from '../../utils/click-outside';
 	import { api } from '@api';
@@ -131,7 +130,7 @@
 				>
 					{#if shouldShowProfileImage}
 						<img
-							src={`${serverEndpoint}/user/profile-image/${user.id}`}
+							src={`api/user/profile-image/${user.id}`}
 							alt="profile-img"
 							class="inline rounded-full h-20 w-20 object-cover shadow-md"
 						/>
--- a/web/src/lib/components/shared-components/status-box.svelte
+++ b/web/src/lib/components/shared-components/status-box.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import { serverEndpoint } from '$lib/constants';
 	import Cloud from 'svelte-material-icons/Cloud.svelte';
 	import Dns from 'svelte-material-icons/Dns.svelte';
 	import LoadingSpinner from './loading-spinner.svelte';
 	import { api, ServerInfoResponseDto } from '@api';

-	let endpoint = serverEndpoint;
 	let isServerOk = true;
 	let serverVersion = '';
 	let serverInfo: ServerInfoResponseDto;
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -1,2 +1 @@
-export const serverEndpoint: string = import.meta.env.VITE_SERVER_ENDPOINT;
 export const loginPageMessage: string = import.meta.env.VITE_LOGIN_PAGE_MESSAGE;
--- a/web/src/lib/stores/websocket.ts
+++ b/web/src/lib/stores/websocket.ts
@@ -1,12 +1,9 @@
 import { Socket, io } from 'socket.io-client';
 import { writable } from 'svelte/store';
-import { serverEndpoint } from '../constants';

 let websocket: Socket;

 export const openWebsocketConnection = () => {
-	const websocketEndpoint = serverEndpoint.replace('/api', '');
-
 	try {
 		websocket = io('', {
 			path: '/api/socket.io',
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -1,6 +1,5 @@
 /* @vite-ignore */
 import * as exifr from 'exifr';
-import { serverEndpoint } from '../constants';
 import { uploadAssetsStore } from '$lib/stores/upload';
 import type { UploadAsset } from '../models/upload-asset';
 import { api, AssetFileUploadResponseDto } from '@api';
@@ -168,7 +167,7 @@ async function fileUploader(asset: File, uploadType: UploadType) {
 			uploadAssetsStore.updateProgress(deviceAssetId, percentComplete);
 		};

-		request.open('POST', `api/asset/upload`);
+		request.open('POST', `/api/asset/upload`);

 		request.send(formData);
 	} catch (e) {
--- a/web/src/routes/admin/index.svelte
+++ b/web/src/routes/admin/index.svelte
@@ -2,7 +2,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { api, UserResponseDto } from '@api';

-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [user, allUsers] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -37,6 +44,7 @@
 	import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
 	import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
 	import StatusBox from '$lib/components/shared-components/status-box.svelte';
+	import { browser } from '$app/env';

 	let selectedAction: AdminSideBarSelection = AdminSideBarSelection.USER_MANAGEMENT;

--- a/web/src/routes/albums/[albumId]/index.svelte
+++ b/web/src/routes/albums/[albumId]/index.svelte
@@ -4,7 +4,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { AlbumResponseDto } from '@api';

-	export const load: Load = async ({ fetch, params }) => {
+	export const load: Load = async ({ fetch, params, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const albumId = params['albumId'];

@@ -36,6 +43,7 @@

 <script lang="ts">
 	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+	import { browser } from '$app/env';

 	export let album: AlbumResponseDto;
 </script>
--- a/web/src/routes/albums/[albumId]/photos/[assetId].svelte
+++ b/web/src/routes/albums/[albumId]/photos/[assetId].svelte
@@ -1,11 +1,10 @@
 <script context="module" lang="ts">
 	export const prerender = false;
+	import { browser } from '$app/env';
 	import type { Load } from '@sveltejs/kit';

-	export const load: Load = async ({ params }) => {
-		try {
-			await fetch('/data/user/get-my-user-info');
-		} catch (e) {
+	export const load: Load = async ({ params, session }) => {
+		if (!browser && !session.user) {
 			return {
 				status: 302,
 				redirect: '/auth/login'
--- a/web/src/routes/albums/index.svelte
+++ b/web/src/routes/albums/index.svelte
@@ -9,7 +9,14 @@
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import { AlbumResponseDto, api } from '@api';

-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [user, albums] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -39,6 +46,7 @@
 	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
 	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import { browser } from '$app/env';

 	export let user: ImmichUser;
 	export let albums: AlbumResponseDto[];
--- a/web/src/routes/auth/logout.ts
+++ b/web/src/routes/auth/logout.ts
@@ -1,8 +1,9 @@
-import { api } from '@api';
+import { api, serverApi } from '@api';
 import type { RequestHandler } from '@sveltejs/kit';

 export const POST: RequestHandler = async () => {
 	api.removeAccessToken();
+	serverApi.removeAccessToken();

 	return {
 		headers: {
--- a/web/src/routes/photos/[assetId].svelte
+++ b/web/src/routes/photos/[assetId].svelte
@@ -1,21 +1,20 @@
 <script context="module" lang="ts">
 	export const prerender = false;

+	import { browser } from '$app/env';
 	import type { Load } from '@sveltejs/kit';

-	export const load: Load = async ({ fetch }) => {
-		try {
-			await fetch('/data/user/get-my-user-info');
-
-			return {
-				status: 302,
-				redirect: '/photos'
-			};
-		} catch (e) {
+	export const load: Load = async ({ session }) => {
+		if (!browser && !session.user) {
 			return {
 				status: 302,
 				redirect: '/auth/login'
 			};
+		} else {
+			return {
+				status: 302,
+				redirect: '/photos'
+			};
 		}
 	};
 </script>
--- a/web/src/routes/photos/index.svelte
+++ b/web/src/routes/photos/index.svelte
@@ -4,7 +4,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { setAssetInfo } from '$lib/stores/assets';

-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [userInfo, assets] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -33,19 +40,31 @@
 	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
 	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
 	import { fly } from 'svelte/transition';
-	import { assetsGroupByDate, flattenAssetGroupByDate } from '$lib/stores/assets';
+	import { assetsGroupByDate, flattenAssetGroupByDate, assets } from '$lib/stores/assets';
 	import ImmichThumbnail from '$lib/components/shared-components/immich-thumbnail.svelte';
 	import moment from 'moment';
 	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
 	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
-	import { AssetResponseDto, UserResponseDto } from '@api';
+	import { api, AssetResponseDto, UserResponseDto } from '@api';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
+	import CircleIconButton from '$lib/components/shared-components/circle-icon-button.svelte';
+	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import Close from 'svelte-material-icons/Close.svelte';
+	import { browser } from '$app/env';
+	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';

 	export let user: UserResponseDto;

 	let selectedGroupThumbnail: number | null;
 	let isMouseOverGroup: boolean;

+	let multiSelectedAssets = new Set<AssetResponseDto>();
+	$: isMultiSelectionMode = multiSelectedAssets.size > 0;
+
+	let selectedGroup: Set<number> = new Set();
+	let existingGroup: Set<number> = new Set();
+
 	$: if (isMouseOverGroup == false) {
 		selectedGroupThumbnail = null;
 	}
@@ -103,6 +122,91 @@
 		isShowAssetViewer = false;
 		history.pushState(null, '', `/photos`);
 	};
+
+	const selectAssetHandler = (asset: AssetResponseDto, groupIndex: number) => {
+		let temp = new Set(multiSelectedAssets);
+
+		if (multiSelectedAssets.has(asset)) {
+			temp.delete(asset);
+
+			const tempSelectedGroup = new Set(selectedGroup);
+			tempSelectedGroup.delete(groupIndex);
+			selectedGroup = tempSelectedGroup;
+		} else {
+			temp.add(asset);
+		}
+
+		multiSelectedAssets = temp;
+
+		// Check if all assets are selected in a group to toggle the group selection's icon
+		if (!selectedGroup.has(groupIndex)) {
+			const assetsInGroup = $assetsGroupByDate[groupIndex];
+			let selectedAssetsInGroupCount = 0;
+
+			assetsInGroup.forEach((asset) => {
+				if (multiSelectedAssets.has(asset)) {
+					selectedAssetsInGroupCount++;
+				}
+			});
+
+			// if all assets are selected in a group, add the group to selected group
+			if (selectedAssetsInGroupCount == assetsInGroup.length) {
+				selectedGroup = selectedGroup.add(groupIndex);
+			}
+		}
+	};
+
+	const clearMultiSelectAssetAssetHandler = () => {
+		multiSelectedAssets = new Set();
+		selectedGroup = new Set();
+		existingGroup = new Set();
+	};
+
+	const selectAssetGroupHandler = (groupIndex: number) => {
+		if (existingGroup.has(groupIndex)) return;
+
+		let tempSelectedGroup = new Set(selectedGroup);
+		let tempSelectedAsset = new Set(multiSelectedAssets);
+
+		if (selectedGroup.has(groupIndex)) {
+			tempSelectedGroup.delete(groupIndex);
+			tempSelectedAsset.forEach((asset) => {
+				if ($assetsGroupByDate[groupIndex].find((a) => a.id == asset.id)) {
+					tempSelectedAsset.delete(asset);
+				}
+			});
+		} else {
+			tempSelectedGroup.add(groupIndex);
+			tempSelectedAsset = new Set([...multiSelectedAssets, ...$assetsGroupByDate[groupIndex]]);
+		}
+
+		multiSelectedAssets = tempSelectedAsset;
+		selectedGroup = tempSelectedGroup;
+	};
+
+	const deleteSelectedAssetHandler = async () => {
+		try {
+			if (
+				window.confirm(
+					`Caution! Are you sure you want to delete ${multiSelectedAssets.size} assets? This step also deletes assets in the album(s) to which they belong. You can not undo this action!`
+				)
+			) {
+				const { data: deletedAssets } = await api.assetApi.deleteAsset({
+					ids: Array.from(multiSelectedAssets).map((a) => a.id)
+				});
+
+				for (const asset of deletedAssets) {
+					if (asset.status == 'SUCCESS') {
+						$assets = $assets.filter((a) => a.id !== asset.id);
+					}
+				}
+
+				clearMultiSelectAssetAssetHandler();
+			}
+		} catch (e) {
+			console.log('Error deleteSelectedAssetHandler', e);
+		}
+	};
 </script>

 <svelte:head>
@@ -110,7 +214,28 @@
 </svelte:head>

 <section>
-	<NavigationBar {user} on:uploadClicked={() => openFileUploadDialog(UploadType.GENERAL)} />
+	{#if isMultiSelectionMode}
+		<ControlAppBar
+			on:close-button-click={clearMultiSelectAssetAssetHandler}
+			backIcon={Close}
+			tailwindClasses={'bg-white shadow-md'}
+		>
+			<svelte:fragment slot="leading">
+				<p class="font-medium text-immich-primary">Selected {multiSelectedAssets.size}</p>
+			</svelte:fragment>
+			<svelte:fragment slot="trailing">
+				<CircleIconButton
+					title="Delete"
+					logo={DeleteOutline}
+					on:click={deleteSelectedAssetHandler}
+				/>
+			</svelte:fragment>
+		</ControlAppBar>
+	{/if}
+
+	{#if !isMultiSelectionMode}
+		<NavigationBar {user} on:uploadClicked={() => openFileUploadDialog(UploadType.GENERAL)} />
+	{/if}
 </section>

 <section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg">
@@ -129,13 +254,20 @@
 					>
 						<!-- Date group title -->
 						<p class="font-medium text-sm text-immich-fg mb-2 flex place-items-center h-6">
-							{#if selectedGroupThumbnail === groupIndex && isMouseOverGroup}
+							{#if (selectedGroupThumbnail === groupIndex && isMouseOverGroup) || selectedGroup.has(groupIndex)}
 								<div
 									in:fly={{ x: -24, duration: 200, opacity: 0.5 }}
 									out:fly={{ x: -24, duration: 200 }}
 									class="inline-block px-2 hover:cursor-pointer"
+									on:click={() => selectAssetGroupHandler(groupIndex)}
 								>
-									<CheckCircle size="24" color="#757575" />
+									{#if selectedGroup.has(groupIndex)}
+										<CheckCircle size="24" color="#4250af" />
+									{:else if existingGroup.has(groupIndex)}
+										<CheckCircle size="24" color="#757575" />
+									{:else}
+										<CircleOutline size="24" color="#757575" />
+									{/if}
 								</div>
 							{/if}

@@ -149,7 +281,12 @@
 									<ImmichThumbnail
 										{asset}
 										on:mouseEvent={thumbnailMouseEventHandler}
-										on:click={viewAssetHandler}
+										on:click={(event) =>
+											isMultiSelectionMode
+												? selectAssetHandler(asset, groupIndex)
+												: viewAssetHandler(event)}
+										on:select={() => selectAssetHandler(asset, groupIndex)}
+										selected={multiSelectedAssets.has(asset)}
 										{groupIndex}
 									/>
 								{/key}
--- a/web/src/routes/sharing/index.svelte
+++ b/web/src/routes/sharing/index.svelte
@@ -4,7 +4,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { AlbumResponseDto, api, UserResponseDto } from '@api';

-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [user, sharedAlbums] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -33,6 +40,7 @@
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
 	import { goto } from '$app/navigation';
+	import { browser } from '$app/env';

 	export let user: UserResponseDto;
 	export let sharedAlbums: AlbumResponseDto[];
Author	SHA1	Message	Date
Alex Tran	bd5ed1b684	Merge branch 'main' of github.com:immich-app/immich	2022-08-09 19:12:32 -05:00
Alex Tran	e89339b813	Up server version	2022-08-09 19:12:21 -05:00
Alex	0b69feda40	Fixed checkbox render performance (#448 )	2022-08-09 19:10:55 -05:00
Alex	339f7f776f	Fixed setting high refresh rate crash ios release build	2022-08-08 23:43:48 -05:00
Alex Tran	7e6ccbad21	Up server version	2022-08-08 22:55:35 -05:00
Alex Tran	aac53e5cdc	Up version for release	2022-08-08 22:39:32 -05:00
Alex Tran	cbec75a175	Rewording delete caution message	2022-08-08 22:13:36 -05:00
Alex	bf04d9eb39	Feature - Delete asset on the web (#436 ) * Added selection mechanism to photos page * Added control app bar * Refactor AlbumAppBar into ControlAppBar * Added addtional micro interactions when in multi selection mode * Implemented delete selected asset and rerender	2022-08-08 22:06:11 -05:00
Malte Kiefer	3058c894b1	updated German translation (#444 )	2022-08-08 21:21:02 -05:00
Matthias Rupp	e57e279fe1	Share assets from mobile to other apps (#435 ) * Share unique assets * Style share preparing dialog * Share assets from multiselect * Fix i18n * Use navigator like in delete dialog * Center bottom-bar buttons	2022-08-08 10:46:12 -05:00
dependabot[bot]	f43c58fc6d	Bump docker/build-push-action from 3.1.0 to 3.1.1 (#441 ) Bumps [docker/build-push-action](https://github.com/docker/build-push-action) from 3.1.0 to 3.1.1. - [Release notes](https://github.com/docker/build-push-action/releases) - [Commits](https://github.com/docker/build-push-action/compare/v3.1.0...v3.1.1) --- updated-dependencies: - dependency-name: docker/build-push-action dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-08 08:22:14 -05:00
Matthias Rupp	dea304ac39	Fix/album title (#440 ) * Fix album title overflow * i18n * More i18n	2022-08-08 08:11:56 -05:00
Matthias Rupp	b46e834220	Mobile performance improvements (#417 ) * First performance tweaks (caching and rendering improvemetns) * Revert asset response caching * 3-step image loading in asset viewer * Prevent panning and zooming until full-scale version is loaded * Loading indicator * Adapt to gallery PR * Cleanup * Dart format * Fix exif sheet * Disable three stage loading until settings are available	2022-08-07 19:43:09 -05:00
Alex Tran	46f4905259	Up server version	2022-08-07 18:42:21 -05:00
Alex	28c7736ecd	Fix error in logout procedure and guard for each route (#439 )	2022-08-07 18:36:34 -05:00
Alex Tran	f881981c44	Fix typo in Readme	2022-08-07 08:22:03 -05:00
Alex	953d18e795	Remove serverEndpoint completely and fix upload path (#434 )	2022-08-07 08:12:31 -05:00
Alex	b45024a97e	Update README.md	2022-08-07 00:17:12 -05:00