klemek/file-whizz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Klemek
2025-03-14 12:32:36 +01:00
parent 285b7b2a16
commit a6e152eb51
5 changed files with 166 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+3 -26
View File
@@ -1,30 +1,7 @@
# Vue-boilerplate # File-Whizz
*Minimal static Vue project* *Make that file buzzing through air*
<!-- TODO: 1. rename app (and tool URL) -->
### [Tool link](https://klemek.github.io/vue-boilerplate/)
## Use this template
<!-- TODO: 3. remove this part -->
```bash
git clone git@github.com/klemek/vue-boilerplate.git {PROJECT}
cd {PROJECT}
git remote rename origin template
git remote add origin {PROJECT REMOTE}
# everytime you want to update your fork
git fetch --all
git merge template/master
```
> Every task is indicated with a TODO
1. [ ] Rename app in [README.md](./README.md), [index.html](./index.html) and [package.json](./package.json)
2. [ ] Change app hue and saturation in [style.css](./style.css)
3. [ ] Remove this part and all TODO
### [Tool link](https://klemek.github.io/file-whizz/)
## Tips ## Tips
eslint.config.mjs
+4 -1
View File
@@ -22,11 +22,14 @@ export default [
"no-magic-numbers": "off", "no-magic-numbers": "off",
"sort-keys": "off", "sort-keys": "off",
"no-warning-comments": "off", "no-warning-comments": "off",
"no-inline-comments": "off", // TODO remove
"no-ternary": "off", "no-ternary": "off",
"one-var": "off", "one-var": "off",
"max-statements": ["warn", 50], "max-statements": ["warn", 200], // TODO remove
"max-lines-per-function": ["warn", 200], // TODO remove
"max-params": ["warn", 5], "max-params": ["warn", 5],
"max-lines": "off", "max-lines": "off",
"no-console": "off", // TODO remove
}, },
}, },
{ {
index.html
+17 -23
View File
@@ -3,14 +3,11 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<!-- TODO: 1. rename app -->
<title>File Whizz</title> <title>File Whizz</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="material-colors.css" /> <link rel="stylesheet" href="material-colors.css" />
<script src="https://unpkg.com/lucide@0"></script> <script src="https://unpkg.com/lucide@0"></script>
<script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script> <script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/streamsaver@2.0.3/StreamSaver.min.js"></script>
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
@@ -20,19 +17,12 @@
</script> </script>
<script type="module" src="main.js"></script> <script type="module" src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- card related --> <meta property="og:title" content="File Whizz">
<!-- <meta property="og:description" content="Make that file buzzing through air">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="https://.../preview_640x320.jpg">
<meta property="org:url" content="https://...">
-->
</head> </head>
<body> <body>
<main id="app" style="display: none"> <main id="app" style="display: none">
<!-- TODO: 1. rename app -->
<h1> <h1>
<i icon="file-volume-2"></i> <i icon="file-volume-2"></i>
File Whizz File Whizz
@@ -40,27 +30,31 @@
<br /> <br />
<div> <div>
<label>Local ID</label><br> <label>Local ID</label><br>
<input readonly :value="localId" /><br><br> <input readonly :value="localId" />
<br>
<br>
<template v-if="canConnect">
<label>Remote ID</label><br> <label>Remote ID</label><br>
<input v-model="remoteId" @change="connect"> <input v-model="remoteId" @change="onRemoteIdChange" :readonly="isConnected">
<br> <br>
<br> <br>
Initialized: <b>{{ peer ? 'OK' : '...'}}</b><br> </template>
Opened: <b>{{ localId ? 'OK' : '...'}}</b><br> <template v-if="canConnect && !downloading && !readyToDownload">
Connection: <b>{{ connection ? 'OK' : '...'}}</b><br> <input type="file" @change="onFileChange" :disabled="data" />
File data: <b>{{ data ? 'OK' : '...'}}</b> <br>
</template>
<template v-if="readyToDownload">
<input type="submit" @click.prevent="clientStartTransfer" value="Download" />
<br> <br>
<br> <br>
<input type="file" @change="fileChange" /> </template>
<br> <progress v-if="downloading" :value="downloadProgress" :max="downloadTotal"></progress>
<input type="submit" @click.prevent="start" :disabled="!data || !remoteId || !connection" />
</div> </div>
<br /> <br />
<small class="footer"> <small class="footer">
<i icon="at-sign"></i>&nbsp;<a href="https://github.com/klemek" target="_blank">klemek</a> <i icon="at-sign"></i>&nbsp;<a href="https://github.com/klemek" target="_blank">klemek</a>
- -
<!-- TODO: 1. rename app --> <i icon="github"></i>&nbsp;<a href="https://github.com/klemek/file-whizz" target="_blank">Repository</a>
<i icon="github"></i>&nbsp;<a href="https://github.com/klemek/vue-boilerplate" target="_blank">Repository</a>
- 2025 - 2025
</small> </small>
</main> </main>
main.js
+136 -63
View File
@@ -10,9 +10,14 @@ const utils = {
}, },
}); });
}, },
bufferCopy(src, startSrc, dst, startDst, size) {
const viewSrc = new Uint8Array(src, startSrc, size);
const dstSrc = new Uint8Array(dst, startDst, size);
dstSrc.set(viewSrc);
},
}; };
const MAX_CHUNK_SIZE = 1024 * 1024; // 1024 KB const MAX_CHUNK_SIZE = 10 * 1024; // 10 KB
const app = createApp({ const app = createApp({
data() { data() {
@@ -22,13 +27,37 @@ const app = createApp({
remoteId: null, remoteId: null,
connection: null, // TODO multiple connections connection: null, // TODO multiple connections
data: null, // TODO multiple file data: null, // TODO multiple file
fileStream: null, buffer: null,
fileName: null, fileName: null,
fileSize: null, fileSize: null,
t0: new Date(), t0: new Date(),
received: [],
downloading: false,
}; };
}, },
computed: {}, computed: {
canConnect() {
return this.peer !== null && this.localId !== null;
},
isConnected() {
return this.connection !== null;
},
readyToDownload() {
return this.buffer !== null && !this.downloading;
},
isServer() {
return this.data !== null;
},
isClient() {
return this.isConnected && !this.isServer;
},
downloadProgress() {
return this.received.length * MAX_CHUNK_SIZE;
},
downloadTotal() {
return this.fileSize ?? 0;
},
},
watch: {}, watch: {},
updated() { updated() {
utils.updateIcons(); utils.updateIcons();
@@ -44,13 +73,6 @@ const app = createApp({
showApp() { showApp() {
document.getElementById("app").setAttribute("style", ""); document.getElementById("app").setAttribute("style", "");
}, },
connect() {
if (this.remoteId) {
this.initConnection(
this.peer.connect(this.remoteId, { reliable: true }),
);
}
},
initPeer() { initPeer() {
this.peer = new Peer({ this.peer = new Peer({
debug: 3, debug: 3,
@@ -82,6 +104,7 @@ const app = createApp({
this.connection.on("close", this.connClose); this.connection.on("close", this.connClose);
this.connection.on("error", this.connError); this.connection.on("error", this.connError);
this.connection.on("data", this.connData); this.connection.on("data", this.connData);
this.serverInfo();
}); });
}, },
peerOpen(id) { peerOpen(id) {
@@ -96,43 +119,114 @@ const app = createApp({
peerClose() { peerClose() {
console.log("peerClose"); console.log("peerClose");
this.peer = null; this.peer = null;
// setTimeout(this.initPeer);
}, },
peerDisconnected() { peerDisconnected() {
console.log("peerDisconnected"); console.log("peerDisconnected");
// this.peer.reconnect(); this.peer.reconnect();
}, },
peerError(err) { peerError(err) {
console.log("peerError", err); console.log("peerError", err);
// TODO handle error // TODO handle error
throw err;
},
createStream() {
this.buffer = new ArrayBuffer(this.fileSize);
},
serverInfo() {
this.connection.send({
type: "server-info",
fileName: this.data ? this.fileName : null,
fileSize: this.data ? this.fileSize : null,
});
},
serverSendData(index) {
const to = Math.min(this.fileSize, index + MAX_CHUNK_SIZE);
this.connection.send({
type: "server-chunk",
index,
bytes: this.data.slice(index, to),
});
},
serverDone() {
this.connection.send({
type: "server-done",
});
},
clientStartTransfer() {
this.downloading = true;
this.connection.send({
type: "client-start-transfer",
});
},
clientSeek() {
const indexes = [];
for (let index = 0; index < this.fileSize; index += MAX_CHUNK_SIZE) {
if (!this.received.includes(index)) {
indexes.push(index);
}
}
if (indexes.length) {
this.connection.send({
type: "client-seek",
indexes,
});
return true;
}
return false;
},
clientDone() {
this.connection.send({
type: "client-done",
});
const blob = new Blob([this.buffer], {
type: "application/octet-stream",
});
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = this.fileName;
link.click();
}, },
connData(data) { connData(data) {
console.log("connData"); console.log("connData");
console.log(data.type); console.log(data.type);
switch (data.type) { switch (data.type) {
case "start": case "server-info":
this.t0 = new Date();
this.fileName = data.fileName; this.fileName = data.fileName;
this.fileSize = data.fileSize; this.fileSize = data.fileSize;
this.fileStream = streamSaver if (this.fileName !== null) {
.createWriteStream(this.fileName, { this.createStream();
size: this.fileSize,
})
.getWriter();
break;
case "chunk":
if (this.fileStream) {
this.fileStream.write(new Uint8Array(data.bytes));
} }
break; break;
case "end": case "server-chunk":
if (this.fileStream) { utils.bufferCopy(
this.fileStream.close(); data.bytes,
0,
this.buffer,
data.index,
data.bytes.length,
);
this.received.push(data.index);
break;
case "server-done":
if (!this.clientSeek()) {
this.clientDone();
} }
console.log(new Date() - this.t0); break;
console.log(this.fileSize / (new Date() - this.t0)); case "client-start-transfer":
for (let index = 0; index < this.fileSize; index += MAX_CHUNK_SIZE) {
this.serverSendData(index);
}
this.serverDone();
break;
case "client-seek":
data.indexes.forEach(this.serverSendData);
this.serverDone();
break;
case "client-done":
this.connection.close();
break; break;
default: default:
console.error("Invalid data type");
break; break;
} }
}, },
@@ -144,8 +238,16 @@ const app = createApp({
connError(err) { connError(err) {
console.log("connError", err); console.log("connError", err);
// TODO handle error // TODO handle error
throw err;
}, },
fileChange(event) { onRemoteIdChange() {
if (this.remoteId) {
this.initConnection(
this.peer.connect(this.remoteId, { reliable: true }),
);
}
},
onFileChange(event) {
console.log(event.target.files[0]); console.log(event.target.files[0]);
const file = event.target.files[0]; // TODO multiple files const file = event.target.files[0]; // TODO multiple files
if (!file) { if (!file) {
@@ -157,44 +259,15 @@ const app = createApp({
const reader = new FileReader(); const reader = new FileReader();
reader.onload = () => { reader.onload = () => {
this.data = reader.result; this.data = reader.result;
if (this.isConnected) {
this.serverInfo();
}
}; };
reader.onerror = (err) => { reader.onerror = () => {
console.error(err); // TODO handle file reading error
};
reader.onloadstart = () => {
console.log("reading");
};
reader.onloadend = () => {
console.log("read");
}; };
reader.readAsArrayBuffer(file); // TODO check ArrayBuffer.prototype.maxByteLength reader.readAsArrayBuffer(file); // TODO check ArrayBuffer.prototype.maxByteLength
}, },
start() {
this.connection.send({
type: "start",
fileName: this.fileName,
fileSize: this.fileSize,
});
console.log("start");
for (
let index = 0;
index < this.data.byteLength;
index += MAX_CHUNK_SIZE
) {
console.log("chunk");
this.connection.send({
type: "chunk",
bytes: this.data.slice(
index * MAX_CHUNK_SIZE,
Math.min(this.data.byteLength, (index + 1) * MAX_CHUNK_SIZE),
),
});
}
console.log("end");
this.connection.send({
type: "end",
});
},
initApp() { initApp() {
this.initPeer(); this.initPeer();
}, },
style.css
+3 -2
View File
@@ -85,7 +85,7 @@ CUSTOM STYLE
:root { :root {
/* https://materialui.co/colors/ */ /* https://materialui.co/colors/ */
/* TODO: 2. change hue and saturation */
--hue-primary: 65.52; --hue-primary: 65.52;
--sat-primary: 20%; --sat-primary: 20%;
--background: hsl(var(--hue-primary), var(--sat-primary), 96.08%); --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
@@ -213,6 +213,7 @@ h6 .lucide {
opacity: 50%; opacity: 50%;
} }
input { input,
progress {
width: 100%; width: 100%;
} }