Custom album covers

scripts/main/album.js

@@ -483,6 +483,25 @@ album.setDescription = function (albumID) {
 	});
 };
 
+album.toggleCover = function (photoID) {
+	if (!photoID) return false;
+
+	album.json.cover_id = album.json.cover_id === photoID ? "" : photoID;
+
+	let params = {
+		albumID: album.json.id,
+		cover_id: album.json.cover_id,
+	};
+
+	api.post("Album::setCover", params, function (data) {
+		if (data !== true) {
+			lychee.error(null, params, data);
+		} else {
+			view.album.content.cover(photoID);
+		}
+	});
+};
+
 album.setLicense = function (albumID) {
 	const callback = function () {
 		$("select#license").val(album.json.license === "" ? "none" : album.json.license);

scripts/main/albums.js

@@ -81,8 +81,18 @@ albums.load = function () {
 albums.parse = function (album) {
 	let i;
 	for (i = 0; i < 3; i++) {
-		if (!album.thumbs[i]) {
-			album.thumbs[i] = album.password === "1" ? "img/password.svg" : "img/no_images.svg";
+		if (lychee.api_V2) {
+			if (!album.thumb) {
+				album.thumb = {};
+				album.thumb.id = "";
+				album.thumb.thumb = album.password === "1" ? "img/password.svg" : "img/no_images.svg";
+				album.thumb.type = "";
+				album.thumb.thumb2x = "";
+			}
+		} else {
+			if (!album.thumbs[i]) {
+				album.thumbs[i] = album.password === "1" ? "img/password.svg" : "img/no_images.svg";
+			}
 		}
 	}
 };

scripts/main/build.js

@@ -32,7 +32,7 @@ build.multiselect = function (top, left) {
 	return lychee.html`<div id='multiselect' style='top: ${top}px; left: ${left}px;'></div>`;
 };
 
-build.getAlbumThumb = function (data, i) {
+/*build.getAlbumThumb = function (data, i) {
 	let isVideo = data.types[i] && data.types[i].indexOf("video") > -1;
 	let isRaw = data.types[i] && data.types[i].indexOf("raw") > -1;
 	let thumb = data.thumbs[i];
@@ -57,6 +57,46 @@ build.getAlbumThumb = function (data, i) {
 		}
 	}
 
+	return `<span class="thumbimg${isVideo ? " video" : ""}"><img class='lazyload' src='img/placeholder.png' data-src='${thumb}' ${
+		thumb2x !== "" ? "data-srcset='" + thumb2x + " 2x'" : ""
+	} alt='Photo thumbnail' data-overlay='false' draggable='false'></span>`;
+};*/
+
+// two additional images that are barely visible seems a bit overkill - use same image 3 times
+// if this simplification comes to pass data.types, data.thumbs and data.thumbs2x no longer need to be arrays
+build.getAlbumThumb = function (data) {
+	let isVideo;
+	let isRaw;
+	let thumb;
+
+	if (lychee.api_V2) {
+		isVideo = data.thumb.type && data.thumb.type.indexOf("video") > -1;
+		isRaw = data.thumb.type && data.thumb.types.indexOf("raw") > -1;
+		thumb = data.thumb.thumb;
+	} else {
+		isVideo = data.types[0] && data.type.indexOf("video") > -1;
+		isRaw = data.types[0] && data.types[0].indexOf("raw") > -1;
+		thumb = data.thumbs[0];
+	}
+	var thumb2x = "";
+
+	if (thumb === "uploads/thumb/" && isVideo) {
+		return `<span class="thumbimg"><img src='img/play-icon.png' alt='Photo thumbnail' data-overlay='false' draggable='false'></span>`;
+	}
+	if (thumb === "uploads/thumb/" && isRaw) {
+		return `<span class="thumbimg"><img src='img/placeholder.png' alt='Photo thumbnail' data-overlay='false' draggable='false'></span>`;
+	}
+
+	if (lychee.api_V2) {
+		thumb2x = data.thumb.thumb2x;
+	} else {
+		// Fallback code for Lychee v3
+		var { path: thumb2x, isPhoto: isPhoto } = lychee.retinize(data.thumbs[0]);
+		if (!isPhoto) {
+			thumb2x = "";
+		}
+	}
+
 	return `<span class="thumbimg${isVideo ? " video" : ""}"><img class='lazyload' src='img/placeholder.png' data-src='${thumb}' ${
 		thumb2x !== "" ? "data-srcset='" + thumb2x + " 2x'" : ""
 	} alt='Photo thumbnail' data-overlay='false' draggable='false'></span>`;
@@ -86,9 +126,9 @@ build.album = function (data, disabled = false) {
 				data-id='${data.id}'
 				data-nsfw='${data.nsfw && data.nsfw === "1" ? `1` : `0`}'
 				data-tabindex='${tabindex.get_next_tab_index()}'>
-				  ${build.getAlbumThumb(data, 2)}
-				  ${build.getAlbumThumb(data, 1)}
-				  ${build.getAlbumThumb(data, 0)}
+				  ${build.getAlbumThumb(data)}
+				  ${build.getAlbumThumb(data)}
+				  ${build.getAlbumThumb(data)}
 				<div class='overlay'>
 					<h1 title='$${data.title}'>$${data.title}</h1>
 					<a>$${date_stamp}</a>
@@ -127,6 +167,7 @@ build.photo = function (data, disabled = false) {
 	let html = "";
 	let thumbnail = "";
 	var thumb2x = "";
+	let isCover = data.id === album.json.cover_id;
 
 	let isVideo = data.type && data.type.indexOf("video") > -1;
 	let isRaw = data.type && data.type.indexOf("raw") > -1;
@@ -226,8 +267,10 @@ build.photo = function (data, disabled = false) {
 	if (album.isUploadable()) {
 		html += lychee.html`
 				<div class='badges'>
-					<a class='badge ${data.star === "1" ? "badge--star" : ""} icn-star'>${build.iconic("star")}</a>
-					<a class='badge ${data.public === "1" && album.json.public !== "1" ? "badge--visible badge--hidden" : ""} icn-share'>${build.iconic("eye")}</a>
+				<a class='badge ${isCover ? "badge--cover" : ""} icn-cover'>${build.iconic("folder-cover")}</a>
+				<a class='badge ${data.star === "1" ? "badge--star" : ""} icn-star'>${build.iconic("star")}</a>
+				<a class='badge ${data.public === "1" && album.json.public !== "1" ? "badge--visible badge--hidden" : ""} icn-share'>${build.iconic("eye")}</a>
+
 				</div>
 				`;
 	}

scripts/main/contextMenu.js

@@ -63,6 +63,17 @@ contextMenu.album = function (albumID, e) {
 		{ title: build.iconic("cloud-download") + lychee.locale["DOWNLOAD"], fn: () => album.getArchive([albumID]) },
 	];
 
+	if (album.json) {
+		// not top level
+		let myalbum = album.getSubByID(albumID);
+		let coverActive = myalbum.cover_id !== album.json.cover_id;
+		// prepend context menu item
+		items.unshift({
+			title: build.iconic("folder-cover", coverActive ? "active" : "") + lychee.locale[coverActive ? "REMOVE_COVER" : "SET_COVER"],
+			fn: () => album.toggleCover(myalbum.cover_id),
+		});
+	}
+
 	$('.album[data-id="' + albumID + '"]').addClass("active");
 
 	basicContext.show(items, e.originalEvent, contextMenu.close);
@@ -209,13 +220,16 @@ contextMenu.albumTitle = function (albumID, e) {
 };
 
 contextMenu.photo = function (photoID, e) {
-	// Notice for 'Move':
-	// fn must call basicContext.close() first,
-	// in order to keep the selection
+	let coverActive = photoID === album.json.cover_id;
 
 	let items = [
 		{ title: build.iconic("star") + lychee.locale["STAR"], fn: () => photo.setStar([photoID]) },
 		{ title: build.iconic("tag") + lychee.locale["TAGS"], fn: () => photo.editTags([photoID]) },
+		// for future work, use a list of all the ancestors.
+		{
+			title: build.iconic("folder-cover", coverActive ? "active" : "") + lychee.locale[coverActive ? "REMOVE_COVER" : "SET_COVER"],
+			fn: () => album.toggleCover(photoID),
+		},
 		{},
 		{ title: build.iconic("pencil") + lychee.locale["RENAME"], fn: () => photo.setTitle([photoID]) },
 		{
@@ -225,6 +239,9 @@ contextMenu.photo = function (photoID, e) {
 				contextMenu.move([photoID], e, photo.copyTo, "UNSORTED");
 			},
 		},
+		// Notice for 'Move':
+		// fn must call basicContext.close() first,
+		// in order to keep the selection
 		{
 			title: build.iconic("folder") + lychee.locale["MOVE"],
 			fn: () => {

scripts/main/view.js

@@ -276,6 +276,13 @@ view.album = {
 			else $badge.removeClass("badge--visible badge--hidden");
 		},
 
+		cover: function (photoID) {
+			let $badge = $('.photo[data-id="' + photoID + '"] .icn-cover');
+
+			if (album.json.cover_id === photoID) $badge.addClass("badge--cover");
+			else $badge.removeClass("badge--cover");
+		},
+
 		delete: function (photoID, justify = false) {
 			$('.photo[data-id="' + photoID + '"]')
 				.css("opacity", 0)

styles/main/_basicContext.extended.scss

@@ -20,6 +20,10 @@
 		fill: white(1);
 	}
 
+	&__data .iconic.active {
+		fill: $colorOrange;
+	}
+
 	&__data .iconic.ionicons {
 		margin: 0 8px -2px 0;
 		width: 14px;

styles/main/_content.scss

@@ -234,6 +234,10 @@
 		&--hidden {
 			background: $colorOrange;
 		}
+		&--cover {
+			display: "inline-block";
+			background: $colorOrange;
+		}
 		&--star {
 			display: inline-block;
 			background: $colorYellow;