Skip to content

Commit

Permalink
addittional options and fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mienaiyami
mienaiyami committed Feb 2, 2022
1 parent 5c3c794 commit 92a724a
Show file tree
Hide file tree
Showing 10 changed files with 205 additions and 85 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "mangareader",
"productName": "Manga Reader",
"version": "2.3.0beta",
"version": "2.3.0",
"description": "App to read manga on desktop",
"main": "./.webpack/main/index.js",
"author": {
Expand Down
3 changes: 1 addition & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,14 +241,13 @@ const App = (): ReactElement => {
setLoadingManga(true);
setLoadingMangaPercent(0);
}
const supportedFormat = [".jpg", ".jpeg", ".png", ".webp", ".svg", ".apng", ".gif", "avif"];
const binFiles: string[] = [];
const imgs = files.filter((e) => {
if (window.path.extname(e) === ".bin") {
binFiles.push(e);
return true;
}
return supportedFormat.includes(window.path.extname(e));
return window.supportedFormats.includes(window.path.extname(e));
});
if (imgs.length <= 0) {
window.dialog.customError({
Expand Down
9 changes: 6 additions & 3 deletions src/Components/LocationListItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ReactElement, useContext, useState } from "react";
import { ReactElement, useContext } from "react";
import { AppContext } from "../App";
import { MainContext } from "./Main";

Expand All @@ -23,8 +23,11 @@ const LocationListItem = ({
className="a-context"
title={name}
onClick={() => {
if (window.fs.existsSync(link) && window.fs.lstatSync(link).isDirectory())
setCurrentLink(link);
if (!window.fs.existsSync(link)) {
window.dialog.customError({ message: "Directory/File doesn't exist." });
return;
}
setCurrentLink(link);
}}
onContextMenu={(e) => {
showContextMenu({
Expand Down
93 changes: 70 additions & 23 deletions src/Components/LocationsTab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { faAngleUp, faSort } from "@fortawesome/free-solid-svg-icons";
import { faAngleUp, faSort, faSyncAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { forwardRef, ReactElement, useContext, useEffect, useRef, useState } from "react";
import { AppContext } from "../App";
Expand All @@ -15,21 +15,42 @@ const LocationsTab = forwardRef(
},
ref: React.ForwardedRef<HTMLDivElement>
): ReactElement => {
const { openInReader } = useContext(AppContext);
const [locations, setLocations] = useState<string[]>([]);
const [isLoadingFile, setIsLoadingFile] = useState(true);
const [filter, setfilter] = useState<string>("");
const [filter, setFilter] = useState<string>("");
const [imageCount, setImageCount] = useState(0);
const { appSettings, setAppSettings } = useContext(AppContext);
const inputRef = useRef<HTMLInputElement>(null);
const displayList = (link: string): void => {
if (window.fs.existsSync(link) && window.fs.lstatSync(link).isDirectory()) {
const displayList = (): void => {
setFilter("");
if (!window.fs.existsSync(currentLink)) {
window.dialog.customError({ message: "Directory/File doesn't exist." });
return;
}

if (window.fs.existsSync(currentLink) && window.fs.lstatSync(currentLink).isDirectory()) {
setIsLoadingFile(true);
window.fs.readdir(link, (err, files) => {
window.fs.readdir(currentLink, (err, files) => {
if (err) {
console.error(err);
window.dialog.nodeError(err);
return;
}
const dirNames: string[] = files.sort(window.app.betterSortOrder);
setImageCount(
files.filter((e) => window.supportedFormats.includes(window.path.extname(e))).length
);
const dirNames: string[] = files
.filter((e) => {
try {
if (window.fs.lstatSync(window.path.join(currentLink, e)).isDirectory())
return true;
} catch {
return false;
}
// return (window.fs.lstatSync(window.path.join(currentLink, e)) || false).isDirectory()
})
.sort(window.app.betterSortOrder);
if (inputRef.current) {
inputRef.current.value = "";
}
Expand All @@ -39,12 +60,11 @@ const LocationsTab = forwardRef(
}
};
useEffect(() => {
displayList(currentLink);
setfilter("");
displayList();
}, [currentLink]);
const List = (locations: string[], filter: string) => {
return locations.map((e) => {
if (new RegExp(filter, "ig").test(e))
if (new RegExp(filter, "ig") && new RegExp(filter, "ig").test(e))
return (
<LocationListItem
name={e}
Expand All @@ -62,8 +82,7 @@ const LocationsTab = forwardRef(
Location
<button
data-tooltip="Sort"
tabIndex={-1}
// onFocus={(e) => e.currentTarget.blur()}
// tabIndex={-1}
onClick={() =>
setAppSettings((init) => {
switch (init.locationListSortType) {
Expand All @@ -84,12 +103,19 @@ const LocationsTab = forwardRef(
</button>
</h2>
<div className="tools">
<span className="currentPath">Current: {currentLink}</span>
<div className="row1">
<button
tabIndex={-1}
// tabIndex={-1}
data-tooltip="Refresh"
onClick={() => {
displayList();
}}
>
<FontAwesomeIcon icon={faSyncAlt} />
</button>
<button
// tabIndex={-1}
data-tooltip="Directory Up"
// onFocus={(e) => e.currentTarget.blur()}
onClick={() => {
setCurrentLink((link) => window.path.dirname(link));
}}
Expand All @@ -104,30 +130,51 @@ const LocationsTab = forwardRef(
spellCheck="false"
title="Type to Search"
data-tooltip="Type to Search"
tabIndex={-1}
onKeyDown={(e) => e.stopPropagation()}
// tabIndex={-1}
onKeyDown={(e) => {
e.stopPropagation();
if (/\[|\]|\(|\)|\*|\+|\?/gi.test(e.key)) {
e.preventDefault();
}
}}
onChange={(e) => {
const val = e.target.value;
// val = val.replace("[", "\\[");
// val = val.replace("]", "\\]");
// val = val.replace("(", "\\(");
// val = val.replace(")", "\\)");
// val = val.replace("*", "\\*");
// val = val.replace("+", "\\+");
let filter = "";
for (let i = 0; i < val.length; i++) {
filter += val[i] + ".*";
}
setfilter(filter);
setFilter(filter);
}}
/>
</div>
<span className="currentPath">
<button onClick={() => openInReader(currentLink)}>Open</button>
{currentLink}
</span>
</div>
<div className="location-cont">
{isLoadingFile ? (
<p>Loading...</p>
) : locations.length === 0 ? (
<p>No Items</p>
<>
<p>This folder contain {imageCount} images</p>
<p>No Directory</p>
</>
) : (
<ol>
{appSettings.locationListSortType === "inverse"
? List([...locations].reverse(), filter)
: List(locations, filter)}
</ol>
<>
<p>This folder contain {imageCount} images</p>
<ol>
{appSettings.locationListSortType === "inverse"
? List([...locations].reverse(), filter)
: List(locations, filter)}
</ol>
</>
)}
</div>
</div>
Expand Down
72 changes: 47 additions & 25 deletions src/Components/Reader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,21 @@ const Reader = () => {
useLayoutEffect(() => {
window.app.clickDelay = 100;
window.app.lastClick = 0;
window.addEventListener("keydown", (e) => {
if (window.app.isReaderOpen && document.activeElement!.tagName === "BODY") {
if (e.shiftKey && e.key === " ") {
e.preventDefault();
scrollReader(-4);
window.addEventListener("wheel", (e) => {
if (e.ctrlKey) {
if (e.deltaY < 0) {
sizePlusRef.current?.click();
return;
}
if (e.deltaY > 0) {
sizeMinusRef.current?.click();
return;
}
}
});
window.addEventListener("keydown", (e) => {
// /&& document.activeElement!.tagName === "BODY"
if (window.app.isReaderOpen) {
switch (e.key) {
case "f":
navToPageButtonRef.current?.click();
Expand All @@ -101,29 +109,42 @@ const Reader = () => {
case "-":
sizeMinusRef.current?.click();
break;
case " ":
e.preventDefault();
scrollReader(4);
break;
case "d":
case "ArrowRight":
if (appSettings.readerSettings.readerTypeSelected === 1) openNextPageRef.current?.click();
break;
case "s":
case "ArrowDown":
scrollReader(1);
break;
case "a":
case "ArrowLeft":
if (appSettings.readerSettings.readerTypeSelected === 1) openPrevPageRef.current?.click();
break;
case "w":
case "ArrowUp":
scrollReader(-1);
break;
default:
break;
}
if (document.activeElement!.tagName === "BODY" || document.activeElement === readerRef.current) {
if (e.shiftKey && e.key === " ") {
e.preventDefault();
scrollReader(-4);
return;
}
switch (e.key) {
case " ":
e.preventDefault();
scrollReader(4);
break;
case "d":
case "ArrowRight":
if (appSettings.readerSettings.readerTypeSelected === 1)
openNextPageRef.current?.click();
break;
case "s":
case "ArrowDown":
scrollReader(1);
break;
case "a":
case "ArrowLeft":
if (appSettings.readerSettings.readerTypeSelected === 1)
openPrevPageRef.current?.click();
break;
case "w":
case "ArrowUp":
scrollReader(-1);
break;
default:
break;
}
}
}
});
}, []);
Expand Down Expand Up @@ -346,6 +367,7 @@ const Reader = () => {
onScroll={() => {
changePageNumber();
}}
tabIndex={-1}
>
<ReaderSettings
readerRef={readerRef}
Expand Down
39 changes: 25 additions & 14 deletions src/Components/ReaderSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,19 +63,32 @@ const ReaderSettings = ({
</button>
<div className="main">
<div className="settingItem">
<div className="name">
Size {Math.round(appSettings.readerSettings.readerWidth * 100) / 100}%
</div>
<div className="name">Size</div>
<div className="options">
<label>
<input
type="number"
value={appSettings.readerSettings.readerWidth}
min={1}
max={100}
onKeyDown={(e) => e.stopPropagation()}
onChange={(e) => {
setAppSettings((init) => {
let value = e.target.valueAsNumber;
if (!value) value = 0;
init.readerSettings.readerWidth = value >= 100 ? 100 : value;
return { ...init };
});
}}
/>
%
</label>
<button
ref={sizeMinusRef}
onClick={() => {
onClick={(e) => {
makeScrollPos();
setAppSettings((init) => {
const steps = Math.max(
1,
Math.min(5, 1 + Math.log10(init.readerSettings.readerWidth))
);
const steps = appSettings.readerSettings.readerWidth <= 20 ? 5 : 10;
init.readerSettings.readerWidth =
init.readerSettings.readerWidth - steps > 100
? 100
Expand All @@ -84,6 +97,7 @@ const ReaderSettings = ({
: init.readerSettings.readerWidth - steps;
return { ...init };
});
// e.currentTarget.dispatchEvent(new MouseEvent(type:"")))
}}
>
<FontAwesomeIcon icon={faMinus} />
Expand All @@ -93,10 +107,7 @@ const ReaderSettings = ({
onClick={() => {
makeScrollPos();
setAppSettings((init) => {
const steps = Math.max(
1,
Math.min(5, 1 + Math.log10(init.readerSettings.readerWidth))
);
const steps = appSettings.readerSettings.readerWidth <= 20 ? 5 : 10;
init.readerSettings.readerWidth =
init.readerSettings.readerWidth + steps > 100
? 100
Expand Down Expand Up @@ -233,7 +244,7 @@ const ReaderSettings = ({
clickAction={() => {
makeScrollPos();
setAppSettings((init) => {
const steps = Math.max(1, Math.min(5, 1 + Math.log10(init.readerSettings.readerWidth)));
const steps Math.floor(= Math.min(10,appSettings.readerSettings.readerWidth/2));
init.readerSettings.readerWidth =
init.readerSettings.readerWidth + steps > 100
? 100
Expand All @@ -253,7 +264,7 @@ const ReaderSettings = ({
clickAction={() => {
makeScrollPos();
setAppSettings((init) => {
const steps = Math.max(1, Math.min(5, 1 + Math.log10(init.readerSettings.readerWidth)));
const steps Math.floor(= Math.min(10,appSettings.readerSettings.readerWidth/2));
init.readerSettings.readerWidth =
init.readerSettings.readerWidth - steps > 100
? 100
Expand Down
Loading

0 comments on commit 92a724a

Please sign in to comment.