mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web): add Favorites page (#1397)
* 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
GitHub
parent
d377cf0d02
commit
de0e218440
10 changed files with 312 additions and 47 deletions
|
|
@ -1,26 +1,26 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
|
||||
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
|
||||
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
|
||||
import PhotoViewer from './photo-viewer.svelte';
|
||||
import DetailPanel from './detail-panel.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { downloadAssets } from '$lib/stores/download';
|
||||
import VideoViewer from './video-viewer.svelte';
|
||||
import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
|
||||
import {
|
||||
AlbumResponseDto,
|
||||
api,
|
||||
AssetResponseDto,
|
||||
AssetTypeEnum,
|
||||
AlbumResponseDto,
|
||||
SharedLinkResponseDto
|
||||
} from '@api';
|
||||
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
|
||||
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
|
||||
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '../shared-components/notification/notification';
|
||||
import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
|
||||
import DetailPanel from './detail-panel.svelte';
|
||||
import PhotoViewer from './photo-viewer.svelte';
|
||||
import VideoViewer from './video-viewer.svelte';
|
||||
|
||||
import { assetStore } from '$lib/stores/assets.store';
|
||||
import { addAssetsToAlbum } from '$lib/utils/asset-utils';
|
||||
|
|
@ -217,6 +217,7 @@
|
|||
});
|
||||
|
||||
asset.isFavorite = data.isFavorite;
|
||||
assetStore.updateAsset(asset.id, data.isFavorite);
|
||||
};
|
||||
|
||||
const openAlbumPicker = (shared: boolean) => {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { api } from '@api';
|
||||
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
|
||||
import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
|
||||
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
|
||||
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
|
||||
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
|
||||
import SideBarButton from './side-bar-button.svelte';
|
||||
import StatusBox from '../status-box.svelte';
|
||||
import { api } from '@api';
|
||||
import StarOutline from 'svelte-material-icons/StarOutline.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import LoadingSpinner from '../loading-spinner.svelte';
|
||||
import { AppRoute } from '../../../constants';
|
||||
import LoadingSpinner from '../loading-spinner.svelte';
|
||||
import StatusBox from '../status-box.svelte';
|
||||
import SideBarButton from './side-bar-button.svelte';
|
||||
|
||||
let showAssetCount = false;
|
||||
let showSharingCount = false;
|
||||
let showFavoritesCount = false;
|
||||
let showAlbumsCount = false;
|
||||
|
||||
const getAssetCount = async () => {
|
||||
|
|
@ -24,6 +26,14 @@
|
|||
};
|
||||
};
|
||||
|
||||
const getFavoriteCount = async () => {
|
||||
const { data: assets } = await api.assetApi.getAllAssets(true);
|
||||
|
||||
return {
|
||||
favorites: assets.length
|
||||
};
|
||||
};
|
||||
|
||||
const getAlbumCount = async () => {
|
||||
const { data: albumCount } = await api.albumApi.getAlbumCountByUserId();
|
||||
return {
|
||||
|
|
@ -104,6 +114,42 @@
|
|||
<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
|
||||
<p>LIBRARY</p>
|
||||
</div>
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href={AppRoute.FAVORITES}
|
||||
class="relative"
|
||||
draggable="false"
|
||||
>
|
||||
<SideBarButton
|
||||
title="Favorites"
|
||||
logo={StarOutline}
|
||||
isSelected={$page.route.id == AppRoute.FAVORITES}
|
||||
/>
|
||||
|
||||
<div
|
||||
id="favorite-count-info"
|
||||
class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
|
||||
on:mouseenter={() => (showFavoritesCount = true)}
|
||||
on:mouseleave={() => (showFavoritesCount = false)}
|
||||
>
|
||||
<InformationOutline size={18} color="#989a9f" />
|
||||
{#if showFavoritesCount}
|
||||
<div
|
||||
transition:fade={{ duration: 200 }}
|
||||
id="asset-count-info-detail"
|
||||
class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
|
||||
>
|
||||
{#await getFavoriteCount()}
|
||||
<LoadingSpinner />
|
||||
{:then data}
|
||||
<div>
|
||||
<p>{data.favorites} Favorites</p>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative" draggable="false">
|
||||
<SideBarButton
|
||||
title="Albums"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue