Skip to content

Commit

Permalink
big fixed and ability to pin side list
Browse files Browse the repository at this point in the history
  • Loading branch information
@mienaiyami
mienaiyami committed Feb 4, 2022
1 parent fc5828c commit dfe1b93
Show file tree
Hide file tree
Showing 7 changed files with 238 additions and 37 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.2.0",
"version": "2.2.1",
"description": "App to read manga on desktop",
"main": "./.webpack/main/index.js",
"author": {
Expand Down
113 changes: 89 additions & 24 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Main from "./Components/Main";
import TopBar from "./Components/TopBar";
import useTheme from "./hooks/useTheme";
import checkforupdate from "./checkforupdate";
import { settingValidatorData } from "./MainImports";
const userDataURL = window.electron.app.getPath("userData");
const settingsPath = window.path.join(userDataURL, "settings.json");
const themesPath = window.path.join(userDataURL, "themes.json");
Expand All @@ -13,8 +14,8 @@ const historyPath = window.path.join(userDataURL, "history.json");
const historyDataInit: ListItem[] = [];
const themesMain: { name: string; main: string }[] = [];

const makeSettingsJson = () => {
const settingsData: appsettings = {
const makeSettingsJson = (locations?: string[]) => {
const settingsDataNew: appsettings = {
theme: "theme2",
bookmarksPath,
historyPath,
Expand All @@ -27,9 +28,18 @@ const makeSettingsJson = () => {
readerTypeSelected: 0,
pagesPerRowSelected: 0,
gapBetweenRows: true,
sideListWidth: 450,
},
};
window.fs.writeFileSync(settingsPath, JSON.stringify(settingsData));
if (locations) {
const settingsDataSaved: appsettings = JSON.parse(window.fs.readFileSync(settingsPath, "utf-8"));
locations.forEach((e) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
settingsDataSaved[e] = settingsDataNew[e];
});
window.fs.writeFileSync(settingsPath, JSON.stringify(settingsDataSaved));
} else window.fs.writeFileSync(settingsPath, JSON.stringify(settingsDataNew));
};

if (!window.fs.existsSync(settingsPath)) {
Expand All @@ -43,29 +53,84 @@ try {
console.error(err);
makeSettingsJson();
}
function isSettingsValid(): boolean {
//! this function have a lot of @ts-ignore
function isSettingsValid(): { isValid: boolean; location: string[] } {
const settings: appsettings = JSON.parse(window.fs.readFileSync(settingsPath, "utf-8"));
return (
typeof settings.theme === "string" &&
typeof settings.bookmarksPath === "string" &&
typeof settings.historyPath === "string" &&
typeof settings.baseDir === "string" &&
typeof settings.historyLimit === "number" &&
settings.locationListSortType === ("normal" || "inverse") &&
typeof settings.readerSettings === "object" &&
typeof settings.readerSettings.readerWidth === "number" &&
typeof settings.readerSettings.variableImageSize === "boolean" &&
typeof settings.readerSettings.gapBetweenRows === "boolean" &&
(settings.readerSettings.readerTypeSelected === 0 || settings.readerSettings.readerTypeSelected === 1) &&
(settings.readerSettings.pagesPerRowSelected === 0 ||
settings.readerSettings.pagesPerRowSelected === 1 ||
settings.readerSettings.pagesPerRowSelected === 2)
);
const output: { isValid: boolean; location: string[] } = {
isValid: true,
location: [],
};
for (const key in settingValidatorData) {
if (!Object.prototype.hasOwnProperty.call(settings, key)) {
output.isValid = false;
output.location.push(key);
continue;
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (typeof settingValidatorData[key] === "string" && typeof settings[key] !== settingValidatorData[key]) {
output.isValid = false;
output.location.push(key);
continue;
}

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (settingValidatorData[key] instanceof Array) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (!settingValidatorData[key].includes(settings[key])) {
output.isValid = false;
output.location.push(key);
}
continue;
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (settingValidatorData[key] instanceof Object) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
for (const key2 in settingValidatorData[key]) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (!Object.prototype.hasOwnProperty.call(settings[key], key2)) {
output.isValid = false;
output.location.push(key);
continue;
}
if (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
typeof settingValidatorData[key][key2] === "string" &&
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
typeof settings[key][key2] !== settingValidatorData[key][key2]
) {
output.isValid = false;
output.location.push(key);
continue;
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (settingValidatorData[key][key2] instanceof Array) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (!settingValidatorData[key][key2].includes(settings[key][key2])) {
output.isValid = false;
output.location.push(key);
}
continue;
}
}
}
}
return output;
}
if (!isSettingsValid()) {
window.dialog.customError({ message: `Settings in ${settingsPath} are not invalid. Re-writing settings.` });
console.warn(`Settings in ${settingsPath} are not invalid. Re-writing settings.`);
makeSettingsJson();
if (!isSettingsValid().isValid) {
window.dialog.customError({ message: `Some Settings in ${settingsPath} invalid. Re-writing some settings.` });
console.warn(`Some Settings in ${settingsPath} invalid. Re-writing some settings.`);
console.log(isSettingsValid());
makeSettingsJson(isSettingsValid().location);
}
const settings: appsettings = JSON.parse(window.fs.readFileSync(settingsPath, "utf-8"));

Expand Down
28 changes: 26 additions & 2 deletions src/Components/Reader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ReaderSettings from "./ReaderSettings";
const Reader = () => {
const {
appSettings,
setAppSettings,
isReaderOpen,
setReaderOpen,
pageNumberInputRef,
Expand Down Expand Up @@ -35,6 +36,8 @@ const Reader = () => {
const [imageRowCount, setImageRowCount] = useState(0);
const [imagesLength, setImagesLength] = useState(0);
const [imagesLoaded, setImagesLoaded] = useState(0);
const [isSideListPinned, setSideListPinned] = useState(false);
const [sideListWidth, setSideListWidth] = useState(appSettings.readerSettings.sideListWidth || 450);
const [isBookmarked, setBookmarked] = useState(false);
const [scrollPosPercent, setScrollPosPercent] = useState(0);
const readerSettingExtender = useRef<HTMLButtonElement>(null);
Expand Down Expand Up @@ -149,6 +152,8 @@ const Reader = () => {
});
}, []);
const makeScrollPos = () => {
if (isSideListPinned && imgContRef.current)
return setScrollPosPercent(imgContRef.current.scrollTop / imgContRef.current.scrollHeight);
if (readerRef.current) setScrollPosPercent(readerRef.current.scrollTop / readerRef.current.scrollHeight);
};
const changePageNumber = () => {
Expand Down Expand Up @@ -349,21 +354,36 @@ const Reader = () => {
}, [imagesLoaded]);
useLayoutEffect(() => {
readerRef.current?.scrollTo(0, scrollPosPercent * readerRef.current.scrollHeight);
}, [appSettings.readerSettings.readerWidth]);
imgContRef.current?.scrollTo(0, scrollPosPercent * imgContRef.current.scrollHeight);
}, [appSettings.readerSettings.readerWidth, isSideListPinned]);
useEffect(() => {
if (linkInReader && linkInReader !== "") {
if (mangaInReader && mangaInReader.link === linkInReader) return;
checkForImgsAndLoad(linkInReader);
}
}, [linkInReader]);
useLayoutEffect(() => {
if (isSideListPinned) {
readerRef.current?.scrollTo(0, scrollPosPercent * readerRef.current.scrollHeight);
}
setAppSettings((init) => {
init.readerSettings.sideListWidth = sideListWidth;
return { ...init };
});
}, [sideListWidth]);
useLayoutEffect(() => {
changePageNumber();
}, [currentImageRow]);
return (
<div
ref={readerRef}
id="reader"
style={{ display: isReaderOpen ? "block" : "none" }}
className={isSideListPinned ? "sideListPinned" : ""}
style={{
gridTemplateColumns: sideListWidth + "px auto",
display: isReaderOpen ? (isSideListPinned ? "grid" : "block") : "none",
"--mangaListWidth": sideListWidth + "px",
}}
onScroll={() => {
changePageNumber();
}}
Expand All @@ -382,6 +402,10 @@ const Reader = () => {
addToBookmarkRef={addToBookmarkRef}
isBookmarked={isBookmarked}
setBookmarked={setBookmarked}
isSideListPinned={isSideListPinned}
setSideListPinned={setSideListPinned}
setSideListWidth={setSideListWidth}
makeScrollPos={makeScrollPos}
/>
<div className="hiddenPageMover" style={{ display: "none" }}>
<button ref={openPrevPageRef} onClick={openPrevPage}>
Expand Down
1 change: 1 addition & 0 deletions src/Components/ReaderSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ const ReaderSettings = ({
max={100}
onKeyDown={(e) => e.stopPropagation()}
onChange={(e) => {
makeScrollPos();
setAppSettings((init) => {
let value = e.target.valueAsNumber;
if (!value) value = 0;
Expand Down
74 changes: 68 additions & 6 deletions src/Components/ReaderSideList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
} from "@fortawesome/free-solid-svg-icons";
import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useContext, useEffect, useRef, useState } from "react";
import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
import { AppContext } from "../App";
import { MainContext } from "./Main";
import ReaderSideListItem from "./ReaderSideListItem";
Expand All @@ -19,12 +19,20 @@ const ReaderSideList = ({
addToBookmarkRef,
isBookmarked,
setBookmarked,
isSideListPinned,
setSideListPinned,
setSideListWidth,
makeScrollPos,
}: {
openNextChapterRef: React.RefObject<HTMLButtonElement>;
openPrevChapterRef: React.RefObject<HTMLButtonElement>;
addToBookmarkRef: React.RefObject<HTMLButtonElement>;
isBookmarked: boolean;
setBookmarked: React.Dispatch<React.SetStateAction<boolean>>;
isSideListPinned: boolean;
setSideListPinned: React.Dispatch<React.SetStateAction<boolean>>;
setSideListWidth: React.Dispatch<React.SetStateAction<number>>;
makeScrollPos: () => void;
}) => {
const {
mangaInReader,
Expand All @@ -45,6 +53,8 @@ const ReaderSideList = ({
const [preventListClose, setpreventListClose] = useState(false);
const prevMangaRef = useRef<string>("");
const [historySimple, sethistorySimple] = useState(history.map((e) => e.link));
const [draggingResizer, setDraggingResizer] = useState(false);

//TODO: useless rn
const currentLinkInListRef = useRef<HTMLAnchorElement>(null);
useEffect(() => {
Expand All @@ -54,7 +64,11 @@ const ReaderSideList = ({
useEffect(() => {
sethistorySimple(history.map((e) => e.link));
}, [history]);

useLayoutEffect(() => {
if (isSideListPinned) {
setListOpen(true);
}
}, [isSideListPinned]);
const changePrevNext = () => {
if (mangaInReader) {
const listDataName = chapterData.map((e) => e.name);
Expand Down Expand Up @@ -145,6 +159,35 @@ const ReaderSideList = ({
}
});
};
const handleResizerDrag = (e: MouseEvent) => {
if (draggingResizer) {
if (isSideListPinned) {
makeScrollPos();
}
const width =
e.clientX > (window.innerWidth * 90) / 100
? (window.innerWidth * 90) / 100
: e.clientX < 192
? 192
: e.clientX;
setSideListWidth(width);
}
};
const handleResizerMouseUp = () => {
setDraggingResizer(false);
};
useLayoutEffect(() => {
document.body.style.cursor = "auto";
if (draggingResizer) {
document.body.style.cursor = "ew-resize";
}
window.addEventListener("mousemove", handleResizerDrag);
window.addEventListener("mouseup", handleResizerMouseUp);
return () => {
window.removeEventListener("mousemove", handleResizerDrag);
window.addEventListener("mouseup", handleResizerMouseUp);
};
}, [draggingResizer]);
return (
<div
className={`currentMangaList listCont ${isListOpen ? "open" : ""}`}
Expand All @@ -153,9 +196,15 @@ const ReaderSideList = ({
if (!isListOpen) setListOpen(true);
}}
onMouseLeave={(e) => {
if (preventListClose && !isContextMenuOpen && !e.currentTarget.contains(document.activeElement))
setListOpen(false);
setpreventListClose(false);
if (!isSideListPinned) {
if (
preventListClose &&
!isContextMenuOpen &&
!e.currentTarget.contains(document.activeElement)
)
setListOpen(false);
setpreventListClose(false);
}
}}
onMouseDown={(e) => {
if (e.target instanceof Node && e.currentTarget.contains(e.target)) setpreventListClose(true);
Expand All @@ -170,9 +219,22 @@ const ReaderSideList = ({
}}
tabIndex={-1}
>
<div className="indicator">
<div
className="indicator"
onClick={() => {
makeScrollPos();
setSideListPinned((init) => !init);
}}
>
<FontAwesomeIcon icon={faChevronRight} />
</div>
<div
className="reSizer"
onMouseDown={() => {
setDraggingResizer(true);
}}
onMouseUp={handleResizerMouseUp}
></div>
<div className="tools">
<div className="row1">
<input
Expand Down
Loading

0 comments on commit dfe1b93

Please sign in to comment.