[BUG] Chatting feature overlapping video player #1940

Closed
opened 2026-02-05 04:33:07 +03:00 by OVERLORD · 2 comments
Owner

Originally created by @Pheggas on GitHub (Jan 5, 2024).

The bug

Hello. I've noticed that after adding the "Say something" feature, it is overlapping some functions of video player shown in images below:
(Info side panel shown)
image

(info side panel hidden)
image

It is not major issue but it's not pleasing in any way.

The OS that Immich Server is running on

Ubuntu Server 22.04 LTS x86_64

Version of Immich Server

v1.94.4

Version of Immich Mobile App

v1.94

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

version: "3.8"

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:
      - stack.env
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=proxy"
      - "com.centurylinklabs.watchtower.enable=false"
      #- "traefik.http.routers.immich-local.rule=Host(`redacted`)"
      #- "traefik.http.routers.immich-local.entrypoints=web, websecure"
      #- "traefik.http.routers.immich-local.tls=true"
      #- "traefik.http.routers.immich-local.tls.certresolver=cloudflare"
      #- "traefik.http.routers.immich-local.tls.domains[0].main=redacted"
      #- "traefik.http.routers.immich-local.tls.domains[0].sans=redacted"
      - "traefik.http.routers.immich.entrypoints=web, websecure"
      - "traefik.http.routers.immich.rule=Host(`redacted`)"
      - "traefik.http.routers.immich.tls=true"
      - "traefik.http.routers.immich.tls.certresolver=production"
    depends_on:
      - redis
      - database
    networks:
      - proxy
      - immich
    ports:
      - 2283:8080
    restart: always

  immich-microservices:
    container_name: immich_microservices
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    command: [ "start.sh", "microservices" ]
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - stack.env
    labels:
      - "com.centurylinklabs.watchtower.enable=false"
    depends_on:
      - redis
      - database
    networks:
      - immich
    restart: always

  immich-machine-learning:
    container_name: immich_machine_learning
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - /home/docker/docker_immich/model-cache:/cache
    env_file:
      - stack.env
    labels:
      - "com.centurylinklabs.watchtower.enable=false"
    networks:
      - immich
    restart: always

  redis:
    container_name: immich_redis
    image: redis:6.2-alpine@sha256:60e49e22fa5706cd8df7d5e0bc50ee9bab7c608039fa653c4d961014237cca46
    labels:
      - "com.centurylinklabs.watchtower.enable=false"
    networks:
      - immich
    restart: always

  database:
    container_name: immich_postgres
    image: tensorchord/pgvecto-rs:pg14-v0.1.11
    env_file:
      - stack.env
    labels:
      - "com.centurylinklabs.watchtower.enable=false"
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
      PG_DATA: /var/lib/postgresql/data
    stdin_open: true # docker run -i
    tty: true        # docker run -t
    networks:
      - immich
    volumes:
      - /home/docker/docker_immich/pgdata:/var/lib/postgresql/data
    restart: always

networks:
  immich:
  proxy:
    external: true

Your .env content

DB_HOSTNAME=redacted
DB_USERNAME=redacted
DB_PASSWORD=redacted
DB_DATABASE_NAME=redacted
REDIS_HOSTNAME=redacted
UPLOAD_LOCATION=redacted
TYPESENSE_API_KEY=redacted
PUBLIC_LOGIN_PAGE_MESSAGE="Vitaj!"
IMMICH_WEB_URL=http://immich-web:3000
IMMICH_SERVER_URL=http://immich-server:3001
IMMICH_MACHINE_LEARNING_URL=http://immich-machine-learning:3003
TZ=redacted

Reproduction steps

1. Open immich Web UI
2. Play any video content

Additional information

No response

