You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-06-23 04:38:12 +02:00
Added sharing page to web (#355)
* Added shared album * Added list tile * Show info of shared album owner
This commit is contained in:
Alex
GitHub
@ -0,0 +1,63 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import FullScreenModal from './full-screen-modal.svelte';
|
||||
export let localVersion: string;
|
||||
export let remoteVersion: string;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const acknowledgeClickHandler = () => {
|
||||
localStorage.setItem('appVersion', remoteVersion);
|
||||
|
||||
dispatch('close');
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="absolute top-0 left-0 w-screen h-screen">
|
||||
<FullScreenModal on:clickOutside={() => console.log('Click outside')}>
|
||||
<div class="max-w-[500px] z-[99999] border bg-immich-bg p-10 rounded-xl">
|
||||
<p class="text-2xl ">🎉 NEW VERSION AVAILABLE 🎉</p>
|
||||
<br />
|
||||
|
||||
<section class="max-h-[400px] overflow-y-auto">
|
||||
<div class="font-thin">
|
||||
Hi friend, there is a new release of <span class="font-immich-title text-immich-primary font-bold"
|
||||
>IMMICH</span
|
||||
>, please take your time to visit the
|
||||
<span class="underline font-medium"
|
||||
><a href="https://github.com/alextran1502/immich/releases/latest" target="_blank" rel="noopener noreferrer"
|
||||
>release note</a
|
||||
></span
|
||||
>
|
||||
and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
|
||||
especially if you use WatchTower or any mechanism that handles updating your application automatically.
|
||||
</div>
|
||||
|
||||
{#if remoteVersion == 'v1.11.0_17-dev'}
|
||||
<div class="mt-2 font-thin">
|
||||
This specific version <span class="font-medium">v1.11.0_17-dev</span> includes changes in the docker-compose
|
||||
setup that added additional containters. Please make sure to update the docker-compose file, pull new images
|
||||
and check your setup for the latest features and bug fixes.
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<div class="font-thin mt-4">Your friend, Alex</div>
|
||||
<div class="text-xs mt-8">
|
||||
<code>Local Version {localVersion}</code>
|
||||
<br />
|
||||
<code>Remote Version {remoteVersion}</code>
|
||||
</div>
|
||||
|
||||
<div class="text-right mt-4">
|
||||
<button
|
||||
class="bg-immich-primary text-gray-50 hover:bg-immich-primary/90 py-2 px-4 rounded-lg font-medium shadow-lg transition-all"
|
||||
on:click={acknowledgeClickHandler}>Acknowledge</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</FullScreenModal>
|
||||
</div>
|
||||
@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
const getUserAvatar = async () => {
|
||||
try {
|
||||
const { data } = await api.userApi.getProfileImage(user.id, {
|
||||
responseType: 'blob'
|
||||
});
|
||||
|
||||
if (data instanceof Blob) {
|
||||
return URL.createObjectURL(data);
|
||||
}
|
||||
} catch (e) {
|
||||
return '/favicon.png';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
{#await getUserAvatar()}
|
||||
<div class="w-12 h-12 rounded-full bg-immich-primary/25" />
|
||||
{:then data}
|
||||
<img
|
||||
src={data}
|
||||
alt="profile-img"
|
||||
class="inline rounded-full w-12 h-12 object-cover border shadow-md"
|
||||
title={user.email}
|
||||
/>
|
||||
{/await}
|
||||
@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let logo: any;
|
||||
export let backgroundColor: string = '';
|
||||
export let logoColor: string = '';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="rounded-full p-3 flex place-items-center place-content-center text-gray-50 hover:bg-gray-800"
|
||||
class:background-color={backgroundColor}
|
||||
class:color={logoColor}
|
||||
on:click={() => dispatch('click')}
|
||||
>
|
||||
<svelte:component this={logo} size="24" />
|
||||
</button>
|
||||
@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { clickOutside } from '../../utils/click-outside';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
<section
|
||||
in:fade={{ duration: 100 }}
|
||||
out:fade={{ duration: 100 }}
|
||||
class="absolute w-full h-full bg-black/40 z-[100] flex place-items-center place-content-center "
|
||||
>
|
||||
<div class="z-[9999]" use:clickOutside on:out-click={() => dispatch('clickOutside')}>
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
245
web/src/lib/components/shared-components/immich-thumbnail.svelte
Normal file
245
web/src/lib/components/shared-components/immich-thumbnail.svelte
Normal file
@ -0,0 +1,245 @@
|
||||
<script lang="ts">
|
||||
import { session } from '$app/stores';
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
import { fade, fly } from 'svelte/transition';
|
||||
import IntersectionObserver from '$lib/components/asset-viewer-page/intersection-observer.svelte';
|
||||
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
|
||||
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
|
||||
import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
|
||||
import LoadingSpinner from './loading-spinner.svelte';
|
||||
import { api, AssetResponseDto, AssetTypeEnum, ThumbnailFormat } from '@api';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let asset: AssetResponseDto;
|
||||
export let groupIndex = 0;
|
||||
export let thumbnailSize: number | undefined = undefined;
|
||||
export let format: ThumbnailFormat = ThumbnailFormat.Webp;
|
||||
|
||||
let imageData: string;
|
||||
let videoData: string;
|
||||
|
||||
let mouseOver: boolean = false;
|
||||
$: dispatch('mouseEvent', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
|
||||
|
||||
let mouseOverIcon: boolean = false;
|
||||
let videoPlayerNode: HTMLVideoElement;
|
||||
let isThumbnailVideoPlaying = false;
|
||||
let calculateVideoDurationIntervalHandler: NodeJS.Timer;
|
||||
let videoProgress = '00:00';
|
||||
|
||||
const loadImageData = async () => {
|
||||
if ($session.user) {
|
||||
const { data } = await api.assetApi.getAssetThumbnail(asset.id, format, {
|
||||
responseType: 'blob'
|
||||
});
|
||||
if (data instanceof Blob) {
|
||||
imageData = URL.createObjectURL(data);
|
||||
return imageData;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const loadVideoData = async () => {
|
||||
isThumbnailVideoPlaying = false;
|
||||
|
||||
if ($session.user) {
|
||||
try {
|
||||
const { data } = await api.assetApi.serveFile(
|
||||
asset.deviceAssetId,
|
||||
asset.deviceId,
|
||||
false,
|
||||
true,
|
||||
{
|
||||
responseType: 'blob'
|
||||
}
|
||||
);
|
||||
|
||||
if (!(data instanceof Blob)) {
|
||||
return;
|
||||
}
|
||||
|
||||
videoData = URL.createObjectURL(data);
|
||||
|
||||
videoPlayerNode.src = videoData;
|
||||
// videoPlayerNode.src = videoData + '#t=0,5';
|
||||
|
||||
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();
|
||||
|
||||
isThumbnailVideoPlaying = true;
|
||||
calculateVideoDurationIntervalHandler = setInterval(() => {
|
||||
videoProgress = getVideoDurationInString(Math.round(videoPlayerNode.currentTime));
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return videoData;
|
||||
} catch (e) {}
|
||||
}
|
||||
};
|
||||
|
||||
const getVideoDurationInString = (currentTime: number) => {
|
||||
const minute = Math.floor(currentTime / 60);
|
||||
const second = currentTime % 60;
|
||||
|
||||
const minuteText = minute >= 10 ? `${minute}` : `0${minute}`;
|
||||
const secondText = second >= 10 ? `${second}` : `0${second}`;
|
||||
|
||||
return minuteText + ':' + secondText;
|
||||
};
|
||||
|
||||
const parseVideoDuration = (duration: string) => {
|
||||
const timePart = duration.split(':');
|
||||
const hours = timePart[0];
|
||||
const minutes = timePart[1];
|
||||
const seconds = timePart[2];
|
||||
|
||||
if (hours != '0') {
|
||||
return `${hours}:${minutes}`;
|
||||
} else {
|
||||
return `${minutes}:${seconds.split('.')[0]}`;
|
||||
}
|
||||
};
|
||||
|
||||
onDestroy(() => {
|
||||
URL.revokeObjectURL(imageData);
|
||||
});
|
||||
|
||||
const getSize = () => {
|
||||
if (thumbnailSize) {
|
||||
return `w-[${thumbnailSize}px] h-[${thumbnailSize}px]`;
|
||||
}
|
||||
|
||||
if (asset.exifInfo?.orientation === 'Rotate 90 CW') {
|
||||
return 'w-[176px] h-[235px]';
|
||||
} else if (asset.exifInfo?.orientation === 'Horizontal (normal)') {
|
||||
return 'w-[313px] h-[235px]';
|
||||
} else {
|
||||
return 'w-[235px] h-[235px]';
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseOverThumbnail = () => {
|
||||
mouseOver = true;
|
||||
};
|
||||
|
||||
const handleMouseLeaveThumbnail = () => {
|
||||
mouseOver = false;
|
||||
URL.revokeObjectURL(videoData);
|
||||
|
||||
clearInterval(calculateVideoDurationIntervalHandler);
|
||||
|
||||
isThumbnailVideoPlaying = false;
|
||||
videoProgress = '00:00';
|
||||
};
|
||||
</script>
|
||||
|
||||
<IntersectionObserver once={true} let:intersecting>
|
||||
<div
|
||||
style:width={`${thumbnailSize}px`}
|
||||
style:height={`${thumbnailSize}px`}
|
||||
class={`bg-gray-100 relative hover:cursor-pointer ${getSize()}`}
|
||||
on:mouseenter={handleMouseOverThumbnail}
|
||||
on:mouseleave={handleMouseLeaveThumbnail}
|
||||
on:click={() => dispatch('viewAsset', { assetId: asset.id, deviceId: asset.deviceId })}
|
||||
>
|
||||
{#if mouseOver}
|
||||
<div
|
||||
in:fade={{ duration: 200 }}
|
||||
class="w-full bg-gradient-to-b from-gray-800/50 via-white/0 to-white/0 absolute p-2 z-10"
|
||||
>
|
||||
<div
|
||||
on:mouseenter={() => (mouseOverIcon = true)}
|
||||
on:mouseleave={() => (mouseOverIcon = false)}
|
||||
class="inline-block"
|
||||
>
|
||||
<CheckCircle size="24" color={mouseOverIcon ? 'white' : '#d8dadb'} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Playback and info -->
|
||||
{#if asset.type === AssetTypeEnum.Video}
|
||||
<div
|
||||
class="absolute right-2 top-2 text-white text-xs font-medium flex gap-1 place-items-center z-10"
|
||||
>
|
||||
{#if isThumbnailVideoPlaying}
|
||||
<span in:fly={{ x: -25, duration: 500 }}>
|
||||
{videoProgress}
|
||||
</span>
|
||||
{:else}
|
||||
<span in:fade={{ duration: 500 }}>
|
||||
{parseVideoDuration(asset.duration)}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if mouseOver}
|
||||
{#if isThumbnailVideoPlaying}
|
||||
<span in:fly={{ x: 25, duration: 500 }}>
|
||||
<PauseCircleOutline size="24" />
|
||||
</span>
|
||||
{:else}
|
||||
<span in:fade={{ duration: 250 }}>
|
||||
<LoadingSpinner />
|
||||
</span>
|
||||
{/if}
|
||||
{:else}
|
||||
<span in:fade={{ duration: 500 }}>
|
||||
<PlayCircleOutline size="24" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Thumbnail -->
|
||||
{#if intersecting}
|
||||
{#await loadImageData()}
|
||||
<div
|
||||
style:width={`${thumbnailSize}px`}
|
||||
style:height={`${thumbnailSize}px`}
|
||||
class={`bg-immich-primary/10 ${getSize()} flex place-items-center place-content-center`}
|
||||
>
|
||||
...
|
||||
</div>
|
||||
{:then imageData}
|
||||
<img
|
||||
style:width={`${thumbnailSize}px`}
|
||||
style:height={`${thumbnailSize}px`}
|
||||
in:fade={{ duration: 250 }}
|
||||
src={imageData}
|
||||
alt={asset.id}
|
||||
class={`object-cover ${getSize()} transition-all duration-100 z-0`}
|
||||
loading="lazy"
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
|
||||
{#if mouseOver && asset.type === AssetTypeEnum.Video}
|
||||
<div class="absolute w-full h-full top-0" on:mouseenter={loadVideoData}>
|
||||
<video
|
||||
muted
|
||||
autoplay
|
||||
preload="none"
|
||||
class="h-full object-cover"
|
||||
width="250px"
|
||||
style:width={`${thumbnailSize}px`}
|
||||
bind:this={videoPlayerNode}
|
||||
>
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</IntersectionObserver>
|
||||
@ -0,0 +1,18 @@
|
||||
<div>
|
||||
<svg
|
||||
role="status"
|
||||
class={`w-[24px] h-[24px] text-gray-400 animate-spin dark:text-gray-600 fill-immich-primary`}
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
165
web/src/lib/components/shared-components/navigation-bar.svelte
Normal file
165
web/src/lib/components/shared-components/navigation-bar.svelte
Normal file
@ -0,0 +1,165 @@
|
||||
<script lang="ts">
|
||||
import { session } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import type { ImmichUser } from '$lib/models/immich-user';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { fade, fly, slide } from 'svelte/transition';
|
||||
import { serverEndpoint } from '../../constants';
|
||||
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
|
||||
import { clickOutside } from '../../utils/click-outside';
|
||||
import { api } from '@api';
|
||||
|
||||
export let user: ImmichUser;
|
||||
|
||||
let shouldShowAccountInfo = false;
|
||||
let shouldShowProfileImage = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let shouldShowAccountInfoPanel = false;
|
||||
|
||||
onMount(() => {
|
||||
getUserProfileImage();
|
||||
});
|
||||
|
||||
const getUserProfileImage = async () => {
|
||||
if ($session.user) {
|
||||
try {
|
||||
await api.userApi.getProfileImage(user.id);
|
||||
shouldShowProfileImage = true;
|
||||
} catch (e) {
|
||||
console.log('User does not have a profile image');
|
||||
shouldShowProfileImage = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
const getFirstLetter = (text?: string) => {
|
||||
return text?.charAt(0).toUpperCase();
|
||||
};
|
||||
|
||||
const navigateToAdmin = () => {
|
||||
goto('/admin');
|
||||
};
|
||||
|
||||
const showAccountInfoPanel = () => {
|
||||
shouldShowAccountInfoPanel = true;
|
||||
};
|
||||
|
||||
const logOut = async () => {
|
||||
const res = await fetch('auth/logout', { method: 'POST' });
|
||||
|
||||
if (res.status == 200 && res.statusText == 'OK') {
|
||||
goto('/auth/login');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<section id="dashboard-navbar" class="fixed w-screen z-[100] bg-immich-bg text-sm">
|
||||
<div class="flex border-b place-items-center px-6 py-2 ">
|
||||
<a sveltekit:prefetch class="flex gap-2 place-items-center hover:cursor-pointer" href="/photos">
|
||||
<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" />
|
||||
<h1 class="font-immich-title text-2xl text-immich-primary">IMMICH</h1>
|
||||
</a>
|
||||
<div class="flex-1 ml-24">
|
||||
<input class="w-[50%] border rounded-md bg-gray-200 px-8 py-4" placeholder="Search - Coming soon" />
|
||||
</div>
|
||||
<section class="flex gap-4 place-items-center">
|
||||
{#if $page.url.pathname !== '/admin'}
|
||||
<button
|
||||
in:fly={{ x: 50, duration: 250 }}
|
||||
on:click={() => dispatch('uploadClicked')}
|
||||
class="flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium"
|
||||
>
|
||||
<TrayArrowUp size="20" />
|
||||
<span> Upload </span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if user.isAdmin}
|
||||
<a sveltekit:prefetch href={`admin`}>
|
||||
<button
|
||||
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium ${
|
||||
$page.url.pathname == '/admin' && 'text-immich-primary underline'
|
||||
}`}>Administration</button
|
||||
>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
on:mouseover={() => (shouldShowAccountInfo = true)}
|
||||
on:focus={() => (shouldShowAccountInfo = true)}
|
||||
on:mouseleave={() => (shouldShowAccountInfo = false)}
|
||||
on:click={showAccountInfoPanel}
|
||||
>
|
||||
<button
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary/80 h-12 w-12 text-gray-100 hover:bg-immich-primary"
|
||||
>
|
||||
{#if shouldShowProfileImage}
|
||||
<img
|
||||
src={`${serverEndpoint}/user/profile-image/${user.id}`}
|
||||
alt="profile-img"
|
||||
class="inline rounded-full h-12 w-12 object-cover shadow-md"
|
||||
/>
|
||||
{:else}
|
||||
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if shouldShowAccountInfo}
|
||||
<div
|
||||
in:fade={{ delay: 500, duration: 150 }}
|
||||
out:fade={{ delay: 200, duration: 150 }}
|
||||
class="absolute -bottom-12 right-5 border bg-gray-500 text-[12px] text-gray-100 p-2 rounded-md shadow-md"
|
||||
>
|
||||
<p>{user.firstName} {user.lastName}</p>
|
||||
<p>{user.email}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{#if shouldShowAccountInfoPanel}
|
||||
<div
|
||||
in:fade={{ duration: 100 }}
|
||||
out:fade={{ duration: 100 }}
|
||||
id="account-info-panel"
|
||||
class="absolute right-[25px] top-[75px] bg-white shadow-lg rounded-2xl w-[360px] text-center"
|
||||
use:clickOutside
|
||||
on:out-click={() => (shouldShowAccountInfoPanel = false)}
|
||||
>
|
||||
<div class="flex place-items-center place-content-center mt-6">
|
||||
<button
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary"
|
||||
>
|
||||
{#if shouldShowProfileImage}
|
||||
<img
|
||||
src={`${serverEndpoint}/user/profile-image/${user.id}`}
|
||||
alt="profile-img"
|
||||
class="inline rounded-full h-20 w-20 object-cover shadow-md"
|
||||
/>
|
||||
{:else}
|
||||
<div class="text-lg">
|
||||
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-lg text-immich-primary font-medium mt-4">
|
||||
{user.firstName}
|
||||
{user.lastName}
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-gray-500">{user.email}</p>
|
||||
|
||||
<div class="my-4">
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<button class="border rounded-3xl px-6 py-2 hover:bg-gray-50" on:click={logOut}>Sign Out</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let logo: any;
|
||||
export let actionType: AdminSideBarSelection | AppSideBarSelection;
|
||||
export let isSelected: boolean;
|
||||
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type {
|
||||
AdminSideBarSelection,
|
||||
AppSideBarSelection
|
||||
} from '../../../models/admin-sidebar-selection';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const onButtonClicked = () => {
|
||||
dispatch('selected', {
|
||||
actionType
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
on:click={onButtonClicked}
|
||||
class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-gray-200 hover:text-immich-primary hover:cursor-pointer
|
||||
${isSelected && 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/25'}
|
||||
`}
|
||||
>
|
||||
<svelte:component this={logo} size="24" />
|
||||
<p class="font-medium text-sm">{title}</p>
|
||||
</div>
|
||||
@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
|
||||
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
|
||||
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
|
||||
import SideBarButton from './side-bar-button.svelte';
|
||||
import StatusBox from '../status-box.svelte';
|
||||
|
||||
let selectedAction: AppSideBarSelection;
|
||||
|
||||
onMount(async () => {
|
||||
if ($page.routeId == 'albums') {
|
||||
selectedAction = AppSideBarSelection.ALBUMS;
|
||||
} else if ($page.routeId == 'photos') {
|
||||
selectedAction = AppSideBarSelection.PHOTOS;
|
||||
} else if ($page.routeId == 'sharing') {
|
||||
selectedAction = AppSideBarSelection.SHARING;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6">
|
||||
<a sveltekit:prefetch href={$page.routeId != 'photos' ? `/photos` : null}>
|
||||
<SideBarButton
|
||||
title="Photos"
|
||||
logo={ImageOutline}
|
||||
actionType={AppSideBarSelection.PHOTOS}
|
||||
isSelected={selectedAction === AppSideBarSelection.PHOTOS}
|
||||
/></a
|
||||
>
|
||||
<a sveltekit:prefetch href={$page.routeId != 'sharing' ? `/sharing` : null}>
|
||||
<SideBarButton
|
||||
title="Sharing"
|
||||
logo={AccountMultipleOutline}
|
||||
actionType={AppSideBarSelection.SHARING}
|
||||
isSelected={selectedAction === AppSideBarSelection.SHARING}
|
||||
/></a
|
||||
>
|
||||
<div class="text-xs ml-5 my-4">
|
||||
<p>LIBRARY</p>
|
||||
</div>
|
||||
<a sveltekit:prefetch href={$page.routeId != 'albums' ? `/albums` : null}>
|
||||
<SideBarButton
|
||||
title="Albums"
|
||||
logo={ImageAlbum}
|
||||
actionType={AppSideBarSelection.ALBUMS}
|
||||
isSelected={selectedAction === AppSideBarSelection.ALBUMS}
|
||||
/>
|
||||
</a>
|
||||
<!-- Status Box -->
|
||||
|
||||
<div class="mb-6 mt-auto">
|
||||
<StatusBox />
|
||||
</div>
|
||||
</section>
|
||||
108
web/src/lib/components/shared-components/status-box.svelte
Normal file
108
web/src/lib/components/shared-components/status-box.svelte
Normal file
@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { getRequest } from '$lib/utils/api-helper';
|
||||
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';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
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>
|
||||
|
||||
<input
|
||||
class="border p-2 rounded-md bg-gray-200 mt-2 text-immich-primary font-medium"
|
||||
value={endpoint}
|
||||
disabled={true}
|
||||
/>
|
||||
<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>
|
||||
<hr class="ml-5 my-4" />
|
||||
</div>
|
||||
<button class="text-xs ml-5 underline hover:cursor-pointer text-immich-primary" on:click={() => goto('/changelog')}
|
||||
>Changelog</button
|
||||
> -->
|
||||
</div>
|
||||
200
web/src/lib/components/shared-components/upload-panel.svelte
Normal file
200
web/src/lib/components/shared-components/upload-panel.svelte
Normal file
@ -0,0 +1,200 @@
|
||||
<script lang="ts">
|
||||
import { quartInOut } from 'svelte/easing';
|
||||
import { scale, fade } from 'svelte/transition';
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
|
||||
import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
|
||||
import type { UploadAsset } from '$lib/models/upload-asset';
|
||||
import { getAssetsInfo } from '$lib/stores/assets';
|
||||
import { session } from '$app/stores';
|
||||
|
||||
let showDetail = true;
|
||||
|
||||
let uploadLength = 0;
|
||||
|
||||
const showUploadImageThumbnail = async (a: UploadAsset) => {
|
||||
const extension = a.fileExtension.toLowerCase();
|
||||
|
||||
if (extension == 'jpeg' || extension == 'jpg' || extension == 'png') {
|
||||
try {
|
||||
const imgData = await a.file.arrayBuffer();
|
||||
const arrayBufferView = new Uint8Array(imgData);
|
||||
const blob = new Blob([arrayBufferView], { type: 'image/jpeg' });
|
||||
const urlCreator = window.URL || window.webkitURL;
|
||||
const imageUrl = urlCreator.createObjectURL(blob);
|
||||
const img: any = document.getElementById(`${a.id}`);
|
||||
img.src = imageUrl;
|
||||
} catch (e) {}
|
||||
}
|
||||
};
|
||||
|
||||
function getSizeInHumanReadableFormat(sizeInByte: number) {
|
||||
const pepibyte = 1.126 * Math.pow(10, 15);
|
||||
const tebibyte = 1.1 * Math.pow(10, 12);
|
||||
const gibibyte = 1.074 * Math.pow(10, 9);
|
||||
const mebibyte = 1.049 * Math.pow(10, 6);
|
||||
const kibibyte = 1024;
|
||||
// Pebibyte
|
||||
if (sizeInByte >= pepibyte) {
|
||||
// Pe
|
||||
return `${(sizeInByte / pepibyte).toFixed(1)}PB`;
|
||||
} else if (tebibyte <= sizeInByte && sizeInByte < pepibyte) {
|
||||
// Te
|
||||
return `${(sizeInByte / tebibyte).toFixed(1)}TB`;
|
||||
} else if (gibibyte <= sizeInByte && sizeInByte < tebibyte) {
|
||||
// Gi
|
||||
return `${(sizeInByte / gibibyte).toFixed(1)}GB`;
|
||||
} else if (mebibyte <= sizeInByte && sizeInByte < gibibyte) {
|
||||
// Mega
|
||||
return `${(sizeInByte / mebibyte).toFixed(1)}MB`;
|
||||
} else if (kibibyte <= sizeInByte && sizeInByte < mebibyte) {
|
||||
// Kibi
|
||||
return `${(sizeInByte / kibibyte).toFixed(1)}KB`;
|
||||
} else {
|
||||
return `${sizeInByte}B`;
|
||||
}
|
||||
}
|
||||
|
||||
// Reactive action to get thumbnail image of upload asset whenever there is a new one added to the list
|
||||
$: {
|
||||
if ($uploadAssetsStore.length != uploadLength) {
|
||||
$uploadAssetsStore.map((asset) => {
|
||||
showUploadImageThumbnail(asset);
|
||||
});
|
||||
|
||||
uploadLength = $uploadAssetsStore.length;
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
if (showDetail) {
|
||||
$uploadAssetsStore.map((asset) => {
|
||||
showUploadImageThumbnail(asset);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let isUploading = false;
|
||||
uploadAssetsStore.isUploading.subscribe((value) => {
|
||||
isUploading = value;
|
||||
|
||||
if (isUploading == false) {
|
||||
if ($session.user) {
|
||||
getAssetsInfo($session.user.accessToken);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if isUploading}
|
||||
<div
|
||||
in:fade={{ duration: 250 }}
|
||||
out:fade={{ duration: 250, delay: 1000 }}
|
||||
class="absolute right-6 bottom-6 z-[10000]"
|
||||
>
|
||||
{#if showDetail}
|
||||
<div
|
||||
in:scale={{ duration: 250, easing: quartInOut }}
|
||||
class="bg-gray-200 p-4 text-sm w-[300px] rounded-lg shadow-sm border "
|
||||
>
|
||||
<div class="flex justify-between place-item-center mb-4">
|
||||
<p class="text-xs text-gray-500">UPLOADING {$uploadAssetsStore.length}</p>
|
||||
<button
|
||||
on:click={() => (showDetail = false)}
|
||||
class="w-[20px] h-[20px] bg-gray-50 rounded-full flex place-items-center place-content-center transition-colors hover:bg-gray-100"
|
||||
>
|
||||
<WindowMinimize />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="upload-item-list" class="max-h-[400px] overflow-y-auto pr-2 rounded-lg">
|
||||
{#each $uploadAssetsStore as uploadAsset}
|
||||
<div
|
||||
in:fade={{ duration: 250 }}
|
||||
out:fade={{ duration: 100 }}
|
||||
class="text-xs mt-3 rounded-lg bg-immich-bg grid grid-cols-[70px_auto] gap-2 h-[70px]"
|
||||
>
|
||||
<div class="relative">
|
||||
<img
|
||||
in:fade={{ duration: 250 }}
|
||||
id={`${uploadAsset.id}`}
|
||||
src="/immich-logo.svg"
|
||||
alt=""
|
||||
class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg "
|
||||
/>
|
||||
|
||||
<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">
|
||||
<p
|
||||
class="absolute bottom-1 right-1 object-right-bottom text-gray-50/95 font-semibold stroke-immich-primary uppercase"
|
||||
>
|
||||
.{uploadAsset.fileExtension}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2 pr-4 flex flex-col justify-between">
|
||||
<input
|
||||
disabled
|
||||
class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
|
||||
value={`[${getSizeInHumanReadableFormat(uploadAsset.file.size)}] ${uploadAsset.file.name}`}
|
||||
/>
|
||||
|
||||
<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
|
||||
<div
|
||||
class="bg-immich-primary h-[15px] rounded-md transition-all"
|
||||
style={`width: ${uploadAsset.progress}%`}
|
||||
/>
|
||||
<p class="absolute h-full w-full text-center top-0 text-[10px] ">{uploadAsset.progress}/100</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="rounded-full">
|
||||
<button
|
||||
in:scale={{ duration: 250, easing: quartInOut }}
|
||||
on:click={() => (showDetail = true)}
|
||||
class="absolute -top-4 -left-4 text-xs rounded-full w-10 h-10 p-5 flex place-items-center place-content-center bg-immich-primary text-gray-200"
|
||||
>
|
||||
{$uploadAssetsStore.length}
|
||||
</button>
|
||||
<button
|
||||
in:scale={{ duration: 250, easing: quartInOut }}
|
||||
on:click={() => (showDetail = true)}
|
||||
class="bg-gray-300 p-5 rounded-full w-16 h-16 flex place-items-center place-content-center text-sm shadow-lg "
|
||||
>
|
||||
<div class="animate-pulse">
|
||||
<CloudUploadOutline size="30" color="#4250af" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* width */
|
||||
#upload-item-list::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
#upload-item-list::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
#upload-item-list::-webkit-scrollbar-thumb {
|
||||
background: #4250af68;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
#upload-item-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #4250afad;
|
||||
border-radius: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user