self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

Implement album creation on web (#365)

Browse Source 
* Added album creation button functionality

* Added input for album title

* Added select photos button

* Added page to select assets

* Show photo selection timeline

* Implemented update album name mechanism:

* Added selection mechanism

* Added selection mechanism with existing assets in album

* Refactored and added comments

* Refactored and added comments - 2

* Refactor album app bar

* Added modal for select user

* Implemented choose users

* Added additional share user button

* Added rule to show add users button
This commit is contained in:
Alex 2022-07-22 09:44:22 -05:00 committed by GitHub
parent 02bde51caf
commit 1d34976dd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 787 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server/apps/immich/src/modules/immich-jwt/strategies/jwt.strategy.ts
View File

@ -18,8 +18,8 @@ export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
) {
super({
jwtFromRequest: ExtractJwt.fromExtractors([
immichJwtService.extractJwtFromHeader,
immichJwtService.extractJwtFromCookie,
immichJwtService.extractJwtFromHeader,
]),
ignoreExpiration: false,
secretOrKey: jwtSecret,

53
web/src/app.css
View File

@ -6,26 +6,53 @@
@tailwind utilities;
:root {
font-family: 'Work Sans', sans-serif;
font-family: 'Work Sans', sans-serif;
}
body {
min-height: 100vh;
/* min-height: 100vh; */
margin: 0;
background-color: #f6f8fe;
color: #5f6368;
color: #5f6368;
}
@layer utilities {
.immich-form-input {
@apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm
}
.immich-form-input {
@apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm;
}
.immich-form-label {
@apply font-medium text-sm text-gray-500
}
.immich-form-label {
@apply font-medium text-sm text-gray-500;
}
.immich-btn-primary {
@apply bg-immich-primary text-gray-100 border rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary hover:shadow-lg text-sm font-medium
}
}
.immich-btn-primary {
@apply bg-immich-primary text-gray-100 border rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary hover:shadow-lg text-sm font-medium;
}
.immich-text-button {
@apply flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium;
}
/* width */
.immich-scrollbar::-webkit-scrollbar {
width: 8px;
}
/* Track */
.immich-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 16px;
}
/* Handle */
.immich-scrollbar::-webkit-scrollbar-thumb {
background: rgba(85, 86, 87, 0.408);
border-radius: 16px;
}
/* Handle on hover */
.immich-scrollbar::-webkit-scrollbar-thumb:hover {
background: #4250afad;
border-radius: 16px;
}
}

39
web/src/lib/components/album-page/album-app-bar.svelte Normal file
View File

@ -0,0 +1,39 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import Close from 'svelte-material-icons/Close.svelte';
export let backIcon = Close;
let appBarBorder = '';
const dispatch = createEventDispatcher();
onMount(() => {
window.onscroll = () => {
if (window.pageYOffset > 80) {
appBarBorder = 'border border-gray-200 bg-gray-50';
} else {
appBarBorder = '';
}
};
});
</script>
<div class="fixed top-0 w-full bg-transparent z-[100]">
<div
id="asset-selection-app-bar"
class={`flex justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center`}
>
<div class="flex place-items-center gap-6">
<button
on:click={() => dispatch('close-button-click')}
id="immich-circle-icon-button"
class={`rounded-full p-3 flex place-items-center place-content-center text-gray-600 transition-all hover:bg-gray-200`}
>
<svelte:component this={backIcon} size="24" />
</button>
<slot name="leading" />
</div>
<div class="flex place-items-center gap-6 mr-4">
<slot name="trailing" />
</div>
</div>
</div>

231
web/src/lib/components/album-page/album-viewer.svelte
View File

@ -1,18 +1,30 @@
<script lang="ts">
import { afterNavigate } from '$app/navigation';
import { afterNavigate, goto } from '$app/navigation';
import { page } from '$app/stores';
import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat } from '@api';
import { AlbumResponseDto, api, AssetResponseDto, ThumbnailFormat, UserResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import Plus from 'svelte-material-icons/Plus.svelte';
import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
import AssetViewer from '../asset-viewer/asset-viewer.svelte';
import CircleAvatar from '../shared-components/circle-avatar.svelte';
import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
import AssetSelection from './asset-selection.svelte';
import _ from 'lodash-es';
import { assets } from '$app/paths';
import UserSelection from './user-selection-modal.svelte';
import AlbumAppBar from './album-app-bar.svelte';
import UserSelectionModal from './user-selection-modal.svelte';
const dispatch = createEventDispatcher();
export let album: AlbumResponseDto;
let isShowAssetViewer = false;
let isShowAssetSelection = false;
let isShowShareUserSelection = false;
let isEditingTitle = false;
let isCreatingSharedAlbum = false;
let selectedAsset: AssetResponseDto;
let currentViewAssetIndex = 0;
@ -20,10 +32,20 @@
let thumbnailSize: number = 300;
let border = '';
let backUrl = '/albums';
let currentAlbumName = '';
let currentUser: UserResponseDto;
let bodyElement: HTMLElement;
afterNavigate(({ from, to }) => {
$: isOwned = currentUser?.id == album.ownerId;
afterNavigate(({ from }) => {
backUrl = from?.pathname ?? '/albums';
if (from?.pathname === '/sharing') {
isCreatingSharedAlbum = true;
}
});
$: {
if (album.assets.length < 6) {
thumbnailSize = Math.floor(viewWidth / album.assets.length - album.assets.length);
@ -36,20 +58,18 @@
const startDate = new Date(album.assets[0].createdAt);
const endDate = new Date(album.assets[album.assets.length - 1].createdAt);
const startDateString = startDate.toLocaleDateString('us-EN', {
const timeFormatOption: Intl.DateTimeFormatOptions = {
month: 'short',
day: 'numeric',
year: 'numeric'
});
const endDateString = endDate.toLocaleDateString('us-EN', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
};
const startDateString = startDate.toLocaleDateString('us-EN', timeFormatOption);
const endDateString = endDate.toLocaleDateString('us-EN', timeFormatOption);
return `${startDateString} - ${endDateString}`;
};
onMount(() => {
onMount(async () => {
window.onscroll = (event: Event) => {
if (window.pageYOffset > 80) {
border = 'border border-gray-200 bg-gray-50';
@ -57,6 +77,15 @@
border = '';
}
};
currentAlbumName = album.albumName;
try {
const { data } = await api.userApi.getMyUserInfo();
currentUser = data;
} catch (e) {
console.log('Error [getMyUserInfo - album-viewer] ', e);
}
});
const viewAsset = (event: CustomEvent) => {
@ -102,62 +131,152 @@
isShowAssetViewer = false;
history.pushState(null, '', `${$page.url.pathname}`);
};
// Update Album Name
$: {
if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
api.albumApi
.updateAlbumInfo(album.id, {
ownerId: album.ownerId,
albumName: album.albumName
})
.then(() => {
currentAlbumName = album.albumName;
})
.catch((e) => {
console.log('Error [updateAlbumInfo] ', e);
});
}
}
const createAlbumHandler = async (event: CustomEvent) => {
const { assets }: { assets: string[] } = event.detail;
try {
const { data } = await api.albumApi.addAssetsToAlbum(album.id, { assetIds: assets });
album = data;
isShowAssetSelection = false;
} catch (e) {
console.log('Error [createAlbumHandler] ', e);
}
};
const addUserHandler = async (event: CustomEvent) => {
const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
try {
const { data } = await api.albumApi.addUsersToAlbum(album.id, {
sharedUserIds: Array.from(selectedUsers).map((u) => u.id)
});
album = data;
isShowShareUserSelection = false;
} catch (e) {
console.log('Error [createAlbumHandler] ', e);
}
};
// Prevent scrolling when modal is open
$: {
if (isShowShareUserSelection == true) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}
</script>
<section class="w-screen h-screen bg-immich-bg">
<div class="fixed top-0 w-full bg-immich-bg z-[100]">
<div class={`flex justify-between rounded-lg ${border} p-2 mx-2 mt-2 transition-all`}>
<a sveltekit:prefetch href={backUrl} title="Go Back">
<svelte:body bind:this={bodyElement} />
<section class="bg-immich-bg relative">
<AlbumAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
<svelte:fragment slot="trailing">
{#if album.assets.length > 0}
<button
id="immich-circle-icon-button"
class={`rounded-full p-3 flex place-items-center place-content-center text-gray-600 transition-all hover:bg-gray-200`}
>
<ArrowLeft size="24" />
</button>
</a>
<div class="right-button-group" title="Add Photos">
<button
id="immich-circle-icon-button"
class={`rounded-full p-3 flex place-items-center place-content-center text-gray-600 transition-all hover:bg-gray-200`}
on:click={() => dispatch('click')}
on:click={() => (isShowAssetSelection = true)}
>
<FileImagePlusOutline size="24" />
</button>
</div>
</div>
</div>
{/if}
<section class="m-6 py-[72px] px-[160px]">
<p class="text-6xl text-immich-primary">
{album.albumName}
</p>
{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
<button
disabled={album.assets.length == 0}
on:click={() => (isShowShareUserSelection = true)}
class="immich-text-button border bg-immich-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed"
><span class="px-2">Share</span></button
>
{/if}
</svelte:fragment>
</AlbumAppBar>
<p class="my-4 text-sm text-gray-500">{getDateRange()}</p>
<section class="m-auto my-[160px] w-[60%]">
<input
on:focus={() => (isEditingTitle = true)}
on:blur={() => (isEditingTitle = false)}
class={`transition-all text-6xl text-immich-primary w-[99%] border-b-2 border-transparent outline-none ${
isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
} focus:outline-none focus:border-b-2 focus:border-immich-primary bg-immich-bg`}
type="text"
bind:value={album.albumName}
disabled={!isOwned}
/>
{#if album.sharedUsers.length > 0}
<div class="mb-4">
{#if album.assets.length > 0}
<p class="my-4 text-sm text-gray-500">{getDateRange()}</p>
{/if}
{#if album.shared}
<div class="my-4 flex">
{#each album.sharedUsers as user}
<span class="mr-1">
<CircleAvatar {user} />
</span>
{/each}
<button
style:display={isOwned ? 'block' : 'none'}
on:click={() => (isShowShareUserSelection = true)}
title="Add more users"
class="h-12 w-12 border bg-white transition-colors hover:bg-gray-300 text-3xl flex place-items-center place-content-center rounded-full"
>+</button
>
</div>
{/if}
<div class="flex flex-wrap gap-1 w-full" bind:clientWidth={viewWidth}>
{#each album.assets as asset}
{#if album.assets.length < 7}
<ImmichThumbnail
{asset}
{thumbnailSize}
format={ThumbnailFormat.Jpeg}
on:viewAsset={viewAsset}
/>
{:else}
<ImmichThumbnail {asset} {thumbnailSize} on:viewAsset={viewAsset} />
{/if}
{/each}
</div>
{#if album.assets.length > 0}
<div class="flex flex-wrap gap-1 w-full" bind:clientWidth={viewWidth}>
{#each album.assets as asset}
{#if album.assets.length < 7}
<ImmichThumbnail
{asset}
{thumbnailSize}
format={ThumbnailFormat.Jpeg}
on:click={viewAsset}
/>
{:else}
<ImmichThumbnail {asset} {thumbnailSize} on:click={viewAsset} />
{/if}
{/each}
</div>
{:else}
<!-- Album is empty - Show asset selectection buttons -->
<section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
<div class="w-[300px]">
<p class="text-xs">ADD PHOTOS</p>
<button
on:click={() => (isShowAssetSelection = true)}
class="w-full py-8 border bg-white rounded-md mt-5 flex place-items-center gap-6 px-8 transition-all hover:bg-gray-100 hover:text-immich-primary"
>
<span><Plus color="#4250af" size="24" /> </span>
<span class="text-lg text-immich-fg">Select photos</span>
</button>
</div>
</section>
{/if}
</section>
</section>
@ -170,3 +289,19 @@
on:close={closeViewer}
/>
{/if}
{#if isShowAssetSelection}
<AssetSelection
assetsInAlbum={album.assets}
on:go-back={() => (isShowAssetSelection = false)}
on:create-album={createAlbumHandler}
/>
{/if}
{#if isShowShareUserSelection}
<UserSelectionModal
on:close={() => (isShowShareUserSelection = false)}
on:add-user={addUserHandler}
sharedUsersInAlbum={new Set(album.sharedUsers)}
/>
{/if}

197
web/src/lib/components/album-page/asset-selection.svelte Normal file
View File

@ -0,0 +1,197 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { assetsGroupByDate, flattenAssetGroupByDate } from '$lib/stores/assets';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
import moment from 'moment';
import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
import { AssetResponseDto } from '@api';
import AlbumAppBar from './album-app-bar.svelte';
const dispatch = createEventDispatcher();
export let assetsInAlbum: AssetResponseDto[];
let selectedAsset: Set<string> = new Set();
let selectedGroup: Set<number> = new Set();
let existingGroup: Set<number> = new Set();
let groupWithAssetsInAlbum: Record<number, Set<string>> = {};
onMount(() => scanForExistingSelectedGroup());
const selectAssetHandler = (assetId: string, groupIndex: number) => {
const tempSelectedAsset = new Set(selectedAsset);
if (selectedAsset.has(assetId)) {
tempSelectedAsset.delete(assetId);
const tempSelectedGroup = new Set(selectedGroup);
tempSelectedGroup.delete(groupIndex);
selectedGroup = tempSelectedGroup;
} else {
tempSelectedAsset.add(assetId);
}
selectedAsset = tempSelectedAsset;
// Check if all assets are selected in a group to toggle the group selection's icon
if (!selectedGroup.has(groupIndex)) {
const assetsInGroup = $assetsGroupByDate[groupIndex];
let selectedAssetsInGroupCount = 0;
assetsInGroup.forEach((asset) => {
if (selectedAsset.has(asset.id)) {
selectedAssetsInGroupCount++;
}
});
// Taking into account of assets in group that are already in album
if (groupWithAssetsInAlbum[groupIndex]) {
selectedAssetsInGroupCount += groupWithAssetsInAlbum[groupIndex].size;
}
// if all assets are selected in a group, add the group to selected group
if (selectedAssetsInGroupCount == assetsInGroup.length) {
selectedGroup = selectedGroup.add(groupIndex);
}
}
};
const selectAssetGroupHandler = (groupIndex: number) => {
if (existingGroup.has(groupIndex)) return;
let tempSelectedGroup = new Set(selectedGroup);
let tempSelectedAsset = new Set(selectedAsset);
if (selectedGroup.has(groupIndex)) {
tempSelectedGroup.delete(groupIndex);
tempSelectedAsset.forEach((assetId) => {
if ($assetsGroupByDate[groupIndex].find((a) => a.id == assetId)) {
tempSelectedAsset.delete(assetId);
}
});
} else {
tempSelectedGroup.add(groupIndex);
tempSelectedAsset = new Set([
...selectedAsset,
...$assetsGroupByDate[groupIndex].map((a) => a.id)
]);
}
// Remove existed assets in the date group
if (groupWithAssetsInAlbum[groupIndex]) {
tempSelectedAsset.forEach((assetId) => {
if (groupWithAssetsInAlbum[groupIndex].has(assetId)) {
tempSelectedAsset.delete(assetId);
}
});
}
selectedAsset = tempSelectedAsset;
selectedGroup = tempSelectedGroup;
};
const addSelectedAssets = async () => {
dispatch('create-album', {
assets: Array.from(selectedAsset)
});
};
/**
* This function is used to scan for existing selected group in the album
* and format it into the form of Record<any, Set<string>> to conditionally render and perform interaction
* relationship between the noneselected assets/groups
* with the existing assets/groups
*/
const scanForExistingSelectedGroup = () => {
if (assetsInAlbum) {
// Convert to each assetGroup to set of assetIds
const distinctAssetGroup = $assetsGroupByDate.map((assetGroup) => {
return new Set(assetGroup.map((asset) => asset.id));
});
// Find the group that contains all existed assets with the same set of assetIds
for (const assetInAlbum of assetsInAlbum) {
distinctAssetGroup.forEach((group, index) => {
if (group.has(assetInAlbum.id)) {
groupWithAssetsInAlbum[index] = new Set(groupWithAssetsInAlbum[index] || []).add(
assetInAlbum.id
);
}
});
}
Object.keys(groupWithAssetsInAlbum).forEach((key) => {
if (distinctAssetGroup[parseInt(key)].size == groupWithAssetsInAlbum[parseInt(key)].size) {
existingGroup = existingGroup.add(parseInt(key));
}
});
}
};
</script>
<section
transition:fly={{ y: 1000, duration: 200, easing: quintOut }}
class="absolute top-0 left-0 w-full h-full bg-immich-bg z-[200]"
>
<AlbumAppBar on:close-button-click={() => dispatch('go-back')}>
<svelte:fragment slot="leading">
{#if selectedAsset.size == 0}
<p class="text-lg">Add to album</p>
{:else}
<p class="text-lg">{selectedAsset.size} selected</p>
{/if}
</svelte:fragment>
<svelte:fragment slot="trailing">
<button
disabled={selectedAsset.size === 0}
on:click={addSelectedAssets}
class="immich-text-button border bg-immich-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed"
><span class="px-2">Done</span></button
>
</svelte:fragment>
</AlbumAppBar>
<section id="image-grid" class="flex flex-wrap gap-14 mt-[160px] px-20">
{#each $assetsGroupByDate as assetsInDateGroup, groupIndex}
<!-- Asset Group By Date -->
<div class="flex flex-col">
<!-- Date group title -->
<p class="font-medium text-sm text-immich-fg mb-2 flex place-items-center h-6">
<span
in:fly={{ x: -24, duration: 200, opacity: 0.5 }}
out:fly={{ x: -24, duration: 200 }}
class="inline-block px-2 hover:cursor-pointer"
on:click={() => selectAssetGroupHandler(groupIndex)}
>
{#if selectedGroup.has(groupIndex)}
<CheckCircle size="24" color="#4250af" />
{:else if existingGroup.has(groupIndex)}
<CheckCircle size="24" color="#757575" />
{:else}
<CircleOutline size="24" color="#757575" />
{/if}
</span>
{moment(assetsInDateGroup[0].createdAt).format('ddd, MMM DD YYYY')}
</p>
<!-- Image grid -->
<div class="flex flex-wrap gap-[2px]">
{#each assetsInDateGroup as asset}
<ImmichThumbnail
{asset}
on:click={() => selectAssetHandler(asset.id, groupIndex)}
{groupIndex}
selected={selectedAsset.has(asset.id)}
isExisted={assetsInAlbum.findIndex((a) => a.id == asset.id) != -1}
/>
{/each}
</div>
</div>
{/each}
</section>
</section>

117
web/src/lib/components/album-page/user-selection-modal.svelte Normal file
View File

@ -0,0 +1,117 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { api, UserResponseDto } from '@api';
import BaseModal from '../shared-components/base-modal.svelte';
import CircleAvatar from '../shared-components/circle-avatar.svelte';
export let sharedUsersInAlbum: Set<UserResponseDto>;
let users: UserResponseDto[] = [];
let selectedUsers: Set<UserResponseDto> = new Set();
const dispatch = createEventDispatcher();
onMount(async () => {
const { data } = await api.userApi.getAllUsers(false);
users = data;
// Remove the existed shared users from the album
sharedUsersInAlbum.forEach((sharedUser) => {
users = users.filter((user) => user.id !== sharedUser.id);
});
});
const selectUser = (user: UserResponseDto) => {
const tempSelectedUsers = new Set(selectedUsers);
if (selectedUsers.has(user)) {
tempSelectedUsers.delete(user);
} else {
tempSelectedUsers.add(user);
}
selectedUsers = tempSelectedUsers;
};
const deselectUser = (user: UserResponseDto) => {
const tempSelectedUsers = new Set(selectedUsers);
tempSelectedUsers.delete(user);
selectedUsers = tempSelectedUsers;
};
</script>
<BaseModal on:close={() => dispatch('close')}>
<svelte:fragment slot="title">
<span class="flex gap-2 place-items-center">
<img src="/immich-logo.svg" width="24" alt="Immich" />
<p class="font-medium text-immich-fg">Invite to album</p>
</span>
</svelte:fragment>
<div class="max-h-[400px] overflow-y-auto immich-scrollbar">
{#if selectedUsers.size > 0}
<div class="flex gap-4 py-2 px-5 overflow-x-auto place-items-center mb-2">
<p class="font-medium">To</p>
{#each Array.from(selectedUsers) as user}
<button
on:click={() => deselectUser(user)}
class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 transition-colors"
>
<CircleAvatar size={28} {user} />
<p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
</button>
{/each}
</div>
{/if}
{#if users.length > 0}
<p class="text-xs font-medium px-5">SUGGESTIONS</p>
<div class="my-4">
{#each users as user}
<button
on:click={() => selectUser(user)}
class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 transition-all"
>
{#if selectedUsers.has(user)}
<span
class="bg-immich-primary text-white rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl"
>✓</span
>
{:else}
<CircleAvatar {user} />
{/if}
<div class="text-left">
<p class="text-immich-fg">
{user.firstName}
{user.lastName}
</p>
<p class="text-xs ">
{user.email}
</p>
</div>
</button>
{/each}
</div>
{:else}
<p class="text-sm px-5">
Looks like you have shared this album with all users or you don't have any user to share
with.
</p>
{/if}
{#if selectedUsers.size > 0}
<div class="flex place-content-end p-5 ">
<button
on:click={() => dispatch('add-user', { selectedUsers })}
class="text-white bg-immich-primary px-4 py-2 rounded-lg text-sm font-bold transition-colors hover:bg-immich-primary/75"
>Add</button
>
</div>
{/if}
</div>
</BaseModal>

31
web/src/lib/components/shared-components/base-modal.svelte Normal file
View File

@ -0,0 +1,31 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import Close from 'svelte-material-icons/Close.svelte';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
</script>
<div
id="immich-modal"
transition:fly={{ y: 1000, duration: 200, easing: quintOut }}
class="absolute top-0 w-screen h-screen z-[9999] bg-black/50 flex place-items-center place-content-center"
>
<div class="bg-white w-[450px] min-h-[200px] max-h-[500px] rounded-lg shadow-md">
<div class="flex justify-between place-items-center p-5">
<div>
<slot name="title">
<p>Modal Title</p>
</slot>
</div>
<button on:click={() => dispatch('close')}>
<Close size="24" />
</button>
</div>
<div class="mt-4">
<slot />
</div>
</div>
</div>

14
web/src/lib/components/shared-components/circle-avatar.svelte
View File

@ -1,9 +1,11 @@
<script lang="ts">
import { api, UserResponseDto } from '@api';
import { onMount } from 'svelte';
export let user: UserResponseDto;
// Avatar Size In Pixel
export let size: number = 48;
const getUserAvatar = async () => {
try {
const { data } = await api.userApi.getProfileImage(user.id, {
@ -20,12 +22,18 @@
</script>
{#await getUserAvatar()}
<div class="w-12 h-12 rounded-full bg-immich-primary/25" />
<div
style:width={`${size}px`}
style:height={`${size}px`}
class={` 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"
style:width={`${size}px`}
style:height={`${size}px`}
class={`inline rounded-full object-cover border shadow-md`}
title={user.email}
/>
{/await}

124
web/src/lib/components/shared-components/immich-thumbnail.svelte
View File

@ -15,6 +15,8 @@
export let groupIndex = 0;
export let thumbnailSize: number | undefined = undefined;
export let format: ThumbnailFormat = ThumbnailFormat.Webp;
export let selected: boolean = false;
export let isExisted: boolean = false;
let imageData: string;
let videoData: string;
@ -27,6 +29,7 @@
let isThumbnailVideoPlaying = false;
let calculateVideoDurationIntervalHandler: NodeJS.Timer;
let videoProgress = '00:00';
let videoAbortController: AbortController;
const loadImageData = async () => {
if ($session.user) {
@ -42,52 +45,51 @@
const loadVideoData = async () => {
isThumbnailVideoPlaying = false;
videoAbortController = new AbortController();
if ($session.user) {
try {
const { data } = await api.assetApi.serveFile(
asset.deviceAssetId,
asset.deviceId,
false,
true,
{
responseType: 'blob'
}
);
if (!(data instanceof Blob)) {
return;
try {
const { data } = await api.assetApi.serveFile(
asset.deviceAssetId,
asset.deviceId,
false,
true,
{
responseType: 'blob',
signal: videoAbortController.signal
}
);
videoData = URL.createObjectURL(data);
if (!(data instanceof Blob)) {
return;
}
videoPlayerNode.src = videoData;
// videoPlayerNode.src = videoData + '#t=0,5';
videoData = URL.createObjectURL(data);
videoPlayerNode.load();
videoPlayerNode.src = videoData;
videoPlayerNode.onloadeddata = () => {
console.log('first frame load');
};
videoPlayerNode.load();
videoPlayerNode.oncanplaythrough = () => {
console.log('can play through');
};
videoPlayerNode.onloadeddata = () => {
console.log('first frame load');
};
videoPlayerNode.oncanplay = () => {
console.log('can play');
videoPlayerNode.muted = true;
videoPlayerNode.play();
videoPlayerNode.oncanplaythrough = () => {
console.log('can play through');
};
isThumbnailVideoPlaying = true;
calculateVideoDurationIntervalHandler = setInterval(() => {
videoProgress = getVideoDurationInString(Math.round(videoPlayerNode.currentTime));
}, 1000);
};
videoPlayerNode.oncanplay = () => {
console.log('can play');
videoPlayerNode.muted = true;
videoPlayerNode.play();
return videoData;
} catch (e) {}
}
isThumbnailVideoPlaying = true;
calculateVideoDurationIntervalHandler = setInterval(() => {
videoProgress = getVideoDurationInString(Math.round(videoPlayerNode.currentTime));
}, 1000);
};
return videoData;
} catch (e) {}
};
const getVideoDurationInString = (currentTime: number) => {
@ -137,6 +139,11 @@
const handleMouseLeaveThumbnail = () => {
mouseOver = false;
// Stop XHR download of video
videoAbortController?.abort();
// Stop video playback
URL.revokeObjectURL(videoData);
clearInterval(calculateVideoDurationIntervalHandler);
@ -144,28 +151,59 @@
isThumbnailVideoPlaying = false;
videoProgress = '00:00';
};
$: getThumbnailBorderStyle = () => {
if (selected) {
return 'border-[20px] border-immich-primary/20';
} else if (isExisted) {
return 'border-[20px] border-gray-300';
} else {
return '';
}
};
$: getOverlaySelectorIconStyle = () => {
if (selected || isExisted) {
return '';
} else {
return 'bg-gradient-to-b from-gray-800/50';
}
};
const thumbnailClickedHandler = () => {
if (!isExisted) {
dispatch('click', { assetId: asset.id, deviceId: asset.deviceId });
}
};
</script>
<IntersectionObserver once={true} let:intersecting>
<div
style:width={`${thumbnailSize}px`}
style:height={`${thumbnailSize}px`}
class={`bg-gray-100 relative hover:cursor-pointer ${getSize()}`}
class={`bg-gray-100 relative ${getSize()} ${
isExisted ? 'cursor-not-allowed' : 'hover:cursor-pointer'
}`}
on:mouseenter={handleMouseOverThumbnail}
on:mouseleave={handleMouseLeaveThumbnail}
on:click={() => dispatch('viewAsset', { assetId: asset.id, deviceId: asset.deviceId })}
on:click={thumbnailClickedHandler}
>
{#if mouseOver}
{#if mouseOver || selected || isExisted}
<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"
class={`w-full ${getOverlaySelectorIconStyle()} 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'} />
{#if selected}
<CheckCircle size="24" color="#4250af" />
{:else if isExisted}
<CheckCircle size="24" color="#252525" />
{:else}
<CheckCircle size="24" color={mouseOverIcon ? 'white' : '#d8dadb'} />
{/if}
</div>
</div>
{/if}
@ -209,7 +247,7 @@
<div
style:width={`${thumbnailSize}px`}
style:height={`${thumbnailSize}px`}
class={`bg-immich-primary/10 ${getSize()} flex place-items-center place-content-center`}
class={`bg-immich-primary/10 ${getSize()} flex place-items-center place-content-center `}
>
...
</div>
@ -220,7 +258,7 @@
in:fade={{ duration: 250 }}
src={imageData}
alt={asset.id}
class={`object-cover ${getSize()} transition-all duration-100 z-0`}
class={`object-cover ${getSize()} transition-all duration-100 z-0 ${getThumbnailBorderStyle()}`}
loading="lazy"
/>
{/await}

11
web/src/lib/components/shared-components/navigation-bar.svelte
View File

@ -61,14 +61,17 @@
<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" />
<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"
class="immich-text-button"
>
<TrayArrowUp size="20" />
<span> Upload </span>
@ -158,7 +161,9 @@
</div>
<div class="mb-6">
<button class="border rounded-3xl px-6 py-2 hover:bg-gray-50" on:click={logOut}>Sign Out</button>
<button class="border rounded-3xl px-6 py-2 hover:bg-gray-50" on:click={logOut}
>Sign Out</button
>
</div>
</div>
{/if}

39
web/src/lib/components/shared-components/upload-panel.svelte
View File

@ -79,9 +79,7 @@
isUploading = value;
if (isUploading == false) {
if ($session.user) {
getAssetsInfo($session.user.accessToken);
}
getAssetsInfo();
}
});
</script>
@ -107,7 +105,7 @@
</button>
</div>
<div id="upload-item-list" class="max-h-[400px] overflow-y-auto pr-2 rounded-lg">
<div class="max-h-[400px] overflow-y-auto pr-2 rounded-lg immich-scrollbar">
{#each $uploadAssetsStore as uploadAsset}
<div
in:fade={{ duration: 250 }}
@ -136,7 +134,9 @@
<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}`}
value={`[${getSizeInHumanReadableFormat(uploadAsset.file.size)}] ${
uploadAsset.file.name
}`}
/>
<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
@ -144,7 +144,9 @@
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>
<p class="absolute h-full w-full text-center top-0 text-[10px] ">
{uploadAsset.progress}/100
</p>
</div>
</div>
</div>
@ -173,28 +175,3 @@
{/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>

57
web/src/routes/albums/index.svelte
View File

@ -17,10 +17,10 @@
};
}
let allAlbums: AlbumResponseDto[] = [];
let albums: AlbumResponseDto[] = [];
try {
const { data } = await api.albumApi.getAllAlbums();
allAlbums = data;
albums = data;
} catch (e) {
console.log('Error [getAllAlbums] ', e);
}
@ -29,7 +29,7 @@
status: 200,
props: {
user: session.user,
allAlbums: allAlbums
albums: albums
}
};
};
@ -38,12 +38,47 @@
<script lang="ts">
import AlbumCard from '$lib/components/album-page/album-card.svelte';
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
export let user: ImmichUser;
export let allAlbums: AlbumResponseDto[];
export let albums: AlbumResponseDto[];
const showAlbum = (event: CustomEvent) => {
goto('/albums/' + event.detail.id);
onMount(async () => {
const { data } = await api.albumApi.getAllAlbums();
albums = data;
// Delete album that has no photos and is named 'Untitled'
for (const album of albums) {
if (album.albumName === 'Untitled' && album.assets.length === 0) {
const isDeleted = await deleteAlbum(album);
if (isDeleted) {
albums = albums.filter((a) => a.id !== album.id);
}
}
}
});
const createAlbum = async () => {
try {
const { data: newAlbum } = await api.albumApi.createAlbum({
albumName: 'Untitled'
});
goto('/albums/' + newAlbum.id);
} catch (e) {
console.log('Error [createAlbum] ', e);
}
};
const deleteAlbum = async (album: AlbumResponseDto) => {
try {
await api.albumApi.deleteAlbum(album.id);
return true;
} catch (e) {
console.log('Error [deleteAlbum] ', e);
return false;
}
};
</script>
@ -68,9 +103,7 @@
</div>
<div>
<button
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700"
>
<button on:click={createAlbum} class="immich-text-button text-sm">
<span>
<PlusBoxOutline size="18" />
</span>
@ -85,8 +118,10 @@
<!-- Album Card -->
<div class="flex flex-wrap gap-8">
{#each allAlbums as album}
<a sveltekit:prefetch href={`albums/${album.id}`}> <AlbumCard {album} /></a>
{#each albums as album}
<a sveltekit:prefetch href={`albums/${album.id}`}>
<AlbumCard {album} />
</a>
{/each}
</div>
</section>

2
web/src/routes/photos/index.svelte
View File

@ -173,7 +173,7 @@
<ImmichThumbnail
{asset}
on:mouseEvent={thumbnailMouseEventHandler}
on:viewAsset={viewAssetHandler}
on:click={viewAssetHandler}
{groupIndex}
/>
{/each}

24
web/src/routes/sharing/index.svelte
View File

@ -28,6 +28,28 @@
}
};
};
const createSharedAlbum = async () => {
try {
const { data: newAlbum } = await api.albumApi.createAlbum({
albumName: 'Untitled'
});
goto('/albums/' + newAlbum.id);
} catch (e) {
console.log('Error [createAlbum] ', e);
}
};
const deleteAlbum = async (album: AlbumResponseDto) => {
try {
await api.albumApi.deleteAlbum(album.id);
return true;
} catch (e) {
console.log('Error [deleteAlbum] ', e);
return false;
}
};
</script>
<script lang="ts">
@ -36,6 +58,7 @@
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
import AlbumCard from '$lib/components/album-page/album-card.svelte';
import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
import { goto } from '$app/navigation';
export let user: UserResponseDto;
export let sharedAlbums: AlbumResponseDto[];
@ -62,6 +85,7 @@
<div>
<button
on:click={createSharedAlbum}
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700"
>
<span>