0.1.1
This commit is contained in:
User
@@ -1,7 +1,7 @@
|
||||
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, Settings } from 'lucide-react';
|
||||
import { ChevronFirst, ChevronLast, Rows3 } from 'lucide-react';
|
||||
import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
|
||||
|
||||
import { throttle } from 'lodash';
|
||||
@@ -14,22 +14,18 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { TooltipContent } from '@/components/ui/tooltip';
|
||||
|
||||
export default function Read({ auth, comic, chapter }) {
|
||||
export default function Read({ auth, comic, chapter, chapters }) {
|
||||
|
||||
const validReadingModes = ['rtl', 'utd'];
|
||||
|
||||
const [readingMode, setReadingMode] = useState('rtl'); // rtl, utd
|
||||
const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false); // TODO
|
||||
|
||||
const [currentImage, setCurrentImage] = useState(1);
|
||||
|
||||
const [isJumpToPageOpen, setIsJumpToPageOpen] = useState(false);
|
||||
|
||||
const windowSize = useWindowSize();
|
||||
const ref = useRef();
|
||||
|
||||
const [divDimensions, setDivDimensions] = useState([0, 0]);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const ref = useRef();
|
||||
const windowSize = useWindowSize();
|
||||
|
||||
const getLocalStorageReadingMode = () => {
|
||||
if (window.localStorage.getItem('readingMode') !== null && validReadingModes.includes(window.localStorage.getItem('readingMode'))) {
|
||||
@@ -39,6 +35,14 @@ export default function Read({ auth, comic, chapter }) {
|
||||
return "rtl";
|
||||
}
|
||||
|
||||
const getLocalStorageIsTwoPagePerScreen = () => {
|
||||
if (window.localStorage.getItem('twoPagesPerScreen') !== null && validReadingModes.includes(window.localStorage.getItem('twoPagesPerScreen'))) {
|
||||
return window.localStorage.getItem('twoPagesPerScreen');
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function useWindowSize() {
|
||||
const [size, setSize] = useState([0, 0]);
|
||||
useLayoutEffect(() => {
|
||||
@@ -64,10 +68,26 @@ export default function Read({ auth, comic, chapter }) {
|
||||
}
|
||||
}
|
||||
|
||||
const selectOnChangeHandler = (e) => {
|
||||
const toggleTwoPagesPerScreen = (e) => {
|
||||
if (e) {
|
||||
window.localStorage.setItem('twoPagesPerScreen', true);
|
||||
setIsTwoPagePerScreen(true);
|
||||
} else {
|
||||
window.localStorage.setItem('twoPagesPerScreen', false);
|
||||
setIsTwoPagePerScreen(false);
|
||||
}
|
||||
}
|
||||
|
||||
const imageSelectOnChangeHandler = (e) => {
|
||||
document.getElementById(`image-${e - 1}`)?.scrollIntoView();
|
||||
setCurrentImage(e);
|
||||
setIsJumpToPageOpen(false);
|
||||
}
|
||||
|
||||
const chapterSelectOnChangeHandler = (e) => {
|
||||
router.visit(route('comics.read', {
|
||||
pathword: comic.comic.path_word,
|
||||
uuid: e
|
||||
}));
|
||||
}
|
||||
|
||||
const setViewPort = (e) => {
|
||||
@@ -109,36 +129,22 @@ export default function Read({ auth, comic, chapter }) {
|
||||
}
|
||||
};
|
||||
|
||||
return (<div className="basis-full">
|
||||
<img
|
||||
id={ `image-${ img.innerKey }` }
|
||||
ref={ imgRef }
|
||||
style={ imgStyles }
|
||||
className={` m-auto comic-img `}
|
||||
src={ `/image/${ btoa(img.url) }` }
|
||||
onClick={ handleImageClick }
|
||||
alt={ comic.comic.name }
|
||||
/>
|
||||
</div>);
|
||||
return (
|
||||
<div className="basis-full">
|
||||
<img alt={ comic.comic.name } className={` m-auto comic-img `} id={ `image-${ img.innerKey }` } ref={ imgRef }
|
||||
onClick={ handleImageClick } src={ `/image/${ btoa(img.url) }` } style={ imgStyles } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Toolbar = () => {
|
||||
return (
|
||||
<>
|
||||
<Dialog>
|
||||
<DialogTrigger>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Button variant="link" size="icon">
|
||||
<Settings />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Options</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost">
|
||||
{ currentImage } / { chapter.sorted.length }
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-[600px]">
|
||||
<DialogHeader>
|
||||
@@ -157,6 +163,54 @@ export default function Read({ auth, comic, chapter }) {
|
||||
onCheckedChange={ (e) => toggleReadingMode(e) } />
|
||||
</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</label>
|
||||
<p>Only applicable to RTL mode</p>
|
||||
</div>
|
||||
<Switch defaultChecked={ (isTwoPagesPerScreen) }
|
||||
onCheckedChange={ (e) => toggleTwoPagesPerScreen(e) } />
|
||||
</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>Jump to Chapter</label>
|
||||
</div>
|
||||
<Select onValueChange={ (e) => chapterSelectOnChangeHandler(e) } defaultValue={ chapter.chapter.uuid }>
|
||||
<SelectTrigger className="w-[50%]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="popper" sideOffset={ -100 }>
|
||||
{ chapters.map(c => (
|
||||
<SelectItem key={ c.chapter_uuid } value={ c.chapter_uuid }>
|
||||
{ c.name }
|
||||
</SelectItem>
|
||||
) ) }
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</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>Jump to Page</label>
|
||||
</div>
|
||||
<Select onValueChange={ (e) => imageSelectOnChangeHandler(e) } defaultValue={ currentImage }>
|
||||
<SelectTrigger className="w-[50%]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="popper" sideOffset={ -100 }>
|
||||
{ chapter.sorted.map((img, i) => (
|
||||
<SelectItem key={ i + 1 } value={ i + 1 }>
|
||||
{ i + 1 } / { chapter.sorted.length }
|
||||
</SelectItem>
|
||||
) ) }
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<PrimaryButton>Done</PrimaryButton>
|
||||
@@ -165,67 +219,10 @@ export default function Read({ auth, comic, chapter }) {
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={ isJumpToPageOpen }>
|
||||
<DialogTrigger>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Button variant="ghost" onClick={ () => setIsJumpToPageOpen(!isJumpToPageOpen) }>
|
||||
{ currentImage } / { chapter.sorted.length }
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Jump To</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Jump to</DialogTitle>
|
||||
<DialogDescription>
|
||||
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<Select defaultOpen onValueChange={ (e) => selectOnChangeHandler(e) } defaultValue={ currentImage}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{ chapter.sorted.map((img, i) => (
|
||||
<SelectItem key={ i + 1 } value={ i + 1 }>{ i + 1 } / { chapter.sorted.length }</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<PrimaryButton onClick={ () => setIsJumpToPageOpen(false) }>Done</PrimaryButton>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Button variant="link" size="icon" asChild>
|
||||
<Link href={ route('comics.chapters', [comic.comic.path_word]) }>
|
||||
<Rows3 />
|
||||
</Link>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>TOC</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
{ chapter.chapter.prev && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="link" size="icon" asChild>
|
||||
<Link href={ route('comics.read', [comic.comic.path_word, chapter.chapter.prev]) }>
|
||||
<ChevronFirst />
|
||||
@@ -239,10 +236,25 @@ export default function Read({ auth, comic, chapter }) {
|
||||
</TooltipProvider>
|
||||
) }
|
||||
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="link" size="icon" asChild>
|
||||
<Link href={ route('comics.chapters', [comic.comic.path_word]) }>
|
||||
<Rows3 />
|
||||
</Link>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>TOC</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
{ chapter.chapter.next && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="link" size="icon" asChild>
|
||||
<Link href={ route('comics.read', [comic.comic.path_word, chapter.chapter.next]) }>
|
||||
<ChevronLast />
|
||||
@@ -265,6 +277,7 @@ export default function Read({ auth, comic, chapter }) {
|
||||
|
||||
useEffect(() => {
|
||||
setReadingMode(getLocalStorageReadingMode());
|
||||
setIsTwoPagePerScreen(getLocalStorageIsTwoPagePerScreen());
|
||||
|
||||
if (!ref.current) return;
|
||||
|
||||
@@ -280,7 +293,7 @@ export default function Read({ auth, comic, chapter }) {
|
||||
const imageBottom = imageTop + image.offsetHeight;
|
||||
|
||||
// Check if the image is in the visible area
|
||||
if (containerScrollTop + 80 >= imageTop && containerScrollTop < imageBottom) {
|
||||
if (containerScrollTop + 76 >= imageTop && containerScrollTop < imageBottom) { // Magic number 76
|
||||
visibleImageIndex = i;
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user