feat(mobile): auto play memories

feat(mobile): Add people list to exit bottom sheet (#6717 )
* feat(mobile): Define constants as 'const' * feat(mobile): Add people list to asset bottom sheet Add a list of people per asset in the exif bottom sheet, like on the web. Currently the list of people is loaded by making a request each time to the server. This is the MVP approach. In the future, the people information can be synced like we're doing with the assets. * styling --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2024-03-06 23:16:41 +05:30 · 2024-03-06 11:15:54 -05:00 · 2024-03-06 05:47:15 -06:00 · 2024-03-05 23:45:40 -06:00 · 2024-03-06 05:44:56 +00:00 · 2024-03-06 00:24:33 -05:00
89 changed files with 2842 additions and 1287 deletions
@@ -128,6 +128,9 @@ The default configuration looks like this:
  "theme": {
    "customCss": ""
  },
+  "user": {
+    "deleteDelay": 7
+  },
  "library": {
    "scan": {
      "enabled": true,
@@ -88,6 +88,7 @@ describe('/server-info', () => {
        loginPageMessage: '',
        oauthButtonText: 'Login with OAuth',
        trashDays: 30,
+        userDeleteDelay: 7,
        isInitialized: true,
        externalDomain: '',
        isOnboarded: false,
@@ -39,7 +39,7 @@ FROM python:3.11-slim-bookworm@sha256:ce81dc539f0aedc9114cae640f8352fad83d37461c
 FROM openvino/ubuntu22_runtime:2023.1.0@sha256:002842a9005ba01543b7169ff6f14ecbec82287f09c4d1dd37717f0a8e8754a7 as prod-openvino
 USER root

-FROM nvidia/cuda:12.2.2-cudnn8-runtime-ubuntu22.04@sha256:8b51b1fe922964d73c482a267b5b519e990d90bf744ec7a40419923737caff6d as prod-cuda
+FROM nvidia/cuda:12.2.2-cudnn8-runtime-ubuntu22.04@sha256:2d913b09e6be8387e1a10976933642c73c840c0b735f0bf3c28d97fc9bc422e0 as prod-cuda

 COPY --from=builder-cuda /usr/local/bin/python3 /usr/local/bin/python3
 COPY --from=builder-cuda /usr/local/lib/python3.11 /usr/local/lib/python3.11
@@ -1,4 +1,4 @@
-FROM mambaorg/micromamba:bookworm-slim@sha256:6038b89363c9181215f3d9e8ce2720c880e224537f4028a854482e43a9b4998a as builder
+FROM mambaorg/micromamba:bookworm-slim@sha256:96586e238e2fed914b839e50cf91943b5655262348d141466b34ced2e0b5b155 as builder

 ENV NODE_ENV=production \
  TRANSFORMERS_CACHE=/cache \
@@ -680,13 +680,13 @@ test = ["pytest (>=6)"]

 [[package]]
 name = "fastapi"
-version = "0.109.2"
+version = "0.110.0"
 description = "FastAPI framework, high performance, easy to learn, fast to code, ready for production"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "fastapi-0.109.2-py3-none-any.whl", hash = "sha256:2c9bab24667293b501cad8dd388c05240c850b58ec5876ee3283c47d6e1e3a4d"},
-    {file = "fastapi-0.109.2.tar.gz", hash = "sha256:f3817eac96fe4f65a2ebb4baa000f394e55f5fccdaf7f75250804bc58f354f73"},
+    {file = "fastapi-0.110.0-py3-none-any.whl", hash = "sha256:87a1f6fb632a218222c5984be540055346a8f5d8a68e8f6fb647b1dc9934de4b"},
+    {file = "fastapi-0.110.0.tar.gz", hash = "sha256:266775f0dcc95af9d3ef39bad55cff525329a931d5fd51930aadd4f428bf7ff3"},
 ]

 [package.dependencies]
@@ -1274,13 +1274,13 @@ socks = ["socksio (==1.*)"]

 [[package]]
 name = "huggingface-hub"
-version = "0.20.3"
+version = "0.21.3"
 description = "Client library to download and publish models, datasets and other repos on the huggingface.co hub"
 optional = false
 python-versions = ">=3.8.0"
 files = [
-    {file = "huggingface_hub-0.20.3-py3-none-any.whl", hash = "sha256:d988ae4f00d3e307b0c80c6a05ca6dbb7edba8bba3079f74cda7d9c2e562a7b6"},
-    {file = "huggingface_hub-0.20.3.tar.gz", hash = "sha256:94e7f8e074475fbc67d6a71957b678e1b4a74ff1b64a644fd6cbb83da962d05d"},
+    {file = "huggingface_hub-0.21.3-py3-none-any.whl", hash = "sha256:b183144336fdf2810a8c109822e0bb6ef1fd61c65da6fb60e8c3f658b7144016"},
+    {file = "huggingface_hub-0.21.3.tar.gz", hash = "sha256:26a15b604e4fc7bad37c467b76456543ec849386cbca9cd7e1e135f53e500423"},
 ]

 [package.dependencies]
@@ -1297,11 +1297,12 @@ all = ["InquirerPy (==0.3.4)", "Jinja2", "Pillow", "aiohttp", "gradio", "jedi",
 cli = ["InquirerPy (==0.3.4)"]
 dev = ["InquirerPy (==0.3.4)", "Jinja2", "Pillow", "aiohttp", "gradio", "jedi", "mypy (==1.5.1)", "numpy", "pydantic (>1.1,<2.0)", "pydantic (>1.1,<3.0)", "pytest", "pytest-asyncio", "pytest-cov", "pytest-env", "pytest-rerunfailures", "pytest-vcr", "pytest-xdist", "ruff (>=0.1.3)", "soundfile", "types-PyYAML", "types-requests", "types-simplejson", "types-toml", "types-tqdm", "types-urllib3", "typing-extensions (>=4.8.0)", "urllib3 (<2.0)"]
 fastai = ["fastai (>=2.4)", "fastcore (>=1.3.27)", "toml"]
+hf-transfer = ["hf-transfer (>=0.1.4)"]
 inference = ["aiohttp", "pydantic (>1.1,<2.0)", "pydantic (>1.1,<3.0)"]
 quality = ["mypy (==1.5.1)", "ruff (>=0.1.3)"]
 tensorflow = ["graphviz", "pydot", "tensorflow"]
 testing = ["InquirerPy (==0.3.4)", "Jinja2", "Pillow", "aiohttp", "gradio", "jedi", "numpy", "pydantic (>1.1,<2.0)", "pydantic (>1.1,<3.0)", "pytest", "pytest-asyncio", "pytest-cov", "pytest-env", "pytest-rerunfailures", "pytest-vcr", "pytest-xdist", "soundfile", "urllib3 (<2.0)"]
-torch = ["torch"]
+torch = ["safetensors", "torch"]
 typing = ["types-PyYAML", "types-requests", "types-simplejson", "types-toml", "types-tqdm", "types-urllib3", "typing-extensions (>=4.8.0)"]

 [[package]]
@@ -1566,13 +1567,13 @@ test = ["pytest (>=7.4)", "pytest-cov (>=4.1)"]

 [[package]]
 name = "locust"
-version = "2.23.1"
+version = "2.24.0"
 description = "Developer friendly load testing framework"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "locust-2.23.1-py3-none-any.whl", hash = "sha256:96013a460a4b4d6d4fd46c70e6ff1fd2b6e03b48ddb1b48d1513d3134ba2cecf"},
-    {file = "locust-2.23.1.tar.gz", hash = "sha256:6cc729729e5ebf5852fc9d845302cfcf0ab0132f198e68b3eb0c88b438b6a863"},
+    {file = "locust-2.24.0-py3-none-any.whl", hash = "sha256:1b6b878b4fd0108fec956120815e69775d2616c8f4d1e9f365c222a7a5c17d9a"},
+    {file = "locust-2.24.0.tar.gz", hash = "sha256:6cffa378d995244a7472af6be1d6139331f19aee44e907deee73e0281252804d"},
 ]

 [package.dependencies]
@@ -1588,6 +1589,7 @@ pywin32 = {version = "*", markers = "platform_system == \"Windows\""}
 pyzmq = ">=25.0.0"
 requests = ">=2.26.0"
 roundrobin = ">=0.0.2"
+tomli = {version = ">=1.1.0", markers = "python_version < \"3.11\""}
 Werkzeug = ">=2.0.0"

 [[package]]
@@ -1988,36 +1990,36 @@ reference = ["Pillow", "google-re2"]

 [[package]]
 name = "onnxruntime"
-version = "1.17.0"
+version = "1.17.1"
 description = "ONNX Runtime is a runtime accelerator for Machine Learning models"
 optional = false
 python-versions = "*"
 files = [
-    {file = "onnxruntime-1.17.0-cp310-cp310-macosx_11_0_universal2.whl", hash = "sha256:d2b22a25a94109cc983443116da8d9805ced0256eb215c5e6bc6dcbabefeab96"},
-    {file = "onnxruntime-1.17.0-cp310-cp310-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:b4c87d83c6f58d1af2675fc99e3dc810f2dbdb844bcefd0c1b7573632661f6fc"},
-    {file = "onnxruntime-1.17.0-cp310-cp310-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:dba55723bf9b835e358f48c98a814b41692c393eb11f51e02ece0625c756b797"},
-    {file = "onnxruntime-1.17.0-cp310-cp310-win32.whl", hash = "sha256:ee48422349cc500273beea7607e33c2237909f58468ae1d6cccfc4aecd158565"},
-    {file = "onnxruntime-1.17.0-cp310-cp310-win_amd64.whl", hash = "sha256:f34cc46553359293854e38bdae2ab1be59543aad78a6317e7746d30e311110c3"},
-    {file = "onnxruntime-1.17.0-cp311-cp311-macosx_11_0_universal2.whl", hash = "sha256:16d26badd092c8c257fa57c458bb600d96dc15282c647ccad0ed7b2732e6c03b"},
-    {file = "onnxruntime-1.17.0-cp311-cp311-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:6f1273bebcdb47ed932d076c85eb9488bc4768fcea16d5f2747ca692fad4f9d3"},
-    {file = "onnxruntime-1.17.0-cp311-cp311-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:cb60fd3c2c1acd684752eb9680e89ae223e9801a9b0e0dc7b28adabe45a2e380"},
-    {file = "onnxruntime-1.17.0-cp311-cp311-win32.whl", hash = "sha256:4b038324586bc905299e435f7c00007e6242389c856b82fe9357fdc3b1ef2bdc"},
-    {file = "onnxruntime-1.17.0-cp311-cp311-win_amd64.whl", hash = "sha256:93d39b3fa1ee01f034f098e1c7769a811a21365b4883f05f96c14a2b60c6028b"},
-    {file = "onnxruntime-1.17.0-cp312-cp312-macosx_11_0_universal2.whl", hash = "sha256:90c0890e36f880281c6c698d9bc3de2afbeee2f76512725ec043665c25c67d21"},
-    {file = "onnxruntime-1.17.0-cp312-cp312-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:7466724e809a40e986b1637cba156ad9fc0d1952468bc00f79ef340bc0199552"},
-    {file = "onnxruntime-1.17.0-cp312-cp312-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:d47bee7557a8b99c8681b6882657a515a4199778d6d5e24e924d2aafcef55b0a"},
-    {file = "onnxruntime-1.17.0-cp312-cp312-win32.whl", hash = "sha256:bb1bf1ee575c665b8bbc3813ab906e091a645a24ccc210be7932154b8260eca1"},
-    {file = "onnxruntime-1.17.0-cp312-cp312-win_amd64.whl", hash = "sha256:ac2f286da3494b29b4186ca193c7d4e6a2c1f770c4184c7192c5da142c3dec28"},
-    {file = "onnxruntime-1.17.0-cp38-cp38-macosx_11_0_universal2.whl", hash = "sha256:1ec485643b93e0a3896c655eb2426decd63e18a278bb7ccebc133b340723624f"},
-    {file = "onnxruntime-1.17.0-cp38-cp38-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:83c35809cda898c5a11911c69ceac8a2ac3925911854c526f73bad884582f911"},
-    {file = "onnxruntime-1.17.0-cp38-cp38-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:fa464aa4d81df818375239e481887b656e261377d5b6b9a4692466f5f3261edc"},
-    {file = "onnxruntime-1.17.0-cp38-cp38-win32.whl", hash = "sha256:b7b337cd0586f7836601623cbd30a443df9528ef23965860d11c753ceeb009f2"},
-    {file = "onnxruntime-1.17.0-cp38-cp38-win_amd64.whl", hash = "sha256:fbb9faaf51d01aa2c147ef52524d9326744c852116d8005b9041809a71838878"},
-    {file = "onnxruntime-1.17.0-cp39-cp39-macosx_11_0_universal2.whl", hash = "sha256:5a06ab84eaa350bf64b1d747b33ccf10da64221ed1f38f7287f15eccbec81603"},
-    {file = "onnxruntime-1.17.0-cp39-cp39-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:5d3d11db2c8242766212a68d0b139745157da7ce53bd96ba349a5c65e5a02357"},
-    {file = "onnxruntime-1.17.0-cp39-cp39-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:5632077c3ab8b0cd4f74b0af9c4e924be012b1a7bcd7daa845763c6c6bf14b7d"},
-    {file = "onnxruntime-1.17.0-cp39-cp39-win32.whl", hash = "sha256:61a12732cba869b3ad2d4e29ab6cb62c7a96f61b8c213f7fcb961ba412b70b37"},
-    {file = "onnxruntime-1.17.0-cp39-cp39-win_amd64.whl", hash = "sha256:461fa0fc7d9c392c352b6cccdedf44d818430f3d6eacd924bb804fdea2dcfd02"},
+    {file = "onnxruntime-1.17.1-cp310-cp310-macosx_11_0_universal2.whl", hash = "sha256:d43ac17ac4fa3c9096ad3c0e5255bb41fd134560212dc124e7f52c3159af5d21"},
+    {file = "onnxruntime-1.17.1-cp310-cp310-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:55b5e92a4c76a23981c998078b9bf6145e4fb0b016321a8274b1607bd3c6bd35"},
+    {file = "onnxruntime-1.17.1-cp310-cp310-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:ebbcd2bc3a066cf54e6f18c75708eb4d309ef42be54606d22e5bdd78afc5b0d7"},
+    {file = "onnxruntime-1.17.1-cp310-cp310-win32.whl", hash = "sha256:5e3716b5eec9092e29a8d17aab55e737480487deabfca7eac3cd3ed952b6ada9"},
+    {file = "onnxruntime-1.17.1-cp310-cp310-win_amd64.whl", hash = "sha256:fbb98cced6782ae1bb799cc74ddcbbeeae8819f3ad1d942a74d88e72b6511337"},
+    {file = "onnxruntime-1.17.1-cp311-cp311-macosx_11_0_universal2.whl", hash = "sha256:36fd6f87a1ecad87e9c652e42407a50fb305374f9a31d71293eb231caae18784"},
+    {file = "onnxruntime-1.17.1-cp311-cp311-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:99a8bddeb538edabc524d468edb60ad4722cff8a49d66f4e280c39eace70500b"},
+    {file = "onnxruntime-1.17.1-cp311-cp311-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:fd7fddb4311deb5a7d3390cd8e9b3912d4d963efbe4dfe075edbaf18d01c024e"},
+    {file = "onnxruntime-1.17.1-cp311-cp311-win32.whl", hash = "sha256:606a7cbfb6680202b0e4f1890881041ffc3ac6e41760a25763bd9fe146f0b335"},
+    {file = "onnxruntime-1.17.1-cp311-cp311-win_amd64.whl", hash = "sha256:53e4e06c0a541696ebdf96085fd9390304b7b04b748a19e02cf3b35c869a1e76"},
+    {file = "onnxruntime-1.17.1-cp312-cp312-macosx_11_0_universal2.whl", hash = "sha256:40f08e378e0f85929712a2b2c9b9a9cc400a90c8a8ca741d1d92c00abec60843"},
+    {file = "onnxruntime-1.17.1-cp312-cp312-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:ac79da6d3e1bb4590f1dad4bb3c2979d7228555f92bb39820889af8b8e6bd472"},
+    {file = "onnxruntime-1.17.1-cp312-cp312-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:ae9ba47dc099004e3781f2d0814ad710a13c868c739ab086fc697524061695ea"},
+    {file = "onnxruntime-1.17.1-cp312-cp312-win32.whl", hash = "sha256:2dff1a24354220ac30e4a4ce2fb1df38cb1ea59f7dac2c116238d63fe7f4c5ff"},
+    {file = "onnxruntime-1.17.1-cp312-cp312-win_amd64.whl", hash = "sha256:6226a5201ab8cafb15e12e72ff2a4fc8f50654e8fa5737c6f0bd57c5ff66827e"},
+    {file = "onnxruntime-1.17.1-cp38-cp38-macosx_11_0_universal2.whl", hash = "sha256:cd0c07c0d1dfb8629e820b05fda5739e4835b3b82faf43753d2998edf2cf00aa"},
+    {file = "onnxruntime-1.17.1-cp38-cp38-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:617ebdf49184efa1ba6e4467e602fbfa029ed52c92f13ce3c9f417d303006381"},
+    {file = "onnxruntime-1.17.1-cp38-cp38-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:9dae9071e3facdf2920769dceee03b71c684b6439021defa45b830d05e148924"},
+    {file = "onnxruntime-1.17.1-cp38-cp38-win32.whl", hash = "sha256:835d38fa1064841679433b1aa8138b5e1218ddf0cfa7a3ae0d056d8fd9cec713"},
+    {file = "onnxruntime-1.17.1-cp38-cp38-win_amd64.whl", hash = "sha256:96621e0c555c2453bf607606d08af3f70fbf6f315230c28ddea91754e17ad4e6"},
+    {file = "onnxruntime-1.17.1-cp39-cp39-macosx_11_0_universal2.whl", hash = "sha256:7a9539935fb2d78ebf2cf2693cad02d9930b0fb23cdd5cf37a7df813e977674d"},
+    {file = "onnxruntime-1.17.1-cp39-cp39-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:45c6a384e9d9a29c78afff62032a46a993c477b280247a7e335df09372aedbe9"},
+    {file = "onnxruntime-1.17.1-cp39-cp39-manylinux_2_27_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:4e19f966450f16863a1d6182a685ca33ae04d7772a76132303852d05b95411ea"},
+    {file = "onnxruntime-1.17.1-cp39-cp39-win32.whl", hash = "sha256:e2ae712d64a42aac29ed7a40a426cb1e624a08cfe9273dcfe681614aa65b07dc"},
+    {file = "onnxruntime-1.17.1-cp39-cp39-win_amd64.whl", hash = "sha256:f7e9f7fb049825cdddf4a923cfc7c649d84d63c0134315f8e0aa9e0c3004672c"},
 ]

 [package.dependencies]
@@ -2633,6 +2635,7 @@ files = [
    {file = "PyYAML-6.0.1-cp311-cp311-win_amd64.whl", hash = "sha256:bf07ee2fef7014951eeb99f56f39c9bb4af143d8aa3c21b1677805985307da34"},
    {file = "PyYAML-6.0.1-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:855fb52b0dc35af121542a76b9a84f8d1cd886ea97c84703eaa6d88e37a2ad28"},
    {file = "PyYAML-6.0.1-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:40df9b996c2b73138957fe23a16a4f0ba614f4c0efce1e9406a184b6d07fa3a9"},
+    {file = "PyYAML-6.0.1-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a08c6f0fe150303c1c6b71ebcd7213c2858041a7e01975da3a99aed1e7a378ef"},
    {file = "PyYAML-6.0.1-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6c22bec3fbe2524cde73d7ada88f6566758a8f7227bfbf93a408a9d86bcc12a0"},
    {file = "PyYAML-6.0.1-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:8d4e9c88387b0f5c7d5f281e55304de64cf7f9c0021a3525bd3b1c542da3b0e4"},
    {file = "PyYAML-6.0.1-cp312-cp312-win32.whl", hash = "sha256:d483d2cdf104e7c9fa60c544d92981f12ad66a457afae824d146093b8c294c54"},
@@ -2812,13 +2815,13 @@ use-chardet-on-py3 = ["chardet (>=3.0.2,<6)"]

 [[package]]
 name = "rich"
-version = "13.7.0"
+version = "13.7.1"
 description = "Render rich text, tables, progress bars, syntax highlighting, markdown and more to the terminal"
 optional = false
 python-versions = ">=3.7.0"
 files = [
-    {file = "rich-13.7.0-py3-none-any.whl", hash = "sha256:6da14c108c4866ee9520bbffa71f6fe3962e193b7da68720583850cd4548e235"},
-    {file = "rich-13.7.0.tar.gz", hash = "sha256:5cb5123b5cf9ee70584244246816e9114227e0b98ad9176eede6ad54bf5403fa"},
+    {file = "rich-13.7.1-py3-none-any.whl", hash = "sha256:4edbae314f59eb482f54e9e30bf00d33350aaa94f4bfcd4e9e3110e64d0d7222"},
+    {file = "rich-13.7.1.tar.gz", hash = "sha256:9be308cb1fe2f1f57d67ce99e95af38a1e2bc71ad9813b0e247cf7ffbcc3a432"},
 ]

 [package.dependencies]
@@ -2840,28 +2843,28 @@ files = [

 [[package]]
 name = "ruff"
-version = "0.2.2"
+version = "0.3.0"
 description = "An extremely fast Python linter and code formatter, written in Rust."
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "ruff-0.2.2-py3-none-macosx_10_12_x86_64.macosx_11_0_arm64.macosx_10_12_universal2.whl", hash = "sha256:0a9efb032855ffb3c21f6405751d5e147b0c6b631e3ca3f6b20f917572b97eb6"},
-    {file = "ruff-0.2.2-py3-none-macosx_10_12_x86_64.whl", hash = "sha256:d450b7fbff85913f866a5384d8912710936e2b96da74541c82c1b458472ddb39"},
-    {file = "ruff-0.2.2-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ecd46e3106850a5c26aee114e562c329f9a1fbe9e4821b008c4404f64ff9ce73"},
-    {file = "ruff-0.2.2-py3-none-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:5e22676a5b875bd72acd3d11d5fa9075d3a5f53b877fe7b4793e4673499318ba"},
-    {file = "ruff-0.2.2-py3-none-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:1695700d1e25a99d28f7a1636d85bafcc5030bba9d0578c0781ba1790dbcf51c"},
-    {file = "ruff-0.2.2-py3-none-manylinux_2_17_ppc64.manylinux2014_ppc64.whl", hash = "sha256:b0c232af3d0bd8f521806223723456ffebf8e323bd1e4e82b0befb20ba18388e"},
-    {file = "ruff-0.2.2-py3-none-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:f63d96494eeec2fc70d909393bcd76c69f35334cdbd9e20d089fb3f0640216ca"},
-    {file = "ruff-0.2.2-py3-none-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:6a61ea0ff048e06de273b2e45bd72629f470f5da8f71daf09fe481278b175001"},
-    {file = "ruff-0.2.2-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:5e1439c8f407e4f356470e54cdecdca1bd5439a0673792dbe34a2b0a551a2fe3"},
-    {file = "ruff-0.2.2-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:940de32dc8853eba0f67f7198b3e79bc6ba95c2edbfdfac2144c8235114d6726"},
-    {file = "ruff-0.2.2-py3-none-musllinux_1_2_armv7l.whl", hash = "sha256:0c126da55c38dd917621552ab430213bdb3273bb10ddb67bc4b761989210eb6e"},
-    {file = "ruff-0.2.2-py3-none-musllinux_1_2_i686.whl", hash = "sha256:3b65494f7e4bed2e74110dac1f0d17dc8e1f42faaa784e7c58a98e335ec83d7e"},
-    {file = "ruff-0.2.2-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:1ec49be4fe6ddac0503833f3ed8930528e26d1e60ad35c2446da372d16651ce9"},
-    {file = "ruff-0.2.2-py3-none-win32.whl", hash = "sha256:d920499b576f6c68295bc04e7b17b6544d9d05f196bb3aac4358792ef6f34325"},
-    {file = "ruff-0.2.2-py3-none-win_amd64.whl", hash = "sha256:cc9a91ae137d687f43a44c900e5d95e9617cb37d4c989e462980ba27039d239d"},
-    {file = "ruff-0.2.2-py3-none-win_arm64.whl", hash = "sha256:c9d15fc41e6054bfc7200478720570078f0b41c9ae4f010bcc16bd6f4d1aacdd"},
-    {file = "ruff-0.2.2.tar.gz", hash = "sha256:e62ed7f36b3068a30ba39193a14274cd706bc486fad521276458022f7bccb31d"},
+    {file = "ruff-0.3.0-py3-none-macosx_10_12_x86_64.macosx_11_0_arm64.macosx_10_12_universal2.whl", hash = "sha256:7deb528029bacf845bdbb3dbb2927d8ef9b4356a5e731b10eef171e3f0a85944"},
+    {file = "ruff-0.3.0-py3-none-macosx_10_12_x86_64.whl", hash = "sha256:e1e0d4381ca88fb2b73ea0766008e703f33f460295de658f5467f6f229658c19"},
+    {file = "ruff-0.3.0-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:2f7dbba46e2827dfcb0f0cc55fba8e96ba7c8700e0a866eb8cef7d1d66c25dcb"},
+    {file = "ruff-0.3.0-py3-none-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:23dbb808e2f1d68eeadd5f655485e235c102ac6f12ad31505804edced2a5ae77"},
+    {file = "ruff-0.3.0-py3-none-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3ef655c51f41d5fa879f98e40c90072b567c666a7114fa2d9fe004dffba00932"},
+    {file = "ruff-0.3.0-py3-none-manylinux_2_17_ppc64.manylinux2014_ppc64.whl", hash = "sha256:d0d3d7ef3d4f06433d592e5f7d813314a34601e6c5be8481cccb7fa760aa243e"},
+    {file = "ruff-0.3.0-py3-none-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:b08b356d06a792e49a12074b62222f9d4ea2a11dca9da9f68163b28c71bf1dd4"},
+    {file = "ruff-0.3.0-py3-none-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:9343690f95710f8cf251bee1013bf43030072b9f8d012fbed6ad702ef70d360a"},
+    {file = "ruff-0.3.0-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a1f3ed501a42f60f4dedb7805fa8d4534e78b4e196f536bac926f805f0743d49"},
+    {file = "ruff-0.3.0-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:cc30a9053ff2f1ffb505a585797c23434d5f6c838bacfe206c0e6cf38c921a1e"},
+    {file = "ruff-0.3.0-py3-none-musllinux_1_2_armv7l.whl", hash = "sha256:5da894a29ec018a8293d3d17c797e73b374773943e8369cfc50495573d396933"},
+    {file = "ruff-0.3.0-py3-none-musllinux_1_2_i686.whl", hash = "sha256:755c22536d7f1889be25f2baf6fedd019d0c51d079e8417d4441159f3bcd30c2"},
+    {file = "ruff-0.3.0-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:dd73fe7f4c28d317855da6a7bc4aa29a1500320818dd8f27df95f70a01b8171f"},
+    {file = "ruff-0.3.0-py3-none-win32.whl", hash = "sha256:19eacceb4c9406f6c41af806418a26fdb23120dfe53583df76d1401c92b7c14b"},
+    {file = "ruff-0.3.0-py3-none-win_amd64.whl", hash = "sha256:128265876c1d703e5f5e5a4543bd8be47c73a9ba223fd3989d4aa87dd06f312f"},
+    {file = "ruff-0.3.0-py3-none-win_arm64.whl", hash = "sha256:e3a4a6d46aef0a84b74fcd201a4401ea9a6cd85614f6a9435f2d33dd8cefbf83"},
+    {file = "ruff-0.3.0.tar.gz", hash = "sha256:0886184ba2618d815067cf43e005388967b67ab9c80df52b32ec1152ab49f53a"},
 ]

 [[package]]
@@ -185,6 +185,7 @@
  "exif_bottom_sheet_details": "DETAILS",
  "exif_bottom_sheet_location": "STANDORT",
  "exif_bottom_sheet_location_add": "Aufnahmeort hinzufügen",
+  "exif_bottom_sheet_people": "PERSONEN",
  "experimental_settings_new_asset_list_subtitle": "In Arbeit",
  "experimental_settings_new_asset_list_title": "Experimentelles Fotogitter aktivieren",
  "experimental_settings_subtitle": "Benutzung auf eigene Gefahr!",
@@ -476,4 +477,4 @@
  "viewer_remove_from_stack": "Aus Stapel entfernen",
  "viewer_stack_use_as_main_asset": "An Stapelanfang",
  "viewer_unstack": "Stapel aufheben"
-}
+}
@@ -185,6 +185,7 @@
  "exif_bottom_sheet_details": "DETAILS",
  "exif_bottom_sheet_location": "LOCATION",
  "exif_bottom_sheet_location_add": "Add a location",
