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
*Minimal static Vue project*
<!-- 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
# File-Whizz
*Make that file buzzing through air*
### [Tool link](https://klemek.github.io/file-whizz/)
## Tips
eslint.config.mjs
+4 -1
View File
@@ -22,11 +22,14 @@ export default [
"no-magic-numbers": "off",
"sort-keys": "off",
"no-warning-comments": "off",
"no-inline-comments": "off", // TODO remove
"no-ternary": "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-lines": "off",
"no-console": "off", // TODO remove
},
},
{
index.html
+17 -23
View File
@@ -3,14 +3,11 @@
<head>
<meta charset="UTF-8" />
<!-- TODO: 1. rename app -->
<title>File Whizz</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="material-colors.css" />
<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://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">
{
"imports": {
@@ -20,19 +17,12 @@
</script>
<script type="module" src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- card related -->
<!--
<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://...">
-->
<meta property="og:title" content="File Whizz">
<meta property="og:description" content="Make that file buzzing through air">
</head>
<body>
<main id="app" style="display: none">
<!-- TODO: 1. rename app -->
<h1>
<i icon="file-volume-2"></i>
File Whizz
@@ -40,27 +30,31 @@
<br />
<div>
<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>
<input v-model="remoteId" @change="connect">
<input v-model="remoteId" @change="onRemoteIdChange" :readonly="isConnected">
<br>
<br>
Initialized: <b>{{ peer ? 'OK' : '...'}}</b><br>
Opened: <b>{{ localId ? 'OK' : '...'}}</b><br>
Connection: <b>{{ connection ? 'OK' : '...'}}</b><br>
File data: <b>{{ data ? 'OK' : '...'}}</b>
</template>
<template v-if="canConnect && !downloading && !readyToDownload">
<input type="file" @change="onFileChange" :disabled="data" />
<br>
</template>
<template v-if="readyToDownload">
<input type="submit" @click.prevent="clientStartTransfer" value="Download" />
<br>
<br>
<input type="file" @change="fileChange" />
<br>
<input type="submit" @click.prevent="start" :disabled="!data || !remoteId || !connection" />
</template>
<progress v-if="downloading" :value="downloadProgress" :max="downloadTotal"></progress>
</div>
<br />
<small class="footer">
<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/vue-boilerplate" target="_blank">Repository</a>
<i icon="github"></i>&nbsp;<a href="https://github.com/klemek/file-whizz" target="_blank">Repository</a>
- 2025
</small>
</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({
data() {
@@ -22,13 +27,37 @@ const app = createApp({
remoteId: null,
connection: null, // TODO multiple connections
data: null, // TODO multiple file
fileStream: null,
buffer: null,
fileName: null,
fileSize: null,
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: {},
updated() {
utils.updateIcons();
@@ -44,13 +73,6 @@ const app = createApp({
showApp() {
document.getElementById("app").setAttribute("style", "");
},
connect() {
if (this.remoteId) {
this.initConnection(
this.peer.connect(this.remoteId, { reliable: true }),
);
}
},
initPeer() {
this.peer = new Peer({
debug: 3,
@@ -82,6 +104,7 @@ const app = createApp({
this.connection.on("close", this.connClose);
this.connection.on("error", this.connError);
this.connection.on("data", this.connData);
this.serverInfo();
});
},
peerOpen(id) {
@@ -96,43 +119,114 @@ const app = createApp({
peerClose() {
console.log("peerClose");
this.peer = null;
// setTimeout(this.initPeer);
},
peerDisconnected() {
console.log("peerDisconnected");
// this.peer.reconnect();
this.peer.reconnect();
},
peerError(err) {
console.log("peerError", err);
// 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) {
console.log("connData");
console.log(data.type);
switch (data.type) {
case "start":
this.t0 = new Date();
case "server-info":
this.fileName = data.fileName;
this.fileSize = data.fileSize;
this.fileStream = streamSaver
.createWriteStream(this.fileName, {
size: this.fileSize,
})
.getWriter();
break;
case "chunk":
if (this.fileStream) {
this.fileStream.write(new Uint8Array(data.bytes));
if (this.fileName !== null) {
this.createStream();
}
break;
case "end":
if (this.fileStream) {
this.fileStream.close();
case "server-chunk":
utils.bufferCopy(
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);
console.log(this.fileSize / (new Date() - this.t0));
break;
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;
default:
console.error("Invalid data type");
break;
}
},
@@ -144,8 +238,16 @@ const app = createApp({
connError(err) {
console.log("connError", err);
// 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]);
const file = event.target.files[0]; // TODO multiple files
if (!file) {
@@ -157,44 +259,15 @@ const app = createApp({
const reader = new FileReader();
reader.onload = () => {
this.data = reader.result;
if (this.isConnected) {
this.serverInfo();
}
};
reader.onerror = (err) => {
console.error(err);
};
reader.onloadstart = () => {
console.log("reading");
};
reader.onloadend = () => {
console.log("read");
reader.onerror = () => {
// TODO handle file reading error
};
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() {
this.initPeer();
},
style.css
+3 -2
View File
@@ -85,7 +85,7 @@ CUSTOM STYLE
:root {
/* https://materialui.co/colors/ */
/* TODO: 2. change hue and saturation */
--hue-primary: 65.52;
--sat-primary: 20%;
--background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
@@ -213,6 +213,7 @@ h6 .lucide {
opacity: 50%;
}
input {
input,
progress {
width: 100%;
}