New: Optimized sidebar thumbnails

Author: ollm

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Allow disabling `Do not enlarge more than its original size` in Webtoon mode [`7519ac5`](https://github.com/ollm/OpenComic/commit/7519ac5cd0ac4407a4d0edec7e7a3e2a76832f84)
 - Improved rotation and support for rotating in PDF [`cb90771`](https://github.com/ollm/OpenComic/commit/cb907714ca7d713bcbf3471564e48a3e67c8ca40)
 - PDFs are rendered to a blob image instead of a canvas [`554c1ef`](https://github.com/ollm/OpenComic/commit/554c1ef88adf358acae14f9bf28f0e1f4f626d8f)
+- Optimized sidebar thumbnails
 
 ##### 🐛 Bug Fixes
 
@@ -20,7 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Correct support Komga OPDS server [`0ae69bf`](https://github.com/ollm/OpenComic/commit/0ae69bf29612ef667cf944bf07ab8e7e488fd60c)
 - Some mime types are not correct detected [`baa8397`](https://github.com/ollm/OpenComic/commit/baa8397da5f33b5129607bbcc368c4eb782bc4e9)
 - Update electron to fix white lines in Webtoon mode [`2b98eb3`](https://github.com/ollm/OpenComic/commit/2b98eb3af7c1651149063e6176a5ae7e6b3d1c81)
-- Navigation back not working with shortcuts and gamepad
+- Navigation back not working with shortcuts and gamepad [`ba8641f`](https://github.com/ollm/OpenComic/commit/ba8641f96ed3c8bdef8e35ce98af55b7e6d10bc8)
 
 ## [v1.5.0](https://github.com/ollm/OpenComic/releases/tag/v1.5.0) (19-06-2025)
 

scripts/cache.js

@@ -227,9 +227,9 @@ function returnThumbnailsImages(images, callback, file = false)
 
 	if(toGenerateThumbnails.length > 0 && file)
 	{
-		threads.job('cacheMakeAvailable', {useThreads: 0.01, delay: 50}, function() {
+		threads.job('cacheMakeAvailable', {useThreads: 0.01, delay: 50}, async function() {
 
-			file.makeAvailable(toGenerateThumbnails, function(image) {
+			await file.makeAvailable(toGenerateThumbnails, function(image) {
 
 				const data = toGenerateThumbnailsData[image.path];
 				const size = data.type ? sizes[data.type][data.forceSize] : sizes.image[data.forceSize];
@@ -238,6 +238,8 @@ function returnThumbnailsImages(images, callback, file = false)
 
 			}, false, true);
 
+			file.afterDestroy();
+
 		});
 	}
 

scripts/dom.js

@@ -2654,12 +2654,6 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
 				images.push(file);
 		}
 
-		let thumbnails = cache.returnThumbnailsImages(images, function(data) {
-
-			addImageToDom(data.sha, data.path);
-
-		}, file);
-
 		for(let i = 0; i < len; i++)
 		{
 			let file = files[i];
@@ -2684,15 +2678,12 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
 			}
 			else
 			{
-				let thumbnail = thumbnails[file.sha] || {};
-
 				comics.push({
 					sha: file.sha,
 					name: file.name.replace(/\.[^\.]*$/, ''),
 					image: fileManager.realPath(file.path),
 					path: file.path,
 					mainPath: mainPath,
-					thumbnail: (thumbnail.cache) ? thumbnail.path : '',
 					size: file.size || false,
 					canvas: isCanvas,
 					ebook: isEbook,

scripts/file-manager.js

@@ -18,6 +18,7 @@ var file = function(path, _config = false) {
 		filtered: true,
 		sha: true,
 		only: false,
+		log: true,
 	};
 
 	if(_config) this.config = {...this.config, ..._config};
@@ -180,7 +181,7 @@ var file = function(path, _config = false) {
 			this.compressedOpened[path] = {
 				lastUsage: now,
 				mtimeMainCompressed: mtime,
-				compressed: fileManager.fileCompressed(path, _realPath, this.config.forceType, this.config.prefixes),
+				compressed: fileManager.fileCompressed(path, _realPath, this.config.forceType, this.config.prefixes, {log: this.config.log}),
 			};
 		}
 		else
@@ -895,8 +896,12 @@ var file = function(path, _config = false) {
 		}
 	}
 
+	this.destroyed = false;
+
 	this.destroy = function() {
 
+		this.destroyed = true;
+
 		for(let path in this.compressedOpened)
 		{
 			this.compressedOpened[path].compressed.destroy();
@@ -912,10 +917,17 @@ var file = function(path, _config = false) {
 		this.macosScopedResources = [];
 
 	};
+
+	this.afterDestroy = function() {
+
+		if(this.destroyed)
+			this.destroy();
+
+	}
 }
 
 // Compressed files
-var fileCompressed = function(path, _realPath = false, forceType = false, prefixes = false) {
+var fileCompressed = function(path, _realPath = false, forceType = false, prefixes = false, _config = false) {
 
 	this.path = path;
 	this.realPath = _realPath || realPath(path, -1);
@@ -962,8 +974,11 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 		width: window.devicePixelRatio * 300, // Vector width
 		height: false, // Vector height
 		force: false, // Forces the extraction even if the file exists
+		log: true,
 	};
 
+	if(_config) this.config = this._config = {...this.config, ..._config};
+
 	this._features = {
 		'7z': { // 7z incldues multiple formats, like zip, rar, tar, etc.
 			read: true,
@@ -996,6 +1011,27 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 
 	this.features = false;
 
+	this.log = function(message) {
+
+		if(this.config.log)
+			console.log(message);
+
+	}
+
+	this.time = function(key, message) {
+
+		if(this.config.log)
+			console.time(key, message);
+
+	}
+
+	this.timeEnd = function(key, message) {
+
+		if(this.config.log)
+			console.timeEnd(key, message);
+
+	}
+
 	this.updateConfigOnly = function(_only) {
 
 		if(!_only)
@@ -1091,7 +1127,7 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 		this.setTmpUsage();
 
 		const message = 'readCompressed | '+this.features.ext+(this.features.fileExt && this.features.ext !== this.features.fileExt ? ' ('+this.features.fileExt+')' : '')+' | '+this.path;
-		console.time(message);
+		this.time(message);
 
 		let files = false;
 
@@ -1102,7 +1138,7 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 		else if(this.features.epub)
 			files = await this.readEpub();
 
-		console.timeEnd(message);
+		this.timeEnd(message);
 
 		return files;
 	}
@@ -1347,7 +1383,7 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 
 		await threads.job('extractCurrent--'+this.sha, {useThreads: 0.01}, async function() {
 
-			console.time(message);
+			self.time(message);
 
 			if(self.features['7z'])
 				files = await self.extract7z();
@@ -1360,7 +1396,7 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 
 		});
 
-		console.timeEnd(message);
+		this.timeEnd(message);
 
 		return files;
 	}
@@ -2209,7 +2245,7 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 
 		if((status && (status.widthRendered !== this.config.width)) || this.config.force)
 		{
-			console.log('renderBlobPdf');
+			this.log('renderBlobPdf');
 
 			// Render page
 			let page = await pdf.getPage(status.page);
@@ -2384,7 +2420,7 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 
 	this.ebookPagesEpub = async function(config = {}) {
 
-		console.time('ebookPagesEpub: '+this.path);
+		this.time('ebookPagesEpub: '+this.path);
 
 		let epub = await this.openEpub();
 		let _this = this;
@@ -2409,7 +2445,7 @@ var fileCompressed = function(path, _realPath = false, forceType = false, prefix
 
 		this.setProgress(1);
 
-		console.timeEnd('ebookPagesEpub: '+this.path);
+		this.timeEnd('ebookPagesEpub: '+this.path);
 
 		return pages;
 
@@ -3435,8 +3471,8 @@ module.exports = {
 	file: function(path, _config = false) {
 		return new file(path, _config);
 	},
-	fileCompressed: function(path, realPath = false, forceType = false, prefixes = false){ // This consider moving it to a separate file
-		return new fileCompressed(path, realPath, forceType, prefixes);
+	fileCompressed: function(path, realPath = false, forceType = false, prefixes = false, _config = false){ // This consider moving it to a separate file
+		return new fileCompressed(path, realPath, forceType, prefixes, _config);
 	},
 	removeTmpVector: removeTmpVector,
 	removePathPart: removePathPart,

scripts/gamepad.js

@@ -944,6 +944,9 @@ var gamepadResizeST = false;
 
 window.addEventListener('resize', function(){
 
+	if(!windowHasLoaded)
+		return;
+
 	gamepadResizeST = setTimeout(function(){
 
 		updateBrowsableItems(currentKey);

scripts/reading.js

@@ -3,7 +3,8 @@ const render = require(p.join(appDir, 'scripts/reading/render.js')),
 	music = require(p.join(appDir, 'scripts/reading/music.js')),
 	contextMenu = require(p.join(appDir, 'scripts/reading/context-menu.js')),
 	pageTransitions = require(p.join(appDir, 'scripts/reading/page-transitions.js')),
-	readingEbook = require(p.join(appDir, 'scripts/reading/ebook.js'));
+	readingEbook = require(p.join(appDir, 'scripts/reading/ebook.js')),
+	sidebar = require(p.join(appDir, 'scripts/reading/sidebar.js'));
 
 var images = {}, imagesData = {}, imagesDataClip = {}, imagesPath = {}, imagesNum = 0, contentNum = 0, imagesNumLoad = 0, currentIndex = 1, imagesPosition = {}, imagesFullPosition = {}, prevImagesFullPosition = {}, foldersPosition = {}, indexNum = 0, imagesDistribution = [], currentPageXY = {x: 0, y: 0}, currentMousePosition = {pageX: 0, pageY: 0};
 
@@ -981,6 +982,8 @@ function goToImageCL(index, animation = true, fromScroll = false, fromPageRange
 			else
 				leftScroll.scrollTop = 0;
 		}
+
+		sidebar.disableEvent(animationDurationMS + 50);
 	}
 
 	if(!fromPageRange)
@@ -992,6 +995,8 @@ function goToImageCL(index, animation = true, fromScroll = false, fromPageRange
 	const readingLeft = contentLeft.querySelector('.reading-left-images');
 	if(readingLeft) readingLeft.style.opacity = 1;
 
+	sidebar.goToImage(index);
+
 	// Change header buttons
 	if(!fromPageRange && (!readingViewIs('scroll') || !fromScroll))
 		changeHeaderButtons();
@@ -5602,6 +5607,8 @@ async function read(path, index = 1, end = false, isCanvas = false, isEbook = fa
 				imagesData[index] = {width: width, height: height, aspectRatio: (width / height), rotated: rotated, name: image.name};
 		}
 
+		sidebar.sizes(imagesData, currentComics);
+
 		render.setImagesData(imagesData);
 		filters.setImagesPath(imagesPath, readingCurrentPath);
 
@@ -5655,6 +5662,8 @@ async function read(path, index = 1, end = false, isCanvas = false, isEbook = fa
 			}
 		}
 
+		sidebar.sizes(imagesData, currentComics);
+
 		render.setImagesData(imagesData);
 		filters.setImagesPath(imagesPath, readingCurrentPath);
 
@@ -5809,4 +5818,5 @@ module.exports = {
 	contextMenu: contextMenu,
 	pageTransitions: pageTransitions,
 	render: render,
+	sidebar: sidebar,
 };