+  "exif_bottom_sheet_people": "PEOPLE",
  "experimental_settings_new_asset_list_subtitle": "Work in progress",
  "experimental_settings_new_asset_list_title": "Enable experimental photo grid",
  "experimental_settings_subtitle": "Use at your own risk!",
@@ -476,4 +477,4 @@
  "viewer_remove_from_stack": "Remove from Stack",
  "viewer_stack_use_as_main_asset": "Use as Main Asset",
  "viewer_unstack": "Un-Stack"
-}
+}
@@ -185,6 +185,7 @@
  "exif_bottom_sheet_details": "DETTAGLI",
  "exif_bottom_sheet_location": "POSIZIONE",
  "exif_bottom_sheet_location_add": "Add a location",
+  "exif_bottom_sheet_people": "PERSONE",
  "experimental_settings_new_asset_list_subtitle": "Work in progress",
  "experimental_settings_new_asset_list_title": "Attiva griglia di foto sperimentale",
  "experimental_settings_subtitle": "Usalo a tuo rischio!",
@@ -476,4 +477,4 @@
  "viewer_remove_from_stack": "Rimuovi dalla pila",
  "viewer_stack_use_as_main_asset": "Use as Main Asset",
  "viewer_unstack": "Un-Stack"
-}
+}
@@ -180,4 +180,4 @@ SPEC CHECKSUMS:

 PODFILE CHECKSUM: 64c9b5291666c0ca3caabdfe9865c141ac40321d

-COCOAPODS: 1.12.1
+COCOAPODS: 1.11.3
@@ -1,26 +1,19 @@
-import 'dart:async';
-
 import 'package:chewie/chewie.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:immich_mobile/shared/models/asset.dart';
-import 'package:immich_mobile/shared/models/store.dart';
 import 'package:video_player/video_player.dart';
-import 'package:immich_mobile/shared/models/store.dart' as store;
-import 'package:wakelock_plus/wakelock_plus.dart';

 /// Provides the initialized video player controller
 /// If the asset is local, use the local file
 /// Otherwise, use a video player with a URL
-ChewieController? useChewieController(
-  Asset asset, {
+ChewieController useChewieController({
+  required VideoPlayerController controller,
  EdgeInsets controlsSafeAreaMinimum = const EdgeInsets.only(
    bottom: 100,
  ),
  bool showOptions = true,
  bool showControlsOnInitialize = false,
  bool autoPlay = true,
-  bool autoInitialize = true,
  bool allowFullScreen = false,
  bool allowedScreenSleep = false,
  bool showControls = true,
@@ -33,7 +26,7 @@ ChewieController? useChewieController(
 }) {
  return use(
    _ChewieControllerHook(
-      asset: asset,
+      controller: controller,
      placeholder: placeholder,
      showOptions: showOptions,
      controlsSafeAreaMinimum: controlsSafeAreaMinimum,
@@ -43,7 +36,6 @@ ChewieController? useChewieController(
      hideControlsTimer: hideControlsTimer,
      showControlsOnInitialize: showControlsOnInitialize,
      showControls: showControls,
-      autoInitialize: autoInitialize,
      allowedScreenSleep: allowedScreenSleep,
      onPlaying: onPlaying,
      onPaused: onPaused,
@@ -52,13 +44,12 @@ ChewieController? useChewieController(
  );
 }

-class _ChewieControllerHook extends Hook<ChewieController?> {
-  final Asset asset;
+class _ChewieControllerHook extends Hook<ChewieController> {
+  final VideoPlayerController controller;
  final EdgeInsets controlsSafeAreaMinimum;
  final bool showOptions;
  final bool showControlsOnInitialize;
  final bool autoPlay;
-  final bool autoInitialize;
  final bool allowFullScreen;
  final bool allowedScreenSleep;
  final bool showControls;
@@ -70,14 +61,13 @@ class _ChewieControllerHook extends Hook<ChewieController?> {
  final VoidCallback? onVideoEnded;

  const _ChewieControllerHook({
-    required this.asset,
+    required this.controller,
    this.controlsSafeAreaMinimum = const EdgeInsets.only(
      bottom: 100,
    ),
    this.showOptions = true,
    this.showControlsOnInitialize = false,
    this.autoPlay = true,
-    this.autoInitialize = true,
    this.allowFullScreen = false,
    this.allowedScreenSleep = false,
    this.showControls = true,
@@ -94,28 +84,33 @@ class _ChewieControllerHook extends Hook<ChewieController?> {
 }

 class _ChewieControllerHookState
-    extends HookState<ChewieController?, _ChewieControllerHook> {
-  ChewieController? chewieController;
-  VideoPlayerController? videoPlayerController;
-
-  @override
-  void initHook() async {
-    super.initHook();
-    unawaited(_initialize());
-  }
+    extends HookState<ChewieController, _ChewieControllerHook> {
+  late ChewieController chewieController = ChewieController(
+    videoPlayerController: hook.controller,
+    controlsSafeAreaMinimum: hook.controlsSafeAreaMinimum,
+    showOptions: hook.showOptions,
+    showControlsOnInitialize: hook.showControlsOnInitialize,
+    autoPlay: hook.autoPlay,
+    allowFullScreen: hook.allowFullScreen,
+    allowedScreenSleep: hook.allowedScreenSleep,
+    showControls: hook.showControls,
+    customControls: hook.customControls,
+    placeholder: hook.placeholder,
+    hideControlsTimer: hook.hideControlsTimer,
+  );

  @override
  void dispose() {
-    chewieController?.dispose();
-    videoPlayerController?.dispose();
+    chewieController.dispose();
    super.dispose();
  }

  @override
-  ChewieController? build(BuildContext context) {
+  ChewieController build(BuildContext context) {
    return chewieController;
  }

+  /*
  /// Initializes the chewie controller and video player controller
  Future<void> _initialize() async {
    if (hook.asset.isLocal && hook.asset.livePhotoVideoId == null) {
@@ -141,39 +136,21 @@ class _ChewieControllerHookState
      );
    }

-    videoPlayerController!.addListener(() {
-      final value = videoPlayerController!.value;
-      if (value.isPlaying) {
-        WakelockPlus.enable();
-        hook.onPlaying?.call();
-      } else if (!value.isPlaying) {
-        WakelockPlus.disable();
-        hook.onPaused?.call();
-      }
-
-      if (value.position == value.duration) {
-        WakelockPlus.disable();
-        hook.onVideoEnded?.call();
-      }
-    });
-
    await videoPlayerController!.initialize();

-    setState(() {
-      chewieController = ChewieController(
-        videoPlayerController: videoPlayerController!,
-        controlsSafeAreaMinimum: hook.controlsSafeAreaMinimum,
-        showOptions: hook.showOptions,
-        showControlsOnInitialize: hook.showControlsOnInitialize,
-        autoPlay: hook.autoPlay,
-        autoInitialize: hook.autoInitialize,
-        allowFullScreen: hook.allowFullScreen,
-        allowedScreenSleep: hook.allowedScreenSleep,
-        showControls: hook.showControls,
-        customControls: hook.customControls,
-        placeholder: hook.placeholder,
-        hideControlsTimer: hook.hideControlsTimer,
-      );
-    });
+    chewieController = ChewieController(
+      videoPlayerController: videoPlayerController!,
+      controlsSafeAreaMinimum: hook.controlsSafeAreaMinimum,
+      showOptions: hook.showOptions,
+      showControlsOnInitialize: hook.showControlsOnInitialize,
+      autoPlay: hook.autoPlay,
+      allowFullScreen: hook.allowFullScreen,
+      allowedScreenSleep: hook.allowedScreenSleep,
+      showControls: hook.showControls,
+      customControls: hook.customControls,
+      placeholder: hook.placeholder,
+      hideControlsTimer: hook.hideControlsTimer,
+    );
  }
+  */
 }
@@ -0,0 +1,51 @@
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/services/asset.service.dart';
+import 'package:logging/logging.dart';
+import 'package:openapi/api.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'asset_people.provider.g.dart';
+
+/// Maintains the list of people for an asset.
+@riverpod
+class AssetPeopleNotifier extends _$AssetPeopleNotifier {
+  final log = Logger('AssetPeopleNotifier');
+
+  @override
+  Future<List<PersonWithFacesResponseDto>> build(Asset asset) async {
+    if (!asset.isRemote) {
+      return [];
+    }
+
+    final list = await ref
+        .watch(assetServiceProvider)
+        .getRemotePeopleOfAsset(asset.remoteId!);
+    if (list == null) {
+      return [];
+    }
+
+    // explicitly a sorted slice to make it deterministic
+    // named people will be at the beginning, and names are sorted
+    // ascendingly
+    list.sort((a, b) {
+      final aNotEmpty = a.name.isNotEmpty;
+      final bNotEmpty = b.name.isNotEmpty;
+      if (aNotEmpty && !bNotEmpty) {
+        return -1;
+      } else if (!aNotEmpty && bNotEmpty) {
+        return 1;
+      } else if (!aNotEmpty && !bNotEmpty) {
+        return 0;
+      }
+
+      return a.name.compareTo(b.name);
+    });
+    return list;
+  }
+
+  Future<void> refresh() async {
+    // invalidate the state – this way we don't have to
+    // duplicate the code from build.
+    ref.invalidateSelf();
+  }
+}
@@ -0,0 +1,189 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'asset_people.provider.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$assetPeopleNotifierHash() =>
+    r'192a4ee188f781000fe43f1675c49e1081ccc631';
+
+/// Copied from Dart SDK
+class _SystemHash {
+  _SystemHash._();
+
+  static int combine(int hash, int value) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + value);
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x0007ffff & hash) << 10));
+    return hash ^ (hash >> 6);
+  }
+
+  static int finish(int hash) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x03ffffff & hash) << 3));
+    // ignore: parameter_assignments
+    hash = hash ^ (hash >> 11);
+    return 0x1fffffff & (hash + ((0x00003fff & hash) << 15));
+  }
+}
+
+abstract class _$AssetPeopleNotifier extends BuildlessAutoDisposeAsyncNotifier<
+    List<PersonWithFacesResponseDto>> {
+  late final Asset asset;
+
+  Future<List<PersonWithFacesResponseDto>> build(
+    Asset asset,
+  );
+}
+
+/// Maintains the list of people for an asset.
+///
+/// Copied from [AssetPeopleNotifier].
+@ProviderFor(AssetPeopleNotifier)
+const assetPeopleNotifierProvider = AssetPeopleNotifierFamily();
+
+/// Maintains the list of people for an asset.
+///
+/// Copied from [AssetPeopleNotifier].
+class AssetPeopleNotifierFamily
+    extends Family<AsyncValue<List<PersonWithFacesResponseDto>>> {
+  /// Maintains the list of people for an asset.
+  ///
+  /// Copied from [AssetPeopleNotifier].
+  const AssetPeopleNotifierFamily();
+
+  /// Maintains the list of people for an asset.
+  ///
+  /// Copied from [AssetPeopleNotifier].
+  AssetPeopleNotifierProvider call(
+    Asset asset,
+  ) {
+    return AssetPeopleNotifierProvider(
+      asset,
+    );
+  }
+
+  @override
+  AssetPeopleNotifierProvider getProviderOverride(
+    covariant AssetPeopleNotifierProvider provider,
+  ) {
+    return call(
+      provider.asset,
+    );
+  }
+
+  static const Iterable<ProviderOrFamily>? _dependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get dependencies => _dependencies;
+
+  static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
+      _allTransitiveDependencies;
+
+  @override
+  String? get name => r'assetPeopleNotifierProvider';
+}
+
+/// Maintains the list of people for an asset.
+///
+/// Copied from [AssetPeopleNotifier].
+class AssetPeopleNotifierProvider extends AutoDisposeAsyncNotifierProviderImpl<
+    AssetPeopleNotifier, List<PersonWithFacesResponseDto>> {
+  /// Maintains the list of people for an asset.
+  ///
+  /// Copied from [AssetPeopleNotifier].
+  AssetPeopleNotifierProvider(
+    Asset asset,
+  ) : this._internal(
+          () => AssetPeopleNotifier()..asset = asset,
+          from: assetPeopleNotifierProvider,
+          name: r'assetPeopleNotifierProvider',
+          debugGetCreateSourceHash:
+              const bool.fromEnvironment('dart.vm.product')
+                  ? null
+                  : _$assetPeopleNotifierHash,
+          dependencies: AssetPeopleNotifierFamily._dependencies,
+          allTransitiveDependencies:
+              AssetPeopleNotifierFamily._allTransitiveDependencies,
+          asset: asset,
+        );
+
+  AssetPeopleNotifierProvider._internal(
+    super._createNotifier, {
+    required super.name,
+    required super.dependencies,
+    required super.allTransitiveDependencies,
+    required super.debugGetCreateSourceHash,
+    required super.from,
+    required this.asset,
+  }) : super.internal();
+
+  final Asset asset;
+
+  @override
+  Future<List<PersonWithFacesResponseDto>> runNotifierBuild(
+    covariant AssetPeopleNotifier notifier,
+  ) {
+    return notifier.build(
+      asset,
+    );
+  }
+
+  @override
+  Override overrideWith(AssetPeopleNotifier Function() create) {
+    return ProviderOverride(
+      origin: this,
+      override: AssetPeopleNotifierProvider._internal(
+        () => create()..asset = asset,
+        from: from,
+        name: null,
+        dependencies: null,
+        allTransitiveDependencies: null,
+        debugGetCreateSourceHash: null,
+        asset: asset,
+      ),
+    );
+  }
+
+  @override
+  AutoDisposeAsyncNotifierProviderElement<AssetPeopleNotifier,
+      List<PersonWithFacesResponseDto>> createElement() {
+    return _AssetPeopleNotifierProviderElement(this);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is AssetPeopleNotifierProvider && other.asset == asset;
+  }
+
+  @override
+  int get hashCode {
+    var hash = _SystemHash.combine(0, runtimeType.hashCode);
+    hash = _SystemHash.combine(hash, asset.hashCode);
+
+    return _SystemHash.finish(hash);
+  }
+}
+
+mixin AssetPeopleNotifierRef
+    on AutoDisposeAsyncNotifierProviderRef<List<PersonWithFacesResponseDto>> {
+  /// The parameter `asset` of this provider.
+  Asset get asset;
+}
+
+class _AssetPeopleNotifierProviderElement
+    extends AutoDisposeAsyncNotifierProviderElement<AssetPeopleNotifier,
+        List<PersonWithFacesResponseDto>> with AssetPeopleNotifierRef {
+  _AssetPeopleNotifierProviderElement(super.provider);
+
+  @override
+  Asset get asset => (origin as AssetPeopleNotifierProvider).asset;
+}
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member
@@ -2,6 +2,9 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/providers/db.provider.dart';
 import 'package:isar/isar.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'asset_stack.provider.g.dart';

 class AssetStackNotifier extends StateNotifier<List<Asset>> {
  final Asset _asset;
@@ -49,3 +52,8 @@ final assetStackProvider =
      .sortByFileCreatedAtDesc()
      .findAll();
 });
+
+@riverpod
+int assetStackIndex(AssetStackIndexRef ref, Asset asset) {
+  return -1;
+}
@@ -0,0 +1,158 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'asset_stack.provider.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$assetStackIndexHash() => r'0f2df55e929767c8c698bd432b5e6e351d000a16';
+
+/// Copied from Dart SDK
+class _SystemHash {
+  _SystemHash._();
+
+  static int combine(int hash, int value) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + value);
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x0007ffff & hash) << 10));
+    return hash ^ (hash >> 6);
+  }
+
+  static int finish(int hash) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x03ffffff & hash) << 3));
+    // ignore: parameter_assignments
+    hash = hash ^ (hash >> 11);
+    return 0x1fffffff & (hash + ((0x00003fff & hash) << 15));
+  }
+}
+
+/// See also [assetStackIndex].
+@ProviderFor(assetStackIndex)
+const assetStackIndexProvider = AssetStackIndexFamily();
+
+/// See also [assetStackIndex].
+class AssetStackIndexFamily extends Family<int> {
+  /// See also [assetStackIndex].
+  const AssetStackIndexFamily();
+
+  /// See also [assetStackIndex].
+  AssetStackIndexProvider call(
+    Asset asset,
+  ) {
+    return AssetStackIndexProvider(
+      asset,
+    );
+  }
+
+  @override
+  AssetStackIndexProvider getProviderOverride(
+    covariant AssetStackIndexProvider provider,
+  ) {
+    return call(
+      provider.asset,
+    );
+  }
+
+  static const Iterable<ProviderOrFamily>? _dependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get dependencies => _dependencies;
+
+  static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
+      _allTransitiveDependencies;
+
+  @override
+  String? get name => r'assetStackIndexProvider';
+}
+
+/// See also [assetStackIndex].
+class AssetStackIndexProvider extends AutoDisposeProvider<int> {
+  /// See also [assetStackIndex].
+  AssetStackIndexProvider(
+    Asset asset,
+  ) : this._internal(
+          (ref) => assetStackIndex(
+            ref as AssetStackIndexRef,
+            asset,
+          ),
+          from: assetStackIndexProvider,
+          name: r'assetStackIndexProvider',
+          debugGetCreateSourceHash:
+              const bool.fromEnvironment('dart.vm.product')
+                  ? null
+                  : _$assetStackIndexHash,
+          dependencies: AssetStackIndexFamily._dependencies,
+          allTransitiveDependencies:
+              AssetStackIndexFamily._allTransitiveDependencies,
+          asset: asset,
+        );
+
+  AssetStackIndexProvider._internal(
+    super._createNotifier, {
+    required super.name,
+    required super.dependencies,
+    required super.allTransitiveDependencies,
+    required super.debugGetCreateSourceHash,
+    required super.from,
+    required this.asset,
+  }) : super.internal();
+
+  final Asset asset;
+
+  @override
+  Override overrideWith(
+    int Function(AssetStackIndexRef provider) create,
+  ) {
+    return ProviderOverride(
+      origin: this,
+      override: AssetStackIndexProvider._internal(
+        (ref) => create(ref as AssetStackIndexRef),
+        from: from,
+        name: null,
+        dependencies: null,
+        allTransitiveDependencies: null,
+        debugGetCreateSourceHash: null,
+        asset: asset,
+      ),
+    );
+  }
+
+  @override
+  AutoDisposeProviderElement<int> createElement() {
+    return _AssetStackIndexProviderElement(this);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is AssetStackIndexProvider && other.asset == asset;
+  }
+
+  @override
+  int get hashCode {
+    var hash = _SystemHash.combine(0, runtimeType.hashCode);
+    hash = _SystemHash.combine(hash, asset.hashCode);
+
+    return _SystemHash.finish(hash);
+  }
+}
+
+mixin AssetStackIndexRef on AutoDisposeProviderRef<int> {
+  /// The parameter `asset` of this provider.
+  Asset get asset;
+}
+
+class _AssetStackIndexProviderElement extends AutoDisposeProviderElement<int>
+    with AssetStackIndexRef {
+  _AssetStackIndexProviderElement(super.provider);
+
+  @override
+  Asset get asset => (origin as AssetStackIndexProvider).asset;
+}
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member
@@ -0,0 +1,44 @@
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/models/store.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:video_player/video_player.dart';
+
+part 'video_player_controller_provider.g.dart';
+
+@riverpod
+Future<VideoPlayerController> videoPlayerController(
+  VideoPlayerControllerRef ref, {
+  required Asset asset,
+}) async {
+  late VideoPlayerController controller;
+  if (asset.isLocal && asset.livePhotoVideoId == null) {
+    // Use a local file for the video player controller
+    final file = await asset.local!.file;
+    if (file == null) {
+      throw Exception('No file found for the video');
+    }
+    controller = VideoPlayerController.file(file);
+  } else {
+    // Use a network URL for the video player controller
+    final serverEndpoint = Store.get(StoreKey.serverEndpoint);
+    final String videoUrl = asset.livePhotoVideoId != null
+        ? '$serverEndpoint/asset/file/${asset.livePhotoVideoId}'
+        : '$serverEndpoint/asset/file/${asset.remoteId}';
+
+    final url = Uri.parse(videoUrl);
+    final accessToken = Store.get(StoreKey.accessToken);
+
+    controller = VideoPlayerController.networkUrl(
+      url,
+      httpHeaders: {"x-immich-user-token": accessToken},
+    );
+  }
+
+  await controller.initialize();
+
+  ref.onDispose(() {
+    controller.dispose();
+  });
+
+  return controller;
+}
@@ -0,0 +1,164 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'video_player_controller_provider.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$videoPlayerControllerHash() =>
+    r'72b45de66542021717807655e25ec92d78d80eec';
+
+/// Copied from Dart SDK
+class _SystemHash {
+  _SystemHash._();
+
+  static int combine(int hash, int value) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + value);
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x0007ffff & hash) << 10));
+    return hash ^ (hash >> 6);
+  }
+
+  static int finish(int hash) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x03ffffff & hash) << 3));
+    // ignore: parameter_assignments
+    hash = hash ^ (hash >> 11);
+    return 0x1fffffff & (hash + ((0x00003fff & hash) << 15));
+  }
+}
+
+/// See also [videoPlayerController].
+@ProviderFor(videoPlayerController)
+const videoPlayerControllerProvider = VideoPlayerControllerFamily();
+
+/// See also [videoPlayerController].
+class VideoPlayerControllerFamily
+    extends Family<AsyncValue<VideoPlayerController>> {
+  /// See also [videoPlayerController].
+  const VideoPlayerControllerFamily();
+
+  /// See also [videoPlayerController].
+  VideoPlayerControllerProvider call({
+    required Asset asset,
+  }) {
+    return VideoPlayerControllerProvider(
+      asset: asset,
+    );
+  }
+
+  @override
+  VideoPlayerControllerProvider getProviderOverride(
+    covariant VideoPlayerControllerProvider provider,
+  ) {
+    return call(
+      asset: provider.asset,
+    );
+  }
+
+  static const Iterable<ProviderOrFamily>? _dependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get dependencies => _dependencies;
+
+  static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
+      _allTransitiveDependencies;
+
+  @override
+  String? get name => r'videoPlayerControllerProvider';
+}
+
+/// See also [videoPlayerController].
+class VideoPlayerControllerProvider
+    extends AutoDisposeFutureProvider<VideoPlayerController> {
+  /// See also [videoPlayerController].
+  VideoPlayerControllerProvider({
+    required Asset asset,
+  }) : this._internal(
+          (ref) => videoPlayerController(
+            ref as VideoPlayerControllerRef,
+            asset: asset,
+          ),
+          from: videoPlayerControllerProvider,
+          name: r'videoPlayerControllerProvider',
+          debugGetCreateSourceHash:
+              const bool.fromEnvironment('dart.vm.product')
+                  ? null
+                  : _$videoPlayerControllerHash,
+          dependencies: VideoPlayerControllerFamily._dependencies,
+          allTransitiveDependencies:
+              VideoPlayerControllerFamily._allTransitiveDependencies,
+          asset: asset,
+        );
+
+  VideoPlayerControllerProvider._internal(
+    super._createNotifier, {
+    required super.name,
+    required super.dependencies,
+    required super.allTransitiveDependencies,
+    required super.debugGetCreateSourceHash,
+    required super.from,
+    required this.asset,
+  }) : super.internal();
+
+  final Asset asset;
+
+  @override
+  Override overrideWith(
+    FutureOr<VideoPlayerController> Function(VideoPlayerControllerRef provider)
+        create,
+  ) {
+    return ProviderOverride(
+      origin: this,
+      override: VideoPlayerControllerProvider._internal(
+        (ref) => create(ref as VideoPlayerControllerRef),
+        from: from,
+        name: null,
+        dependencies: null,
+        allTransitiveDependencies: null,
+        debugGetCreateSourceHash: null,
+        asset: asset,
+      ),
+    );
+  }
+
+  @override
+  AutoDisposeFutureProviderElement<VideoPlayerController> createElement() {
+    return _VideoPlayerControllerProviderElement(this);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is VideoPlayerControllerProvider && other.asset == asset;
+  }
+
+  @override
+  int get hashCode {
+    var hash = _SystemHash.combine(0, runtimeType.hashCode);
+    hash = _SystemHash.combine(hash, asset.hashCode);
+
+    return _SystemHash.finish(hash);
+  }
+}
+
+mixin VideoPlayerControllerRef
+    on AutoDisposeFutureProviderRef<VideoPlayerController> {
+  /// The parameter `asset` of this provider.
+  Asset get asset;
+}
+
+class _VideoPlayerControllerProviderElement
+    extends AutoDisposeFutureProviderElement<VideoPlayerController>
+    with VideoPlayerControllerRef {
+  _VideoPlayerControllerProviderElement(super.provider);
+
+  @override
+  Asset get asset => (origin as VideoPlayerControllerProvider).asset;
+}
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member
@@ -1,10 +1,15 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';

 class VideoPlaybackControls {
-  VideoPlaybackControls({required this.position, required this.mute});
+  VideoPlaybackControls({
+    required this.position,
+    required this.mute,
+    required this.pause,
+  });

  final double position;
  final bool mute;
+  final bool pause;
 }

 final videoPlayerControlsProvider =
