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

249
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;
@@ -67,7 +67,15 @@ class Post {
importedFrom: "twitter" | null;
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_id = generateID();
@@ -92,8 +100,8 @@ window.addEventListener('scroll', () => {
if (scrollPoint >= totalPageHeight) {
console.log('Scrolled to the bottom!');
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 {
websocket: WebSocket | null = null;
userID = "";
@@ -135,7 +162,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);
}
@@ -153,7 +180,7 @@ 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}
})
}
}
@@ -162,13 +189,63 @@ class wsConnection {
pongHandler(data: any) {
}
async getPostsForUserResponseHandler(data: any) {
async getPostIdsForUserResponseHandler(data: any) {
// 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;
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)
@@ -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) {
log(`peerMessageHandler ${data}`)
@@ -239,7 +306,7 @@ class wsConnection {
};
this.websocket.onmessage = (event) => {
log('ws:<-' + event.data.slice(0,80));
log('ws:<-' + event.data.slice(0,240));
let data = JSON.parse(event.data);
@@ -273,8 +340,13 @@ class wsConnection {
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) {
@@ -298,28 +370,28 @@ class App {
marked.setOptions({ renderer: renderer });
}
arrayBufferToBase64(buffer: ArrayBuffer) {
return new Promise((resolve, reject) => {
const blob = new Blob([buffer], { type: 'application/octet-stream' });
const reader = new FileReader();
// 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.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.onerror = (error) => {
// reject(error);
// };
reader.readAsDataURL(blob);
});
}
// reader.readAsDataURL(blob);
// });
// }
async createTestData() {
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) {
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));
@@ -455,6 +527,8 @@ class App {
}
getPeerID() {
let id = localStorage.getItem("peer_id");
@@ -575,7 +649,12 @@ class App {
let importTweetsButton = document.getElementById("import_tweets") as HTMLButtonElement;
let clearPostsButton = document.getElementById("clear_posts") 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');
usernameField?.addEventListener('input', (event:any)=>{
@@ -614,6 +693,14 @@ class App {
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 = "";
@@ -669,27 +756,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: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);
let time = 0;
@@ -723,6 +789,26 @@ class App {
if ((performance as any)?.memory) {
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()
@@ -749,7 +835,7 @@ 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];
@@ -758,11 +844,11 @@ class App {
if (post) {
fragment.appendChild(post);
count++;
}
if (count > 100) {
break;
// count++;
}
// if (count > 100) {
// break;
// }
}
@@ -807,27 +893,28 @@ class App {
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;
// }
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);
// };
let image = document.createElement("img");
// const blob = new Blob([post.image_data as ArrayBuffer], { type: 'image/png' });
const blob = new Blob([post.image_data as ArrayBuffer]);
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";
image.src = url;
// image.src = image.src = "data:image/png;base64," + post.image;
image.className = "postImage";
// containerDiv.appendChild(image);
containerDiv.appendChild(image);
// containerDiv.appendChild(timestampDiv);
return containerDiv;