KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add ablum feature to web (#352)

Browse Source 
* Added album page

* Refactor sidebar

* Added album assets count info

* Added album viewer page

* Refactor album sorting

* Fixed incorrectly showing selected asset in album selection

* Improve fetching speed with prefetch

* Refactor to use ImmichThubmnail component for all

* Update to the latest version of Svelte

* Implement fixed app bar in album viewer

* Added shared user avatar

* Correctly get all owned albums, including shared
This commit is contained in:
Alex
2022-07-15 23:18:17 -05:00
committed by GitHub
parent 1887b5a860
commit 7134f93eb8
62 changed files with 2572 additions and 991 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
if (!session.user) {
return {
status: 302,
redirect: '/auth/login',
redirect: '/auth/login'
};
}
@@ -17,8 +17,8 @@
return {
status: 200,
props: {
user: session.user,
},
user: session.user
}
};
};
</script>
@@ -27,26 +27,19 @@
import type { ImmichUser } from '$lib/models/immich-user';
import NavigationBar from '$lib/components/shared/navigation-bar.svelte';
import SideBarButton from '$lib/components/shared/side-bar-button.svelte';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
import { onMount } from 'svelte';
import { fly } from 'svelte/transition';
import { session } from '$app/stores';
import { assetsGroupByDate, flattenAssetGroupByDate } from '$lib/stores/assets';
import ImmichThumbnail from '$lib/components/asset-viewer/immich-thumbnail.svelte';
import ImmichThumbnail from '$lib/components/shared/immich-thumbnail.svelte';
import moment from 'moment';
import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
import StatusBox from '$lib/components/shared/status-box.svelte';
import { fileUploader } from '$lib/utils/file-uploader';
import { AssetResponseDto } from '@api';
import SideBar from '$lib/components/shared/side-bar/side-bar.svelte';
export let user: ImmichUser;
let selectedAction: AppSideBarSelection;
let selectedGroupThumbnail: number | null;
let isMouseOverGroup: boolean;
$: if (isMouseOverGroup == false) {
@@ -57,14 +50,6 @@
let currentViewAssetIndex = 0;
let currentSelectedAsset: AssetResponseDto;
const onButtonClicked = (buttonType: CustomEvent) => {
selectedAction = buttonType.detail['actionType'] as AppSideBarSelection;
};
onMount(async () => {
selectedAction = AppSideBarSelection.PHOTOS;
});
const thumbnailMouseEventHandler = (event: CustomEvent) => {
const { selectedGroupIndex }: { selectedGroupIndex: number } = event.detail;
@@ -92,7 +77,7 @@
const files = Array.from<File>(e.target.files);
const acceptedFile = files.filter(
(e) => e.type.split('/')[0] === 'video' || e.type.split('/')[0] === 'image',
(e) => e.type.split('/')[0] === 'video' || e.type.split('/')[0] === 'image'
);
for (const asset of acceptedFile) {
@@ -109,7 +94,7 @@
</script>
<svelte:head>
<title>Immich - Photos</title>
<title>Photos - Immich</title>
</svelte:head>
<section>
@@ -117,22 +102,7 @@
</section>
<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg">
<!-- Sidebar -->
<section id="sidebar" class="flex flex-col gap-4 pt-8 pr-6">
<SideBarButton
title="Photos"
logo={ImageOutline}
actionType={AppSideBarSelection.PHOTOS}
isSelected={selectedAction === AppSideBarSelection.PHOTOS}
on:selected={onButtonClicked}
/>
<!-- Status Box -->
<div class="mb-6 mt-auto">
<StatusBox />
</div>
</section>
<SideBar />
<!-- Main Section -->
<section class="overflow-y-auto relative">