New: Master folder support from settings

CHANGELOG.md

@@ -15,7 +15,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Improve the detection of the type of compressed files if the file extension is not correct [`b39605c`](https://github.com/ollm/OpenComic/commit/b39605c5d5ab72742cf32f14a23004976cccec7c)
 - Option to start OpenComic in startup (Windows and macOS only) [`7b9b8ec`](https://github.com/ollm/OpenComic/commit/7b9b8ec4457445ad9bb3a761face8403ff507b7f)
 - Buttons in library to go next and prev chapter [`c41ecde`](https://github.com/ollm/OpenComic/commit/c41ecde33a3b0b2361b9ccdcbec92d848b48077d)
-- Adjust the brightness, saturation, contrast, sepia and colorize black and white images
+- Adjust the brightness, saturation, contrast, sepia and colorize black and white images [`04b1caa`](https://github.com/ollm/OpenComic/commit/04b1caa5d28a468df6e94893bd943518da762030)
+- Master folder support from settings
 
 ##### 🐛 Bug Fixes
 

README.md

@@ -30,6 +30,7 @@
 
 - 🖼 Support this image formats: `JPG`, `PNG`, `APNG`, `AVIF`, `WEBP`, `GIF`, `SVG`, `BMP`, `ICO`
 - 🗄 Support this compressed formats: `PDF`, `RAR`, `ZIP`, `7Z`, `TAR`, `CBR`, `CBZ`, `CB7`, `CBT`
+- 📁 Master folder support
 - 🇯🇵 Manga read mode
 - 🇰🇷 Webtoon read mode
 - 📖 Double page view

languages/en.json

@@ -130,6 +130,11 @@
 	},
 	"settings": {
 		"general": "General",
+		"masterFolders": {
+			"main": "Master folders",
+			"folder": "Folder",
+			"noFolders": "No folders"
+		},
 		"reading": {
 			"main": "Reading preferences",
 			"maxMargin": "Maximum horizontal and vertical margin",

scripts/dom.js

@@ -246,17 +246,6 @@ async function loadFilesIndexPage(file, animation, path, keepScroll, mainPath)
 		handlebarsContext.comics = pathFiles;
 
 		// Comic reading progress
-		let comic = false, _comics = storage.get('comics');
-
-		for(let i in _comics)
-		{
-			if(_comics[i].path == mainPath)
-			{
-				comic = _comics[i];
-				break;
-			}
-		}
-
 		let readingProgress = storage.get('readingProgress');
 
 		if(readingProgress[mainPath] && readingProgress[mainPath].lastReading > 0)
@@ -366,22 +355,56 @@ async function loadIndexPage(animation = true, path = false, content = false, ke
 			sortInvert = !sortInvert;
 		}
 
-		var comicsStorage = storage.get('comics');
-		var comics = [];
+		let comics = [];
+
+		// Get comics in master folders
+		let masterFolders = storage.get('masterFolders');
+		let pathInMasterFolder = {};
+
+		if(!isEmpty(masterFolders))
+		{
+			for(let key in masterFolders)
+			{
+				let file = fileManager.file(masterFolders[key]);
+				let files = await file.readDir();
+
+				for(let i = 0, len = files.length; i < len; i++)
+				{
+					let folder = files[i];
+
+					if((folder.folder || folder.compressed) && !pathInMasterFolder[folder.path])
+					{
+						comics.push({
+							name: folder.name,
+							path: folder.path,
+							added: Math.round(fs.statSync(folder.path).mtimeMs / 1000),
+							folder: true,
+							compressed: folder.compressed,
+							fromMasterFolder: true,
+						});
+
+						pathInMasterFolder[folder.path] = true;
+					}
+				}
+			}
+		}
+
+		// Get comics in library
+		let comicsStorage = storage.get('comics');
 
 		if(!isEmpty(comicsStorage))
 		{
 			for(let key in comicsStorage)
 			{
-				if(fs.existsSync(comicsStorage[key].path))
-				{
+				if(!pathInMasterFolder[comicsStorage[key].path] && fs.existsSync(comicsStorage[key].path))
 					comics.push(comicsStorage[key]);
-				}
-				else
-				{
-					//console.log(comicsStorage[key]);
-				}
 			}
+		}
+
+		if(comics.length > 0)
+		{
+			// Comic reading progress
+			let readingProgress = storage.get('readingProgress');
 
 			for(let key in comics)
 			{
@@ -391,6 +414,7 @@ async function loadIndexPage(animation = true, path = false, content = false, ke
 				comics[key].poster = images.poster;
 				comics[key].images = images.images;
 				comics[key].mainPath = config.showFullPathLibrary ? p.parse(comics[key].path).root : comics[key].path;
+				comics[key].readingProgress = readingProgress[comics[key].path] || {};
 			}
 
 			comics.sort(function (a, b) {

scripts/settings.js

@@ -3,6 +3,68 @@ function start()
 	events.events();
 
 	generateShortcutsTable();
+
+	updateMasterFolders();
+}
+
+function removeMasterFolder(key)
+{
+	let masterFolders = storage.get('masterFolders');
+
+	if(masterFolders[key])
+	{
+		masterFolders.splice(key, 1);
+		storage.set('masterFolders', masterFolders);
+
+		updateMasterFolders();
+	}
+}
+
+function addMasterFolder()
+{
+	let dialog = electronRemote.dialog;
+
+	dialog.showOpenDialog({properties: ['openDirectory'], filters: [{name: language.settings.masterFolders.folder}]}).then(async function (files) {
+
+		if(files.filePaths && files.filePaths[0])
+		{
+			let folder = files.filePaths[0];
+			let masterFolders = storage.get('masterFolders');
+
+			if(!inArray(folder, masterFolders))
+			{
+				masterFolders.push(folder);
+				storage.set('masterFolders', masterFolders);
+
+				updateMasterFolders();
+			}
+		}
+
+	});
+}
+
+function updateMasterFolders()
+{
+	let masterFolders = storage.get('masterFolders');
+	handlebarsContext.masterFolders = masterFolders;
+
+	let contentRight = template._contentRight();
+
+	let empty = contentRight.querySelector('.settings-master-folders-empty');
+	let list = contentRight.querySelector('.settings-master-folders-list');
+
+	if(masterFolders.length)
+	{
+		empty.style.display = 'none';
+		list.style.display = '';
+	}
+	else
+	{
+		empty.style.display = '';
+		list.style.display = 'none';
+	}
+
+	list.innerHTML = template.load('settings.content.right.master.folders.list.html');
 }
 
 function generateShortcutsTable(highlightItem = false)
@@ -220,4 +282,6 @@ module.exports = {
 	changeButton: changeButton,
 	removeButton: removeButton,
 	resoreShortcuts: resoreShortcuts,
+	removeMasterFolder: removeMasterFolder,
+	addMasterFolder: addMasterFolder,
 };

scripts/storage.js

@@ -1,4 +1,4 @@
-var changes = 48; // Update this if readingPagesConfig is updated
+var changes = 49; // Update this if readingPagesConfig is updated
 
 var readingPagesConfig = {
 	readingConfigName: '',
@@ -108,9 +108,9 @@ var storageDefault = {
 		path: 'Files path',
 		added: 0,
 		compressed: false,
-		bookmark: false,
+		bookmark: false,  // I think this is no longer used now, but I not sure
 		folder: true,
-		readingProgress: {
+		readingProgress: { // I think this is no longer used now, but I not sure
 			path: 'Path',
 			lastReading: 0,
 			progress: 0,
@@ -130,6 +130,9 @@ var storageDefault = {
 			progress: 0,
 		},
 	}],
+	masterFolders: [
+		'',
+	],
 	bookmarks: {
 		wildcard: [{
 			index: 0,

templates/index.content.right.list.html

@@ -8,7 +8,7 @@
 {{/if}}
 <div class="content-view-list">
 	{{#each comics}}
-	<div class="medium-list body-medium{{#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}}" oncontextmenu="dom.comicContextMenu('{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}', {{#if @root.comicsIndex}}true{{else}}false{{/if}}, {{#if folder}}true{{else}}false{{/if}}, fromGamepad)">
+	<div class="medium-list body-medium{{#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}}" oncontextmenu="dom.comicContextMenu('{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}', {{#if @root.comicsIndex}}{{#unless fromMasterFolder}}true{{else}}false{{/unless}}{{else}}false{{/if}}, {{#if folder}}true{{else}}false{{/if}}, fromGamepad)">
 		<div class="{{#if folder}}icon-24 material-icon{{else}}medium-list-image{{/if}} item-image"{{#unless folder}} style="background-image: url({{chain 'escapeBackSlash' 'escapeQuotesSimples' thumbnail}});"{{/unless}}>{{#if folder}}folder{{/if}}</div>
 		<div class="medium-list-text">{{name}}</div>
 	</div>

templates/index.content.right.module.html

@@ -8,7 +8,7 @@
 {{/if}}
 <div class="content-view-module">
 	{{#each comics}}
-	<div class="sha-{{sha}} 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}}" oncontextmenu="dom.comicContextMenu('{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}', {{#if @root.comicsIndex}}true{{else}}false{{/if}}, {{#if folder}}true{{else}}false{{/if}}, fromGamepad)">
+	<div class="sha-{{sha}} 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}}" oncontextmenu="dom.comicContextMenu('{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}', {{#if @root.comicsIndex}}{{#unless fromMasterFolder}}true{{else}}false{{/unless}}{{else}}false{{/if}}, {{#if folder}}true{{else}}false{{/if}}, fromGamepad)">
 		{{#if folder}}
 		<div class="v-folder item-image">
 			{{#if poster}}

templates/settings.content.right.html

@@ -16,6 +16,23 @@ <h1 class="display-medium">{{language.global.settings}}</h1>
 	<div class="tabs-content">
 		<div class="tabs-general active">
 
+			<h2 class="headline-small">{{language.settings.masterFolders.main}}</h2>
+
+			<div class="settings-master-folders">
+
+				<div class="menu-simple-text menu-grey settings-master-folders-empty"{{#if masterFolders}} style="display: none;"{{/if}}>
+					<span>{{language.settings.masterFolders.noFolders}}</span>
+				</div>
+
+				<div class="settings-master-folders-list"{{#unless masterFolders}} style="display: none;"{{/unless}}>
+				</div>
+
+				<div class="simple-button filled-tonal gamepad-item" onclick="settings.addMasterFolder();">
+					<div class="touch-effect"><i class="icon-24 material-icon">add</i>{{language.menu.file.addFolder}}</div>
+				</div>
+				<cb></cb>
+			</div>
+
 			<h2 class="headline-small">{{language.settings.reading.main}}</h2>
 
 			<div class="menu-simple-text gamepad-item">

templates/settings.content.right.master.folders.list.html

@@ -0,0 +1,3 @@
+{{#each masterFolders}}
+<div class="chip chip-icon-right label-large" onclick="electron.shell.openPath('{{@this}}');"><div></div>{{@this}}<i class="icon-18 material-icon right gamepad-item" onclick="event.stopPropagation(); settings.removeMasterFolder({{@key}});">close</i></div>
+{{/each}}

themes/material-design/actions.css

@@ -728,6 +728,11 @@
 	position: relative;
 }
 
+.menu-grey
+{
+		color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 50%);
+}
+
 .menu-simple-text .switch
 {
 	margin-top: 16px;
@@ -2303,4 +2308,83 @@ table tbody td.lh0
 {
 	transform: rotate(180deg);
 	color: var(--md-sys-color-primary);
+}
+
+/* Chip */
+
+.chip
+{
+	border-radius: 8px;
+	border: 1px solid var(--md-sys-color-outline);
+	padding: 5px 12px;
+	margin: 0px 8px 8px 0px;
+	background-color: var(--md-sys-color-surface-container-low);
+	color: var(--md-sys-color-on-surface);
+	display: inline-block;
+	transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	box-sizing: border-box;
+	overflow: hidden;
+	position: relative;
+	cursor: pointer;
+}
+
+.chip > div
+{
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: 4px 4px 0px 0px;
+	z-index: 1;
+	transition: 0.2s background-color;
+	background-color: transparent;
+}
+
+.chip > div:hover
+{
+	background-color: var(--md-sys-color-on-surface-variant-2);
+}
+
+.chip > div:active,
+.chip.gamepad-highlight > div
+{
+	background-color: var(--md-sys-color-on-surface-variant-4);
+}
+
+.chip.active
+{
+	background-color: var(--md-sys-color-primary);
+	color: var(--md-sys-color-on-primary);
+}
+
+.chip-icon-right
+{
+	padding-right: 0px;
+}
+
+.chip i
+{
+	margin: -2px 5px;
+}
+
+.chip i.right
+{
+	float: right;
+	cursor: pointer;
+	height: 24px;
+	width: 24px;
+	border-radius: 24px;
+	line-height: 24px;
+	text-align: center;
+	transition: 0.2s background-color;
+	position: relative;
+	z-index: 2;
+}
+
+.chip i.right:hover,
+.chip i.gamepad-highlight
+{
+	background-color: var(--md-sys-color-on-surface-variant-2);
 }

themes/material-design/settings.css

@@ -42,4 +42,26 @@
 {
 	float: right;
 	margin: 32px 24px 6px 0px;
+}
+
+.settings-master-folders
+{
+	padding: 0px 24px;
+}
+
+.settings-master-folders
+{
+
+}
+
+.settings-master-folders-empty
+{
+	padding: 0px;
+	margin-bottom: 10px;
+}
+
+.settings-master-folders-list
+{
+	margin: 19px 0px 13px;
+	display: flex;
 }

themes/material-design/theme.css

@@ -651,6 +651,12 @@ body .preload
 	display: block;
 }
 
+cb
+{
+	display: block;
+	clear: both;
+}
+
 .dragging, .dragging *
 {
 	cursor: grabbing !important;
@@ -1064,6 +1070,16 @@ body .preload
 	background-repeat: no-repeat;
 }
 
+.icon-18
+{
+	height: 18px;
+	width: 18px;
+	background-size: 18px;
+	background-repeat: no-repeat;
+	font-size: 18px;
+	line-height: 18px;
+}
+
 /* Lists */
 
 .simple-list