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

Lotsa changes :)

Browse Source
This commit is contained in:
bobbydigitales
2024-10-03 12:32:59 -07:00
parent c449267f01
commit 2236ff0e6d
41 changed files with 1402 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/db.ts
View File

@@ -10,6 +10,7 @@
const postStoreName: string = "posts";
let keyBase = "dandelion_posts_v1_"
let key = "";
let version = 1;
interface IDBRequestEvent<T = any> extends Event {
@@ -21,26 +22,29 @@ type DBError = Event & {
target: { errorCode: DOMException };
};
function upgrade_0to1(db:IDBDatabase) {
let store = db.createObjectStore(postStoreName, { keyPath: "id", autoIncrement: true });
store.createIndex("datetimeIndex", "post_timestamp", { unique: false });
store.createIndex("postIDIndex", "data.post_id", { unique: true });
}
export function openDatabase(userID: string): Promise<IDBDatabase> {
const dbName = `user_${userID}`
return new Promise((resolve, reject) => {
const request: IDBOpenDBRequest = indexedDB.open(dbName, 1);
const request: IDBOpenDBRequest = indexedDB.open(dbName, version);
request.onerror = (event: Event) => {
// Use a type assertion to access the specific properties of IDBRequest error event
const errorEvent = event as IDBRequestEvent;
reject(`Database error: ${errorEvent.target.error?.message}`);
};
request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
const db: IDBDatabase = (event.target as IDBOpenDBRequest).result;
if (!db.objectStoreNames.contains(postStoreName)) {
let store = db.createObjectStore(postStoreName, { keyPath: "id", autoIncrement: true });
store.createIndex("datetimeIndex", "post_timestamp", { unique: false });
store.createIndex("postIDIndex", "data.post_id", { unique: true });
}
upgrade_0to1(db);
};
request.onsuccess = (event: Event) => {
@@ -50,14 +54,17 @@ export function openDatabase(userID: string): Promise<IDBDatabase> {
});
}
async function getDBTransactionStore(userID:string) {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite");
const store = transaction.objectStore(postStoreName);
return {db, transaction, store}
}
export async function addData(userID: string, data: any): Promise<void> {
try {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite");
const store = transaction.objectStore(postStoreName);
const {db, transaction, store} = await getDBTransactionStore(userID);
const addRequest = store.add({ post_timestamp: data.post_timestamp, data: data });
addRequest.onsuccess = (e: Event) => {
@@ -76,12 +83,9 @@ export async function addData(userID: string, data: any): Promise<void> {
export async function deleteData(userID: string, postID: string) {
try {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite");
const store = transaction.objectStore(postStoreName);
const {db, transaction, store} = await getDBTransactionStore(userID);
const index = store.index("postIDIndex");
const getRequest = index.getKey(postID);
getRequest.onerror = e => console.log((e.target as IDBRequest).error)
@@ -104,9 +108,7 @@ export async function deleteData(userID: string, postID: string) {
export async function clearData(userID: string) {
try {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite");
const store = transaction.objectStore(postStoreName);
const {db, transaction, store} = await getDBTransactionStore(userID);
const clearRequest = store.clear();
clearRequest.onsuccess = (e: Event) => {
@@ -126,9 +128,7 @@ export async function clearData(userID: string) {
export async function addDataArray(userID: string, array: any[]): Promise<void> {
try {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readwrite");
const store = transaction.objectStore(postStoreName);
const {db, transaction, store} = await getDBTransactionStore(userID);
let count = 0;
@@ -161,13 +161,12 @@ export async function addDataArray(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");
const store = transaction.objectStore(postStoreName);
const {db, transaction, store} = await getDBTransactionStore(userID);
const index = store.index("postIDIndex");
transaction.oncomplete = () => {
console.log("Transaction completed successfully");
// console.log("Transaction completed successfully");
db.close();
};
@@ -214,13 +213,12 @@ export async function checkPostIds(userID: string, post_ids: string[]) {
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 {db, transaction, store} = await getDBTransactionStore(userID);
const index = store.index("postIDIndex");
transaction.oncomplete = () => {
console.log("Transaction completed successfully");
// console.log("Transaction completed successfully");
db.close();
};
@@ -266,46 +264,35 @@ export async function mergeDataArray(userID: string, array: any[]): Promise<void
}
}
export async function getPostForUser(userID: string, postID: string): Promise<any | undefined> {
}
export async function getData(userID: string, lowerID: Date, upperID: Date): Promise<any | undefined> {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readonly");
const store = transaction.objectStore(postStoreName);
const { store } = await getDBTransactionStore(userID);
const keyRangeValue = IDBKeyRange.bound(lowerID, upperID);
const index = store.index("datetimeIndex");
return new Promise((resolve, reject) => {
const keyRangeValue = IDBKeyRange.bound(lowerID, upperID);
const getAllRequest = index.getAll(keyRangeValue);
const records: any[] = [];
const index = store.index("datetimeIndex");
const cursorRequest = index.openCursor(keyRangeValue);
cursorRequest.onsuccess = (event: Event) => {
const cursor = (event.target as IDBRequest).result as IDBCursorWithValue;
if (cursor) {
records.push(cursor.value.data); // Collect the record
cursor.continue(); // Move to the next item in the range
} else {
// No more entries in the range
resolve(records);
}
getAllRequest.onsuccess = () => {
const records = getAllRequest.result.map((item: any) => item.data);
resolve(records);
};
cursorRequest.onerror = (event: Event) => {
// Use a type assertion to access the specific properties of IDBRequest error event
const errorEvent = event as IDBRequestEvent;
console.error('Transaction failed:', errorEvent.target.error?.message);
reject(errorEvent.target.error); // Reject the promise if there's an error
getAllRequest.onerror = () => {
console.error('Transaction failed:', getAllRequest.error?.message);
reject(getAllRequest.error);
};
});
}
export async function getAllData(userID: string): Promise<any | undefined> {
const db = await openDatabase(userID);
const transaction = db.transaction(postStoreName, "readonly");
const store = transaction.objectStore(postStoreName);
const {store} = await getDBTransactionStore(userID);
return new Promise((resolve, reject) => {
const getRequest = store.getAll();
@@ -331,9 +318,8 @@ 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 {store} = await getDBTransactionStore(userID);
const index = store.index("postIDIndex");
let keys: string[] = [];
@@ -357,9 +343,7 @@ export async function getAllIds(userID: string): Promise<any | undefined> {
}
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 {store} = await getDBTransactionStore(userID);
const index = store.index("postIDIndex");
let posts = [];

539
src/main.ts
View File

@@ -2,7 +2,7 @@
import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds} from "./db.js"
import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds } from "./db.js"
declare let WebTorrent: any;
@@ -31,6 +31,56 @@ function uuidv4() {
);
}
function uuidToBytes(uuid: string): Uint8Array {
return new Uint8Array(uuid.match(/[a-fA-F0-9]{2}/g)!.map((hex) => parseInt(hex, 16)));
}
// Base58 character set
const BASE58_ALPHABET = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
// Base58 encoding
// Base58 encoding
function encodeBase58(buffer: Uint8Array): string {
let carry;
const digits = [0];
for (const byte of buffer) {
carry = byte;
for (let i = 0; i < digits.length; i++) {
carry += digits[i] << 8;
digits[i] = carry % 58;
carry = Math.floor(carry / 58);
}
while (carry > 0) {
digits.push(carry % 58);
carry = Math.floor(carry / 58);
}
}
let result = '';
for (const digit of digits.reverse()) {
result += BASE58_ALPHABET[digit];
}
// Handle leading zero bytes
for (const byte of buffer) {
if (byte === 0x00) {
result = BASE58_ALPHABET[0] + result;
} else {
break;
}
}
return result;
}
// Convert UUID v4 to Base58
function uuidToBase58(uuid: string): string {
const bytes = uuidToBytes(uuid);
return encodeBase58(bytes);
}
let logLines: string[] = [];
let logLength = 10;
@@ -101,7 +151,7 @@ window.addEventListener('scroll', () => {
console.log('Scrolled to the bottom!');
console.log(scrollPoint, totalPageHeight);
}
});
@@ -123,23 +173,36 @@ 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 );
async function bytesToBase64DataUrl(bytes: Uint8Array, type = "application/octet-stream") {
return await new Promise((resolve, reject) => {
const reader = Object.assign(new FileReader(), {
onload: () => resolve(reader.result),
onerror: () => reject(reader.error),
});
reader.readAsDataURL(new File([bytes], "", { type }));
});
}
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;
async function arrayBufferToBase64(buffer: ArrayBuffer) {
var bytes = new Uint8Array(buffer);
return (await bytesToBase64DataUrl(bytes) as string).replace("data:application/octet-stream;base64,", "");
}
// 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;
// }
async function base64ToArrayBuffer(base64String: string) {
let response = await fetch("data:application/octet-stream;base64," + base64String);
let arrayBuffer = await response.arrayBuffer();
return arrayBuffer;
// let buffer = new Uint8Array(arrayBuffer);
// return buffer;
}
class wsConnection {
@@ -154,7 +217,7 @@ class wsConnection {
messageHandlers: Map<string, (event: any) => void> = new Map();
peerMessageHandlers: Map<string, (data: any) => void> = new Map();
send(message: any) {
let json = ""
try {
@@ -162,13 +225,26 @@ class wsConnection {
} catch (e) {
console.log(e, "wsConnection send: Couldn't serialize message", message);
}
log(`ws->${json.slice(0,240)}`)
// log(`ws->${json.slice(0, 240)}`)
this.websocket!.send(json);
}
helloResponseHandler(data: any) {
for (let [userID, peerIDs] of Object.entries(data.userPeers)) {
let users = [];
try {
let currentUserPeers = data.userPeers[app.router.userID];
users.push([app.router.userID, data.userPeers[app.router.userID]]);
delete data.userPeers[app.router.userID];
} catch (e) {
console.log('helloResponseHandler', e);
}
users = [...users, ...Object.entries(data.userPeers)];
log(`Network: got ${users.length} users from bootstrap peer. ${users.join(',')}`)
for (let [userID, peerIDs] of users) {
this.peers.set(userID, [...Object.keys(peerIDs as any)]);
for (let peerID of [...Object.keys(peerIDs as any)]) {
@@ -176,11 +252,12 @@ class wsConnection {
continue;
}
log(`Network: Requesting post IDs for user ${userID} from peer ${peerID}`);
this.send({
type:"peer_message",
from:this.peerID,
to:peerID,
message:{type:"get_post_ids_for_user", user_id:userID}
type: "peer_message",
from: this.peerID,
to: peerID,
message: { type: "get_post_ids_for_user", user_id: userID }
})
}
}
@@ -193,8 +270,8 @@ class wsConnection {
// log(`getPostsForUserResponse: ${data}`)
let message = data.message;
console.log(`getPostIdsForUserResponseHandler Got ${message.post_ids.length} from peer ${data.from}`);
log(`Network: got ${message.post_ids.length} post IDs for user ${data.message.user_id} from peer ${data.from}`);
console.log(`Checking post IDs...`);
let postIds = await checkPostIds(message.user_id, data.message.post_ids);
@@ -203,18 +280,36 @@ class wsConnection {
return;
}
log(`Network: requesting ${postIds.length} posts for user ${message.user_id} from peer ${data.from}`)
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);
}
// static async compressArrayBuffer(data: ArrayBuffer): Promise<ArrayBuffer> {
// const compressionStream = new CompressionStream('gzip'); // You can also use 'deflate', 'deflate-raw', etc.
// const compressedStream = new Response(
// new Blob([data]).stream().pipeThrough(compressionStream)
// );
// const compressedArrayBuffer = await compressedStream.arrayBuffer();
// return compressedArrayBuffer;
// }
async getPostIdsForUserHandler(data: any) {
let message = data.message;
let postIds = await getAllIds(message.user_id) ?? [];
let postIds = await getAllIds(message.user_id) ?? [];
if (postIds.length === 0) {
log(`Network: I know about user ${message.user_id} but I have 0 posts, so I'm not sending any to to peer ${data.from}`);
return;
}
log(`Network: Sending ${postIds.length} post Ids for user ${message.user_id} to peer ${data.from}`)
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)
this.send(responseMessage);
}
// Send posts to peer
@@ -222,43 +317,65 @@ class wsConnection {
let message = data.message;
let posts = await getPostsByIds(message.user_id, message.post_ids) ?? [];
log(`Network: Sending ${posts.length} posts for user ${message.user_id} to peer ${data.from}`);
app.timerStart();
let output = [];
for (let post of posts) {
let newPost = (post as any).data; if (newPost.image_data) {
newPost.image_data = arrayBufferToBase64(newPost.image_data)
let newPost = (post as any).data;
if (newPost.image_data) {
// let compressedData = await wsConnection.compressArrayBuffer(newPost.image_data);
// console.log((newPost.image_data.byteLength - compressedData.byteLength) / 1024 / 1024);
newPost.image_data = await arrayBufferToBase64(newPost.image_data)
}
// let megs = JSON.stringify(newPost).length/1024/1024;
// console.log(`getPostsForUserHandler id:${newPost.post_id} post length:${megs}`);
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)
let sendTime = app.timerDelta();
log(`send took: ${sendTime.toFixed(2)}ms`);
}
// Got posts from peer
async getPostsForUserReponseHandler(data: any) {
async getPostsForUserReponseHandler(data: any) {
app.timerStart();
let message = data.message;
console.log(`Network: got ${message.posts.length} posts for user ${message.user_id} from peer ${data.from}`);
console.log(`getPostsForUserResponseHandler Got ${message.posts.length} from peer ${data.from}`);
for (let post of message.posts) {
if (message.user_id === app.userID) {
post.author_id = app.userID;
}
post.post_timestamp = new Date(post.post_timestamp);
if (post.image_data) {
post.image_data = base64ToArrayBuffer(post.image_data);
post.image_data = await base64ToArrayBuffer(post.image_data);
}
}
console.log(`Merging same user peer posts...`)
await mergeDataArray(message.user_id, data.message.posts)
await mergeDataArray(message.user_id, data.message.posts);
let receiveTime = app.timerDelta();
log(`Receive took: ${receiveTime.toFixed(2)}ms`);
if (message.user_id === this.userID) {
app.posts = await app.loadPosts(this.userID) ?? [];
app.render(app.posts);
if (message.user_id === app.router.userID) {
app.render();
}
}
async peerMessageHandler(data: any) {
log(`peerMessageHandler ${data}`)
// log(`peerMessageHandler ${JSON.stringify(data)}`)
let peerMessageType = data.message.type;
@@ -287,14 +404,16 @@ class wsConnection {
return;
}
this.websocket.onopen = (event) => {
this.websocket.onopen = async (event) => {
log("ws:connected");
this.send({type:"hello", user_id: this.userID, peer_id:this.peerID});
let knownUsers = [...(await indexedDB.databases())].map((db) => db.name?.replace('user_', ''));
console.log('Network: Sending known users', knownUsers);
this.send({ type: "hello", user_id: this.userID, peer_id: this.peerID, known_users: knownUsers });
this.websocketPingInterval = window.setInterval(() => {
if (!navigator.onLine) {
return;
}
this.send({type:"ping", peer_id: this.peerID});
this.send({ type: "ping", peer_id: this.peerID });
}, 10_000)
};
@@ -306,7 +425,7 @@ class wsConnection {
};
this.websocket.onmessage = (event) => {
log('ws:<-' + event.data.slice(0,240));
// log('ws:<-' + event.data.slice(0, 240));
let data = JSON.parse(event.data);
@@ -361,6 +480,8 @@ class App {
userID: string = '';
peerID: string = '';
posts: Post[] = [];
isHeadless: boolean = false;
showLog: boolean = false;
initMarkdown() {
const renderer = new marked.Renderer();
@@ -511,19 +632,19 @@ class App {
});
}
addPost(userID: string, postText: string, imageData?: ArrayBuffer) {
addPost(userID: string, postText: string, mediaData?: ArrayBuffer, mediaType?: "image/png" | "image/gif" | "image/jpg" | "video/mp4") {
if ((typeof postText !== "string") || postText.length === 0) {
log("Not posting an empty string...")
return;
}
let post = new Post(this.username, userID, postText, new Date(), imageData);
let post = new Post(this.username, userID, postText, new Date(), mediaData);
this.posts.push(post);
// localStorage.setItem(key, JSON.stringify(posts));
addData(userID, post)
this.render(this.posts);
this.render();
}
@@ -551,11 +672,30 @@ class App {
return id;
}
animals = ['shrew', 'jerboa', 'lemur', 'weasel', 'possum', 'possum', 'marmoset', 'planigale', 'mole', 'narwhal'];
adjectives = ['snazzy', 'whimsical', 'jazzy', 'bonkers', 'wobbly', 'spiffy', 'chirpy', 'zesty', 'bubbly', 'perky', 'sassy'];
hashUserIdToIndices() {
let indices = [];
for (let char of this.userID) {
if (char !== '0' && char !== '-') {
indices.push(parseInt(char, 16));
if (indices.length == 2) {
break;
}
}
}
return [indices[0], indices[1]];
}
getUsername() {
let username = localStorage.getItem("dandelion_username");
if (!username) {
username = "not_set"
if (!username || username === "not_set") {
let [one, two] = this.hashUserIdToIndices();
let adjective = this.adjectives[one % this.adjectives.length]
let animal = this.animals[two % this.animals.length]
username = `${adjective}_${animal}`
localStorage.setItem("dandelion_username", username);
}
@@ -592,8 +732,7 @@ class App {
window.addEventListener('online', async () => {
log("online")
connection.connect();
this.posts = await this.loadPosts(this.userID) ?? [];
this.render(this.posts);
this.render();
});
log(`Online status: ${navigator.onLine ? "online" : "offline"}`)
@@ -650,14 +789,32 @@ class App {
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 addP = document.getElementById('button_add_pic') as HTMLDivElement;
// let addPic = document.getElementById('button_add_pic') as HTMLDivElement;
let filePickerLabel = document.getElementById('file_input_label');
let filePicker = document.getElementById('file_input') as HTMLInputElement;
let toggleDark = document.getElementById('toggle_dark') as HTMLButtonElement;
toggleDark.addEventListener('click', () => {
document.documentElement.style.setProperty('--main-bg-color', 'white');
document.documentElement.style.setProperty('--main-fg-color', 'black');
})
filePicker?.addEventListener('change', async (event: any) => {
for (let file of filePicker.files as any) {
let buffer = await file.arrayBuffer();
let type =
this.addPost(this.userID, 'image...', buffer);
}
});
filePickerLabel?.addEventListener('click', () => {
console.log("Add pic...")
})
let usernameField = document.getElementById('username');
usernameField?.addEventListener('input', (event:any)=>{
usernameField?.addEventListener('input', (event: any) => {
this.username = event.target.innerText;
localStorage.setItem("dandelion_username", this.username);
})
@@ -678,12 +835,11 @@ class App {
clearData(userID);
// posts = posts.reverse();
addDataArray(userID, imported_posts);
posts = await this.loadPosts(userID) ?? [];
this.render(posts);
this.render();
});
clearPostsButton.addEventListener('click', () => { clearData(userID); posts = []; this.render(posts) });
clearPostsButton.addEventListener('click', () => { clearData(userID); posts = []; this.render() });
let postButton = document.getElementById("button_post") as HTMLButtonElement;
@@ -693,12 +849,12 @@ class App {
throw new Error();
}
postText.addEventListener('paste', async (e)=>{
postText.addEventListener('paste', async (e) => {
const dataTransfer = e.clipboardData
const file = dataTransfer!.files[ 0 ];
const file = dataTransfer!.files[0];
let buffer = await file.arrayBuffer();
let type =
this.addPost(this.userID, 'image...', buffer);
let type =
this.addPost(this.userID, 'image...', buffer);
});
postButton.addEventListener("click", () => {
@@ -719,10 +875,16 @@ class App {
ddlnLogoButton.addEventListener('click', () => { infoElement.style.display == 'none' ? infoElement.style.display = 'block' : infoElement.style.display = 'none'; });
}
async loadPosts(userID: string) {
async loadPosts(userID: string, postID?: string) {
this.timerStart();
let posts: any = await getData(userID, new Date(2022, 8), new Date());
let posts: Post[] = [];
// if (postID) {
// posts = await gePostForUser(userID, postID);
// }
posts = await getData(userID, new Date(2022, 8), new Date());
if (posts.length > 0) {
log(`Loaded ${posts.length} posts in ${this.timerDelta().toFixed(2)}ms`);
@@ -736,27 +898,47 @@ class App {
// return await getData(userID, new Date(2022, 8), new Date());
}
async main() {
let urlParams = (new URL(window.location.href)).searchParams;
let connection_userID = urlParams.get('connect');
let registration = undefined;
// if (urlParams.get("sw") === "true") {
registration = await this.registerServiceWorker();
// }
if (connection_userID) {
console.log('connect', connection_userID);
localStorage.setItem("dandelion_id", connection_userID);
async purgeEmptyUsers() {
let knownUsers = [...(await indexedDB.databases())].map((db) => db.name?.replace('user_', ''));
if (!knownUsers) {
return;
}
this.username = this.getUsername();
document.getElementById('username')!.innerText = this.username;
for (let userID of knownUsers as string[]) {
let ids = await getAllIds(userID);
if (ids.length === 0) {
console.log(`Purging user ${userID}`);
indexedDB.deleteDatabase(`user_${userID}`);
}
console.log(`https://ddln.app/user/${userID}`);
}
}
async main() {
this.isHeadless = /\bHeadlessChrome\//.test(navigator.userAgent)
let userID = this.getUserID();
let peerID = this.getPeerID();
this.userID = userID;
this.peerID = peerID;
this.initButtons(userID, this.posts, registration);
this.getRoute();
if (this.router.route === App.Route.CONNECT) {
console.log('connect', this.router.userID);
localStorage.setItem("dandelion_id", this.router.userID);
}
let urlParams = (new URL(window.location.href)).searchParams;
let connection_userID = urlParams.get('connect');
let registration = undefined;
if (urlParams.has('log')) {
document.getElementById('info')!.style.display = "block";
this.showLog = true;
}
let time = 0;
let delta = 0;
@@ -776,20 +958,25 @@ class App {
// console.log(code);
// registration.active.postMessage({type:"updateMain", code:code});
this.posts = await this.loadPosts(userID) ?? [];
// this.posts = await this.loadPosts(userID) ?? [];
// debugger;
this.timerStart();
this.render(this.posts); // , (postID:string)=>{this.deletePost(userID, postID)}
let renderTime = this.timerDelta();
log(`render took: ${renderTime.toFixed(2)}ms`);
await this.render(); // , (postID:string)=>{this.deletePost(userID, postID)}
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}`;
// if (urlParams.get("sw") === "true") {
registration = await this.registerServiceWorker();
// }
this.username = this.getUsername();
document.getElementById('username')!.innerText = this.username;
this.initButtons(userID, this.posts, registration);
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'), {
@@ -801,11 +988,14 @@ class App {
correctLevel: QRCode.CorrectLevel.H
});
let qrcodeImage:HTMLImageElement = document.querySelector('#qrcode > img') as HTMLImageElement;
qrcodeImage.classList.add('qrcode_image');
log(`user:${userID} peer:${peerID}`);
(document.querySelector('#qrcode > img') as HTMLImageElement).classList.add('qrcode_image');
(document.querySelector('#qrcode > canvas') as HTMLImageElement).classList.add('qrcode_image');
log(`username:${this.username} user:${userID} peer:${peerID}`);
await this.purgeEmptyUsers();
let websocket = new wsConnection(userID, peerID);
window.addEventListener('beforeunload', () => { websocket.disconnect() })
this.initOffline(websocket);
@@ -828,7 +1018,52 @@ class App {
// })
}
render(posts: Post[]) {
// keep a map of posts to dom nodes.
// on re-render
// posts that are not in our list that we need at add
// posts that are in our list that we need to remove
// postsSet = new Set();
async render() {
if (this.isHeadless) {
console.log('Headless so skipping render...');
return;
}
this.timerStart();
let posts = [];
switch (this.router.route) {
case App.Route.HOME:
case App.Route.CONNECT: {
posts = await this.loadPosts(this.userID) ?? [];
break;
}
case App.Route.USER: {
posts = await this.loadPosts(this.router.userID) ?? [];
break;
}
case App.Route.POST: {
posts = await this.loadPosts(this.router.userID, this.router.postID) ?? [];
break;
}
default: {
console.log("Render: got a route I didn't understand. Rendering HOME:", this.router.route);
posts = await this.loadPosts(this.userID) ?? [];
break;
}
}
// let newPostsSet = new Set(posts.map(post=>post.post_id));
// let newPosts = (newPostsSet as any).difference(this.postsSet);
// // let removedPosts = (this.postsSet as any).difference(newPosts);
// let keepPosts = (this.postsSet as any).intersection(newPostsSet);
// let renderPosts = keepPosts.union(newPosts);
const fragment = document.createDocumentFragment();
let contentDiv = document.getElementById("content");
if (!contentDiv) {
@@ -839,8 +1074,9 @@ class App {
for (let i = posts.length - 1; i >= 0; i--) {
let postData = posts[i];
// this.postsSet.add(postData);
let post = this.renderPost(postData, posts);
let post = this.renderPost(postData);
if (post) {
fragment.appendChild(post);
@@ -858,15 +1094,23 @@ class App {
contentDiv.appendChild(fragment);
let renderTime = this.timerDelta();
log(`render took: ${renderTime.toFixed(2)}ms`);
if ((performance as any)?.memory) {
log(`memory used: ${((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`)
}
}
async deletePost(userID: string, postID: string) {
deleteData(userID, postID)
this.posts = await this.loadPosts(userID) ?? [];
this.render(this.posts);
this.render();
}
renderPost(post: Post, posts: Post[]) {
renderPost(post: Post) {
if (!(post.hasOwnProperty("text"))) {
throw new Error("Post is malformed!");
}
@@ -875,23 +1119,41 @@ class App {
let timestamp = `${post.post_timestamp.toLocaleTimeString()} · ${post.post_timestamp.toLocaleDateString()}`;
let deleteButton = document.createElement('button'); deleteButton.innerText = 'delete';
deleteButton.onclick = () => { this.deletePost(post.author_id, post.post_id) };
let editButton = document.createElement('button'); editButton.innerText = 'edit';
deleteButton.onclick = () => { this.deletePost(this.userID, post.post_id) };
let shareButton = document.createElement('button'); shareButton.innerText = 'share';
shareButton.onclick = async () => {
let shareUrl = `https://${document.location.hostname}/user/${post.author_id}/post/${post.post_id}`;
await navigator.clipboard.writeText(shareUrl)
};
let ownPost = post.author_id === this.userID;
let postTemplate =
`<div><hr>
<div>
<span class='header' title='${timestamp}'>@${post.author} -
<span style="color:rgb(128,128,128)">${post.post_timestamp.toLocaleDateString()}</span>
</span>
<span id="deleteButton"></span><span id="editButton"></span></div>
<div>${marked.parse(post.text)}</div>
</div>`
<div>
<span class='header' title='${timestamp}'><img class="logo" src="/static/favicon.ico">@${post.author} -
<span style="color:rgb(128,128,128)">${post.post_timestamp.toLocaleDateString()}</span>
</span>
${ownPost ? `<span id="deleteButton"></span>` : ''}
${ownPost ? `<span id="editButton"></span>` : ''}
<span id="shareButton"></span>
</div>
<div>${marked.parse(post.text)}</div>
</div>`
containerDiv.innerHTML = postTemplate;
containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
containerDiv.querySelector('#editButton')?.appendChild(editButton);
if (ownPost) {
containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
containerDiv.querySelector('#editButton')?.appendChild(editButton);
}
containerDiv.querySelector('#shareButton')?.appendChild(shareButton);
if (!("image_data" in post && post.image_data)) {
// containerDiv.appendChild(timestampDiv);
@@ -900,6 +1162,7 @@ class App {
}
let image = document.createElement("img");
image.title = `${(post.image_data.byteLength / 1024 / 1024).toFixed(2)}MBytes`;
// 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);
@@ -907,12 +1170,10 @@ class App {
URL.revokeObjectURL(url);
};
image.src = url;
// image.src = image.src = "data:image/png;base64," + post.image;
image.className = "postImage";
image.onclick = () => { App.maximizeElement(image) };
containerDiv.appendChild(image);
// containerDiv.appendChild(timestampDiv);
@@ -920,8 +1181,72 @@ class App {
return containerDiv;
}
static maximizeElement(element: HTMLImageElement) {
element.style.transform = "scale(2.0)"
}
router = {
route: App.Route.HOME,
userID: '',
postID: '',
mediaID: ''
}
getRoute() {
app.router.userID = this.userID;
let path = document.location.pathname;
console.log(">>>>>>>>>>>>>>>>>>>>>>>>>", path);
const regex = "(user/([a-zA-Z0-9\-]+)/?(post/([a-zA-Z0-9\-]+)?/?)?(media/([0-9]+)?)?)|(connect/([a-zA-Z0-9\-]+))";
const match = path.match(new RegExp(regex));
if (match) {
if (match[8]) { // Check for the connect route
this.router.userID = match[8];
this.router.route = App.Route.CONNECT;
} else {
this.router.userID = match[2];
this.router.postID = match[4];
this.router.mediaID = match[6];
if (this.router.mediaID) {
this.router.route = App.Route.MEDIA;
} else if (this.router.postID) {
this.router.route = App.Route.POST;
} else {
this.router.route = App.Route.USER;
}
}
}
console.log(">>>>>>>>>>>>>", this.router, App.Route[this.router.route]);
// user = /user/<ID>
// post = /user/<ID>/post/<ID>
// media = /user/<ID>/post/<ID>/media/<index>
// group = /group/ID/post/<ID>
// hashtag = /hashtag/ -- maybe only hastags in groups
// home = /
}
}
namespace App {
export enum Route {
USER,
POST,
MEDIA,
GROUP,
HOME,
CONNECT,
};
}
let app = new App();
window.addEventListener("load", app.main.bind(app));

140
src/sw.ts
View File

@@ -1,14 +1,15 @@
const debugLog = false;
// Establish a cache name
const cacheName = "dandelion_cache_v1";
const contentToCache = [
'/index.html',
'/main.css',
'/main.js',
'lib//marked.min.js',
'lib/qrcode.min.js',
'/db.js',
'/favicon.ico'
'/static/index.html',
'/static/main.css',
'/static/main.js',
'/static/lib/marked.min.js',
'/static/lib/qrcode.min.js',
'/static/db.js',
'/static/favicon.ico'
];
self.addEventListener("install", (e: any) => {
@@ -19,55 +20,126 @@ self.addEventListener("install", (e: any) => {
"[Service Worker] Caching all: app shell and content",
contentToCache
);
await cache.addAll(contentToCache);
try {
await cache.addAll(contentToCache);
} catch (e) {
debugLog ? console.log(e) : null;
}
})()
);
});
async function responder(event: any) {
console.log('Fetching', event.request.url);
let response = await fetch(event.request);
async function staleWhileRevalidate(event: any) {
if (!response) {
console.log('Fetch failed, falling back to cache', event.request.url);
let cacheMatch = await caches.match(event.request);
if (!cacheMatch) {
// DUnno what to return here!
let cache = await caches.open(cacheName);
let response = await cache.match(event.request);
if (response) {
debugLog ? console.log('Service Worker: Cache hit', event.request.url) : null;
}
const fetchPromise = (async () => {
debugLog ? console.log('Service Worker: Fetching', event.request.url) : null;
let networkResponse = null;
try {
networkResponse = await fetch(event.request);
} catch (e) {
debugLog ? console.log('Service Worker: Failed to fetch', e) : null;
return new Response('Network error occurred', {
status: 404,
statusText: 'Cache miss and fetch failed',
headers: { 'Content-Type': 'text/plain' }
});
}
return cacheMatch;
}
if (response.status === 206) {
console.log('Not caching partial content');
return response;
}
debugLog ? console.log('Service Worker: Updating cache', event.request.url) : null;
console.log('Fetch successful, updating cache');
const cache = await caches.open(cacheName);
try {
cache.put(event.request, response.clone()).catch((error)=>console.log('failed to cache', event.request, error));
} catch (e) {
console.log('failed to cache', event.request)
}
return response;
try {
await cache.put(event.request, networkResponse.clone());
} catch (e) {
debugLog ? console.log('Service Worker: failed to update cache', event.request.url, e) : null;
}
debugLog ? console.log('Service Worker: Returning networkResponse', event.request.url) : null;
return networkResponse;
})();
debugLog ? console.log('Service Worker: Returning return response || fetchPromise', event.request.url) : null;
return response || fetchPromise;
// if (networkResponse) {
// cache.put(event.request, networkResponse.clone())
// return networkResponse;
// }
// caches.open(cacheName)
// .then(function (cache) {
// return cache.match(event.request)
// .then(function (response) {
// var fetchPromise = fetch(event.request)
// .then(function (networkResponse) {
// cache.put(event.request, networkResponse.clone());
// return networkResponse;
// });
// return response || fetchPromise;
// });
// })
}
// async function responder(event: any) {
// debugLog ? console.log('Fetching', event.request.url) : null;
// let response = await fetch(event.request);
// if (!response) {
// debugLog ? console.log('Fetch failed, falling back to cache', event.request.url) : null;
// let cacheMatch = await caches.match(event.request);
// if (!cacheMatch) {
// // DUnno what to return here!
// }
// return cacheMatch;
// }
// if (response.status === 206) {
// debugLog ? console.log('Not caching partial content') : null;
// return response;
// }
// debugLog ? console.log('Fetch successful, updating cache', event.request.url) : null;
// const cache = await caches.open(cacheName);
// try {
// cache.put(event.request, response.clone()).catch((error) => debugLog ? console.log('failed to cache', event.request, error)) : null;
// } catch (e) {
// console.log('failed to cache', event.request)
// }
// return response;
// }
self.addEventListener('fetch', function (event: any) {
event.respondWith(responder(event));
event.respondWith(staleWhileRevalidate(event));
// event.respondWith(responder(event));
});
addEventListener("message", async (e) => {
console.log(`Message received:`, e.data);
debugLog ? console.log(`Message received:`, e.data) : null;
switch (e.data.type) {
case "update_app":
const cache = await caches.open(cacheName);
console.log(`[Service Worker] Caching resources`);
debugLog ? console.log(`[Service Worker] Caching resources`) : null;
// cache.put("/main.js", new Response());
for (let item of contentToCache) {
cache.delete(item);
cache.delete(item);
}
await cache.addAll(contentToCache);