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

203
main.js
View File

@@ -1,5 +1,5 @@
// 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 keyBase = "dandelion_posts_v1_"
// let key:string = "";
@@ -58,7 +58,6 @@ window.addEventListener('scroll', () => {
if (scrollPoint >= totalPageHeight) {
console.log('Scrolled to the bottom!');
console.log(scrollPoint, totalPageHeight);
// You can perform your action here
}
});
// let peer = await new PeerConnection(peer_id);
@@ -73,6 +72,23 @@ window.addEventListener('scroll', () => {
// 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 {
send(message) {
let json = "";
@@ -82,7 +98,7 @@ class wsConnection {
catch (e) {
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);
}
helloResponseHandler(data) {
@@ -96,19 +112,58 @@ class wsConnection {
type: "peer_message",
from: this.peerID,
to: peerID,
message: { type: "get_posts_for_user", user_id: userID }
message: { type: "get_post_ids_for_user", user_id: userID }
});
}
}
}
pongHandler(data) {
}
async getPostsForUserResponseHandler(data) {
async getPostIdsForUserResponseHandler(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;
console.log(`getPostsForUserResponseHandler Got ${message.posts.length} from peer ${data.from}`);
for (let post of message.posts) {
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...`);
await mergeDataArray(message.user_id, data.message.posts);
@@ -117,14 +172,6 @@ class wsConnection {
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) {
log(`peerMessageHandler ${data}`);
let peerMessageType = data.message.type;
@@ -168,7 +215,7 @@ class wsConnection {
window.setTimeout(() => { this.connect(); }, this.retry * 1000);
};
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 { type } = data;
let handler = this.messageHandlers.get(type);
@@ -200,8 +247,10 @@ class wsConnection {
this.messageHandlers.set('hello', this.helloResponseHandler.bind(this));
this.messageHandlers.set('pong', this.pongHandler);
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_response', this.getPostsForUserResponseHandler.bind(this));
this.peerMessageHandlers.set('get_posts_for_user_response', this.getPostsForUserReponseHandler.bind(this));
this.connect();
if (!this.websocket) {
// set a timer and retry?
@@ -223,25 +272,25 @@ class App {
};
marked.setOptions({ renderer: renderer });
}
arrayBufferToBase64(buffer) {
return new Promise((resolve, reject) => {
const blob = new Blob([buffer], { type: 'application/octet-stream' });
const reader = new FileReader();
reader.onloadend = () => {
const dataUrl = reader.result;
if (!dataUrl) {
resolve(null);
return;
}
const base64 = dataUrl.split(',')[1];
resolve(base64);
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsDataURL(blob);
});
}
// arrayBufferToBase64(buffer: ArrayBuffer) {
// return new Promise((resolve, reject) => {
// const blob = new Blob([buffer], { type: 'application/octet-stream' });
// const reader = new FileReader();
// reader.onloadend = () => {
// const dataUrl = reader.result as string;
// if (!dataUrl) {
// resolve(null);
// return;
// }
// const base64 = dataUrl.split(',')[1];
// resolve(base64);
// };
// reader.onerror = (error) => {
// reject(error);
// };
// reader.readAsDataURL(blob);
// });
// }
async createTestData() {
let postsTestData = await (await fetch("./postsTestData.json")).json();
return postsTestData;
@@ -330,12 +379,12 @@ class App {
console.error("Service Worker registration failed:", error);
});
}
addPost(userID, postText) {
addPost(userID, postText, imageData) {
if ((typeof postText !== "string") || postText.length === 0) {
log("Not posting an empty string...");
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);
// localStorage.setItem(key, JSON.stringify(posts));
addData(userID, post);
@@ -436,7 +485,8 @@ class App {
let importTweetsButton = document.getElementById("import_tweets");
let clearPostsButton = document.getElementById("clear_posts");
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');
usernameField?.addEventListener('input', (event) => {
this.username = event.target.innerText;
@@ -464,6 +514,12 @@ class App {
if (!(postButton && postText)) {
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", () => {
this.addPost(userID, postText.value);
postText.value = "";
@@ -506,22 +562,6 @@ class App {
let peerID = this.getPeerID();
this.userID = userID;
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);
let time = 0;
let delta = 0;
@@ -546,6 +586,22 @@ class App {
if (performance?.memory) {
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()
// // 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';
@@ -566,17 +622,17 @@ class App {
throw new Error();
}
contentDiv.innerHTML = "";
let count = 0;
// let count = 0;
for (let i = posts.length - 1; i >= 0; i--) {
let postData = posts[i];
let post = this.renderPost(postData, posts);
if (post) {
fragment.appendChild(post);
count++;
}
if (count > 100) {
break;
// count++;
}
// if (count > 100) {
// break;
// }
}
if (!contentDiv) {
throw new Error("Couldn't get content div!");
@@ -610,21 +666,22 @@ class App {
containerDiv.innerHTML = postTemplate;
containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
containerDiv.querySelector('#editButton')?.appendChild(editButton);
// if (!("image_data" in post && post.image_data)) {
// containerDiv.appendChild(timestampDiv);
// return containerDiv;
// // return null;
// }
// let image = document.createElement("img");
// const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/jpg' });
// const url = URL.createObjectURL(blob);
// image.onload = () => {
// URL.revokeObjectURL(url);
// };
// image.src = url;
// // image.src = image.src = "data:image/png;base64," + post.image;
// image.className = "postImage";
// containerDiv.appendChild(image);
if (!("image_data" in post && post.image_data)) {
// containerDiv.appendChild(timestampDiv);
return containerDiv;
// return null;
}
let image = document.createElement("img");
// const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/png' });
const blob = new Blob([post.image_data]);
const url = URL.createObjectURL(blob);
image.onload = () => {
URL.revokeObjectURL(url);
};
image.src = url;
// image.src = image.src = "data:image/png;base64," + post.image;
image.className = "postImage";
containerDiv.appendChild(image);
// containerDiv.appendChild(timestampDiv);
return containerDiv;
}