bobbydigitales/dandelion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Exchange ids vs posts. Support image paste.

Browse Source
This commit is contained in:
bobbydigitales
2024-09-22 21:12:51 -07:00
parent 998840ec2c
commit c449267f01
11 changed files with 711 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
db.js
View File

@@ -118,6 +118,50 @@ export async function addDataArray(userID, array) {
console.error('Error in opening database:', error); console.error('Error in opening database:', error);
} }
} }
export async function checkPostIds(userID, post_ids) {
try {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite");
const store = transaction.objectStore(postStoreName);
const index = store.index("postIDIndex");
transaction.oncomplete = () => {
console.log("Transaction completed successfully");
db.close();
};
transaction.onerror = (event) => {
console.error("Transaction error:", event.target.error);
db.close();
};
let postIdsNeeded = [];
for (let id of post_ids) {
try {
let havePost = await new Promise((resolve, reject) => {
const getRequest = index.getKey(id);
getRequest.onerror = (e) => {
console.log(e.target.error);
reject(e);
};
getRequest.onsuccess = async (e) => {
const key = e.target.result;
resolve(key !== undefined);
};
});
// console.log(post.post_id, havePost);
if (!havePost) {
postIdsNeeded.push(id);
}
}
catch (error) {
console.error("Error processing post:", error);
}
}
console.log(`checkPostIds need ${postIdsNeeded.length} posts`);
return postIdsNeeded;
}
catch (error) {
console.error("Error in opening database:", error);
}
}
export async function mergeDataArray(userID, array) { export async function mergeDataArray(userID, array) {
try { try {
const db = await openDatabase(userID); const db = await openDatabase(userID);
@@ -215,4 +259,49 @@ export async function getAllData(userID) {
}; };
}); });
} }
export async function getAllIds(userID) {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readonly");
const store = transaction.objectStore(postStoreName);
const index = store.index("postIDIndex");
let keys = [];
return new Promise((resolve, reject) => {
let request = index.openKeyCursor();
request.onsuccess = (event) => {
let cursor = event.target.result;
if (cursor) {
keys.push(cursor.key);
cursor.continue();
}
else {
resolve(keys);
}
};
request.onerror = (event) => {
reject(event);
};
});
}
export async function getPostsByIds(userID, postIDs) {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readonly");
const store = transaction.objectStore(postStoreName);
const index = store.index("postIDIndex");
let posts = [];
for (const postID of postIDs) {
const post = await new Promise((resolve, reject) => {
let request = index.get(postID);
request.onsuccess = (event) => {
resolve(event.target.result); // Resolve with the post
};
request.onerror = (event) => {
reject(event); // Reject if any error occurs
};
});
if (post) {
posts.push(post); // Add the post to the result array if found
}
}
return posts; // Return the array of posts
}
//# sourceMappingURL=db.js.map //# sourceMappingURL=db.js.map

2
db.js.map
View File

File diff suppressed because one or more lines are too long

7
index.html
View File

@@ -23,11 +23,11 @@
<div class="flex-container"> <div class="flex-container">
<div class="content"> <div class="content">
<div class="img-button" id="ddln-logo-button"><img class="logo" src="favicon.ico"></div> <div class="img-button" id="ddln_logo_button"><img class="logo" src="favicon.ico"></div>
<div id="status"></div> <div id="status"></div>
<div id="info" style="display:block"> <div id="info" style="display:none">
<div id="profile"> <div id="profile">
<span class="form_label">username:</span><span class="form_field" id="username" contenteditable="true">unnamed</span> <span class="form_label">username:</span><span class="form_field" id="username" contenteditable="true">unnamed</span>
</div> </div>
@@ -51,6 +51,9 @@
<textarea cols="60" rows="6" id="textarea_post"></textarea> <textarea cols="60" rows="6" id="textarea_post"></textarea>
<div class="button"> <div class="button">
<input type="file" id="fileInput" multiple style="display:none">
<button id="button_add_pic" >🏞️</button>
<button id="button_post" >post</button> <button id="button_post" >post</button>
</div> </div>
<!-- <div id="torrent-content"></div> --> <!-- <div id="torrent-content"></div> -->

BIN
main
View File

Binary file not shown.

142
main.css Normal file
View File

