fix some complaints from @qwerty287

app/Http/Resources/Models/PhotoResource.php

@@ -123,7 +123,7 @@ private function preformatted(?SizeVariant $original): array
 			'lens' => $this->resource->lens === '' ? '' : sprintf('(%s)', $this->resource->lens),
 
 			'duration' => Helpers::secondsToHMS(intval($this->resource->aperture)),
-			'fps' => $this->resource->focal ?? '',
+			'fps' => $this->resource->focal === null ? $this->resource->focal . ' fps' : '',
 
 			'filesize' => Helpers::getSymbolByQuantity($original->filesize),
 			'resolution' => $original->width . ' x ' . $original->height,

app/Livewire/Components/Pages/Gallery/Album.php

@@ -48,14 +48,14 @@ class Album extends Component implements Reloadable
 	public string $overlayType;
 	public ?AbstractAlbum $album = null;
 	#[Locked] public string $albumId;
+	#[Locked] public string $photoId;
 	#[Locked] public ?string $header_url = null;
 	#[Locked] public int $num_children = 0;
 	#[Locked] public int $num_photos = 0;
 	#[Locked] public int $num_users = 0;
 	#[Locked] public PhotoFlags $photoFlags;
 	public AlbumFlags $flags;
 	public SessionFlags $sessionFlags;
