Fix: Blurry cover/poster images

CHANGELOG.md

@@ -4,18 +4,19 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## v1.1.1 (dd-mm-yyyy)
+## v1.2.0 (dd-mm-yyyy)
 
 ##### 🚀 New Features
 
 - Show error message if continue reading file does not exist [`7aee55c`](https://github.com/ollm/OpenComic/commit/7aee55ca5dac6b937824728b7ded116dc00c28df)
-- Support background music from folder: MP3, M4A, WEBM, WEBA, OGG, OPUS, WAV, FLAC
+- Support background music from folder: MP3, M4A, WEBM, WEBA, OGG, OPUS, WAV, FLAC [`26947a2`](https://github.com/ollm/OpenComic/commit/26947a297868e86069cc6daca77e1a3f016d0705)
 
 ##### 🐛 Bug Fixes
 
 - node-zstd not have native dependencies in arm64 build (Linux and macOS) [`e906f21`](https://github.com/ollm/OpenComic/commit/e906f212dae36c43d514beda44fba62e5ca26be5)
 - Manga mode not working in epub [`a901754`](https://github.com/ollm/OpenComic/commit/a901754a4274687cddbfa3820ca3667b8b80e6ee)
 - eBook not working with decimal device pixel ratio (1.5, 2.5, etc) [`4962724`](https://github.com/ollm/OpenComic/commit/496272442747e466638e890a187f84b100deda14)
+- Blurry cover/poster images
 
 ## [v1.1.0](https://github.com/ollm/OpenComic/releases/tag/v1.1.0) (13-01-2024)
 

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "opencomic",
 	"productName": "OpenComic",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"main": "scripts/main.js",
 	"type": "commonjs",
 	"keywords": [

scripts/cache.js

@@ -21,9 +21,9 @@ function processTheImageQueue()
 	let realPath = fileManager.realPath(img.file);
 	let toImage = p.join(cacheFolder, sha+'.jpg');
 
-	image.resize(realPath, toImage, {width: img.size, height: Math.round(img.size * 1.5), quality: 95}).then(function(){
+	image.resize(realPath, toImage, {width: img.size, height: Math.round(img.size * (img.poster ? 1.51369 : 1.5)), quality: 95, fit: img.poster ? 'cover' : 'inside'}).then(function(){
 
-		if(typeof data[sha] == 'undefined') data[sha] = {lastAccess: time()};
+		if(typeof data[sha] == 'undefined') data[sha] = {lastAccess: app.time()};
 
 		data[sha].size = img.size;
 
@@ -66,9 +66,9 @@ function processTheImageQueue()
 	});
 }
 
-function addImageToQueue(file, size, sha, callback, vars)
+function addImageToQueue(file, size, sha, callback, vars, poster)
 {
-	queuedImages.push({file: file, size: size, sha: sha, callback: callback, vars: vars});
+	queuedImages.push({file: file, size: size, sha: sha, callback: callback, vars: vars, poster: poster});
 
 	if(!processingTheImageQueue && !stopTheImageQueue)
 	{
@@ -125,6 +125,7 @@ function returnThumbnailsImages(images, callback, file = false)
 	images = single ? [images] : images;
 
 	let size = Math.round(window.devicePixelRatio * 150);
+	let sizePoster = Math.round(window.devicePixelRatio * 146);
 
 	let thumbnail = {};
 	let thumbnails = {};
@@ -137,26 +138,28 @@ function returnThumbnailsImages(images, callback, file = false)
 	{
 		let image = images[i];
 
-		let sha = image.sha || sha1(image.path);
+		let sha = (image.poster) ? sha1(image.path+'?type=poster') : (image.sha || sha1(image.path));
 		let imgCache = data[sha];
 
-		let path = addCacheVars(p.join(cacheFolder, sha+'.jpg'), size, sha);
+		let _size = image.poster ? sizePoster : size;
+
+		let path = addCacheVars(p.join(cacheFolder, sha+'.jpg'), _size, sha);
 
 		if(typeof imgCache == 'undefined' || !fs.existsSync(p.join(cacheFolder, sha+'.jpg')))
 		{
 			toGenerateThumbnails.push(image);
-			toGenerateThumbnailsData[image.path] = {sha: sha, vars: image.vars};
+			toGenerateThumbnailsData[image.path] = {sha: sha, vars: image.vars, poster: image.poster || false};
 
 			thumbnails[sha] = thumbnail = {cache: false, path: '', sha: sha};
 		}
 		else
 		{
 			data[sha].lastAccess = time;
 
-			if(imgCache.size != size)
+			if(imgCache.size != _size)
 			{
 				toGenerateThumbnails.push(image);
-				toGenerateThumbnailsData[image.path] = {sha: sha, vars: image.vars};
+				toGenerateThumbnailsData[image.path] = {sha: sha, vars: image.vars, poster: image.poster || false};
 
 				thumbnails[sha] = thumbnail = {cache: true, path: escapeBackSlash(path), sha: sha};
 			}
@@ -173,7 +176,8 @@ function returnThumbnailsImages(images, callback, file = false)
 		file.makeAvailable(toGenerateThumbnails, function(image) {
 
 			let data = toGenerateThumbnailsData[image.path];
-			addImageToQueue(image.path, size, data.sha, callback, data.vars || false);
+			let _size = data.poster ? sizePoster : size;
+			addImageToQueue(image.path, _size, data.sha, callback, data.vars || false, data.poster);
 
 		});
 	}

scripts/dom.js

@@ -1090,7 +1090,7 @@ async function _getFolderThumbnails(file, images, _images, path, folderSha, isAs
 	{
 		if(isAsync) dom.queryAll('.sha-'+folderSha+' .folder-images').remove();
 
-		poster = cache.returnThumbnailsImages({path: _images.path, sha: _images.sha}, function(data){
+		poster = cache.returnThumbnailsImages({path: _images.path, sha: _images.sha, poster: true}, function(data){
 
 			addImageToDom(data.sha, data.path);
 			addImageToDom(folderSha+'-0', data.path);

scripts/reading/music.js

@@ -1,10 +1,3 @@
-
-
-
-
-
-
-
 let current = false, audio = false;
 
 async function has(files)