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

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 {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite");
@@ -176,7 +176,60 @@ export async function mergeDataArray(userID: string, array:any[]): Promise<void>
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) {
try {
@@ -196,7 +249,7 @@ export async function mergeDataArray(userID: string, array:any[]): Promise<void>
});
// console.log(post.post_id, havePost);
if (!havePost ) {
if (!havePost) {
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
}

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;