@@ -17,6 +22,7 @@ class VideoPlayerControls extends StateNotifier<VideoPlaybackControls> {
      : super(
          VideoPlaybackControls(
            position: 0,
+            pause: false,
            mute: false,
          ),
        );
@@ -29,18 +35,62 @@ class VideoPlayerControls extends StateNotifier<VideoPlaybackControls> {
    state = value;
  }

+  void reset() {
+    state = VideoPlaybackControls(
+      position: 0,
+      pause: false,
+      mute: false,
+    );
+  }
+
  double get position => state.position;
  bool get mute => state.mute;

  set position(double value) {
-    state = VideoPlaybackControls(position: value, mute: state.mute);
+    state = VideoPlaybackControls(
+      position: value,
+      mute: state.mute,
+      pause: state.pause,
+    );
  }

  set mute(bool value) {
-    state = VideoPlaybackControls(position: state.position, mute: value);
+    state = VideoPlaybackControls(
+      position: state.position,
+      mute: value,
+      pause: state.pause,
+    );
  }

  void toggleMute() {
-    state = VideoPlaybackControls(position: state.position, mute: !state.mute);
+    state = VideoPlaybackControls(
+      position: state.position,
+      mute: !state.mute,
+      pause: state.pause,
+    );
+  }
+
+  void pause() {
+    state = VideoPlaybackControls(
+      position: state.position,
+      mute: state.mute,
+      pause: true,
+    );
+  }
+
+  void play() {
+    state = VideoPlaybackControls(
+      position: state.position,
+      mute: state.mute,
+      pause: false,
+    );
+  }
+
+  void togglePlay() {
+    state = VideoPlaybackControls(
+      position: state.position,
+      mute: state.mute,
+      pause: !state.pause,
+    );
  }
 }
@@ -1,10 +1,65 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:video_player/video_player.dart';
+
+enum VideoPlaybackState {
+  initializing,
+  paused,
+  playing,
+  buffering,
+  completed,
+}

 class VideoPlaybackValue {
-  VideoPlaybackValue({required this.position, required this.duration});
-
+  /// The current position of the video
  final Duration position;
+
+  /// The total duration of the video
  final Duration duration;
+
+  /// The current state of the video playback
+  final VideoPlaybackState state;
+
+  /// The volume of the video
+  final double volume;
+
+  VideoPlaybackValue({
+    required this.position,
+    required this.duration,
+    required this.state,
+    required this.volume,
+  });
+
+  factory VideoPlaybackValue.fromController(VideoPlayerController? controller) {
+    final video = controller?.value;
+    late VideoPlaybackState s;
+    if (video == null) {
+      s = VideoPlaybackState.initializing;
+    } else if (video.isCompleted) {
+      s = VideoPlaybackState.completed;
+    } else if (video.isPlaying) {
+      s = VideoPlaybackState.playing;
+    } else if (video.isBuffering) {
+      s = VideoPlaybackState.buffering;
+    } else {
+      s = VideoPlaybackState.paused;
+    }
+
+    return VideoPlaybackValue(
+      position: video?.position ?? Duration.zero,
+      duration: video?.duration ?? Duration.zero,
+      state: s,
+      volume: video?.volume ?? 0.0,
+    );
+  }
+
+  factory VideoPlaybackValue.uninitialized() {
+    return VideoPlaybackValue(
+      position: Duration.zero,
+      duration: Duration.zero,
+      state: VideoPlaybackState.initializing,
+      volume: 0.0,
+    );
+  }
 }

 final videoPlaybackValueProvider =
@@ -15,10 +70,7 @@ final videoPlaybackValueProvider =
 class VideoPlaybackValueState extends StateNotifier<VideoPlaybackValue> {
  VideoPlaybackValueState(this.ref)
      : super(
-          VideoPlaybackValue(
-            position: Duration.zero,
-            duration: Duration.zero,
-          ),
+          VideoPlaybackValue.uninitialized(),
        );

  final Ref ref;
@@ -30,6 +82,11 @@ class VideoPlaybackValueState extends StateNotifier<VideoPlaybackValue> {
  }

  set position(Duration value) {
-    state = VideoPlaybackValue(position: value, duration: state.duration);
+    state = VideoPlaybackValue(
+      position: value,
+      duration: state.duration,
+      state: state.state,
+      volume: state.volume,
+    );
  }
 }
