mirror of
https://github.com/immich-app/immich.git
synced 2024-11-24 08:52:28 +02:00
Implemented status box on the side bar (#201)
This commit is contained in:
Alex
GitHub
parent
ab6909bfbd
commit
b9f38162d5
@ -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'
|
||||
|
||||
@ -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>
|
||||
|
||||
99
web/src/lib/components/shared/status-box.svelte
Normal file
99
web/src/lib/components/shared/status-box.svelte
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user