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

0.1.6

Browse Source
This commit is contained in:
User
2025-04-22 19:45:02 -04:00
parent b7f9b0aff7
commit fb23c3b001
8 changed files with 448 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@ import { Head, Link, router } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout.jsx';
import { ChevronFirst, ChevronLast, Rows3 } from 'lucide-react';
import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
import { useLongPress } from "use-long-press";
import { throttle } from 'lodash';
@@ -26,6 +27,22 @@ export default function Read({ auth, comic, chapter, chapters }) {
const [divDimensions, setDivDimensions] = useState([0, 0]);
const ref = useRef();
const useWindowSize = () => {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
const updateSize = () => {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
}
const windowSize = useWindowSize();
const getLocalStorageReadingMode = () => {
@@ -52,21 +69,6 @@ export default function Read({ auth, comic, chapter, chapters }) {
return false;
}
function useWindowSize() {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
}
const toggleReadingMode = (e) => {
if (e) {
window.localStorage.setItem('readingMode', 'utd');
@@ -114,6 +116,13 @@ export default function Read({ auth, comic, chapter, chapters }) {
//console.log(e.target.naturalHeight);
}
const longPress = useLongPress((e) => {
const percentage = e.pageX / windowSize[0];
if (percentage < 0.45 || percentage > 0.55) {
(percentage < 0.45) ^ isInvertClickingZone ? router.get(route('comics.read', [comic.comic.path_word, chapter.chapter.prev])) : router.get(route('comics.read', [comic.comic.path_word, chapter.chapter.next]));
}
});
const ImageForComic = (img) => {
const imgRef = useRef();
@@ -370,7 +379,7 @@ export default function Read({ auth, comic, chapter, chapters }) {
<Head>
<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 } scroll-region="true"
<div className="p-3 pt-1 pb-1 flex flex-wrap justify-center" id="mvp" ref={ ref } scroll-region="true" { ...longPress() }
style={{ overflowAnchor: "none", height: "calc(100dvh - 90px)", overflowY: "scroll" }}>
{ chapter.sorted.map((img, j) => <ImageForComic key={ j } innerKey={ j } { ...img } />) }
</div>