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

feat(web): add Favorites page (#1397)

Browse Source 
* Duplicate photos page and rename to favorites

* Implement basic functionality to page

* Sort imports

* Add missing sharing code

* Remove unused import

* Fix formatting

* Use GalleryViewer and new api endpoint

* Merge useFavorites into page

* Run prettier

* Move favorites in side-bar

* Remove favorites when unfavorited

* Fix close shared link model

* Add favorite count to side-bar

* Add add to favorites option

* Fix formatting

* Add favorite icon to image thumbnails

* Change var to let
This commit is contained in:
James
2023-01-27 09:32:26 -05:00
committed by GitHub
parent d377cf0d02
commit de0e218440
10 changed files with 312 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,15 @@
<script lang="ts">
import { createEventDispatcher, onDestroy } from 'svelte';
import { fade, fly } from 'svelte/transition';
import IntersectionObserver from '$lib/components/asset-viewer/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 MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import LoadingSpinner from './loading-spinner.svelte';
import { AssetResponseDto, AssetTypeEnum, getFileUrl, ThumbnailFormat } from '@api';
import { createEventDispatcher, onDestroy } from 'svelte';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
import Star from 'svelte-material-icons/Star.svelte';
import { fade, fly } from 'svelte/transition';
import LoadingSpinner from './loading-spinner.svelte';
const dispatch = createEventDispatcher();
@@ -163,7 +164,7 @@
{#if mouseOver || selected || disabled}
<div
in:fade={{ duration: 200 }}
class={`w-full ${getOverlaySelectorIconStyle()} 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`}
>
<button
on:click={onIconClickedHandler}
@@ -182,6 +183,12 @@
</div>
{/if}
{#if asset.isFavorite}
<div class="w-full absolute bottom-2 left-2 z-10">
<Star size="24" color={'white'} />
</div>
{/if}
<!-- Playback and info -->
{#if asset.type === AssetTypeEnum.Video}
<div