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

0.1.1

Browse Source
This commit is contained in:
User
2025-01-06 12:58:10 -05:00
parent 489e054614
commit 721192fce7
23 changed files with 227 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/js/Pages/Comic/Chapters.jsx
View File

@@ -50,10 +50,12 @@ export default function Chapters({ auth, comic, chapters, histories, offset }) {
const groupOnClickHandler = (pathword) => {
router.get(`/comic/${ comic.comic.path_word }?group=${ pathword }`, {}, {
only: ['chapters'],
preserveState: true
preserveState: true,
onSuccess: () => {
setGroup(pathword);
setAscending(true);
}
});
setGroup(pathword);
setAscending(true);
}
const ComicChapterLink = (props) => {
@@ -160,16 +162,17 @@ export default function Chapters({ auth, comic, chapters, histories, offset }) {
</div>
</CardContent>
<CardContent>
<Tabs defaultValue={ group } className="w-full">
<Tabs defaultValue={ group } className="w-full" onValueChange={ (e) => groupOnClickHandler(e)} >
<div className="flex">
<TabsList className={ `grid w-full grid-cols-${ Object.entries(comic.groups).length } ` }>
{ Object.entries(comic.groups).map((g, i) => (
<TabsTrigger onClick={ () => groupOnClickHandler(g[1].path_word) }
key={ g[1].path_word }
value={ g[1].path_word }>
<TabsTrigger key={ g[1].path_word } value={ g[1].path_word }>
{ g[1].name }
<Badge key={ g[1].path_word } className="ml-2" variant="outline">
{ g[1].count }
</Badge>
</TabsTrigger>
)) }
) ) }
</TabsList>
<div className="flex justify-end">
<TooltipProvider>
@@ -200,7 +203,8 @@ export default function Chapters({ auth, comic, chapters, histories, offset }) {
</div>
</div>
<TabsContent value={ group }>
<div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 xl:grid-cols-12 gap-1">
<div
className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 2xl:grid-cols-12 gap-1">
{ (chapters.total > chapters.limit && chapters.offset > 0) && (
<Button size="sm" variant="outline" asChild>
<Link href="?" only={['chapters', 'offset']} headers={{ offset: parseInt(chapters.offset) - chapters.limit }}>

26
resources/js/Pages/Comic/Favourites.jsx
View File

@@ -1,13 +1,15 @@
import { Head, Link, router } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import AppLayout from '@/Layouts/AppLayout.jsx';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Star } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { useToast } from "@/hooks/use-toast.js";
import { useState } from "react";
import { Head, Link, } from '@inertiajs/react';
import { Star } from 'lucide-react';
import AppLayout from '@/Layouts/AppLayout.jsx';
import { Badge } from '@/components/ui/badge';
import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { useToast } from '@/hooks/use-toast.js';
export default function Favourites({ auth, favourites }) {
@@ -45,9 +47,9 @@ export default function Favourites({ auth, favourites }) {
<CardHeader>
<CardTitle><Link href={ `/comic/${ props.pathword }` }>{ props.name }</Link></CardTitle>
<div className="flex gap-2 items-end justify-between">
<p>
{ props.authors.map(a => <Badge key={ a.path_word } variant="outline"><Link>{ a.name }</Link></Badge>) }
</p>
<div>
{ props.authors.map(a => <Badge key={ a.name } variant="outline">{ a.name }</Badge>) }
</div>
<p className="text-right text-sm">
Updated: { props.upstream_updated_at }
</p>

30
resources/js/Pages/Comic/Histories.jsx
View File

@@ -116,25 +116,21 @@ export default function Histories({ auth, histories }) {
</Table>
<div>
<Pagination className="justify-end">
<PaginationContent>
{ histories.current_page > 1 && (
<PaginationContent>
{ histories.current_page > 1 && (
<PaginationItem>
<PaginationPrevious href={ histories.prev_page_url } only={['histories']} />
</PaginationItem>
) }
<PaginationItem>
<PaginationPrevious href={ histories.prev_page_url } only={['histories']} />
<PaginationLink href="#">{ histories.current_page }</PaginationLink>
</PaginationItem>
) }
<PaginationItem>
<PaginationLink href="#">{ histories.current_page }</PaginationLink>
</PaginationItem>
<PaginationItem>
</PaginationItem>
<PaginationItem>
{ histories.current_page < histories.last_page && (
<PaginationItem>
<PaginationNext href={ histories.next_page_url } only={['histories']} />
</PaginationItem>
) }
</PaginationItem>
</PaginationContent>
{ histories.current_page < histories.last_page && (
<PaginationItem>
<PaginationNext href={ histories.next_page_url } only={['histories']} />
</PaginationItem>
) }
</PaginationContent>
</Pagination>
</div>
</div>

2
resources/js/Pages/Comic/Index.jsx
View File

@@ -14,7 +14,7 @@ export default function Index({ comics, offset, auth }) {
const url = new URL(window.location); //searchParams
const [favourites, setFavourites] = useState(auth.user?.favourites);
const [favourites, setFavourites] = useState(auth.user?.favourites ?? []);
const { toast } = useToast();
const favouriteOnClickHandler = (pathword) => {

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

@@ -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;
}
});