Feature/ Forum page - show pdf page count

.eslintignore

@@ -1 +1,2 @@
 client/templates.js
+lib/pdf

components/forum/ForumNote.js

@@ -1,13 +1,16 @@
 /* globals $, promptError, view2, DOMPurify: false */
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import NoteEditor from '../NoteEditor'
 import { NoteAuthorsV2 } from '../NoteAuthors'
 import { NoteContentV2 } from '../NoteContent'
 import Icon from '../Icon'
 import { prettyId, prettyInvitationId, forumDate, classNames } from '../../lib/utils'
 import getLicenseInfo from '../../lib/forum-utils'
+import usePdf from '../../hooks/usePdf'
+import api from '../../lib/api-client'
+import useUser from '../../hooks/useUser'
 
 function ForumNote({ note, updateNote, deleteOrRestoreNote }) {
   const { id, content, details, signatures, editInvitations, deleteInvitation } = note
@@ -172,6 +175,31 @@ function ForumNote({ note, updateNote, deleteOrRestoreNote }) {
 }
 
 function ForumTitle({ id, title, pdf, html }) {
+  const { accessToken } = useUser()
+  const { initialized, loadDocument, getPagesCount, getCoverImage } = usePdf(accessToken)
+  const [pageCount, setPageCount] = useState(null)
+  const [coverImage, setCoverImage] = useState(null)
+
+  const loadPdf = async () => {
+    if (pdf.startsWith('http') || !accessToken) return
+    try {
+      const result = await api.get('/pdf', { id }, { accessToken, contentType: 'blob' })
+      await loadDocument(await result.arrayBuffer())
+      setPageCount(await getPagesCount())
+      const coverImageData = await getCoverImage()
+      if (coverImageData) {
+        setCoverImage(URL.createObjectURL(new Blob([coverImageData], { type: 'image/png' })))
+      }
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  useEffect(() => {
+    if (!initialized || !pdf) return
+    loadPdf()
+  }, [initialized])
+
   return (
     <div className="forum-title mt-2 mb-2">
       <h2 className="citation_title">{title}</h2>
@@ -185,8 +213,9 @@ function ForumTitle({ id, title, pdf, html }) {
             target="_blank"
             rel="noreferrer"
           >
-            <img src="/images/pdf_icon_blue.svg" alt="Download PDF" />
+            <img src={coverImage ?? '/images/pdf_icon_blue.svg'} alt="Download PDF" />
           </a>
+          {pageCount && <span>{pageCount}</span>}
         </div>
       )}
       {html && (

hooks/usePdf.js

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react'
+import * as Comlink from 'comlink'
+
+export default function usePdf(accessToken) {
+  const [initialized, setInitialized] = useState(false)
+  const mupdfWorker = useRef(null)
+  const document = useRef(null)
+
+  const initializeMuPdf = async () => {
+    const worker = new Worker(new URL('../lib/pdf/pdfWorker.js', import.meta.url), {
+      type: 'module',
+    })
+
+    worker.addEventListener('message', (event) => {
+      if (event.data === 'MUPDF_LOADED') {
+        setInitialized(true)
+      }
+    })
+    mupdfWorker.current = Comlink.wrap(worker)
+  }
+
+  const loadDocument = async (doc) => {
+    document.current = doc
+    return mupdfWorker.current.loadDocument(doc)
+  }
+
+  const getMeta = async (meta) => {
+    if (!document.current) return null
+    return mupdfWorker.current.getDocumentMeta(meta)
+  }
+
+  const getPagesCount = async () => {
+    if (!document.current) return null
+    return mupdfWorker.current.getDocumentPageCount()
+  }
+
+  const getCoverImage = async () => {
+    if (!document.current) return null
+    return mupdfWorker.current.getDocumentCoverImage()
+  }
+
+  useEffect(() => {
+    if (!accessToken) return
+    initializeMuPdf()
+  }, [])
+  return { initialized, loadDocument, getMeta, getPagesCount, getCoverImage }
+}