@@ -0,0 +1,142 @@
body {
font-family: sans-serif;
color: rgb(202, 208, 211);
background-color: black;
/* Use the font with a fallback */
}
hr {
border-color: rgb(60, 60, 60);
}
.form_field {
font-size: medium;
font-family: sans-serif;
background-color: rgb(0, 0, 0);
color: rgb(202, 208, 211);
width: 100%;
box-sizing: border-box;
padding-left: 5px;
padding-right: 5px;
border: 1px solid rgb(132, 136, 138);
resize: vertical;
border-radius: 20px;
}
#textarea_post {
font-size: medium;
font-family: sans-serif;
background-color: rgb(0, 0, 0);
color: rgb(202, 208, 211);
width: 100%;
box-sizing: border-box;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
border: 1px solid rgb(132, 136, 138);
resize: vertical;
border-radius: 40px;
}
.flex-container {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 0px;
/* Add some padding around the flex container */
}
.content {
max-width: 600px;
/* Your preferred max width for the content */
flex: 1;
/* Shorthand for flex-grow, flex-shrink and flex-basis */
min-width: 300px;
/* Minimum width the content can shrink to */
padding: 20px;
box-shadow: 0 0 5px rgb(60, 60, 60);
text-align: left;
overflow-x: hidden;
/* Hide horizontal overflow inside the flex container */
line-height: 1.3;
}
.embed {
max-width: 800px;
border-color: red;
border: 1px, solid;
padding: 20px;
}
.postImage {
width: 100%;
}
#log {
font-family: monospace;
text-wrap: nowrap;
font-size: 10px;
margin-bottom: 20px;
height: 150px;
width: 50%;
}
.button {
text-align: right;
}
#buttons {
margin-left: 40px;
}
#button_post {
margin-right: 40px;
}
a {
color: rgb(29, 155, 240);
}
.logo {
width: 32px;
height: 32px;
image-rendering: pixelated;
}
#torrent-content {
border: solid 1px;
width: 800px;
}
.img-button {
cursor: pointer;
}
button {
background-color: rgb(0, 0, 0);
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 5px;
color: rgb(255, 255, 255);
/* border:solid 1px white; */
border: 1px solid rgb(132, 136, 138);
color: rgb(202, 208, 211);
cursor: pointer;
}
video {
width:100%
}
iframe {
width: 100%
}
.qrcode_image {
background-color: white;
padding: 10px;
}

82
main.go
View File

