mirror of https://github.com/kern/filepizza
checkpoint working
Alex Kern
1 year ago
parent
d8b0ec3cb9
commit
44f7fdeb08
@ -0,0 +1,54 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { UploaderConnection, UploaderConnectionStatus } from '../types'
|
||||||
|
import ProgressBar from './ProgressBar'
|
||||||
|
|
||||||
|
export function ConnectionListItem({
|
||||||
|
conn,
|
||||||
|
}: {
|
||||||
|
conn: UploaderConnection
|
||||||
|
}): JSX.Element {
|
||||||
|
const getStatusColor = (status: UploaderConnectionStatus) => {
|
||||||
|
switch (status) {
|
||||||
|
case UploaderConnectionStatus.Uploading:
|
||||||
|
return 'bg-green-500'
|
||||||
|
case UploaderConnectionStatus.Paused:
|
||||||
|
return 'bg-yellow-500'
|
||||||
|
case UploaderConnectionStatus.Done:
|
||||||
|
return 'bg-blue-500'
|
||||||
|
case UploaderConnectionStatus.Closed:
|
||||||
|
return 'bg-red-500'
|
||||||
|
default:
|
||||||
|
return 'bg-gray-500'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full mt-4">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{conn.browserName && conn.browserVersion ? (
|
||||||
|
<>
|
||||||
|
{conn.browserName}{' '}
|
||||||
|
<span className="text-stone-400">v{conn.browserVersion}</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Downloader'
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`px-1.5 py-0.5 text-white rounded-md transition-colors duration-200 font-medium text-[10px] ${getStatusColor(
|
||||||
|
conn.status,
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
{conn.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ProgressBar
|
||||||
|
value={
|
||||||
|
(conn.completedFiles + conn.currentFileProgress) / conn.totalFiles
|
||||||
|
}
|
||||||
|
max={1}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import useClipboard from '../hooks/useClipboard'
|
||||||
|
import InputLabel from './InputLabel'
|
||||||
|
|
||||||
|
export function CopyableInput({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
}: {
|
||||||
|
label: string
|
||||||
|
value: string
|
||||||
|
}): JSX.Element {
|
||||||
|
const { hasCopied, onCopy } = useClipboard(value)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col w-full">
|
||||||
|
<InputLabel>{label}</InputLabel>
|
||||||
|
<div className="flex w-full">
|
||||||
|
<input
|
||||||
|
className="flex-grow px-3 py-2 text-xs border border-r-0 rounded-l"
|
||||||
|
value={value}
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="px-4 py-2 text-sm text-stone-700 bg-stone-100 hover:bg-stone-200 rounded-r border-t border-r border-b"
|
||||||
|
onClick={onCopy}
|
||||||
|
>
|
||||||
|
{hasCopied ? 'Copied' : 'Copy'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
|
||||||
|
function generateURL(slug: string): string {
|
||||||
|
const hostPrefix =
|
||||||
|
window.location.protocol +
|
||||||
|
'//' +
|
||||||
|
window.location.hostname +
|
||||||
|
(['80', '443'].includes(window.location.port)
|
||||||
|
? ''
|
||||||
|
: ':' + window.location.port)
|
||||||
|
return `${hostPrefix}/download/${slug}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUploaderChannel(uploaderPeerID: string): {
|
||||||
|
loading: boolean
|
||||||
|
error: Error | null
|
||||||
|
longSlug: string | undefined
|
||||||
|
shortSlug: string | undefined
|
||||||
|
longURL: string | undefined
|
||||||
|
shortURL: string | undefined
|
||||||
|
} {
|
||||||
|
const { isLoading, error, data } = useQuery({
|
||||||
|
queryKey: ['uploaderChannel', uploaderPeerID],
|
||||||
|
queryFn: async () => {
|
||||||
|
const response = await fetch('/api/create', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ uploaderPeerID }),
|
||||||
|
})
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not ok')
|
||||||
|
}
|
||||||
|
return response.json()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const longURL = data?.longSlug ? generateURL(data.longSlug) : undefined
|
||||||
|
const shortURL = data?.shortSlug ? generateURL(data.shortSlug) : undefined
|
||||||
|
|
||||||
|
return {
|
||||||
|
loading: isLoading,
|
||||||
|
error: error as Error | null,
|
||||||
|
longSlug: data?.longSlug,
|
||||||
|
shortSlug: data?.shortSlug,
|
||||||
|
longURL,
|
||||||
|
shortURL,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,241 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import Peer, { DataConnection } from 'peerjs'
|
||||||
|
import {
|
||||||
|
UploadedFile,
|
||||||
|
UploaderConnection,
|
||||||
|
UploaderConnectionStatus,
|
||||||
|
} from '../types'
|
||||||
|
import { decodeMessage, Message, MessageType } from '../messages'
|
||||||
|
import { validateOffset } from '../utils/fs'
|
||||||
|
import * as t from 'io-ts'
|
||||||
|
|
||||||
|
// TODO(@kern): Test for better values
|
||||||
|
const MAX_CHUNK_SIZE = 10 * 1024 * 1024 // 10 Mi
|
||||||
|
|
||||||
|
export function useUploaderConnections(
|
||||||
|
peer: Peer,
|
||||||
|
files: UploadedFile[],
|
||||||
|
password: string,
|
||||||
|
): Array<UploaderConnection> {
|
||||||
|
const [connections, setConnections] = useState<Array<UploaderConnection>>([])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const listener = (conn: DataConnection) => {
|
||||||
|
let sendChunkTimeout: NodeJS.Timeout | null = null
|
||||||
|
const newConn = {
|
||||||
|
status: UploaderConnectionStatus.Pending,
|
||||||
|
dataConnection: conn,
|
||||||
|
completedFiles: 0,
|
||||||
|
totalFiles: files.length,
|
||||||
|
currentFileProgress: 0,
|
||||||
|
}
|
||||||
|
|
||||||
|
setConnections((conns) => [newConn, ...conns])
|
||||||
|
const updateConnection = (
|
||||||
|
fn: (c: UploaderConnection) => UploaderConnection,
|
||||||
|
) => {
|
||||||
|
setConnections((conns) =>
|
||||||
|
conns.map((c) => (c.dataConnection === conn ? fn(c) : c)),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
conn.on('data', (data): void => {
|
||||||
|
try {
|
||||||
|
const message = decodeMessage(data)
|
||||||
|
console.log('message', message)
|
||||||
|
switch (message.type) {
|
||||||
|
case MessageType.RequestInfo: {
|
||||||
|
if (message.password !== password) {
|
||||||
|
console.log('invalid password')
|
||||||
|
const request: t.TypeOf<typeof Message> = {
|
||||||
|
type: MessageType.Error,
|
||||||
|
error: 'Invalid password',
|
||||||
|
}
|
||||||
|
|
||||||
|
conn.send(request)
|
||||||
|
|
||||||
|
updateConnection((draft) => {
|
||||||
|
if (draft.status !== UploaderConnectionStatus.Pending) {
|
||||||
|
return draft
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...draft,
|
||||||
|
status: UploaderConnectionStatus.InvalidPassword,
|
||||||
|
browserName: message.browserName,
|
||||||
|
browserVersion: message.browserVersion,
|
||||||
|
osName: message.osName,
|
||||||
|
osVersion: message.osVersion,
|
||||||
|
mobileVendor: message.mobileVendor,
|
||||||
|
mobileModel: message.mobileModel,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('valid password')
|
||||||
|
|
||||||
|
updateConnection((draft) => {
|
||||||
|
if (draft.status !== UploaderConnectionStatus.Pending) {
|
||||||
|
return draft
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...draft,
|
||||||
|
status: UploaderConnectionStatus.Paused,
|
||||||
|
browserName: message.browserName,
|
||||||
|
browserVersion: message.browserVersion,
|
||||||
|
osName: message.osName,
|
||||||
|
osVersion: message.osVersion,
|
||||||
|
mobileVendor: message.mobileVendor,
|
||||||
|
mobileModel: message.mobileModel,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const fileInfo = files.map((f) => {
|
||||||
|
return {
|
||||||
|
fullPath: f.fullPath ?? f.name ?? '',
|
||||||
|
size: f.size,
|
||||||
|
type: f.type,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const request: t.TypeOf<typeof Message> = {
|
||||||
|
type: MessageType.Info,
|
||||||
|
files: fileInfo,
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('sending info', request)
|
||||||
|
conn.send(request)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case MessageType.Start: {
|
||||||
|
const fullPath = message.fullPath
|
||||||
|
let offset = message.offset
|
||||||
|
const file = validateOffset(files, fullPath, offset)
|
||||||
|
updateConnection((draft) => {
|
||||||
|
if (draft.status !== UploaderConnectionStatus.Paused) {
|
||||||
|
return draft
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...draft,
|
||||||
|
status: UploaderConnectionStatus.Uploading,
|
||||||
|
uploadingFullPath: fullPath,
|
||||||
|
uploadingOffset: offset,
|
||||||
|
currentFileProgress: offset / file.size,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const sendNextChunk = () => {
|
||||||
|
const end = Math.min(file.size, offset + MAX_CHUNK_SIZE)
|
||||||
|
const chunkSize = end - offset
|
||||||
|
const final = chunkSize < MAX_CHUNK_SIZE
|
||||||
|
const request: t.TypeOf<typeof Message> = {
|
||||||
|
type: MessageType.Chunk,
|
||||||
|
fullPath,
|
||||||
|
offset,
|
||||||
|
bytes: file.slice(offset, end),
|
||||||
|
final,
|
||||||
|
}
|
||||||
|
conn.send(request)
|
||||||
|
|
||||||
|
updateConnection((draft) => {
|
||||||
|
offset = end
|
||||||
|
if (final) {
|
||||||
|
return {
|
||||||
|
...draft,
|
||||||
|
status: UploaderConnectionStatus.Paused,
|
||||||
|
completedFiles: draft.completedFiles + 1,
|
||||||
|
currentFileProgress: 0,
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
sendChunkTimeout = setTimeout(() => {
|
||||||
|
sendNextChunk()
|
||||||
|
}, 0)
|
||||||
|
return {
|
||||||
|
...draft,
|
||||||
|
uploadingOffset: end,
|
||||||
|
currentFileProgress: end / file.size,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
sendNextChunk()
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case MessageType.Pause: {
|
||||||
|
updateConnection((draft) => {
|
||||||
|
if (draft.status !== UploaderConnectionStatus.Uploading) {
|
||||||
|
return draft
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sendChunkTimeout) {
|
||||||
|
clearTimeout(sendChunkTimeout)
|
||||||
|
sendChunkTimeout = null
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...draft,
|
||||||
|
status: UploaderConnectionStatus.Paused,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case MessageType.Done: {
|
||||||
|
updateConnection((draft) => {
|
||||||
|
if (draft.status !== UploaderConnectionStatus.Paused) {
|
||||||
|
return draft
|
||||||
|
}
|
||||||
|
|
||||||
|
conn.close()
|
||||||
|
return {
|
||||||
|
...draft,
|
||||||
|
status: UploaderConnectionStatus.Done,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
conn.on('close', (): void => {
|
||||||
|
if (sendChunkTimeout) {
|
||||||
|
clearTimeout(sendChunkTimeout)
|
||||||
|
}
|
||||||
|
|
||||||
|
updateConnection((draft) => {
|
||||||
|
if (
|
||||||
|
[
|
||||||
|
UploaderConnectionStatus.InvalidPassword,
|
||||||
|
UploaderConnectionStatus.Done,
|
||||||
|
].includes(draft.status)
|
||||||
|
) {
|
||||||
|
return draft
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...draft,
|
||||||
|
status: UploaderConnectionStatus.Closed,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
peer.on('connection', listener)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
peer.off('connection')
|
||||||
|
}
|
||||||
|
}, [peer, files, password])
|
||||||
|
|
||||||
|
return connections
|
||||||
|
}
|
||||||
@ -1 +1,28 @@
|
|||||||
export type UploadedFile = File & { fullPath: string }
|
import type { DataConnection } from 'peerjs'
|
||||||
|
|
||||||
|
export type UploadedFile = File & { fullPath?: string; name?: string }
|
||||||
|
|
||||||
|
export enum UploaderConnectionStatus {
|
||||||
|
Pending = 'PENDING',
|
||||||
|
Paused = 'PAUSED',
|
||||||
|
Uploading = 'UPLOADING',
|
||||||
|
Done = 'DONE',
|
||||||
|
InvalidPassword = 'INVALID_PASSWORD',
|
||||||
|
Closed = 'CLOSED',
|
||||||
|
}
|
||||||
|
|
||||||
|
export type UploaderConnection = {
|
||||||
|
status: UploaderConnectionStatus
|
||||||
|
dataConnection: DataConnection
|
||||||
|
browserName?: string
|
||||||
|
browserVersion?: string
|
||||||
|
osName?: string
|
||||||
|
osVersion?: string
|
||||||
|
mobileVendor?: string
|
||||||
|
mobileModel?: string
|
||||||
|
uploadingFullPath?: string
|
||||||
|
uploadingOffset?: number
|
||||||
|
completedFiles: number
|
||||||
|
totalFiles: number
|
||||||
|
currentFileProgress: number
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { UploadedFile } from '../types'
|
||||||
|
|
||||||
|
export function validateOffset(
|
||||||
|
files: UploadedFile[],
|
||||||
|
fullPath: string,
|
||||||
|
offset: number,
|
||||||
|
): UploadedFile {
|
||||||
|
const validFile = files.find(
|
||||||
|
(file) =>
|
||||||
|
(file.fullPath === fullPath || file.name === fullPath) &&
|
||||||
|
offset <= file.size,
|
||||||
|
)
|
||||||
|
debugger
|
||||||
|
if (!validFile) {
|
||||||
|
throw new Error('invalid file offset')
|
||||||
|
}
|
||||||
|
return validFile
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue