[BUG] Chatting feature overlapping video player

[Pheggas]

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)

(info side panel hidden)

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

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

[mgabor3141]

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:

Or we could push it a few pixels higher:

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.

[Pheggas]

Thank you for your time and work!