immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-02-24 19:08:04 +03:00
Code Issues 783 Packages Projects Releases 12 Wiki Activity

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

New Issue
Closed
opened 2026-02-04 22:51:39 +03:00 by OVERLORD · 4 comments
OVERLORD commented 2026-02-04 22:51:39 +03:00
Owner
Copy Link

Originally created by @JVT038 on GitHub (Apr 21, 2023).

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
  • 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.

Originally created by @JVT038 on GitHub (Apr 21, 2023). ### 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 ```YAML 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 ```Shell 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 ```bash 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.
OVERLORD commented 2026-02-04 22:51:49 +03:00
Author
Owner
Copy Link

@shrung commented on GitHub (Apr 30, 2023):

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!

@shrung commented on GitHub (Apr 30, 2023): 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!
OVERLORD commented 2026-02-04 22:51:54 +03:00
Author
Owner
Copy Link

@Pheggas commented on GitHub (Jun 18, 2023):

Sample screenshot would be very helpful.

@Pheggas commented on GitHub (Jun 18, 2023): Sample screenshot would be very helpful.
OVERLORD commented 2026-02-04 22:51:59 +03:00
Author
Owner
Copy Link

@shrung commented on GitHub (Jun 19, 2023):

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

Screenshot_20230618-184514
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:

IMG_20230618_183949

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!

@shrung commented on GitHub (Jun 19, 2023): Here is a screenshot from a pixel 3, running the current version of the app behavior is slightly changed from the previous post: ![Screenshot_20230618-184514](https://github.com/immich-app/immich/assets/18352948/e86bc8f5-f660-4abd-b53f-21330977cd92) 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: ![IMG_20230618_183949](https://github.com/immich-app/immich/assets/18352948/2a42a71c-a266-4dbd-a1dc-ffbe0618c4eb) 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!
OVERLORD commented 2026-02-04 22:52:06 +03:00
Author
Owner
Copy Link

@JVT038 commented on GitHub (Jun 26, 2023):

Fixed by #2960

@JVT038 commented on GitHub (Jun 26, 2023): Fixed by #2960
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
changelog:enhancement
changelog:security
changelog:skip
changelog:translation
cli
date-time
dependencies
documentation
external-library
format
good first issue
mobile-beta
mobile-beta
mobile-beta
needs-answer
nice to have
pull-request
Mirrored from GitHub Pull Request
 sharing
tech-debt
📱mobile
🖥️web
🗄️server
🧠machine-learning
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#826
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?