New: Local Artwork Assets

Author: ollm

CHANGELOG.md

@@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Updated electron to v25.5.0 [`41214a5`](https://github.com/ollm/OpenComic/commit/41214a50bc9b0bce56f12b302d47f6d44f12fd81)
 - Update theme to Material 3 [`0f537fb`](https://github.com/ollm/OpenComic/commit/0f537fb37d9108986f1cdac41cc56e6c51d51428)
 - Settings page to set some default values [`12907bc`](https://github.com/ollm/OpenComic/commit/12907bcb84dccc5c8f0a65c78c65915f55e8cb0f)
+- Drag and Drop support [`91933a9`](https://github.com/ollm/OpenComic/commit/91933a998885a2579592566d7773549085495e4e)
 
 ### 🐛 Bug Fixes
 

scripts/app.js

@@ -79,8 +79,14 @@ function empty(mixedVar)
 	return false
 }
 
+function extname(path)
+{
+	return p.extname(path).replace(/^.*\./, '').toLowerCase();
+}
+
 module.exports = {
 	event: event,
 	eventOff: eventOff,
 	empty: empty,
+	extname: extname,
 };

scripts/dom.js

@@ -434,6 +434,7 @@ function addImageToDom(querySelector, path, animation = true)
 		else
 			$('.fi-sha-'+querySelector+', .sha-'+querySelector+' .item-image').css({'background-image': 'url('+path+')'}).addClass('a');
 
+		$('.pi-sha-'+querySelector).css({'background-image': 'url('+path+')'}).addClass('a');
 		$('.ri-sha-'+querySelector).attr('src', path);
 		$('.continue-reading-sha-'+querySelector).css({'background-image': 'url('+path+')'}).addClass('a');
 	}
@@ -446,6 +447,7 @@ function addImageToDom(querySelector, path, animation = true)
 		else
 			$('.fi-sha-'+querySelector+', .sha-'+querySelector+' .item-image').css({'transition': '0s', 'background-image': 'url('+path+')'});
 
+		$('.pi-sha-'+querySelector).css({'background-image': 'url('+path+')'});
 		$('.ri-sha-'+querySelector).attr('src', path);
 		$('.continue-reading-sha-'+querySelector).css({'transition': '0s', 'background-image': 'url('+path+')'});
 	}
@@ -504,12 +506,20 @@ async function loadFilesIndexPage(file, animation, path, keepScroll, mainPath)
 				}
 				else if(file.folder || file.compressed)
 				{
-					let images = await getFolderThumbnails(filePath);
+					let poster = await getFolderPoster(filePath);
+					
+					let images = [];
+
+					if(!poster)
+					{
+						images = await getFolderThumbnails(filePath);
+					}
 
 					pathFiles.push({
 						name: fileName,
 						path: filePath,
 						mainPath: mainPath,
+						poster: poster,
 						images: images,
 						folder: true,
 					});
@@ -655,8 +665,16 @@ async function loadIndexPage(animation = true, path = false, content = false, ke
 
 			for(let key in comics)
 			{
-				var images = await getFolderThumbnails(comics[key].path);
+				let poster = await getFolderPoster(comics[key].path);
+				
+				let images = [];
+
+				if(!poster)
+				{
+					images = await getFolderThumbnails(comics[key].path);
+				}
 
+				comics[key].poster = poster;
 				comics[key].images = images;
 				comics[key].mainPath = config.showFullPathLibrary ? p.parse(comics[key].path).root : comics[key].path;
 			}
@@ -891,6 +909,65 @@ async function getFolderThumbnails(path)
 	return images;
 }
 
+async function getFolderPoster(path)
+{
+	let dirname = p.dirname(path);
+	let basename = p.basename(path);
+	let name = p.parse(basename).name;
+
+	// console.log(path);
+
+	try
+	{
+		let file = fileManager.file(dirname);
+		file.updateConfig({cacheOnly: true, fastRead: true, specialFiles: true, sha: false});
+		let files = await file.read();
+
+		let regex = new RegExp('^'+pregQuote(name)+'\.[a-z0-9]+');
+		let poster = false;
+
+		for(let i = 0, len = files.length; i < len; i++)
+		{
+			let file = files[i];
+
+			if(!file.folder && !file.compressed && regex.test(file.name))
+			{
+				file.sha = sha1(file.path);
+				poster = file;
+
+				break;
+			}
+		}
+
+		if(poster)
+		{
+			let thumbnail = cache.returnThumbnailsImages({path: poster.path, sha: poster.sha}, function(data){
+
+				addImageToDom(data.sha, data.path);
+
+			}, file);
+
+			console.log(thumbnail);
+
+			return thumbnail;
+		}
+	}
+	catch(error)
+	{
+		if(error.message && error.message === 'notCacheOnly')
+		{
+			// Nothing to do
+		}
+		else
+		{
+			console.error(error);
+			dom.compressedError(error);
+		}
+	}
+
+	return false;
+}
+
 var indexPathControlA = [], indexPathA = false, indexMainPathA = false;
 
 function indexPathControlGoBack()

scripts/file-manager.js

@@ -80,7 +80,7 @@ var file = function(path) {
 			this.files = files;
 		}
 
-		return this.config.filtered ? filtered(files) : files;
+		return this.config.filtered ? filtered(files, this.config.specialFiles) : files;
 	}
 
 	this.readDir = function(path = false, _realPath = false) {
@@ -98,12 +98,12 @@ var file = function(path) {
 				let filePath = p.join(path, _files[i]);
 				let retrunPath = filePath;
 
-				if(inArray(mime.getType(filePath), compatibleMime))
-					files.push({name: _files[i], path: retrunPath, folder: false, compressed: false});
-				else if(fs.statSync(filePath).isDirectory())
+				if(!this.config.fastRead && fs.statSync(filePath).isDirectory())
 					files.push({name: _files[i], path: retrunPath, folder: true, compressed: false});
 				else if(inArray(fileExtension(filePath), compressedExtensions.all))
 					files.push({name: _files[i], path: retrunPath, folder: false, compressed: true});
+				else
+					files.push({name: _files[i], path: retrunPath, folder: false, compressed: false});
 			}
 		}
 
