fix(web): datetime display and add TZ into environment (#618)

* fix(web): timezone

* doc(): update readme.md

* feat(web): keep using UTC timezone in default

* chore(): update doc and remove debug code

* chore(): update readme.md

* Move timezone into to .env.example

* Run prettier check

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

README.md

@@ -147,6 +147,7 @@ wget -O .env https://raw.githubusercontent.com/immich-app/immich/main/docker/.en
 * Populate `UPLOAD_LOCATION` as prefered location for storing backup assets.
 * Populate a secret value for `JWT_SECRET`, you can use this command: `openssl rand -base64 128`
 * [Optional] Populate Mapbox value to use reverse geocoding.
+* [Optional] Populate `TZ` as your timezone, default is `Etc/UTC`.
 
 ### Step 3 - Start the containers
 

docker/.env.example

@@ -63,4 +63,12 @@ MAPBOX_KEY=
 # Custom message on the login page, should be written in HTML form.
 # For example PUBLIC_LOGIN_PAGE_MESSAGE="This is a demo instance of Immich.<br><br>Email: <i>demo@demo.de</i><br>Password: <i>demo</i>"
 
-PUBLIC_LOGIN_PAGE_MESSAGE=
+PUBLIC_LOGIN_PAGE_MESSAGE=
+
+# For correctly display your local time zone on the web, you can set the time zone here.
+# Should work fine by default value, however, in case of incorrect timezone in EXIF, this value
+# should be set to the correct timezone.
+# Command to get timezone:
+# - Linux: curl -s http://ip-api.com/json/ | grep -oP '(?<=timezone":")(.*?)(?=")' 
+
+# TZ=Etc/UTC

docker/docker-compose.yml

@@ -47,6 +47,8 @@ services:
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
     env_file:
       - .env
+    environment:
+      - PUBLIC_TZ=${TZ}
     restart: always
 
   redis:

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -7,6 +7,7 @@
 	import moment from 'moment';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { browser } from '$app/env';
+	import { env } from '$env/dynamic/public';
 	import { AssetResponseDto, AlbumResponseDto } from '@api';
 
 	type Leaflet = typeof import('leaflet');
@@ -30,6 +31,13 @@
 			if (asset.exifInfo?.latitude != null && asset.exifInfo?.longitude != null) {
 				await drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude);
 			}
+
+			// remove timezone when user not config PUBLIC_TZ var. Etc/UTC is used in default.
+			if (asset.exifInfo?.dateTimeOriginal && !env.PUBLIC_TZ) {
+				const dateTimeOriginal = asset.exifInfo.dateTimeOriginal;
+
+				asset.exifInfo.dateTimeOriginal = dateTimeOriginal.slice(0, dateTimeOriginal.length - 1);
+			}
 		}
 	});
 
@@ -126,11 +134,7 @@
 					<p>{moment(asset.exifInfo.dateTimeOriginal).format('MMM DD, YYYY')}</p>
 					<div class="flex gap-2 text-sm">
 						<p>
-							{moment(
-								asset.exifInfo.dateTimeOriginal
-									.toString()
-									.slice(0, asset.exifInfo.dateTimeOriginal.toString().length - 1)
-							).format('ddd, hh:mm A')}
+							{moment(asset.exifInfo.dateTimeOriginal).format('ddd, hh:mm A')}
 						</p>
 						<p>GMT{moment(asset.exifInfo.dateTimeOriginal).format('Z')}</p>
 					</div>