mirror of https://github.com/immich-app/immich.git
Add ablum feature to web (#352)
* 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 sharedpull/354/head
Alex
GitHub
parent
1887b5a860
commit
7134f93eb8
@ -0,0 +1,14 @@
|
||||
# openapi.model.ThumbnailFormat
|
||||
|
||||
## Load the model package
|
||||
```dart
|
||||
import 'package:openapi/api.dart';
|
||||
```
|
||||
|
||||
## Properties
|
||||
Name | Type | Description | Notes
|
||||
------------ | ------------- | ------------- | -------------
|
||||
|
||||
[[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)
|
||||
|
||||
|
||||
@ -0,0 +1,85 @@
|
||||
//
|
||||
// AUTO-GENERATED FILE, DO NOT MODIFY!
|
||||
//
|
||||
// @dart=2.12
|
||||
|
||||
// ignore_for_file: unused_element, unused_import
|
||||
// ignore_for_file: always_put_required_named_parameters_first
|
||||
// ignore_for_file: constant_identifier_names
|
||||
// ignore_for_file: lines_longer_than_80_chars
|
||||
|
||||
part of openapi.api;
|
||||
|
||||
|
||||
class ThumbnailFormat {
|
||||
/// Instantiate a new enum with the provided [value].
|
||||
const ThumbnailFormat._(this.value);
|
||||
|
||||
/// The underlying value of this enum member.
|
||||
final String value;
|
||||
|
||||
@override
|
||||
String toString() => value;
|
||||
|
||||
String toJson() => value;
|
||||
|
||||
static const JPEG = ThumbnailFormat._(r'JPEG');
|
||||
static const WEBP = ThumbnailFormat._(r'WEBP');
|
||||
|
||||
/// List of all possible values in this [enum][ThumbnailFormat].
|
||||
static const values = <ThumbnailFormat>[
|
||||
JPEG,
|
||||
WEBP,
|
||||
];
|
||||
|
||||
static ThumbnailFormat? fromJson(dynamic value) => ThumbnailFormatTypeTransformer().decode(value);
|
||||
|
||||
static List<ThumbnailFormat>? listFromJson(dynamic json, {bool growable = false,}) {
|
||||
final result = <ThumbnailFormat>[];
|
||||
if (json is List && json.isNotEmpty) {
|
||||
for (final row in json) {
|
||||
final value = ThumbnailFormat.fromJson(row);
|
||||
if (value != null) {
|
||||
result.add(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result.toList(growable: growable);
|
||||
}
|
||||
}
|
||||
|
||||
/// Transformation class that can [encode] an instance of [ThumbnailFormat] to String,
|
||||
/// and [decode] dynamic data back to [ThumbnailFormat].
|
||||
class ThumbnailFormatTypeTransformer {
|
||||
factory ThumbnailFormatTypeTransformer() => _instance ??= const ThumbnailFormatTypeTransformer._();
|
||||
|
||||
const ThumbnailFormatTypeTransformer._();
|
||||
|
||||
String encode(ThumbnailFormat data) => data.value;
|
||||
|
||||
/// Decodes a [dynamic value][data] to a ThumbnailFormat.
|
||||
///
|
||||
/// If [allowNull] is true and the [dynamic value][data] cannot be decoded successfully,
|
||||
/// then null is returned. However, if [allowNull] is false and the [dynamic value][data]
|
||||
/// cannot be decoded successfully, then an [UnimplementedError] is thrown.
|
||||
///
|
||||
/// The [allowNull] is very handy when an API changes and a new enum value is added or removed,
|
||||
/// and users are still using an old app with the old code.
|
||||
ThumbnailFormat? decode(dynamic data, {bool allowNull = true}) {
|
||||
if (data != null) {
|
||||
switch (data.toString()) {
|
||||
case r'JPEG': return ThumbnailFormat.JPEG;
|
||||
case r'WEBP': return ThumbnailFormat.WEBP;
|
||||
default:
|
||||
if (!allowNull) {
|
||||
throw ArgumentError('Unknown enum value to decode: $data');
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/// Singleton [ThumbnailFormatTypeTransformer] instance.
|
||||
static ThumbnailFormatTypeTransformer? _instance;
|
||||
}
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
//
|
||||
// AUTO-GENERATED FILE, DO NOT MODIFY!
|
||||
//
|
||||
// @dart=2.12
|
||||
|
||||
// ignore_for_file: unused_element, unused_import
|
||||
// ignore_for_file: always_put_required_named_parameters_first
|
||||
// ignore_for_file: constant_identifier_names
|
||||
// ignore_for_file: lines_longer_than_80_chars
|
||||
|
||||
import 'package:openapi/api.dart';
|
||||
import 'package:test/test.dart';
|
||||
|
||||
// tests for ThumbnailFormat
|
||||
void main() {
|
||||
|
||||
group('test ThumbnailFormat', () {
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import { ApiProperty } from '@nestjs/swagger';
|
||||
import { Transform } from 'class-transformer';
|
||||
import { IsBoolean, IsNotEmpty, IsOptional, IsString, IsUUID } from 'class-validator';
|
||||
|
||||
export enum GetAssetThumbnailFormatEnum {
|
||||
JPEG = 'JPEG',
|
||||
WEBP = 'WEBP',
|
||||
}
|
||||
|
||||
export class GetAssetThumbnailDto {
|
||||
@IsOptional()
|
||||
@ApiProperty({
|
||||
enum: GetAssetThumbnailFormatEnum,
|
||||
default: GetAssetThumbnailFormatEnum.WEBP,
|
||||
required: false,
|
||||
enumName: 'ThumbnailFormat',
|
||||
})
|
||||
format = GetAssetThumbnailFormatEnum.WEBP;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,13 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
@ -0,0 +1,13 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
@ -1,7 +1,6 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 120,
|
||||
"semi": true
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100
|
||||
}
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
# default-template
|
||||
|
||||
## 0.0.2-next.0
|
||||
### Patch Changes
|
||||
|
||||
|
||||
|
||||
- [chore] upgrade cookie library ([#4592](https://github.com/sveltejs/kit/pull/4592))
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%svelte.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%svelte.head%
|
||||
</head>
|
||||
<body>
|
||||
<div>%svelte.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
import { AlbumResponseDto, api, ThumbnailFormat } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
|
||||
let imageData: string = '/no-thumbnail.png';
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const loadImageData = async (thubmnailId: string | null) => {
|
||||
if (thubmnailId == null) {
|
||||
return '/no-thumbnail.png';
|
||||
}
|
||||
|
||||
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, { responseType: 'blob' });
|
||||
if (data instanceof Blob) {
|
||||
imageData = URL.createObjectURL(data);
|
||||
return imageData;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="h-[339px] w-[275px] hover:cursor-pointer mt-4" on:click={() => dispatch('click', album)}>
|
||||
<div class={`h-[275px] w-[275px]`}>
|
||||
{#await loadImageData(album.albumThumbnailAssetId)}
|
||||
<div class={`bg-immich-primary/10 w-full h-full flex place-items-center place-content-center rounded-xl`}>
|
||||
...
|
||||
</div>
|
||||
{:then imageData}
|
||||
<img
|
||||
in:fade={{ duration: 250 }}
|
||||
src={imageData}
|
||||
alt={album.id}
|
||||
class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:translate-x-2 hover:-translate-y-2 hover:shadow-[-8px_8px_0px_0_#FFB800]`}
|
||||
/>
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<p class="text-sm font-medium text-gray-800">
|
||||
{album.albumName}
|
||||
</p>
|
||||
|
||||
<span class="text-xs flex gap-2">
|
||||
<p>{album.assets.length} items</p>
|
||||
|
||||
{#if album.shared}
|
||||
<p>·</p>
|
||||
<p>Shared</p>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
import { AlbumResponseDto, ThumbnailFormat } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
|
||||
import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
|
||||
import CircleAvatar from '../shared/circle-avatar.svelte';
|
||||
import ImmichThumbnail from '../shared/immich-thumbnail.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
export let album: AlbumResponseDto;
|
||||
let viewWidth: number;
|
||||
let thumbnailSize: number = 300;
|
||||
let border = '';
|
||||
|
||||
$: {
|
||||
if (album.assets.length < 6) {
|
||||
thumbnailSize = Math.floor(viewWidth / album.assets.length - album.assets.length);
|
||||
} else {
|
||||
thumbnailSize = Math.floor(viewWidth / 6 - 6);
|
||||
}
|
||||
}
|
||||
|
||||
const getDateRange = () => {
|
||||
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', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
const endDateString = endDate.toLocaleDateString('us-EN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
return `${startDateString} - ${endDateString}`;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
window.onscroll = (event: Event) => {
|
||||
if (window.pageYOffset > 80) {
|
||||
border = 'border border-gray-200 bg-gray-50';
|
||||
} else {
|
||||
border = '';
|
||||
}
|
||||
};
|
||||
});
|
||||
</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="/albums" title="Go Back">
|
||||
<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')}
|
||||
>
|
||||
<FileImagePlusOutline size="24" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="m-6 py-[72px] px-[160px]">
|
||||
<p class="text-6xl text-immich-primary">
|
||||
{album.albumName}
|
||||
</p>
|
||||
|
||||
<p class="my-4 text-sm text-gray-500">{getDateRange()}</p>
|
||||
|
||||
{#if album.sharedUsers.length > 0}
|
||||
<div class="mb-4">
|
||||
{#each album.sharedUsers as user}
|
||||
<span class="mr-1">
|
||||
<CircleAvatar {user} />
|
||||
</span>
|
||||
{/each}
|
||||
</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} />
|
||||
{:else}
|
||||
<ImmichThumbnail {asset} {thumbnailSize} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
onMount(() => {
|
||||
console.log(user);
|
||||
});
|
||||
|
||||
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}
|
||||
@ -1,15 +0,0 @@
|
||||
export function clickOutside(node: Node) {
|
||||
const handleClick = (event: any) => {
|
||||
if (!node.contains(event.target)) {
|
||||
node.dispatchEvent(new CustomEvent("outclick"));
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("click", handleClick, true);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
document.removeEventListener("click", handleClick, true);
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
<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 SideBarButton from './side-bar-button.svelte';
|
||||
import StatusBox from '../status-box.svelte';
|
||||
|
||||
let selectedAction: AppSideBarSelection;
|
||||
|
||||
const onSidebarButtonClicked = (buttonType: CustomEvent) => {
|
||||
selectedAction = buttonType.detail['actionType'] as AppSideBarSelection;
|
||||
|
||||
if (selectedAction == AppSideBarSelection.PHOTOS) {
|
||||
if ($page.routeId != 'photos') {
|
||||
goto('/photos');
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedAction == AppSideBarSelection.ALBUMS) {
|
||||
if ($page.routeId != 'albums') {
|
||||
goto('/albums');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if ($page.routeId == 'albums') {
|
||||
selectedAction = AppSideBarSelection.ALBUMS;
|
||||
} else if ($page.routeId == 'photos') {
|
||||
selectedAction = AppSideBarSelection.PHOTOS;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<section id="sidebar" class="flex flex-col gap-4 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
|
||||
>
|
||||
|
||||
<div class="text-xs ml-5">
|
||||
<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>
|
||||
@ -1,9 +1,9 @@
|
||||
export enum AdminSideBarSelection {
|
||||
USER_MANAGEMENT = "User management",
|
||||
|
||||
USER_MANAGEMENT = 'User management',
|
||||
}
|
||||
|
||||
export enum AppSideBarSelection {
|
||||
PHOTOS = "Photos",
|
||||
EXPLORE = "Explore",
|
||||
}
|
||||
PHOTOS = 'Photos',
|
||||
EXPLORE = 'Explore',
|
||||
ALBUMS = 'Albums',
|
||||
}
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
export enum AssetType {
|
||||
IMAGE = 'IMAGE',
|
||||
VIDEO = 'VIDEO',
|
||||
AUDIO = 'AUDIO',
|
||||
OTHER = 'OTHER',
|
||||
}
|
||||
|
||||
export type ImmichExif = {
|
||||
id: string;
|
||||
assetId: string;
|
||||
make: string;
|
||||
model: string;
|
||||
imageName: string;
|
||||
exifImageWidth: number;
|
||||
exifImageHeight: number;
|
||||
fileSizeInByte: number;
|
||||
orientation: string;
|
||||
dateTimeOriginal: Date;
|
||||
modifyDate: Date;
|
||||
lensModel: string;
|
||||
fNumber: number;
|
||||
focalLength: number;
|
||||
iso: number;
|
||||
exposureTime: number;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
}
|
||||
|
||||
export type ImmichAssetSmartInfo = {
|
||||
id: string;
|
||||
assetId: string;
|
||||
tags: string[];
|
||||
objects: string[];
|
||||
}
|
||||
|
||||
export type ImmichAsset = {
|
||||
id: string;
|
||||
deviceAssetId: string;
|
||||
userId: string;
|
||||
deviceId: string;
|
||||
type: AssetType;
|
||||
originalPath: string;
|
||||
resizePath: string;
|
||||
createdAt: string;
|
||||
modifiedAt: string;
|
||||
isFavorite: boolean;
|
||||
mimeType: string;
|
||||
duration: string;
|
||||
exifInfo?: ImmichExif;
|
||||
smartInfo?: ImmichAssetSmartInfo;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
export function clickOutside(node: Node) {
|
||||
const handleClick = (event: any) => {
|
||||
if (!node.contains(event.target)) {
|
||||
node.dispatchEvent(new CustomEvent('out-click'));
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleClick, true);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
document.removeEventListener('click', handleClick, true);
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = false;
|
||||
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
import { AlbumResponseDto, api } from '@api';
|
||||
|
||||
export const load: Load = async ({ session, params }) => {
|
||||
if (!session.user) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
}
|
||||
const albumId = params['albumId'];
|
||||
|
||||
let album: AlbumResponseDto;
|
||||
|
||||
try {
|
||||
const { data } = await api.albumApi.getAlbumInfo(albumId);
|
||||
album = data;
|
||||
} catch (e) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/albums'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status: 200,
|
||||
props: {
|
||||
album: album
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import AlbumViewer from '$lib/components/album/album-viewer.svelte';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{album.albumName} - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<AlbumViewer {album} />
|
||||
@ -0,0 +1,94 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = false;
|
||||
|
||||
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
|
||||
|
||||
import NavigationBar from '$lib/components/shared/navigation-bar.svelte';
|
||||
import { ImmichUser } from '$lib/models/immich-user';
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
import SideBar from '$lib/components/shared/side-bar/side-bar.svelte';
|
||||
import { AlbumResponseDto, api } from '@api';
|
||||
|
||||
export const load: Load = async ({ session }) => {
|
||||
if (!session.user) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
}
|
||||
|
||||
let allAlbums: AlbumResponseDto[] = [];
|
||||
try {
|
||||
const { data } = await api.albumApi.getAllAlbums();
|
||||
allAlbums = data;
|
||||
} catch (e) {
|
||||
console.log('Error [getAllAlbums] ', e);
|
||||
}
|
||||
|
||||
return {
|
||||
status: 200,
|
||||
props: {
|
||||
user: session.user,
|
||||
allAlbums: allAlbums
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import AlbumCard from '$lib/components/album/album-card.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let user: ImmichUser;
|
||||
export let allAlbums: AlbumResponseDto[];
|
||||
|
||||
const showAlbum = (event: CustomEvent) => {
|
||||
goto('/albums/' + event.detail.id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Albums - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<NavigationBar {user} on:uploadClicked={() => {}} />
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg">
|
||||
<SideBar />
|
||||
|
||||
<!-- Main Section -->
|
||||
|
||||
<section class="overflow-y-auto relative">
|
||||
<section id="album-content" class="relative pt-8 pl-4 mb-12 bg-immich-bg">
|
||||
<div class="px-4 flex justify-between place-items-center">
|
||||
<div>
|
||||
<p>Albums</p>
|
||||
</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"
|
||||
>
|
||||
<span>
|
||||
<PlusBoxOutline size="18" />
|
||||
</span>
|
||||
<p>Create album</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<!-- Album Card -->
|
||||
<div class="flex flex-wrap gap-8">
|
||||
{#each allAlbums as album}
|
||||
<a sveltekit:prefetch href={`albums/${album.id}`}> <AlbumCard {album} /></a>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@ -1,12 +1,12 @@
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
|
||||
export const post: RequestHandler = async () => {
|
||||
export const POST: RequestHandler = async () => {
|
||||
return {
|
||||
headers: {
|
||||
'Set-Cookie': 'session=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT',
|
||||
'Set-Cookie': 'session=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'
|
||||
},
|
||||
body: {
|
||||
ok: true,
|
||||
},
|
||||
ok: true
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
@ -0,0 +1,15 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import path from 'path';
|
||||
|
||||
/** @type {import('vite').UserConfig} */
|
||||
const config = {
|
||||
resolve: {
|
||||
alias: {
|
||||
'xmlhttprequest-ssl': './node_modules/engine.io-client/lib/xmlhttprequest.js',
|
||||
'@api': path.resolve('./src/api')
|
||||
}
|
||||
},
|
||||
plugins: [sveltekit()]
|
||||
};
|
||||
|
||||
export default config;
|
||||
Loading…
Reference in New Issue