[BUG] Video playback bar overlaps with buttons on the bottom.

[JVT038]

The bug

When playing a video on mobile, I can't fast-forward or rewind. This is because there are three new buttons on the bottom (share, archive and delete) that are overlapping with the playback timeline. When I try to click on the video timeline to rewind or fast-forward, I click on one of the three buttons on the bottom.

The OS that Immich Server is running on

Synology DSM 7.2

Version of Immich Server

v1.54.0

Version of Immich Mobile App

v1.54.0 build.77

Platform with the issue

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

Your docker-compose.yml content

version: "3.8"

networks:
  traefik_proxy:
    external:
      name: traefik_proxy

services:
  immich-server:
    image: ghcr.io/immich-app/immich-server:release
    entrypoint: ["/bin/sh", "./start-server.sh"]
    networks:
      - traefik_proxy
      - default
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - sockets:/sockets
    env_file:
      - .env
    environment:
      - NODE_ENV=production
    depends_on:
      - redis
      - database
      - typesense
    restart: always
    labels:
      traefik.enable: "true"
      traefik.docker.network: traefik_proxy
      traefik.http.services.immich-api-svc.loadbalancer.server.port: "3001"
      traefik.http.routers.immich-api-rtr.rule: "Host(`immich.$DOMAINNAME`) && Pathprefix(`/api`)"
      traefik.http.routers.immich-api-rtr.priority: 20
      traefik.http.middlewares.immich-api-strip.stripprefix.prefixes: "/api"
      traefik.http.routers.immich-api-rtr.middlewares: immich-api-strip,chain-basic@file
      traefik.http.routers.immich-api-rtr.service: immich-api-svc
      traefik.http.routers.immich-api-rtr.tls: true
      traefik.http.routers.immich-api-rtr.tls.certresolver: dns-cloudflare
      traefik.http.routers.immich-api-rtr.entrypoints: https

  immich-microservices:
    image: ghcr.io/immich-app/immich-server:release
    entrypoint: ["/bin/sh", "./start-microservices.sh"]
    networks:
      - default
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - sockets:/sockets
    env_file:
      - .env
    environment:
      - NODE_ENV=production
    depends_on:
      - redis
      - database
      - typesense
    restart: always

  immich-machine-learning:
    build:
      context: $DOCKERDIR/immich/immich-ml
      dockerfile: Dockerfile
    container_name: immich_machine_learning
    command: [ "python", "src/main.py" ]
    networks:
      - default
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - model-cache:/cache
    env_file:
      - .env
    environment:
      - NODE_ENV=production
    restart: always 

  immich-web:
    image: ghcr.io/immich-app/immich-web:release
    entrypoint: ["/bin/sh", "./entrypoint.sh"]
    networks:
      - default
      - traefik_proxy
    env_file:
      - .env
    restart: always
    labels:
      traefik.enable: "true"
      traefik.docker.network: traefik_proxy
      traefik.http.services.immich-svc.loadbalancer.server.port: "3000"
      traefik.http.routers.immich-rtr.rule: "Host(`immich.$DOMAINNAME`)"
      traefik.http.routers.immich-rtr.priority: 10
      traefik.http.routers.immich-rtr.service: immich-svc
      traefik.http.routers.immich-rtr.middlewares: chain-basic@file
      traefik.http.routers.immich-rtr.tls: true
      traefik.http.routers.immich-rtr.tls.certresolver: dns-cloudflare
      traefik.http.routers.immich-rtr.entrypoints: https

  redis:
    container_name: immich_redis
    image: redis:6.2
    restart: always
    networks:
      - default
    command: redis-server /etc/redis.conf
    volumes:
      - sockets:/sockets
      - $DOCKERDIR/immich/redis.conf:/etc/redis.conf
      - /etc/TZ:/etc/timezone:ro
      - $DOCKERDIR/immich/redisdb:/db

  database:
    container_name: immich_postgres
    image: postgres:14-bullseye
    user: 1026:100
    command: postgres -c unix_socket_directories='/var/run/postgresql/,/sockets/'
    env_file:
      - .env
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
      PG_DATA: /var/lib/postgresql/data
      PGPORT: ${DB_PORT}
    volumes:
      - $DOCKERDIR/immich/pgdata:/var/lib/postgresql/data
      - sockets:/sockets
    restart: always

  typesense:
    container_name: immich_typesense
    image: typesense/typesense:0.24.0
    environment:
      - TYPESENSE_API_KEY=${TYPESENSE_API_KEY}
      - TYPESENSE_DATA_DIR=/data
    logging:
      driver: none
    volumes:
      - $DOCKERDIR/immich/typesense:/data

volumes:
  sockets:
    external: true
  model-cache:

Your .env content

DB_HOSTNAME=/sockets
DB_USERNAME=postgres
DB_PASSWORD=postgres
DB_DATABASE_NAME=immich
DB_PORT=5433
REDIS_PASSWORD="secret"
REDIS_SOCKET=/sockets/immich_redis.sock
UPLOAD_LOCATION=/volume1/upload
JWT_SECRET=secret
REVERSE_GEOCODING_PRECISION=3
TYPESENSE_API_KEY=secret

Reproduction steps

1. Go to Immich
2. Play a video
3. Try to fast-forward or rewind the video
4. See error

Additional information

Additionally, when loading a video, the loading spinner is at the bottom of the video, but I don't think that's a big issue.

[shrung]

I have this also, some additional details from me:

Issue present on Pixel 3 and Pixel 6. There is a Fullscreen icon visible just under the playback bar, selecting this prompts to delete, even though the bottom 3 buttons (share archive delete) aren't currently visible!

I don't see any FF or RW buttons in the player, only play/pause in the center. If I use 2 fingers I can't zoom, but can slide the player's location around. In doing so, I can see a hamburger button (vertical ellipsis?) at the top right, but cannot select it. On the pixel 3, this button is fully cropped off the screen when the video is playing, on Pixel 6 it is halfway cropped off the screen. It can't be pressed on either phone.

Hope this is helpful, I am happy to send screenshots or screen recordings if needed, thanks!

[Pheggas]

Sample screenshot would be very helpful.

[shrung]

Here is a screenshot from a pixel 3, running the current version of the app behavior is slightly changed from the previous post:

Notice the large black space between the video player and the navigation bar. The video extends upward off the top of the screen, and if I two finger slide, I can see the top and the vertical ellipsis button in the top right corner, with some quick clicking I can activate that button before it disappears again but it's like 1 out of 10 tries (I get a playback speed option in that case).

The Fullscreen and scrubbing bar are not able to be interacted with, but attempting to click Fullscreen is no longer asking me if I'm sure I want to delete the video, so that's good!

Below is a screenshot from the pixel 6:

In this case. You can see the ellipsis in the top right (above the battery percentage) but it can't be interacted with. The lower bar with delete and such is present even when playing the video (the pixel 3 only shows that bar when paused). Again, the scrubbing and Fullscreen buttons are not operable.

Let me know if any other details would help, thanks!

[JVT038]

Fixed by #2960