- turbo-stream for Chapter updates
- progressbar for chapter scrapping
- minor optimisations
This commit is contained in:
Jérémy Guillot
2024-07-17 20:20:19 +02:00
parent 4672886a67
commit 7fc2f15f6b
14 changed files with 111 additions and 63 deletions

24
assets/bootstrap.js vendored
View File

@@ -9,3 +9,27 @@ export const app = startStimulusApp(require.context(
// register any custom, 3rd party controllers here // register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController); // app.register('some_controller_name', SomeImportedController);
//DEBUG TURBO
// import * as Turbo from "@hotwired/turbo"
//
// Turbo.session.drive = false
// Turbo.start()
//
// // Écouteurs existants
// document.addEventListener("turbo:before-stream-render", (event) => {
// console.log("Before stream render", event.target);
// });
//
// document.addEventListener("turbo:stream-render", (event) => {
// console.log("Stream rendered", event.target);
// });
//
// // Nouvel écouteur pour les événements de création
// document.addEventListener("turbo:before-fetch-request", (event) => {
// console.log("Before fetch request", event.detail.fetchOptions);
// });
//
// document.addEventListener("turbo:before-fetch-response", (event) => {
// console.log("Before fetch response", event.detail.fetchResponse);
// });

View File

@@ -15,7 +15,7 @@
"fetch": "eager" "fetch": "eager"
}, },
"mercure-turbo-stream": { "mercure-turbo-stream": {
"enabled": false, "enabled": true,
"fetch": "eager" "fetch": "eager"
} }
} }

View File

