Merge pull request #467 from rgregg/rgregg-clockdateformat

3rob3 · web-flow · commit ee5b302fe77f · 2025-09-24T07:53:18.000-04:00
Add ClockDateFormat string to format the date on the clock
diff --git a/ImmichFrame.Core/Interfaces/IServerSettings.cs b/ImmichFrame.Core/Interfaces/IServerSettings.cs
@@ -37,6 +37,7 @@ public interface IGeneralSettings
         public int RenewImagesDuration { get; }
         public bool ShowClock { get; }
         public string? ClockFormat { get; }
+        public string? ClockDateFormat { get; }
         public bool ShowProgressBar { get; }
         public bool ShowPhotoDate { get; }
         public string? PhotoDateFormat { get; }
diff --git a/ImmichFrame.WebApi.Tests/Controllers/AssetControllerTests.cs b/ImmichFrame.WebApi.Tests/Controllers/AssetControllerTests.cs
@@ -48,6 +48,7 @@ public void Setup()
                             WeatherIconUrl = "https://openweathermap.org/img/wn/{IconId}.png",
                             ShowClock = true,
                             ClockFormat = "HH:mm",
+                            ClockDateFormat = "eee, MMM d",
                             Language = "en",
                             PhotoDateFormat = "MM/dd/yyyy", // Crucial for the NRE
                             ImageLocationFormat = "City,State,Country",
diff --git a/ImmichFrame.WebApi.Tests/Resources/TestV1.json b/ImmichFrame.WebApi.Tests/Resources/TestV1.json
@@ -32,6 +32,7 @@
     "RefreshAlbumPeopleInterval": 7,
     "ShowClock": true,
     "ClockFormat": "ClockFormat_TEST",
+    "ClockDateFormat": "ClockDateFormat_TEST",
     "ShowProgressBar": true,
     "ShowPhotoDate": true,
     "PhotoDateFormat": "PhotoDateFormat_TEST",
diff --git a/ImmichFrame.WebApi.Tests/Resources/TestV2.json b/ImmichFrame.WebApi.Tests/Resources/TestV2.json
@@ -18,6 +18,7 @@
     "TransitionDuration": 7.7,
     "ShowClock": true,
     "ClockFormat": "ClockFormat_TEST",
+    "ClockDateFormat": "ClockDateFormat_TEST",
     "ShowProgressBar": true,
     "ShowPhotoDate": true,
     "ShowImageDesc": true,
diff --git a/ImmichFrame.WebApi.Tests/Resources/TestV2.yml b/ImmichFrame.WebApi.Tests/Resources/TestV2.yml
@@ -17,6 +17,7 @@ General:
   TransitionDuration: 7.7
   ShowClock: true
   ClockFormat: ClockFormat_TEST
+  ClockDateFormat: ClockDateFormat_TEST
   ShowProgressBar: true
   ShowPhotoDate: true
   ShowImageDesc: true
diff --git a/ImmichFrame.WebApi/Helpers/Config/ServerSettingsV1.cs b/ImmichFrame.WebApi/Helpers/Config/ServerSettingsV1.cs
@@ -33,6 +33,7 @@ public class ServerSettingsV1 : IConfigSettable
     public double TransitionDuration { get; set; } = 1;
     public bool ShowClock { get; set; } = true;
     public string? ClockFormat { get; set; } = "hh:mm";
+    public string? ClockDateFormat { get; set; } = "eee, MMM d";
     public bool ShowProgressBar { get; set; } = true;
     public bool ShowPhotoDate { get; set; } = true;
     public string? PhotoDateFormat { get; set; } = "MM/dd/yyyy";
@@ -94,6 +95,7 @@ class GeneralSettingsV1Adapter(ServerSettingsV1 _delegate) : IGeneralSettings
         public int RenewImagesDuration => _delegate.RenewImagesDuration;
         public bool ShowClock => _delegate.ShowClock;
         public string? ClockFormat => _delegate.ClockFormat;
+        public string? ClockDateFormat => _delegate.ClockDateFormat;
         public bool ShowProgressBar => _delegate.ShowProgressBar;
         public bool ShowPhotoDate => _delegate.ShowPhotoDate;
         public string? PhotoDateFormat => _delegate.PhotoDateFormat;
diff --git a/ImmichFrame.WebApi/Models/ClientSettingsDto.cs b/ImmichFrame.WebApi/Models/ClientSettingsDto.cs
@@ -10,6 +10,7 @@ public class ClientSettingsDto
     public int RenewImagesDuration { get; set; }
     public bool ShowClock { get; set; }
     public string? ClockFormat { get; set; }
+    public string? ClockDateFormat { get; set; }
     public bool ShowPhotoDate { get; set; }
     public bool ShowProgressBar { get; set; }
     public string? PhotoDateFormat { get; set; }
