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

History Links

Browse Source 
LocalStorage for reading mode
Debugging with Sentry
This commit is contained in:
User
2024-12-28 15:34:35 -05:00
parent 38ad983d6d
commit 58f85bfc22
16 changed files with 758 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,22 @@
import { Head, Link, router } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout.jsx';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb.jsx";
import { Button } from "@/components/ui/button";
import { ChevronFirst, ChevronLast, Rows3, Settings } from "lucide-react";
import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
import { throttle } from 'lodash';
import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog";
import PrimaryButton from "@/components/PrimaryButton.jsx";
import { Switch } from "@/components/ui/switch";
import { Tooltip, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
import { TooltipContent } from "@/components/ui/tooltip.jsx";
import { throttle } from "lodash";
import PrimaryButton from '@/components/PrimaryButton';
import { Switch } from '@/components/ui/switch';
import { TooltipContent } from "@/components/ui/tooltip";
export default function Read({ auth, comic, chapter }) {
const validReadingModes = ['rtl', 'utd'];
const [readingMode, setReadingMode] = useState('rtl'); // rtl, utd
const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false);
const [currentImage, setCurrentImage] = useState(1);
@@ -24,6 +28,14 @@ export default function Read({ auth, comic, chapter }) {
const [loading, setLoading] = useState(true);
const getLocalStorageReadingMode = () => {
if (window.localStorage.getItem('readingMode') !== null && validReadingModes.includes(window.localStorage.getItem('readingMode'))) {
return window.localStorage.getItem('readingMode');
}
return "rtl";
}
function useWindowSize() {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
@@ -41,8 +53,10 @@ export default function Read({ auth, comic, chapter }) {
const toggleReadingMode = (e) => {
if (e) {
window.localStorage.setItem('readingMode', 'utd');
setReadingMode('utd');
} else {
window.localStorage.setItem('readingMode', 'rtl');
setReadingMode('rtl');
}
}
@@ -154,7 +168,7 @@ export default function Read({ auth, comic, chapter }) {
<label>Reading Mode</label>
<p>Turn on for UTD mode</p>
</div>
<Switch defaultChecked={ readingMode === "utd" }
<Switch defaultChecked={ (readingMode === "utd") }
onCheckedChange={ (e) => toggleReadingMode(e) } />
</div>
</div>
@@ -227,6 +241,8 @@ export default function Read({ auth, comic, chapter }) {
}, [windowSize]);
useEffect(() => {
setReadingMode(getLocalStorageReadingMode());
if (!ref.current) return;
const handleScroll = () => {