From 6abc733763c6df42bc1401fa93978a9cb71a459a Mon Sep 17 00:00:00 2001
From: Thanh Pham <pano.tjoan@yahoo.com>
Date: Tue, 13 Sep 2022 02:40:18 +0700
Subject: [PATCH] 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                                          |  1 +
 docker/.env.example                                | 10 +++++++++-
 docker/docker-compose.yml                          |  2 ++
 .../components/asset-viewer/detail-panel.svelte    | 14 +++++++++-----
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 8788b3ee02..f9c73693c2 100644
--- a/README.md
+++ b/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
 
diff --git a/docker/.env.example b/docker/.env.example
index be70ce5d11..a88dcb2059 100644
--- a/docker/.env.example
+++ b/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=
\ No newline at end of file
+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
\ No newline at end of file
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index d9863ad236..725331dcfc 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -47,6 +47,8 @@ services:
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
     env_file:
       - .env
+    environment:
+      - PUBLIC_TZ=${TZ}
     restart: always
 
   redis:
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 47debc6b32..dbf102c367 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/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>