add adjustable anchor points

ImmichFrame.WebApi/Models/WebClientSettings.cs

@@ -14,12 +14,15 @@ public class WebClientSettings : IWebClientSettings
         public int RenewImagesDuration { get; set; } = 20;
         public bool ShowClock { get; set; } = true;
         public string? ClockFormat { get; set; } = "hh:mm";
+        public string? ClockPosition { get; set; } = "bottom-0 left-0";
         public bool ShowPhotoDate { get; set; } = true;
         public string? PhotoDateFormat { get; set; } = "MM/dd/yyyy";
         public bool ShowImageDesc { get; set; } = true;
         public bool ShowPeopleDesc { get; set; } = true;
         public bool ShowImageLocation { get; set; } = true;
         public string? ImageLocationFormat { get; set; } = "City,State,Country";
+        public string? ImageInfoPosition { get; set; } = "bottom-0 right-0";
+        public string? WebCalendarPosition { get; set; } = "top-0 right-0";
         public string? PrimaryColor { get; set; }
         public string? SecondaryColor { get; set; }
         public string Style { get; set; } = "none";

docker/Settings.example.json

@@ -25,15 +25,18 @@
   "Webcalendars": [
     ""
   ],
+  "WebCalendarPosition": "top-0 right-0",
   "RefreshAlbumPeopleInterval": 12,
   "ShowClock": true,
   "ClockFormat": "HH:mm:ss",
+  "ClockPosition": "bottom-0 left-0",
   "ShowPhotoDate": true,
   "PhotoDateFormat": "yyyy-MM-dd",
   "ShowImageDesc": true,
   "ShowPeopleDesc": true,
   "ShowImageLocation": true,
   "ImageLocationFormat": "City,State,Country",
+  "ImageInfoPosition": "bottom-0 right-0",
   "PrimaryColor": "#FF5733",
   "SecondaryColor": "#000000",
   "Style": "none",

docker/example.env

@@ -14,15 +14,18 @@ ExcludedAlbums=ALBUM3,ALBUM4
 People=PERSON1,PERSON2
 ExcludedPeople=PERSON1,PERSON2
 Webcalendars=https://calendar.mycalendar.com/basic.ics,webcal://calendar.mycalendar.com/basic.ics
+WebCalendarPosition="top-0 right-0"
 RefreshAlbumPeopleInterval=12
 ShowClock=true
 ClockFormat=HH:mm:ss
+ClockPosition="bottom-0 left-0"
 ShowPhotoDate=true
 PhotoDateFormat=yyyy-MM-dd
 ShowImageDesc=true
 ShowPeopleDesc=true
 ShowImageLocation=true
 ImageLocationFormat=City,State,Country
+ImageInfoPosition="bottom-0 right-0" 
 PrimaryColor=#FF5733
 SecondaryColor=#000000
 Style=none

immichFrame.Web/src/lib/components/elements/appointments.svelte

@@ -11,6 +11,7 @@
 	}
 
 	let appointments: api.IAppointment[] = $state() as api.IAppointment[];
+	let webCalendarPosition = $derived($configStore.webCalendarPosition ?? 'top-0 right-0');
 
 	onMount(() => {
 		GetAppointments();
@@ -37,7 +38,7 @@
 
 {#if appointments}
 	<div
-		class="absolute top-0 right-0 w-auto z-10 text-center text-primary m-5 max-w-[20%] hidden lg:block md:min-w-[10%]"
+		class="absolute {webCalendarPosition} w-auto z-10 text-center text-primary m-5 max-w-[20%] hidden lg:block md:min-w-[10%]"
 	>
 		<!-- <div class="text-4xl mx-8 font-bold">Appointments</div> -->
 		<div class="">

immichFrame.Web/src/lib/components/elements/asset-info.svelte

@@ -51,11 +51,12 @@
 		)
 	);
 	let availablePeople = $derived(asset.people?.filter((x) => x.name));
+	let imageInfoPosition = $derived($configStore.imageInfoPosition ?? 'bottom-0 right-0');
 </script>
 
 {#if showPhotoDate || showPhotoDate || showImageDesc || showPeopleDesc}
 	<div
-		class="absolute bottom-0 right-0 z-100 text-primary p-1 text-right
+		class="absolute {imageInfoPosition} z-100 text-primary p-1 text-right
 		{$configStore.style == 'solid' ? 'bg-secondary rounded-tl-2xl' : ''}
 		{$configStore.style == 'transition' ? 'bg-gradient-to-l from-secondary from-0% pl-10' : ''}
 		{$configStore.style == 'blur' ? 'backdrop-blur-lg rounded-tl-2xl' : ''}	"

immichFrame.Web/src/lib/components/elements/clock.svelte

@@ -20,6 +20,7 @@
 		})
 	);
 	let timePortion = $derived(format(time, $configStore.clockFormat ?? 'HH:mm:ss'));
+	let clockPosition = $derived($configStore.clockPosition ?? 'bottom-0 left-0');
 
 	onMount(() => {
 		const interval = setInterval(() => {
@@ -44,14 +45,18 @@
 </script>
 
 <div
-	class="absolute bottom-0 left-0 z-10 text-center text-primary
+	class="absolute {clockPosition} z-10 text-center text-primary
 	{$configStore.style == 'solid' ? 'bg-secondary rounded-tr-2xl' : ''}
 	{$configStore.style == 'transition' ? 'bg-gradient-to-r from-secondary from-0% pr-10' : ''}
 	{$configStore.style == 'blur' ? 'backdrop-blur-lg rounded-tr-2xl' : ''}	
 	drop-shadow-2xl p-3"
 >
-	<p class="mt-2 text-sm sm:text-sm md:text-md lg:text-xl font-thin text-shadow-sm">{formattedDate}</p>
-	<p class="mt-2 text-4xl sm:text-4xl md:text-6xl lg:text-8xl font-bold text-shadow-lg">{timePortion}</p>
+	<p class="mt-2 text-sm sm:text-sm md:text-md lg:text-xl font-thin text-shadow-sm">
+		{formattedDate}
+	</p>
+	<p class="mt-2 text-4xl sm:text-4xl md:text-6xl lg:text-8xl font-bold text-shadow-lg">
+		{timePortion}
+	</p>
 	{#if weather}
 		<div>
 			<div class="text-xl sm:text-xl md:text-2xl lg:text-3xl font-semibold text-shadow-sm">

immichFrame.Web/src/lib/immichFrameApi.ts

@@ -159,12 +159,15 @@ export type WebClientSettings = {
     renewImagesDuration?: number;
     showClock?: boolean;
     clockFormat?: string | null;
+    clockPosition?: string | null;
     showPhotoDate?: boolean;
     photoDateFormat?: string | null;
     showImageDesc?: boolean;
     showPeopleDesc?: boolean;
     showImageLocation?: boolean;
     imageLocationFormat?: string | null;
+    imageInfoPosition?: string | null;
+    webCalendarPosition?: string | null;
     primaryColor?: string | null;
     secondaryColor?: string | null;
     style?: string | null;