turkey/cv4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.1.3

Browse Source
This commit is contained in:
User
2025-01-18 19:05:23 -05:00
parent 3f282d6ecd
commit 14938f63df
23 changed files with 652 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
resources/js/Pages/Comic/Read.jsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { Head, Link, router } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout.jsx';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { ChevronFirst, ChevronLast, Rows3 } from 'lucide-react';
import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
@@ -19,6 +19,7 @@ export default function Read({ auth, comic, chapter, chapters }) {
const validReadingModes = ['rtl', 'utd'];
const [readingMode, setReadingMode] = useState('rtl'); // rtl, utd
const [isInvertClickingZone, setIsInvertClickingZone] = useState(false);
const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false); // TODO
const [currentImage, setCurrentImage] = useState(1);
@@ -35,9 +36,17 @@ export default function Read({ auth, comic, chapter, chapters }) {
return "rtl";
}
const getLocalStorageIsInvertClickingZone = () => {
if (window.localStorage.getItem('invertClickingZone') !== null && window.localStorage.getItem('invertClickingZone')) {
return window.localStorage.getItem('invertClickingZone') === 'true';
}
return false;
}
const getLocalStorageIsTwoPagePerScreen = () => {
if (window.localStorage.getItem('twoPagesPerScreen') !== null && validReadingModes.includes(window.localStorage.getItem('twoPagesPerScreen'))) {
return window.localStorage.getItem('twoPagesPerScreen');
if (window.localStorage.getItem('twoPagesPerScreen') !== null && window.localStorage.getItem('twoPagesPerScreen')) {
return window.localStorage.getItem('twoPagesPerScreen') === 'true';
}
return false;
@@ -68,6 +77,16 @@ export default function Read({ auth, comic, chapter, chapters }) {
}
}
const toggleInvertClickingZone = (e) => {
if (e) {
window.localStorage.setItem('invertClickingZone', true);
setIsInvertClickingZone(true);
} else {
window.localStorage.setItem('invertClickingZone', false);
setIsInvertClickingZone(false);
}
}
const toggleTwoPagesPerScreen = (e) => {
if (e) {
window.localStorage.setItem('twoPagesPerScreen', true);
@@ -114,24 +133,32 @@ export default function Read({ auth, comic, chapter, chapters }) {
const bounds = imgRef.current.getBoundingClientRect();
const percentage = (e.pageX - bounds.left) / imgRef.current.offsetWidth;
if (percentage < 0.45) {
const prevHandler = () => {
if (img.innerKey === 0 && chapter.chapter.prev) {
router.visit(route('comics.read', [comic.comic.path_word, chapter.chapter.prev]));
} else {
document.getElementById(`image-${img.innerKey - 1}`)?.scrollIntoView();
}
} else if (percentage > 0.55) {
}
const nextHandler = () => {
if (img.innerKey >= chapter.sorted.length - 1 && chapter.chapter.next) {
router.visit(route('comics.read', [comic.comic.path_word, chapter.chapter.next]));
} else {
document.getElementById(`image-${img.innerKey + 1}`)?.scrollIntoView();
}
}
// InvertClickingZone
if (percentage < 0.45 || percentage > 0.55) {
(percentage < 0.45) ^ isInvertClickingZone ? prevHandler() : nextHandler();
}
};
return (
<div className="basis-full">
<img alt={ comic.comic.name } className={` m-auto comic-img `} id={ `image-${ img.innerKey }` } ref={ imgRef }
<img alt={ comic.comic.name } className={` m-auto comic-img `} id={ `image-${ img.innerKey }` }
loading={ (img.innerKey < 5) ? "eager" : "lazy" } ref={ imgRef }
onClick={ handleImageClick } src={ `/image/${ btoa(img.url) }` } style={ imgStyles } />
</div>
);
@@ -166,7 +193,17 @@ export default function Read({ auth, comic, chapter, chapters }) {
<div className="space-y-4">
<div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<div className="space-y-0.5">
<label>Two images per screen</label>
<label>Flip clicking zone</label>
<p>Turn on for clicking image on right side to previous one</p>
</div>
<Switch defaultChecked={ (isInvertClickingZone) }
onCheckedChange={ (e) => toggleInvertClickingZone(!isInvertClickingZone) } />
</div>
</div>
<div className="space-y-4">
<div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<div className="space-y-0.5">
<label>Two images per screen TODO</label>
<p>Only applicable to RTL mode</p>
</div>
<Switch defaultChecked={ (isTwoPagesPerScreen) }
@@ -277,6 +314,7 @@ export default function Read({ auth, comic, chapter, chapters }) {
useEffect(() => {
setReadingMode(getLocalStorageReadingMode());
setIsInvertClickingZone(getLocalStorageIsInvertClickingZone());
setIsTwoPagePerScreen(getLocalStorageIsTwoPagePerScreen());
if (!ref.current) return;
@@ -333,7 +371,7 @@ export default function Read({ auth, comic, chapter, chapters }) {
<title>{ chapter.chapter.name.concat(" - ", comic.comic.name) }</title>
</Head>
<div className="p-3 pt-1 pb-1 flex flex-wrap justify-center" id="mvp" ref={ ref }
style={ { overflowAnchor: "none", height: "calc(100dvh - 90px)", overflowY: "scroll" } }>
style={{ overflowAnchor: "none", height: "calc(100dvh - 90px)", overflowY: "scroll" }}>
{ chapter.sorted.map((img, j) => <ImageForComic key={ j } innerKey={ j } { ...img } />) }
</div>
</AppLayout>