Implemented status box on the side bar (#201)

server/src/modules/schedule-tasks/video-conversion.service.ts

@@ -24,7 +24,6 @@ export class VideoConversionService {
   ) { }
 
 
-  // time ffmpeg -i 15065f4a-47ff-4aed-8c3e-c9fcf1840531.mov -crf 35 -preset ultrafast -vcodec libx264 -acodec mp3 -vf "scale=1280:-1" 15065f4a-47ff-4aed-8c3e-c9fcf1840531.mp4
   @Cron(CronExpression.EVERY_MINUTE
     , {
       name: 'video-encoding'

web/src/lib/components/asset-viewer/immich-thumbnail.svelte

@@ -59,7 +59,14 @@
 
 				videoPlayerNode.load();
 
+				videoPlayerNode.onloadeddata = () => {
+					console.log('first frame load');
+				};
+				videoPlayerNode.oncanplaythrough = () => {
+					console.log('can play through');
+				};
 				videoPlayerNode.oncanplay = () => {
+					console.log('can play');
 					videoPlayerNode.muted = true;
 					videoPlayerNode.play();
 
@@ -119,9 +126,8 @@
 		mouseOver = false;
 		URL.revokeObjectURL(videoData);
 
-		if (calculateVideoDurationIntervalHandler) {
 		clearInterval(calculateVideoDurationIntervalHandler);
-		}
+
 		isThumbnailVideoPlaying = false;
 		videoProgress = '00:00';
 	};
@@ -197,7 +203,7 @@
 
 		{#if mouseOver && asset.type === AssetType.VIDEO}
 			<div class="absolute w-full h-full top-0" on:mouseenter={loadVideoData}>
-				<video muted class="h-full object-cover" width="250px" bind:this={videoPlayerNode}>
+				<video muted autoplay preload="none" class="h-full object-cover" width="250px" bind:this={videoPlayerNode}>
 					<track kind="captions" />
 				</video>
 			</div>

web/src/lib/components/shared/status-box.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { getRequest } from '$lib/api';
+	import { onDestroy, onMount } from 'svelte';
+	import { serverEndpoint } from '$lib/constants';
+	import Cloud from 'svelte-material-icons/Cloud.svelte';
+	import Dns from 'svelte-material-icons/Dns.svelte';
+	import LoadingSpinner from './loading-spinner.svelte';
+
+	type ServerInfoType = {
+		diskAvailable: string;
+		diskAvailableRaw: number;
+		diskSize: string;
+		diskSizeRaw: number;
+		diskUsagePercentage: number;
+		diskUse: string;
+		diskUseRaw: number;
+	};
+
+	let endpoint = serverEndpoint;
+	let isServerOk = true;
+	let serverVersion = '';
+	let serverInfoRes: ServerInfoType;
+
+	onMount(async () => {
+		const res = await getRequest('server-info/version', '');
+		serverVersion = `v${res.major}.${res.minor}.${res.patch}`;
+
+		serverInfoRes = (await getRequest('server-info', '')) as ServerInfoType;
+
+		getStorageUsagePercentage();
+	});
+
+	const pingServerInterval = setInterval(async () => {
+		const response = await getRequest('server-info/ping', '');
+
+		if (response.res === 'pong') isServerOk = true;
+		else isServerOk = false;
+
+		serverInfoRes = (await getRequest('server-info', '')) as ServerInfoType;
+	}, 10000);
+
+	onDestroy(() => clearInterval(pingServerInterval));
+
+	const getStorageUsagePercentage = () => {
+		return Math.round((serverInfoRes.diskUseRaw / serverInfoRes.diskSizeRaw) * 100);
+	};
+</script>
+
+<div>
+	<div class="storage-status grid grid-cols-[64px_auto]">
+		<div class="pl-5 pr-6 text-immich-primary">
+			<Cloud size={'24'} />
+		</div>
+		<div>
+			<p class="text-sm font-medium text-immich-primary">Storage</p>
+			{#if serverInfoRes}
+				<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
+					<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
+					<div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${getStorageUsagePercentage()}%`} />
+				</div>
+				<p class="text-xs">{serverInfoRes?.diskUse} of {serverInfoRes?.diskSize} used</p>
+			{:else}
+				<div class="mt-2">
+					<LoadingSpinner />
+				</div>
+			{/if}
+		</div>
+	</div>
+	<div>
+		<hr class="ml-5 my-4" />
+	</div>
+	<div class="server-status grid grid-cols-[64px_auto]">
+		<div class="pl-5 pr-6 text-immich-primary">
+			<Dns size={'24'} />
+		</div>
+
+		<div class="text-xs">
+			<p class="text-sm font-medium text-immich-primary">Server</p>
+
+			<div class="border p-2 rounded-md bg-gray-200 mt-2">
+				<p class="text-immich-primary font-medium">{endpoint}</p>
+			</div>
+			<div class="flex justify-items-center justify-between mt-2">
+				<p>Status</p>
+
+				{#if isServerOk}
+					<p class="font-medium text-immich-primary">Online</p>
+				{:else}
+					<p class="font-medium text-red-500">Offline</p>
+				{/if}
+			</div>
+
+			<div class="flex justify-items-center justify-between mt-2">
+				<p>Version</p>
+				<p class="font-medium text-immich-primary">{serverVersion}</p>
+			</div>
+		</div>
+	</div>
+</div>

web/src/routes/__layout.svelte

@@ -7,25 +7,11 @@
 <script lang="ts">
 	import '../app.css';
 
-	import { fly, slide, blur } from 'svelte/transition';
-	import { quintOut } from 'svelte/easing';
-	import { getRequest } from '$lib/api';
-	import { onDestroy } from 'svelte';
+	import { blur } from 'svelte/transition';
+
 	import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
-	import { serverEndpoint } from '$lib/constants';
 
 	export let url: string;
-	let endpoint = serverEndpoint;
-	let isServerOk = true;
-
-	const pingServerInterval = setInterval(async () => {
-		const response = await getRequest('server-info/ping', '');
-
-		if (response.res === 'pong') isServerOk = true;
-		else isServerOk = false;
-	}, 10000);
-
-	onDestroy(() => clearInterval(pingServerInterval));
 </script>
 
 <main>
@@ -36,19 +22,3 @@
 		</div>
 	{/key}
 </main>
-
-<footer
-	class="text-sm fixed bottom-0 h-8 flex place-items-center place-content-center bg-gray-50 w-screen font-mono gap-8 px-4 font-medium"
->
-	<p class="">
-		Server URL <span class="text-immich-primary font-bold">{endpoint}</span>
-	</p>
-	<p class="">
-		Server Status
-		{#if isServerOk}
-			<span class="text-immich-primary font-bold">OK</span>
-		{:else}
-			<span class="text-red-500 font-bold">OFFLINE</span>
-		{/if}
-	</p>
-</footer>

web/src/routes/admin/index.svelte

@@ -34,6 +34,7 @@
 	import UserManagement from '$lib/components/admin/user-management.svelte';
 	import FullScreenModal from '$lib/components/shared/full-screen-modal.svelte';
 	import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
+	import StatusBox from '../../lib/components/shared/status-box.svelte';
 
 	let selectedAction: AdminSideBarSelection;
 
@@ -74,7 +75,7 @@
 {/if}
 
 <section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen">
-	<section id="admin-sidebar" class="pt-8 pr-6">
+	<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col justify-between">
 		<SideBarButton
 			title="User"
 			logo={AccountMultipleOutline}
@@ -82,6 +83,10 @@
 			isSelected={selectedAction === AdminSideBarSelection.USER_MANAGEMENT}
 			on:selected={onButtonClicked}
 		/>
+
+		<div class="mb-6">
+			<StatusBox />
+		</div>
 	</section>
 	<section class="overflow-y-auto relative">
 		<div id="setting-title" class="pt-10 fixed w-full z-50 bg-immich-bg">

web/src/routes/photos/index.svelte

@@ -39,6 +39,7 @@
 	import type { ImmichAsset } from '../../lib/models/immich-asset';
 	import AssetViewer from '../../lib/components/asset-viewer/asset-viewer.svelte';
 	import DownloadPanel from '../../lib/components/asset-viewer/download-panel.svelte';
+	import StatusBox from '../../lib/components/shared/status-box.svelte';
 
 	export let user: ImmichUser;
 	let selectedAction: AppSideBarSelection;
@@ -91,7 +92,7 @@
 
 <section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen">
 	<!-- Sidebar -->
-	<section id="admin-sidebar" class="flex flex-col gap-4 pt-8 pr-6">
+	<section id="admin-sidebar" class="flex flex-col justify-between gap-4 pt-8 pr-6">
 		<SideBarButton
 			title="Photos"
 			logo={ImageOutline}
@@ -99,6 +100,12 @@
 			isSelected={selectedAction === AppSideBarSelection.PHOTOS}
 			on:selected={onButtonClicked}
 		/>
+
+		<!-- Status Box -->
+
+		<div class="mb-6">
+			<StatusBox />
+		</div>
 	</section>
 
 	<!-- Main Section -->