@@ -39,6 +40,7 @@ public static ClientSettingsDto FromGeneralSettings(IGeneralSettings generalSett
         dto.RenewImagesDuration = generalSettings.RenewImagesDuration;
         dto.ShowClock = generalSettings.ShowClock;
         dto.ClockFormat = generalSettings.ClockFormat;
+        dto.ClockDateFormat = generalSettings.ClockDateFormat;
         dto.ShowPhotoDate = generalSettings.ShowPhotoDate;
         dto.ShowProgressBar = generalSettings.ShowProgressBar;
         dto.PhotoDateFormat = generalSettings.PhotoDateFormat;
diff --git a/ImmichFrame.WebApi/Models/ServerSettings.cs b/ImmichFrame.WebApi/Models/ServerSettings.cs
@@ -35,6 +35,7 @@ public class GeneralSettings : IGeneralSettings, IConfigSettable
     public double TransitionDuration { get; set; } = 1;
     public bool ShowClock { get; set; } = true;
     public string? ClockFormat { get; set; } = "hh:mm";
+    public string? ClockDateFormat { get; set; } = "eee, MMM d";
     public bool ShowProgressBar { get; set; } = true;
     public bool ShowPhotoDate { get; set; } = true;
     public bool ShowImageDesc { get; set; } = true;
diff --git a/Install_Web.md b/Install_Web.md
@@ -61,6 +61,7 @@ services:
       # RefreshAlbumPeopleInterval: "12"
       # ShowClock: "true"
       # ClockFormat: "hh:mm"
+      # ClockDateFormat: "eee, MMM d"
       # ShowProgressBar: "true"
       # ShowPhotoDate: "true"
       # PhotoDateFormat: "yyyy-MM-dd"
diff --git a/docker/Settings.example.json b/docker/Settings.example.json
@@ -18,6 +18,7 @@
     "TransitionDuration": 2,
     "ShowClock": true,
     "ClockFormat": "hh:mm",
+    "ClockDateFormat": "eee, MMM d",
     "ShowProgressBar": true,
     "ShowPhotoDate": true,
     "ShowImageDesc": true,
diff --git a/docker/Settings.example.yml b/docker/Settings.example.yml
@@ -16,6 +16,7 @@ General:
   TransitionDuration: 2
   ShowClock: true
   ClockFormat: 'hh:mm'
+  ClockDateFormat: 'eee, MMM d'
   ShowProgressBar: true
   ShowPhotoDate: true
   ShowImageDesc: true
diff --git a/docker/example.env b/docker/example.env
@@ -22,6 +22,7 @@ ApiKey=KEY
 # RefreshAlbumPeopleInterval=12
 # ShowClock=true
 # ClockFormat=hh:mm
+# ClockDateFormat=eee, MMM d
 # ShowProgressBar=true
 # ShowPhotoDate=true
 # PhotoDateFormat=yyyy-MM-dd
diff --git a/docs/docs/getting-started/configuration.md b/docs/docs/getting-started/configuration.md
@@ -49,6 +49,8 @@ General:
   ShowClock: true  # boolean
   # Time format
   ClockFormat: 'hh:mm'  # string
+  # Date format for the clock
+  ClockDateFormat: 'eee, MMM d' # string
   # Displays the progress bar.
   ShowProgressBar: true  # boolean
   # Displays the date of the current image.
diff --git a/docs/docs/getting-started/configurationV1.md b/docs/docs/getting-started/configurationV1.md
@@ -37,6 +37,7 @@ sidebar_position: 4
 | [Weather](#weather)     | WeatherIconUrl             | string                              | https://openweathermap.org/img/wn/{IconId}.png | Sets the URL for an icon to display the weather conditions.                                                 |
 | Clock                   | ShowClock                  | boolean                             | true                 | Displays the current time.                                                                                                            |
 | Clock                   | ClockFormat                | string                              | hh:mm                | Time format.                                                                                                                          |
+| Clock                   | ClockDateFormat            | string                              | eee, MMM d           | Date format for the clock.                                                                                                            |
 | [Calendar](#calendar)   | Webcalendars               | string[]                            | []                   | A list of webcalendar URIs in the .ics format. e.g. https://calendar.google.com/calendar/ical/XXXXXX/public/basic.ics                 |
 | [Metadata](#metadata)   | ShowImageDesc              | boolean                             | true                 | Displays the description of the current image.                                                                                        |
 | [Metadata](#metadata)   | ShowPeopleDesc             | boolean                             | true                 | Displays a comma separated list of names of all the people that are assigned in immich.                                               |
diff --git a/immichFrame.Web/src/lib/components/elements/appointments.svelte b/immichFrame.Web/src/lib/components/elements/appointments.svelte
@@ -13,8 +13,8 @@
 		let sameDay = startDate.getDate() == endDate.getDate();
 
 		let clockFormat = $configStore.clockFormat ?? 'HH:mm';
-		let photoDateFormat = $configStore.photoDateFormat ?? 'dd.MM.yyyy';
-		let fullFormat = photoDateFormat + ' ' + clockFormat;
+		let clockDateFormat = $configStore.clockDateFormat ?? 'eee, MMM d';
+		let fullFormat = clockDateFormat + ' ' + clockFormat;
 
 		if (sameDay) {
 			return format(startDate, clockFormat) + ' - ' + format(endDate, clockFormat);
diff --git a/immichFrame.Web/src/lib/components/elements/clock.svelte b/immichFrame.Web/src/lib/components/elements/clock.svelte
@@ -17,7 +17,7 @@
 	let now = $state(new Date());
 
 	const formattedDate = $derived(() =>
-		format(now, $configStore.photoDateFormat ?? 'dd.MM.yyyy', {
+		format(now, $configStore.clockDateFormat ?? 'eee, MMM d', {
 			locale: localeToUse()
 		})
 	);
diff --git a/immichFrame.Web/src/lib/immichFrameApi.ts b/immichFrame.Web/src/lib/immichFrameApi.ts
@@ -192,6 +192,7 @@ export type ClientSettingsDto = {
     renewImagesDuration?: number;
     showClock?: boolean;
     clockFormat?: string | null;
+    clockDateFormat?: string | null;
     showPhotoDate?: boolean;
     showProgressBar?: boolean;
     photoDateFormat?: string | null;
