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

Mucho mucho update

Browse Source
This commit is contained in:
bobbydigitales
2024-11-19 19:14:00 -08:00
parent 6c692c4b9f
commit 71b5284b0f
11 changed files with 564 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
static/main.js
View File

@@ -26,7 +26,7 @@ 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";
import { openDatabase, getData, addData, deleteData, mergeDataArray, getAllData, checkPostIds, getAllIds, getPostsByIds } from "db";
// let posts:any;
// let keyBase = "dandelion_posts_v1_"
// let key:string = "";
@@ -97,7 +97,7 @@ function logID(ID) {
// log?.appendChild(newlog);
// }
let logLines = [];
let logLength = 10;
let logLength = 30;
let logVisible = false;
function renderLog() {
if (!logVisible) {
@@ -112,7 +112,7 @@ function renderLog() {
function log(message) {
console.log(message);
logLines.push(`${new Date().toLocaleTimeString()}: ${message}`);
if (logLines.length > 10) {
if (logLines.length > logLength) {
logLines = logLines.slice(logLines.length - logLength);
}
renderLog();
@@ -171,20 +171,10 @@ async function arrayBufferToBase64(buffer) {
var bytes = new Uint8Array(buffer);
return (await bytesToBase64DataUrl(bytes)).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) {
let response = await fetch("data:application/octet-stream;base64," + base64String);
let arrayBuffer = await response.arrayBuffer();
return arrayBuffer;
// let buffer = new Uint8Array(arrayBuffer);
// return buffer;
}
async function compressString(input) {
// Convert the string to a Uint8Array
@@ -249,6 +239,13 @@ class wsConnection {
window.addEventListener('beforeunload', () => this.disconnect());
this.connect();
}
// So we don't need custom logic everywhere we use this, I just wrapped it.
shouldSyncUserID(userID) {
if (app.isHeadless) {
return true;
}
return this.UserIDsToSync.has(userID);
}
async send(message) {
let json = "";
try {
@@ -386,7 +383,7 @@ class wsConnection {
// TODO only get users you're following here. ✅
let knownUsers = [...(await indexedDB.databases())].map(db => db.name?.replace('user_', '')).filter(userID => userID !== undefined);
knownUsers = knownUsers
.filter(userID => this.UserIDsToSync.has(userID))
.filter(userID => this.shouldSyncUserID(userID))
.filter(userID => !this.userBlockList.has(userID))
.filter(async (userID) => (await getAllIds(userID)).length > 0); // TODO getting all the IDs is unecessary, replace it with a test to get a single ID.
console.log('Net: Sending known users', knownUsers.map(userID => logID(userID ?? "")));
@@ -407,7 +404,7 @@ class wsConnection {
}
let getAllUsers = app.router.route !== App.Route.USER;
if (getAllUsers) {
users = [...users, ...Object.entries(data.userPeers).filter(userID => this.UserIDsToSync.has(userID[0]))];
users = [...users, ...Object.entries(data.userPeers).filter(userID => this.shouldSyncUserID(userID[0]))];
}
// log(`Net: got ${users.length} users from bootstrap peer. \n${users.map((user)=>user[0]).join('\n')}`)
for (let [userID, peerIDs] of users) {
@@ -511,6 +508,7 @@ class App {
this.vizGraph = null;
this.qrcode = null;
this.connectURL = "";
this.firstRun = false;
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'];
@@ -579,6 +577,22 @@ class App {
}
return fullText;
}
downloadBinary(data, filename, mimeType = 'application/octet-stream') {
// Create a blob from the ArrayBuffer with the specified MIME type
const blob = new Blob([data], { type: mimeType });
// Create object URL from the blob
const url = window.URL.createObjectURL(blob);
// Create temporary link element
const link = document.createElement('a');
link.href = url;
link.download = filename;
// Append link to body, click it, and remove it
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Clean up the object URL
window.URL.revokeObjectURL(url);
}
downloadJson(data, filename = 'data.json') {
const jsonString = JSON.stringify(data);
const blob = new Blob([jsonString], { type: 'application/json' });
@@ -591,6 +605,8 @@ class App {
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
}
async importPostsForUser(userID, posts) {
}
async exportPostsForUser(userID) {
let posts = await getAllData(userID);
let output = [];
@@ -602,7 +618,10 @@ class App {
}
output.push(newPost);
}
this.downloadJson(output, `ddln_${this.username}_export`);
let compressedData = await compressString(JSON.stringify(output));
const d = new Date();
const timestamp = `${d.getFullYear()}_${String(d.getMonth() + 1).padStart(2, '0')}_${String(d.getDate()).padStart(2, '0')}_${String(d.getHours()).padStart(2, '0')}_${String(d.getMinutes()).padStart(2, '0')}_${String(d.getSeconds()).padStart(2, '0')}`;
this.downloadBinary(compressedData, `ddln_${this.username}_export_${timestamp}.json.gz`);
}
async importTweetArchive(userID, tweetArchive) {
log("Importing tweet archive");
@@ -890,19 +909,25 @@ class App {
initButtons(userID, posts, registration) {
// let font1Button = document.getElementById("button_font1") as HTMLButtonElement;
// let font2Button = document.getElementById("button_font2") as HTMLButtonElement;
let importTweetsButton = document.getElementById("import_tweets");
// let importTweetsButton = document.getElementById("import_tweets") as HTMLButtonElement;
let exportButton = document.getElementById("export_button");
let clearPostsButton = document.getElementById("clear_posts");
let updateApp = document.getElementById("update_app");
let ddlnLogoButton = document.getElementById('ddln_logo_button');
// 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 monitorButton = document.getElementById('monitor_button');
let composeButton = document.getElementById('compose_button');
// let addPic = document.getElementById('button_add_pic') as HTMLDivElement;
let filePickerLabel = document.getElementById('file_input_label');
let filePicker = document.getElementById('file_input');
let toggleDark = document.getElementById('toggle_dark');
// let toggleDark = document.getElementById('toggle_dark') as HTMLButtonElement;
exportButton.addEventListener('click', async (e) => await this.exportPostsForUser(this.userID));
toggleDark.addEventListener('click', () => {
document.documentElement.style.setProperty('--main-bg-color', 'white');
document.documentElement.style.setProperty('--main-fg-color', 'black');
// toggleDark.addEventListener('click', () => {
// document.documentElement.style.setProperty('--main-bg-color', 'white');
// document.documentElement.style.setProperty('--main-fg-color', 'black');
// })
composeButton.addEventListener('click', e => {
document.getElementById('compose').style.display = 'block';
document.getElementById('textarea_post')?.focus();
});
filePicker?.addEventListener('change', async (event) => {
for (let file of filePicker.files) {
@@ -920,22 +945,22 @@ class App {
this.username = event.target.innerText;
localStorage.setItem("dandelion_username", this.username);
});
importTweetsButton.addEventListener('click', async () => {
let file = await this.selectFile('text/*');
console.log(file);
if (file == null) {
return;
}
let tweetData = await this.readFile(file);
tweetData = tweetData.replace('window.YTD.tweets.part0 = ', '');
const tweets = JSON.parse(tweetData);
let imported_posts = await this.importTweetArchive(userID, tweets);
clearData(userID);
// posts = posts.reverse();
addDataArray(userID, imported_posts);
this.render();
});
clearPostsButton.addEventListener('click', () => { clearData(userID); posts = []; this.render(); });
// importTweetsButton.addEventListener('click', async () => {
// let file = await this.selectFile('text/*');
// console.log(file);
// if (file == null) {
// return;
// }
// let tweetData = await this.readFile(file);
// tweetData = tweetData.replace('window.YTD.tweets.part0 = ', '');
// const tweets = JSON.parse(tweetData);
// let imported_posts = await this.importTweetArchive(userID, tweets);
// clearData(userID);
// // posts = posts.reverse();
// addDataArray(userID, imported_posts);
// this.render();
// });
// clearPostsButton.addEventListener('click', () => { clearData(userID); posts = []; this.render() });
let postButton = document.getElementById("button_post");
let postText = document.getElementById("textarea_post");
if (!(postButton && postText)) {
@@ -950,11 +975,15 @@ class App {
postButton.addEventListener("click", () => {
this.createNewPost(userID, postText.value);
postText.value = "";
document.getElementById('compose').style.display = 'none';
});
updateApp.addEventListener("click", () => {
registration?.active?.postMessage({ type: "update_app" });
});
ddlnLogoButton.addEventListener('click', async () => {
// updateApp.addEventListener("click", () => {
// registration?.active?.postMessage({ type: "update_app" });
// });
// ddlnLogoButton.addEventListener('click', async () => {
// this.showInfo()
// });
monitorButton.addEventListener('click', async () => {
this.showInfo();
});
}
@@ -994,7 +1023,7 @@ class App {
async loadPostsFromStorage(userID, postID) {
this.timerStart();
let posts = [];
// if (postID) {
// if (postID) {
// posts = await gePostForUser(userID, postID);
// }
posts = await getData(userID, new Date(2022, 8), new Date());
@@ -1007,23 +1036,24 @@ class App {
// addDataArray(userID, posts);
// return await getData(userID, new Date(2022, 8), new Date());
}
async purgeEmptyUsers() {
async listUsers() {
let knownUsers = [...(await indexedDB.databases())].map((db) => db.name?.replace('user_', ''));
if (knownUsers.length === 0) {
return;
}
let preferredId = app.getPreferentialUserID();
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;
}
// 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}`);
// console.log(`https://ddln.app/${this.username}/${uuidToBase58(userID)}`, userID);
}
}
// createLogoCanvas() {
@@ -1109,6 +1139,9 @@ class App {
// .enableNavigationControls(false);
console.log(`create viz network took ${this.timerDelta()}ms`);
}
async initDB() {
let db = await openDatabase(this.userID);
}
async main() {
// await this.exportPostsForUser('b38b623c-c3fa-4351-9cab-50233c99fa4e');
// Get initial state and route from URL and user agent etc
@@ -1118,7 +1151,7 @@ class App {
// 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);
// window.resizeTo(645, 900);
// this.initLogo()
this.isHeadless = /\bHeadlessChrome\//.test(navigator.userAgent);
this.getRoute();
@@ -1131,6 +1164,7 @@ class App {
this.peername = this.getPeername();
this.userID = this.getUserID();
this.username = this.getUsername();
await this.initDB();
this.connectURL = `https://${document.location.hostname}/connect/${this.userID}`;
document.getElementById('connectURL').innerHTML = `<a href="${this.connectURL}">connect</a>`;
let urlParams = (new URL(window.location.href)).searchParams;
@@ -1177,13 +1211,14 @@ class App {
document.getElementById('peer_id').innerText = `peer_id:${this.peerID}`;
this.initButtons(this.userID, this.posts, registration);
log(`username:${this.username} user:${this.userID} peername:${this.peername} peer:${this.peerID}`);
await this.purgeEmptyUsers();
// await this.purgeEmptyUsers();
let IDsToSync = this.following;
if (this.router.route === App.Route.USER) {
IDsToSync = new Set([this.router.userID]);
}
this.websocket = new wsConnection(this.userID, this.peerID, IDsToSync);
this.initOffline(this.websocket);
// this.listUsers()
// this.createNetworkViz();
// const client = new WebTorrent()
// // Sintel, a free, Creative Commons movie
@@ -1199,7 +1234,11 @@ class App {
// })
}
renderWelcome(contentDiv) {
contentDiv.innerHTML = `<div style="font-size:32px">Doing complicated shennanigans to load posts for you so just hang on a minute, ok!?</div>`;
contentDiv.innerHTML = `<div style="font-size:24px">
Welcome to Dandelion v0.1!<br>
Loading posts for the default feed...
</div>
`;
}
async render() {
if (this.isHeadless) {
@@ -1216,11 +1255,11 @@ class App {
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";
// let compose = document.getElementById('compose');
// if (!compose) {
// break;
// }
// compose.style.display = "block";
break;
}
case App.Route.USER: {
@@ -1274,11 +1313,13 @@ class App {
contentDiv.innerHTML = "";
let count = 0;
this.renderedPosts.clear();
let first = true;
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.data);
// TODO return promises for all image loads and await those.
let post = this.renderPost(postData.data, first);
first = false;
// this.renderedPosts.set(postData.post_id, post);
if (post) {
fragment.appendChild(post);
@@ -1304,7 +1345,7 @@ class App {
deleteData(userID, postID);
this.render();
}
renderPost(post) {
renderPost(post, first) {
if (!(post.hasOwnProperty("text"))) {
throw new Error("Post is malformed!");
}
@@ -1313,8 +1354,7 @@ class App {
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';
// let editButton = document.createElement('button'); editButton.innerText = 'edit';
let shareButton = document.createElement('button');
shareButton.innerText = 'share';
shareButton.onclick = async () => {
@@ -1334,7 +1374,7 @@ class App {
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>
let postTemplate = `<div>${first ? '' : '<hr>'}
<div>
<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>
@@ -1348,7 +1388,7 @@ class App {
containerDiv.innerHTML = postTemplate;
if (ownPost) {
containerDiv.querySelector('#deleteButton')?.appendChild(deleteButton);
containerDiv.querySelector('#editButton')?.appendChild(editButton);
// containerDiv.querySelector('#editButton')?.appendChild(editButton);
}
containerDiv.querySelector('#shareButton')?.appendChild(shareButton);
if (!("image_data" in post && post.image_data)) {
@@ -1367,7 +1407,7 @@ class App {
image.src = url;
// image.src = image.src = "data:image/png;base64," + post.image;
image.className = "postImage";
image.onclick = () => { App.maximizeElement(image); };
// image.onclick = () => { App.maximizeElement(image) };
containerDiv.appendChild(image);
// containerDiv.appendChild(timestampDiv);
return containerDiv;