-	public string $selectedPhoto = '';
 
 	/**
 	 * Boot method, called before any interaction with the component.
@@ -67,9 +67,10 @@ public function boot(): void
 		$this->albumFactory = resolve(AlbumFactory::class);
 	}
 
-	public function mount(string $albumId): void
+	public function mount(string $albumId, string $photoId = ''): void
 	{
 		$this->albumId = $albumId;
+		$this->photoId = $photoId;
 		$this->flags = new AlbumFlags();
 
 		$this->reloadPage();
@@ -84,6 +85,7 @@ public function render(): View
 	{
 		$this->sessionFlags = SessionFlags::get();
 		$this->flags->can_edit = Gate::check(AlbumPolicy::CAN_EDIT, [AbstractAlbum::class, $this->album]);
+		$this->flags->can_download = Gate::check(AlbumPolicy::CAN_DOWNLOAD, [AbstractAlbum::class, $this->album]);
 
 		if ($this->flags->is_accessible) {
 			$this->num_users = User::count();

app/Livewire/DTO/AlbumFlags.php

@@ -14,6 +14,7 @@ public function __construct(
 		public bool $is_map_accessible = false,
 		public bool $is_base_album = false,
 		public bool $can_edit = false,
+		public bool $can_download = false,
 		public ?string $layout = null,
 	) {
 		$this->is_map_accessible = Configs::getValueAsBool('map_display');

resources/js/app.ts

@@ -3,15 +3,11 @@ import "lazysizes";
 import { webauthn } from "./data/webauthn";
 import { layouts } from "./directive/layouts";
 import { views } from "./data/views";
-import { photoView } from "@/lycheeOrg/photoView.js";
 
 // suggested in the Alpine docs:
 // make Alpine on window available for better DX
 window.Alpine = Alpine;
 
 document.addEventListener("alpine:init", () => {
 	[...webauthn, ...layouts, ...views].forEach(Alpine.plugin);
-
-	// @ts-expect-error
-	Alpine.data("photoView", photoView);
 });

resources/js/data/views/PhotoIntegration.ts

@@ -11,6 +11,7 @@ export default class PhotoIntegration {
 		this.size_variants = photo.size_variants;
 		this.precomputed = photo.precomputed;
 		this.preformatted = photo.preformatted;
+
 		console.log(photo);
 	}
 

resources/js/data/views/albumFlagsView.ts

@@ -0,0 +1,13 @@
+export default class AlbumFlagsView {
+	areDetailsOpen: boolean;
+	activeTab: number;
+	areSharingLinksOpen: boolean;
+	areNsfwVisible: boolean;
+
+	constructor(areNsfwVisible: boolean) {
+		this.areDetailsOpen = false;
+		this.activeTab = 0;
+		this.areSharingLinksOpen = false;
+		this.areNsfwVisible = areNsfwVisible;
+	}
+}

resources/js/data/views/albumView.ts

@@ -2,9 +2,11 @@ import Selection from "@/lycheeOrg/actions/selection";
 import AlbumActions from "@/lycheeOrg/actions/albumActions";
 import type { Alpine } from "alpinejs";
 import type { Photo } from "@/lycheeOrg/backend";
-import { AlbumView, AlbumViewBooleanKeys, OverlayTypes } from "./types";
-import UnpriviledgedKeys from "@/lycheeOrg/actions/unpriviledgedKeys";
+import { AlbumView, OverlayTypes } from "./types";
+import Keybindings from "@/lycheeOrg/actions/keybindings";
 import PhotoIntegration from "./PhotoIntegration";
+import AlbumFlagsView from "./albumFlagsView";
+import PhotoFlagsView from "./photoFlagsView";
 
 export const albumView = (Alpine: Alpine) =>
 	Alpine.data(
@@ -13,7 +15,9 @@ export const albumView = (Alpine: Alpine) =>
 		(
 			nsfwAlbumsVisible: boolean,
 			isFullscreen: boolean,
+			arePhotoDetailsOpen: boolean,
 			canEdit: boolean,
+			canDownload: boolean,
 			parent_id: string | null = null,
 			albumIDs: string[] = [],
 			photos: Photo[] = [],
@@ -22,19 +26,16 @@ export const albumView = (Alpine: Alpine) =>
 		): AlbumView => ({
 			select: new Selection(albumIDs, photos, canEdit),
 			actions: new AlbumActions(),
-			unprivileged: new UnpriviledgedKeys(),
-
-			detailsOpen: false,
-			detailsActiveTab: 0,
+			keybinds: new Keybindings(),
+			albumFlags: new AlbumFlagsView(nsfwAlbumsVisible),
+			photoFlags: new PhotoFlagsView(arePhotoDetailsOpen, overlayType),
 
 			loginModalOpen: false,
 			parent_id: parent_id,
 			canEdit: canEdit,
-			sharingLinksOpen: false,
-			nsfwAlbumsVisible: nsfwAlbumsVisible,
+			canDownload: canDownload,
 			isFullscreen: isFullscreen,
 			selectedPhoto: null,
-			overlayType: overlayType,
 
 			init() {
 				if (selectedPhoto !== "") {
@@ -47,13 +48,23 @@ export const albumView = (Alpine: Alpine) =>
 				}
 			},
 
-			silentToggle(elem: AlbumViewBooleanKeys) {
-				this[elem] = !this[elem];
+			toggleFullScreen() {
+				this.isFullscreen = !this.isFullscreen;
+
+				// @ts-expect-error
+				this.$wire.silentUpdate();
+			},
 
+			toggleNSFW() {
+				this.albumFlags.areNsfwVisible = !this.albumFlags.areNsfwVisible;
 				// @ts-expect-error
 				this.$wire.silentUpdate();
 			},
 
+			toggleDetails() {
+				this.albumFlags.areDetailsOpen = !this.albumFlags.areDetailsOpen;
+			},
+
 			handleContextPhoto(event: MouseEvent) {
 				this.actions.handleContextPhoto(event, this);
 			},
@@ -74,15 +85,33 @@ export const albumView = (Alpine: Alpine) =>
 					return;
 				}
 
-				if (this.unprivileged.handleKeydown(event, this)) {
+				// [h] hide
+				// [f] fullscreen
+				// [l] login
+				// [k] keybinds
+				// [esc] back
+				if (this.keybinds.handleGlobalKeydown(event, this)) {
 					return;
 				}
 
+				if (this.selectedPhoto !== null && this.keybinds.handlePhotoKeyDown(event, this)) {
+					return;
+				}
+
+				// ctrl + a
 				if (this.select.handleKeydown(event)) {
 					return;
 				}
 
-				this.actions.handleKeydown(event, this);
+				// [n] new
+				// [u] upload
+				// [m] move (if selection is active)
+				// [r] rename (if selection is active)
+				// [d] description
+				// [i] info
+				// [m] move (without select)
+				// [r] rename (without select)
+				this.keybinds.handleAlbumKeydown(event, this);
 			},
 
 			moveAlbums() {
@@ -163,23 +192,11 @@ export const albumView = (Alpine: Alpine) =>
 			},
 
 			rotateOverlay() {
-				switch (this.overlayType) {
-					case "exif":
-						this.overlayType = "date";
-						break;
-					case "date":
-						if (this.selectedPhoto?.photo.description !== "") {
-							this.overlayType = "description";
-						} else {
-							this.overlayType = "none";
-						}
-						break;
-					case "description":
-						this.overlayType = "none";
-						break;
-					default:
-						this.overlayType = "exif";
+				const photo: Photo | undefined = this.selectedPhoto?.photo;
+				if (photo === undefined) {
+					return;
 				}
+				this.photoFlags.rotateOverlay(photo);
 			},
 
 			previousStyle(): string {
@@ -206,6 +223,8 @@ export const albumView = (Alpine: Alpine) =>
 					return;
 				}
 				this.selectedPhoto = new PhotoIntegration(previousPhoto);
+				// ! TODO fix me: make /livewire/ prefix dependent of .env
+				history.pushState({}, "", "/livewire/gallery/" + this.parent_id + "/" + previousId);
 			},
 
 			nextStyle(): string {
@@ -230,6 +249,8 @@ export const albumView = (Alpine: Alpine) =>
 					return;
 				}
 				this.selectedPhoto = new PhotoIntegration(nextPhoto);
+				// ! TODO fix me: make /livewire/ prefix dependent of .env
+				history.pushState({}, "", "/livewire/gallery/" + this.parent_id + "/" + nextId);
 			},
 		})
 	);

resources/js/data/views/photoFlagsView.ts

@@ -0,0 +1,34 @@
+import { Photo } from "@/lycheeOrg/backend";
+import { OverlayTypes } from "./types";
+
+export default class PhotoFlagsView {
+	areDetailsOpen: boolean;
+	overlayType: OverlayTypes;
+	areEditOpen: boolean;
+
+	constructor(areDetailsOpen: boolean, overlayType: OverlayTypes = "none") {
+		this.areDetailsOpen = areDetailsOpen;
+		this.overlayType = overlayType;
+		this.areEditOpen = false;
+	}
+
+	rotateOverlay(photo: Photo) {
+		switch (this.overlayType) {
+			case "exif":
+				this.overlayType = "date";
+				break;
+			case "date":
+				if (photo.description !== "") {
+					this.overlayType = "description";
+				} else {
+					this.overlayType = "none";
+				}
+				break;
+			case "description":
+				this.overlayType = "none";
+				break;
+			default:
+				this.overlayType = "exif";
+		}
+	}
+}

resources/js/data/views/types.d.ts

@@ -1,42 +1,47 @@
 import { Photo } from "@/lycheeOrg/backend";
 import { AlpineComponent } from "alpinejs";
 import PhotoIntegration from "./PhotoIntegration";
-import PhotoSwipe from "photoswipe";
 import type Selection from "@/lycheeOrg/actions/selection";
 import type AlbumActions from "@/lycheeOrg/actions/albumActions";
-import type UnpriviledgedKeys from "@/lycheeOrg/actions/unpriviledgedKeys";
+import type Keybindings from "@/lycheeOrg/actions/keybindings";
+import AlbumFlagsView from "./albumFlagsView";
+import PhotoFlagsView from "./photoFlagsView";
 
 export interface PhotoArray {
 	[key: string]: Photo;
 }
 
-export type AlbumViewBooleanKeys = "isFullscreen" | "nsfwAlbumsVisible";
 export type OverlayTypes = "none" | "exif" | "date" | "description";
 
 export type AlbumView = AlpineComponent<{
 	select: Selection;
 	actions: AlbumActions;
-	unprivileged: UnpriviledgedKeys;
+	keybinds: Keybindings;
+	albumFlags: AlbumFlagsView;
+	photoFlags: PhotoFlagsView;
 	loginModalOpen: boolean;
 	parent_id: string | null;
 	canEdit: boolean;
-	detailsOpen: boolean;
-	detailsActiveTab: number;
-	sharingLinksOpen: boolean;
-	nsfwAlbumsVisible: boolean;
+	canDownload: boolean;
 	isFullscreen: boolean;
 	selectedPhoto: PhotoIntegration | null;
-	overlayType: OverlayTypes;
-	silentToggle: (elem: AlbumViewBooleanKeys) => void;
+	toggleFullScreen: () => void;
+	toggleNSFW: () => void;
+	toggleDetails: () => void;
+
 	handleContextPhoto: (event: MouseEvent) => void;
 	handleClickPhoto: (event: MouseEvent) => void;
 	handleContextAlbum: (event: MouseEvent) => void;
 	handleKeydown: (event: KeyboardEvent) => void;
+
+	// Album actions (right click)
 	moveAlbums: () => void;
 	mergeAlbums: () => void;
 	renameAlbums: () => void;
 	deleteAlbums: () => void;
 	donwloadAlbums: () => void;
+
+	// Photo actions (right click)
 	copyPhotosTo: () => void;
 	movePhotos: () => void;
 	renamePhotos: () => void;
@@ -46,6 +51,8 @@ export type AlbumView = AlpineComponent<{
 	unstarPhotos: () => void;
 	setCover: () => void;
 	donwloadPhotos: () => void;
+
+	// Photo View
 	rotateOverlay: () => void;
 	previousStyle: () => string;
 	nextStyle: () => string;

resources/js/directive/layouts/justify.ts

@@ -34,11 +34,6 @@ function useJustify(el: ElementWithXAttributes<HTMLElement>) {
 	// @ts-expect-error
 	const justifiedItems: ChildNodeWithDataStyle[] = [...el.childNodes].filter((gridItem) => gridItem.nodeType === 1);
 
-	justifiedItems.forEach((e) => {
-		e.dataset.width;
-		e.dataset.height;
-	});
-
 	const ratio: number[] = justifiedItems.map(function (_photo) {
 		const height = _photo.dataset.height;
 		const width = _photo.dataset.width;