mirror of https://github.com/kern/filepizza
making progress
Alex Kern
1 year ago
parent
6739d187e2
commit
bebf6c319a
@ -0,0 +1,6 @@
|
||||
- Use TypeScript.
|
||||
- Use function syntax for defining React components. Define the prop types inline.
|
||||
- If a value is exported, it should be exported on the same line as its definition.
|
||||
- Always define the return type of a function or component.
|
||||
- Use Tailwind CSS for styling.
|
||||
- Don't use trailing semicolons.
|
||||
@ -0,0 +1,11 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function ReturnHome(): JSX.Element {
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<Link href="/" className="text-stone-500 hover:underline">
|
||||
Serve up a fresh slice »
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,232 @@
|
||||
import { useState, useCallback, useRef, useEffect } from 'react'
|
||||
import { useWebRTC } from '../components/WebRTCProvider'
|
||||
import { z } from 'zod'
|
||||
import { ChunkMessage, decodeMessage, Message, MessageType } from '../messages'
|
||||
import { DataConnection } from 'peerjs'
|
||||
import {
|
||||
streamDownloadSingleFile,
|
||||
streamDownloadMultipleFiles,
|
||||
} from '../utils/download'
|
||||
import {
|
||||
browserName,
|
||||
browserVersion,
|
||||
osName,
|
||||
osVersion,
|
||||
mobileVendor,
|
||||
mobileModel,
|
||||
} from 'react-device-detect'
|
||||
|
||||
const cleanErrorMessage = (errorMessage: string): string =>
|
||||
errorMessage.startsWith('Could not connect to peer')
|
||||
? 'Could not connect to the uploader. Did they close their browser?'
|
||||
: errorMessage
|
||||
|
||||
const getZipFilename = (): string => `filepizza-download-${Date.now()}.zip`
|
||||
|
||||
export function useDownloader(uploaderPeerID: string): {
|
||||
filesInfo: Array<{ fileName: string; size: number; type: string }> | null
|
||||
isConnected: boolean
|
||||
isPasswordRequired: boolean
|
||||
isDownloading: boolean
|
||||
isDone: boolean
|
||||
errorMessage: string | null
|
||||
submitPassword: (password: string) => void
|
||||
startDownload: () => void
|
||||
stopDownload: () => void
|
||||
totalSize: number
|
||||
bytesDownloaded: number
|
||||
} {
|
||||
const peer = useWebRTC()
|
||||
const [password, setPassword] = useState('')
|
||||
const [dataConnection, setDataConnection] = useState<DataConnection | null>(
|
||||
null,
|
||||
)
|
||||
const [filesInfo, setFilesInfo] = useState<Array<{
|
||||
fileName: string
|
||||
size: number
|
||||
type: string
|
||||
}> | null>(null)
|
||||
const processChunk = useRef<
|
||||
((message: z.infer<typeof ChunkMessage>) => void) | null
|
||||
>(null)
|
||||
const [isConnected, setIsConnected] = useState(false)
|
||||
const [isDownloading, setDownloading] = useState(false)
|
||||
const [isDone, setDone] = useState(false)
|
||||
const [bytesDownloaded, setBytesDownloaded] = useState(0)
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null)
|
||||
const [isPasswordRequired, setIsPasswordRequired] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const conn = peer.connect(uploaderPeerID, { reliable: true })
|
||||
setDataConnection(conn)
|
||||
|
||||
const handleOpen = () => {
|
||||
setIsConnected(true)
|
||||
conn.send({
|
||||
type: MessageType.RequestInfo,
|
||||
browserName,
|
||||
browserVersion,
|
||||
osName,
|
||||
osVersion,
|
||||
mobileVendor,
|
||||
mobileModel,
|
||||
} as z.infer<typeof Message>)
|
||||
}
|
||||
|
||||
const handleData = (data: unknown) => {
|
||||
try {
|
||||
const message = decodeMessage(data)
|
||||
switch (message.type) {
|
||||
case MessageType.PasswordRequired:
|
||||
setIsPasswordRequired(true)
|
||||
break
|
||||
case MessageType.Info:
|
||||
setFilesInfo(message.files)
|
||||
break
|
||||
case MessageType.Chunk:
|
||||
processChunk.current?.(message)
|
||||
break
|
||||
case MessageType.Error:
|
||||
console.error(message.error)
|
||||
setErrorMessage(message.error)
|
||||
conn.close()
|
||||
break
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setDataConnection(null)
|
||||
setIsConnected(false)
|
||||
setDownloading(false)
|
||||
}
|
||||
|
||||
const handleError = (err: Error) => {
|
||||
console.error(err)
|
||||
setErrorMessage(cleanErrorMessage(err.message))
|
||||
if (conn.open) conn.close()
|
||||
else handleClose()
|
||||
}
|
||||
|
||||
conn.on('open', handleOpen)
|
||||
conn.on('data', handleData)
|
||||
conn.on('error', handleError)
|
||||
conn.on('close', handleClose)
|
||||
peer.on('error', handleError)
|
||||
|
||||
return () => {
|
||||
if (conn.open) conn.close()
|
||||
conn.off('open', handleOpen)
|
||||
conn.off('data', handleData)
|
||||
conn.off('error', handleError)
|
||||
conn.off('close', handleClose)
|
||||
peer.off('error', handleError)
|
||||
}
|
||||
}, [peer, password, uploaderPeerID])
|
||||
|
||||
const submitPassword = useCallback(
|
||||
(pass: string) => {
|
||||
if (!dataConnection) return
|
||||
dataConnection.send({
|
||||
type: MessageType.UsePassword,
|
||||
password: pass,
|
||||
} as z.infer<typeof Message>)
|
||||
},
|
||||
[dataConnection, password],
|
||||
)
|
||||
|
||||
const startDownload = useCallback(() => {
|
||||
if (!filesInfo || !dataConnection) return
|
||||
setDownloading(true)
|
||||
|
||||
const fileStreamByPath: Record<
|
||||
string,
|
||||
{
|
||||
stream: ReadableStream<Uint8Array>
|
||||
enqueue: (chunk: Uint8Array) => void
|
||||
close: () => void
|
||||
}
|
||||
> = {}
|
||||
const fileStreams = filesInfo.map((info) => {
|
||||
let enqueue: ((chunk: Uint8Array) => void) | null = null
|
||||
let close: (() => void) | null = null
|
||||
const stream = new ReadableStream<Uint8Array>({
|
||||
start(ctrl) {
|
||||
enqueue = (chunk: Uint8Array) => ctrl.enqueue(chunk)
|
||||
close = () => ctrl.close()
|
||||
},
|
||||
})
|
||||
if (!enqueue || !close)
|
||||
throw new Error('Failed to initialize stream controllers')
|
||||
fileStreamByPath[info.fileName] = { stream, enqueue, close }
|
||||
return stream
|
||||
})
|
||||
|
||||
let nextFileIndex = 0
|
||||
const startNextFileOrFinish = () => {
|
||||
if (nextFileIndex >= filesInfo.length) return
|
||||
dataConnection.send({
|
||||
type: MessageType.Start,
|
||||
fileName: filesInfo[nextFileIndex].fileName,
|
||||
offset: 0,
|
||||
} as z.infer<typeof Message>)
|
||||
nextFileIndex++
|
||||
}
|
||||
|
||||
processChunk.current = (message: z.infer<typeof ChunkMessage>) => {
|
||||
const fileStream = fileStreamByPath[message.fileName]
|
||||
if (!fileStream) {
|
||||
console.error('no stream found for ' + message.fileName)
|
||||
return
|
||||
}
|
||||
setBytesDownloaded((bd) => bd + (message.bytes as ArrayBuffer).byteLength)
|
||||
fileStream.enqueue(new Uint8Array(message.bytes as ArrayBuffer))
|
||||
if (message.final) {
|
||||
fileStream.close()
|
||||
startNextFileOrFinish()
|
||||
}
|
||||
}
|
||||
|
||||
const downloads = filesInfo.map((info, i) => ({
|
||||
name: info.fileName.replace(/^\//, ''),
|
||||
size: info.size,
|
||||
stream: () => fileStreams[i],
|
||||
}))
|
||||
|
||||
const downloadPromise =
|
||||
downloads.length > 1
|
||||
? streamDownloadMultipleFiles(downloads, getZipFilename())
|
||||
: streamDownloadSingleFile(downloads[0], downloads[0].name)
|
||||
|
||||
downloadPromise
|
||||
.then(() => {
|
||||
dataConnection.send({ type: MessageType.Done } as z.infer<
|
||||
typeof Message
|
||||
>)
|
||||
setDone(true)
|
||||
})
|
||||
.catch(console.error)
|
||||
|
||||
startNextFileOrFinish()
|
||||
}, [dataConnection, filesInfo])
|
||||
|
||||
const stopDownload = useCallback(() => {
|
||||
// TODO(@kern): Implement me
|
||||
}, [])
|
||||
|
||||
return {
|
||||
filesInfo,
|
||||
isConnected,
|
||||
isPasswordRequired,
|
||||
isDownloading,
|
||||
isDone,
|
||||
errorMessage,
|
||||
submitPassword,
|
||||
startDownload,
|
||||
stopDownload,
|
||||
totalSize: filesInfo?.reduce((acc, info) => acc + info.size, 0) ?? 0,
|
||||
bytesDownloaded,
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue