sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

feat(content): show other file types as gray box

Browse Source
This commit is contained in:
enes 2024-08-21 17:07:29 +02:00
parent 86095cba5c
commit c9d7d0a6f5
12 changed files with 145 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/DrawPDFFields/index.tsx
View File

@ -488,9 +488,7 @@ export const DrawPDFFields = (props: Props) => {
{pdfFile ? (
getPdfPages(pdfFile, i)
) : (
<div className={styles.otherFile}>
This is a {extension} file
</div>
<div className={'otherFile'}>This is a {extension} file</div>
)}
</div>
{i < selectedFiles.length - 1 && (

12
src/components/DrawPDFFields/style.module.scss
View File

@ -104,15 +104,3 @@
flex-direction: column;
gap: 25px;
}
.otherFile {
border-radius: 4px;
background: rgba(255, 255, 255, 0.5);
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.25);
font-size: 14px;
}

34
src/components/PDFView/PdfItem.tsx
View File

@ -1,12 +1,13 @@
import { PdfFile } from '../../types/drawing.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import { extractFileExtension } from '../../utils/meta.ts'
import PdfPageItem from './PdfPageItem.tsx'
interface PdfItemProps {
currentUserMarks: CurrentUserMark[]
handleMarkClick: (id: number) => void
otherUserMarks: Mark[]
pdfFile: PdfFile
pdfFile: PdfFile | File
selectedMark: CurrentUserMark | null
selectedMarkValue: string
}
@ -31,19 +32,24 @@ const PdfItem = ({
const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
return marks.filter((mark) => mark.location.page === page)
}
return pdfFile.pages.map((page, i) => {
return (
<PdfPageItem
page={page}
key={i}
currentUserMarks={filterByPage(currentUserMarks, i)}
handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue}
selectedMark={selectedMark}
otherUserMarks={filterMarksByPage(otherUserMarks, i)}
/>
)
})
if ('pages' in pdfFile) {
return pdfFile.pages.map((page, i) => {
return (
<PdfPageItem
page={page}
key={i}
currentUserMarks={filterByPage(currentUserMarks, i)}
handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue}
selectedMark={selectedMark}
otherUserMarks={filterMarksByPage(otherUserMarks, i)}
/>
)
})
} else {
const extension = extractFileExtension(pdfFile.name)
return <div className={'otherFile'}>This is a {extension} file</div>
}
}
export default PdfItem

5
src/components/PDFView/index.tsx
View File

@ -51,11 +51,12 @@ const PdfView = ({
return (
<>
{files.map((currentUserFile, index, arr) => {
const { hash, pdfFile, id } = currentUserFile
const { hash, pdfFile, id, filename } = currentUserFile
if (!hash) return
return (
<div
id={pdfFile.file.name}
id={filename}
ref={(el) => (pdfRefs.current[id] = el)}
key={index}
>

12
src/index.css
View File

@ -165,3 +165,15 @@ button:disabled {
font-style: normal;
font-display: swap;
}
.otherFile {
border-radius: 4px;
background: rgba(255, 255, 255, 0.5);
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.25);
font-size: 14px;
}

31
src/pages/sign/index.tsx
View File

@ -33,13 +33,14 @@ import {
sendNotification,
signEventForMetaFile,
updateUsersAppData,
findOtherUserMarks
findOtherUserMarks,
extractFileExtension
} from '../../utils'
import { Container } from '../../components/Container'
import { DisplayMeta } from './internal/displayMeta'
import styles from './style.module.scss'
import { PdfFile } from '../../types/drawing.ts'
import { convertToPdfFile } from '../../utils/pdf.ts'
import { convertToPdfFile, toFile } from '../../utils/pdf.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import { getLastSignersSig } from '../../utils/sign.ts'
import {
@ -76,7 +77,7 @@ export const SignPage = () => {
const [selectedFile, setSelectedFile] = useState<File | null>(null)
const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
const [files, setFiles] = useState<{ [filename: string]: PdfFile | File }>({})
const [isLoading, setIsLoading] = useState(true)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@ -402,7 +403,7 @@ export const SignPage = () => {
return
}
const files: { [filename: string]: PdfFile } = {}
const files: { [filename: string]: PdfFile | File } = {}
const fileHashes: { [key: string]: string | null } = {}
const fileNames = Object.values(zip.files).map((entry) => entry.name)
@ -419,7 +420,11 @@ export const SignPage = () => {
try {
files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
} catch (error) {
console.error('Not a .pdf file:', error)
files[fileName] = toFile(
arrayBuffer,
fileName,
'application/' + extractFileExtension(fileName)
)
}
const hash = await getHash(arrayBuffer)
if (hash) {
@ -767,8 +772,12 @@ export const SignPage = () => {
zip.file('meta.json', stringifiedMeta)
for (const [fileName, pdf] of Object.entries(files)) {
zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
for (const [fileName, file] of Object.entries(files)) {
if ('pages' in file) {
zip.file(`files/${fileName}`, await file.file.arrayBuffer())
} else {
zip.file(`files/${fileName}`, await file.arrayBuffer())
}
}
const arrayBuffer = await zip
@ -805,8 +814,12 @@ export const SignPage = () => {
zip.file('meta.json', stringifiedMeta)
for (const [fileName, pdf] of Object.entries(files)) {
zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
for (const [fileName, file] of Object.entries(files)) {
if ('pages' in file) {
zip.file(`files/${fileName}`, await file.file.arrayBuffer())
} else {
zip.file(`files/${fileName}`, await file.arrayBuffer())
}
}
const arrayBuffer = await zip

11
src/pages/sign/internal/displayMeta.tsx
View File

@ -38,7 +38,7 @@ import { PdfFile } from '../../../types/drawing.ts'
type DisplayMetaProps = {
meta: Meta
files: { [filename: string]: PdfFile }
files: { [filename: string]: PdfFile | File }
submittedBy: string
signers: `npub1${string}`[]
viewers: `npub1${string}`[]
@ -144,7 +144,14 @@ export const DisplayMeta = ({
}, [users, submittedBy, metadata])
const downloadFile = async (filename: string) => {
const arrayBuffer = await files[filename].file.arrayBuffer()
const file = files[filename]
let arrayBuffer: ArrayBuffer
if ('pages' in file) {
arrayBuffer = await file.file.arrayBuffer()
} else {
arrayBuffer = await file.arrayBuffer()
}
if (!arrayBuffer) return
const blob = new Blob([arrayBuffer])

95
src/pages/verify/index.tsx
View File

@ -21,7 +21,8 @@ import {
readContentOfZipEntry,
signEventForMetaFile,
shorten,
getCurrentUserFiles
getCurrentUserFiles,
extractFileExtension
} from '../../utils'
import styles from './style.module.scss'
import { useLocation } from 'react-router-dom'
@ -32,7 +33,8 @@ import {
convertToPdfBlob,
convertToPdfFile,
groupMarksByFileNamePage,
inPx
inPx,
toFile
} from '../../utils/pdf.ts'
import { State } from '../../store/rootReducer.ts'
import { useSelector } from 'react-redux'
@ -85,41 +87,47 @@ const SlimPdfView = ({
ref={(el) => (pdfRefs.current[id] = el)}
className={styles.fileWrapper}
>
{pdfFile.pages.map((page, i) => {
const marks: Mark[] = []
{'pages' in pdfFile ? (
pdfFile.pages.map((page, i) => {
const marks: Mark[] = []
signatureEvents.forEach((e) => {
const m = parsedSignatureEvents[
e as `npub1${string}`
].parsedContent?.marks.filter(
(m) => m.pdfFileHash == hash && m.location.page == i
signatureEvents.forEach((e) => {
const m = parsedSignatureEvents[
e as `npub1${string}`
].parsedContent?.marks.filter(
(m) => m.pdfFileHash == hash && m.location.page == i
)
if (m) {
marks.push(...m)
}
})
return (
<div className={styles.imageWrapper} key={i}>
<img draggable="false" src={page.image} />
{marks.map((m) => {
return (
<div
className={styles.mark}
key={m.id}
style={{
left: inPx(m.location.left),
top: inPx(m.location.top),
width: inPx(m.location.width),
height: inPx(m.location.height)
}}
>
{m.value}
</div>
)
})}
</div>
)
if (m) {
marks.push(...m)
}
})
return (
<div className={styles.imageWrapper} key={i}>
<img draggable="false" src={page.image} />
{marks.map((m) => {
return (
<div
className={styles.mark}
key={m.id}
style={{
left: inPx(m.location.left),
top: inPx(m.location.top),
width: inPx(m.location.width),
height: inPx(m.location.height)
}}
>
{m.value}
</div>
)
})}
</div>
)
})}
) : (
<div className={'otherFile'}>
This is a {extractFileExtension(pdfFile.name)} file
</div>
)}
</div>
{i < files.length - 1 && (
@ -171,7 +179,7 @@ export const VerifyPage = () => {
const [currentFileHashes, setCurrentFileHashes] = useState<{
[key: string]: string | null
}>({})
const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
const [files, setFiles] = useState<{ [filename: string]: PdfFile | File }>({})
const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
const [signatureFileHashes, setSignatureFileHashes] = useState<{
[key: string]: string
@ -230,7 +238,7 @@ export const VerifyPage = () => {
if (!zip) return
const files: { [filename: string]: PdfFile } = {}
const files: { [filename: string]: PdfFile | File } = {}
const fileHashes: { [key: string]: string | null } = {}
const fileNames = Object.values(zip.files).map(
(entry) => entry.name
@ -252,7 +260,11 @@ export const VerifyPage = () => {
fileName!
)
} catch (error) {
console.error('Not a .pdf file:', error)
files[fileName] = toFile(
arrayBuffer,
fileName,
'application/' + extractFileExtension(fileName)
)
}
const hash = await getHash(arrayBuffer)
@ -428,8 +440,13 @@ export const VerifyPage = () => {
const marksByPage = groupMarksByFileNamePage(marks)
for (const [fileName, pdf] of Object.entries(files)) {
const pages = await addMarks(pdf.file, marksByPage[fileName])
const blob = await convertToPdfBlob(pages)
let blob: Blob
if ('pages' in pdf) {
const pages = await addMarks(pdf.file, marksByPage[fileName])
blob = await convertToPdfBlob(pages)
} else {
blob = new Blob([pdf], { type: pdf.type })
}
zip.file(`files/${fileName}`, blob)
}

2
src/types/file.ts
View File

@ -2,7 +2,7 @@ import { PdfFile } from './drawing.ts'
export interface CurrentUserFile {
id: number
pdfFile: PdfFile
pdfFile: PdfFile | File
filename: string
hash?: string
isHashValid: boolean

16
src/utils/file.ts
View File

@ -6,15 +6,23 @@ import { PdfFile } from '../types/drawing.ts'
const getZipWithFiles = async (
meta: Meta,
files: { [filename: string]: PdfFile }
files: { [filename: string]: PdfFile | File }
): Promise<JSZip> => {
const zip = new JSZip()
const marks = extractMarksFromSignedMeta(meta)
const marksByFileNamePage = groupMarksByFileNamePage(marks)
for (const [fileName, pdf] of Object.entries(files)) {
const pages = await addMarks(pdf.file, marksByFileNamePage[fileName])
const blob = await convertToPdfBlob(pages)
for (const [fileName, file] of Object.entries(files)) {
let blob: Blob
if ('pages' in file) {
// Handle PDF Files
const pages = await addMarks(file.file, marksByFileNamePage[fileName])
blob = await convertToPdfBlob(pages)
} else {
// Handle other files
blob = new Blob([file], { type: file.type })
}
zip.file(`files/${fileName}`, blob)
}

11
src/utils/pdf.ts
View File

@ -30,10 +30,15 @@ const FONT_TYPE: string = 'Arial'
* Converts a PDF ArrayBuffer to a generic PDF File
* @param arrayBuffer of a PDF
* @param fileName identifier of the pdf file
* @param type optional file type (defaults to pdf)
*/
const toFile = (arrayBuffer: ArrayBuffer, fileName: string): File => {
const blob = new Blob([arrayBuffer], { type: 'application/pdf' })
return new File([blob], fileName, { type: 'application/pdf' })
const toFile = (
arrayBuffer: ArrayBuffer,
fileName: string,
type: string = 'application/pdf'
): File => {
const blob = new Blob([arrayBuffer], { type })
return new File([blob], fileName, { type })
}
/**

2
src/utils/utils.ts
View File

@ -75,7 +75,7 @@ export const timeout = (ms: number = 60000) => {
* @param creatorFileHashes
*/
export const getCurrentUserFiles = (
files: { [filename: string]: PdfFile },
files: { [filename: string]: PdfFile | File },
fileHashes: { [key: string]: string | null },
creatorFileHashes: { [key: string]: string }
): CurrentUserFile[] => {