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

lotsa stuff

Browse Source
This commit is contained in:
bobbydigitales
2024-10-30 20:51:44 -07:00
parent 05c4800461
commit 6ce693cefc
13 changed files with 1421 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

588
static/main.js
View File

@@ -1,5 +1,32 @@
// TODO: virtual list, only rerender what's needed so things can keep playing.
import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, checkPostIds, getAllIds, getPostsByIds } from "./db.js";
/*
Problems
1. Can't delete, very annoying
Tombstones. Send all IDs and all Tombstones. Ask only for posts that we don't get a tombstone for. Don't send posts we have a tombstone for?
Posts don't propagate, you need to refresh to see new posts.
Broadcast when we post to all peers we know about.
3. Posting is slow because too long to render
2. Can't follow people
4. Can't like or reply to posts
user
posts
media
tombstones
following
profile
name
description
profile pic
Restruucture the app around the data. App/WS split is messy. Clean it up.
*/
// import * as ForceGraph3D from "3d-force-graph";
import { getData, addData, addDataArray, clearData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds } from "db";
// let posts:any;
// let keyBase = "dandelion_posts_v1_"
// let key:string = "";
@@ -62,13 +89,19 @@ function uuidToBase58(uuid) {
function logID(ID) {
return ID.substring(0, 5);
}
// function log(message:string) {
// console.log(message);
// let log = document.getElementById("log");
// let newlog = document.createElement('span');
// newlog.innerHTML = `<pre>${message}</pre>`;
// log?.appendChild(newlog);
// }
let logLines = [];
let logLength = 10;
function log(message) {
console.log(message);
logLines.push(`${new Date().toLocaleTimeString()}: ${message}`);
if (logLines.length > 10) {
logLines = logLines.slice(logLines.length - logLength);
let logVisible = false;
function renderLog() {
if (!logVisible) {
return;
}
let log = document.getElementById("log");
if (!log) {
@@ -76,6 +109,13 @@ function log(message) {
}
log.innerText = logLines.join("\n");
}
function log(message) {
console.log(message);
logLines.push(`${new Date().toLocaleTimeString()}: ${message}`);
if (logLines.length > 10) {
logLines = logLines.slice(logLines.length - logLength);
}
}
function generateID() {
if (self.crypto.hasOwnProperty("randomUUID")) {
return self.crypto.randomUUID();
@@ -174,20 +214,29 @@ class wsConnection {
this.websocket.send(json);
}
helloResponseHandler(data) {
debugger;
let users = [];
let receivedUsers = Object.entries(data.userPeers);
log(`Net: got ${receivedUsers.length} users from bootstrap peer.`);
try {
let currentUserPeers = data.userPeers[app.router.userID];
users.push([app.router.userID, data.userPeers[app.router.userID]]);
delete data.userPeers[app.router.userID];
let preferentialID = app.getPreferentialID();
let currentUserPeers = data.userPeers[preferentialID];
users.push([preferentialID, currentUserPeers]);
delete data.userPeers[preferentialID];
}
catch (e) {
console.log('helloResponseHandler', e);
}
users = [...users, ...Object.entries(data.userPeers)];
log(`Net: got ${users.length} users from bootstrap peer. ${users.join(',')}`);
let getAllUsers = app.router.route !== App.Route.USER;
if (getAllUsers) {
users = [...users, ...Object.entries(data.userPeers)];
}
// log(`Net: got ${users.length} users from bootstrap peer. \n${users.map((user)=>user[0]).join('\n')}`)
for (let [userID, peerIDs] of users) {
this.peers.set(userID, [...peerIDs]);
if (this.userBlockList.has(userID)) {
console.log("Skipping user on blocklist:", userID);
continue;
}
// this.peers.set(userID, [...peerIDs]);
for (let peerID of [...peerIDs]) {
if (peerID === this.peerID) {
continue;
@@ -209,29 +258,22 @@ class wsConnection {
async getPostIdsForUserResponseHandler(data) {
// log(`getPostsForUserResponse: ${data}`)
let message = data.message;
log(`Net: got ${message.post_ids.length} post IDs for user ${logID(data.message.user_id)} from peer ${logID(data.from)}`);
// console.log(`Checking post IDs...`);
let postIds = await checkPostIds(message.user_id, data.message.post_ids);
log(`Net: got ${message.post_ids.length} post IDs for user ${logID(message.user_id)} from peer ${logID(data.from)}`);
let startTime = app.timerStart();
let postIds = await checkPostIds(message.user_id, message.post_ids);
log(`ID Check for user ${logID(message.user_id)} took ${app.timerDelta().toFixed(2)}ms`);
log(`Need ${postIds.length} posts for user ${logID(message.user_id)} from peer ${logID(data.from)}`);
if (postIds.length === 0) {
log(`Don't need any posts for user ${logID(data.message.user_id)} from peer ${logID(data.from)}`);
return;
}
log(`Net: Req ${postIds.length} posts for user ${logID(message.user_id)} from peer ${logID(data.from)}`);
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, from_username: app.username, from_peername: app.peername, 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) {
debugger;
let message = data.message;
let postIds = await getAllIds(message.user_id) ?? [];
postIds = postIds.filter((postID) => !this.postBlockList.has(postID));
if (postIds.length === 0) {
log(`Net: I know about user ${logID(message.user_id)} but I have 0 posts, so I'm not sending any to to peer ${logID(data.from)}`);
return;
@@ -240,6 +282,31 @@ class wsConnection {
let responseMessage = { type: "peer_message", from: app.peerID, to: data.from, from_username: app.username, from_peername: app.peername, message: { type: "get_post_ids_for_user_response", post_ids: postIds, user_id: message.user_id } };
this.send(responseMessage);
}
async broadcastNewPost(userID, post) {
let newPost = { ...post };
if (post.image_data) {
newPost.image_data = await arrayBufferToBase64(post.image_data);
}
for (let [peerID, peerInfo] of this.seenPeers.entries()) {
log(`broadcastNewPost: sending new post to ${logID(peerID)}:${peerInfo.peerName}:${peerInfo.userName}`);
this.sendPostsForUser(peerID, app.userID, [newPost]);
}
}
async sendPostsForUser(toPeerID, userID, posts) {
let responseMessage = {
type: "peer_message",
from: app.peerID,
to: toPeerID,
from_username: app.username,
from_peername: app.peername,
message: {
type: "get_posts_for_user_response",
posts: posts,
user_id: userID
}
};
return this.send(responseMessage);
}
// Send posts to peer
async getPostsForUserHandler(data) {
let message = data.message;
@@ -247,23 +314,25 @@ class wsConnection {
log(`Net: Sending ${posts.length} posts for user ${logID(message.user_id)} to peer ${logID(data.from)}`);
app.timerStart();
let output = [];
console.log("Serializing images");
for (let post of posts) {
let newPost = post.data;
if (newPost.image_data) {
// let compressedData = await wsConnection.compressArrayBuffer(newPost.image_data);
// console.log((newPost.image_data.byteLength - compressedData.byteLength) / 1024 / 1024);
// TODO don't do this, use Blobs direclty!
// https://developer.chrome.com/blog/blob-support-for-Indexeddb-landed-on-chrome-dev
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, from_username: app.username, from_peername: app.peername, message: { type: "get_posts_for_user_response", posts: output, user_id: message.user_id } };
this.send(responseMessage);
console.log("Sending posts");
await this.sendPostsForUser(data.from, message.user_id, output);
let sendTime = app.timerDelta();
log(`send took: ${sendTime.toFixed(2)}ms`);
log(`getPostsForUserHandler send took: ${sendTime.toFixed(2)}ms`);
}
// Got posts from peer
async getPostsForUserReponseHandler(data) {
@@ -271,6 +340,13 @@ class wsConnection {
let message = data.message;
console.log(`Net: got ${message.posts.length} posts for user ${logID(message.user_id)} from peer ${logID(data.from)}`);
for (let post of message.posts) {
// HACK: Some posts have insanely large images, so I'm gonna skip them.
// If we supported delete then we we could delete these posts in a sensible way.
if (this.postBlockList.has(post.post_id)) {
log(`Skipping blocked post: ${post.post_id}`);
continue;
}
// HACK - some posts had the wrong author ID
if (message.user_id === app.userID) {
post.author_id = app.userID;
}
@@ -282,13 +358,14 @@ class wsConnection {
console.log(`Merging same user peer posts...`);
await mergeDataArray(message.user_id, data.message.posts);
let receiveTime = app.timerDelta();
log(`Receive took: ${receiveTime.toFixed(2)}ms`);
if (message.user_id === app.router.userID) {
log(`getPostsForUserReponseHandler receive took: ${receiveTime.toFixed(2)}ms`);
if (message.user_id === app.getPreferentialID()) {
app.render();
}
}
async peerMessageHandler(data) {
// log(`peerMessageHandler ${JSON.stringify(data)}`)
this.seenPeers.set(data.from, { peerName: data.from_peername, userName: data.from_username });
let peerMessageType = data.message.type;
let handler = this.peerMessageHandlers.get(peerMessageType);
if (!handler) {
@@ -297,6 +374,13 @@ class wsConnection {
}
handler(data);
}
async sendHello() {
let knownUsers = [...(await indexedDB.databases())].map((db) => db.name?.replace('user_', ''));
knownUsers = knownUsers.filter((userID) => userID && !this.userBlockList.has(userID));
knownUsers = knownUsers.filter(async (userID) => userID && (await getAllIds(userID)).length > 0);
console.log('Net: Sending known users', knownUsers.map(userID => logID(userID ?? "")));
return await this.send({ type: "hello", user_id: this.userID, user_name: app.username, peer_id: this.peerID, peer_name: app.peername, known_users: knownUsers });
}
connect() {
if (this.websocket?.readyState === WebSocket.OPEN) {
return;
@@ -315,14 +399,24 @@ class wsConnection {
}
this.websocket.onopen = async (event) => {
log("ws:connected");
let knownUsers = [...(await indexedDB.databases())].map((db) => db.name?.replace('user_', ''));
console.log('Net: Sending known users', knownUsers);
this.send({ type: "hello", user_id: this.userID, user_name: app.username, peer_id: this.peerID, peer_name: app.peername, known_users: knownUsers });
await this.sendHello();
// If we're running as a headless peer, send a hello message every 60 seconds to refresh the posts we have.
let helloRefreshIntervalPeriod = 120;
if (app.isHeadless) {
console.log("wsConnection: Setting hello refresh interval to ", helloRefreshIntervalPeriod);
this.helloRefreshInterval = window.setInterval(() => {
console.log("wsConnection: Hello refresh.");
if (!navigator.onLine) {
return;
}
this.sendHello();
}, helloRefreshIntervalPeriod * 1000);
}
this.websocketPingInterval = window.setInterval(() => {
if (!navigator.onLine) {
return;
}
this.send({ type: "ping", peer_id: this.peerID });
this.send({ type: "ping", peer_id: this.peerID, peer_name: app.peername, user_id: app.userID, user_name: app.username });
}, 10000);
};
this.websocket.onclose = (event) => {
@@ -333,7 +427,6 @@ class wsConnection {
};
this.websocket.onmessage = (event) => {
// log('ws:<-' + event.data.slice(0, 240));
debugger;
let data = JSON.parse(event.data);
let { type } = data;
let handler = this.messageHandlers.get(type);
@@ -355,11 +448,35 @@ class wsConnection {
this.userID = "";
this.peerID = "";
this.websocketPingInterval = 0;
this.helloRefreshInterval = 0;
this.retry = 10;
this.state = 'disconnected';
this.peers = new Map();
// peers: Map<string, string[]> = new Map();
this.messageHandlers = new Map();
this.peerMessageHandlers = new Map();
this.seenPeers = new Map();
// 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;
// }
this.postBlockList = new Set([
'1c71f53c-c467-48e4-bc8c-39005b37c0d5',
'64203497-f77b-40d6-9e76-34d17372e72a',
'243130d8-4a41-471e-8898-5075f1bd7aec',
'e01eff89-5100-4b35-af4c-1c1bcb007dd0',
'194696a2-d850-4bb0-98f7-47416b3d1662',
'f6b21eb1-a0ff-435b-8efc-6a3dd70c0dca',
'dd1d92aa-aa24-4166-a925-94ba072a9048'
]);
this.userBlockList = new Set([
'5d63f0b2-a842-41bf-bf06-e0e4f6369271',
'5f1b85c4-b14c-454c-8df1-2cacc93f8a77',
'bba3ad24-9181-4e22-90c8-c265c80873ea'
]);
this.userID = userID;
this.peerID = peerID;
this.messageHandlers.set('hello', this.helloResponseHandler.bind(this));
@@ -381,10 +498,16 @@ class App {
this.peername = '';
this.userID = '';
this.peerID = '';
this.following = [];
this.following = new Set();
this.posts = [];
this.isHeadless = false;
this.showLog = false;
this.markedAvailable = false;
this.limitPosts = 50;
this.websocket = null;
this.vizGraph = null;
this.qrcode = null;
this.connectURL = "";
this.time = 0;
this.animals = ['shrew', 'jerboa', 'lemur', 'weasel', 'possum', 'possum', 'marmoset', 'planigale', 'mole', 'narwhal'];
this.adjectives = ['snazzy', 'whimsical', 'jazzy', 'bonkers', 'wobbly', 'spiffy', 'chirpy', 'zesty', 'bubbly', 'perky', 'sassy'];
@@ -401,12 +524,19 @@ class App {
mediaID: ''
};
}
getPreferentialID() {
return this.router.userID.length !== 0 ? this.router.userID : this.userID;
}
initMarkdown() {
if (typeof marked === "undefined") {
return;
}
const renderer = new marked.Renderer();
renderer.link = (href, title, text) => {
return `<a href="${href}" target="_blank"${title ? ` title="${title}"` : ''}>${text}</a>`;
};
marked.setOptions({ renderer: renderer });
this.markedAvailable = true;
}
// arrayBufferToBase64(buffer: ArrayBuffer) {
// return new Promise((resolve, reject) => {
@@ -446,6 +576,20 @@ class App {
}
return fullText;
}
async exportPostsForUser(userID) {
let posts = await getAllData(userID);
let output = [];
console.log("Serializing images");
for (let post of posts) {
let newPost = post.data;
if (newPost.image_data) {
newPost.image_data = await arrayBufferToBase64(newPost.image_data);
}
output.push(newPost);
}
let json = JSON.stringify(output);
console.log(json);
}
async importTweetArchive(userID, tweetArchive) {
log("Importing tweet archive");
let postsTestData = [];
@@ -515,20 +659,83 @@ class App {
console.error("Service Worker registration failed:", error);
});
}
addPost(userID, postText, mediaData, mediaType) {
async compressImage(imageData, mimeType, quality = 0.5) {
let uncompressedByteLength = imageData.byteLength;
log(`compressImage input:${mimeType} size:${(uncompressedByteLength / 1024).toFixed(2)}KBi quality:${quality}`);
try {
// Convert ArrayBuffer to Blob
const blob = new Blob([imageData], { type: mimeType });
const bitmap = await createImageBitmap(blob, {
imageOrientation: 'none',
// resizeWidth: desiredWidth,
// resizeHeight: desiredHeight,
// resizeQuality: 'high',
});
// const bitmap = await createImageBitmap(bitmapTemp, {
// imageOrientation: 'none',
// resizeWidth: 600,
// resizeHeight: 800,
// // resizeHeight: (bitmapTemp.height / bitmapTemp.width) * 600,
// resizeQuality: 'high',
// })
//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// Create a canvas and draw the image onto it
// let scale = 1/32;
// let scaledWidth = bitmap.width*scale;
// let scaledHeight = bitmap.height*scale;
// let scale = 1/32;
let scaledWidth = bitmap.width;
let scaledHeight = bitmap.height;
let resizeThreshold = 600;
if (scaledWidth > resizeThreshold) {
scaledWidth = resizeThreshold;
scaledHeight = (bitmap.height / bitmap.width) * resizeThreshold;
}
const canvas = document.createElement('canvas');
canvas.width = scaledWidth;
canvas.height = scaledHeight;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
canvas.getContext('2d').drawImage(bitmap, 0, 0, bitmap.width, bitmap.height, 0, 0, scaledWidth, scaledHeight);
// Compress the image and get the result as an ArrayBuffer
const compressedBlob = await new Promise((resolve, reject) => canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('Compression failed.'))), 'image/jpeg', quality));
// TODO: Don't need to do this as we'll be storing blobs directly.
let compressedArrayBuffer = await compressedBlob.arrayBuffer();
let compressedByteLength = compressedArrayBuffer.byteLength;
let percent = (uncompressedByteLength / compressedByteLength);
log(`compressImage: compressedSize:${(compressedArrayBuffer.byteLength / 1024).toFixed(2)}KBi ${percent.toFixed(2)}:1 compression`);
return compressedArrayBuffer;
}
catch (e) {
console.error(e);
return null;
}
}
async createNewPost(userID, postText, mediaData, mimeType) {
if ((typeof postText !== "string") || postText.length === 0) {
log("Not posting an empty string...");
return;
}
if (mediaData &&
(mimeType === 'image/jpg' || mimeType === 'image/jpeg' || mimeType === 'image/png') &&
mediaData.byteLength > 500 * 1024) {
let compressedImage = await this.compressImage(mediaData, mimeType, 0.9);
if (compressedImage) {
mediaData = compressedImage;
}
}
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.websocket?.broadcastNewPost(userID, post);
this.render();
}
getPeerID() {
let id = localStorage.getItem("peer_id");
if (!id) {
log(`Didn't find a peer ID, generating one`);
id = generateID();
localStorage.setItem("peer_id", id);
}
@@ -537,6 +744,7 @@ class App {
getUserID() {
let id = localStorage.getItem("dandelion_id");
if (!id) {
log(`Didn't find a user ID, generating one`);
id = generateID();
localStorage.setItem("dandelion_id", id);
}
@@ -657,8 +865,10 @@ class App {
filePicker?.addEventListener('change', async (event) => {
for (let file of filePicker.files) {
let buffer = await file.arrayBuffer();
let type = this.addPost(this.userID, 'image...', buffer);
await this.createNewPost(this.userID, 'image...', buffer, file.type);
}
// Reset so that if they pick the same image again, we still get the change event.
filePicker.value = '';
});
filePickerLabel?.addEventListener('click', () => {
console.log("Add pic...");
@@ -693,10 +903,10 @@ class App {
const dataTransfer = e.clipboardData;
const file = dataTransfer.files[0];
let buffer = await file.arrayBuffer();
let type = this.addPost(this.userID, 'image...', buffer);
await this.createNewPost(this.userID, 'image...', buffer, file.type);
});
postButton.addEventListener("click", () => {
this.addPost(userID, postText.value);
this.createNewPost(userID, postText.value);
postText.value = "";
});
updateApp.addEventListener("click", () => {
@@ -706,9 +916,53 @@ class App {
if (infoElement === null) {
return;
}
ddlnLogoButton.addEventListener('click', () => { infoElement.style.display == 'none' ? infoElement.style.display = 'block' : infoElement.style.display = 'none'; });
ddlnLogoButton.addEventListener('click', async () => {
infoElement.style.display == 'none' ? infoElement.style.display = 'block' : infoElement.style.display = 'none';
logVisible = infoElement.style.display == 'block';
renderLog();
if (this.qrcode != null) {
return;
}
this.qrcode = await new QRCode(document.getElementById('qrcode'), {
text: this.connectURL,
width: 150,
height: 150,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
document.querySelector('#qrcode > img').classList.add('qrcode_image');
document.querySelector('#qrcode > canvas').classList.add('qrcode_image');
});
}
async loadPosts(userID, postID) {
async getPostsForFeed() {
// get N posts from each user and sort them by date.
// This isn't really going to work very well.
// Eventually we'll need a db that only has followed user posts so we can get them chronologically
//
let posts = [];
for (let followedID of this.following.keys()) {
posts = posts.concat(await getData(followedID, new Date(2022, 8), new Date()));
// console.log(followedID);
}
// @ts-ignore
posts = posts.sort((a, b) => a.post_timestamp - b.post_timestamp);
return posts;
}
async loadFollowersFromStorage(userID) {
if (userID === 'b38b623c-c3fa-4351-9cab-50233c99fa4e') {
return [
'b38b623c-c3fa-4351-9cab-50233c99fa4e',
'6d774268-16cd-4e86-8bbe-847a0328893d', // Sean
'05a495a0-0dd8-4186-94c3-b8309ba6fc4c', // Martin
'a0e42390-08b5-4b07-bc2b-787f8e5f1297', // BMO
'bba3ad24-9181-4e22-90c8-c265c80873ea', // Harry
'8f6802be-c3b6-46c1-969c-5f90cbe01479', // Fiona
];
}
return ['a0e42390-08b5-4b07-bc2b-787f8e5f1297']; // Follow BMO by default :)
}
async loadPostsFromStorage(userID, postID) {
this.timerStart();
let posts = [];
// if (postID) {
@@ -726,36 +980,140 @@ class App {
}
async purgeEmptyUsers() {
let knownUsers = [...(await indexedDB.databases())].map((db) => db.name?.replace('user_', ''));
if (!knownUsers) {
if (knownUsers.length === 0) {
return;
}
let preferredId = app.getPreferentialID();
for (let userID of knownUsers) {
if (userID === preferredId) {
continue;
}
let ids = await getAllIds(userID);
if (ids.length === 0) {
console.log(`Purging user ${userID}`);
indexedDB.deleteDatabase(`user_${userID}`);
continue;
}
console.log(`https://ddln.app/user/${userID}`);
}
}
// createLogoCanvas() {
// let logoElement = document.getElementById('ddln_logo_button');
// if (!logoElement) {
// return;
// }
// let canvas = document.createElement('canvas');
// canvas.width = 32;
// canvas.height = 32;
// logoElement.appendChild(canvas);
// let ctx = canvas.getContext('2d');
// if (!ctx) {
// return;
// }
// if (ctx) {
// ctx.fillStyle = "red"; // Set fill color to red
// ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill entire canvas
// }
// return canvas;
// }
// initLogo() {
// const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
// if (prefersReducedMotion.matches) {
// return;
// }
// // let canvas = this.createLogoCanvas();
// // if (!canvas) {
// // return;
// // }
// prefersReducedMotion.addEventListener("change", event => {
// let preferReducedMotion = event.matches == true;
// if (preferReducedMotion) {
// // canvas.remove();
// return;
// }
// // this.createLogoCanvas();
// });
// }
createNetworkViz() {
let timer = this.timerStart();
this.vizGraph = ForceGraph3D();
let vizElement = document.getElementById('ddln_logo_button');
if (!vizElement) {
return;
}
const N = 8;
const gData = {
nodes: [{ id: 0 }],
links: []
};
this.vizGraph(vizElement)
.graphData(gData)
// .width(32)
// .height(32)
.width(600)
.height(300)
.showNavInfo(false)
.nodeRelSize(8)
.nodeOpacity(1.0)
.linkWidth(2)
.linkOpacity(1.0)
.backgroundColor('rgba(0,0,0,0)');
let angle = 0;
const distance = 400;
setInterval(() => {
const { nodes, links } = this.vizGraph.graphData();
const id = nodes.length;
this.vizGraph.graphData({
nodes: [...nodes, { id }],
links: [...links, { source: id, target: Math.round(Math.random() * (id - 1)) }]
});
}, 1000);
setInterval(() => {
this.vizGraph.cameraPosition({
x: distance * Math.sin(angle),
z: distance * Math.cos(angle)
});
angle += Math.PI / 300;
}, 10);
// .backgroundColor('rgba(0,0,0,0)');
// .enablePointerInteraction(false)
// .enableNavigationControls(false);
console.log(`create viz network took ${this.timerDelta()}ms`);
}
async main() {
// await this.exportPostsForUser('bba3ad24-9181-4e22-90c8-c265c80873ea');
// Get initial state and route from URL and user agent etc
// Set local state (userid etc) based on that.
// Init libraries
// Render
// Load all images async
// Start the process of figuring out what posts we need
// Download posts once all current images are loaded
window.resizeTo(645, 900);
// this.initLogo()
this.isHeadless = /\bHeadlessChrome\//.test(navigator.userAgent);
let userID = this.getUserID();
let peerID = this.getPeerID();
this.userID = userID;
this.peerID = peerID;
this.getRoute();
if (this.router.route === App.Route.CONNECT) {
console.log('connect', this.router.userID);
localStorage.setItem("dandelion_id", this.router.userID);
localStorage.removeItem("dandelion_username");
}
this.peerID = this.getPeerID();
this.peername = this.getPeername();
this.userID = this.getUserID();
this.username = this.getUsername();
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;
}
if (urlParams.has('headless')) {
this.isHeadless = true;
}
let limitPostsParam = urlParams.get('limitPosts');
if (limitPostsParam) {
this.limitPosts = parseInt(limitPostsParam);
}
let time = 0;
let delta = 0;
// let isPersisted = await navigator?.storage?.persisted();
@@ -780,32 +1138,22 @@ class App {
// let storageUsed = (await navigator?.storage?.estimate())?.usage/1024/1024
// }
// if (urlParams.get("sw") === "true") {
let registration;
registration = await this.registerServiceWorker();
// }
this.username = this.getUsername();
document.getElementById('username').innerText = `${this.username}`;
this.peername = this.getPeername();
document.getElementById('peername').innerText = `peername:${this.peername}`;
document.getElementById('user_id').innerText = `user_id:${this.userID}`;
document.getElementById('peer_id').innerText = `peer_id:${this.peerID}`;
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'), {
text: connectURL,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
document.querySelector('#qrcode > img').classList.add('qrcode_image');
document.querySelector('#qrcode > canvas').classList.add('qrcode_image');
log(`username:${this.username} user:${userID} peer:${peerID}`);
this.initButtons(this.userID, this.posts, registration);
this.connectURL = `https://${document.location.hostname}/connect/${this.userID}`;
document.getElementById('connectURL').innerHTML = `<a href="${this.connectURL}">connect</a>`;
log(`username:${this.username} user:${this.userID} peername:${this.peername} peer:${this.peerID}`);
await this.purgeEmptyUsers();
let websocket = new wsConnection(userID, peerID);
window.addEventListener('beforeunload', () => { websocket.disconnect(); });
this.initOffline(websocket);
this.websocket = new wsConnection(this.userID, this.peerID);
window.addEventListener('beforeunload', () => { this.websocket?.disconnect(); });
this.initOffline(this.websocket);
// this.createNetworkViz();
// 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';
@@ -819,71 +1167,92 @@ class App {
// file.appendTo(document.getElementById('torrent-content'));
// })
}
computeDiff(newPosts) {
// return {added, deleted, same}
}
async render() {
if (this.isHeadless) {
console.log('Headless so skipping render...');
return;
}
performance.mark("render-start");
this.timerStart();
let existingPosts = this.posts;
this.posts = [];
switch (this.router.route) {
case App.Route.HOME:
case App.Route.CONNECT: {
this.posts = await this.loadPosts(this.userID) ?? [];
this.following = new Set(await this.loadFollowersFromStorage(this.userID) ?? []);
this.posts = await this.getPostsForFeed();
// this.posts = await this.loadPostsFromStorage(this.userID) ?? [];
let compose = document.getElementById('compose');
if (!compose) {
break;
}
compose.style.display = "block";
break;
}
case App.Route.USER: {
this.posts = await this.loadPosts(this.router.userID) ?? [];
this.posts = await this.loadPostsFromStorage(this.router.userID) ?? [];
let compose = document.getElementById('compose');
if (!compose) {
break;
}
compose.style.display = "none";
break;
}
case App.Route.POST: {
this.posts = await this.loadPosts(this.router.userID, this.router.postID) ?? [];
this.posts = await this.loadPostsFromStorage(this.router.userID, this.router.postID) ?? [];
let compose = document.getElementById('compose');
if (!compose) {
break;
}
compose.style.display = "none";
break;
}
default: {
console.log("Render: got a route I didn't understand. Rendering HOME:", this.router.route);
this.posts = await this.loadPosts(this.userID) ?? [];
this.posts = await this.loadPostsFromStorage(this.userID) ?? [];
break;
}
}
let existingPostSet = new Set(existingPosts.map(post => post.post_id));
let incomingPostSet = new Set(this.posts.map(post => post.post_id));
let addedPosts = [];
for (let post of this.posts) {
if (!existingPostSet.has(post.post_id)) {
addedPosts.push(post);
}
}
let deletedPosts = [];
for (let post of existingPosts) {
if (!incomingPostSet.has(post.post_id)) {
deletedPosts.push(post);
}
}
console.log("added:", addedPosts, "removed:", deletedPosts);
const fragment = document.createDocumentFragment();
let contentDiv = document.getElementById("content");
if (!contentDiv) {
throw new Error();
}
if (this.posts.length === 0) {
contentDiv.innerHTML = `<div style="font-size:32px">Doing complicated shennanigans to load posts for you so just hang on a minute, ok!?</div>`;
return;
}
// let existingPostSet = new Set(existingPosts.map(post => post.post_id));
// let incomingPostSet = new Set(this.posts.map(post => post.post_id));
// let addedPosts = [];
// for (let post of this.posts) {
// if (!existingPostSet.has(post.post_id)) {
// addedPosts.push(post);
// }
// }
// let deletedPosts = [];
// for (let post of existingPosts) {
// if (!incomingPostSet.has(post.post_id)) {
// deletedPosts.push(post);
// }
// }
// console.log("added:", addedPosts, "removed:", deletedPosts);
const fragment = document.createDocumentFragment();
contentDiv.innerHTML = "";
// let count = 0;
let count = 0;
this.renderedPosts.clear();
for (let i = this.posts.length - 1; i >= 0; i--) {
let postData = this.posts[i];
// this.postsSet.add(postData);
// return promises for all image loads and await those.
let post = this.renderPost(postData);
this.renderedPosts.set(postData.post_id, post);
if (post) {
fragment.appendChild(post);
// count++;
count++;
}
if (count > this.limitPosts) {
break;
}
// if (count > 100) {
// break;
// }
}
if (!contentDiv) {
throw new Error("Couldn't get content div!");
@@ -891,6 +1260,8 @@ class App {
contentDiv.appendChild(fragment);
let renderTime = this.timerDelta();
log(`render took: ${renderTime.toFixed(2)}ms`);
performance.mark("render-end");
performance.measure('render-time', 'render-start', 'render-end');
if (performance?.memory) {
log(`memory used: ${(performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`);
}
@@ -917,16 +1288,28 @@ class App {
await navigator.clipboard.writeText(shareUrl);
};
let ownPost = post.author_id === this.userID;
let markdown = post.text;
if (this.markedAvailable) {
markdown = marked.parse(post.text);
}
// if (markdown.includes("<iframe")) {
// debugger;
// }
// markdown = this.replaceIframeWithDiv(markdown);
if (markdown.includes("<iframe") && markdown.includes(`src="https://dotbigbang`)) {
markdown = markdown.replace("<iframe", `<iframe style="width:100%;height:50px;display:none" onblur="this.style.display = 'inline';"`);
}
let userURL = `https://${document.location.hostname}/user/${post.author_id}/`;
let postTemplate = `<div><hr>
<div>
<span class='header' title='${timestamp}'><img class="logo" src="/static/favicon.ico">@${post.author} -
<span class='header' title='${timestamp}'><img class="logo" src="/static/favicon.ico"><a class="username" href="${userURL}">@${post.author}</a> -
<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>${markdown}</div>
</div>`;
containerDiv.innerHTML = postTemplate;
if (ownPost) {
@@ -959,7 +1342,6 @@ class App {
element.style.transform = "scale(2.0)";
}
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\-]+))";
@@ -984,7 +1366,7 @@ class App {
}
}
}
console.log(">>>>>>>>>>>>>", this.router, App.Route[this.router.route]);
console.log(">>>>>>>>>>>>>>>>>>>>>>>>>", this.router.userID, this.router.postID, this.router.mediaID, App.Route[this.router.route]);
// user = /user/<ID>
// post = /user/<ID>/post/<ID>
// media = /user/<ID>/post/<ID>/media/<index>