colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: SPA pour les pages existantes

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-02-17 14:50:36 +01:00
parent 668702b1fb
commit 140cc14316
11 changed files with 331 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
assets/react/app/presentation/pages/ReaderPage.jsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useReader } from '../context/ReaderContext';
import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faArrowLeft,
@@ -104,6 +105,25 @@ export function ReaderPage() {
}
};
const toolbarConfig = {
leftSection: [
{ icon: faArrowLeft, navigateBack: true }
],
rightSection: [
{
icon: mode === 'classic' ? faScroll : faBookOpen,
onClick: () => setMode(mode === 'classic' ? 'scrolling' : 'classic'),
label: `Mode ${mode === 'classic' ? 'défilement' : 'page par page'}`
},
{
icon: isFullscreen ? faCompress : faExpand,
onClick: toggleFullscreen,
label: isFullscreen ? 'Quitter le plein écran' : 'Plein écran'
},
{ icon: faList, onClick: () => {}, label: 'Chapitres' }
]
};
if (loading || (!currentPageData && mode === 'classic' && pages.length === 0)) {
return (
<div className="flex justify-center items-center h-screen bg-gray-900 text-white">
@@ -135,39 +155,12 @@ export function ReaderPage() {
<div className="fixed top-0 left-0 right-0 bg-gray-800 z-50">
<div className="container mx-auto px-4">
<div className="h-16 flex items-center justify-between">
<div className="flex items-center space-x-4">
<button
onClick={() => navigate(-1)}
className="text-gray-300 hover:text-white"
>
<FontAwesomeIcon icon={faArrowLeft} />
</button>
{context && (
<div>
<span className="font-medium">Manga title</span>
<span className="mx-2">-</span>
<span>Chapter {context.number}</span>
</div>
)}
</div>
<div className="flex items-center space-x-4">
<button
onClick={() => setMode(mode === 'classic' ? 'scrolling' : 'classic')}
className="text-gray-300 hover:text-white"
title={`Switch to ${mode === 'classic' ? 'scrolling' : 'classic'} mode`}
>
<FontAwesomeIcon icon={mode === 'classic' ? faScroll : faBookOpen} />
</button>
<button
onClick={toggleFullscreen}
className="text-gray-300 hover:text-white"
>
<FontAwesomeIcon icon={isFullscreen ? faCompress : faExpand} />
</button>
<button className="text-gray-300 hover:text-white">
<FontAwesomeIcon icon={faList} />
</button>
</div>
<Toolbar {...toolbarConfig} />
{context && (
<div className="text-center flex-1">
<span className="font-medium">Chapitre {context.number}</span>
</div>
)}
</div>
</div>
</div>
@@ -243,4 +236,4 @@ export function ReaderPage() {
)}
</div>
);
}
}