@@ -0,0 +1,345 @@
+import 'dart:io';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/asset_stack.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/show_controls.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/services/asset_stack.service.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/video_controls.dart';
+import 'package:immich_mobile/modules/home/ui/delete_dialog.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/user.provider.dart';
+import 'package:immich_mobile/shared/ui/immich_toast.dart';
+
+class BottomGalleryBar extends ConsumerWidget {
+  final Asset asset;
+  final bool showStack;
+  final int stackIndex;
+  final int totalAssets;
+  final bool showVideoPlayerControls;
+  final PageController controller;
+
+  const BottomGalleryBar({
+    super.key,
+    required this.showStack,
+    required this.stackIndex,
+    required this.asset,
+    required this.controller,
+    required this.totalAssets,
+    required this.showVideoPlayerControls,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isOwner = asset.ownerId == ref.watch(currentUserProvider)?.isarId;
+
+    final stack = showStack && asset.stackChildrenCount > 0
+        ? ref.watch(assetStackStateProvider(asset))
+        : <Asset>[];
+    final stackElements = showStack ? [asset, ...stack] : <Asset>[];
+    bool isParent = stackIndex == -1 || stackIndex == 0;
+    final navStack = AutoRouter.of(context).stackData;
+    final isTrashEnabled =
+        ref.watch(serverInfoProvider.select((v) => v.serverFeatures.trash));
+    final isFromTrash = isTrashEnabled &&
+        navStack.length > 2 &&
+        navStack.elementAt(navStack.length - 2).name == TrashRoute.name;
+    // !!!! itemsList and actionlist should always be in sync
+    final itemsList = [
+      BottomNavigationBarItem(
+        icon: Icon(
+          Platform.isAndroid ? Icons.share_rounded : Icons.ios_share_rounded,
+        ),
+        label: 'control_bottom_app_bar_share'.tr(),
+        tooltip: 'control_bottom_app_bar_share'.tr(),
+      ),
+      if (isOwner)
+        asset.isArchived
+            ? BottomNavigationBarItem(
+                icon: const Icon(Icons.unarchive_rounded),
+                label: 'control_bottom_app_bar_unarchive'.tr(),
+                tooltip: 'control_bottom_app_bar_unarchive'.tr(),
+              )
+            : BottomNavigationBarItem(
+                icon: const Icon(Icons.archive_outlined),
+                label: 'control_bottom_app_bar_archive'.tr(),
+                tooltip: 'control_bottom_app_bar_archive'.tr(),
+              ),
+      if (isOwner && stack.isNotEmpty)
+        BottomNavigationBarItem(
+          icon: const Icon(Icons.burst_mode_outlined),
+          label: 'control_bottom_app_bar_stack'.tr(),
+          tooltip: 'control_bottom_app_bar_stack'.tr(),
+        ),
+      if (isOwner)
+        BottomNavigationBarItem(
+          icon: const Icon(Icons.delete_outline),
+          label: 'control_bottom_app_bar_delete'.tr(),
+          tooltip: 'control_bottom_app_bar_delete'.tr(),
+        ),
+      if (!isOwner)
+        BottomNavigationBarItem(
+          icon: const Icon(Icons.download_outlined),
+          label: 'download'.tr(),
+          tooltip: 'download'.tr(),
+        ),
+    ];
+
+    void removeAssetFromStack() {
+      if (stackIndex > 0 && showStack) {
+        ref
+            .read(assetStackStateProvider(asset).notifier)
+            .removeChild(stackIndex - 1);
+      }
+    }
+
+    void handleDelete() async {
+      // Cannot delete readOnly / external assets. They are handled through library offline jobs
+      if (asset.isReadOnly) {
+        ImmichToast.show(
+          durationInSecond: 1,
+          context: context,
+          msg: 'asset_action_delete_err_read_only'.tr(),
+          gravity: ToastGravity.BOTTOM,
+        );
+        return;
+      }
+      Future<bool> onDelete(bool force) async {
+        final isDeleted = await ref.read(assetProvider.notifier).deleteAssets(
+          {asset},
+          force: force,
+        );
+        if (isDeleted && isParent) {
+          if (totalAssets == 1) {
+            // Handle only one asset
+            context.popRoute();
+          } else {
+            // Go to next page otherwise
+            controller.nextPage(
+              duration: const Duration(milliseconds: 100),
+              curve: Curves.fastLinearToSlowEaseIn,
+            );
+          }
+        }
+        return isDeleted;
+      }
+
+      // Asset is trashed
+      if (isTrashEnabled && !isFromTrash) {
+        final isDeleted = await onDelete(false);
+        if (isDeleted) {
+          // Can only trash assets stored in server. Local assets are always permanently removed for now
+          if (context.mounted && asset.isRemote && isParent) {
+            ImmichToast.show(
+              durationInSecond: 1,
+              context: context,
+              msg: 'Asset trashed',
+              gravity: ToastGravity.BOTTOM,
+            );
+          }
+          removeAssetFromStack();
+        }
+        return;
+      }
+
+      // Asset is permanently removed
+      showDialog(
+        context: context,
+        builder: (BuildContext _) {
+          return DeleteDialog(
+            onDelete: () async {
+              final isDeleted = await onDelete(true);
+              if (isDeleted) {
+                removeAssetFromStack();
+              }
+            },
+          );
+        },
+      );
+    }
+
+    void showStackActionItems() {
+      showModalBottomSheet<void>(
+        context: context,
+        enableDrag: false,
+        builder: (BuildContext ctx) {
+          return SafeArea(
+            child: Padding(
+              padding: const EdgeInsets.only(top: 24.0),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  if (!isParent)
+                    ListTile(
+                      leading: const Icon(
+                        Icons.bookmark_border_outlined,
+                        size: 24,
+                      ),
+                      onTap: () async {
+                        await ref
+                            .read(assetStackServiceProvider)
+                            .updateStackParent(
+                              asset,
+                              stackElements.elementAt(stackIndex),
+                            );
+                        ctx.pop();
+                        context.popRoute();
+                      },
+                      title: const Text(
+                        "viewer_stack_use_as_main_asset",
+                        style: TextStyle(fontWeight: FontWeight.bold),
+                      ).tr(),
+                    ),
+                  ListTile(
+                    leading: const Icon(
+                      Icons.copy_all_outlined,
+                      size: 24,
+                    ),
+                    onTap: () async {
+                      if (isParent) {
+                        await ref
+                            .read(assetStackServiceProvider)
+                            .updateStackParent(
+                              asset,
+                              stackElements
+                                  .elementAt(1), // Next asset as parent
+                            );
+                        // Remove itself from stack
+                        await ref.read(assetStackServiceProvider).updateStack(
+                          stackElements.elementAt(1),
+                          childrenToRemove: [asset],
+                        );
+                        ctx.pop();
+                        context.popRoute();
+                      } else {
+                        await ref.read(assetStackServiceProvider).updateStack(
+                          asset,
+                          childrenToRemove: [
+                            stackElements.elementAt(stackIndex),
+                          ],
+                        );
+                        removeAssetFromStack();
+                        ctx.pop();
+                      }
+                    },
+                    title: const Text(
+                      "viewer_remove_from_stack",
+                      style: TextStyle(fontWeight: FontWeight.bold),
+                    ).tr(),
+                  ),
+                  ListTile(
+                    leading: const Icon(
+                      Icons.filter_none_outlined,
+                      size: 18,
+                    ),
+                    onTap: () async {
+                      await ref.read(assetStackServiceProvider).updateStack(
+                            asset,
+                            childrenToRemove: stack,
+                          );
+                      ctx.pop();
+                      context.popRoute();
+                    },
+                    title: const Text(
+                      "viewer_unstack",
+                      style: TextStyle(fontWeight: FontWeight.bold),
+                    ).tr(),
+                  ),
+                ],
+              ),
+            ),
+          );
+        },
+      );
+    }
+
+    shareAsset() {
+      if (asset.isOffline) {
+        ImmichToast.show(
+          durationInSecond: 1,
+          context: context,
+          msg: 'asset_action_share_err_offline'.tr(),
+          gravity: ToastGravity.BOTTOM,
+        );
+        return;
+      }
+      ref.read(imageViewerStateProvider.notifier).shareAsset(asset, context);
+    }
+
+    handleArchive() {
+      ref.read(assetProvider.notifier).toggleArchive([asset]);
+      if (isParent) {
+        context.popRoute();
+        return;
+      }
+      removeAssetFromStack();
+    }
+
+    handleDownload() {
+      if (asset.isLocal) {
+        return;
+      }
+      if (asset.isOffline) {
+        ImmichToast.show(
+          durationInSecond: 1,
+          context: context,
+          msg: 'asset_action_share_err_offline'.tr(),
+          gravity: ToastGravity.BOTTOM,
+        );
+        return;
+      }
+
+      ref.read(imageViewerStateProvider.notifier).downloadAsset(
+            asset,
+            context,
+          );
+    }
+
+    List<Function(int)> actionslist = [
+      (_) => shareAsset(),
+      if (isOwner) (_) => handleArchive(),
+      if (isOwner && stack.isNotEmpty) (_) => showStackActionItems(),
+      if (isOwner) (_) => handleDelete(),
+      if (!isOwner) (_) => handleDownload(),
+    ];
+
+    return IgnorePointer(
+      ignoring: !ref.watch(showControlsProvider),
+      child: AnimatedOpacity(
+        duration: const Duration(milliseconds: 100),
+        opacity: ref.watch(showControlsProvider) ? 1.0 : 0.0,
+        child: Column(
+          children: [
+            Visibility(
+              visible: showVideoPlayerControls,
+              child: const VideoControls(),
+            ),
+            BottomNavigationBar(
+              backgroundColor: Colors.black.withOpacity(0.4),
+              unselectedIconTheme: const IconThemeData(color: Colors.white),
+              selectedIconTheme: const IconThemeData(color: Colors.white),
+              unselectedLabelStyle: const TextStyle(color: Colors.black),
+              selectedLabelStyle: const TextStyle(color: Colors.black),
+              showSelectedLabels: false,
+              showUnselectedLabels: false,
+              items: itemsList,
+              onTap: (index) {
+                if (index < actionslist.length) {
+                  actionslist[index].call(index);
+                }
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,107 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/show_controls.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/video_player_controls_provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/video_player_value_provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/center_play_button.dart';
+import 'package:immich_mobile/shared/ui/delayed_loading_indicator.dart';
+import 'package:immich_mobile/shared/ui/hooks/timer_hook.dart';
+
+class CustomVideoPlayerControls extends HookConsumerWidget {
+  final Duration hideTimerDuration;
+
+  const CustomVideoPlayerControls({
+    super.key,
+    this.hideTimerDuration = const Duration(seconds: 3),
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    // A timer to hide the controls
+    final hideTimer = useTimer(
+      hideTimerDuration,
+      () {
+        final state = ref.read(videoPlaybackValueProvider).state;
+        // Do not hide on paused
+        if (state != VideoPlaybackState.paused) {
+          ref.read(showControlsProvider.notifier).show = false;
+        }
+      },
+    );
+
+    final showBuffering = useState(false);
+    final VideoPlaybackState state =
+        ref.watch(videoPlaybackValueProvider).state;
+
+    /// Shows the controls and starts the timer to hide them
+    void showControlsAndStartHideTimer() {
+      hideTimer.reset();
+      ref.read(showControlsProvider.notifier).show = true;
+    }
+
+    // When we mute, show the controls
+    ref.listen(videoPlayerControlsProvider.select((v) => v.mute),
+        (previous, next) {
+      showControlsAndStartHideTimer();
+    });
+
+    // When we change position, show or hide timer
+    ref.listen(videoPlayerControlsProvider.select((v) => v.position),
+        (previous, next) {
+      showControlsAndStartHideTimer();
+    });
+
+    ref.listen(videoPlaybackValueProvider.select((value) => value.state),
+        (_, state) {
+      // Show buffering
+      showBuffering.value = state == VideoPlaybackState.buffering;
+    });
+
+    /// Toggles between playing and pausing depending on the state of the video
+    void togglePlay() {
+      showControlsAndStartHideTimer();
+      final state = ref.read(videoPlaybackValueProvider).state;
+      if (state == VideoPlaybackState.playing) {
+        ref.read(videoPlayerControlsProvider.notifier).pause();
+      } else {
+        ref.read(videoPlayerControlsProvider.notifier).play();
+      }
+    }
+
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: showControlsAndStartHideTimer,
+      child: AbsorbPointer(
+        absorbing: !ref.watch(showControlsProvider),
+        child: Stack(
+          children: [
+            if (showBuffering.value)
+              const Center(
+                child: DelayedLoadingIndicator(
+                  fadeInDuration: Duration(milliseconds: 400),
+                ),
+              )
+            else
+              GestureDetector(
+                onTap: () {
+                  if (state != VideoPlaybackState.playing) {
+                    togglePlay();
+                  }
+                  ref.read(showControlsProvider.notifier).show = false;
+                },
+                child: CenterPlayButton(
+                  backgroundColor: Colors.black54,
+                  iconColor: Colors.white,
+                  isFinished: state == VideoPlaybackState.completed,
+                  isPlaying: state == VideoPlaybackState.playing,
+                  show: ref.watch(showControlsProvider),
+                  onPressed: togglePlay,
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -1,13 +1,21 @@
 import 'dart:io';
+import 'dart:math' as math;

+import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/asset_extensions.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/asset_people.provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/description_input.dart';
 import 'package:immich_mobile/modules/map/widgets/map_thumbnail.dart';
+import 'package:immich_mobile/modules/search/models/curated_content.dart';
+import 'package:immich_mobile/modules/search/ui/curated_people_row.dart';
+import 'package:immich_mobile/modules/search/ui/person_name_edit_form.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/utils/selection_handlers.dart';
@@ -24,6 +32,10 @@ class ExifBottomSheet extends HookConsumerWidget {
  Widget build(BuildContext context, WidgetRef ref) {
    final assetWithExif = ref.watch(assetDetailProvider(asset));
    final exifInfo = (assetWithExif.value ?? asset).exifInfo;
+    final peopleProvider =
+        ref.watch(assetPeopleNotifierProvider(asset).notifier);
+    final people = ref.watch(assetPeopleNotifierProvider(asset));
+    final double imageSize = math.min(context.width / 3, 150);
    var textColor = context.isDarkTheme ? Colors.white : Colors.black;

    bool hasCoordinates() =>
@@ -212,6 +224,72 @@ class ExifBottomSheet extends HookConsumerWidget {
      );
    }

+    showPersonNameEditModel(
+      String personId,
+      String personName,
+    ) {
+      return showDialog(
+        context: context,
+        builder: (BuildContext context) {
+          return PersonNameEditForm(personId: personId, personName: personName);
+        },
+      ).then((_) {
+        // ensure the people list is up-to-date.
+        peopleProvider.refresh();
+      });
+    }
+
+    buildPeople() {
+      return people.widgetWhen(
+        onData: (data) {
+          // either the server is not reachable or this asset has no people
+          if (data.isEmpty) {
+            return Container();
+          }
+
+          final curatedPeople =
+              data.map((p) => CuratedContent(id: p.id, label: p.name)).toList();
+
+          return Column(
+            children: [
+              Align(
+                alignment: Alignment.topLeft,
+                child: Text(
+                  "exif_bottom_sheet_people",
+                  style: context.textTheme.labelMedium?.copyWith(
+                    color: context.textTheme.labelMedium?.color?.withAlpha(200),
+                    fontWeight: FontWeight.w600,
+                  ),
+                ).tr(),
+              ),
+              SizedBox(
+                height: imageSize,
+                child: Padding(
+                  padding: const EdgeInsets.only(top: 8.0),
+                  child: CuratedPeopleRow(
+                    content: curatedPeople,
+                    onTap: (content, index) {
+                      context
+                          .pushRoute(
+                            PersonResultRoute(
+                              personId: content.id,
+                              personName: content.label,
+                            ),
+                          )
+                          .then((_) => peopleProvider.refresh());
+                    },
+                    onNameTap: (person, index) => {
+                      showPersonNameEditModel(person.id, person.label),
+                    },
+                  ),
+                ),
+              ),
+            ],
+          );
+        },
+      );
+    }
+
    buildDate() {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -350,6 +428,12 @@ class ExifBottomSheet extends HookConsumerWidget {
                          child: buildLocation(),
                        ),
                      ),
+                      Expanded(
+                        child: Padding(
+                          padding: const EdgeInsets.only(right: 8.0),
+                          child: buildPeople(),
+                        ),
+                      ),
                      ConstrainedBox(
                        constraints: const BoxConstraints(maxWidth: 300),
                        child: Padding(
@@ -382,6 +466,8 @@ class ExifBottomSheet extends HookConsumerWidget {
                    child: CircularProgressIndicator.adaptive(),
                  ),
                ),
+                const SizedBox(height: 16),
+                buildPeople(),
                buildLocation(),
                SizedBox(height: hasCoordinates() ? 16.0 : 6.0),
                buildDetail(),
@@ -0,0 +1,110 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/current_album.provider.dart';
+import 'package:immich_mobile/modules/album/ui/add_to_album_bottom_sheet.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/show_controls.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
+import 'package:immich_mobile/modules/backup/providers/manual_upload.provider.dart';
+import 'package:immich_mobile/modules/home/ui/upload_dialog.dart';
+import 'package:immich_mobile/modules/partner/providers/partner.provider.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/user.provider.dart';
+
+class GalleryAppBar extends ConsumerWidget {
+  final Asset asset;
+  final void Function() showInfo;
+  final void Function() onToggleMotionVideo;
+  final bool isPlayingVideo;
+
+  const GalleryAppBar({
+    super.key,
+    required this.asset,
+    required this.showInfo,
+    required this.onToggleMotionVideo,
+    required this.isPlayingVideo,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final album = ref.watch(currentAlbumProvider);
+    final isOwner = asset.ownerId == ref.watch(currentUserProvider)?.isarId;
+
+    final isPartner = ref
+        .watch(partnerSharedWithProvider)
+        .map((e) => e.isarId)
+        .contains(asset.ownerId);
+
+    toggleFavorite(Asset asset) =>
+        ref.read(assetProvider.notifier).toggleFavorite([asset]);
+
+    handleActivities() {
+      if (album != null && album.shared && album.remoteId != null) {
+        context.pushRoute(const ActivitiesRoute());
+      }
+    }
+
+    handleUpload(Asset asset) {
+      showDialog(
+        context: context,
+        builder: (BuildContext _) {
+          return UploadDialog(
+            onUpload: () {
+              ref
+                  .read(manualUploadProvider.notifier)
+                  .uploadAssets(context, [asset]);
+            },
+          );
+        },
+      );
+    }
+
+    addToAlbum(Asset addToAlbumAsset) {
+      showModalBottomSheet(
+        elevation: 0,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(15.0),
+        ),
+        context: context,
+        builder: (BuildContext _) {
+          return AddToAlbumBottomSheet(
+            assets: [addToAlbumAsset],
+          );
+        },
+      );
+    }
+
+    return IgnorePointer(
+      ignoring: !ref.watch(showControlsProvider),
+      child: AnimatedOpacity(
+        duration: const Duration(milliseconds: 100),
+        opacity: ref.watch(showControlsProvider) ? 1.0 : 0.0,
+        child: Container(
+          color: Colors.black.withOpacity(0.4),
+          child: TopControlAppBar(
+            isOwner: isOwner,
+            isPartner: isPartner,
+            isPlayingMotionVideo: isPlayingVideo,
+            asset: asset,
+            onMoreInfoPressed: showInfo,
+            onFavorite: toggleFavorite,
+            onUploadPressed: asset.isLocal ? () => handleUpload(asset) : null,
+            onDownloadPressed: asset.isLocal
+                ? null
+                : () =>
+                    ref.read(imageViewerStateProvider.notifier).downloadAsset(
+                          asset,
+                          context,
+                        ),
+            onToggleMotionVideo: onToggleMotionVideo,
+            onAddToAlbumPressed: () => addToAlbum(asset),
+            onActivitiesPressed: handleActivities,
+          ),
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,125 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/show_controls.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/video_player_controls_provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/video_player_value_provider.dart';
+
+/// The video controls for the [videPlayerControlsProvider]
+class VideoControls extends ConsumerWidget {
+  const VideoControls({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final duration =
+        ref.watch(videoPlaybackValueProvider.select((v) => v.duration));
+    final position =
+        ref.watch(videoPlaybackValueProvider.select((v) => v.position));
+
+    return AnimatedOpacity(
+      opacity: ref.watch(showControlsProvider) ? 1.0 : 0.0,
+      duration: const Duration(milliseconds: 100),
+      child: OrientationBuilder(
+        builder: (context, orientation) => Container(
+          padding: EdgeInsets.symmetric(
+            horizontal: orientation == Orientation.portrait ? 12.0 : 64.0,
+          ),
+          color: Colors.black.withOpacity(0.4),
+          child: Padding(
+            padding: MediaQuery.of(context).orientation == Orientation.portrait
+                ? const EdgeInsets.symmetric(horizontal: 12.0)
+                : const EdgeInsets.symmetric(horizontal: 64.0),
+            child: Row(
+              children: [
+                Text(
+                  _formatDuration(position),
+                  style: TextStyle(
+                    fontSize: 14.0,
+                    color: Colors.white.withOpacity(.75),
+                    fontWeight: FontWeight.normal,
+                  ),
+                ),
+                Expanded(
+                  child: Slider(
+                    value: duration == Duration.zero
+                        ? 0.0
+                        : min(
+                            position.inMicroseconds /
+                                duration.inMicroseconds *
+                                100,
+                            100,
+                          ),
+                    min: 0,
+                    max: 100,
+                    thumbColor: Colors.white,
+                    activeColor: Colors.white,
+                    inactiveColor: Colors.white.withOpacity(0.75),
+                    onChanged: (position) {
+                      ref.read(videoPlayerControlsProvider.notifier).position =
+                          position;
+                    },
+                  ),
+                ),
+                Text(
+                  _formatDuration(duration),
+                  style: TextStyle(
+                    fontSize: 14.0,
+                    color: Colors.white.withOpacity(.75),
+                    fontWeight: FontWeight.normal,
+                  ),
+                ),
+                IconButton(
+                  icon: Icon(
+                    ref.watch(
+                      videoPlayerControlsProvider.select((value) => value.mute),
+                    )
+                        ? Icons.volume_off
+                        : Icons.volume_up,
+                  ),
+                  onPressed: () => ref
+                      .read(videoPlayerControlsProvider.notifier)
+                      .toggleMute(),
+                  color: Colors.white,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  String _formatDuration(Duration position) {
+    final ms = position.inMilliseconds;
+
+    int seconds = ms ~/ 1000;
+    final int hours = seconds ~/ 3600;
+    seconds = seconds % 3600;
+    final minutes = seconds ~/ 60;
+    seconds = seconds % 60;
+
+    final hoursString = hours >= 10
+        ? '$hours'
+        : hours == 0
+            ? '00'
+            : '0$hours';
+
+    final minutesString = minutes >= 10
+        ? '$minutes'
+        : minutes == 0
+            ? '00'
+            : '0$minutes';
+
+    final secondsString = seconds >= 10
+        ? '$seconds'
+        : seconds == 0
+            ? '00'
+            : '0$seconds';
+
+    final formattedTime =
+        '${hoursString == '00' ? '' : '$hoursString:'}$minutesString:$secondsString';
+
+    return formattedTime;
+  }
+}
@@ -0,0 +1,45 @@
+import 'package:chewie/chewie.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/asset_viewer/hooks/chewiew_controller_hook.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/custom_video_player_controls.dart';
+import 'package:video_player/video_player.dart';
+
+class VideoPlayerViewer extends HookConsumerWidget {
+  final VideoPlayerController controller;
+  final bool isMotionVideo;
+  final Widget? placeholder;
+  final Duration hideControlsTimer;
+  final bool showControls;
+  final bool showDownloadingIndicator;
+
+  const VideoPlayerViewer({
+    super.key,
+    required this.controller,
+    required this.isMotionVideo,
+    this.placeholder,
+    required this.hideControlsTimer,
+    required this.showControls,
+    required this.showDownloadingIndicator,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final chewie = useChewieController(
+      controller: controller,
+      controlsSafeAreaMinimum: const EdgeInsets.only(
+        bottom: 100,
+      ),
+      placeholder: SizedBox.expand(child: placeholder),
+      customControls: CustomVideoPlayerControls(
+        hideTimerDuration: hideControlsTimer,
+      ),
+      showControls: showControls && !isMotionVideo,
+      hideControlsTimer: hideControlsTimer,
+    );
+
+    return Chewie(
+      controller: chewie,
+    );
+  }
+}
@@ -1,209 +0,0 @@
-import 'dart:async';
-
-import 'package:chewie/chewie.dart';
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/modules/asset_viewer/providers/show_controls.provider.dart';
-import 'package:immich_mobile/modules/asset_viewer/providers/video_player_controls_provider.dart';
-import 'package:immich_mobile/modules/asset_viewer/providers/video_player_value_provider.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/center_play_button.dart';
-import 'package:immich_mobile/shared/ui/delayed_loading_indicator.dart';
-import 'package:video_player/video_player.dart';
-
-class VideoPlayerControls extends ConsumerStatefulWidget {
-  const VideoPlayerControls({
-    super.key,
-  });
-
-  @override
-  VideoPlayerControlsState createState() => VideoPlayerControlsState();
-}
-
-class VideoPlayerControlsState extends ConsumerState<VideoPlayerControls>
-    with SingleTickerProviderStateMixin {
-  late VideoPlayerController controller;
-  late VideoPlayerValue _latestValue;
-  bool _displayBufferingIndicator = false;
-  double? _latestVolume;
-  Timer? _hideTimer;
-
-  ChewieController? _chewieController;
-  ChewieController get chewieController => _chewieController!;
-
-  @override
-  Widget build(BuildContext context) {
-    ref.listen(videoPlayerControlsProvider.select((value) => value.mute),
-        (_, value) {
-      _mute(value);
-      _cancelAndRestartTimer();
-    });
-
-    ref.listen(videoPlayerControlsProvider.select((value) => value.position),
-        (_, position) {
-      _seekTo(position);
-      _cancelAndRestartTimer();
-    });
-
-    if (_latestValue.hasError) {
-      return chewieController.errorBuilder?.call(
-            context,
-            chewieController.videoPlayerController.value.errorDescription!,
-          ) ??
-          const Center(
-            child: Icon(
-              Icons.error,
-              color: Colors.white,
-              size: 42,
-            ),
-          );
-    }
-
-    return GestureDetector(
-      onTap: () => _cancelAndRestartTimer(),
-      child: AbsorbPointer(
-        absorbing: !ref.watch(showControlsProvider),
-        child: Stack(
-          children: [
-            if (_displayBufferingIndicator)
-              const Center(
-                child: DelayedLoadingIndicator(
-                  fadeInDuration: Duration(milliseconds: 400),
-                ),
-              )
-            else
-              _buildHitArea(),
-          ],
-        ),
-      ),
-    );
-  }
-
-  @override
-  void dispose() {
-    _dispose();
-
-    super.dispose();
-  }
-
-  void _dispose() {
-    controller.removeListener(_updateState);
-    _hideTimer?.cancel();
-  }
-
-  @override
-  void didChangeDependencies() {
-    final oldController = _chewieController;
-    _chewieController = ChewieController.of(context);
-    controller = chewieController.videoPlayerController;
-    _latestValue = controller.value;
-
-    if (oldController != chewieController) {
-      _dispose();
-      _initialize();
-    }
-
-    super.didChangeDependencies();
-  }
-
-  Widget _buildHitArea() {
-    final bool isFinished = _latestValue.position >= _latestValue.duration;
-
-    return GestureDetector(
-      onTap: () {
-        if (!_latestValue.isPlaying) {
-          _playPause();
-        }
-        ref.read(showControlsProvider.notifier).show = false;
-      },
-      child: CenterPlayButton(
-        backgroundColor: Colors.black54,
-        iconColor: Colors.white,
-        isFinished: isFinished,
-        isPlaying: controller.value.isPlaying,
-        show: ref.watch(showControlsProvider),
-        onPressed: _playPause,
-      ),
-    );
-  }
-
-  void _cancelAndRestartTimer() {
-    _hideTimer?.cancel();
-    _startHideTimer();
-    ref.read(showControlsProvider.notifier).show = true;
-  }
-
-  Future<void> _initialize() async {
-    ref.read(showControlsProvider.notifier).show = false;
-    _mute(ref.read(videoPlayerControlsProvider.select((value) => value.mute)));
-
-    _latestValue = controller.value;
-    controller.addListener(_updateState);
-
-    if (controller.value.isPlaying || chewieController.autoPlay) {
-      _startHideTimer();
-    }
-  }
-
-  void _playPause() {
-    final isFinished = _latestValue.position >= _latestValue.duration;
-
-    setState(() {
-      if (controller.value.isPlaying) {
-        ref.read(showControlsProvider.notifier).show = true;
-        _hideTimer?.cancel();
-        controller.pause();
-      } else {
-        _cancelAndRestartTimer();
-
-        if (!controller.value.isInitialized) {
-          controller.initialize().then((_) {
-            controller.play();
-          });
-        } else {
-          if (isFinished) {
-            controller.seekTo(Duration.zero);
-          }
-          controller.play();
-        }
-      }
-    });
-  }
-
-  void _startHideTimer() {
-    final hideControlsTimer = chewieController.hideControlsTimer;
-    _hideTimer?.cancel();
-    _hideTimer = Timer(hideControlsTimer, () {
-      ref.read(showControlsProvider.notifier).show = false;
-    });
-  }
-
-  void _updateState() {
-    if (!mounted) return;
-
-    _displayBufferingIndicator = controller.value.isBuffering;
-
-    setState(() {
-      _latestValue = controller.value;
-      ref.read(videoPlaybackValueProvider.notifier).value = VideoPlaybackValue(
-        position: _latestValue.position,
-        duration: _latestValue.duration,
-      );
-    });
-  }
-
-  void _mute(bool mute) {
-    if (mute) {
-      _latestVolume = controller.value.volume;
-      controller.setVolume(0);
-    } else {
-      controller.setVolume(_latestVolume ?? 0.5);
-    }
-  }
-
-  void _seekTo(double position) {
-    final Duration pos = controller.value.duration * (position / 100.0);
-    if (pos != controller.value.position) {
-      controller.seekTo(pos);
-    }
-  }
-}
@@ -2,46 +2,31 @@ import 'dart:async';
 import 'dart:io';
 import 'dart:math';
 import 'dart:ui' as ui;
-import 'package:easy_localization/easy_localization.dart';
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
-import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/modules/album/providers/current_album.provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/image_providers/immich_remote_image_provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/asset_stack.provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/current_asset.provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/show_controls.provider.dart';
-import 'package:immich_mobile/modules/asset_viewer/providers/video_player_controls_provider.dart';
-import 'package:immich_mobile/modules/album/ui/add_to_album_bottom_sheet.dart';
-import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/video_player_value_provider.dart';
-import 'package:immich_mobile/modules/asset_viewer/services/asset_stack.service.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/advanced_bottom_sheet.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/bottom_gallery_bar.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/gallery_app_bar.dart';
 import 'package:immich_mobile/modules/asset_viewer/views/video_viewer_page.dart';
-import 'package:immich_mobile/modules/backup/providers/manual_upload.provider.dart';
-import 'package:immich_mobile/modules/home/ui/upload_dialog.dart';
-import 'package:immich_mobile/modules/partner/providers/partner.provider.dart';
-import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/modules/home/ui/delete_dialog.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/providers/server_info.provider.dart';
-import 'package:immich_mobile/shared/providers/user.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_image.dart';
 import 'package:immich_mobile/shared/ui/immich_thumbnail.dart';
-import 'package:immich_mobile/shared/ui/immich_toast.dart';
 import 'package:immich_mobile/shared/ui/photo_view/photo_view_gallery.dart';
 import 'package:immich_mobile/shared/ui/photo_view/src/photo_view_computed_scale.dart';
 import 'package:immich_mobile/shared/ui/photo_view/src/photo_view_scale_state.dart';
 import 'package:immich_mobile/shared/ui/photo_view/src/utils/photo_view_hero_attributes.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
-import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:isar/isar.dart';
 import 'package:openapi/api.dart' show ThumbnailFormat;

@@ -73,18 +58,16 @@ class GalleryViewerPage extends HookConsumerWidget {
    final settings = ref.watch(appSettingsServiceProvider);
    final isLoadPreview = useState(AppSettingsEnum.loadPreview.defaultValue);
    final isLoadOriginal = useState(AppSettingsEnum.loadOriginal.defaultValue);
-    final isZoomed = useState<bool>(false);
-    final isPlayingMotionVideo = useState(false);
+    final isZoomed = useState(false);
    final isPlayingVideo = useState(false);
-    Offset? localPosition;
+    final localPosition = useState<Offset?>(null);
    final currentIndex = useState(initialIndex);
    final currentAsset = loadAsset(currentIndex.value);
-    final isTrashEnabled =
-        ref.watch(serverInfoProvider.select((v) => v.serverFeatures.trash));
-    final navStack = AutoRouter.of(context).stackData;
-    final isFromTrash = isTrashEnabled &&
-        navStack.length > 2 &&
-        navStack.elementAt(navStack.length - 2).name == TrashRoute.name;
+    // Update is playing motion video
+    ref.listen(videoPlaybackValueProvider.select((v) => v.state), (_, state) {
+      isPlayingVideo.value = state == VideoPlaybackState.playing;
+    });
+
    final stackIndex = useState(-1);
    final stack = showStack && currentAsset.stackChildrenCount > 0
        ? ref.watch(assetStackStateProvider(currentAsset))
@@ -92,30 +75,23 @@ class GalleryViewerPage extends HookConsumerWidget {
    final stackElements = showStack ? [currentAsset, ...stack] : <Asset>[];
    // Assets from response DTOs do not have an isar id, querying which would give us the default autoIncrement id
    final isFromDto = currentAsset.id == Isar.autoIncrement;
-    final album = ref.watch(currentAlbumProvider);

-    Asset asset() => stackIndex.value == -1
+    Asset asset = stackIndex.value == -1
        ? currentAsset
        : stackElements.elementAt(stackIndex.value);
-    final isOwner = asset().ownerId == ref.watch(currentUserProvider)?.isarId;
-    final isPartner = ref
-        .watch(partnerSharedWithProvider)
-        .map((e) => e.isarId)
-        .contains(asset().ownerId);
-
-    bool isParent = stackIndex.value == -1 || stackIndex.value == 0;

+    final isMotionPhoto = asset.livePhotoVideoId != null;
    // Listen provider to prevent autoDispose when navigating to other routes from within the gallery page
    ref.listen(currentAssetProvider, (_, __) {});
    useEffect(
      () {
        // Delay state update to after the execution of build method
        Future.microtask(
-          () => ref.read(currentAssetProvider.notifier).set(asset()),
+          () => ref.read(currentAssetProvider.notifier).set(asset),
        );
        return null;
      },
-      [asset()],
+      [asset],
    );

    useEffect(
@@ -124,15 +100,11 @@ class GalleryViewerPage extends HookConsumerWidget {
            settings.getSetting<bool>(AppSettingsEnum.loadPreview);
        isLoadOriginal.value =
            settings.getSetting<bool>(AppSettingsEnum.loadOriginal);
-        isPlayingMotionVideo.value = false;
        return null;
      },
      [],
    );

-    void toggleFavorite(Asset asset) =>
-        ref.read(assetProvider.notifier).toggleFavorite([asset]);
-
    Future<void> precacheNextImage(int index) async {
      void onError(Object exception, StackTrace? stackTrace) {
        // swallow error silently
@@ -168,118 +140,29 @@ class GalleryViewerPage extends HookConsumerWidget {
            child: ref
                    .watch(appSettingsServiceProvider)
                    .getSetting<bool>(AppSettingsEnum.advancedTroubleshooting)
-                ? AdvancedBottomSheet(assetDetail: asset())
-                : ExifBottomSheet(asset: asset()),
-          );
-        },
-      );
-    }
-
-    void removeAssetFromStack() {
-      if (stackIndex.value > 0 && showStack) {
-        ref
-            .read(assetStackStateProvider(currentAsset).notifier)
-            .removeChild(stackIndex.value - 1);
-        stackIndex.value = stackIndex.value - 1;
-      }
-    }
-
-    void handleDelete(Asset deleteAsset) async {
-      // Cannot delete readOnly / external assets. They are handled through library offline jobs
-      if (asset().isReadOnly) {
-        ImmichToast.show(
-          durationInSecond: 1,
-          context: context,
-          msg: 'asset_action_delete_err_read_only'.tr(),
-          gravity: ToastGravity.BOTTOM,
-        );
-        return;
-      }
-      Future<bool> onDelete(bool force) async {
-        final isDeleted = await ref.read(assetProvider.notifier).deleteAssets(
-          {deleteAsset},
-          force: force,
-        );
-        if (isDeleted && isParent) {
-          if (totalAssets == 1) {
-            // Handle only one asset
-            context.popRoute();
-          } else {
-            // Go to next page otherwise
-            controller.nextPage(
-              duration: const Duration(milliseconds: 100),
-              curve: Curves.fastLinearToSlowEaseIn,
-            );
-          }
-        }
-        return isDeleted;
-      }
-
-      // Asset is trashed
-      if (isTrashEnabled && !isFromTrash) {
-        final isDeleted = await onDelete(false);
-        if (isDeleted) {
-          // Can only trash assets stored in server. Local assets are always permanently removed for now
-          if (context.mounted && deleteAsset.isRemote && isParent) {
-            ImmichToast.show(
-              durationInSecond: 1,
-              context: context,
-              msg: 'Asset trashed',
-              gravity: ToastGravity.BOTTOM,
-            );
-          }
-          removeAssetFromStack();
-        }
-        return;
-      }
-
-      // Asset is permanently removed
-      showDialog(
-        context: context,
-        builder: (BuildContext _) {
-          return DeleteDialog(
-            onDelete: () async {
-              final isDeleted = await onDelete(true);
-              if (isDeleted) {
-                removeAssetFromStack();
-              }
-            },
-          );
-        },
-      );
-    }
-
-    void addToAlbum(Asset addToAlbumAsset) {
-      showModalBottomSheet(
-        elevation: 0,
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(15.0),
-        ),
-        context: context,
-        builder: (BuildContext _) {
-          return AddToAlbumBottomSheet(
-            assets: [addToAlbumAsset],
+                ? AdvancedBottomSheet(assetDetail: asset)
+                : ExifBottomSheet(asset: asset),
          );
        },
      );
    }

    void handleSwipeUpDown(DragUpdateDetails details) {
-      int sensitivity = 15;
-      int dxThreshold = 50;
-      double ratioThreshold = 3.0;
+      const int sensitivity = 15;
+      const int dxThreshold = 50;
+      const double ratioThreshold = 3.0;

      if (isZoomed.value) {
        return;
      }

      // Guard [localPosition] null
-      if (localPosition == null) {
+      if (localPosition.value == null) {
        return;
      }

      // Check for delta from initial down point
-      final d = details.localPosition - localPosition!;
+      final d = details.localPosition - localPosition.value!;
      // If the magnitude of the dx swipe is large, we probably didn't mean to go down
      if (d.dx.abs() > dxThreshold) {
        return;
@@ -293,413 +176,6 @@ class GalleryViewerPage extends HookConsumerWidget {
      }
    }

-    shareAsset() {
-      if (asset().isOffline) {
-        ImmichToast.show(
-          durationInSecond: 1,
-          context: context,
-          msg: 'asset_action_share_err_offline'.tr(),
-          gravity: ToastGravity.BOTTOM,
-        );
-        return;
-      }
-      ref.read(imageViewerStateProvider.notifier).shareAsset(asset(), context);
-    }
-
-    handleArchive(Asset asset) {
-      ref.read(assetProvider.notifier).toggleArchive([asset]);
-      if (isParent) {
-        context.popRoute();
-        return;
-      }
-      removeAssetFromStack();
-    }
-
-    handleUpload(Asset asset) {
-      showDialog(
-        context: context,
-        builder: (BuildContext _) {
-          return UploadDialog(
-            onUpload: () {
-              ref
-                  .read(manualUploadProvider.notifier)
-                  .uploadAssets(context, [asset]);
-            },
-          );
-        },
-      );
-    }
-
-    handleDownload() {
-      if (asset().isLocal) {
-        return;
-      }
-      if (asset().isOffline) {
-        ImmichToast.show(
-          durationInSecond: 1,
-          context: context,
-          msg: 'asset_action_share_err_offline'.tr(),
-          gravity: ToastGravity.BOTTOM,
-        );
-        return;
-      }
-
-      ref.read(imageViewerStateProvider.notifier).downloadAsset(
-            asset(),
-            context,
-          );
-    }
-
-    handleActivities() {
-      if (album != null && album.shared && album.remoteId != null) {
-        context.pushRoute(const ActivitiesRoute());
-      }
-    }
-
-    buildAppBar() {
-      return IgnorePointer(
-        ignoring: !ref.watch(showControlsProvider),
-        child: AnimatedOpacity(
-          duration: const Duration(milliseconds: 100),
-          opacity: ref.watch(showControlsProvider) ? 1.0 : 0.0,
-          child: Container(
-            color: Colors.black.withOpacity(0.4),
-            child: TopControlAppBar(
-              isOwner: isOwner,
-              isPartner: isPartner,
-              isPlayingMotionVideo: isPlayingMotionVideo.value,
-              asset: asset(),
-              onMoreInfoPressed: showInfo,
-              onFavorite: toggleFavorite,
-              onUploadPressed:
-                  asset().isLocal ? () => handleUpload(asset()) : null,
-              onDownloadPressed: asset().isLocal
-                  ? null
-                  : () =>
-                      ref.read(imageViewerStateProvider.notifier).downloadAsset(
-                            asset(),
-                            context,
-                          ),
-              onToggleMotionVideo: (() {
-                isPlayingMotionVideo.value = !isPlayingMotionVideo.value;
-              }),
-              onAddToAlbumPressed: () => addToAlbum(asset()),
-              onActivitiesPressed: handleActivities,
-            ),
-          ),
-        ),
-      );
-    }
-
-    Widget buildProgressBar() {
-      final playerValue = ref.watch(videoPlaybackValueProvider);
-
-      return Expanded(
-        child: Slider(
-          value: playerValue.duration == Duration.zero
-              ? 0.0
-              : min(
-                  playerValue.position.inMicroseconds /
-                      playerValue.duration.inMicroseconds *
-                      100,
-                  100,
-                ),
-          min: 0,
-          max: 100,
-          thumbColor: Colors.white,
-          activeColor: Colors.white,
-          inactiveColor: Colors.white.withOpacity(0.75),
-          onChanged: (position) {
-            ref.read(videoPlayerControlsProvider.notifier).position = position;
-          },
-        ),
-      );
-    }
-
-    Text buildPosition() {
-      final position = ref
-          .watch(videoPlaybackValueProvider.select((value) => value.position));
-
-      return Text(
-        _formatDuration(position),
-        style: TextStyle(
-          fontSize: 14.0,
-          color: Colors.white.withOpacity(.75),
-          fontWeight: FontWeight.normal,
-        ),
-      );
-    }
-
-    Text buildDuration() {
-      final duration = ref
-          .watch(videoPlaybackValueProvider.select((value) => value.duration));
-
-      return Text(
-        _formatDuration(duration),
-        style: TextStyle(
-          fontSize: 14.0,
-          color: Colors.white.withOpacity(.75),
-          fontWeight: FontWeight.normal,
-        ),
-      );
-    }
-
-    Widget buildMuteButton() {
-      return IconButton(
-        icon: Icon(
-          ref.watch(videoPlayerControlsProvider.select((value) => value.mute))
-              ? Icons.volume_off
-              : Icons.volume_up,
-        ),
-        onPressed: () =>
-            ref.read(videoPlayerControlsProvider.notifier).toggleMute(),
-        color: Colors.white,
-      );
-    }
-
-    Widget buildStackedChildren() {
-      return ListView.builder(
-        shrinkWrap: true,
-        scrollDirection: Axis.horizontal,
-        itemCount: stackElements.length,
-        itemBuilder: (context, index) {
-          final assetId = stackElements.elementAt(index).remoteId;
-          return Padding(
-            padding: const EdgeInsets.only(right: 10),
-            child: GestureDetector(
-              onTap: () => stackIndex.value = index,
-              child: Container(
-                width: 40,
-                decoration: BoxDecoration(
-                  color: Colors.white,
-                  borderRadius: BorderRadius.circular(6),
-                  border: (stackIndex.value == -1 && index == 0) ||
-                          index == stackIndex.value
-                      ? Border.all(
-                          color: Colors.white,
-                          width: 2,
-                        )
-                      : null,
-                ),
-                child: ClipRRect(
-                  borderRadius: BorderRadius.circular(4),
-                  child: Image(
-                    fit: BoxFit.cover,
-                    image: ImmichRemoteImageProvider(assetId: assetId!),
-                  ),
-                ),
-              ),
-            ),
-          );
-        },
-      );
-    }
-
-    void showStackActionItems() {
-      showModalBottomSheet<void>(
-        context: context,
-        enableDrag: false,
-        builder: (BuildContext ctx) {
-          return SafeArea(
-            child: Padding(
-              padding: const EdgeInsets.only(top: 24.0),
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  if (!isParent)
-                    ListTile(
-                      leading: const Icon(
-                        Icons.bookmark_border_outlined,
-                        size: 24,
-                      ),
-                      onTap: () async {
-                        await ref
-                            .read(assetStackServiceProvider)
-                            .updateStackParent(
-                              currentAsset,
-                              stackElements.elementAt(stackIndex.value),
-                            );
-                        ctx.pop();
-                        context.popRoute();
-                      },
-                      title: const Text(
-                        "viewer_stack_use_as_main_asset",
-                        style: TextStyle(fontWeight: FontWeight.bold),
-                      ).tr(),
-                    ),
-                  ListTile(
-                    leading: const Icon(
-                      Icons.copy_all_outlined,
-                      size: 24,
-                    ),
-                    onTap: () async {
-                      if (isParent) {
-                        await ref
-                            .read(assetStackServiceProvider)
-                            .updateStackParent(
-                              currentAsset,
-                              stackElements
-                                  .elementAt(1), // Next asset as parent
-                            );
-                        // Remove itself from stack
-                        await ref.read(assetStackServiceProvider).updateStack(
-                          stackElements.elementAt(1),
-                          childrenToRemove: [currentAsset],
-                        );
-                        ctx.pop();
-                        context.popRoute();
-                      } else {
-                        await ref.read(assetStackServiceProvider).updateStack(
-                          currentAsset,
-                          childrenToRemove: [
-                            stackElements.elementAt(stackIndex.value),
-                          ],
-                        );
-                        removeAssetFromStack();
-                        ctx.pop();
-                      }
-                    },
-                    title: const Text(
-                      "viewer_remove_from_stack",
-                      style: TextStyle(fontWeight: FontWeight.bold),
-                    ).tr(),
-                  ),
-                  ListTile(
-                    leading: const Icon(
-                      Icons.filter_none_outlined,
-                      size: 18,
-                    ),
-                    onTap: () async {
-                      await ref.read(assetStackServiceProvider).updateStack(
-                            currentAsset,
-                            childrenToRemove: stack,
-                          );
-                      ctx.pop();
-                      context.popRoute();
-                    },
-                    title: const Text(
-                      "viewer_unstack",
-                      style: TextStyle(fontWeight: FontWeight.bold),
-                    ).tr(),
-                  ),
-                ],
-              ),
-            ),
-          );
-        },
-      );
-    }
-
-    // TODO: Migrate to a custom bottom bar and handle long press to delete
-    Widget buildBottomBar() {
-      // !!!! itemsList and actionlist should always be in sync
-      final itemsList = [
-        BottomNavigationBarItem(
-          icon: Icon(
-            Platform.isAndroid ? Icons.share_rounded : Icons.ios_share_rounded,
-          ),
-          label: 'control_bottom_app_bar_share'.tr(),
-          tooltip: 'control_bottom_app_bar_share'.tr(),
-        ),
-        if (isOwner)
-          asset().isArchived
-              ? BottomNavigationBarItem(
-                  icon: const Icon(Icons.unarchive_rounded),
-                  label: 'control_bottom_app_bar_unarchive'.tr(),
-                  tooltip: 'control_bottom_app_bar_unarchive'.tr(),
-                )
-              : BottomNavigationBarItem(
-                  icon: const Icon(Icons.archive_outlined),
-                  label: 'control_bottom_app_bar_archive'.tr(),
-                  tooltip: 'control_bottom_app_bar_archive'.tr(),
-                ),
-        if (isOwner && stack.isNotEmpty)
-          BottomNavigationBarItem(
-            icon: const Icon(Icons.burst_mode_outlined),
-            label: 'control_bottom_app_bar_stack'.tr(),
-            tooltip: 'control_bottom_app_bar_stack'.tr(),
-          ),
-        if (isOwner)
-          BottomNavigationBarItem(
-            icon: const Icon(Icons.delete_outline),
-            label: 'control_bottom_app_bar_delete'.tr(),
-            tooltip: 'control_bottom_app_bar_delete'.tr(),
-          ),
-        if (!isOwner)
-          BottomNavigationBarItem(
-            icon: const Icon(Icons.download_outlined),
-            label: 'download'.tr(),
-            tooltip: 'download'.tr(),
-          ),
-      ];
-
-      List<Function(int)> actionslist = [
-        (_) => shareAsset(),
-        if (isOwner) (_) => handleArchive(asset()),
-        if (isOwner && stack.isNotEmpty) (_) => showStackActionItems(),
-        if (isOwner) (_) => handleDelete(asset()),
-        if (!isOwner) (_) => handleDownload(),
-      ];
-
-      return IgnorePointer(
-        ignoring: !ref.watch(showControlsProvider),
-        child: AnimatedOpacity(
-          duration: const Duration(milliseconds: 100),
-          opacity: ref.watch(showControlsProvider) ? 1.0 : 0.0,
-          child: Column(
-            children: [
-              if (stack.isNotEmpty)
-                Padding(
-                  padding: const EdgeInsets.only(
-                    left: 10,
-                    bottom: 30,
-                  ),
-                  child: SizedBox(
-                    height: 40,
-                    child: buildStackedChildren(),
-                  ),
-                ),
-              Visibility(
-                visible: !asset().isImage && !isPlayingMotionVideo.value,
-                child: Container(
-                  color: Colors.black.withOpacity(0.4),
-                  child: Padding(
-                    padding: MediaQuery.of(context).orientation ==
-                            Orientation.portrait
-                        ? const EdgeInsets.symmetric(horizontal: 12.0)
-                        : const EdgeInsets.symmetric(horizontal: 64.0),
-                    child: Row(
-                      children: [
-                        buildPosition(),
-                        buildProgressBar(),
-                        buildDuration(),
-                        buildMuteButton(),
-                      ],
-                    ),
-                  ),
-                ),
-              ),
-              BottomNavigationBar(
-                backgroundColor: Colors.black.withOpacity(0.4),
-                unselectedIconTheme: const IconThemeData(color: Colors.white),
-                selectedIconTheme: const IconThemeData(color: Colors.white),
-                unselectedLabelStyle: const TextStyle(color: Colors.black),
-                selectedLabelStyle: const TextStyle(color: Colors.black),
-                showSelectedLabels: false,
-                showUnselectedLabels: false,
-                items: itemsList,
-                onTap: (index) {
-                  if (index < actionslist.length) {
-                    actionslist[index].call(index);
-                  }
-                },
-              ),
-            ],
-          ),
-        ),
-      );
-    }
-
    useEffect(
      () {
        if (ref.read(showControlsProvider)) {
@@ -707,6 +183,7 @@ class GalleryViewerPage extends HookConsumerWidget {
        } else {
          SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
        }
+        isPlayingVideo.value = false;
        return null;
      },
      [],
@@ -735,6 +212,50 @@ class GalleryViewerPage extends HookConsumerWidget {
      }
    });

+    Widget buildStackedChildren() {
+      return ListView.builder(
+        shrinkWrap: true,
+        scrollDirection: Axis.horizontal,
+        itemCount: stackElements.length,
+        padding: const EdgeInsets.only(
+          left: 5,
+          right: 5,
+          bottom: 30,
+        ),
+        itemBuilder: (context, index) {
+          final assetId = stackElements.elementAt(index).remoteId;
+          return Padding(
+            padding: const EdgeInsets.only(right: 5),
+            child: GestureDetector(
+              onTap: () => stackIndex.value = index,
+              child: Container(
+                width: 60,
+                height: 60,
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(6),
+                  border: (stackIndex.value == -1 && index == 0) ||
+                          index == stackIndex.value
+                      ? Border.all(
+                          color: Colors.white,
+                          width: 2,
+                        )
+                      : null,
+                ),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(4),
+                  child: Image(
+                    fit: BoxFit.cover,
+                    image: ImmichRemoteImageProvider(assetId: assetId!),
+                  ),
+                ),
+              ),
+            ),
+          );
+        },
+      );
+    }
+
    return PopScope(
      canPop: false,
      onPopInvoked: (_) {
@@ -762,7 +283,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                      ),
                    ),
                    ImmichThumbnail(
-                      asset: asset(),
+                      asset: asset,
                      fit: BoxFit.contain,
                    ),
                  ],
@@ -782,6 +303,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                HapticFeedback.selectionClick();
                currentIndex.value = value;
                stackIndex.value = -1;
+                isPlayingVideo.value = false;

                // Wait for page change animation to finish
                await Future.delayed(const Duration(milliseconds: 400));
@@ -790,14 +312,14 @@ class GalleryViewerPage extends HookConsumerWidget {
              },
              builder: (context, index) {
                final a =
-                    index == currentIndex.value ? asset() : loadAsset(index);
+                    index == currentIndex.value ? asset : loadAsset(index);
                final ImageProvider provider =
                    ImmichImage.imageProvider(asset: a);

-                if (a.isImage && !isPlayingMotionVideo.value) {
+                if (a.isImage && !isPlayingVideo.value) {
                  return PhotoViewGalleryPageOptions(
                    onDragStart: (_, details, __) =>
-                        localPosition = details.localPosition,
+                        localPosition.value = details.localPosition,
                    onDragUpdate: (_, details, __) =>
                        handleSwipeUpDown(details),
                    onTapDown: (_, __, ___) {
@@ -821,7 +343,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                } else {
                  return PhotoViewGalleryPageOptions.customChild(
                    onDragStart: (_, details, __) =>
-                        localPosition = details.localPosition,
+                        localPosition.value = details.localPosition,
                    onDragUpdate: (_, details, __) =>
                        handleSwipeUpDown(details),
                    heroAttributes: PhotoViewHeroAttributes(
@@ -834,15 +356,9 @@ class GalleryViewerPage extends HookConsumerWidget {
                    minScale: 1.0,
                    basePosition: Alignment.center,
                    child: VideoViewerPage(
-                      onPlaying: () {
-                        isPlayingVideo.value = true;
-                      },
-                      onPaused: () =>
-                          WidgetsBinding.instance.addPostFrameCallback(
-                        (_) => isPlayingVideo.value = false,
-                      ),
+                      key: ValueKey(a),
                      asset: a,
-                      isMotionVideo: isPlayingMotionVideo.value,
+                      isMotionVideo: a.livePhotoVideoId != null,
                      placeholder: Image(
                        image: provider,
                        fit: BoxFit.contain,
@@ -850,11 +366,6 @@ class GalleryViewerPage extends HookConsumerWidget {
                        width: context.width,
                        alignment: Alignment.center,
                      ),
-                      onVideoEnded: () {
-                        if (isPlayingMotionVideo.value) {
-                          isPlayingMotionVideo.value = false;
-                        }
-                      },
                    ),
                  );
                }
@@ -864,50 +375,41 @@ class GalleryViewerPage extends HookConsumerWidget {
              top: 0,
              left: 0,
              right: 0,
-              child: buildAppBar(),
+              child: GalleryAppBar(
+                asset: asset,
+                showInfo: showInfo,
+                isPlayingVideo: isPlayingVideo.value,
+                onToggleMotionVideo: () =>
+                    isPlayingVideo.value = !isPlayingVideo.value,
+              ),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
-              child: buildBottomBar(),
+              child: Column(
+                children: [
+                  Visibility(
+                    visible: stack.isNotEmpty,
+                    child: SizedBox(
+                      height: 80,
+                      child: buildStackedChildren(),
+                    ),
+                  ),
+                  BottomGalleryBar(
+                    totalAssets: totalAssets,
+                    controller: controller,
+                    showStack: showStack,
+                    stackIndex: stackIndex.value,
+                    asset: asset,
+                    showVideoPlayerControls: !asset.isImage && !isMotionPhoto,
+                  ),
+                ],
+              ),
            ),
          ],
        ),
      ),
    );
  }
-
-  String _formatDuration(Duration position) {
-    final ms = position.inMilliseconds;
-
-    int seconds = ms ~/ 1000;
-    final int hours = seconds ~/ 3600;
-    seconds = seconds % 3600;
-    final minutes = seconds ~/ 60;
-    seconds = seconds % 60;
-
-    final hoursString = hours >= 10
-        ? '$hours'
-        : hours == 0
-            ? '00'
-            : '0$hours';
-
-    final minutesString = minutes >= 10
-        ? '$minutes'
-        : minutes == 0
-            ? '00'
-            : '0$minutes';
-
-    final secondsString = seconds >= 10
-        ? '$seconds'
-        : seconds == 0
-            ? '00'
-            : '0$seconds';
-
-    final formattedTime =
-        '${hoursString == '00' ? '' : '$hoursString:'}$minutesString:$secondsString';
-
-    return formattedTime;
-  }
 }
@@ -1,21 +1,22 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
-import 'package:chewie/chewie.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:immich_mobile/modules/asset_viewer/hooks/chewiew_controller_hook.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/video_player_controls.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/show_controls.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/video_player_controller_provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/video_player_controls_provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/video_player_value_provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/video_player.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/delayed_loading_indicator.dart';
+import 'package:wakelock_plus/wakelock_plus.dart';

@RoutePage()
 // ignore: must_be_immutable
-class VideoViewerPage extends HookWidget {
+class VideoViewerPage extends HookConsumerWidget {
  final Asset asset;
  final bool isMotionVideo;
  final Widget? placeholder;
-  final VoidCallback? onVideoEnded;
-  final VoidCallback? onPlaying;
-  final VoidCallback? onPaused;
  final Duration hideControlsTimer;
  final bool showControls;
  final bool showDownloadingIndicator;
@@ -24,9 +25,6 @@ class VideoViewerPage extends HookWidget {
    super.key,
    required this.asset,
    this.isMotionVideo = false,
-    this.onVideoEnded,
-    this.onPlaying,
-    this.onPaused,
    this.placeholder,
    this.showControls = true,
    this.hideControlsTimer = const Duration(seconds: 5),
@@ -34,29 +32,107 @@ class VideoViewerPage extends HookWidget {
  });

  @override
-  Widget build(BuildContext context) {
-    final controller = useChewieController(
-      asset,
-      controlsSafeAreaMinimum: const EdgeInsets.only(
-        bottom: 100,
-      ),
-      placeholder: placeholder,
-      showControls: showControls && !isMotionVideo,
-      hideControlsTimer: hideControlsTimer,
-      customControls: const VideoPlayerControls(),
-      onPlaying: onPlaying,
-      onPaused: onPaused,
-      onVideoEnded: onVideoEnded,
+  build(BuildContext context, WidgetRef ref) {
+    final controller =
+        ref.watch(videoPlayerControllerProvider(asset: asset)).value;
+    // The last volume of the video used when mute is toggled
+    final lastVolume = useState(0.5);
+
+    // When the volume changes, set the volume
+    ref.listen(videoPlayerControlsProvider.select((value) => value.mute),
+        (_, mute) {
+      if (mute) {
+        controller?.setVolume(0.0);
+      } else {
+        controller?.setVolume(lastVolume.value);
+      }
+    });
+
+    // When the position changes, seek to the position
+    ref.listen(videoPlayerControlsProvider.select((value) => value.position),
+        (_, position) {
+      if (controller == null) {
+        // No seeeking if there is no video
+        return;
+      }
+
+      // Find the position to seek to
+      final Duration seek = controller.value.duration * (position / 100.0);
+      controller.seekTo(seek);
+    });
+
+    // When the custom video controls paus or plays
+    ref.listen(videoPlayerControlsProvider.select((value) => value.pause),
+        (lastPause, pause) {
+      if (pause) {
+        controller?.pause();
+      } else {
+        controller?.play();
+      }
+    });
+
+    // Updates the [videoPlaybackValueProvider] with the current
+    // position and duration of the video from the Chewie [controller]
+    // Also sets the error if there is an error in the playback
+    void updateVideoPlayback() {
+      final videoPlayback = VideoPlaybackValue.fromController(controller);
+      ref.read(videoPlaybackValueProvider.notifier).value = videoPlayback;
+      final state = videoPlayback.state;
+
+      // Enable the WakeLock while the video is playing
+      if (state == VideoPlaybackState.playing) {
+        // Sync with the controls playing
+        WakelockPlus.enable();
+      } else {
+        // Sync with the controls pause
+        WakelockPlus.disable();
+      }
+    }
+
+    // Adds and removes the listener to the video player
+    useEffect(
+      () {
+        Future.microtask(
+          () => ref.read(videoPlayerControlsProvider.notifier).reset(),
+        );
+        // Guard no controller
+        if (controller == null) {
+          return null;
+        }
+
+        // Hide the controls
+        // Done in a microtask to avoid setting the state while the is building
+        if (!isMotionVideo) {
+          Future.microtask(() {
+            ref.read(showControlsProvider.notifier).show = false;
+          });
+        }
+
+        // Subscribes to listener
+        controller.addListener(updateVideoPlayback);
+        return () {
+          // Removes listener when we dispose
+          controller.removeListener(updateVideoPlayback);
+          controller.pause();
+        };
+      },
+      [controller],
    );

-    // Loading
+    final size = MediaQuery.sizeOf(context);
+
    return PopScope(
+      onPopInvoked: (pop) {
+        ref.read(videoPlaybackValueProvider.notifier).value =
+            VideoPlaybackValue.uninitialized();
+      },
      child: AnimatedSwitcher(
        duration: const Duration(milliseconds: 400),
-        child: Builder(
-          builder: (context) {
-            if (controller == null) {
-              return Stack(
+        child: Stack(
+          children: [
+            Visibility(
+              visible: controller == null,
+              child: Stack(
                children: [
                  if (placeholder != null) placeholder!,
                  const Positioned.fill(
@@ -67,18 +143,22 @@ class VideoViewerPage extends HookWidget {
                    ),
                  ),
                ],
-              );
-            }
-
-            final size = MediaQuery.of(context).size;
-            return SizedBox(
-              height: size.height,
-              width: size.width,
-              child: Chewie(
-                controller: controller,
              ),
-            );
-          },
+            ),
+            if (controller != null)
+              SizedBox(
+                height: size.height,
+                width: size.width,
+                child: VideoPlayerViewer(
+                  controller: controller,
+                  isMotionVideo: isMotionVideo,
+                  placeholder: placeholder,
+                  hideControlsTimer: hideControlsTimer,
+                  showControls: showControls,
+                  showDownloadingIndicator: showDownloadingIndicator,
+                ),
+              ),
+          ],
        ),
      ),
    );
@@ -6,7 +6,7 @@ part of 'map_state.provider.dart';
 // RiverpodGenerator
 // **************************************************************************

-String _$mapStateNotifierHash() => r'3b509b57b7400b09817e9caee9debf899172cd52';
+String _$mapStateNotifierHash() => r'6408d616ec9fc0d1ff26e25692417c43504ff754';

 /// See also [MapStateNotifier].
@ProviderFor(MapStateNotifier)
@@ -0,0 +1,13 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'memory_auto_play.provider.g.dart';
+
+@riverpod
+class MemoryAutoPlay extends _$MemoryAutoPlay {
+  @override
+  bool build() {
+    return true;
+  }
+
+  void toggleAutoPlay() => state = !state;
+}
@@ -0,0 +1,26 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'memory_auto_play.provider.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$memoryAutoPlayHash() => r'62b2133258680a0f842a58232bf43a4d3c83e26d';
+
+/// See also [MemoryAutoPlay].
+@ProviderFor(MemoryAutoPlay)
+final memoryAutoPlayProvider =
+    AutoDisposeNotifierProvider<MemoryAutoPlay, bool>.internal(
+  MemoryAutoPlay.new,
+  name: r'memoryAutoPlayProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$memoryAutoPlayHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$MemoryAutoPlay = AutoDisposeNotifier<bool>;
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member
@@ -1,6 +1,8 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/memories/models/memory.dart';
+import 'package:immich_mobile/modules/memories/providers/memory_auto_play.provider.dart';

 class MemoryBottomInfo extends StatelessWidget {
  final Memory memory;
@@ -13,6 +15,7 @@ class MemoryBottomInfo extends StatelessWidget {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
@@ -37,6 +40,22 @@ class MemoryBottomInfo extends StatelessWidget {
              ),
            ],
          ),
+          Consumer(
+            builder: (_, ref, __) => MaterialButton(
+              minWidth: 0,
+              onPressed: () =>
+                  ref.read(memoryAutoPlayProvider.notifier).toggleAutoPlay(),
+              shape: const CircleBorder(),
+              color: Colors.white.withOpacity(0.2),
+              elevation: 0,
+              child: Icon(
+                ref.watch(memoryAutoPlayProvider)
+                    ? Icons.pause_circle_outline_rounded
+                    : Icons.play_circle_outline_rounded,
+                color: Colors.white,
+              ),
+            ),
+          ),
        ],
      ),
    );
@@ -1,14 +1,19 @@
+import 'dart:math';
 import 'dart:ui';

 import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/asset_viewer/views/video_viewer_page.dart';
+import 'package:immich_mobile/modules/memories/providers/memory_auto_play.provider.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:immich_mobile/shared/ui/hooks/blurhash_hook.dart';
 import 'package:immich_mobile/shared/ui/immich_image.dart';

-class MemoryCard extends StatelessWidget {
+class MemoryCard extends HookConsumerWidget {
  final Asset asset;
  final String title;
  final bool showTitle;
@@ -23,12 +28,48 @@ class MemoryCard extends StatelessWidget {
  });

  @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final animationDuration = useRef(
+      ref
+          .read(appSettingsServiceProvider)
+          .getSetting(AppSettingsEnum.memoryAutoPlayDuration),
+    );
+
+    final animation = useAnimationController(
+      duration: Duration(seconds: animationDuration.value + 1),
+    );
+
+    const scale = 1.2;
+    final shouldZoom = Random().nextBool();
+    final identity = Matrix4.identity();
+    final scaled = Matrix4.identity()..scale(scale);
+    final beginTransform = shouldZoom ? identity : scaled;
+    final endTransform = shouldZoom ? scaled : identity;
+
+    useEffect(
+      () {
+        if (ref.read(memoryAutoPlayProvider)) {
+          WidgetsBinding.instance
+              .addPostFrameCallback((_) => animation.forward());
+        }
+        return null;
+      },
+      [],
+    );
+
+    ref.listen(memoryAutoPlayProvider, (_, value) {
+      if (!value) {
+        animation.stop();
+      } else {
+        animation.forward();
+      }
+    });
+
    return Card(
      color: Colors.black,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(25.0),
-        side: const BorderSide(
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(25.0)),
+        side: BorderSide(
          color: Colors.black,
          width: 1.0,
        ),
@@ -58,25 +99,40 @@ class MemoryCard extends StatelessWidget {
              if (asset.isImage) {
                return Hero(
                  tag: 'memory-${asset.id}',
-                  child: ImmichImage(
-                    asset,
-                    fit: fit,
-                    height: double.infinity,
-                    width: double.infinity,
+                  child: AnimatedBuilder(
+                    animation: animation,
+                    builder: (_, child) => Container(
+                      height: double.infinity,
+                      width: double.infinity,
+                      transform: Matrix4Tween(
+                        begin: beginTransform,
+                        end: endTransform,
+                      ).evaluate(animation),
+                      transformAlignment: Alignment.center,
+                      child: child,
+                    ),
+                    child: ImmichImage(
+                      asset,
+                      fit: fit,
+                      height: double.infinity,
+                      width: double.infinity,
+                    ),
                  ),
                );
              } else {
                return Hero(
                  tag: 'memory-${asset.id}',
                  child: VideoViewerPage(
+                    key: ValueKey(asset),
                    asset: asset,
                    showDownloadingIndicator: false,
-                    placeholder: ImmichImage(
-                      asset,
-                      fit: fit,
+                    placeholder: SizedBox.expand(
+                      child: ImmichImage(
+                        asset,
+                        fit: fit,
+                      ),
                    ),
                    hideControlsTimer: const Duration(seconds: 2),
-                    onVideoEnded: onVideoEnded,
                    showControls: false,
                  ),
                );
@@ -1,17 +1,24 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/immich_colors.dart';
+import 'package:immich_mobile/modules/memories/providers/memory_auto_play.provider.dart';

 class MemoryProgressIndicator extends StatelessWidget {
  /// The number of ticks in the progress indicator
  final int ticks;

-  /// The current value of the indicator
-  final double value;
+  /// The current index of memory
+  final int value;
+
+  /// The duration to animate the current tick
+  final int animationDuration;

  const MemoryProgressIndicator({
    super.key,
    required this.ticks,
    required this.value,
+    required this.animationDuration,
  });

  @override
@@ -19,36 +26,107 @@ class MemoryProgressIndicator extends StatelessWidget {
    return LayoutBuilder(
      builder: (context, constraints) {
        final tickWidth = constraints.maxWidth / ticks;
-        return ClipRRect(
-          borderRadius: const BorderRadius.all(Radius.circular(2.0)),
-          child: Stack(
-            children: [
-              LinearProgressIndicator(
-                value: value,
-                backgroundColor: Colors.grey[600],
-                color: immichDarkThemePrimaryColor,
-              ),
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: List.generate(
-                  ticks,
-                  (i) => Container(
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: List.generate(
+            ticks,
+            (i) => i > value
+                ? _NonAnimatingTick(
                    width: tickWidth,
-                    height: 4,
-                    decoration: BoxDecoration(
-                      border: i == 0
-                          ? null
-                          : const Border(
-                              left: BorderSide(
-                                color: Colors.black,
-                                width: 1,
-                              ),
-                            ),
-                    ),
-                  ),
-                ),
-              ),
-            ],
+                    filled: false,
+                  )
+                : i < value
+                    ? _NonAnimatingTick(
+                        width: tickWidth,
+                        filled: true,
+                      )
+                    : _AnimatingTick(
+                        width: tickWidth,
+                        duration: animationDuration,
+                      ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _NonAnimatingTick extends StatelessWidget {
+  final double width;
+  final bool filled;
+
+  const _NonAnimatingTick({required this.width, required this.filled});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: width,
+      height: 4,
+      decoration: BoxDecoration(
+        color: filled ? immichDarkThemePrimaryColor : Colors.grey,
+        borderRadius: const BorderRadius.all(Radius.circular(5)),
+        border: const Border(
+          left: BorderSide(color: Colors.black, width: 1),
+          right: BorderSide(color: Colors.black, width: 1),
+        ),
+      ),
+    );
+  }
+}
+
+class _AnimatingTick extends HookConsumerWidget {
+  final double width;
+  final int duration;
+
+  const _AnimatingTick({
+    required this.width,
+    required this.duration,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final animationController =
+        useAnimationController(duration: Duration(seconds: duration));
+
+    useEffect(
+      () {
+        if (ref.read(memoryAutoPlayProvider)) {
+          WidgetsBinding.instance
+              .addPostFrameCallback((_) => animationController.forward());
+        }
+        return null;
+      },
+      [],
+    );
+
+    ref.listen(memoryAutoPlayProvider, (_, value) {
+      if (!value) {
+        animationController.stop();
+      } else {
+        animationController.forward();
+      }
+    });
+
+    return AnimatedBuilder(
+      animation: animationController,
+      builder: (_, __) {
+        final filledWidth =
+            Tween(begin: 0.0, end: width).evaluate(animationController);
+        return Container(
+          width: width,
+          height: 4,
+          decoration: const BoxDecoration(
+            borderRadius: BorderRadius.all(Radius.circular(5)),
+            border: Border(
+              left: BorderSide(color: Colors.black, width: 1),
+              right: BorderSide(color: Colors.black, width: 1),
+            ),
+          ),
+          child: LinearProgressIndicator(
+            value: filledWidth / width,
+            backgroundColor: Colors.grey,
+            color: immichDarkThemePrimaryColor,
+            borderRadius: const BorderRadius.all(Radius.circular(5)),
          ),
        );
      },
@@ -1,13 +1,19 @@
+import 'dart:async';
+import 'dart:math' as math;
+
 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:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/memories/models/memory.dart';
+import 'package:immich_mobile/modules/memories/providers/memory_auto_play.provider.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_bottom_info.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_card.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_epilogue.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_progress_indicator.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:immich_mobile/shared/ui/immich_image.dart';

@@ -24,13 +30,17 @@ class MemoryPage extends HookConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    final currentMemory = useState(memories[memoryIndex]);
-    final currentAssetPage = useState(0);
+    final currentMemory = useRef(memories[memoryIndex]);
+    final currentAssetPage = useRef(0);
    final currentMemoryIndex = useState(memoryIndex);
-    final assetProgress = useState(
-      "${currentAssetPage.value + 1}|${currentMemory.value.assets.length}",
-    );
+    final memoryTimer = useRef<Timer?>(null);
+    final memoryStopWatch = useRef<Stopwatch?>(null);
    const bgColor = Colors.black;
+    final animationDuration = useRef(
+      ref
+          .read(appSettingsServiceProvider)
+          .getSetting(AppSettingsEnum.memoryAutoPlayDuration),
+    );

    /// The list of all of the asset page controllers
    final memoryAssetPageControllers =
@@ -39,13 +49,6 @@ class MemoryPage extends HookConsumerWidget {
    /// The main vertically scrolling page controller with each list of memories
    final memoryPageController = usePageController(initialPage: memoryIndex);

-    // The Page Controller that scrolls horizontally with all of the assets
-    useEffect(() {
-      // Memories is an immersive activity
-      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
-      return null;
-    });
-
    toNextMemory() {
      memoryPageController.nextPage(
        duration: const Duration(milliseconds: 500),
@@ -69,11 +72,6 @@ class MemoryPage extends HookConsumerWidget {
      }
    }

-    updateProgressText() {
-      assetProgress.value =
-          "${currentAssetPage.value + 1}|${currentMemory.value.assets.length}";
-    }
-
    /// Downloads and caches the image for the asset at this [currentMemory]'s index
    precacheAsset(int index) async {
      // Guard index out of range
@@ -124,16 +122,74 @@ class MemoryPage extends HookConsumerWidget {
          .then((_) => precacheAsset(1));
    }

-    Future<void> onAssetChanged(int otherIndex) async {
+    int getAutoPlayDuration() {
+      final currentAsset = currentMemory.value.assets[currentAssetPage.value];
+      return currentAsset.isImage
+          ? animationDuration.value
+          : math.max(
+              currentAsset.durationInSeconds + 2,
+              animationDuration.value,
+            );
+    }
+
+    void resetTimer([int? remainingTime]) {
+      final isEpiloguePage =
+          (memoryPageController.page?.floor() ?? 0) >= memories.length;
+
+      memoryTimer.value?.cancel();
+      memoryStopWatch.value?.reset();
+      if (isEpiloguePage) {
+        memoryTimer.value = null;
+        memoryStopWatch.value = null;
+        return;
+      }
+
+      memoryTimer.value = Timer(
+        Duration(
+          seconds: remainingTime ?? getAutoPlayDuration(),
+        ),
+        () => toNextAsset(currentAssetPage.value),
+      );
+      if (ref.read(memoryAutoPlayProvider)) {
+        memoryStopWatch.value = Stopwatch()..start();
+      }
+    }
+
+    onAssetChanged(int otherIndex) async {
      HapticFeedback.selectionClick();
      currentAssetPage.value = otherIndex;
-      updateProgressText();
      // Wait for page change animation to finish
      await Future.delayed(const Duration(milliseconds: 400));
-      // And then precache the next asset
-      await precacheAsset(otherIndex + 1);
+      precacheAsset(otherIndex + 1);
+      WidgetsBinding.instance.addPostFrameCallback((_) => resetTimer());
    }

+    ref.listen(memoryAutoPlayProvider, (_, value) {
+      if (!value) {
+        memoryTimer.value?.cancel();
+        memoryStopWatch.value?.stop();
+      } else {
+        final elapsedSeconds = memoryStopWatch.value?.elapsed.inSeconds;
+        final remaining = getAutoPlayDuration() - (elapsedSeconds ?? 0);
+        WidgetsBinding.instance
+            .addPostFrameCallback((_) => resetTimer(remaining));
+      }
+    });
+
+    // The Page Controller that scrolls horizontally with all of the assets
+    useEffect(
+      () {
+        // Memories is an immersive activity
+        SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
+        WidgetsBinding.instance.addPostFrameCallback((_) => resetTimer());
+        return () {
+          memoryTimer.value?.cancel();
+          memoryStopWatch.value?.stop();
+        };
+      },
+      [],
+    );
+
    /* Notification listener is used instead of OnPageChanged callback since OnPageChanged is called
     * when the page in the **center** of the viewer changes. We want to reset currentAssetPage only when the final
     * page during the end of scroll is different than the current page
@@ -160,10 +216,9 @@ class MemoryPage extends HookConsumerWidget {
      child: Scaffold(
        backgroundColor: bgColor,
        body: PopScope(
-          onPopInvoked: (didPop) {
-            // Remove immersive mode and go back to normal mode
-            SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
-          },
+          onPopInvoked: (_) =>
+              // Remove immersive mode and go back to normal mode
+              SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge),
          child: SafeArea(
            child: PageView.builder(
              physics: const BouncingScrollPhysics(
@@ -173,14 +228,14 @@ class MemoryPage extends HookConsumerWidget {
              controller: memoryPageController,
              onPageChanged: (pageNumber) {
                HapticFeedback.mediumImpact();
+                currentAssetPage.value = 0;
+
                if (pageNumber < memories.length) {
                  currentMemoryIndex.value = pageNumber;
                  currentMemory.value = memories[pageNumber];
+                  WidgetsBinding.instance
+                      .addPostFrameCallback((_) => resetTimer());
                }
-
-                currentAssetPage.value = 0;
-
-                updateProgressText();
              },
              itemCount: memories.length + 1,
              itemBuilder: (context, mIndex) {
@@ -208,14 +263,10 @@ class MemoryPage extends HookConsumerWidget {
                      child: AnimatedBuilder(
                        animation: assetController,
                        builder: (context, child) {
-                          double value = 0.0;
-                          if (assetController.hasClients) {
-                            // We can only access [page] if this has clients
-                            value = assetController.page ?? 0;
-                          }
                          return MemoryProgressIndicator(
                            ticks: memories[mIndex].assets.length,
-                            value: (value + 1) / memories[mIndex].assets.length,
+                            value: currentAssetPage.value,
+                            animationDuration: getAutoPlayDuration(),
                          );
                        },
                      ),
@@ -235,9 +286,7 @@ class MemoryPage extends HookConsumerWidget {
                              final asset = memories[mIndex].assets[index];
                              return GestureDetector(
                                behavior: HitTestBehavior.translucent,
-                                onTap: () {
-                                  toNextAsset(index);
-                                },
+                                onTap: () => toNextAsset(index),
                                child: Container(
                                  color: Colors.black,
                                  child: MemoryCard(
@@ -44,10 +44,6 @@ class CuratedPeopleRow extends StatelessWidget {

    return ListView.builder(
      scrollDirection: Axis.horizontal,
-      padding: const EdgeInsets.only(
-        left: 16,
-        top: 8,
-      ),
      itemBuilder: (context, index) {
        final person = content[index];
        final headers = {
@@ -78,19 +78,25 @@ class SearchPage extends HookConsumerWidget {
        height: imageSize,
        child: curatedPeople.widgetWhen(
          onError: (error, stack) => const ScaffoldErrorBody(withIcon: false),
-          onData: (people) => CuratedPeopleRow(
-            content: people.take(12).toList(),
-            onTap: (content, index) {
-              context.pushRoute(
-                PersonResultRoute(
-                  personId: content.id,
-                  personName: content.label,
-                ),
-              );
-            },
-            onNameTap: (person, index) => {
-              showNameEditModel(person.id, person.label),
-            },
+          onData: (people) => Padding(
+            padding: const EdgeInsets.only(
+              left: 16,
+              top: 8,
+            ),
+            child: CuratedPeopleRow(
+              content: people.take(12).toList(),
+              onTap: (content, index) {
+                context.pushRoute(
+                  PersonResultRoute(
+                    personId: content.id,
+                    personName: content.label,
+                  ),
+                );
+              },
+              onNameTap: (person, index) => {
+                showNameEditModel(person.id, person.label),
+              },
+            ),
          ),
        ),
      );
@@ -57,6 +57,7 @@ enum AppSettingsEnum<T> {
    null,
    false,
  ),
+  memoryAutoPlayDuration<int>(StoreKey.memoryAutoPlayDuration, null, 5),
  ;

  const AppSettingsEnum(this.storeKey, this.hiveKey, this.defaultValue);
@@ -21,6 +21,8 @@ class AdvancedSettings extends HookConsumerWidget {
    final isEnabled =
        useState(AppSettingsEnum.advancedTroubleshooting.defaultValue);
    final levelId = useState(AppSettingsEnum.logLevel.defaultValue);
+    final memoryAutoPlayDuration =
+        useState(AppSettingsEnum.memoryAutoPlayDuration.defaultValue);
    final preferRemote =
        useState(AppSettingsEnum.preferRemoteImage.defaultValue);
    final allowSelfSignedSSLCert =
@@ -34,6 +36,8 @@ class AdvancedSettings extends HookConsumerWidget {
        levelId.value = appSettingService.getSetting(AppSettingsEnum.logLevel);
        preferRemote.value =
            appSettingService.getSetting(AppSettingsEnum.preferRemoteImage);
+        memoryAutoPlayDuration.value = appSettingService
+            .getSetting(AppSettingsEnum.memoryAutoPlayDuration);
        allowSelfSignedSSLCert.value = appSettingService
            .getSetting(AppSettingsEnum.allowSelfSignedSSLCert);
        return null;
@@ -84,6 +88,26 @@ class AdvancedSettings extends HookConsumerWidget {
            activeColor: context.primaryColor,
          ),
        ),
+        ListTile(
+          dense: true,
+          title: Text(
+            "Memory auto play duration: ${memoryAutoPlayDuration.value}s",
+            style: const TextStyle(fontWeight: FontWeight.bold),
+          ).tr(),
+          subtitle: Slider(
+            value: memoryAutoPlayDuration.value.toDouble(),
+            onChanged: (double v) => memoryAutoPlayDuration.value = v.toInt(),
+            onChangeEnd: (double v) => appSettingService.setSetting(
+              AppSettingsEnum.memoryAutoPlayDuration,
+              v.toInt(),
+            ),
+            max: 5,
+            min: 1.0,
+            divisions: 5,
+            label: "${memoryAutoPlayDuration.value}",
+            activeColor: context.primaryColor,
+          ),
+        ),
        SettingsSwitchListTile(
          appSettingService: appSettingService,
          valueNotifier: preferRemote,
@@ -350,9 +350,6 @@ abstract class _$AppRouter extends RootStackRouter {
          key: args.key,
          asset: args.asset,
          isMotionVideo: args.isMotionVideo,
-          onVideoEnded: args.onVideoEnded,
-          onPlaying: args.onPlaying,
-          onPaused: args.onPaused,
          placeholder: args.placeholder,
          showControls: args.showControls,
          hideControlsTimer: args.hideControlsTimer,
@@ -1388,12 +1385,9 @@ class VideoViewerRoute extends PageRouteInfo<VideoViewerRouteArgs> {
    Key? key,
    required Asset asset,
    bool isMotionVideo = false,
-    void Function()? onVideoEnded,
-    void Function()? onPlaying,
-    void Function()? onPaused,
    Widget? placeholder,
    bool showControls = true,
-    Duration hideControlsTimer = const Duration(milliseconds: 1500),
+    Duration hideControlsTimer = const Duration(seconds: 5),
    bool showDownloadingIndicator = true,
    List<PageRouteInfo>? children,
  }) : super(
@@ -1402,9 +1396,6 @@ class VideoViewerRoute extends PageRouteInfo<VideoViewerRouteArgs> {
            key: key,
            asset: asset,
            isMotionVideo: isMotionVideo,
-            onVideoEnded: onVideoEnded,
-            onPlaying: onPlaying,
-            onPaused: onPaused,
            placeholder: placeholder,
            showControls: showControls,
            hideControlsTimer: hideControlsTimer,
@@ -1424,12 +1415,9 @@ class VideoViewerRouteArgs {
    this.key,
    required this.asset,
    this.isMotionVideo = false,
-    this.onVideoEnded,
-    this.onPlaying,
-    this.onPaused,
    this.placeholder,
    this.showControls = true,
-    this.hideControlsTimer = const Duration(milliseconds: 1500),
+    this.hideControlsTimer = const Duration(seconds: 5),
    this.showDownloadingIndicator = true,
  });

@@ -1439,12 +1427,6 @@ class VideoViewerRouteArgs {

  final bool isMotionVideo;

-  final void Function()? onVideoEnded;
-
-  final void Function()? onPlaying;
-
-  final void Function()? onPaused;
-
  final Widget? placeholder;

  final bool showControls;
@@ -1455,6 +1437,6 @@ class VideoViewerRouteArgs {

  @override
  String toString() {
-    return 'VideoViewerRouteArgs{key: $key, asset: $asset, isMotionVideo: $isMotionVideo, onVideoEnded: $onVideoEnded, onPlaying: $onPlaying, onPaused: $onPaused, placeholder: $placeholder, showControls: $showControls, hideControlsTimer: $hideControlsTimer, showDownloadingIndicator: $showDownloadingIndicator}';
+    return 'VideoViewerRouteArgs{key: $key, asset: $asset, isMotionVideo: $isMotionVideo, placeholder: $placeholder, showControls: $showControls, hideControlsTimer: $hideControlsTimer, showDownloadingIndicator: $showDownloadingIndicator}';
  }
 }
@@ -190,6 +190,7 @@ enum StoreKey<T> {
  ignoreIcloudAssets<bool>(122, type: bool),
  selectedAlbumSortReverse<bool>(123, type: bool),
  mapThemeMode<int>(124, type: int),
+  memoryAutoPlayDuration<int>(125, type: int),
  ;

  const StoreKey(
@@ -61,6 +61,27 @@ class AssetService {
    return (assetDto.map(Asset.remote).toList(), deleted.ids);
  }

+  /// Returns the list of people of the given asset id.
+  // If the server is not reachable `null` is returned.
+  Future<List<PersonWithFacesResponseDto>?> getRemotePeopleOfAsset(
+    String remoteId,
+  ) async {
+    try {
+      final AssetResponseDto? dto =
+          await _apiService.assetApi.getAssetInfo(remoteId);
+
+      return dto?.people;
+    } catch (error, stack) {
+      log.severe(
+        'Error while getting remote asset info: ${error.toString()}',
+        error,
+        stack,
+      );
+
+      return null;
+    }
+  }
+
  /// Returns `null` if the server state did not change, else list of assets
  Future<List<Asset>?> _getRemoteAssets(User user) async {
    const int chunkSize = 10000;
@@ -0,0 +1,48 @@
+import 'package:async/async.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+RestartableTimer useTimer(
+  Duration duration,
+  void Function() callback,
+) {
+  return use(
+    _TimerHook(
+      duration: duration,
+      callback: callback,
+    ),
+  );
+}
+
+class _TimerHook extends Hook<RestartableTimer> {
+  final Duration duration;
+  final void Function() callback;
+
+  const _TimerHook({
+    required this.duration,
+    required this.callback,
+  });
+  @override
+  HookState<RestartableTimer, Hook<RestartableTimer>> createState() =>
+      _TimerHookState();
+}
+
+class _TimerHookState extends HookState<RestartableTimer, _TimerHook> {
+  late RestartableTimer timer;
+  @override
+  void initHook() {
+    super.initHook();
+    timer = RestartableTimer(hook.duration, hook.callback);
+  }
+
+  @override
+  RestartableTimer build(BuildContext context) {
+    return timer;
+  }
+
+  @override
+  void dispose() {
+    timer.cancel();
+    super.dispose();
+  }
+}
@@ -160,6 +160,7 @@ doc/SystemConfigTemplateStorageOptionDto.md
 doc/SystemConfigThemeDto.md
 doc/SystemConfigThumbnailDto.md
 doc/SystemConfigTrashDto.md
+doc/SystemConfigUserDto.md
 doc/TagApi.md
 doc/TagResponseDto.md
 doc/TagTypeEnum.md
@@ -357,6 +358,7 @@ lib/model/system_config_template_storage_option_dto.dart
 lib/model/system_config_theme_dto.dart
 lib/model/system_config_thumbnail_dto.dart
 lib/model/system_config_trash_dto.dart
+lib/model/system_config_user_dto.dart
 lib/model/tag_response_dto.dart
 lib/model/tag_type_enum.dart
 lib/model/thumbnail_format.dart
@@ -539,6 +541,7 @@ test/system_config_template_storage_option_dto_test.dart
 test/system_config_theme_dto_test.dart
 test/system_config_thumbnail_dto_test.dart
 test/system_config_trash_dto_test.dart
+test/system_config_user_dto_test.dart
 test/tag_api_test.dart
 test/tag_response_dto_test.dart
 test/tag_type_enum_test.dart
@@ -355,6 +355,7 @@ Class | Method | HTTP request | Description
 - [SystemConfigThemeDto](doc//SystemConfigThemeDto.md)
 - [SystemConfigThumbnailDto](doc//SystemConfigThumbnailDto.md)
 - [SystemConfigTrashDto](doc//SystemConfigTrashDto.md)
+ - [SystemConfigUserDto](doc//SystemConfigUserDto.md)
 - [TagResponseDto](doc//TagResponseDto.md)
 - [TagTypeEnum](doc//TagTypeEnum.md)
 - [ThumbnailFormat](doc//ThumbnailFormat.md)
@@ -14,6 +14,7 @@ Name | Type | Description | Notes
 **loginPageMessage** | **String** |  | 
 **oauthButtonText** | **String** |  | 
 **trashDays** | **int** |  | 
+**userDeleteDelay** | **int** |  | 

 [[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)

@@ -23,6 +23,7 @@ Name | Type | Description | Notes
 **theme** | [**SystemConfigThemeDto**](SystemConfigThemeDto.md) |  | 
 **thumbnail** | [**SystemConfigThumbnailDto**](SystemConfigThumbnailDto.md) |  | 
 **trash** | [**SystemConfigTrashDto**](SystemConfigTrashDto.md) |  | 
+**user** | [**SystemConfigUserDto**](SystemConfigUserDto.md) |  | 

 [[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)

@@ -0,0 +1,15 @@
+# openapi.model.SystemConfigUserDto
+
+## Load the model package
+```dart
+import 'package:openapi/api.dart';
+```
+
+## Properties
+Name | Type | Description | Notes
+------------ | ------------- | ------------- | -------------
+**deleteDelay** | **int** |  | 
+
+[[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)
+
+
@@ -190,6 +190,7 @@ part 'model/system_config_template_storage_option_dto.dart';
 part 'model/system_config_theme_dto.dart';
 part 'model/system_config_thumbnail_dto.dart';
 part 'model/system_config_trash_dto.dart';
+part 'model/system_config_user_dto.dart';
 part 'model/tag_response_dto.dart';
 part 'model/tag_type_enum.dart';
 part 'model/thumbnail_format.dart';
@@ -462,6 +462,8 @@ class ApiClient {
          return SystemConfigThumbnailDto.fromJson(value);
        case 'SystemConfigTrashDto':
          return SystemConfigTrashDto.fromJson(value);
+        case 'SystemConfigUserDto':
+          return SystemConfigUserDto.fromJson(value);
        case 'TagResponseDto':
          return TagResponseDto.fromJson(value);
        case 'TagTypeEnum':
@@ -19,6 +19,7 @@ class ServerConfigDto {
    required this.loginPageMessage,
    required this.oauthButtonText,
    required this.trashDays,
+    required this.userDeleteDelay,
  });

  String externalDomain;
@@ -33,6 +34,8 @@ class ServerConfigDto {

  int trashDays;

+  int userDeleteDelay;
+
  @override
  bool operator ==(Object other) => identical(this, other) || other is ServerConfigDto &&
    other.externalDomain == externalDomain &&
@@ -40,7 +43,8 @@ class ServerConfigDto {
    other.isOnboarded == isOnboarded &&
    other.loginPageMessage == loginPageMessage &&
    other.oauthButtonText == oauthButtonText &&
-    other.trashDays == trashDays;
+    other.trashDays == trashDays &&
+    other.userDeleteDelay == userDeleteDelay;

  @override
  int get hashCode =>
@@ -50,10 +54,11 @@ class ServerConfigDto {
    (isOnboarded.hashCode) +
    (loginPageMessage.hashCode) +
    (oauthButtonText.hashCode) +
-    (trashDays.hashCode);
+    (trashDays.hashCode) +
+    (userDeleteDelay.hashCode);

  @override
-  String toString() => 'ServerConfigDto[externalDomain=$externalDomain, isInitialized=$isInitialized, isOnboarded=$isOnboarded, loginPageMessage=$loginPageMessage, oauthButtonText=$oauthButtonText, trashDays=$trashDays]';
+  String toString() => 'ServerConfigDto[externalDomain=$externalDomain, isInitialized=$isInitialized, isOnboarded=$isOnboarded, loginPageMessage=$loginPageMessage, oauthButtonText=$oauthButtonText, trashDays=$trashDays, userDeleteDelay=$userDeleteDelay]';

  Map<String, dynamic> toJson() {
    final json = <String, dynamic>{};
@@ -63,6 +68,7 @@ class ServerConfigDto {
      json[r'loginPageMessage'] = this.loginPageMessage;
      json[r'oauthButtonText'] = this.oauthButtonText;
      json[r'trashDays'] = this.trashDays;
+      json[r'userDeleteDelay'] = this.userDeleteDelay;
    return json;
  }

@@ -80,6 +86,7 @@ class ServerConfigDto {
        loginPageMessage: mapValueOfType<String>(json, r'loginPageMessage')!,
        oauthButtonText: mapValueOfType<String>(json, r'oauthButtonText')!,
        trashDays: mapValueOfType<int>(json, r'trashDays')!,
+        userDeleteDelay: mapValueOfType<int>(json, r'userDeleteDelay')!,
      );
    }
    return null;
@@ -133,6 +140,7 @@ class ServerConfigDto {
    'loginPageMessage',
    'oauthButtonText',
    'trashDays',
+    'userDeleteDelay',
  };
 }

@@ -28,6 +28,7 @@ class SystemConfigDto {
    required this.theme,
    required this.thumbnail,
    required this.trash,
+    required this.user,
  });

  SystemConfigFFmpegDto ffmpeg;
@@ -60,6 +61,8 @@ class SystemConfigDto {

  SystemConfigTrashDto trash;

+  SystemConfigUserDto user;
+
  @override
  bool operator ==(Object other) => identical(this, other) || other is SystemConfigDto &&
    other.ffmpeg == ffmpeg &&
@@ -76,7 +79,8 @@ class SystemConfigDto {
    other.storageTemplate == storageTemplate &&
    other.theme == theme &&
    other.thumbnail == thumbnail &&
-    other.trash == trash;
+    other.trash == trash &&
+    other.user == user;

  @override
  int get hashCode =>
@@ -95,10 +99,11 @@ class SystemConfigDto {
    (storageTemplate.hashCode) +
    (theme.hashCode) +
    (thumbnail.hashCode) +
-    (trash.hashCode);
+    (trash.hashCode) +
+    (user.hashCode);

  @override
-  String toString() => 'SystemConfigDto[ffmpeg=$ffmpeg, job=$job, library_=$library_, logging=$logging, machineLearning=$machineLearning, map=$map, newVersionCheck=$newVersionCheck, oauth=$oauth, passwordLogin=$passwordLogin, reverseGeocoding=$reverseGeocoding, server=$server, storageTemplate=$storageTemplate, theme=$theme, thumbnail=$thumbnail, trash=$trash]';
+  String toString() => 'SystemConfigDto[ffmpeg=$ffmpeg, job=$job, library_=$library_, logging=$logging, machineLearning=$machineLearning, map=$map, newVersionCheck=$newVersionCheck, oauth=$oauth, passwordLogin=$passwordLogin, reverseGeocoding=$reverseGeocoding, server=$server, storageTemplate=$storageTemplate, theme=$theme, thumbnail=$thumbnail, trash=$trash, user=$user]';

  Map<String, dynamic> toJson() {
    final json = <String, dynamic>{};
@@ -117,6 +122,7 @@ class SystemConfigDto {
      json[r'theme'] = this.theme;
      json[r'thumbnail'] = this.thumbnail;
      json[r'trash'] = this.trash;
+      json[r'user'] = this.user;
    return json;
  }

@@ -143,6 +149,7 @@ class SystemConfigDto {
        theme: SystemConfigThemeDto.fromJson(json[r'theme'])!,
        thumbnail: SystemConfigThumbnailDto.fromJson(json[r'thumbnail'])!,
        trash: SystemConfigTrashDto.fromJson(json[r'trash'])!,
+        user: SystemConfigUserDto.fromJson(json[r'user'])!,
      );
    }
    return null;
@@ -205,6 +212,7 @@ class SystemConfigDto {
    'theme',
    'thumbnail',
    'trash',
+    'user',
  };
 }

@@ -0,0 +1,98 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.12
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+part of openapi.api;
+
+class SystemConfigUserDto {
+  /// Returns a new [SystemConfigUserDto] instance.
+  SystemConfigUserDto({
+    required this.deleteDelay,
+  });
+
+  int deleteDelay;
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is SystemConfigUserDto &&
+    other.deleteDelay == deleteDelay;
+
+  @override
+  int get hashCode =>
+    // ignore: unnecessary_parenthesis
+    (deleteDelay.hashCode);
+
+  @override
+  String toString() => 'SystemConfigUserDto[deleteDelay=$deleteDelay]';
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+      json[r'deleteDelay'] = this.deleteDelay;
+    return json;
+  }
+
+  /// Returns a new [SystemConfigUserDto] instance and imports its values from
+  /// [value] if it's a [Map], null otherwise.
+  // ignore: prefer_constructors_over_static_methods
+  static SystemConfigUserDto? fromJson(dynamic value) {
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+
+      return SystemConfigUserDto(
+        deleteDelay: mapValueOfType<int>(json, r'deleteDelay')!,
+      );
+    }
+    return null;
+  }
+
+  static List<SystemConfigUserDto> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <SystemConfigUserDto>[];
+    if (json is List && json.isNotEmpty) {
+      for (final row in json) {
+        final value = SystemConfigUserDto.fromJson(row);
+        if (value != null) {
+          result.add(value);
+        }
+      }
+    }
+    return result.toList(growable: growable);
+  }
+
+  static Map<String, SystemConfigUserDto> mapFromJson(dynamic json) {
+    final map = <String, SystemConfigUserDto>{};
+    if (json is Map && json.isNotEmpty) {
+      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
+      for (final entry in json.entries) {
+        final value = SystemConfigUserDto.fromJson(entry.value);
+        if (value != null) {
+          map[entry.key] = value;
+        }
+      }
+    }
+    return map;
+  }
+
+  // maps a json object with a list of SystemConfigUserDto-objects as value to a dart map
+  static Map<String, List<SystemConfigUserDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<SystemConfigUserDto>>{};
+    if (json is Map && json.isNotEmpty) {
+      // ignore: parameter_assignments
+      json = json.cast<String, dynamic>();
+      for (final entry in json.entries) {
+        map[entry.key] = SystemConfigUserDto.listFromJson(entry.value, growable: growable,);
+      }
+    }
+    return map;
+  }
+
+  /// The list of required keys that must be present in a JSON.
+  static const requiredKeys = <String>{
+    'deleteDelay',
+  };
+}
+
@@ -46,6 +46,11 @@ void main() {
      // TODO
    });

+    // int userDeleteDelay
+    test('to test the property `userDeleteDelay`', () async {
+      // TODO
+    });
+

  });

@@ -91,6 +91,11 @@ void main() {
      // TODO
    });

+    // SystemConfigUserDto user
+    test('to test the property `user`', () async {
+      // TODO
+    });
+

  });

@@ -0,0 +1,27 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.12
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+import 'package:openapi/api.dart';
+import 'package:test/test.dart';
+
+// tests for SystemConfigUserDto
+void main() {
+  // final instance = SystemConfigUserDto();
+
+  group('test SystemConfigUserDto', () {
+    // int deleteDelay
+    test('to test the property `deleteDelay`', () async {
+      // TODO
+    });
+
+
+  });
+
+}
@@ -50,7 +50,7 @@ packages:
    source: hosted
    version: "2.4.2"
  async:
-    dependency: transitive
+    dependency: "direct main"
    description:
      name: async
      sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c"
@@ -58,6 +58,7 @@ dependencies:
  timezone: ^0.9.2
  octo_image: ^2.0.0
  thumbhash: 0.1.0+1
+  async: ^2.11.0

  openapi:
    path: openapi
@@ -9090,6 +9090,9 @@
          },
          "trashDays": {
            "type": "integer"
+          },
+          "userDeleteDelay": {
+            "type": "integer"
          }
        },
        "required": [
@@ -9098,7 +9101,8 @@
          "isOnboarded",
          "loginPageMessage",
          "oauthButtonText",
-          "trashDays"
+          "trashDays",
+          "userDeleteDelay"
        ],
        "type": "object"
      },
@@ -9661,6 +9665,9 @@
          },
          "trash": {
            "$ref": "#/components/schemas/SystemConfigTrashDto"
+          },
+          "user": {
+            "$ref": "#/components/schemas/SystemConfigUserDto"
          }
        },
        "required": [
@@ -9678,7 +9685,8 @@
          "storageTemplate",
          "theme",
          "thumbnail",
-          "trash"
+          "trash",
+          "user"
        ],
        "type": "object"
      },
@@ -10162,6 +10170,17 @@
        ],
        "type": "object"
      },
+      "SystemConfigUserDto": {
+        "properties": {
+          "deleteDelay": {
+            "type": "integer"
+          }
+        },
+        "required": [
+          "deleteDelay"
+        ],
+        "type": "object"
+      },
      "TagResponseDto": {
        "properties": {
          "id": {
@@ -705,6 +705,7 @@ export type ServerConfigDto = {
    loginPageMessage: string;
    oauthButtonText: string;
    trashDays: number;
+    userDeleteDelay: number;
 };
 export type ServerFeaturesDto = {
    configFile: boolean;
@@ -918,6 +919,9 @@ export type SystemConfigTrashDto = {
    days: number;
    enabled: boolean;
 };
+export type SystemConfigUserDto = {
+    deleteDelay: number;
+};
 export type SystemConfigDto = {
    ffmpeg: SystemConfigFFmpegDto;
    job: SystemConfigJobDto;
@@ -934,6 +938,7 @@ export type SystemConfigDto = {
    theme: SystemConfigThemeDto;
    thumbnail: SystemConfigThumbnailDto;
    trash: SystemConfigTrashDto;
+    user: SystemConfigUserDto;
 };
 export type SystemConfigTemplateStorageOptionDto = {
    dayOptions: string[];
@@ -14,6 +14,7 @@ import { AssetEntity, AssetStackEntity, AssetType, SharedLinkType } from '@app/i
 import { AssetRepository } from '@app/infra/repositories';
 import { INestApplication } from '@nestjs/common';
 import { errorStub, userDto, uuidStub } from '@test/fixtures';
+import { assetApi } from 'e2e/client/asset-api';
 import { randomBytes } from 'node:crypto';
 import request from 'supertest';
 import { api } from '../../client';
@@ -532,6 +533,23 @@ describe(`${AssetController.name} (e2e)`, () => {
        }
      });
    }
+
+    it('should return stack data', async () => {
+      const parentId = asset1.id;
+      const childIds = [asset2.id, asset3.id];
+      await request(server)
+        .put('/asset')
+        .set('Authorization', `Bearer ${user1.accessToken}`)
+        .send({ stackParentId: parentId, ids: childIds });
+
+      const body = await assetApi.getAllAssets(server, user1.accessToken);
+      // Response includes parent with stack children count
+      const parentDto = body.find((a) => a.id == parentId);
+      expect(parentDto?.stackCount).toEqual(3);
+
+      // Response includes children at the root level
+      expect.arrayContaining([expect.objectContaining({ id: asset1.id }), expect.objectContaining({ id: asset2.id })]);
+    });
  });

  describe('POST /asset/upload', () => {
@@ -202,7 +202,7 @@ describe(MediaService.name, () => {
    it('should skip thumbnail generation if asset not found', async () => {
      assetMock.getByIds.mockResolvedValue([]);
      await sut.handleGenerateJpegThumbnail({ id: assetStub.image.id });
-      expect(mediaMock.generateThumbnail).not.toHaveBeenCalled();
+      expect(mediaMock.resize).not.toHaveBeenCalled();
      expect(assetMock.save).not.toHaveBeenCalledWith();
    });

@@ -210,7 +210,7 @@ describe(MediaService.name, () => {
      mediaMock.probe.mockResolvedValue(probeStub.noVideoStreams);
      assetMock.getByIds.mockResolvedValue([assetStub.video]);
      await sut.handleGenerateJpegThumbnail({ id: assetStub.image.id });
-      expect(mediaMock.generateThumbnail).not.toHaveBeenCalled();
+      expect(mediaMock.resize).not.toHaveBeenCalled();
      expect(assetMock.save).not.toHaveBeenCalledWith();
    });

@@ -219,16 +219,12 @@ describe(MediaService.name, () => {
      await sut.handleGenerateJpegThumbnail({ id: assetStub.image.id });

      expect(storageMock.mkdirSync).toHaveBeenCalledWith('upload/thumbs/user-id/as/se');
-      expect(mediaMock.generateThumbnail).toHaveBeenCalledWith(
-        '/original/path.jpg',
-        'upload/thumbs/user-id/as/se/asset-id.jpeg',
-        {
-          size: 1440,
-          format: 'jpeg',
-          quality: 80,
-          colorspace: Colorspace.SRGB,
-        },
-      );
+      expect(mediaMock.resize).toHaveBeenCalledWith('/original/path.jpg', 'upload/thumbs/user-id/as/se/asset-id.jpeg', {
+        size: 1440,
+        format: 'jpeg',
+        quality: 80,
+        colorspace: Colorspace.SRGB,
+      });
      expect(assetMock.save).toHaveBeenCalledWith({
        id: 'asset-id',
        resizePath: 'upload/thumbs/user-id/as/se/asset-id.jpeg',
@@ -242,16 +238,12 @@ describe(MediaService.name, () => {
      await sut.handleGenerateJpegThumbnail({ id: assetStub.image.id });

      expect(storageMock.mkdirSync).toHaveBeenCalledWith('upload/thumbs/user-id/as/se');
-      expect(mediaMock.generateThumbnail).toHaveBeenCalledWith(
-        '/original/path.jpg',
-        'upload/thumbs/user-id/as/se/asset-id.jpeg',
-        {
-          size: 1440,
-          format: 'jpeg',
-          quality: 80,
-          colorspace: Colorspace.P3,
-        },
-      );
+      expect(mediaMock.resize).toHaveBeenCalledWith('/original/path.jpg', 'upload/thumbs/user-id/as/se/asset-id.jpeg', {
+        size: 1440,
+        format: 'jpeg',
+        quality: 80,
+        colorspace: Colorspace.P3,
+      });
      expect(assetMock.save).toHaveBeenCalledWith({
        id: 'asset-id',
        resizePath: 'upload/thumbs/user-id/as/se/asset-id.jpeg',
@@ -342,7 +334,7 @@ describe(MediaService.name, () => {
    it('should skip thumbnail generation if asset not found', async () => {
      assetMock.getByIds.mockResolvedValue([]);
      await sut.handleGenerateWebpThumbnail({ id: assetStub.image.id });
-      expect(mediaMock.generateThumbnail).not.toHaveBeenCalled();
+      expect(mediaMock.resize).not.toHaveBeenCalled();
      expect(assetMock.save).not.toHaveBeenCalledWith();
    });

@@ -350,16 +342,12 @@ describe(MediaService.name, () => {
      assetMock.getByIds.mockResolvedValue([assetStub.image]);
      await sut.handleGenerateWebpThumbnail({ id: assetStub.image.id });

-      expect(mediaMock.generateThumbnail).toHaveBeenCalledWith(
-        '/original/path.jpg',
-        'upload/thumbs/user-id/as/se/asset-id.webp',
-        {
-          format: 'webp',
-          size: 250,
-          quality: 80,
-          colorspace: Colorspace.SRGB,
-        },
-      );
+      expect(mediaMock.resize).toHaveBeenCalledWith('/original/path.jpg', 'upload/thumbs/user-id/as/se/asset-id.webp', {
+        format: 'webp',
+        size: 250,
+        quality: 80,
+        colorspace: Colorspace.SRGB,
+      });
      expect(assetMock.save).toHaveBeenCalledWith({
        id: 'asset-id',
        webpPath: 'upload/thumbs/user-id/as/se/asset-id.webp',
@@ -374,16 +362,12 @@ describe(MediaService.name, () => {
    await sut.handleGenerateWebpThumbnail({ id: assetStub.image.id });

    expect(storageMock.mkdirSync).toHaveBeenCalledWith('upload/thumbs/user-id/as/se');
-    expect(mediaMock.generateThumbnail).toHaveBeenCalledWith(
-      '/original/path.jpg',
-      'upload/thumbs/user-id/as/se/asset-id.webp',
-      {
-        format: 'webp',
-        size: 250,
-        quality: 80,
-        colorspace: Colorspace.P3,
-      },
-    );
+    expect(mediaMock.resize).toHaveBeenCalledWith('/original/path.jpg', 'upload/thumbs/user-id/as/se/asset-id.webp', {
+      format: 'webp',
+      size: 250,
+      quality: 80,
+      colorspace: Colorspace.P3,
+    });
    expect(assetMock.save).toHaveBeenCalledWith({
      id: 'asset-id',
      webpPath: 'upload/thumbs/user-id/as/se/asset-id.webp',
@@ -185,7 +185,7 @@ export class MediaService {
      case AssetType.IMAGE: {
        const colorspace = this.isSRGB(asset) ? Colorspace.SRGB : thumbnail.colorspace;
        const thumbnailOptions = { format, size, colorspace, quality: thumbnail.quality };
-        await this.mediaRepository.generateThumbnail(asset.originalPath, path, thumbnailOptions);
+        await this.mediaRepository.resize(asset.originalPath, path, thumbnailOptions);
        break;
      }

@@ -49,6 +49,8 @@ const responseDto: PersonResponseDto = {

 const statistics = { assets: 3 };

+const croppedFace = Buffer.from('Cropped Face');
+
 const detectFaceMock = {
  assetId: 'asset-1',
  personId: 'person-1',
@@ -103,6 +105,8 @@ describe(PersonService.name, () => {
      searchMock,
      cryptoMock,
    );
+
+    mediaMock.crop.mockResolvedValue(croppedFace);
  });

  it('should be defined', () => {
@@ -912,20 +916,20 @@ describe(PersonService.name, () => {
    it('should skip a person not found', async () => {
      personMock.getById.mockResolvedValue(null);
      await sut.handleGeneratePersonThumbnail({ id: 'person-1' });
-      expect(mediaMock.generateThumbnail).not.toHaveBeenCalled();
+      expect(mediaMock.crop).not.toHaveBeenCalled();
    });

    it('should skip a person without a face asset id', async () => {
      personMock.getById.mockResolvedValue(personStub.noThumbnail);
      await sut.handleGeneratePersonThumbnail({ id: 'person-1' });
-      expect(mediaMock.generateThumbnail).not.toHaveBeenCalled();
+      expect(mediaMock.crop).not.toHaveBeenCalled();
    });

    it('should skip a person with a face asset id not found', async () => {
      personMock.getById.mockResolvedValue({ ...personStub.primaryPerson, faceAssetId: faceStub.middle.id });
      personMock.getFaceByIdWithAssets.mockResolvedValue(faceStub.face1);
      await sut.handleGeneratePersonThumbnail({ id: 'person-1' });
-      expect(mediaMock.generateThumbnail).not.toHaveBeenCalled();
+      expect(mediaMock.crop).not.toHaveBeenCalled();
    });

    it('should skip a person with a face asset id without a thumbnail', async () => {
@@ -933,34 +937,30 @@ describe(PersonService.name, () => {
      personMock.getFaceByIdWithAssets.mockResolvedValue(faceStub.face1);
      assetMock.getByIds.mockResolvedValue([assetStub.noResizePath]);
      await sut.handleGeneratePersonThumbnail({ id: 'person-1' });
-      expect(mediaMock.generateThumbnail).not.toHaveBeenCalled();
+      expect(mediaMock.crop).not.toHaveBeenCalled();
    });

    it('should generate a thumbnail', async () => {
      personMock.getById.mockResolvedValue({ ...personStub.primaryPerson, faceAssetId: faceStub.middle.assetId });
      personMock.getFaceByIdWithAssets.mockResolvedValue(faceStub.middle);
-      assetMock.getById.mockResolvedValue(assetStub.primaryImage);
+      assetMock.getByIds.mockResolvedValue([assetStub.primaryImage]);

-      await sut.handleGeneratePersonThumbnail({ id: personStub.primaryPerson.id });
+      await sut.handleGeneratePersonThumbnail({ id: 'person-1' });

-      expect(assetMock.getById).toHaveBeenCalledWith(faceStub.middle.assetId, { exifInfo: true });
+      expect(assetMock.getByIds).toHaveBeenCalledWith([faceStub.middle.assetId]);
      expect(storageMock.mkdirSync).toHaveBeenCalledWith('upload/thumbs/admin_id/pe/rs');
-      expect(mediaMock.generateThumbnail).toHaveBeenCalledWith(
-        assetStub.primaryImage.originalPath,
-        'upload/thumbs/admin_id/pe/rs/person-1.jpeg',
-        {
-          format: 'jpeg',
-          size: 250,
-          quality: 80,
-          colorspace: Colorspace.P3,
-          crop: {
-            left: 238,
-            top: 163,
-            width: 274,
-            height: 274,
-          },
-        },
-      );
+      expect(mediaMock.crop).toHaveBeenCalledWith('/uploads/admin-id/thumbs/path.jpg', {
+        left: 95,
+        top: 95,
+        width: 110,
+        height: 110,
+      });
+      expect(mediaMock.resize).toHaveBeenCalledWith(croppedFace, 'upload/thumbs/admin_id/pe/rs/person-1.jpeg', {
+        format: 'jpeg',
+        size: 250,
+        quality: 80,
+        colorspace: Colorspace.P3,
+      });
      expect(personMock.update).toHaveBeenCalledWith({
        id: 'person-1',
        thumbnailPath: 'upload/thumbs/admin_id/pe/rs/person-1.jpeg',
@@ -970,51 +970,43 @@ describe(PersonService.name, () => {
    it('should generate a thumbnail without going negative', async () => {
      personMock.getById.mockResolvedValue({ ...personStub.primaryPerson, faceAssetId: faceStub.start.assetId });
      personMock.getFaceByIdWithAssets.mockResolvedValue(faceStub.start);
-      assetMock.getById.mockResolvedValue(assetStub.image);
+      assetMock.getByIds.mockResolvedValue([assetStub.image]);

-      await sut.handleGeneratePersonThumbnail({ id: personStub.primaryPerson.id });
+      await sut.handleGeneratePersonThumbnail({ id: 'person-1' });

-      expect(mediaMock.generateThumbnail).toHaveBeenCalledWith(
-        assetStub.image.originalPath,
-        'upload/thumbs/admin_id/pe/rs/person-1.jpeg',
-        {
-          format: 'jpeg',
-          size: 250,
-          quality: 80,
-          colorspace: Colorspace.P3,
-          crop: {
-            left: 0,
-            top: 428,
-            width: 1102,
-            height: 1102,
-          },
-        },
-      );
+      expect(mediaMock.crop).toHaveBeenCalledWith('/uploads/user-id/thumbs/path.jpg', {
+        left: 0,
+        top: 0,
+        width: 510,
+        height: 510,
+      });
+      expect(mediaMock.resize).toHaveBeenCalledWith(croppedFace, 'upload/thumbs/admin_id/pe/rs/person-1.jpeg', {
+        format: 'jpeg',
+        size: 250,
+        quality: 80,
+        colorspace: Colorspace.P3,
+      });
    });

    it('should generate a thumbnail without overflowing', async () => {
      personMock.getById.mockResolvedValue({ ...personStub.primaryPerson, faceAssetId: faceStub.end.assetId });
      personMock.getFaceByIdWithAssets.mockResolvedValue(faceStub.end);
-      assetMock.getById.mockResolvedValue(assetStub.primaryImage);
+      assetMock.getByIds.mockResolvedValue([assetStub.primaryImage]);

-      await sut.handleGeneratePersonThumbnail({ id: personStub.primaryPerson.id });
+      await sut.handleGeneratePersonThumbnail({ id: 'person-1' });

-      expect(mediaMock.generateThumbnail).toHaveBeenCalledWith(
-        assetStub.primaryImage.originalPath,
-        'upload/thumbs/admin_id/pe/rs/person-1.jpeg',
-        {
-          format: 'jpeg',
-          size: 250,
-          quality: 80,
-          colorspace: Colorspace.P3,
-          crop: {
-            left: 591,
-            top: 591,
-            width: 408,
-            height: 408,
-          },
-        },
-      );
+      expect(mediaMock.crop).toHaveBeenCalledWith('/uploads/admin-id/thumbs/path.jpg', {
+        left: 297,
+        top: 297,
+        width: 202,
+        height: 202,
+      });
+      expect(mediaMock.resize).toHaveBeenCalledWith(croppedFace, 'upload/thumbs/admin_id/pe/rs/person-1.jpeg', {
+        format: 'jpeg',
+        size: 250,
+        quality: 80,
+        colorspace: Colorspace.P3,
+      });
    });
  });

@@ -488,23 +488,19 @@ export class PersonService {
      imageHeight,
    } = face;

-    const asset = await this.assetRepository.getById(assetId, { exifInfo: true });
-    if (!asset?.exifInfo?.exifImageHeight || !asset?.exifInfo?.exifImageWidth) {
+    const [asset] = await this.assetRepository.getByIds([assetId]);
+    if (!asset?.resizePath) {
      return false;
    }
-
    this.logger.verbose(`Cropping face for person: ${person.id}`);
    const thumbnailPath = StorageCore.getPersonThumbnailPath(person);
    this.storageCore.ensureFolders(thumbnailPath);

-    const widthScale = asset.exifInfo.exifImageWidth / imageWidth;
-    const heightScale = asset.exifInfo.exifImageHeight / imageHeight;
+    const halfWidth = (x2 - x1) / 2;
+    const halfHeight = (y2 - y1) / 2;

-    const halfWidth = (widthScale * (x2 - x1)) / 2;
-    const halfHeight = (heightScale * (y2 - y1)) / 2;
-
-    const middleX = Math.round(widthScale * x1 + halfWidth);
-    const middleY = Math.round(heightScale * y1 + halfHeight);
+    const middleX = Math.round(x1 + halfWidth);
+    const middleY = Math.round(y1 + halfHeight);

    // zoom out 10%
    const targetHalfSize = Math.floor(Math.max(halfWidth, halfHeight) * 1.1);
@@ -513,8 +509,8 @@ export class PersonService {
    const newHalfSize = Math.min(
      middleX - Math.max(0, middleX - targetHalfSize),
      middleY - Math.max(0, middleY - targetHalfSize),
-      Math.min(asset.exifInfo.exifImageWidth - 1, middleX + targetHalfSize) - middleX,
-      Math.min(asset.exifInfo.exifImageHeight - 1, middleY + targetHalfSize) - middleY,
+      Math.min(imageWidth - 1, middleX + targetHalfSize) - middleX,
+      Math.min(imageHeight - 1, middleY + targetHalfSize) - middleY,
    );

    const cropOptions: CropOptions = {
@@ -524,15 +520,15 @@ export class PersonService {
      height: newHalfSize * 2,
    };

+    const croppedOutput = await this.mediaRepository.crop(asset.resizePath, cropOptions);
    const thumbnailOptions = {
      format: 'jpeg',
      size: FACE_THUMBNAIL_SIZE,
      colorspace: thumbnail.colorspace,
      quality: thumbnail.quality,
-      crop: cropOptions,
    } as const;

-    await this.mediaRepository.generateThumbnail(asset.originalPath, thumbnailPath, thumbnailOptions);
+    await this.mediaRepository.resize(croppedOutput, thumbnailPath, thumbnailOptions);
    await this.repository.update({ id: person.id, thumbnailPath });

    return true;
@@ -3,19 +3,11 @@ import { Writable } from 'node:stream';

 export const IMediaRepository = 'IMediaRepository';

-export interface CropOptions {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-}
-
-export interface ThumbnailOptions {
+export interface ResizeOptions {
  size: number;
  format: 'webp' | 'jpeg';
  colorspace: string;
  quality: number;
-  crop?: CropOptions;
 }

 export interface VideoStreamInfo {
@@ -48,6 +40,13 @@ export interface VideoInfo {
  audioStreams: AudioStreamInfo[];
 }

+export interface CropOptions {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
 export interface TranscodeOptions {
  inputOptions: string[];
  outputOptions: string[];
@@ -71,7 +70,8 @@ export interface VideoCodecHWConfig extends VideoCodecSWConfig {

 export interface IMediaRepository {
  // image
-  generateThumbnail(input: string | Buffer, output: string, options: ThumbnailOptions): Promise<void>;
+  resize(input: string | Buffer, output: string, options: ResizeOptions): Promise<void>;
+  crop(input: string, options: CropOptions): Promise<Buffer>;
  generateThumbhash(imagePath: string): Promise<Buffer>;

  // video
@@ -92,12 +92,12 @@ export interface SearchStatusOptions {
 export interface SearchOneToOneRelationOptions {
  withExif?: boolean;
  withSmartInfo?: boolean;
+  withStacked?: boolean;
 }

 export interface SearchRelationOptions extends SearchOneToOneRelationOptions {
  withFaces?: boolean;
  withPeople?: boolean;
-  withStacked?: boolean;
 }

 export interface SearchDateOptions {
@@ -88,6 +88,8 @@ export class ServerConfigDto {
  loginPageMessage!: string;
  @ApiProperty({ type: 'integer' })
  trashDays!: number;
+  @ApiProperty({ type: 'integer' })
+  userDeleteDelay!: number;
  isInitialized!: boolean;
  isOnboarded!: boolean;
  externalDomain!: string;
@@ -196,6 +196,7 @@ describe(ServerInfoService.name, () => {
        loginPageMessage: '',
        oauthButtonText: 'Login with OAuth',
        trashDays: 30,
+        userDeleteDelay: 7,
        isInitialized: undefined,
        isOnboarded: false,
        externalDomain: '',
@@ -96,6 +96,7 @@ export class ServerInfoService {
    return {
      loginPageMessage: config.server.loginPageMessage,
      trashDays: config.trash.days,
+      userDeleteDelay: config.user.deleteDelay,
      oauthButtonText: config.oauth.buttonText,
      isInitialized,
      isOnboarded: onboarding?.isOnboarded || false,
@@ -0,0 +1,11 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { Type } from 'class-transformer';
+import { IsInt, Min } from 'class-validator';
+
+export class SystemConfigUserDto {
+  @IsInt()
+  @Min(1)
+  @Type(() => Number)
+  @ApiProperty({ type: 'integer' })
+  deleteDelay!: number;
+}
@@ -16,6 +16,7 @@ import { SystemConfigStorageTemplateDto } from './system-config-storage-template
 import { SystemConfigThemeDto } from './system-config-theme.dto';
 import { SystemConfigThumbnailDto } from './system-config-thumbnail.dto';
 import { SystemConfigTrashDto } from './system-config-trash.dto';
+import { SystemConfigUserDto } from './system-config-user.dto';

 export class SystemConfigDto implements SystemConfig {
  @Type(() => SystemConfigFFmpegDto)
@@ -92,6 +93,11 @@ export class SystemConfigDto implements SystemConfig {
  @ValidateNested()
  @IsObject()
  server!: SystemConfigServerDto;
+
+  @Type(() => SystemConfigUserDto)
+  @ValidateNested()
+  @IsObject()
+  user!: SystemConfigUserDto;
 }

 export function mapConfig(config: SystemConfig): SystemConfigDto {
@@ -140,6 +140,9 @@ export const defaults = Object.freeze<SystemConfig>({
    externalDomain: '',
    loginPageMessage: '',
  },
+  user: {
+    deleteDelay: 7,
+  },
 });

 export enum FeatureFlag {
@@ -23,6 +23,7 @@ const updates: SystemConfigEntity[] = [
  { key: SystemConfigKey.FFMPEG_CRF, value: 30 },
  { key: SystemConfigKey.OAUTH_AUTO_LAUNCH, value: true },
  { key: SystemConfigKey.TRASH_DAYS, value: 10 },
+  { key: SystemConfigKey.USER_DELETE_DELAY, value: 15 },
 ];

 const updatedConfig = Object.freeze<SystemConfig>({
@@ -140,6 +141,9 @@ const updatedConfig = Object.freeze<SystemConfig>({
      enabled: false,
    },
  },
+  user: {
+    deleteDelay: 15,
+  },
 });

 describe(SystemConfigService.name, () => {
@@ -199,6 +203,7 @@ describe(SystemConfigService.name, () => {
        { key: SystemConfigKey.FFMPEG_CRF, value: 30 },
        { key: SystemConfigKey.OAUTH_AUTO_LAUNCH, value: true },
        { key: SystemConfigKey.TRASH_DAYS, value: 10 },
+        { key: SystemConfigKey.USER_DELETE_DELAY, value: 15 },
      ]);

      await expect(sut.getConfig()).resolves.toEqual(updatedConfig);
@@ -206,7 +211,12 @@ describe(SystemConfigService.name, () => {

    it('should load the config from a file', async () => {
      process.env.IMMICH_CONFIG_FILE = 'immich-config.json';
-      const partialConfig = { ffmpeg: { crf: 30 }, oauth: { autoLaunch: true }, trash: { days: 10 } };
+      const partialConfig = {
+        ffmpeg: { crf: 30 },
+        oauth: { autoLaunch: true },
+        trash: { days: 10 },
+        user: { deleteDelay: 15 },
+      };
      configMock.readFile.mockResolvedValue(JSON.stringify(partialConfig));

      await expect(sut.getConfig()).resolves.toEqual(updatedConfig);
@@ -13,7 +13,9 @@ import {
  newJobRepositoryMock,
  newLibraryRepositoryMock,
  newStorageRepositoryMock,
+  newSystemConfigRepositoryMock,
  newUserRepositoryMock,
+  systemConfigStub,
  userStub,
 } from '@test';
 import { when } from 'jest-when';
@@ -26,6 +28,7 @@ import {
  IJobRepository,
  ILibraryRepository,
  IStorageRepository,
+  ISystemConfigRepository,
  IUserRepository,
 } from '../repositories';
 import { UpdateUserDto } from './dto/update-user.dto';
@@ -48,17 +51,28 @@ describe(UserService.name, () => {
  let jobMock: jest.Mocked<IJobRepository>;
  let libraryMock: jest.Mocked<ILibraryRepository>;
  let storageMock: jest.Mocked<IStorageRepository>;
+  let configMock: jest.Mocked<ISystemConfigRepository>;

  beforeEach(() => {
    albumMock = newAlbumRepositoryMock();
    assetMock = newAssetRepositoryMock();
+    configMock = newSystemConfigRepositoryMock();
    cryptoRepositoryMock = newCryptoRepositoryMock();
    jobMock = newJobRepositoryMock();
    libraryMock = newLibraryRepositoryMock();
    storageMock = newStorageRepositoryMock();
    userMock = newUserRepositoryMock();

-    sut = new UserService(albumMock, assetMock, cryptoRepositoryMock, jobMock, libraryMock, storageMock, userMock);
+    sut = new UserService(
+      albumMock,
+      assetMock,
+      cryptoRepositoryMock,
+      jobMock,
+      libraryMock,
+      storageMock,
+      configMock,
+      userMock,
+    );

    when(userMock.get).calledWith(authStub.admin.user.id, {}).mockResolvedValue(userStub.admin);
    when(userMock.get).calledWith(authStub.admin.user.id, { withDeleted: true }).mockResolvedValue(userStub.admin);
@@ -461,6 +475,22 @@ describe(UserService.name, () => {
      expect(jobMock.queueAll).toHaveBeenCalledWith([]);
    });

+    it('should skip users not ready for deletion - deleteDelay30', async () => {
+      configMock.load.mockResolvedValue(systemConfigStub.deleteDelay30);
+      userMock.getDeletedUsers.mockResolvedValue([
+        {},
+        { deletedAt: undefined },
+        { deletedAt: null },
+        { deletedAt: makeDeletedAt(15) },
+      ] as UserEntity[]);
+
+      await sut.handleUserDeleteCheck();
+
+      expect(userMock.getDeletedUsers).toHaveBeenCalled();
+      expect(jobMock.queue).not.toHaveBeenCalled();
+      expect(jobMock.queueAll).toHaveBeenCalledWith([]);
+    });
+
    it('should queue user ready for deletion', async () => {
      const user = { id: 'deleted-user', deletedAt: makeDeletedAt(10) };
      userMock.getDeletedUsers.mockResolvedValue([user] as UserEntity[]);
@@ -470,6 +500,16 @@ describe(UserService.name, () => {
      expect(userMock.getDeletedUsers).toHaveBeenCalled();
      expect(jobMock.queueAll).toHaveBeenCalledWith([{ name: JobName.USER_DELETION, data: { id: user.id } }]);
    });
+
+    it('should queue user ready for deletion - deleteDelay30', async () => {
+      const user = { id: 'deleted-user', deletedAt: makeDeletedAt(31) };
+      userMock.getDeletedUsers.mockResolvedValue([user] as UserEntity[]);
+
+      await sut.handleUserDeleteCheck();
+
+      expect(userMock.getDeletedUsers).toHaveBeenCalled();
+      expect(jobMock.queueAll).toHaveBeenCalledWith([{ name: JobName.USER_DELETION, data: { id: user.id } }]);
+    });
  });

  describe('handleUserDelete', () => {
@@ -13,16 +13,19 @@ import {
  IJobRepository,
  ILibraryRepository,
  IStorageRepository,
+  ISystemConfigRepository,
  IUserRepository,
  UserFindOptions,
 } from '../repositories';
 import { StorageCore, StorageFolder } from '../storage';
+import { SystemConfigCore } from '../system-config/system-config.core';
 import { CreateUserDto, UpdateUserDto } from './dto';
 import { CreateProfileImageResponseDto, UserResponseDto, mapCreateProfileImageResponse, mapUser } from './response-dto';
 import { UserCore } from './user.core';

@Injectable()
 export class UserService {
+  private configCore: SystemConfigCore;
  private logger = new ImmichLogger(UserService.name);
  private userCore: UserCore;

@@ -33,9 +36,11 @@ export class UserService {
    @Inject(IJobRepository) private jobRepository: IJobRepository,
    @Inject(ILibraryRepository) libraryRepository: ILibraryRepository,
    @Inject(IStorageRepository) private storageRepository: IStorageRepository,
+    @Inject(ISystemConfigRepository) configRepository: ISystemConfigRepository,
    @Inject(IUserRepository) private userRepository: IUserRepository,
  ) {
    this.userCore = UserCore.create(cryptoRepository, libraryRepository, userRepository);
+    this.configCore = SystemConfigCore.create(configRepository);
  }

  async getAll(auth: AuthDto, isAll: boolean): Promise<UserResponseDto[]> {
@@ -140,22 +145,26 @@ export class UserService {

  async handleUserDeleteCheck() {
    const users = await this.userRepository.getDeletedUsers();
+    const config = await this.configCore.getConfig();
    await this.jobRepository.queueAll(
      users.flatMap((user) =>
-        this.isReadyForDeletion(user) ? [{ name: JobName.USER_DELETION, data: { id: user.id } }] : [],
+        this.isReadyForDeletion(user, config.user.deleteDelay)
+          ? [{ name: JobName.USER_DELETION, data: { id: user.id } }]
+          : [],
      ),
    );
    return true;
  }

  async handleUserDelete({ id }: IEntityJob) {
+    const config = await this.configCore.getConfig();
    const user = await this.userRepository.get(id, { withDeleted: true });
    if (!user) {
      return false;
    }

    // just for extra protection here
-    if (!this.isReadyForDeletion(user)) {
+    if (!this.isReadyForDeletion(user, config.user.deleteDelay)) {
      this.logger.warn(`Skipped user that was not ready for deletion: id=${id}`);
      return false;
    }
@@ -184,12 +193,12 @@ export class UserService {
    return true;
  }

-  private isReadyForDeletion(user: UserEntity): boolean {
+  private isReadyForDeletion(user: UserEntity, deleteDelay: number): boolean {
    if (!user.deletedAt) {
      return false;
    }

-    return DateTime.now().minus({ days: 7 }) > DateTime.fromJSDate(user.deletedAt);
+    return DateTime.now().minus({ days: deleteDelay }) > DateTime.fromJSDate(user.deletedAt);
  }

  private async findOrFail(id: string, options: UserFindOptions) {
@@ -116,9 +116,17 @@ export class AssetService {
    await this.access.requirePermission(auth, Permission.TIMELINE_READ, userId);
    const assets = await this.assetRepository.getAllByFileCreationDate(
      { take: dto.take ?? 1000, skip: dto.skip },
-      { ...dto, userIds: [userId], withDeleted: true, orderDirection: 'DESC', withExif: true, isVisible: true },
+      {
+        ...dto,
+        userIds: [userId],
+        withDeleted: true,
+        orderDirection: 'DESC',
+        withExif: true,
+        isVisible: true,
+        withStacked: true,
+      },
    );
-    return assets.items.map((asset) => mapAsset(asset));
+    return assets.items.map((asset) => mapAsset(asset, { withStack: true }));
  }

  async serveThumbnail(auth: AuthDto, assetId: string, dto: GetAssetThumbnailDto): Promise<ImmichFileResponse> {
@@ -108,6 +108,8 @@ export enum SystemConfigKey {
  TRASH_DAYS = 'trash.days',

  THEME_CUSTOM_CSS = 'theme.customCss',
+
+  USER_DELETE_DELAY = 'user.deleteDelay',
 }

 export enum TranscodePolicy {
@@ -276,4 +278,7 @@ export interface SystemConfig {
    externalDomain: string;
    loginPageMessage: string;
  };
+  user: {
+    deleteDelay: number;
+  };
 }
@@ -2,7 +2,6 @@ import { AssetSearchBuilderOptions, Paginated, PaginationOptions } from '@app/do
 import _ from 'lodash';
 import {
  Between,
-  Brackets,
  FindManyOptions,
  IsNull,
  LessThanOrEqual,
@@ -229,12 +228,7 @@ export function searchAssetBuilder(
  }

  if (withStacked) {
-    builder
-      .leftJoinAndSelect(`${builder.alias}.stack`, 'stack')
-      .leftJoinAndSelect('stack.assets', 'stackedAssets')
-      .andWhere(
-        new Brackets((qb) => qb.where(`stack.primaryAssetId = ${builder.alias}.id`).orWhere('asset.stackId IS NULL')),
-      );
+    builder.leftJoinAndSelect(`${builder.alias}.stack`, 'stack').leftJoinAndSelect('stack.assets', 'stackedAssets');
  }

  const withDeleted = options.withDeleted ?? (trashedAfter !== undefined || trashedBefore !== undefined);
@@ -1,4 +1,11 @@
-import { IMediaRepository, ThumbnailOptions, TranscodeOptions, VideoInfo, handlePromiseError } from '@app/domain';
+import {
+  CropOptions,
+  IMediaRepository,
+  ResizeOptions,
+  TranscodeOptions,
+  VideoInfo,
+  handlePromiseError,
+} from '@app/domain';
 import { Colorspace } from '@app/infra/entities';
 import { ImmichLogger } from '@app/infra/logger';
 import ffmpeg, { FfprobeData } from 'fluent-ffmpeg';
@@ -14,16 +21,21 @@ sharp.cache({ files: 0 });
 export class MediaRepository implements IMediaRepository {
  private logger = new ImmichLogger(MediaRepository.name);

-  async generateThumbnail(input: string | Buffer, output: string, options: ThumbnailOptions): Promise<void> {
-    const pipeline = sharp(input, { failOn: 'none' }).pipelineColorspace(
-      options.colorspace === Colorspace.SRGB ? 'srgb' : 'rgb16',
-    );
+  crop(input: string | Buffer, options: CropOptions): Promise<Buffer> {
+    return sharp(input, { failOn: 'none' })
+      .pipelineColorspace('rgb16')
+      .extract({
+        left: options.left,
+        top: options.top,
+        width: options.width,
+        height: options.height,
+      })
+      .toBuffer();
+  }

-    if (options.crop) {
-      pipeline.extract(options.crop);
-    }
-
-    await pipeline
+  async resize(input: string | Buffer, output: string, options: ResizeOptions): Promise<void> {
+    await sharp(input, { failOn: 'none' })
+      .pipelineColorspace(options.colorspace === Colorspace.SRGB ? 'srgb' : 'rgb16')
      .resize(options.size, options.size, { fit: 'outside', withoutEnlargement: true })
      .rotate()
      .withIccProfile(options.colorspace)
@@ -83,10 +83,6 @@ FROM
          "asset"."isFavorite" = $3
          AND "asset"."isArchived" = $4
        )
-        AND (
-          "stack"."primaryAssetId" = "asset"."id"
-          OR "asset"."stackId" IS NULL
-        )
      )
      AND ("asset"."deletedAt" IS NULL)
  ) "distinctAlias"
@@ -184,10 +180,6 @@ WHERE
      "asset"."isFavorite" = $3
      AND "asset"."isArchived" = $4
    )
-    AND (
-      "stack"."primaryAssetId" = "asset"."id"
-      OR "asset"."stackId" IS NULL
-    )
    AND "asset"."ownerId" IN ($5)
  )
  AND ("asset"."deletedAt" IS NULL)
@@ -165,8 +165,6 @@ export const assetStub = {
    sidecarPath: null,
    exifInfo: {
      fileSizeInByte: 5000,
-      exifImageHeight: 1000,
-      exifImageWidth: 1000,
    } as ExifEntity,
    stack: assetStackStub('stack-1', [
      { id: 'primary-asset-id' } as AssetEntity,
@@ -212,8 +210,6 @@ export const assetStub = {
    sidecarPath: null,
    exifInfo: {
      fileSizeInByte: 5000,
-      exifImageHeight: 3840,
-      exifImageWidth: 2160,
    } as ExifEntity,
  }),

@@ -27,6 +27,7 @@ export const systemConfigStub: Record<string, SystemConfigEntity[]> = {
    { key: SystemConfigKey.OAUTH_AUTO_REGISTER, value: true },
    { key: SystemConfigKey.OAUTH_DEFAULT_STORAGE_QUOTA, value: 1 },
  ],
+  deleteDelay30: [{ key: SystemConfigKey.USER_DELETE_DELAY, value: 30 }],
  libraryWatchEnabled: [{ key: SystemConfigKey.LIBRARY_WATCH_ENABLED, value: true }],
  libraryWatchDisabled: [{ key: SystemConfigKey.LIBRARY_WATCH_ENABLED, value: false }],
 };
@@ -2,8 +2,9 @@ import { IMediaRepository } from '@app/domain';

 export const newMediaRepositoryMock = (): jest.Mocked<IMediaRepository> => {
  return {
-    generateThumbnail: jest.fn(),
    generateThumbhash: jest.fn(),
+    resize: jest.fn(),
+    crop: jest.fn(),
    probe: jest.fn(),
    transcode: jest.fn(),
  };
@@ -2,6 +2,7 @@
  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
  import { handleError } from '$lib/utils/handle-error';
  import { deleteUser, type UserResponseDto } from '@immich/sdk';
+  import { serverConfig } from '$lib/stores/server-config.store';
  import { createEventDispatcher } from 'svelte';

  export let user: UserResponseDto;
@@ -30,7 +31,7 @@
  <svelte:fragment slot="prompt">
    <div class="flex flex-col gap-4">
      <p>
-        <b>{user.name}</b>'s account and assets will be permanently deleted after 7 days.
+        <b>{user.name}</b>'s account and assets will be permanently deleted after {$serverConfig.userDeleteDelay} days.
      </p>
      <p>Are you sure you want to continue?</p>
    </div>
@@ -7,6 +7,7 @@
  } from '$lib/components/shared-components/notification/notification';
  import { handleError } from '$lib/utils/handle-error';
  import { getConfig, getConfigDefaults, updateConfig, type SystemConfigDto } from '@immich/sdk';
+  import { loadConfig } from '$lib/stores/server-config.store';
  import { cloneDeep } from 'lodash-es';
  import { createEventDispatcher, onMount } from 'svelte';
  import type { SettingsEventType } from './admin-settings';
@@ -35,6 +36,8 @@
      savedConfig = cloneDeep(newConfig);
      notificationController.show({ message: 'Settings saved', type: NotificationType.Info });

+      await loadConfig();
+
      dispatch('save');
    } catch (error) {
      handleError(error, 'Unable to save settings');
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { type SystemConfigDto } from '@immich/sdk';
+  import { isEqual } from 'lodash-es';
+  import { createEventDispatcher } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import type { SettingsEventType } from '../admin-settings';
+
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingInputField, {
+    SettingInputFieldType,
+  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+
+  export let savedConfig: SystemConfigDto;
+  export let defaultConfig: SystemConfigDto;
+  export let config: SystemConfigDto; // this is the config that is being edited
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher<SettingsEventType>();
+</script>
+
+<div>
+  <div in:fade={{ duration: 500 }}>
+    <form autocomplete="off" on:submit|preventDefault>
+      <div class="ml-4 mt-4 flex flex-col gap-4">
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          min={1}
+          label="DELETE DELAY"
+          desc="Number of days after removal to permanently delete a user's account and assets. The user deletion job runs at midnight to check for users that are ready for deletion. Changes to this setting will be evaluated at the next execution."
+          bind:value={config.user.deleteDelay}
+          isEdited={config.user.deleteDelay !== savedConfig.user.deleteDelay}
+        />
+      </div>
+
+      <div class="ml-4">
+        <SettingButtonsRow
+          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['user'] })}
+          on:save={() => dispatch('save', { user: config.user })}
+          showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+          {disabled}
+        />
+      </div>
+    </form>
+  </div>
+</div>
@@ -6,19 +6,15 @@
  }

  export let value: $$Props['value'] = undefined;
+
+  // Updating `value` directly causes the date input to reset itself or
+  // interfere with user changes.
  $: updatedValue = value;
 </script>

 <input
  {...$$restProps}
  {value}
-  on:input={(e) => {
-    updatedValue = e.currentTarget.value;
-
-    // Only update when value is not empty to prevent resetting the input
-    if (updatedValue !== '') {
-      value = updatedValue;
-    }
-  }}
+  on:input={(e) => (updatedValue = e.currentTarget.value)}
  on:blur={() => (value = updatedValue)}
 />
@@ -25,6 +25,7 @@ export const serverConfig = writable<ServerConfig>({
  oauthButtonText: '',
  loginPageMessage: '',
  trashDays: 30,
+  userDeleteDelay: 7,
  isInitialized: false,
  isOnboarded: false,
  externalDomain: '',
@@ -15,6 +15,7 @@
  import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
  import ThumbnailSettings from '$lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte';
  import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
+  import UserSettings from '$lib/components/admin-page/settings/user-settings/user-settings.svelte';
  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@@ -45,7 +46,8 @@
    | typeof ThumbnailSettings
    | typeof TrashSettings
    | typeof NewVersionCheckSettings
-    | typeof FFmpegSettings;
+    | typeof FFmpegSettings
+    | typeof UserSettings;

  const downloadConfig = () => {
    const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
@@ -134,6 +136,12 @@
      subtitle: 'Manage trash settings',
      key: 'trash',
    },
+    {
+      item: UserSettings,
+      title: 'User Settings',
+      subtitle: 'Manage user settings',
+      key: 'user-settings',
+    },
    {
      item: NewVersionCheckSettings,
      title: 'Version Check',
Author	SHA1	Message	Date
shenlong-tanwen	98c7347496	feat(mobile): auto play memories	2024-03-06 23:16:41 +05:30
Emanuel Bennici	ba12d92af3	feat(mobile): Add people list to exit bottom sheet (#6717 ) * feat(mobile): Define constants as 'const' * feat(mobile): Add people list to asset bottom sheet Add a list of people per asset in the exif bottom sheet, like on the web. Currently the list of people is loaded by making a request each time to the server. This is the MVP approach. In the future, the people information can be synced like we're doing with the assets. * styling --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>	2024-03-06 11:15:54 -05:00
Michel Heusschen	52a52f9f40	fix(web): date input on chrome (#7669 )	2024-03-06 05:47:15 -06:00
Sam Holton	9125999d1a	feat(server,web): make user deletion delay configurable (#7663 ) * feat(server,web): make user deletion delay configurable * alphabetical order * add min for user.deleteDelay in SettingInputField * make config.user.deleteDelay SettingInputField min consistent format * fix e2e test * update description on user delete delay	2024-03-05 23:45:40 -06:00
Alex	52dfe5fc92	fix(server): stack info in asset response for mobile (#7346 ) * fix(server): stack info in asset response for mobile * fix(server): getAllAssets - do not filter by stack ID * tet(server): GET /assets stack e2e * chore(server): fix checks * stack asset height --------- Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>	2024-03-06 05:44:56 +00:00
renovate[bot]	4c0bb2308c	fix(deps): update machine-learning (#7634 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-03-06 00:24:33 -05:00
martyfuhry	4ef4cc8016	refactor(mobile): Refactor video player page and gallery bottom app bar (#7625 ) * Fixes double video auto initialize issue and placeholder for video controller * WIP unravel stack index * Refactors video player controller format fixing video format Working format * Fixes hide on pause * Got hiding when tapped working * Hides controls when video starts and fixes placeholder for memory card Remove prints * Fixes show controls with microtask * fix LivePhotos not playing * removes unused function callbacks and moves wakelock * Update motion video * Fixing motion photo playing * Renames to isPlayingVideo * Fixes playing video on change * pause on dispose * fixing issues with sync between controls * Adds gallery app bar * Switches to memoized * Fixes pause * Revert "Switches to memoized" This reverts commit 234e6741dea05aa0b967dde746f1d625f15bed94. * uses stateful widget * Fixes double video play by using provider and new chewie video player wip format Fixes motion photos format --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>	2024-03-05 21:42:22 -06:00