@@ -69,21 +69,21 @@ type Peer struct {
lastActive time.Time lastActive time.Time
} }
func removePeer(peerID string, peer *Peer) { // func removePeer(peerID string, peer *Peer) {
delete(peerConnections, peerID) // delete(peerConnections, peerID)
for userID, peers := range userPeers { // for userID, peers := range userPeers {
delete(peers, peerID) // delete(peers, peerID)
if len(peers) == 0 { // if len(peers) == 0 {
delete(userPeers, userID) // delete(userPeers, userID)
} // }
} // }
delete(connectionPeers, peer.conn) // delete(connectionPeers, peer.conn)
// Close the peer's send channel // // Close the peer's send channel
close(peer.send) // close(peer.send)
} // }
func handleWebSocket(w http.ResponseWriter, r *http.Request) { func handleWebSocket(w http.ResponseWriter, r *http.Request) {
log.Println("Websocket connection!", r.RemoteAddr) log.Println("Websocket connection!", r.RemoteAddr)
@@ -348,39 +348,39 @@ func main() {
Handler: nil, // Use the default ServeMux Handler: nil, // Use the default ServeMux
} }
// Start the inactivity monitor goroutine // // Start the inactivity monitor goroutine
go func() { // go func() {
ticker := time.NewTicker(10 * time.Second) // ticker := time.NewTicker(10 * time.Second)
defer ticker.Stop() // defer ticker.Stop()
for { // for {
select { // select {
case <-done: // case <-done:
return // return
case <-ticker.C: // case <-ticker.C:
now := time.Now() // now := time.Now()
// Collect inactive peers // // Collect inactive peers
var inactivePeers []string // var inactivePeers []string
for peerID, peer := range peerConnections { // for peerID, peer := range peerConnections {
if now.Sub(peer.lastActive) > 60*time.Second { // if now.Sub(peer.lastActive) > 60*time.Second {
inactivePeers = append(inactivePeers, peerID) // inactivePeers = append(inactivePeers, peerID)
} // }
} // }
// Remove inactive peers // // Remove inactive peers
for _, peerID := range inactivePeers { // for _, peerID := range inactivePeers {
peer := peerConnections[peerID] // peer := peerConnections[peerID]
if peer != nil { // if peer != nil {
log.Printf("Peer %s inactive for more than 60 seconds. Closing connection.", peerID) // log.Printf("Peer %s inactive for more than 60 seconds. Closing connection.", peerID)
peer.conn.Close() // peer.conn.Close()
removePeer(peerID, peer) // removePeer(peerID, peer)
} // }
} // }
} // }
} // }
}() // }()
// Run a goroutine to handle graceful shutdown // Run a goroutine to handle graceful shutdown
go func() { go func() {

201
main.js
View File

@@ -1,5 +1,5 @@
// TODO: virtual list, only rerender what's needed so things can keep playing. // TODO: virtual list, only rerender what's needed so things can keep playing.
import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData } from "./db.js"; import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, checkPostIds, getAllIds, getPostsByIds } from "./db.js";
// let posts:any; // let posts:any;
// let keyBase = "dandelion_posts_v1_" // let keyBase = "dandelion_posts_v1_"
// let key:string = ""; // let key:string = "";
@@ -58,7 +58,6 @@ window.addEventListener('scroll', () => {
if (scrollPoint >= totalPageHeight) { if (scrollPoint >= totalPageHeight) {
console.log('Scrolled to the bottom!'); console.log('Scrolled to the bottom!');
console.log(scrollPoint, totalPageHeight); console.log(scrollPoint, totalPageHeight);
// You can perform your action here
} }
}); });
// let peer = await new PeerConnection(peer_id); // let peer = await new PeerConnection(peer_id);
@@ -73,6 +72,23 @@ window.addEventListener('scroll', () => {
// this.addPosts(newPosts); // this.addPosts(newPosts);
// } // }
// } // }
function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
function base64ToArrayBuffer(base64) {
var binaryString = atob(base64);
var bytes = new Uint8Array(binaryString.length);
for (var i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
return bytes.buffer;
}
class wsConnection { class wsConnection {
send(message) { send(message) {
let json = ""; let json = "";
@@ -82,7 +98,7 @@ class wsConnection {
catch (e) { catch (e) {
console.log(e, "wsConnection send: Couldn't serialize message", message); console.log(e, "wsConnection send: Couldn't serialize message", message);
} }
log(`ws->${json.slice(0, 80)}`); log(`ws->${json.slice(0, 240)}`);
this.websocket.send(json); this.websocket.send(json);
} }
helloResponseHandler(data) { helloResponseHandler(data) {
@@ -96,19 +112,58 @@ class wsConnection {
type: "peer_message", type: "peer_message",
from: this.peerID, from: this.peerID,
to: peerID, to: peerID,
message: { type: "get_posts_for_user", user_id: userID } message: { type: "get_post_ids_for_user", user_id: userID }
}); });
} }
} }
} }
pongHandler(data) { pongHandler(data) {
} }
async getPostsForUserResponseHandler(data) { async getPostIdsForUserResponseHandler(data) {
// log(`getPostsForUserResponse: ${data}`) // log(`getPostsForUserResponse: ${data}`)
let message = data.message;
console.log(`getPostIdsForUserResponseHandler Got ${message.post_ids.length} from peer ${data.from}`);
console.log(`Checking post IDs...`);
let postIds = await checkPostIds(message.user_id, data.message.post_ids);
if (postIds.length === 0) {
log(`Don't need any posts from peer ${data.from}`);
return;
}
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_posts_for_user", post_ids: postIds, user_id: message.user_id } };
this.send(responseMessage);
}
async getPostIdsForUserHandler(data) {
let message = data.message;
let postIds = await getAllIds(message.user_id) ?? [];
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_post_ids_for_user_response", post_ids: postIds, user_id: message.user_id } };
this.send(responseMessage);
}
// Send posts to peer
async getPostsForUserHandler(data) {
let message = data.message;
let posts = await getPostsByIds(message.user_id, message.post_ids) ?? [];
let output = [];
for (let post of posts) {
let newPost = post.data;
if (newPost.image_data) {
newPost.image_data = arrayBufferToBase64(newPost.image_data);
}
output.push(newPost);
}
// posts = posts.map((post:any)=>{let newPost = post.data; if (newPost.image_data){newPost.image_data = arraybufferto};return newPost});
// posts = posts.map((post:any)=>{})
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_posts_for_user_response", posts: output, user_id: message.user_id } };
this.send(responseMessage);
}
// Got posts from peer
async getPostsForUserReponseHandler(data) {
let message = data.message; let message = data.message;
console.log(`getPostsForUserResponseHandler Got ${message.posts.length} from peer ${data.from}`); console.log(`getPostsForUserResponseHandler Got ${message.posts.length} from peer ${data.from}`);
for (let post of message.posts) { for (let post of message.posts) {
post.post_timestamp = new Date(post.post_timestamp); post.post_timestamp = new Date(post.post_timestamp);
if (post.image_data) {
post.image_data = base64ToArrayBuffer(post.image_data);
}
} }
console.log(`Merging same user peer posts...`); console.log(`Merging same user peer posts...`);
await mergeDataArray(message.user_id, data.message.posts); await mergeDataArray(message.user_id, data.message.posts);
@@ -117,14 +172,6 @@ class wsConnection {
app.render(app.posts); app.render(app.posts);
} }
} }
async getPostsForUserHandler(data) {
let message = data.message;
let posts = await getAllData(message.user_id) ?? []; // this doesn't get all posts!
posts = posts.map((post) => post.data);
// let posts = await getAllData(message.user_id) ?? [];
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_posts_for_user_response", posts: posts, user_id: message.user_id } };
this.send(responseMessage);
}
async peerMessageHandler(data) { async peerMessageHandler(data) {
log(`peerMessageHandler ${data}`); log(`peerMessageHandler ${data}`);
let peerMessageType = data.message.type; let peerMessageType = data.message.type;
@@ -168,7 +215,7 @@ class wsConnection {
window.setTimeout(() => { this.connect(); }, this.retry * 1000); window.setTimeout(() => { this.connect(); }, this.retry * 1000);
}; };
this.websocket.onmessage = (event) => { this.websocket.onmessage = (event) => {
log('ws:<-' + event.data.slice(0, 80)); log('ws:<-' + event.data.slice(0, 240));
let data = JSON.parse(event.data); let data = JSON.parse(event.data);
let { type } = data; let { type } = data;
let handler = this.messageHandlers.get(type); let handler = this.messageHandlers.get(type);
@@ -200,8 +247,10 @@ class wsConnection {
this.messageHandlers.set('hello', this.helloResponseHandler.bind(this)); this.messageHandlers.set('hello', this.helloResponseHandler.bind(this));
this.messageHandlers.set('pong', this.pongHandler); this.messageHandlers.set('pong', this.pongHandler);
this.messageHandlers.set('peer_message', this.peerMessageHandler.bind(this)); this.messageHandlers.set('peer_message', this.peerMessageHandler.bind(this));
this.peerMessageHandlers.set('get_post_ids_for_user', this.getPostIdsForUserHandler.bind(this));
this.peerMessageHandlers.set('get_post_ids_for_user_response', this.getPostIdsForUserResponseHandler.bind(this));
this.peerMessageHandlers.set('get_posts_for_user', this.getPostsForUserHandler.bind(this)); this.peerMessageHandlers.set('get_posts_for_user', this.getPostsForUserHandler.bind(this));
this.peerMessageHandlers.set('get_posts_for_user_response', this.getPostsForUserResponseHandler.bind(this)); this.peerMessageHandlers.set('get_posts_for_user_response', this.getPostsForUserReponseHandler.bind(this));
this.connect(); this.connect();
if (!this.websocket) { if (!this.websocket) {
// set a timer and retry? // set a timer and retry?
@@ -223,25 +272,25 @@ class App {
}; };
marked.setOptions({ renderer: renderer }); marked.setOptions({ renderer: renderer });
} }
arrayBufferToBase64(buffer) { // arrayBufferToBase64(buffer: ArrayBuffer) {
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
const blob = new Blob([buffer], { type: 'application/octet-stream' }); // const blob = new Blob([buffer], { type: 'application/octet-stream' });
const reader = new FileReader(); // const reader = new FileReader();
reader.onloadend = () => { // reader.onloadend = () => {
const dataUrl = reader.result; // const dataUrl = reader.result as string;
if (!dataUrl) { // if (!dataUrl) {
resolve(null); // resolve(null);
return; // return;
} // }
const base64 = dataUrl.split(',')[1]; // const base64 = dataUrl.split(',')[1];
resolve(base64); // resolve(base64);
}; // };
reader.onerror = (error) => { // reader.onerror = (error) => {
reject(error); // reject(error);
}; // };
reader.readAsDataURL(blob); // reader.readAsDataURL(blob);
}); // });
} // }
async createTestData() { async createTestData() {
let postsTestData = await (await fetch("./postsTestData.json")).json(); let postsTestData = await (await fetch("./postsTestData.json")).json();
return postsTestData; return postsTestData;
@@ -330,12 +379,12 @@ class App {
console.error("Service Worker registration failed:", error); console.error("Service Worker registration failed:", error);
}); });
} }
addPost(userID, postText) { addPost(userID, postText, imageData) {
if ((typeof postText !== "string") || postText.length === 0) { if ((typeof postText !== "string") || postText.length === 0) {
log("Not posting an empty string..."); log("Not posting an empty string...");
return; return;
} }
let post = new Post(this.username, userID, postText, new Date()); let post = new Post(this.username, userID, postText, new Date(), imageData);
this.posts.push(post); this.posts.push(post);
// localStorage.setItem(key, JSON.stringify(posts)); // localStorage.setItem(key, JSON.stringify(posts));
addData(userID, post); addData(userID, post);
@@ -436,7 +485,8 @@ class App {
let importTweetsButton = document.getElementById("import_tweets"); let importTweetsButton = document.getElementById("import_tweets");
let clearPostsButton = document.getElementById("clear_posts"); let clearPostsButton = document.getElementById("clear_posts");
let updateApp = document.getElementById("update_app"); let updateApp = document.getElementById("update_app");
let ddlnLogoButton = document.getElementById('ddln-logo-button'); let ddlnLogoButton = document.getElementById('ddln_logo_button');
// let addP = document.getElementById('button_add_pic') as HTMLDivElement;
let usernameField = document.getElementById('username'); let usernameField = document.getElementById('username');
usernameField?.addEventListener('input', (event) => { usernameField?.addEventListener('input', (event) => {
this.username = event.target.innerText; this.username = event.target.innerText;
@@ -464,6 +514,12 @@ class App {
if (!(postButton && postText)) { if (!(postButton && postText)) {
throw new Error(); throw new Error();
} }
postText.addEventListener('paste', async (e) => {
const dataTransfer = e.clipboardData;
const file = dataTransfer.files[0];
let buffer = await file.arrayBuffer();
let type = this.addPost(this.userID, 'image...', buffer);
});
postButton.addEventListener("click", () => { postButton.addEventListener("click", () => {
this.addPost(userID, postText.value); this.addPost(userID, postText.value);
postText.value = ""; postText.value = "";
@@ -506,22 +562,6 @@ class App {
let peerID = this.getPeerID(); let peerID = this.getPeerID();
this.userID = userID; this.userID = userID;
this.peerID = peerID; this.peerID = peerID;
let connectURL = `https://${document.location.hostname}?connect=${this.userID}`;
document.getElementById('connectURL').innerHTML = `<a href="${connectURL}">connect</a>`;
let qrcode = await new QRCode(document.getElementById('qrcode'), {
text: connectURL,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
let qrcodeImage = document.querySelector('#qrcode > img');
qrcodeImage.classList.add('qrcode_image');
log(`user:${userID} peer:${peerID}`);
let websocket = new wsConnection(userID, peerID);
window.addEventListener('beforeunload', () => { websocket.disconnect(); });
this.initOffline(websocket);
this.initButtons(userID, this.posts, registration); this.initButtons(userID, this.posts, registration);
let time = 0; let time = 0;
let delta = 0; let delta = 0;
@@ -546,6 +586,22 @@ class App {
if (performance?.memory) { if (performance?.memory) {
log(`memory used: ${(performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`); log(`memory used: ${(performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`);
} }
let connectURL = `https://${document.location.hostname}?connect=${this.userID}`;
document.getElementById('connectURL').innerHTML = `<a href="${connectURL}">connect</a>`;
let qrcode = await new QRCode(document.getElementById('qrcode'), {
text: connectURL,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
let qrcodeImage = document.querySelector('#qrcode > img');
qrcodeImage.classList.add('qrcode_image');
log(`user:${userID} peer:${peerID}`);
let websocket = new wsConnection(userID, peerID);
window.addEventListener('beforeunload', () => { websocket.disconnect(); });
this.initOffline(websocket);
// const client = new WebTorrent() // const client = new WebTorrent()
// // Sintel, a free, Creative Commons movie // // Sintel, a free, Creative Commons movie
// const torrentId = 'magnet:?xt=urn:btih:6091e199a8d9272a40dd9a25a621a5c355d6b0be&dn=WING+IT!+-+Blender+Open+Movie+1080p.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337'; // const torrentId = 'magnet:?xt=urn:btih:6091e199a8d9272a40dd9a25a621a5c355d6b0be&dn=WING+IT!+-+Blender+Open+Movie+1080p.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337';
@@ -566,17 +622,17 @@ class App {
throw new Error(); throw new Error();
} }
contentDiv.innerHTML = ""; contentDiv.innerHTML = "";
let count = 0; // let count = 0;
for (let i = posts.length - 1; i >= 0; i--) { for (let i = posts.length - 1; i >= 0; i--) {
let postData = posts[i]; let postData = posts[i];
let post = this.renderPost(postData, posts); let post = this.renderPost(postData, posts);
if (post) { if (post) {
fragment.appendChild(post); fragment.appendChild(post);
count++; // count++;
}
if (count > 100) {
break;
} }
// if (count > 100) {
// break;
// }
} }
if (!contentDiv) { if (!contentDiv) {
throw new Error("Couldn't get content div!"); throw new Error("Couldn't get content div!");
@@ -610,21 +666,22 @@ class App {
containerDiv.innerHTML = postTemplate; containerDiv.innerHTML = postTemplate;
containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton); containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
containerDiv.querySelector('#editButton')?.appendChild(editButton); containerDiv.querySelector('#editButton')?.appendChild(editButton);
// if (!("image_data" in post && post.image_data)) { if (!("image_data" in post && post.image_data)) {
// containerDiv.appendChild(timestampDiv); // containerDiv.appendChild(timestampDiv);
// return containerDiv; return containerDiv;
// // return null; // return null;
// } }
// let image = document.createElement("img"); let image = document.createElement("img");
// const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/jpg' }); // const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/png' });
// const url = URL.createObjectURL(blob); const blob = new Blob([post.image_data]);
// image.onload = () => { const url = URL.createObjectURL(blob);
// URL.revokeObjectURL(url); image.onload = () => {
// }; URL.revokeObjectURL(url);
// image.src = url; };
// // image.src = image.src = "data:image/png;base64," + post.image; image.src = url;
// image.className = "postImage"; // image.src = image.src = "data:image/png;base64," + post.image;
// containerDiv.appendChild(image); image.className = "postImage";
containerDiv.appendChild(image);
// containerDiv.appendChild(timestampDiv); // containerDiv.appendChild(timestampDiv);
return containerDiv; return containerDiv;
} }

2
main.js.map
View File

File diff suppressed because one or more lines are too long

113
src/db.ts
View File

@@ -159,7 +159,7 @@ export async function addDataArray(userID: string, array: any[]): Promise<void>
} }
} }
export async function mergeDataArray(userID: string, array:any[]): Promise<void> { export async function checkPostIds(userID: string, post_ids: string[]) {
try { try {
const db = await openDatabase(userID); const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite"); const transaction = db.transaction(postStoreName, "readwrite");
@@ -176,7 +176,60 @@ export async function mergeDataArray(userID: string, array:any[]): Promise<void>
db.close(); db.close();
}; };
let postsToWrite:any = []; let postIdsNeeded: any = [];
for (let id of post_ids) {
try {
let havePost = await new Promise<boolean>((resolve, reject) => {
const getRequest = index.getKey(id);
getRequest.onerror = (e) => {
console.log((e.target as IDBRequest).error);
reject(e);
};
getRequest.onsuccess = async (e) => {
const key = (e.target as IDBRequest).result;
resolve(key !== undefined)
};
});
// console.log(post.post_id, havePost);
if (!havePost) {
postIdsNeeded.push(id);
}
} catch (error) {
console.error("Error processing post:", error);
}
}
console.log(`checkPostIds need ${postIdsNeeded.length} posts`);
return postIdsNeeded;
} catch (error) {
console.error("Error in opening database:", error);
}
}
export async function mergeDataArray(userID: string, array: any[]): Promise<void> {
try {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite");
const store = transaction.objectStore(postStoreName);
const index = store.index("postIDIndex");
transaction.oncomplete = () => {
console.log("Transaction completed successfully");
db.close();
};
transaction.onerror = (event) => {
console.error("Transaction error:", (event.target as any).error);
db.close();
};
let postsToWrite: any = [];
for (let post of array) { for (let post of array) {
try { try {
@@ -196,7 +249,7 @@ export async function mergeDataArray(userID: string, array:any[]): Promise<void>
}); });
// console.log(post.post_id, havePost); // console.log(post.post_id, havePost);
if (!havePost ) { if (!havePost) {
postsToWrite.push(post); postsToWrite.push(post);
} }
@@ -276,3 +329,57 @@ export async function getAllData(userID: string): Promise<any | undefined> {
}; };
}); });
} }
export async function getAllIds(userID: string): Promise<any | undefined> {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readonly");
const store = transaction.objectStore(postStoreName);
const index = store.index("postIDIndex");
let keys: string[] = [];
return new Promise((resolve, reject) => {
let request = index.openKeyCursor();
request.onsuccess = (event:any) => {
let cursor = event.target.result;
if (cursor) {
keys.push(cursor.key);
cursor.continue();
} else {
resolve(keys);
}
};
request.onerror = (event: any) => {
reject(event);
};
});
}
export async function getPostsByIds(userID:string, postIDs:string[]) {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readonly");
const store = transaction.objectStore(postStoreName);
const index = store.index("postIDIndex");
let posts = [];
for (const postID of postIDs) {
const post = await new Promise((resolve, reject) => {
let request = index.get(postID);
request.onsuccess = (event:any) => {
resolve(event.target.result); // Resolve with the post
};
request.onerror = (event) => {
reject(event); // Reject if any error occurs
};
});
if (post) {
posts.push(post); // Add the post to the result array if found
}
}
return posts; // Return the array of posts
}

247
src/main.ts
View File

@@ -2,7 +2,7 @@
import { openDatabase, getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData } from "./db.js" import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds} from "./db.js"
declare let WebTorrent: any; declare let WebTorrent: any;
@@ -67,7 +67,15 @@ class Post {
importedFrom: "twitter" | null; importedFrom: "twitter" | null;
importSource: any; importSource: any;
constructor(author: string, author_id: string, text: string, post_timestamp: Date, imageData: ArrayBuffer | null = null, importedFrom: "twitter" | null = null, importSource: any = null) { constructor(
author: string,
author_id: string,
text: string,
post_timestamp: Date,
imageData: ArrayBuffer | null = null,
importedFrom: "twitter" | null = null,
importSource: any = null) {
this.post_timestamp = post_timestamp; this.post_timestamp = post_timestamp;
this.post_id = generateID(); this.post_id = generateID();
@@ -92,8 +100,8 @@ window.addEventListener('scroll', () => {
if (scrollPoint >= totalPageHeight) { if (scrollPoint >= totalPageHeight) {
console.log('Scrolled to the bottom!'); console.log('Scrolled to the bottom!');
console.log(scrollPoint, totalPageHeight); console.log(scrollPoint, totalPageHeight);
// You can perform your action here
} }
}); });
@@ -115,6 +123,25 @@ window.addEventListener('scroll', () => {
// } // }
// } // }
function arrayBufferToBase64( buffer:ArrayBuffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}
function base64ToArrayBuffer(base64:string) {
var binaryString = atob(base64);
var bytes = new Uint8Array(binaryString.length);
for (var i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
return bytes.buffer;
}
class wsConnection { class wsConnection {
websocket: WebSocket | null = null; websocket: WebSocket | null = null;
userID = ""; userID = "";
@@ -135,7 +162,7 @@ class wsConnection {
} catch (e) { } catch (e) {
console.log(e, "wsConnection send: Couldn't serialize message", message); console.log(e, "wsConnection send: Couldn't serialize message", message);
} }
log(`ws->${json.slice(0,80)}`) log(`ws->${json.slice(0,240)}`)
this.websocket!.send(json); this.websocket!.send(json);
} }
@@ -153,7 +180,7 @@ class wsConnection {
type:"peer_message", type:"peer_message",
from:this.peerID, from:this.peerID,
to:peerID, to:peerID,
message:{type:"get_posts_for_user", user_id:userID} message:{type:"get_post_ids_for_user", user_id:userID}
}) })
} }
} }
@@ -162,13 +189,63 @@ class wsConnection {
pongHandler(data: any) { pongHandler(data: any) {
} }
async getPostsForUserResponseHandler(data: any) { async getPostIdsForUserResponseHandler(data: any) {
// log(`getPostsForUserResponse: ${data}`) // log(`getPostsForUserResponse: ${data}`)
let message = data.message;
console.log(`getPostIdsForUserResponseHandler Got ${message.post_ids.length} from peer ${data.from}`);
console.log(`Checking post IDs...`);
let postIds = await checkPostIds(message.user_id, data.message.post_ids);
if (postIds.length === 0) {
log(`Don't need any posts from peer ${data.from}`);
return;
}
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_posts_for_user", post_ids: postIds, user_id: message.user_id } }
this.send(responseMessage);
}
async getPostIdsForUserHandler(data: any) {
let message = data.message;
let postIds = await getAllIds(message.user_id) ?? [];
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_post_ids_for_user_response", post_ids: postIds, user_id: message.user_id } }
this.send(responseMessage)
}
// Send posts to peer
async getPostsForUserHandler(data: any) {
let message = data.message;
let posts = await getPostsByIds(message.user_id, message.post_ids) ?? [];
let output = [];
for (let post of posts) {
let newPost = (post as any).data; if (newPost.image_data) {
newPost.image_data = arrayBufferToBase64(newPost.image_data)
}
output.push(newPost);
}
// posts = posts.map((post:any)=>{let newPost = post.data; if (newPost.image_data){newPost.image_data = arraybufferto};return newPost});
// posts = posts.map((post:any)=>{})
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_posts_for_user_response", posts: output, user_id: message.user_id } }
this.send(responseMessage)
}
// Got posts from peer
async getPostsForUserReponseHandler(data: any) {
let message = data.message; let message = data.message;
console.log(`getPostsForUserResponseHandler Got ${message.posts.length} from peer ${data.from}`); console.log(`getPostsForUserResponseHandler Got ${message.posts.length} from peer ${data.from}`);
for (let post of message.posts) { for (let post of message.posts) {
post.post_timestamp = new Date(post.post_timestamp); post.post_timestamp = new Date(post.post_timestamp);
if (post.image_data) {
post.image_data = base64ToArrayBuffer(post.image_data);
}
} }
console.log(`Merging same user peer posts...`) console.log(`Merging same user peer posts...`)
await mergeDataArray(message.user_id, data.message.posts) await mergeDataArray(message.user_id, data.message.posts)
@@ -180,16 +257,6 @@ class wsConnection {
} }
} }
async getPostsForUserHandler(data: any) {
let message = data.message;
let posts = await getAllData(message.user_id) ?? []; // this doesn't get all posts!
posts = posts.map((post:any)=>post.data)
// let posts = await getAllData(message.user_id) ?? [];
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, message: { type: "get_posts_for_user_response", posts: posts, user_id: message.user_id } }
this.send(responseMessage)
}
async peerMessageHandler(data: any) { async peerMessageHandler(data: any) {
log(`peerMessageHandler ${data}`) log(`peerMessageHandler ${data}`)
@@ -239,7 +306,7 @@ class wsConnection {
}; };
this.websocket.onmessage = (event) => { this.websocket.onmessage = (event) => {
log('ws:<-' + event.data.slice(0,80)); log('ws:<-' + event.data.slice(0,240));
let data = JSON.parse(event.data); let data = JSON.parse(event.data);
@@ -273,8 +340,13 @@ class wsConnection {
this.messageHandlers.set('pong', this.pongHandler); this.messageHandlers.set('pong', this.pongHandler);
this.messageHandlers.set('peer_message', this.peerMessageHandler.bind(this)); this.messageHandlers.set('peer_message', this.peerMessageHandler.bind(this));
this.peerMessageHandlers.set('get_post_ids_for_user', this.getPostIdsForUserHandler.bind(this));
this.peerMessageHandlers.set('get_post_ids_for_user_response', this.getPostIdsForUserResponseHandler.bind(this));
this.peerMessageHandlers.set('get_posts_for_user', this.getPostsForUserHandler.bind(this)); this.peerMessageHandlers.set('get_posts_for_user', this.getPostsForUserHandler.bind(this));
this.peerMessageHandlers.set('get_posts_for_user_response', this.getPostsForUserResponseHandler.bind(this)); this.peerMessageHandlers.set('get_posts_for_user_response', this.getPostsForUserReponseHandler.bind(this));
this.connect(); this.connect();
if (!this.websocket) { if (!this.websocket) {
@@ -298,28 +370,28 @@ class App {
marked.setOptions({ renderer: renderer }); marked.setOptions({ renderer: renderer });
} }
arrayBufferToBase64(buffer: ArrayBuffer) { // arrayBufferToBase64(buffer: ArrayBuffer) {
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
const blob = new Blob([buffer], { type: 'application/octet-stream' }); // const blob = new Blob([buffer], { type: 'application/octet-stream' });
const reader = new FileReader(); // const reader = new FileReader();
reader.onloadend = () => { // reader.onloadend = () => {
const dataUrl = reader.result as string; // const dataUrl = reader.result as string;
if (!dataUrl) { // if (!dataUrl) {
resolve(null); // resolve(null);
return; // return;
} // }
const base64 = dataUrl.split(',')[1]; // const base64 = dataUrl.split(',')[1];
resolve(base64); // resolve(base64);
}; // };
reader.onerror = (error) => { // reader.onerror = (error) => {
reject(error); // reject(error);
}; // };
reader.readAsDataURL(blob); // reader.readAsDataURL(blob);
}); // });
} // }
async createTestData() { async createTestData() {
let postsTestData = await (await fetch("./postsTestData.json")).json(); let postsTestData = await (await fetch("./postsTestData.json")).json();
@@ -439,13 +511,13 @@ class App {
}); });
} }
addPost(userID: string, postText: string) { addPost(userID: string, postText: string, imageData?: ArrayBuffer) {
if ((typeof postText !== "string") || postText.length === 0) { if ((typeof postText !== "string") || postText.length === 0) {
log("Not posting an empty string...") log("Not posting an empty string...")
return; return;
} }
let post = new Post(this.username, userID, postText, new Date()); let post = new Post(this.username, userID, postText, new Date(), imageData);
this.posts.push(post); this.posts.push(post);
// localStorage.setItem(key, JSON.stringify(posts)); // localStorage.setItem(key, JSON.stringify(posts));
@@ -455,6 +527,8 @@ class App {
} }
getPeerID() { getPeerID() {
let id = localStorage.getItem("peer_id"); let id = localStorage.getItem("peer_id");
@@ -575,7 +649,12 @@ class App {
let importTweetsButton = document.getElementById("import_tweets") as HTMLButtonElement; let importTweetsButton = document.getElementById("import_tweets") as HTMLButtonElement;
let clearPostsButton = document.getElementById("clear_posts") as HTMLButtonElement; let clearPostsButton = document.getElementById("clear_posts") as HTMLButtonElement;
let updateApp = document.getElementById("update_app") as HTMLButtonElement; let updateApp = document.getElementById("update_app") as HTMLButtonElement;
let ddlnLogoButton = document.getElementById('ddln-logo-button') as HTMLDivElement; let ddlnLogoButton = document.getElementById('ddln_logo_button') as HTMLDivElement;
// let addP = document.getElementById('button_add_pic') as HTMLDivElement;
let usernameField = document.getElementById('username'); let usernameField = document.getElementById('username');
usernameField?.addEventListener('input', (event:any)=>{ usernameField?.addEventListener('input', (event:any)=>{
@@ -614,6 +693,14 @@ class App {
throw new Error(); throw new Error();
} }
postText.addEventListener('paste', async (e)=>{
const dataTransfer = e.clipboardData
const file = dataTransfer!.files[ 0 ];
let buffer = await file.arrayBuffer();
let type =
this.addPost(this.userID, 'image...', buffer);
});
postButton.addEventListener("click", () => { postButton.addEventListener("click", () => {
this.addPost(userID, postText.value); this.addPost(userID, postText.value);
postText.value = ""; postText.value = "";
@@ -669,27 +756,6 @@ class App {
let peerID = this.getPeerID(); let peerID = this.getPeerID();
this.userID = userID; this.userID = userID;
this.peerID = peerID; this.peerID = peerID;
let connectURL = `https://${document.location.hostname}?connect=${this.userID}`;
document.getElementById('connectURL')!.innerHTML = `<a href="${connectURL}">connect</a>`;
let qrcode = await new QRCode(document.getElementById('qrcode'), {
text: connectURL,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
let qrcodeImage:HTMLImageElement = document.querySelector('#qrcode > img') as HTMLImageElement;
qrcodeImage.classList.add('qrcode_image');
log(`user:${userID} peer:${peerID}`);
let websocket = new wsConnection(userID, peerID);
window.addEventListener('beforeunload', () => { websocket.disconnect() })
this.initOffline(websocket);
this.initButtons(userID, this.posts, registration); this.initButtons(userID, this.posts, registration);
let time = 0; let time = 0;
@@ -723,6 +789,26 @@ class App {
if ((performance as any)?.memory) { if ((performance as any)?.memory) {
log(`memory used: ${((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`) log(`memory used: ${((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`)
} }
let connectURL = `https://${document.location.hostname}?connect=${this.userID}`;
document.getElementById('connectURL')!.innerHTML = `<a href="${connectURL}">connect</a>`;
let qrcode = await new QRCode(document.getElementById('qrcode'), {
text: connectURL,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
let qrcodeImage:HTMLImageElement = document.querySelector('#qrcode > img') as HTMLImageElement;
qrcodeImage.classList.add('qrcode_image');
log(`user:${userID} peer:${peerID}`);
let websocket = new wsConnection(userID, peerID);
window.addEventListener('beforeunload', () => { websocket.disconnect() })
this.initOffline(websocket);
// const client = new WebTorrent() // const client = new WebTorrent()
@@ -749,7 +835,7 @@ class App {
throw new Error(); throw new Error();
} }
contentDiv.innerHTML = ""; contentDiv.innerHTML = "";
let count = 0; // let count = 0;
for (let i = posts.length - 1; i >= 0; i--) { for (let i = posts.length - 1; i >= 0; i--) {
let postData = posts[i]; let postData = posts[i];
@@ -758,11 +844,11 @@ class App {
if (post) { if (post) {
fragment.appendChild(post); fragment.appendChild(post);
count++; // count++;
}
if (count > 100) {
break;
} }
// if (count > 100) {
// break;
// }
} }
@@ -807,27 +893,28 @@ class App {
containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton); containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
containerDiv.querySelector('#editButton')?.appendChild(editButton); containerDiv.querySelector('#editButton')?.appendChild(editButton);
// if (!("image_data" in post && post.image_data)) { if (!("image_data" in post && post.image_data)) {
// containerDiv.appendChild(timestampDiv); // containerDiv.appendChild(timestampDiv);
// return containerDiv; return containerDiv;
// // return null; // return null;
// } }
// let image = document.createElement("img"); let image = document.createElement("img");
// const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/jpg' }); // const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/png' });
// const url = URL.createObjectURL(blob); const blob = new Blob([post.image_data as ArrayBuffer]);
// image.onload = () => { const url = URL.createObjectURL(blob);
// URL.revokeObjectURL(url); image.onload = () => {
// }; URL.revokeObjectURL(url);
};
// image.src = url; image.src = url;
// // image.src = image.src = "data:image/png;base64," + post.image; // image.src = image.src = "data:image/png;base64," + post.image;
// image.className = "postImage"; image.className = "postImage";
// containerDiv.appendChild(image); containerDiv.appendChild(image);
// containerDiv.appendChild(timestampDiv); // containerDiv.appendChild(timestampDiv);
return containerDiv; return containerDiv;

24
watch.sh Executable file
View File

@@ -0,0 +1,24 @@
#!/bin/bash
# Check if the correct number of arguments is passed
if [ "$#" -ne 3 ]; then
echo "Usage: $0 <file_to_watch> <process_name> <command_to_run>"
exit 1
fi
# Assign arguments to variables
FILE_TO_WATCH=$1
PROCESS_NAME=$2
COMMAND_TO_RUN=$3
eval "$COMMAND_TO_RUN" &
# Watch the file for changes
while inotifywait -e modify "$FILE_TO_WATCH"; do
# Kill the process
sudo pkill "$PROCESS_NAME"
# Run the provided command (like build and run)
eval "$COMMAND_TO_RUN" &
done