improve job handling

Author: juandjara

app/components/JobList.tsx

@@ -1,5 +1,5 @@
 import { DownloadPayload } from "@/lib/download-queue.server"
-import { Link, useLoaderData, useNavigation, useRevalidator } from "@remix-run/react"
+import { Form, Link, useLoaderData, useNavigation, useRevalidator } from "@remix-run/react"
 import { Job } from "bullmq"
 import { IconCheck, IconClose, IconLoading } from "./icons"
 import { loader } from '@/routes/_index'
@@ -42,9 +42,23 @@ export default function JobList() {
   return (
     _jobs.length > 0 && (
       <div className="mt-8">
-        <h2 className="text-xl font-medium px-3 mb-2">
-          Recent downloads
-        </h2>
+        <div className="px-3 flex items-center">
+          <h2 className="flex-grow text-xl font-medium mb-2">
+            Recent downloads
+          </h2>
+          <Form className='inline' method='POST'>
+            <button
+              className='flex items-center gap-2 px-2 py-1 border rounded-md hover:bg-gray-50 transition-colors'
+              type="submit"
+              name="_action"
+              value="clear"
+              disabled={busy}
+            >
+              <IconClose />
+              <p>Clear</p>
+            </button>
+          </Form>
+        </div>
         <ul className="divide-y">
           {_jobs.map((job) => (
             <li key={job.id} className="p-4 flex items-center gap-2 hover:bg-gray-100 transition-colors">

app/lib/download-queue.server.ts

@@ -2,7 +2,6 @@ import { getJSON } from "@/request"
 import { registerQueue } from "./queue.server"
 import { BASE_URL, IMAGE_PREFIX } from "@/config"
 import fs from 'fs/promises'
-import { ImageProps } from "@/components/Image"
 import path from 'path'
 import JSZip from "jszip"
 import { Queue } from "bullmq"
@@ -34,19 +33,24 @@ export type DownloadMeta = {
 type Chapter = {
   seoTitle: string
   chapter: {
-    md_images: ImageProps[]
+    images: { url: string; w: number; h: number }[]
   }
 }
 
 export const downloadQueue = registerQueue<DownloadPayload>('download', async (job) => {
   const id = job.data.chapter_id
   const comic_title = job.data.meta.comic_title
-  const data = await getJSON<Chapter>(`${BASE_URL}/chapter/${id}`)
+  const data = await getJSON<Chapter>(`${BASE_URL}/chapter/${id}?tachiyomi=true`)
 
-  const urls = data.chapter.md_images.map((image) => ({
-    url: `${IMAGE_PREFIX}/${image.b2key}`,
-    key: image.b2key
-  }))
+  console.log('received data: \n', data.chapter.images)
+
+  const urls = data.chapter.images.map((image) => {
+    const key = new URL(image.url).pathname.slice(1)
+    return {
+      url: `${IMAGE_PREFIX}/${key}?tachiyomi=true`,
+      key
+    }
+  })
 
   job.updateProgress(0)
 

app/routes/_index.tsx

@@ -28,7 +28,7 @@ type SearchResult = {
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const q = new URL(request.url).searchParams.get("q")
-  const url = `${BASE_URL}/v1.0/search?q=${q}`
+  const url = `${BASE_URL}/v1.0/search?q=${q}&tachiyomi=true`
   const recent = await getRecentQueries()
   const files = await getFiles()
   const jobs = await downloadQueue.getJobs()
@@ -61,6 +61,10 @@ export async function action({ request }: ActionFunctionArgs) {
   if (action === 'scan') {
     await scanQueue.add('scan', { path: STORAGE_PATH })
   }
+  if (action === 'clear') {
+    await downloadQueue.clean(30 * 1000, 5000, 'failed')
+    await downloadQueue.clean(30 * 1000, 5000, 'completed')
+  }
 
   return { action }
 }
@@ -75,7 +79,7 @@ export default function Index() {
   const busy = state !== "idle" 
 
   return (
-    <main className="max-w-screen-lg mx-auto p-4">
+    <main className="max-w-screen-lg mx-auto py-4 px-2">
       <h1 className="text-center text-2xl my-4">
         Comick Downloader
       </h1>
@@ -121,15 +125,26 @@ export default function Index() {
       )}
       {results.length > 0 && !busy && (
         <div className="mt-8">
-          <h2 className="text-xl font-medium px-2">
+          <h2 className="text-2xl mb-2">
             Results
           </h2>
-          <ul className="divide-y">
+          <ul>
             {results.map((result) => (
-              <li key={result.hid} className="p-4 my-2 flex items-stretch gap-2 hover:bg-gray-100 transition-colors">
-                <Image w={100} h={100} b2key={result.md_covers[0]?.b2key} />
-                <Link to={`/comic/${result.hid}`} className="flex-grow text-lg font-semibold">{result.title}</Link>
-                <a href={`https://comick.io/comic/${result.slug}`}>Link</a>
+              <li
+                key={result.hid}
+                className="border-t border-gray-300 cursor-pointer relative pb-3 flex items-stretch gap-2 hover:bg-gray-100 transition-colors"
+              >
+                <Link
+                  to={`/comic/${result.hid}`}
+                  className="absolute inset-0 w-full h-full"
+                >
+                  <span className="hidden">{result.title}</span>
+                </Link>
+                <Image w={120} h={120} b2key={result.md_covers[0]?.b2key} />
+                <div className="flex-grow">
+                  <p className="pt-1 text-lg font-semibold">{result.title}</p>
+                  <a className="hover:underline text-xs" href={`https://comick.io/comic/${result.slug}`}>source</a>
+                </div>
               </li>
             ))}
           </ul>
@@ -147,7 +162,7 @@ function FSInfo() {
   const { state } = useNavigation()
   const busy = state !== "idle"
 
-  console.log(files)
+  console.log('Filesystem files: ', files)
 
   return (
     <div className="mt-8">

app/routes/comic.$id.tsx

@@ -52,7 +52,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
   const [jobs, comic, chapters] = await Promise.all([
     downloadQueue.getJobs(),
-    getJSON<Comic>(`${BASE_URL}/comic/${id}`),
+    getJSON<Comic>(`${BASE_URL}/comic/${id}?tachiyomi=true`),
     getJSON<{ chapters: FullChapter[] }>(`${BASE_URL}/comic/${id}/chapters?${remoteSP.toString()}`)
       .then((res) => res.chapters),
   ])
@@ -70,9 +70,14 @@ export async function action({ request }: ActionFunctionArgs) {
     downloadQueue.add(
       `Download chapter ${id}`,
       payload,
-      { removeOnComplete: 1000, removeOnFail: 5000 }
+      { removeOnComplete: 1000, removeOnFail: 5000, attempts: 3, backoff: { type: 'exponential', delay: 1000 } }
     )
   }
+  if (action === 'retry') {
+    const jobs = await downloadQueue.getJobs('failed')
+    const job = jobs.find((j) => j.data.chapter_id === id)
+    await job?.retry()
+  }
 
   return null
 }
@@ -323,7 +328,7 @@ function ChapterList() {
                   title={getTooltip(c.hid)}
                   type='submit'
                   name='_action'
-                  value='download'
+                  value={isError(c.hid) ? 'retry' : 'download'}
                   disabled={busy && isPost}
                 >
                   {getIcon(c.hid)}