helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Implemented status box on the side bar (#201)

Browse source
This commit is contained in:
Alex 2022-06-05 05:15:39 -05:00 • committed by GitHub
parent ab6909bfbd
commit b9f38162d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 125 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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);
}
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>

99
web/src/lib/components/shared/status-box.svelte Normal file
View file

@ -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>