immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-07-25 14:00:45 +03:00
Code Issues 783 Packages Projects Releases 22 Wiki Activity

White text and icons are not visible on photo & video previews with light background #3476

New Issue
Closed
opened 2026-02-05 08:38:25 +03:00 by OVERLORD · 5 comments
OVERLORD commented 2026-02-05 08:38:25 +03:00
Owner
Copy Link

Originally created by @Maxobus on GitHub (Jun 12, 2024).

The bug

If the photo or video preview has image with light background then white text and icons are not visible.
When you hover over the preview, it is shaded and the text becomes visible.
Thus, scrolling timeline, it is impossible to determine whether the asset is a video or a photo unless you interact with it. Especially in the mobile app, where you can't hover.

SUGGESTION is to add shading glow effect or similar to icons and text.

image
image

The OS that Immich Server is running on

Ubuntu 22.04.4 LTS

Version of Immich Server

v1.106.2

Version of Immich Mobile App

v1.10.6.1 build.142

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

services:
  immich-server:
    container_name: immich_server
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}

    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - ${THUMBS_LOCATION}:/usr/src/app/upload/thumbs
      - /NAS/POISON/! BACKUPS !/Camera Upload:/mnt/media/camera_upload:ro
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - .env
    ports:
      - 2283:3001
    depends_on:
      - redis
      - database
    restart: no


  immich-machine-learning:
    container_name: immich_machine_learning
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}

    volumes:
      - model-cache:/cache
    env_file:
      - .env
    restart: no

  redis:
    container_name: immich_redis
    image: registry.hub.docker.com/library/redis:6.2-alpine@sha256:84882e87b54734154586e5f8abd4dce69fe7311315e2fc6d67c29614c8de2672
    restart: no

  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}
      POSTGRES_INITDB_ARGS: '--data-checksums'
    volumes:
      - ${DB_DATA_LOCATION}:/var/lib/postgresql/data
    restart: no
    command: ["postgres", "-c" ,"shared_preload_libraries=vectors.so", "-c", 'search_path="$$user", public, vectors', "-c", "logging_collector=on", "-c", "max_wal_size=2GB", "-c", "shared_buffers=512MB", "-c", "wal_compression=on"]

volumes:
  model-cache:

Your .env content

UPLOAD_LOCATION=/NAS/CLOUD/immich/upload
THUMBS_LOCATION=/mnt/CACHEDISK/immich/upload/thumbs
DB_DATA_LOCATION=/NAS/CLOUD/immich/postgres
IMMICH_VERSION=release
DB_PASSWORD=[...]
DB_USERNAME=[...]
DB_DATABASE_NAME=[...]

Reproduction steps

Relevant log output

No response

Additional information

No response

