mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web): Memory (#2759)
* Add on this day * add query for x year * dev: add query * dev: front end * dev: styling * styling * more styling * add new page * navigating * navigate back and forth * styling * show gallery * fix test * fix test * show previous and next title * fix test * show up down scrolling button * more styling * styling * fix app bar * fix height of next/previous * autoplay * auto play * refactor * refactor * refactor * show date * Navigate * finish * pr feedback
This commit is contained in:
Alex
GitHub
parent
408fa45c51
commit
43ec0b77a0
27 changed files with 1033 additions and 10 deletions
|
|
@ -86,7 +86,7 @@
|
|||
afterNavigate(({ from }) => {
|
||||
backUrl = from?.url.pathname ?? '/albums';
|
||||
|
||||
if (from?.url.pathname === '/sharing') {
|
||||
if (from?.url.pathname === '/sharing' && album.sharedUsers.length === 0) {
|
||||
isCreatingSharedAlbum = true;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,16 +7,17 @@
|
|||
export let size = '24';
|
||||
export let title = '';
|
||||
export let isOpacity = false;
|
||||
export let forceDark = false;
|
||||
</script>
|
||||
|
||||
<button
|
||||
{title}
|
||||
style:background-color={backgroundColor}
|
||||
style:--immich-icon-button-hover-color={hoverColor}
|
||||
class="dark:text-immich-dark-fg rounded-full p-3 flex place-items-center place-content-center transition-all
|
||||
{isOpacity
|
||||
? 'hover:bg-immich-bg/30'
|
||||
: 'immich-circle-icon-button hover:dark:text-immich-dark-gray'}"
|
||||
class:dark:text-immich-dark-fg={!forceDark}
|
||||
class="rounded-full p-3 flex place-items-center place-content-center transition-all
|
||||
{isOpacity ? 'hover:bg-immich-bg/30' : 'immich-circle-icon-button hover:dark:text-immich-dark-gray'}
|
||||
{forceDark && 'hover:text-black'}"
|
||||
on:click
|
||||
>
|
||||
<svelte:component this={logo} {size} />
|
||||
|
|
|
|||
354
web/src/lib/components/memory-page/memory-viewer.svelte
Normal file
354
web/src/lib/components/memory-page/memory-viewer.svelte
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
<script lang="ts">
|
||||
import { memoryStore } from '$lib/stores/memory.store';
|
||||
import { DateTime } from 'luxon';
|
||||
import { onMount } from 'svelte';
|
||||
import { MemoryLaneResponseDto, api } from '@api';
|
||||
import { goto } from '$app/navigation';
|
||||
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
|
||||
import Play from 'svelte-material-icons/Play.svelte';
|
||||
import Pause from 'svelte-material-icons/Pause.svelte';
|
||||
import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
|
||||
import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
|
||||
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
|
||||
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { page } from '$app/stores';
|
||||
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
|
||||
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
let currentIndex = 0;
|
||||
let currentMemory: MemoryLaneResponseDto;
|
||||
let nextMemory: MemoryLaneResponseDto;
|
||||
let lastMemory: MemoryLaneResponseDto;
|
||||
|
||||
let lastIndex = 0;
|
||||
let nextIndex = 0;
|
||||
$: showNextMemory = nextIndex <= $memoryStore?.length - 1;
|
||||
$: showPreviousMemory = currentIndex != 0;
|
||||
|
||||
let memoryGallery: HTMLElement;
|
||||
let memoryWrapper: HTMLElement;
|
||||
let galleryInView = false;
|
||||
|
||||
onMount(async () => {
|
||||
if (!$memoryStore) {
|
||||
const timezone = DateTime.local().zoneName;
|
||||
const { data } = await api.assetApi.getMemoryLane({ timezone });
|
||||
$memoryStore = data;
|
||||
}
|
||||
|
||||
const queryIndex = $page.url.searchParams.get('index');
|
||||
if (queryIndex != null) {
|
||||
currentIndex = parseInt(queryIndex);
|
||||
if (isNaN(currentIndex) || currentIndex > $memoryStore.length - 1) {
|
||||
currentIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
currentMemory = $memoryStore[currentIndex];
|
||||
|
||||
nextIndex = currentIndex + 1;
|
||||
nextMemory = $memoryStore[nextIndex];
|
||||
|
||||
if (currentIndex > 0) {
|
||||
lastMemory = $memoryStore[lastIndex];
|
||||
}
|
||||
});
|
||||
|
||||
const toNextMemory = (): boolean => {
|
||||
if (showNextMemory) {
|
||||
resetAutoPlay();
|
||||
|
||||
currentIndex++;
|
||||
nextIndex = currentIndex + 1;
|
||||
lastIndex = currentIndex - 1;
|
||||
|
||||
currentMemory = $memoryStore[currentIndex];
|
||||
nextMemory = $memoryStore[nextIndex];
|
||||
lastMemory = $memoryStore[lastIndex];
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const toPreviousMemory = () => {
|
||||
if (showPreviousMemory) {
|
||||
resetAutoPlay();
|
||||
|
||||
currentIndex--;
|
||||
nextIndex = currentIndex + 1;
|
||||
lastIndex = currentIndex - 1;
|
||||
|
||||
currentMemory = $memoryStore[currentIndex];
|
||||
nextMemory = $memoryStore[nextIndex];
|
||||
lastMemory = $memoryStore[lastIndex];
|
||||
}
|
||||
};
|
||||
|
||||
let autoPlayInterval: NodeJS.Timeout;
|
||||
let autoPlay = false;
|
||||
let autoPlaySpeed = 5000;
|
||||
let autoPlayProgress = 0;
|
||||
let autoPlayIndex = 0;
|
||||
let canPlayNext = true;
|
||||
|
||||
const toggleAutoPlay = () => {
|
||||
autoPlay = !autoPlay;
|
||||
if (autoPlay) {
|
||||
autoPlayInterval = setInterval(() => {
|
||||
if (!canPlayNext) return;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
autoPlayProgress++;
|
||||
});
|
||||
|
||||
if (autoPlayProgress > 100) {
|
||||
autoPlayProgress = 0;
|
||||
canPlayNext = false;
|
||||
autoPlayTransition();
|
||||
}
|
||||
}, autoPlaySpeed / 100);
|
||||
} else {
|
||||
clearInterval(autoPlayInterval);
|
||||
}
|
||||
};
|
||||
|
||||
const autoPlayTransition = () => {
|
||||
if (autoPlayIndex < currentMemory.assets.length - 1) {
|
||||
autoPlayIndex++;
|
||||
} else {
|
||||
const canAdvance = toNextMemory();
|
||||
if (!canAdvance) {
|
||||
autoPlay = false;
|
||||
clearInterval(autoPlayInterval);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Delay for nicer animation of the progress bar
|
||||
setTimeout(() => {
|
||||
canPlayNext = true;
|
||||
}, 250);
|
||||
};
|
||||
|
||||
const resetAutoPlay = () => {
|
||||
autoPlayIndex = 0;
|
||||
autoPlayProgress = 0;
|
||||
};
|
||||
|
||||
const toNextCurrentAsset = () => {
|
||||
autoPlayIndex++;
|
||||
|
||||
if (autoPlayIndex > currentMemory.assets.length - 1) {
|
||||
toNextMemory();
|
||||
}
|
||||
};
|
||||
|
||||
const toPreviousCurrentAsset = () => {
|
||||
autoPlayIndex--;
|
||||
|
||||
if (autoPlayIndex < 0) {
|
||||
toPreviousMemory();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
|
||||
{#if currentMemory}
|
||||
<ControlAppBar on:close-button-click={() => goto(AppRoute.PHOTOS)} forceDark>
|
||||
<svelte:fragment slot="leading">
|
||||
<p class="text-lg">
|
||||
{currentMemory.title}
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
|
||||
{#if !galleryInView}
|
||||
<div class="flex place-items-center place-content-center overflow-hidden gap-2">
|
||||
<CircleIconButton logo={autoPlay ? Pause : Play} forceDark on:click={toggleAutoPlay} />
|
||||
|
||||
<div class="relative w-full">
|
||||
<span class="absolute left-0 w-full h-[2px] bg-gray-500" />
|
||||
<span
|
||||
class="absolute left-0 h-[2px] bg-white transition-all"
|
||||
style:width={`${autoPlayProgress}%`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-small">
|
||||
{autoPlayIndex + 1}/{currentMemory.assets.length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</ControlAppBar>
|
||||
|
||||
{#if galleryInView}
|
||||
<div
|
||||
class="sticky top-20 flex place-content-center place-items-center z-30 transition-opacity"
|
||||
class:opacity-0={!galleryInView}
|
||||
class:opacity-100={galleryInView}
|
||||
>
|
||||
<button
|
||||
on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })}
|
||||
disabled={!galleryInView}
|
||||
>
|
||||
<CircleIconButton logo={ChevronUp} backgroundColor="white" forceDark />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Viewer -->
|
||||
<section class="pt-20 overflow-hidden">
|
||||
<div
|
||||
class="flex w-[300%] h-[calc(100vh_-_180px)] items-center justify-center box-border ml-[-100%] gap-10 overflow-hidden"
|
||||
>
|
||||
<!-- PREVIOUS MEMORY -->
|
||||
<div
|
||||
class="rounded-2xl w-[20vw] h-1/2"
|
||||
class:opacity-25={showPreviousMemory}
|
||||
class:opacity-0={!showPreviousMemory}
|
||||
class:hover:opacity-70={showPreviousMemory}
|
||||
>
|
||||
<button
|
||||
class="rounded-2xl h-full w-full relative"
|
||||
disabled={!showPreviousMemory}
|
||||
on:click={toPreviousMemory}
|
||||
>
|
||||
<img
|
||||
class="rounded-2xl h-full w-full object-cover"
|
||||
src={showPreviousMemory && lastMemory
|
||||
? api.getAssetThumbnailUrl(lastMemory.assets[0].id, 'JPEG')
|
||||
: noThumbnailUrl}
|
||||
alt=""
|
||||
draggable="false"
|
||||
/>
|
||||
|
||||
{#if showPreviousMemory}
|
||||
<div class="absolute right-4 bottom-4 text-white text-left">
|
||||
<p class="font-semibold text-xs text-gray-200">PREVIOUS</p>
|
||||
<p class="text-xl">{lastMemory.title}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- CURRENT MEMORY -->
|
||||
<div
|
||||
class="main-view rounded-2xl h-full relative w-[70vw] bg-black flex place-items-center place-content-center"
|
||||
>
|
||||
<div class="bg-black w-full h-full rounded-2xl">
|
||||
<!-- CONTROL BUTTONS -->
|
||||
<div class="absolute h-full flex justify-between w-full">
|
||||
<div class="flex h-full flex-col place-content-center place-items-center ml-4">
|
||||
<div class="inline-block">
|
||||
<CircleIconButton
|
||||
logo={ChevronLeft}
|
||||
backgroundColor="#202123"
|
||||
on:click={toPreviousCurrentAsset}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex h-full flex-col place-content-center place-items-center mr-4">
|
||||
<div class="inline-block">
|
||||
<CircleIconButton
|
||||
logo={ChevronRight}
|
||||
backgroundColor="#202123"
|
||||
on:click={toNextCurrentAsset}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#key currentMemory.assets[autoPlayIndex].id}
|
||||
<img
|
||||
transition:fade|local
|
||||
class="rounded-2xl w-full h-full object-contain transition-all"
|
||||
src={api.getAssetThumbnailUrl(currentMemory.assets[autoPlayIndex].id, 'JPEG')}
|
||||
alt=""
|
||||
draggable="false"
|
||||
/>
|
||||
{/key}
|
||||
|
||||
<div class="absolute top-4 left-8 text-white text-sm font-medium">
|
||||
<p>
|
||||
{DateTime.fromISO(currentMemory.assets[0].fileCreatedAt).toLocaleString(
|
||||
DateTime.DATE_FULL
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{currentMemory.assets[autoPlayIndex].exifInfo?.city || ''}
|
||||
{currentMemory.assets[autoPlayIndex].exifInfo?.country || ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NEXT MEMORY -->
|
||||
<div
|
||||
class="rounded-xl w-[20vw] h-1/2"
|
||||
class:opacity-25={showNextMemory}
|
||||
class:opacity-0={!showNextMemory}
|
||||
class:hover:opacity-70={showNextMemory}
|
||||
>
|
||||
<button
|
||||
class="rounded-2xl h-full w-full relative"
|
||||
on:click={toNextMemory}
|
||||
disabled={!showNextMemory}
|
||||
>
|
||||
<img
|
||||
class="rounded-2xl h-full w-full object-cover"
|
||||
src={showNextMemory
|
||||
? api.getAssetThumbnailUrl(nextMemory.assets[0].id, 'JPEG')
|
||||
: noThumbnailUrl}
|
||||
alt=""
|
||||
draggable="false"
|
||||
/>
|
||||
|
||||
{#if showNextMemory}
|
||||
<div class="absolute left-4 bottom-4 text-white text-left">
|
||||
<p class="font-semibold text-xs text-gray-200">UP NEXT</p>
|
||||
<p class="text-xl">{nextMemory.title}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GALERY VIEWER -->
|
||||
|
||||
<section class="bg-immich-dark-gray pl-4">
|
||||
<div
|
||||
class="sticky flex place-content-center place-items-center mb-10 mt-4 transition-all"
|
||||
class:opacity-0={galleryInView}
|
||||
class:opacity-100={!galleryInView}
|
||||
>
|
||||
<button on:click={() => memoryGallery.scrollIntoView({ behavior: 'smooth' })}>
|
||||
<CircleIconButton logo={ChevronDown} backgroundColor="white" forceDark />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<IntersectionObserver
|
||||
once={false}
|
||||
on:intersected={() => (galleryInView = true)}
|
||||
on:hidden={() => (galleryInView = false)}
|
||||
bottom={-200}
|
||||
>
|
||||
<div id="gallery-memory" bind:this={memoryGallery}>
|
||||
<GalleryViewer assets={currentMemory.assets} viewFrom="album-page" />
|
||||
</div>
|
||||
</IntersectionObserver>
|
||||
</section>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.main-view {
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
} from '../shared-components/scrollbar/scrollbar.svelte';
|
||||
import AssetDateGroup from './asset-date-group.svelte';
|
||||
import { BucketPosition } from '$lib/models/asset-grid-state';
|
||||
import MemoryLane from './memory-lane.svelte';
|
||||
|
||||
export let user: UserResponseDto | undefined = undefined;
|
||||
export let isAlbumSelectionMode = false;
|
||||
|
|
@ -130,6 +131,7 @@
|
|||
on:scroll={handleTimelineScroll}
|
||||
>
|
||||
{#if assetGridElement}
|
||||
<MemoryLane />
|
||||
<section id="virtual-timeline" style:height={$assetGridState.timelineHeight + 'px'}>
|
||||
{#each $assetGridState.buckets as bucket, bucketIndex (bucketIndex)}
|
||||
<IntersectionObserver
|
||||
|
|
|
|||
94
web/src/lib/components/photos-page/memory-lane.svelte
Normal file
94
web/src/lib/components/photos-page/memory-lane.svelte
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { DateTime } from 'luxon';
|
||||
import { MemoryLaneResponseDto, api } from '@api';
|
||||
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
|
||||
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
|
||||
import { memoryStore } from '$lib/stores/memory.store';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let memoryLane: MemoryLaneResponseDto[] = [];
|
||||
$: shouldRender = memoryLane.length > 0;
|
||||
|
||||
onMount(async () => {
|
||||
const timezone = DateTime.local().zoneName;
|
||||
const { data } = await api.assetApi.getMemoryLane({ timezone });
|
||||
|
||||
memoryLane = data;
|
||||
$memoryStore = data;
|
||||
});
|
||||
|
||||
let memoryLaneElement: HTMLElement;
|
||||
let offsetWidth = 0;
|
||||
let innerWidth = 0;
|
||||
$: isOverflow = offsetWidth < innerWidth;
|
||||
|
||||
function scrollLeft() {
|
||||
memoryLaneElement.scrollTo({
|
||||
left: memoryLaneElement.scrollLeft - 400,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
function scrollRight() {
|
||||
memoryLaneElement.scrollTo({
|
||||
left: memoryLaneElement.scrollLeft + 400,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if shouldRender}
|
||||
<section
|
||||
id="memory-lane"
|
||||
bind:this={memoryLaneElement}
|
||||
class="relative overflow-x-hidden whitespace-nowrap mt-5 transition-all"
|
||||
bind:offsetWidth
|
||||
>
|
||||
{#if isOverflow}
|
||||
<div class="sticky left-0 z-20">
|
||||
<div class="absolute right-0 top-[6rem] z-20">
|
||||
<button
|
||||
class="rounded-full opacity-50 hover:opacity-100 p-2 border border-gray-500 bg-gray-100 text-gray-500"
|
||||
on:click={scrollRight}
|
||||
>
|
||||
<ChevronRight size="36" /></button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="absolute left-0 top-[6rem] z-20">
|
||||
<button
|
||||
class="rounded-full opacity-50 hover:opacity-100 p-2 border border-gray-500 bg-gray-100 text-gray-500"
|
||||
on:click={scrollLeft}><ChevronLeft size="36" /></button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="inline-block" bind:offsetWidth={innerWidth}>
|
||||
{#each memoryLane as memory, i (memory.title)}
|
||||
<button
|
||||
class="memory-card relative inline-block mr-8 rounded-xl aspect-video h-[215px]"
|
||||
on:click={() => goto(`/memory?index=${i}`)}
|
||||
>
|
||||
<img
|
||||
class="rounded-xl h-full w-full object-cover"
|
||||
src={api.getAssetThumbnailUrl(memory.assets[0].id, 'JPEG')}
|
||||
alt={memory.title}
|
||||
draggable="false"
|
||||
/>
|
||||
<p class="absolute bottom-2 left-4 text-lg text-white z-10">{memory.title}</p>
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent z-0 hover:bg-black/20 transition-all"
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.memory-card {
|
||||
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
export let showBackButton = true;
|
||||
export let backIcon = Close;
|
||||
export let tailwindClasses = '';
|
||||
export let forceDark = false;
|
||||
|
||||
let appBarBorder = 'bg-immich-bg border border-transparent';
|
||||
|
||||
|
|
@ -17,6 +18,10 @@
|
|||
const onScroll = () => {
|
||||
if (window.pageYOffset > 80) {
|
||||
appBarBorder = 'border border-gray-200 bg-gray-50 dark:border-gray-600';
|
||||
|
||||
if (forceDark) {
|
||||
appBarBorder = 'border border-gray-600';
|
||||
}
|
||||
} else {
|
||||
appBarBorder = 'bg-immich-bg border border-transparent';
|
||||
}
|
||||
|
|
@ -38,9 +43,11 @@
|
|||
<div in:fly={{ y: 10, duration: 200 }} 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 ${tailwindClasses} dark:bg-immich-dark-gray`}
|
||||
class={`grid grid-cols-3 justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses} dark:bg-immich-dark-gray ${
|
||||
forceDark && 'bg-immich-dark-gray text-white'
|
||||
}`}
|
||||
>
|
||||
<div class="flex place-items-center gap-6 dark:text-immich-dark-fg">
|
||||
<div class="flex place-items-center gap-6 dark:text-immich-dark-fg justify-self-start">
|
||||
{#if showBackButton}
|
||||
<CircleIconButton
|
||||
on:click={() => dispatch('close-button-click')}
|
||||
|
|
@ -48,14 +55,17 @@
|
|||
backgroundColor={'transparent'}
|
||||
hoverColor={'#e2e7e9'}
|
||||
size={'24'}
|
||||
forceDark
|
||||
/>
|
||||
{/if}
|
||||
<slot name="leading" />
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
<div class="w-full">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class="flex place-items-center gap-1 mr-4">
|
||||
<div class="flex place-items-center gap-1 mr-4 justify-self-end">
|
||||
<slot name="trailing" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue