feat: added requested at and other minor improvements

frontend/src/lib/components/status-media-card.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
 	import type { PlexDebridItem, StatusInterface } from '$lib/types';
-	import { formatState } from '$lib/helpers';
+	import { formatWords, formatDate } from '$lib/helpers';
 	import { Badge } from '$lib/components/ui/badge';
-	import { Button } from '$lib/components/ui/button';
-	import { Clapperboard } from 'lucide-svelte';
 
 	export let plexDebridItem: PlexDebridItem;
 	export let itemState: StatusInterface;
@@ -34,23 +32,27 @@
 				<p class="text-xl lg:text-2xl font-semibold md:text-ellipsis md:line-clamp-1">
 					{plexDebridItem.title}
 				</p>
-				<p>{plexDebridItem.aired_at.slice(0, -3)}</p>
+				<p>Aired {formatDate(plexDebridItem.aired_at, 'short')}</p>
 				<div class="flex flex-wrap gap-1 items-center mt-1">
 					{#each plexDebridItem.genres as genre}
 						<Badge variant="secondary">
-							{formatState(genre)}
+							{formatWords(genre)}
 						</Badge>
 					{/each}
 				</div>
 			</div>
 		</div>
-		<div class="z-[1] flex flex-col gap-2 items-start w-full md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6">
+		<div class="z-[1] flex flex-col items-start w-full md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6">
 			<div class="flex gap-2 items-center">
 				<p class="text-lg font-semibold">Status</p>
 				<Badge class="{itemState.bg} tracking-wider text-black">
-					{itemState.text ?? formatState(plexDebridItem.state)}
+					{itemState.text ?? formatWords(plexDebridItem.state)}
 				</Badge>
 			</div>
+			<div class="flex gap-2 items-center">
+				<p class="text-lg font-semibold">Requested</p>
+				<p>{formatDate(plexDebridItem.requested_at, 'long', true)}</p>
+			</div>
 		</div>
 	</div>
 </div>

frontend/src/lib/helpers.ts

@@ -2,12 +2,12 @@ import { DateTime } from 'luxon';
 import type { PlexDebridItem } from '$lib/types';
 
 // only works with real-debrid dates because of CET format provided by RD
-export function formatDate(inputDate: string, format: string = 'long'): string {
-	let cetDate = DateTime.fromISO(inputDate, { zone: 'Europe/Paris' }); // Parse date as CET
-	cetDate = cetDate.setZone('utc'); // Convert to UTC
+export function formatRDDate(inputDate: string, format: string = 'long'): string {
+	let cetDate = DateTime.fromISO(inputDate, { zone: 'Europe/Paris' });
+	cetDate = cetDate.setZone('utc');
 
-	const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; // Get user's timezone
-	cetDate = cetDate.setZone(userTimeZone); // Convert to user's timezone
+	const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+	cetDate = cetDate.setZone(userTimeZone);
 
 	let formattedDate;
 	if (format === 'short') {
@@ -23,8 +23,35 @@ export function formatDate(inputDate: string, format: string = 'long'): string {
 	return formattedDate;
 }
 
-export function formatState(state: string) {
-	return state
+export function formatDate(
+	inputDate: string,
+	format: string = 'long',
+	relative: boolean = false
+): string {
+	let date = DateTime.fromISO(inputDate, { zone: 'utc' });
+	date = date.setZone('local');
+
+	let formattedDate;
+
+	if (relative) {
+		formattedDate = date.toRelative() || '';
+	} else {
+		if (format === 'short') {
+			formattedDate = date.toLocaleString({
+				year: 'numeric',
+				month: 'short',
+				day: 'numeric'
+			});
+		} else {
+			formattedDate = date.toLocaleString(DateTime.DATETIME_FULL);
+		}
+	}
+
+	return formattedDate;
+}
+
+export function formatWords(words: string) {
+	return words
 		.split('_')
 		.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
 		.join(' ');

frontend/src/lib/types.ts

@@ -22,11 +22,8 @@ export interface PlexDebridItem {
 	imdb_link: string;
 	aired_at: string;
 	genres: string[];
-	key: string;
 	guid: string;
-	art_url: string;
-	is_cached: boolean;
-	is_checked_for_availability: boolean;
+	requested_at: string;
 }
 
 export interface StatusInterface {

frontend/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { formatDate } from '$lib/helpers';
+	import { formatRDDate } from '$lib/helpers';
 	import type { UserResponse } from '$lib/types';
 
 	interface ExportedData {
@@ -17,6 +17,6 @@
 		<h1 class="text-xl md:text-2xl font-semibold">Welcome {data.user?.username}</h1>
 		<p class="md:text-lg text-muted-foreground">{data.user?.email}</p>
 		<p class="md:text-lg text-muted-foreground break-words">
-			Premium expires on {formatDate(data.user?.expiration, 'short')}
+			Premium expires on {formatRDDate(data.user?.expiration, 'short')}
 		</p>
 </div>

frontend/src/routes/status/+page.server.ts

@@ -29,9 +29,7 @@ export const load: PageServerLoad = async ({ fetch }) => {
 	}
 
 	return {
-		streamed: {
-			items: getItems()
-		},
+		items: getItems(),
 		states: await getStates()
 	};
 };

frontend/src/routes/status/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { convertPlexDebridItemsToObject, formatState } from '$lib/helpers';
+	import { convertPlexDebridItemsToObject, formatWords } from '$lib/helpers';
 	import { invalidateAll } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -8,16 +8,17 @@
 	import StatusMediaCard from '$lib/components/status-media-card.svelte';
 	import { toast } from 'svelte-sonner';
 	import type { StatusInfo } from '$lib/types';
+	import { onMount } from 'svelte';
 
 	export let data;
 
 	let reloadButtonLoading = false;
 
-	async function reloadData() {
+	async function reloadData(message: string = 'Refreshed data') {
 		reloadButtonLoading = true;
 		await invalidateAll();
 		reloadButtonLoading = false;
-		toast.success('Refreshed data');
+		toast.success(message);
 	}
 
 	const statusInfo: StatusInfo = {
@@ -59,14 +60,21 @@
 			description: 'Item is in your library and is ongoing'
 		}
 	};
+
+	// every 5s reload data
+	onMount(async () => {
+		setInterval(async () => {
+			await reloadData('Automatically refreshed data');
+		}, 60000);
+	});
 </script>
 
 <svelte:head>
 	<title>Iceberg | Status</title>
 </svelte:head>
 
 <div class="flex flex-col gap-2 p-8 md:px-24 lg:px-32">
-	{#await data.streamed.items}
+	{#await data.items}
 		<div class="flex items-center gap-1 w-full justify-center">
 			<Loader2 class="animate-spin w-4 h-4" />
 			<p class="text-lg text-muted-foreground">Loading library items...</p>
@@ -91,7 +99,9 @@
 							variant="outline"
 							size="sm"
 							class="max-w-max"
-							on:click={reloadData}
+							on:click={async () => {
+								await reloadData();
+							}}
 						>
 							<RotateCw class="h-4 w-4" />
 						</Button>
@@ -133,7 +143,7 @@
 						{#each Object.keys(statusInfo) as key (key)}
 							<li>
 								<span class="font-semibold {statusInfo[key].color}">
-									{statusInfo[key].text ?? formatState(key)}
+									{statusInfo[key].text ?? formatWords(key)}
 								</span>
 								{statusInfo[key].description}
 							</li>