Originally created by @Maxobus on GitHub (Jun 12, 2024). ### The bug If the photo or video preview has image with light background then white text and icons are not visible. When you hover over the preview, it is shaded and the text becomes visible. Thus, scrolling timeline, it is impossible to determine whether the asset is a video or a photo unless you interact with it. Especially in the mobile app, where you can't hover. SUGGESTION is to add shading glow effect or similar to icons and text. ![image](https://github.com/immich-app/immich/assets/60475350/7fce7859-2ecc-4877-9310-f98f8238d03e) ![image](https://github.com/immich-app/immich/assets/60475350/f4be05b0-808f-46ab-a73e-76c43096a6ce) ### The OS that Immich Server is running on Ubuntu 22.04.4 LTS ### Version of Immich Server v1.106.2 ### Version of Immich Mobile App v1.10.6.1 build.142 ### Platform with the issue - [ ] Server - [X] Web - [X] Mobile ### Your docker-compose.yml content ```YAML services: immich-server: container_name: immich_server image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release} volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload - ${THUMBS_LOCATION}:/usr/src/app/upload/thumbs - /NAS/POISON/! BACKUPS !/Camera Upload:/mnt/media/camera_upload:ro - /etc/localtime:/etc/localtime:ro env_file: - .env ports: - 2283:3001 depends_on: - redis - database restart: no immich-machine-learning: container_name: immich_machine_learning image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release} volumes: - model-cache:/cache env_file: - .env restart: no redis: container_name: immich_redis image: registry.hub.docker.com/library/redis:6.2-alpine@sha256:84882e87b54734154586e5f8abd4dce69fe7311315e2fc6d67c29614c8de2672 restart: no 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} POSTGRES_INITDB_ARGS: '--data-checksums' volumes: - ${DB_DATA_LOCATION}:/var/lib/postgresql/data restart: no command: ["postgres", "-c" ,"shared_preload_libraries=vectors.so", "-c", 'search_path="$$user", public, vectors', "-c", "logging_collector=on", "-c", "max_wal_size=2GB", "-c", "shared_buffers=512MB", "-c", "wal_compression=on"] volumes: model-cache: ``` ### Your .env content ```YAML UPLOAD_LOCATION=/NAS/CLOUD/immich/upload THUMBS_LOCATION=/mnt/CACHEDISK/immich/upload/thumbs DB_DATA_LOCATION=/NAS/CLOUD/immich/postgres IMMICH_VERSION=release DB_PASSWORD=[...] DB_USERNAME=[...] DB_DATABASE_NAME=[...] ``` ### Reproduction steps ### Relevant log output _No response_ ### Additional information _No response_
OVERLORD added the good first issue🖥️web labels 2026-02-05 08:38:25 +03:00
OVERLORD commented 2026-02-05 08:38:33 +03:00
Author
Owner
Copy Link

@aten2005 commented on GitHub (Jul 21, 2024):

Can I work on this?

@aten2005 commented on GitHub (Jul 21, 2024): Can I work on this?
OVERLORD commented 2026-02-05 08:38:36 +03:00
Author
Owner
Copy Link

@iswaterbad commented on GitHub (Jul 24, 2024):

I think there is the same issue with the upload status icon on mobile. (Especially for screenshots with a white background)

@iswaterbad commented on GitHub (Jul 24, 2024): I think there is the same issue with the upload status icon on mobile. (Especially for screenshots with a white background)
OVERLORD commented 2026-02-05 08:38:42 +03:00
Author
Owner
Copy Link

@Pranav-8bit commented on GitHub (Sep 21, 2024):

Hi, Can I work on this?

@Pranav-8bit commented on GitHub (Sep 21, 2024): Hi, Can I work on this?
OVERLORD commented 2026-02-05 08:38:45 +03:00
Author
Owner
Copy Link

@imakida commented on GitHub (Jan 18, 2025):

Would something like this work?

This is very similar to the gradient in the AssetViewerNavBar component.

Before

Image

After

Image

This is based on the suggestion to use a scrim here.

Also, the App-Which-Must-Not-Be-Named does something similar. I took an over exposed video of a sheet of paper and there's an obvious scrim over the thumbnail to make the white text visible.

Screenshot_20250117-154148.png

@imakida commented on GitHub (Jan 18, 2025): Would something like this work? This is very similar to the gradient in the `AssetViewerNavBar` component. ### Before ![Image](https://github.com/user-attachments/assets/7346a847-b6bb-48a2-85f6-ee7c178fac81) ### After ![Image](https://github.com/user-attachments/assets/557adc1e-d73d-46c2-afe7-db82132ab6f0) This is based on the suggestion to use a scrim [here](https://blog.iamsuleiman.com/techniques-to-display-text-overlay-background-images/). Also, the **App-Which-Must-Not-Be-Named** does something similar. I took an over exposed video of a sheet of paper and there's an obvious scrim over the thumbnail to make the white text visible. ![Screenshot_20250117-154148.png](https://github.com/user-attachments/assets/e7e0df45-3a93-4e3b-b983-55caf5ecd5c1)
OVERLORD commented 2026-02-05 08:38:46 +03:00
Author
Owner
Copy Link

@YarosMallorca commented on GitHub (Mar 3, 2025):

@imakida Looks good! Could you do a PR for this?

@YarosMallorca commented on GitHub (Mar 3, 2025): @imakida Looks good! Could you do a PR for this?
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 good first issue 🖥️web
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#3476
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?