feat/e2e-w-playwright
Alex Kern 5 months ago
parent 31bf09cd5d
commit 7cf7763193
No known key found for this signature in database
GPG Key ID: EF051FACCACBEE25

@ -61,8 +61,8 @@ export function ConnectionListItem({
</div> </div>
<ProgressBar <ProgressBar
value={ value={
conn.completedFiles === conn.totalFiles conn.completedFiles === conn.totalFiles
? 1 ? 1
: (conn.completedFiles + conn.currentFileProgress) / conn.totalFiles : (conn.completedFiles + conn.currentFileProgress) / conn.totalFiles
} }
max={1} max={1}

@ -11,7 +11,10 @@ export default function ProgressBar({
const isComplete = value === max const isComplete = value === max
return ( return (
<div id="progress-bar" className="w-full h-12 bg-stone-200 dark:bg-stone-700 rounded-md overflow-hidden relative shadow-sm"> <div
id="progress-bar"
className="w-full h-12 bg-stone-200 dark:bg-stone-700 rounded-md overflow-hidden relative shadow-sm"
>
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<span className="text-black font-bold">{Math.round(percentage)}%</span> <span className="text-black font-bold">{Math.round(percentage)}%</span>
</div> </div>
@ -25,7 +28,10 @@ export default function ProgressBar({
style={{ width: `${percentage}%` }} style={{ width: `${percentage}%` }}
/> />
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<span id="progress-percentage" className="text-white font-bold text-shadow"> <span
id="progress-percentage"
className="text-white font-bold text-shadow"
>
{Math.round(percentage)}% {Math.round(percentage)}%
</span> </span>
</div> </div>

@ -208,7 +208,7 @@ export function useDownloader(uploaderPeerID: string): {
console.error('[Downloader] no stream found for', message.fileName) console.error('[Downloader] no stream found for', message.fileName)
return return
} }
// Track chunks for e2e testing // Track chunks for e2e testing
if (!chunkCountByFile[message.fileName]) { if (!chunkCountByFile[message.fileName]) {
chunkCountByFile[message.fileName] = 0 chunkCountByFile[message.fileName] = 0
@ -217,11 +217,11 @@ export function useDownloader(uploaderPeerID: string): {
console.log( console.log(
`[Downloader] received chunk ${chunkCountByFile[message.fileName]} for ${message.fileName} (${message.offset}-${message.offset + (message.bytes as ArrayBuffer).byteLength}) final=${message.final}`, `[Downloader] received chunk ${chunkCountByFile[message.fileName]} for ${message.fileName} (${message.offset}-${message.offset + (message.bytes as ArrayBuffer).byteLength}) final=${message.final}`,
) )
const chunkSize = (message.bytes as ArrayBuffer).byteLength const chunkSize = (message.bytes as ArrayBuffer).byteLength
setBytesDownloaded((bd) => bd + chunkSize) setBytesDownloaded((bd) => bd + chunkSize)
fileStream.enqueue(new Uint8Array(message.bytes as ArrayBuffer)) fileStream.enqueue(new Uint8Array(message.bytes as ArrayBuffer))
// Send acknowledgment to uploader // Send acknowledgment to uploader
const ackMessage: Message = { const ackMessage: Message = {
type: MessageType.ChunkAck, type: MessageType.ChunkAck,
@ -230,10 +230,14 @@ export function useDownloader(uploaderPeerID: string): {
bytesReceived: chunkSize, bytesReceived: chunkSize,
} }
dataConnection.send(ackMessage) dataConnection.send(ackMessage)
console.log(`[Downloader] sent ack for chunk ${chunkCountByFile[message.fileName]} (${message.offset}, ${chunkSize} bytes)`) console.log(
`[Downloader] sent ack for chunk ${chunkCountByFile[message.fileName]} (${message.offset}, ${chunkSize} bytes)`,
)
if (message.final) { if (message.final) {
console.log(`[Downloader] finished receiving ${message.fileName} after ${chunkCountByFile[message.fileName]} chunks`) console.log(
`[Downloader] finished receiving ${message.fileName} after ${chunkCountByFile[message.fileName]} chunks`,
)
fileStream.close() fileStream.close()
startNextFileOrFinish() startNextFileOrFinish()
} }

@ -5,7 +5,12 @@ import {
UploaderConnection, UploaderConnection,
UploaderConnectionStatus, UploaderConnectionStatus,
} from '../types' } from '../types'
import { decodeMessage, Message, MessageType, ChunkAckMessage } from '../messages' import {
decodeMessage,
Message,
MessageType,
ChunkAckMessage,
} from '../messages'
import { z } from 'zod' import { z } from 'zod'
import { getFileName } from '../fs' import { getFileName } from '../fs'
import { setRotating } from './useRotatingSpinner' import { setRotating } from './useRotatingSpinner'
@ -331,13 +336,15 @@ export function useUploaderConnections(
'bytes', 'bytes',
ackMessage.bytesReceived, ackMessage.bytesReceived,
) )
updateConnection((draft) => { updateConnection((draft) => {
const currentAcked = draft.acknowledgedBytes || 0 const currentAcked = draft.acknowledgedBytes || 0
const newAcked = currentAcked + ackMessage.bytesReceived const newAcked = currentAcked + ackMessage.bytesReceived
// Find the file to calculate progress // Find the file to calculate progress
const file = files.find(f => getFileName(f) === ackMessage.fileName) const file = files.find(
(f) => getFileName(f) === ackMessage.fileName,
)
if (file) { if (file) {
const acknowledgedProgress = newAcked / file.size const acknowledgedProgress = newAcked / file.size
return { return {
@ -346,7 +353,7 @@ export function useUploaderConnections(
currentFileProgress: acknowledgedProgress, currentFileProgress: acknowledgedProgress,
} }
} }
return { return {
...draft, ...draft,
acknowledgedBytes: newAcked, acknowledgedBytes: newAcked,

Loading…
Cancel
Save