Add option to hide photo action dock instead of transparency (#3804)

Co-authored-by: Martin Stone <[email protected]>

Author: ildyria

app/Http/Resources/Embed/EmbedAlbumInfo.php

@@ -0,0 +1,52 @@
+<?php
+
+/**
+ * SPDX-License-Identifier: MIT
+ * Copyright (c) 2017-2018 Tobias Reich
+ * Copyright (c) 2018-2025 LycheeOrg.
+ */
+
+namespace App\Http\Resources\Embed;
+
+use App\Models\Album;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+/**
+ * Resource for embedding album data on external websites.
+ *
+ * Provides minimal album information and photo collection optimized for
+ * external embedding. Includes only publicly visible data.
+ */
+#[TypeScript()]
+class EmbedAlbumInfo extends Data
+{
+	public function __construct(
+		public string $id,
+		public string $title,
+		public ?string $description,
+		public int $photo_count,
+		public ?string $copyright,
+		public ?string $license,
+	) {
+	}
+
+	/**
+	 * Create resource from Album model.
+	 *
+	 * @param Album $album The album model
+	 *
+	 * @return self
+	 */
+	public static function fromModel(Album $album): self
+	{
+		return new self(
+			id: $album->id,
+			title: $album->title,
+			description: $album->description,
+			photo_count: $album->photos_count ?? $album->photos->count(),
+			copyright: $album->copyright,
+			license: $album->license?->localization(),
+		);
+	}
+}

app/Http/Resources/Embed/EmbedAlbumResource.php

@@ -23,23 +23,14 @@
 #[TypeScript()]
 class EmbedAlbumResource extends Data
 {
-	/** @var array<string, mixed> */
-	public array $album;
+	public EmbedAlbumInfo $album;
 	/** @var Collection<int, EmbedPhotoResource> */
 	#[LiteralTypeScriptType('App.Http.Resources.Embed.EmbedPhotoResource[]')]
 	public Collection $photos;
 
 	public function __construct(Album $album)
 	{
-		$this->album = [
-			'id' => $album->id,
-			'title' => $album->title,
-			'description' => $album->description,
-			'photo_count' => $album->photos_count ?? $album->photos->count(),
-			'copyright' => $album->copyright,
-			'license' => $album->license?->localization(),
-		];
-
+		$this->album = EmbedAlbumInfo::fromModel($album);
 		$this->photos = $album->photos->map(fn ($photo) => EmbedPhotoResource::fromModel($photo));
 	}
 

app/Http/Resources/GalleryConfigs/InitConfig.php

@@ -47,6 +47,8 @@ class InitConfig extends Data
 	public bool $is_favourite_enabled;
 	public SmallLargeType $photo_previous_next_size;
 	public bool $is_details_links_enabled;
+	public bool $is_desktop_dock_full_transparency_enabled;
+	public bool $is_mobile_dock_full_transparency_enabled;
 
 	// Thumbs configuration
 	public ThumbOverlayVisibilityType $display_thumb_album_overlay;
@@ -130,6 +132,8 @@ public function __construct()
 		if (Configs::getValueAsBool('details_links_enabled')) {
 			$this->is_details_links_enabled = !Auth::guest() || Configs::getValueAsBool('details_links_public');
 		}
+		$this->is_desktop_dock_full_transparency_enabled = Configs::getValueAsBool('desktop_dock_full_transparency_enabled');
+		$this->is_mobile_dock_full_transparency_enabled = Configs::getValueAsBool('mobile_dock_full_transparency_enabled');
 
 		// Thumbs configuration
 		$this->display_thumb_album_overlay = Configs::getValueAsEnum('display_thumb_album_overlay', ThumbOverlayVisibilityType::class);

database/migrations/2025_11_15_092400_optional_dock_transparency.php

@@ -0,0 +1,48 @@
+<?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 MOD_GALLERY = 'Gallery';
+
+	/**
+	 * @return array<int,array{key:string,value:string,is_secret:bool,cat:string,type_range:string,description:string,order?:int,not_on_docker?:bool,is_expert?:bool}>
+	 */
+	public function getConfigs(): array
+	{
+		return [
+			[
+				'key' => 'desktop_dock_full_transparency_enabled',
+				'value' => '0',
+				'cat' => self::MOD_GALLERY,
+				'type_range' => self::BOOL,
+				'description' => 'Enable full dock transparency for desktop.',
+				'details' => 'On the photo view, actions at the top of the page are slightly transparent. Enable this to have them fully transparent and only appear on hover.',
+				'is_secret' => false,
+				'is_expert' => true,
+				'order' => 40,
+				'not_on_docker' => false,
+				'level' => 0,
+			],
+			[
+				'key' => 'mobile_dock_full_transparency_enabled',
+				'value' => '0',
+				'cat' => self::MOD_GALLERY,
+				'type_range' => self::BOOL,
+				'description' => 'Enable full dock transparency for mobile.',
+				'details' => '<span class="pi pi-exclamation-triangle text-orange-500"></span> This will impact usability on mobile. On the photo view, actions at the top of the page are slightly transparent. Enable this to have them fully transparent and only appear on tap.',
+				'is_secret' => false,
+				'is_expert' => true,
+				'order' => 41,
+				'not_on_docker' => false,
+				'level' => 0,
+			],
+		];
+	}
+};

resources/js/components/gallery/photoModule/Dock.vue

@@ -3,8 +3,12 @@
 		v-if="photoStore.photo"
 		:class="{
 			'absolute top-0 w-full sm:w-1/2 left-1/2 -translate-x-1/2': true,
-			'opacity-50 lg:opacity-20 lg:hover:opacity-100 transition-opacity duration-500 ease-in-out': !isTouchDevice(),
-			'opacity-75': isTouchDevice(),
+			'lg:hover:opacity-100 transition-opacity duration-500 ease-in-out': !isTouchDevice(),
+			'opacity-50 lg:opacity-20': !isTouchDevice() && !lycheeStore.is_desktop_dock_full_transparency_enabled,
+			'opacity-75': isTouchDevice() && !lycheeStore.is_mobile_dock_full_transparency_enabled,
+			'opacity-0':
+				(!isTouchDevice() && lycheeStore.is_desktop_dock_full_transparency_enabled) ||
+				(isTouchDevice() && lycheeStore.is_mobile_dock_full_transparency_enabled),
 			'z-20 mt-14 sm:mt-0': true,
 			'sm:h-1/4': !props.isNarrowMenu,
 			'h-14': props.isNarrowMenu,

resources/js/lychee.d.ts

@@ -255,15 +255,16 @@ declare namespace App.Http.Resources.Editable {
 	};
 }
 declare namespace App.Http.Resources.Embed {
+	export type EmbedAlbumInfo = {
+		id: string;
+		title: string;
+		description: string | null;
+		photo_count: number;
+		copyright: string | null;
+		license: string | null;
+	};
 	export type EmbedAlbumResource = {
-		album: {
-			id: string;
-			title: string;
-			description: string | null;
-			photo_count: number;
-			copyright: string | null;
-			license: string | null;
-		};
+		album: App.Http.Resources.Embed.EmbedAlbumInfo;
 		photos: App.Http.Resources.Embed.EmbedPhotoResource[];
 	};
 	export type EmbedPhotoResource = {
@@ -273,6 +274,10 @@ declare namespace App.Http.Resources.Embed {
 		size_variants: App.Http.Resources.Models.SizeVariantsResouce;
 		exif: { [key: string]: string | null };
 	};
+	export type EmbedStreamResource = {
+		site_title: string;
+		photos: App.Http.Resources.Embed.EmbedPhotoResource[];
+	};
 }
 declare namespace App.Http.Resources.Flow {
 	export type FlowItemResource = {
@@ -360,6 +365,8 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		is_favourite_enabled: boolean;
 		photo_previous_next_size: App.Enum.SmallLargeType;
 		is_details_links_enabled: boolean;
+		is_desktop_dock_full_transparency_enabled: boolean;
+		is_mobile_dock_full_transparency_enabled: boolean;
 		display_thumb_album_overlay: App.Enum.ThumbOverlayVisibilityType;
 		display_thumb_photo_overlay: App.Enum.ThumbOverlayVisibilityType;
 		album_subtitle_type: App.Enum.ThumbAlbumSubtitleType;

resources/js/stores/LycheeState.ts

@@ -30,6 +30,8 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 		is_favourite_enabled: false,
 		photo_previous_next_size: "small" as App.Enum.SmallLargeType,
 		is_details_links_enabled: false,
+		is_desktop_dock_full_transparency_enabled: false,
+		is_mobile_dock_full_transparency_enabled: false,
 
 		// keybinding help
 		show_keybinding_help_popup: false,
@@ -156,6 +158,8 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 					this.is_medium2x_download_enabled = data.is_medium2x_download_enabled;
 					this.photo_previous_next_size = data.photo_previous_next_size;
 					this.is_details_links_enabled = data.is_details_links_enabled;
+					this.is_desktop_dock_full_transparency_enabled = data.is_desktop_dock_full_transparency_enabled;
+					this.is_mobile_dock_full_transparency_enabled = data.is_mobile_dock_full_transparency_enabled;
 
 					this.is_registration_enabled = data.is_registration_enabled;