Add option to disable slideshow (#3383)

Author: ildyria

app/Http/Resources/GalleryConfigs/InitConfig.php

@@ -69,6 +69,7 @@ class InitConfig extends Data
 
 	// Slideshow setting
 	public int $slideshow_timeout;
+	public bool $is_slideshow_enabled;
 
 	// Timeline settings
 	public bool $is_timeline_left_border_visible;
@@ -132,6 +133,7 @@ public function __construct()
 
 		// Slideshow settings
 		$this->slideshow_timeout = Configs::getValueAsInt('slideshow_timeout');
+		$this->is_slideshow_enabled = Configs::getValueAsBool('slideshow_enabled');
 
 		// Timeline settings
 		$this->is_timeline_left_border_visible = Configs::getValueAsBool('timeline_left_border_enabled');

database/migrations/2025_05_29_174832_add_slideshow_enabled.php

@@ -0,0 +1,31 @@
+<?php
+
+/**
+ * SPDX-License-Identifier: MIT
+ * Copyright (c) 2017-2018 Tobias Reich
+ * Copyright (c) 2018-2025 LycheeOrg.
+ */
+
+use App\Models\Extensions\BaseConfigMigration;
+
+return new class() extends BaseConfigMigration {
+	public const CAT = 'Gallery';
+
+	public function getConfigs(): array
+	{
+		return [
+			[
+				'key' => 'slideshow_enabled',
+				'value' => '1',
+				'cat' => self::CAT,
+				'type_range' => self::BOOL,
+				'description' => 'Enable the slideshow functionality.',
+				'details' => '',
+				'is_expert' => true,
+				'is_secret' => true,
+				'level' => 0,
+				'order' => 37,
+			],
+		];
+	}
+};

resources/js/components/gallery/albumModule/AlbumHero.vue

@@ -79,7 +79,7 @@
 						<a
 							v-tooltip.bottom="'Start slideshow'"
 							@click="emits('toggleSlideShow')"
-							v-if="props.album.photos.length > 0"
+							v-if="props.album.photos.length > 0 && is_slideshow_enabled"
 							class="shrink-0 px-3 cursor-pointer text-muted-color inline-block transform duration-300 hover:scale-150 hover:text-color"
 						>
 							<i class="pi pi-play" />
@@ -136,7 +136,7 @@ import { computed } from "vue";
 
 const auth = useAuthStore();
 const lycheeStore = useLycheeStateStore();
-const { is_se_enabled, is_se_preview_enabled, are_nsfw_visible } = storeToRefs(lycheeStore);
+const { is_se_enabled, is_se_preview_enabled, are_nsfw_visible, is_slideshow_enabled } = storeToRefs(lycheeStore);
 const { user } = storeToRefs(auth);
 
 const props = defineProps<{

resources/js/components/headers/PhotoHeader.vue

@@ -13,7 +13,7 @@
 			</template>
 			<template #end>
 				<div :class="is_slideshow_active ? 'hidden' : 'flex'">
-					<Button text icon="pi pi-play" class="mr-2" severity="secondary" @click="emits('toggleSlideShow')" />
+					<Button v-if="is_slideshow_enabled" text icon="pi pi-play" class="mr-2" severity="secondary" @click="emits('toggleSlideShow')" />
 					<Button
 						v-if="props.photo.rights.can_access_full_photo && props.photo.size_variants.original?.url"
 						text
@@ -76,7 +76,7 @@ const togglableStore = useTogglablesStateStore();
 const { is_full_screen, is_photo_edit_open, are_details_open, is_slideshow_active } = storeToRefs(togglableStore);
 const isDownloadOpen = ref(false);
 const lycheeStore = useLycheeStateStore();
-const { is_exif_disabled } = storeToRefs(lycheeStore);
+const { is_exif_disabled, is_slideshow_enabled } = storeToRefs(lycheeStore);
 
 function openInNewTab(url: string) {
 	window?.open(url, "_blank")?.focus();

resources/js/lychee.d.ts

@@ -262,6 +262,7 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		is_medium2x_download_enabled: boolean;
 		clockwork_url: string | null;
 		slideshow_timeout: number;
+		is_slideshow_enabled: boolean;
 		is_timeline_left_border_visible: boolean;
 		title: string;
 		dropbox_api_key: string;

resources/js/stores/LycheeState.ts

@@ -14,6 +14,7 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 
 		// Photo config
 		slideshow_timeout: 5,
+		is_slideshow_enabled: true,
 
 		// configs for nsfw
 		are_nsfw_visible: false,
@@ -119,6 +120,7 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 					this.clockwork_url = data.clockwork_url;
 
 					this.slideshow_timeout = data.slideshow_timeout;
+					this.is_slideshow_enabled = data.is_slideshow_enabled;
 
 					this.is_timeline_left_border_visible = data.is_timeline_left_border_visible;
 

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

@@ -194,7 +194,7 @@ const lycheeStore = useLycheeStateStore();
 
 lycheeStore.init();
 
-const { are_nsfw_visible, slideshow_timeout } = storeToRefs(lycheeStore);
+const { are_nsfw_visible, slideshow_timeout, is_slideshow_enabled } = storeToRefs(lycheeStore);
 const {
 	is_photo_edit_open,
 	are_details_open,
@@ -307,7 +307,7 @@ onKeyStroke([getModKey(), "a"], () => !shouldIgnoreKeystroke() && photo.value ==
 onKeyStroke("ArrowLeft", () => !shouldIgnoreKeystroke() && photo.value !== undefined && hasPrevious() && previous(true));
 onKeyStroke("ArrowRight", () => !shouldIgnoreKeystroke() && photo.value !== undefined && hasNext() && next(true));
 onKeyStroke("o", () => !shouldIgnoreKeystroke() && photo.value !== undefined && rotateOverlay());
-onKeyStroke(" ", () => !shouldIgnoreKeystroke() && photo.value !== undefined && slideshow());
+onKeyStroke(" ", () => !shouldIgnoreKeystroke() && photo.value !== undefined && is_slideshow_enabled.value && slideshow());
 onKeyStroke("i", () => !shouldIgnoreKeystroke() && photo.value !== undefined && toggleDetails());
 onKeyStroke("f", () => !shouldIgnoreKeystroke() && photo.value !== undefined && togglableStore.toggleFullScreen());
 onKeyStroke("Escape", () => !shouldIgnoreKeystroke() && photo.value !== undefined && is_slideshow_active.value && stop());