Live Photo Viewer Resizes Video in Web UI and has Static Sections on Each Side on iPhone App

[doug9876]

The bug

When uploading live photos through the iphone app there are two issues:

1. When viewing the photo on the iphone in landscape mode on each side of the video there is a static image of part of the photo.

2. When viewing the same photo on the web interface the video is made narrower.

I've attached a screen recording of viewing the image (and video parts) on the iphone and on my desktop using chrome.

Interestingly when hovering on play icon in the top right the thumbnail of the live photo in the main photo gallery on the web UI the live photo video plays without any width change.

When viewing the same images in the native apple photos library the video parts display as expected, same when viewing through icloud photos on the web browser.

https://github.com/immich-app/immich/assets/11768229/371fdfba-a88b-485e-9f94-f50d70b207d3

https://github.com/immich-app/immich/assets/11768229/5e1d6354-74aa-4560-8eb1-faa6c45a4ff0

The OS that Immich Server is running on

Windows 11

Version of Immich Server

v1.99.0

Version of Immich Mobile App

v1.98.2

Platform with the issue

• [ ] Server
• [X] Web
• [X] Mobile

Your docker-compose.yml content

version: '3.8'

#
# WARNING: Make sure to use the docker-compose.yml of the current release:
#
# https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml
#
# The compose file on main may not be compatible with the latest release.
#

name: immich

services:
  immich-server:
    container_name: immich_server
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    command: ['start.sh', 'immich']
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - .env
    ports:
      - 2283:3001
    depends_on:
      - redis
      - database
    restart: always

  immich-microservices:
    container_name: immich_microservices
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    # extends: # uncomment this section for hardware acceleration - see https://immich.app/docs/features/hardware-transcoding
    #   file: hwaccel.transcoding.yml
    #   service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
    command: ['start.sh', 'microservices']
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - .env
    depends_on:
      - redis
      - database
    restart: always

  immich-machine-learning:
    container_name: immich_machine_learning
    # For hardware acceleration, add one of -[armnn, cuda, openvino] to the image tag.
    # Example tag: ${IMMICH_VERSION:-release}-cuda
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}
    # extends: # uncomment this section for hardware acceleration - see https://immich.app/docs/features/ml-hardware-acceleration
    #   file: hwaccel.ml.yml
    #   service: cpu # set to one of [armnn, cuda, openvino, openvino-wsl] for accelerated inference - use the `-wsl` version for WSL2 where applicable
    volumes:
      - model-cache:/cache
    env_file:
      - .env
    restart: always

  redis:
    container_name: immich_redis
    image: registry.hub.docker.com/library/redis:6.2-alpine@sha256:51d6c56749a4243096327e3fb964a48ed92254357108449cb6e23999c37773c5
    restart: always

  database:
    container_name: immich_postgres
    image: registry.hub.docker.com/tensorchord/pgvecto-rs:pg14-v0.2.0@sha256:90724186f0a3517cf6914295b5ab410db9ce23190a2d9d0b9dd6463e3fa298f0
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
    volumes:
      - pgdata:/var/lib/postgresql/data
    restart: always

volumes:
  pgdata:
  model-cache:

Your .env content

# You can find documentation for all the supported env variables at https://immich.app/docs/install/environment-variables

# The location where your uploaded files are stored
UPLOAD_LOCATION=./library

# The Immich version to use. You can pin this to a specific version like "v1.71.0"
IMMICH_VERSION=release

# Connection secret for postgres. You should change it to a random password
DB_PASSWORD=

# The values below this line do not need to be changed
###################################################################################
DB_HOSTNAME=immich_postgres
DB_USERNAME=
DB_DATABASE_NAME=immich

REDIS_HOSTNAME=immich_redis

Reproduction steps

1. Take live photo on iphone
2. Upload to Immich through iphone Immich app
3. View photo on Immich app on iphone and view on Immich web UI and, press the play icon in the top right to start the live photo section.

Additional information

No response

[aviv926]

Can you provide a sample file? I would like to test it.

[doug9876]

Thanks for the response. I've attached a zip file containing four files, IMG_0160.jpeg and IMG_0160.mov are files downloaded from iCloud photos not using "export as unmodified original" which then downloads as a jpeg rather than heic and preserves the aspect ratio of the photo, IMG_0163.heic and IMG_0163.mov used "export as unmodified original" which seems to change the aspect ratio by making the photo narrower.

The reason I included both is that when photos are uploaded through the Immich app on the iphone the aspect ratio is preserved.

Interestingly when these photos are added to Immich through the web UI (rather than iphone app) the live photo plays correctly on both the web UI and iphone app without being shrunk or the static parts on each side (regardless of if was "export as unmodified original" and aspect ration changes).

So to me it seems like the issue happens somewhere in the iphone upload.

I expect this also means that uploading the photos through the web won't replicate the issue, as it should work correctly.

Let me know if I can provide any further information testing.

Thanks!

Immich Live Photos Test.zip