self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-03 05:46:58 +02:00
Code Issues Releases Activity

feat(web): slideshow mode (#3813)

Browse Source 
* slideshow

slideshow for main screen

Added control buttons

update

close detail panel window sif opened

format

5 seconds

remove unused files

handle video player

format

* fix: restrict slideshow to timeline views

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Alex
2023-08-25 18:20:45 -05:00
committed by GitHub
parent 59bb727636
commit e18a9f84a4
4 changed files with 210 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import { page } from '$app/stores';
import { photoZoomState } from '$lib/stores/zoom-image.store';
import { clickOutside } from '$lib/utils/click-outside';
import { AssetJobName, AssetResponseDto, AssetTypeEnum, api } from '@api';
import { createEventDispatcher } from 'svelte';
@ -11,14 +12,13 @@
import Heart from 'svelte-material-icons/Heart.svelte';
import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import MagnifyPlusOutline from 'svelte-material-icons/MagnifyPlusOutline.svelte';
import MagnifyMinusOutline from 'svelte-material-icons/MagnifyMinusOutline.svelte';
import MagnifyPlusOutline from 'svelte-material-icons/MagnifyPlusOutline.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import { photoZoomState } from '$lib/stores/zoom-image.store';
export let asset: AssetResponseDto;
export let showCopyButton: boolean;
@ -26,10 +26,11 @@
export let showMotionPlayButton: boolean;
export let isMotionPhotoPlaying = false;
export let showDownloadButton: boolean;
export let showSlideshow = false;
const isOwner = asset.ownerId === $page.data.user?.id;
type MenuItemEvent = 'addToAlbum' | 'addToSharedAlbum' | 'asProfileImage' | 'runJob';
type MenuItemEvent = 'addToAlbum' | 'addToSharedAlbum' | 'asProfileImage' | 'runJob' | 'playSlideShow';
const dispatch = createEventDispatcher<{
goBack: void;
@ -44,6 +45,7 @@
addToSharedAlbum: void;
asProfileImage: void;
runJob: AssetJobName;
playSlideShow: void;
}>();
let contextMenuPosition = { x: 0, y: 0 };
@ -137,6 +139,9 @@
<CircleIconButton isOpacity={true} logo={DotsVertical} on:click={showOptionsMenu} title="More" />
{#if isShowAssetOptions}
<ContextMenu {...contextMenuPosition} direction="left">
{#if showSlideshow}
<MenuOption on:click={() => onMenuClick('playSlideShow')} text="Slideshow" />
{/if}
<MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
<MenuOption on:click={() => onMenuClick('addToSharedAlbum')} text="Add to Shared Album" />