@@ -1739,7 +1739,7 @@ function pathType(path)
 		return false;
 }
 
-function filtered(files)
+function filtered(files, specialFiles = false)
 {
 	let filtered = [];
 
@@ -1751,7 +1751,7 @@ function filtered(files)
 
 			if(file.folder || file.compressed)
 				filtered.push(file);
-			else if(inArray(mime.getType(file.path), compatibleMime))
+			else if(inArray(mime.getType(file.path), compatibleMime) || (specialFiles && inArray(app.extname(file.path), compatibleSpecialExtensions)))
 				filtered.push(file);
 		}
 	}

scripts/opencomic.js

@@ -195,6 +195,10 @@ var compatibleExtensions = [
 	/*compressed*/'zip', 'cbz', 'rar', 'cbr', '7z', 'cb7', 'tar', 'cbt', 'pdf',
 ];
 
+var compatibleSpecialExtensions = [
+	'tbn',
+];
+
 //console.time('Require time 2');
 
 const app = require(p.join(appDir, 'scripts/app.js')),

templates/index.content.right.module.html

@@ -11,11 +11,15 @@
 	<div class="{{#unless folder}}sha-{{sha}}{{/unless}} gamepad-item{{#if @first}} gamepad-to-highlight{{/if}}" onclick="{{#if folder}}dom.loadIndexPage(true, '{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}', false, false, '{{chain 'escapeBackSlash' 'escapeQuotesSimples' mainPath}}'){{else}}dom.openComic(true, '{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}', '{{chain 'escapeBackSlash' 'escapeQuotesSimples' mainPath}}');{{/if}}"{{#if @root.comicsIndex}} oncontextmenu="dom.comicContextMenu('{{chain 'escapeBackSlash' 'escapeQuotesSimples' mainPath}}')"{{/if}}>
 		{{#if folder}}
 		<div class="v-folder item-image">
-			{{#each images}}
-			<div class="fi-sha-{{sha}} folder-images">
-				<img src="{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}">
-			</div>
-			{{/each}}
+			{{#if poster}}
+				<div class="pi-sha-{{poster.sha}} folder-poster" style="background-image: url({{poster.path}})"></div>
+			{{else}}
+				{{#each images}}
+				<div class="fi-sha-{{sha}} folder-images">
+					<img src="{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}">
+				</div>
+				{{/each}}
+			{{/if}}
 		</div>
 		{{else}}
 		<div class="v-img">

themes/material-design/actions.css

@@ -415,6 +415,7 @@
 	overflow: hidden;
 	white-space: nowrap;
 	word-wrap: normal;
+	position: relative;
 }
 
 .menu-simple-element i
@@ -458,17 +459,30 @@
 
 .menu-simple-element.s
 {
-	background-color: rgba(0, 0, 0, 0.07);
+	background-color: var(--md-sys-color-secondary-container);
 }
 
-.menu-simple:hover .menu-simple-element.s
+.menu-simple-element:before
 {
-	background-color: rgba(0, 0, 0, 0);
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: transparent;
+	transition: 0.2s;
+	z-index: 0;
 }
 
-.menu-simple-element:hover
+.menu-simple-element:hover:before
 {
-	background-color: rgba(0, 0, 0, 0.07) !important;
+	background-color: var(--md-sys-color-on-surface-variant-2);
+}
+
+.menu-simple-element:active:before
+{
+	background-color: var(--md-sys-color-on-surface-variant-4);
 }
 
 .menu-simple-element-image
@@ -534,15 +548,15 @@
 	height: 32px;
 	padding: 0px 24px;
 	line-height: 32px;
-	transition: 0.2s;
+	transition: background-color 0.2s;
 }
 
 .menu-simple-text, .menu-simple-button
 {
 	height: 52px;
 	padding: 0px 24px;
 	line-height: 52px;
-	transition: 0.2s;
+	transition: background-color 0.2s;
 }
 
 .menu-simple-text .switch
@@ -1043,15 +1057,15 @@
 {
 	min-height: 64px;
 	padding: 0px 24px 15px 24px;
-	transition: 0.2s;
+	transition: background-color 0.2s;
 	box-sizing: border-box;
 }
 
 .simple-slider-text
 {
 	min-height: 32px;
 	line-height: 32px;
-	transition: 0.2s;
+	transition: background-color 0.2s;
 	margin-bottom: 15px;
 }
 

themes/material-design/theme.css

@@ -1326,6 +1326,28 @@ body .preload
 	animation-fill-mode: forwards;
 }
 
+.content-view-module .folder-poster
+{
+	height: calc(100% - 8px);
+	width: calc(100% - 8px);
+	position: absolute;
+	top: 4px;
+	left: 4px;
+	background-position: center;
+	border-radius: 10px;
+	background-repeat: no-repeat;
+	background-size: cover;
+	/*background-size: contain;
+	background-color: var(--md-sys-color-background);*/
+}
+
+.content-view-module .folder-poster.a
+{
+	animation-name: show-in;
+	animation-duration: 0.2s;
+	animation-fill-mode: forwards;
+}
+
 /* Continue reading */
 
 .continue-reading
@@ -1343,6 +1365,30 @@ body .preload
 	transform: scale(1.005);
 }
 
+.continue-reading:before
+{
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: transparent;
+	transition: 0.2s;
+	z-index: 1;
+	border-radius: 10px;
+}
+
+.continue-reading:hover:before
+{
+	background-color: var(--md-sys-color-on-surface-variant-2);
+}
+
+.continue-reading:active:before
+{
+	background-color: var(--md-sys-color-on-surface-variant-4);
+}
+
 .continue-reading:after
 {
 	content: '';