Merge branch 'minor-ui-improvements' into alpha

resources/js/components/diagnostics/ErrorsDiagnostics.vue

@@ -1,5 +1,5 @@
 <template>
-	<Panel header="Errors" class="border-none max-w-7xl mx-auto">
+	<Panel header="Self-Diagnostic" class="border-none max-w-7xl mx-auto">
 		<div v-if="!errors" class="text-sky-400 font-bold">Loading...</div>
 		<div v-else v-for="error in errors" class="flex">
 			<div class="w-24 capitalize" :class="getCss(error.type)">{{ error.type }}</div>

resources/js/components/forms/album/AlbumShare.vue

@@ -7,8 +7,8 @@
 				</div>
 				<div class="w-1/2 flex justify-around items-center">
 					<i class="pi pi-eye" v-tooltip.top="'Grants read access'" />
-					<i class="pi pi-window-maximize" v-tooltip.top="'Grants full photo access'" />
-					<i class="pi pi-download" v-tooltip.top="'Grants download'" />
+					<i class="pi pi-window-maximize" v-tooltip.top="'Grants original photo access'" />
+					<i class="pi pi-cloud-download" v-tooltip.top="'Grants download'" />
 					<i class="pi pi-upload" v-tooltip.top="'Grants upload'" />
 					<i class="pi pi-file-edit" v-tooltip.top="'Grants edit'" />
 					<i class="pi pi-trash" v-tooltip.top="'Grants delete'" />

resources/js/components/gallery/AlbumHero.vue

@@ -35,7 +35,7 @@
 					:title="$t('lychee.DOWNLOAD_ALBUM')"
 					@click="download"
 				>
-					<i class="pi pi-download" />
+					<i class="pi pi-cloud-download" />
 				</a>
 				<a
 					v-if="props.album.rights.can_share"

resources/js/components/gallery/PhotoThumbPanelControl.vue

@@ -1,14 +1,14 @@
 <template>
-	<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'square'" :title="$t('lychee.LAYOUT_SQUARES')">
+	<a class="px-1 cursor-pointer group hidden sm:inline-block h-8" @click="layout = 'square'" :title="$t('lychee.LAYOUT_SQUARES')">
 		<MiniIcon icon="squares" fill="fill-transparent" :class="squareClass" />
 	</a>
-	<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'justified'" :title="$t('lychee.LAYOUT_JUSTIFIED')">
+	<a class="px-1 cursor-pointer group hidden sm:inline-block h-8" @click="layout = 'justified'" :title="$t('lychee.LAYOUT_JUSTIFIED')">
 		<MiniIcon icon="justified" fill="" :class="justifiedClass" />
 	</a>
-	<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'masonry'" :title="$t('lychee.LAYOUT_MASONRY')">
+	<a class="px-1 cursor-pointer group hidden sm:inline-block h-8" @click="layout = 'masonry'" :title="$t('lychee.LAYOUT_MASONRY')">
 		<MiniIcon icon="masonry" fill="fill-transparent" :class="masonryClass" />
 	</a>
-	<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'grid'" :title="$t('lychee.LAYOUT_GRID')">
+	<a class="px-1 cursor-pointer group hidden sm:inline-block h-8" @click="layout = 'grid'" :title="$t('lychee.LAYOUT_GRID')">
 		<MiniIcon icon="grid" fill="fill-transparent" :class="gridClass" />
 	</a>
 </template>

resources/js/components/headers/PhotoHeader.vue

@@ -9,25 +9,27 @@
 				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text @click="goBack" />
 			</template>
 			<template #end>
-				<Button text icon="pi pi-play" class="mr-2" severity="secondary" @click="toggleSlideShow" />
-				<Button
-					v-if="props.photo.rights.can_access_full_photo && props.photo.size_variants.original?.url"
-					text
-					icon="pi pi-window-maximize"
-					class="mr-2 font-bold"
-					severity="secondary"
-					@click="openInNewTab(props.photo.size_variants.original.url)"
-				/>
-				<Button
-					v-if="props.photo.rights.can_download"
-					text
-					icon="pi pi-cloud-download"
-					class="mr-2"
-					severity="secondary"
-					@click="isDownloadOpen = !isDownloadOpen"
-				/>
-				<Button v-if="props.photo.rights.can_edit" text icon="pi pi-pencil" class="mr-2" severity="secondary" @click="toggleEdit" />
-				<Button icon="pi pi-info" class="mr-2" severity="secondary" text @click="toggleDetails" />
+				<div :class="is_slideshow_active ? 'hidden' : 'flex'">
+					<Button text icon="pi pi-play" class="mr-2" severity="secondary" @click="toggleSlideShow" />
+					<Button
+						v-if="props.photo.rights.can_access_full_photo && props.photo.size_variants.original?.url"
+						text
+						icon="pi pi-window-maximize"
+						class="mr-2 font-bold"
+						severity="secondary"
+						@click="openInNewTab(props.photo.size_variants.original.url)"
+					/>
+					<Button
+						v-if="props.photo.rights.can_download"
+						text
+						icon="pi pi-cloud-download"
+						class="mr-2"
+						severity="secondary"
+						@click="isDownloadOpen = !isDownloadOpen"
+					/>
+					<Button v-if="props.photo.rights.can_edit" text icon="pi pi-pencil" class="mr-2" severity="secondary" @click="toggleEdit" />
+					<Button icon="pi pi-info" class="mr-2" severity="secondary" text @click="toggleDetails" />
+				</div>
 			</template>
 		</Toolbar>
 	</header>