Originally created by @Pheggas on GitHub (Jan 5, 2024). ### The bug Hello. I've noticed that after adding the "Say something" feature, it is overlapping some functions of video player shown in images below: (Info side panel shown) ![image](https://github.com/immich-app/immich/assets/9994511/ca5d2a05-9688-44be-aa11-c0abb55eb930) (info side panel hidden) ![image](https://github.com/immich-app/immich/assets/9994511/daca77c5-52c4-4691-9940-2ed1db5c16c5) It is not major issue but it's not pleasing in any way. ### The OS that Immich Server is running on Ubuntu Server 22.04 LTS x86_64 ### Version of Immich Server v1.94.4 ### Version of Immich Mobile App v1.94 ### Platform with the issue - [X] Server - [ ] Web - [ ] Mobile ### Your docker-compose.yml content ```YAML version: "3.8" 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: - stack.env labels: - "traefik.enable=true" - "traefik.docker.network=proxy" - "com.centurylinklabs.watchtower.enable=false" #- "traefik.http.routers.immich-local.rule=Host(`redacted`)" #- "traefik.http.routers.immich-local.entrypoints=web, websecure" #- "traefik.http.routers.immich-local.tls=true" #- "traefik.http.routers.immich-local.tls.certresolver=cloudflare" #- "traefik.http.routers.immich-local.tls.domains[0].main=redacted" #- "traefik.http.routers.immich-local.tls.domains[0].sans=redacted" - "traefik.http.routers.immich.entrypoints=web, websecure" - "traefik.http.routers.immich.rule=Host(`redacted`)" - "traefik.http.routers.immich.tls=true" - "traefik.http.routers.immich.tls.certresolver=production" depends_on: - redis - database networks: - proxy - immich ports: - 2283:8080 restart: always immich-microservices: container_name: immich_microservices image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release} command: [ "start.sh", "microservices" ] volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload - /etc/localtime:/etc/localtime:ro env_file: - stack.env labels: - "com.centurylinklabs.watchtower.enable=false" depends_on: - redis - database networks: - immich restart: always immich-machine-learning: container_name: immich_machine_learning image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release} volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload - /home/docker/docker_immich/model-cache:/cache env_file: - stack.env labels: - "com.centurylinklabs.watchtower.enable=false" networks: - immich restart: always redis: container_name: immich_redis image: redis:6.2-alpine@sha256:60e49e22fa5706cd8df7d5e0bc50ee9bab7c608039fa653c4d961014237cca46 labels: - "com.centurylinklabs.watchtower.enable=false" networks: - immich restart: always database: container_name: immich_postgres image: tensorchord/pgvecto-rs:pg14-v0.1.11 env_file: - stack.env labels: - "com.centurylinklabs.watchtower.enable=false" environment: POSTGRES_PASSWORD: ${DB_PASSWORD} POSTGRES_USER: ${DB_USERNAME} POSTGRES_DB: ${DB_DATABASE_NAME} PG_DATA: /var/lib/postgresql/data stdin_open: true # docker run -i tty: true # docker run -t networks: - immich volumes: - /home/docker/docker_immich/pgdata:/var/lib/postgresql/data restart: always networks: immich: proxy: external: true ``` ### Your .env content ```Shell DB_HOSTNAME=redacted DB_USERNAME=redacted DB_PASSWORD=redacted DB_DATABASE_NAME=redacted REDIS_HOSTNAME=redacted UPLOAD_LOCATION=redacted TYPESENSE_API_KEY=redacted PUBLIC_LOGIN_PAGE_MESSAGE="Vitaj!" IMMICH_WEB_URL=http://immich-web:3000 IMMICH_SERVER_URL=http://immich-server:3001 IMMICH_MACHINE_LEARNING_URL=http://immich-machine-learning:3003 TZ=redacted ``` ### Reproduction steps ```bash 1. Open immich Web UI 2. Play any video content ``` ### Additional information _No response_
Author
Owner

@mgabor3141 commented on GitHub (Apr 13, 2024):

I think the only elegant solution to this is going to be making custom video player controls.

In the meantime we could center align the bubble:

Screenshot 2024-04-13 at 00 28 13

Or we could push it a few pixels higher:

Screenshot 2024-04-13 at 00 30 44

We could do these changes just for videos, at the cost of some consistency.

There's no way to detect when the default controls are shown, so we can't animate it out of the way, at least not cleanly.

The cleanest solution (other than the custom controls) would probably be to shrink the video player up from the bottom a little bit. This would have different effects on different screen sizes, but most of the time it would be an improvement. The following screenshots are of a standard 16:9 video on various browser viewport aspect ratios. Wide viewports are the only ones that have any sort of disadvantage, and even then the downside is minimal.

Screenshot 2024-04-13 at 00 36 42 Screenshot 2024-04-13 at 00 37 08 Screenshot 2024-04-13 at 00 36 52
@mgabor3141 commented on GitHub (Apr 13, 2024): I think the only elegant solution to this is going to be making custom video player controls. In the meantime we could center align the bubble: <img width="985" alt="Screenshot 2024-04-13 at 00 28 13" src="https://github.com/immich-app/immich/assets/9047995/5c2edff8-5fda-4f8f-9504-78b8b5c19eaf"> Or we could push it a few pixels higher: <img width="338" alt="Screenshot 2024-04-13 at 00 30 44" src="https://github.com/immich-app/immich/assets/9047995/e313a3c9-0f33-4537-9453-350e7a029d78"> We could do these changes just for videos, at the cost of some consistency. There's no way to detect when the default controls are shown, so we can't animate it out of the way, at least not cleanly. The cleanest solution (other than the custom controls) would probably be to shrink the video player up from the bottom a little bit. This would have different effects on different screen sizes, but most of the time it would be an improvement. The following screenshots are of a standard 16:9 video on various browser viewport aspect ratios. Wide viewports are the only ones that have any sort of disadvantage, and even then the downside is minimal. <img width="674" alt="Screenshot 2024-04-13 at 00 36 42" src="https://github.com/immich-app/immich/assets/9047995/4f2947a3-9793-4b69-97e3-02a621e278d0"> <img width="618" alt="Screenshot 2024-04-13 at 00 37 08" src="https://github.com/immich-app/immich/assets/9047995/572b8b60-8ab7-45ff-bcfd-9262d6cbdbb2"> <img width="413" alt="Screenshot 2024-04-13 at 00 36 52" src="https://github.com/immich-app/immich/assets/9047995/8a618e02-da48-4b3f-b165-8f190a5c959d">
Author
Owner

@Pheggas commented on GitHub (Apr 14, 2024):

Thank you for your time and work!

@Pheggas commented on GitHub (Apr 14, 2024): Thank you for your time and work!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#1940