WIP
This commit is contained in:
Klemek
@@ -10,6 +10,7 @@ export default [
|
|||||||
globals: {
|
globals: {
|
||||||
...globals.browser,
|
...globals.browser,
|
||||||
lucide: "readonly",
|
lucide: "readonly",
|
||||||
|
Peer: "readonly",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
+21
-4
@@ -4,10 +4,11 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<!-- TODO: 1. rename app -->
|
<!-- TODO: 1. rename app -->
|
||||||
<title>Change this you moron</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 type="importmap">
|
<script type="importmap">
|
||||||
{
|
{
|
||||||
"imports": {
|
"imports": {
|
||||||
@@ -31,11 +32,27 @@
|
|||||||
<main id="app" style="display: none">
|
<main id="app" style="display: none">
|
||||||
<!-- TODO: 1. rename app -->
|
<!-- TODO: 1. rename app -->
|
||||||
<h1>
|
<h1>
|
||||||
<i icon="package"></i>
|
<i icon="file-volume-2"></i>
|
||||||
Vue-Boilerplate
|
File Whizz
|
||||||
</h1>
|
</h1>
|
||||||
<br />
|
<br />
|
||||||
<p v-html="content"></p>
|
<div>
|
||||||
|
<label>Local ID</label><br>
|
||||||
|
<input readonly :value="localId" /><br><br>
|
||||||
|
<label>Remote ID</label><br>
|
||||||
|
<input v-model="remoteId" @change="connect">
|
||||||
|
<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>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<input type="file" @change="fileChange" />
|
||||||
|
<br>
|
||||||
|
<input type="submit" @click.prevent="start" :disabled="!data || !remoteId" />
|
||||||
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<small class="footer">
|
<small class="footer">
|
||||||
<i icon="at-sign"></i> <a href="https://github.com/klemek" target="_blank">klemek</a>
|
<i icon="at-sign"></i> <a href="https://github.com/klemek" target="_blank">klemek</a>
|
||||||
|
|||||||
@@ -12,22 +12,28 @@ const utils = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const MAX_CHUNK_SIZE = 1024 * 1024; // 1024 KB
|
||||||
|
|
||||||
const app = createApp({
|
const app = createApp({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
content:
|
peer: null,
|
||||||
"Fill this page with <i>whatever</i> you're going to develop.<br><b>Then enjoy!</b>",
|
localId: null,
|
||||||
|
remoteId: null,
|
||||||
|
connection: null, // TODO multiple connections
|
||||||
|
data: null, // TODO multiple file
|
||||||
|
streamEnqueue: null,
|
||||||
|
streamClose: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {},
|
||||||
currentYear() {
|
|
||||||
return new Date().getFullYear();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {},
|
watch: {},
|
||||||
updated() {
|
updated() {
|
||||||
utils.updateIcons();
|
utils.updateIcons();
|
||||||
},
|
},
|
||||||
|
beforeMount() {
|
||||||
|
this.initApp();
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
setTimeout(this.showApp);
|
setTimeout(this.showApp);
|
||||||
utils.updateIcons();
|
utils.updateIcons();
|
||||||
@@ -36,6 +42,120 @@ const app = createApp({
|
|||||||
showApp() {
|
showApp() {
|
||||||
document.getElementById("app").setAttribute("style", "");
|
document.getElementById("app").setAttribute("style", "");
|
||||||
},
|
},
|
||||||
|
connect() {
|
||||||
|
if (this.remoteId) {
|
||||||
|
this.connection = this.peer.connect(this.remoteId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initPeer() {
|
||||||
|
this.peer = new Peer({
|
||||||
|
config: {
|
||||||
|
iceServers: [{ urls: ["stun:stun.l.google.com:19302"] }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
this.peer.on("open", this.peerOpen);
|
||||||
|
this.peer.on("connection", this.peerConnection);
|
||||||
|
this.peer.on("close", this.peerClose);
|
||||||
|
this.peer.on("disconnected", this.peerDisconnected);
|
||||||
|
this.peer.on("error", this.peerError);
|
||||||
|
},
|
||||||
|
peerOpen(id) {
|
||||||
|
this.localId = id;
|
||||||
|
},
|
||||||
|
peerConnection(conn) {
|
||||||
|
this.connection = conn;
|
||||||
|
this.remoteId = conn.peer;
|
||||||
|
},
|
||||||
|
peerClose() {
|
||||||
|
this.peer = null;
|
||||||
|
setTimeout(this.initPeer);
|
||||||
|
},
|
||||||
|
peerDisconnected() {
|
||||||
|
this.peer.reconnect();
|
||||||
|
},
|
||||||
|
peerError(err) {
|
||||||
|
// TODO handle error
|
||||||
|
},
|
||||||
|
connData(data) {
|
||||||
|
switch (data.type) {
|
||||||
|
case "start":
|
||||||
|
ReadableStream({
|
||||||
|
start(ctrl) {
|
||||||
|
this.streamEnqueue = (chunk) => ctrl.enqueue(chunk);
|
||||||
|
this.streamClose = () => ctrl.close();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "chunk":
|
||||||
|
if (this.streamEnqueue) {
|
||||||
|
this.streamEnqueue(data.bytes);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "end":
|
||||||
|
if (this.streamClose) {
|
||||||
|
this.streamClose();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
connOpen() {
|
||||||
|
// TODO handle conn open
|
||||||
|
},
|
||||||
|
connClose() {
|
||||||
|
this.connection = null;
|
||||||
|
// TODO handle conn close
|
||||||
|
},
|
||||||
|
connError() {
|
||||||
|
// TODO handle error
|
||||||
|
},
|
||||||
|
fileChange(event) {
|
||||||
|
console.log(event.target.files[0]);
|
||||||
|
const file = event.target.files[0]; // TODO multiple files
|
||||||
|
if (!file) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.data = null;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = () => {
|
||||||
|
this.data = reader.result;
|
||||||
|
};
|
||||||
|
reader.onerror = (err) => {
|
||||||
|
console.error(err);
|
||||||
|
};
|
||||||
|
reader.onloadstart = () => {
|
||||||
|
console.log("reading");
|
||||||
|
};
|
||||||
|
reader.onloadend = () => {
|
||||||
|
console.log("read");
|
||||||
|
};
|
||||||
|
reader.readAsArrayBuffer(file); // TODO check ArrayBuffer.prototype.maxByteLength
|
||||||
|
},
|
||||||
|
start() {
|
||||||
|
this.connection.send({
|
||||||
|
type: "start",
|
||||||
|
});
|
||||||
|
for (
|
||||||
|
let index = 0;
|
||||||
|
index < this.data.byteLength;
|
||||||
|
index += MAX_CHUNK_SIZE
|
||||||
|
) {
|
||||||
|
this.connection.send({
|
||||||
|
type: "chunk",
|
||||||
|
bytes: this.data.slice(
|
||||||
|
index * MAX_CHUNK_SIZE,
|
||||||
|
Math.min(this.data.byteLength, (index + 1) * MAX_CHUNK_SIZE),
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.connection.send({
|
||||||
|
type: "end",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initApp() {
|
||||||
|
this.initPeer();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user