resources/js/composables/photo/slideshow.ts

@@ -84,5 +84,6 @@ export function useSlideshowFunction(
 		next,
 		previous,
 		clearTimeouts,
+		stop,
 	};
 }

resources/js/views/Sharing.vue

@@ -21,7 +21,7 @@
 				<div class="w-1/2 flex items-center justify-around">
 					<i class="pi pi-eye" v-tooltip.top="'Grants read access'" />
 					<i class="pi pi-window-maximize" v-tooltip.top="'Grants full photo access'" />
-					<i class="pi pi-download" v-tooltip.top="'Grants download'" />
+					<i class="pi pi-cloud-download" v-tooltip.top="'Grants download'" />
 					<i class="pi pi-upload" v-tooltip.top="'Grants upload'" />
 					<i class="pi pi-file-edit" v-tooltip.top="'Grants edit'" />
 					<i class="pi pi-trash" v-tooltip.top="'Grants delete'" />

resources/js/views/gallery-panels/Album.vue

@@ -181,7 +181,7 @@
 </template>
 <script setup lang="ts">
 import { useAuthStore } from "@/stores/Auth";
-import { computed, ref, watch, onMounted } from "vue";
+import { computed, ref, watch, onMounted, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
 import PhotoThumbPanel from "@/components/gallery/PhotoThumbPanel.vue";
@@ -243,8 +243,6 @@ const { onScroll, setScroll, scrollToTop } = useScrollable(togglableStore, album
 const { is_full_screen, is_login_open, is_slideshow_active, is_upload_visible, list_upload_files } = storeToRefs(togglableStore);
 const { are_nsfw_visible, nsfw_consented, is_se_enabled } = storeToRefs(lycheeStore);
 
-// Reset the slideshow.
-is_slideshow_active.value = false;
 function toggleSlideShow() {
 	if (album.value === undefined || album.value.photos.length === 0) {
 		return;
@@ -389,11 +387,6 @@ function consent() {
 	isAlbumConsented.value = true;
 }
 
-onMounted(async () => {
-	await Promise.all([loadLayoutConfig(), refresh()]);
-	setScroll();
-});
-
 onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
 onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());
 onKeyStroke(" ", () => !shouldIgnoreKeystroke() && unselect());
@@ -406,11 +399,21 @@ onKeyStroke([getModKey(), "a"], () => !shouldIgnoreKeystroke() && selectEverythi
 
 const { onPaste, dragEnd, dropUpload } = useMouseEvents(rights, is_upload_visible, list_upload_files);
 
-window.addEventListener("paste", onPaste);
-window.addEventListener("dragover", dragEnd);
-window.addEventListener("drop", dropUpload);
+onMounted(() => {
+	// Reset the slideshow.
+	is_slideshow_active.value = false;
+
+	window.addEventListener("paste", onPaste);
+	window.addEventListener("dragover", dragEnd);
+	window.addEventListener("drop", dropUpload);
+});
+
+onMounted(async () => {
+	await Promise.all([loadLayoutConfig(), refresh()]);
+	setScroll();
+});
 
-router.afterEach(() => {
+onUnmounted(() => {
 	window.removeEventListener("paste", onPaste);
 	window.removeEventListener("dragover", dragEnd);
 	window.removeEventListener("drop", dropUpload);
@@ -422,9 +425,6 @@ watch(
 		unselect();
 
 		albumid.value = newId as string;
-		window.addEventListener("paste", onPaste);
-		window.addEventListener("dragover", dragEnd);
-		window.addEventListener("drop", dropUpload);
 		refresh().then(setScroll);
 	},
 );

resources/js/views/gallery-panels/Albums.vue

@@ -130,7 +130,7 @@
 <script setup lang="ts">
 import AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
 import { useAuthStore } from "@/stores/Auth";
-import { computed, ref, onMounted } from "vue";
+import { computed, ref, onMounted, onUnmounted } from "vue";
 import AlbumsHeader from "@/components/headers/AlbumsHeader.vue";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
@@ -219,11 +219,6 @@ const albumPanelConfig = computed<AlbumThumbConfig>(() => ({
 	album_decoration_orientation: lycheeStore.album_decoration_orientation,
 }));
 
-onMounted(async () => {
-	await refresh();
-	setScroll();
-});
-
 onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
 onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());
 onKeyStroke(" ", () => !shouldIgnoreKeystroke() && unselect());
@@ -243,7 +238,12 @@ onMounted(() => {
 	togglableStore.left_menu_open = false;
 });
 
-router.afterEach(() => {
+onMounted(async () => {
+	await refresh();
+	setScroll();
+});
+
+onUnmounted(() => {
 	window.removeEventListener("paste", onPaste);
 	window.removeEventListener("dragover", dragEnd);
 	window.removeEventListener("drop", dropUpload);

resources/js/views/gallery-panels/Frame.vue

@@ -21,7 +21,7 @@ import { useSlideshowFunction } from "@/composables/photo/slideshow";
 import AlbumService from "@/services/album-service";
 import { onKeyStroke } from "@vueuse/core";
 import Button from "primevue/button";
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 
 const props = defineProps<{
@@ -52,7 +52,20 @@ function start() {
 	});
 }
 
-start();
+onMounted(() => {
+	let elem = document.getElementsByTagName("body")[0];
+
+	elem.requestFullscreen()
+		.then(() => {})
+		.catch((err) => console.log(err));
+
+	start();
+});
+
+onUnmounted(() => {
+	document.exitFullscreen();
+	clearTimeouts();
+});
 
 function goBack() {
 	clearTimeouts();

resources/js/views/gallery-panels/Photo.vue

@@ -2,7 +2,7 @@
 	<div
 		id="shutter"
 		class="absolute w-screen h-dvh bg-surface-950 transition-opacity duration-1000 ease-in-out top-0 left-0"
-		:class="is_slideshow_active ? 'z-50 opacity-0' : ''"
+		:class="is_slideshow_active ? 'z-50 opacity-0 pointer-events-none' : ''"
 	></div>
 	<div class="absolute top-0 left-0 w-full flex h-full overflow-hidden bg-black" v-if="photo">
 		<PhotoHeader :albumid="props.albumid" :photo="photo" @slideshow="slideshow" />
@@ -147,7 +147,7 @@ import NextPrevious from "@/components/gallery/photo/NextPrevious.vue";
 import AlbumService from "@/services/album-service";
 import PhotoDetails from "@/components/drawers/PhotoDetails.vue";
 import { useLycheeStateStore } from "@/stores/LycheeState";
-import { ref, watch } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import PhotoHeader from "@/components/headers/PhotoHeader.vue";
 import PhotoEdit from "@/components/drawers/PhotoEdit.vue";
@@ -200,7 +200,7 @@ function getPrevious() {
 	router.push({ name: "photo", params: { albumid: props.albumid, photoid: photo.value?.previous_photo_id ?? "" } });
 }
 
-const { slideshow, start, next, previous } = useSlideshowFunction(1000, is_slideshow_active, slideshow_timeout, getNext, getPrevious);
+const { slideshow, start, next, previous, stop } = useSlideshowFunction(1000, is_slideshow_active, slideshow_timeout, getNext, getPrevious);
 
 function load() {
 	if (togglableStore.isSearchActive) {
@@ -286,10 +286,6 @@ function rotateOverlay() {
 	}
 }
 
-if (is_slideshow_active.value) {
-	start();
-}
-
 onKeyStroke("ArrowLeft", () => !shouldIgnoreKeystroke() && hasPrevious() && previous(true));
 onKeyStroke("ArrowRight", () => !shouldIgnoreKeystroke() && hasNext() && next(true));
 onKeyStroke("o", () => !shouldIgnoreKeystroke() && rotateOverlay());
@@ -317,7 +313,6 @@ function scrollTo(event: WheelEvent) {
 		previous(true);
 	}
 }
-window.addEventListener("wheel", scrollTo);
 
 useSwipe(swipe, {
 	onSwipe(_e: TouchEvent) {},
@@ -332,18 +327,25 @@ useSwipe(swipe, {
 	},
 });
 
-load();
+onMounted(() => {
+	if (is_slideshow_active.value) {
+		start();
+	}
+
+	window.addEventListener("wheel", scrollTo);
+	load();
+});
+
+onUnmounted(() => {
+	stop();
+	window.removeEventListener("wheel", scrollTo);
+});
 
 watch(
 	() => route.params.photoid,
 	(newId, _oldId) => {
 		photoId.value = newId as string;
-		window.addEventListener("wheel", scrollTo);
 		refresh();
 	},
 );
-
-router.afterEach(() => {
-	window.removeEventListener("wheel", scrollTo);
-});
 </script>