@@ -31,7 +31,7 @@ export default class extends Controller {
} }
handleProgressUpdate(data) { handleProgressUpdate(data) {
this.currentPage = data.pageIndex + 1; this.currentPage = data.pageIndex;
this.totalPages = data.totalPages; this.totalPages = data.totalPages;
this.updateProgressBar(); this.updateProgressBar();

View File

@@ -28,6 +28,7 @@ use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException; use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
use Symfony\Component\Messenger\MessageBusInterface; use Symfony\Component\Messenger\MessageBusInterface;
use Symfony\Component\Routing\Attribute\Route; use Symfony\Component\Routing\Attribute\Route;
use Symfony\Component\Serializer\SerializerInterface;
use Symfony\Component\String\Slugger\SluggerInterface; use Symfony\Component\String\Slugger\SluggerInterface;
class MangaController extends AbstractController class MangaController extends AbstractController

View File

@@ -6,8 +6,10 @@ use App\Repository\ChapterRepository;
use Doctrine\Common\Collections\ArrayCollection; use Doctrine\Common\Collections\ArrayCollection;
use Doctrine\Common\Collections\Collection; use Doctrine\Common\Collections\Collection;
use Doctrine\ORM\Mapping as ORM; use Doctrine\ORM\Mapping as ORM;
use Symfony\UX\Turbo\Attribute\Broadcast;
#[ORM\Entity(repositoryClass: ChapterRepository::class)] #[ORM\Entity(repositoryClass: ChapterRepository::class)]
#[Broadcast()]
class Chapter class Chapter
{ {
#[ORM\Id] #[ORM\Id]

View File

@@ -7,6 +7,7 @@ use Doctrine\Common\Collections\ArrayCollection;
use Doctrine\Common\Collections\Collection; use Doctrine\Common\Collections\Collection;
use Doctrine\DBAL\Types\Types; use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM; use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Serializer\Annotation\Groups;
#[ORM\Entity(repositoryClass: MangaRepository::class)] #[ORM\Entity(repositoryClass: MangaRepository::class)]
class Manga class Manga

View File

@@ -4,7 +4,7 @@ namespace App\Manager\Toolbar\Definition;
use App\Manager\Toolbar\Element\ToolbarElement; use App\Manager\Toolbar\Element\ToolbarElement;
class Toolbar abstract class Toolbar
{ {
private array $leftGroup = []; private array $leftGroup = [];
private array $rightGroup = []; private array $rightGroup = [];

View File

@@ -17,9 +17,9 @@ use Symfony\Component\Messenger\Attribute\AsMessageHandler;
readonly class DownloadChapterHandler readonly class DownloadChapterHandler
{ {
public function __construct( public function __construct(
private ChapterRepository $chapterRepository, private ChapterRepository $chapterRepository,
private MangaScraperService $mangaScraperService, private MangaScraperService $mangaScraperService,
private NotificationService $notificationService, private NotificationService $notificationService,
private ContentSourceRepository $contentSourceRepository private ContentSourceRepository $contentSourceRepository
) )
{ {
@@ -46,8 +46,7 @@ readonly class DownloadChapterHandler
->setBaseUrl('https://api.mangadex.org/') ->setBaseUrl('https://api.mangadex.org/')
->setImageSelector('img') ->setImageSelector('img')
->setChapterUrlFormat('at-home/server/%s') ->setChapterUrlFormat('at-home/server/%s')
->setScrapingType('mangadex') ->setScrapingType('mangadex');
;
// (new ContentSource()) // (new ContentSource())
// ->setBaseUrl('https://lelscans.net') // ->setBaseUrl('https://lelscans.net')

View File

@@ -32,7 +32,7 @@ readonly class RefreshMetadataHandler
$lastChapters = $this->mangadexProvider->addAllChaptersToManga($manga); $lastChapters = $this->mangadexProvider->addAllChaptersToManga($manga);
try { try {
foreach ($manga->getChapters() as $chapter) { foreach ($lastChapters as $chapter) {
$this->entityManager->persist($chapter); $this->entityManager->persist($chapter);
} }

View File

@@ -5,6 +5,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div {{ turbo_stream_listen('App\\Entity\\Chapter') }}></div>
<div class="container mx-auto mt-8 p-2"> <div class="container mx-auto mt-8 p-2">
<div class="bg-white overflow-hidden"> <div class="bg-white overflow-hidden">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
@@ -24,7 +25,7 @@
</thead> </thead>
<tbody class="text-gray-700"> <tbody class="text-gray-700">
{% for manga in status %} {% for manga in status %}
<tr class="border-b border-gray-200 hover:bg-gray-50 transition duration-150 ease-in-out"> <tr id="activity-{{ manga.chapterId }}" class="border-b border-gray-200 hover:bg-gray-50 transition duration-150 ease-in-out">
<td class="py-4 px-4 text-center"> <td class="py-4 px-4 text-center">
<input type="checkbox" class="form-checkbox h-5 w-5 text-green-600"> <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600">
</td> </td>
@@ -40,7 +41,7 @@
data-controller="chapter-progress" data-controller="chapter-progress"
data-chapter-progress-chapter-id-value="{{ manga.chapterId }}"> data-chapter-progress-chapter-id-value="{{ manga.chapterId }}">
<div class="relative bg-gray-200 rounded-full h-6 overflow-hidden"> <div class="relative bg-gray-200 rounded-full h-6 overflow-hidden">
<div data-chapter-progress-target="progressBar" class="absolute top-0 left-0 h-full bg-green-400 transition-all duration-300 ease-out" style="width: 0%"></div> <div data-chapter-progress-target="progressBar" class="absolute top-0 left-0 h-full bg-green-400 transition-all duration-300 ease-out" style="width: 0"></div>
<div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white" data-chapter-progress-target="progressText"> <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white" data-chapter-progress-target="progressText">
0 / 0 0 / 0
</div> </div>

View File

@@ -0,0 +1,21 @@
{% block create %}
<turbo-stream action="prepend" target="volume-{{ entity.volume }}">
<template>
{% include 'manga/_chapter_row.html.twig' with { chapter: entity, manga: entity.manga } %}
</template>
</turbo-stream>
{% endblock %}
{% block update %}
<turbo-stream action="remove" target="activity-{{ entity.id }}"></turbo-stream>
<turbo-stream action="replace" target="chapter-{{ entity.id }}">
<template>
{% include 'manga/_chapter_row.html.twig' with { chapter: entity, manga: entity.manga } %}
</template>
</turbo-stream>
{% endblock %}
{% block remove %}
{% endblock %}

View File

@@ -1,5 +1,5 @@
<turbo-frame id="chapter_list"> <turbo-frame id="chapter_list">
<div class="p-4"> <div class="p-4" {{ turbo_stream_listen('App\\Entity\\Chapter') }}>
{% for volume, chapters in chapters_by_volume %} {% for volume, chapters in chapters_by_volume %}
{% set is_first = loop.first %} {% set is_first = loop.first %}
{% set volume_cbz_path = chapters|first.cbzPath %} {% set volume_cbz_path = chapters|first.cbzPath %}
@@ -63,7 +63,7 @@
<th class="px-4 py-2 text-right">Actions</th> <th class="px-4 py-2 text-right">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody id="volume-{{ volume }}">
{% if all_chapters_same_cbz and volume_cbz_path is not null %} {% if all_chapters_same_cbz and volume_cbz_path is not null %}
<tr class="border-t hover:bg-green-100"> <tr class="border-t hover:bg-green-100">
<td class="px-4 py-2 text-green-500"> <td class="px-4 py-2 text-green-500">
@@ -85,54 +85,7 @@
</tr> </tr>
{% else %} {% else %}
{% for chapter in chapters %} {% for chapter in chapters %}
<tr class="border-t hover:bg-green-100"> {% include 'manga/_chapter_row.html.twig' with {'chapter': chapter, 'manga': manga} %}
{% if chapter.cbzPath is not null %}
<td class="px-4 py-2 text-green-500">
<a data-turbo-frame="_top" href="{{ path('app_manga_read', { mangaSlug: manga.slug, chapterNumber: chapter.number, pageNumber: 1 }) }}">
{{ '%02d'|format(chapter.number) }}
</a>
</td>
{% else %}
<td class="px-4 py-2">{{ '%02d'|format(chapter.number) }}</td>
{% endif %}
<td class="px-4 py-2 w-full text-left">
{% if chapter.cbzPath is not null %}
<a data-turbo-frame="_top" href="{{ path('app_manga_read', { mangaSlug: manga.slug, chapterNumber: chapter.number, pageNumber: 1 }) }}">
{{ chapter.title ?? 'No title' }}
</a>
{% else %}
{{ chapter.title ?? 'No title' }}
{% endif %}
</td>
<td class="px-4 py-2 flex justify-end gap-2">
{% if chapter.cbzPath is null %}
<button
data-controller="download"
data-action="download#download"
data-download-url-value="{{ path('search_chapter', {id: chapter.id}) }}"
>
<span class="text-gray-500 hover:text-green-500">
<i data-download-target="icon" class="fas fa-search"></i>
</span>
</button>
{% else %}
<button disabled>
<span class="text-gray-500">
<i class="fas fa-search"></i>
</span>
</button>
{% endif %}
<a href="#"
data-controller="download"
data-action="download#download"
data-download-url-value="{{ path('download_cbz', {chapterId: chapter.id}) }}"
class="w-8 text-center">
<i data-download-target="icon"
class="fas fa-download text-gray-500 hover:text-green-500"></i>
</a>
</td>
</tr>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</tbody> </tbody>

View File

@@ -0,0 +1,48 @@
<tr id="chapter-{{ chapter.id }}" class="border-t hover:bg-green-100">
{% if chapter.cbzPath is not null %}
<td class="px-4 py-2 text-green-500">
<a data-turbo-frame="_top" href="{{ path('app_manga_read', { mangaSlug: manga.slug, chapterNumber: chapter.number, pageNumber: 1 }) }}">
{{ '%02d'|format(chapter.number) }}
</a>
</td>
{% else %}
<td class="px-4 py-2">{{ '%02d'|format(chapter.number) }}</td>
{% endif %}
<td class="px-4 py-2 w-full text-left">
{% if chapter.cbzPath is not null %}
<a data-turbo-frame="_top" href="{{ path('app_manga_read', { mangaSlug: manga.slug, chapterNumber: chapter.number, pageNumber: 1 }) }}">
{{ chapter.title ?? 'No title' }}
</a>
{% else %}
{{ chapter.title ?? 'No title' }}
{% endif %}
</td>
<td class="px-4 py-2 flex justify-end gap-2">
{% if chapter.cbzPath is null %}
<button
data-controller="download"
data-action="download#download"
data-download-url-value="{{ path('search_chapter', {id: chapter.id}) }}"
>
<span class="text-gray-500 hover:text-green-500">
<i data-download-target="icon" class="fas fa-search"></i>
</span>
</button>
{% else %}
<button disabled>
<span class="text-gray-500">
<i class="fas fa-search"></i>
</span>
</button>
{% endif %}
<a href="#"
data-controller="download"
data-action="download#download"
data-download-url-value="{{ path('download_cbz', {chapterId: chapter.id}) }}"
class="w-8 text-center">
<i data-download-target="icon"
class="fas fa-download text-gray-500 hover:text-green-500"></i>
</a>
</td>
</tr>

View File

@@ -1,6 +1,5 @@
{% block body %} {% block body %}
{% if currentView == 'poster' %} {% if currentView == 'poster' %}
{# Vue poster actuelle #}
<div <div
class="w-full p-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12 gap-4"> class="w-full p-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12 gap-4">
{% for manga in mangas %} {% for manga in mangas %}
@@ -25,7 +24,6 @@
{% endfor %} {% endfor %}
</div> </div>
{% elseif currentView == 'resume' %} {% elseif currentView == 'resume' %}
{# Vue résumé #}
<div class="w-full p-4 space-y-4"> <div class="w-full p-4 space-y-4">
{% for manga in mangas %} {% for manga in mangas %}
<div <div