wip

src/main.ts

@@ -0,0 +1,447 @@
+import { openDatabase, getData, addData, addDataArray, getAllData } from "./db.js"
+
+// let posts:any;
+// let keyBase = "dandelion_posts_v1_"
+// let key:string = "";
+
+interface PostTimestamp {
+  year: number,
+  month: number,
+  day: number,
+  hour: number,
+  minute: number,
+  second: number,
+}
+
+class Post {
+  constructor(author: string, text: string, post_timestamp: PostTimestamp, format = null) {
+    post_timestamp = post_timestamp;
+    author = author;
+    text = text;
+    format = format;
+  }
+}
+
+
+
+function uuidv4() {
+  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c: any) =>
+    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+  );
+}
+
+let logLines: string[] = [];
+let logLength = 10;
+function log(message: string) {
+  logLines.push(`${message}`);
+  if (logLines.length > 10) {
+    logLines = logLines.slice(logLines.length - logLength);
+  }
+  let log = document.getElementById("log");
+  if (!log) {
+    throw new Error();
+  }
+  log.innerText = logLines.join("\n");
+}
+
+function 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.onerror = (error) => {
+      reject(error);
+    };
+
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function createTestData() {
+  let postsTestData = await (await fetch("./postsTestData.json")).json();
+
+  return postsTestData;
+}
+
+let time = 0;
+
+function timerStart() {
+  time = performance.now();
+}
+
+function timerDelta() {
+  return performance.now() - time;
+}
+
+async function createTestData2() {
+  let postsTestData: any[] = [];
+
+  let response = await fetch("./tweets.js");
+  let tweetsText = await response.text();
+  tweetsText = tweetsText.replace("window.YTD.tweets.part0", "window.tweetData");
+
+  new Function(tweetsText)();
+
+
+  // let tweets = JSON.parse(tweetJSON);
+
+  for (let entry of (window as any).tweetData) {
+    // if (entry.tweet.hasOwnProperty("in_reply_to_screen_name") || entry.tweet.retweeted || entry.tweet.full_text.startsWith("RT")) {
+    //   continue;
+    // }
+
+    let mediaURL: string = entry.tweet?.entities?.media?.[0]?.media_url;
+    let isImage = false;
+    if (mediaURL) {
+      isImage = mediaURL.includes('jpg');
+    }
+
+    let imageData;
+    let encodedImage = null;
+    if (isImage) {
+      try {
+        imageData = await (await fetch(mediaURL)).arrayBuffer();
+        encodedImage = await arrayBufferToBase64(imageData);
+      } catch (e) {
+        console.log(e);
+      }
+
+    }
+
+
+    postsTestData.push({
+      post_timestamp: {
+        year: 2023,
+        month: 10,
+        day: 19,
+        hour: 14,
+        minute: 53,
+        second: 0,
+      },
+      author: `bobbydigitales`,
+      text: entry.tweet.full_text,
+      image: encodedImage
+    });
+  }
+
+  let rant = await (await fetch('ranting.md')).text();;
+
+  postsTestData.unshift({
+    post_timestamp: {
+      year: 2023,
+      month: 10,
+      day: 19,
+      hour: 14,
+      minute: 53,
+      second: 0,
+    },
+    author: `bobbydigitales`,
+    text: rant
+  })
+
+  return postsTestData;
+}
+
+async function createTestData3(userID: string) {
+  let posts = await (await (fetch('./posts.json'))).json();
+
+  return posts;
+}
+
+function post(key: string, posts: { author: any; text: any; image: any; }[], author: any, text: any, image: any) {
+  posts.push({ author: author, text: text, image: image });
+  localStorage.setItem(key, JSON.stringify(posts));
+}
+
+async function registerServiceWorker() {
+  if (!("serviceWorker" in navigator)) {
+    return;
+  }
+
+  let registrations = await navigator.serviceWorker.getRegistrations();
+  if (registrations.length > 0) {
+    console.log("Service worker already registered.");
+    return registrations[0];
+  }
+
+  navigator.serviceWorker
+    .register("/sw.js")
+    .then((registration) => {
+      console.log("Service Worker registered with scope:", registration.scope);
+      return registration;
+    })
+    .catch((error) => {
+      console.error("Service Worker registration failed:", error);
+    });
+}
+
+function addPost(userID: string, posts: Post[], postText: string) {
+  let post: Post = {
+    author: `bobbydigitales`,
+    text: postText,
+  };
+
+
+  posts.unshift(post);
+  // localStorage.setItem(key, JSON.stringify(posts));
+  addData(userID, post)
+
+  render(posts);
+}
+
+function generateID() {
+  if (self.crypto.hasOwnProperty("randomUUID")) {
+    return self.crypto.randomUUID();
+  }
+
+  return uuidv4();
+}
+
+function getUserID() {
+  let id = localStorage.getItem("dandelion_id");
+
+  if (!id) {
+    id = generateID();
+    localStorage.setItem("dandelion_id", id);
+  }
+
+  return id;
+}
+
+function connectWebsocket(userID: string) {
+  let websocket = new WebSocket(`ws://${window.location.hostname}:${window.location.port}/ws`);
+
+  websocket.onopen = function (evt) {
+    console.log("CONNECTED");
+    websocket.send(`{"messageType":"connect", "id": "${userID}"}`);
+  };
+
+  websocket.onclose = function (evt) {
+    console.log("DISCONNECTED");
+  };
+
+  websocket.onmessage = function (evt) {
+    console.log('RESPONSE: ' + evt.data);
+  };
+
+  websocket.onerror = function (evt) {
+    console.log('ERROR: ' + evt);
+  };
+
+  return websocket;
+}
+
+function setFont(fontName: string) {
+
+  document.body.style.fontFamily = fontName;
+  let textArea = document.getElementById('textarea_post');
+  if (!textArea) {
+    return;
+  }
+
+  textArea.style.fontFamily = fontName;
+}
+
+function initOffline() {
+  // Event listener for going offline
+  window.addEventListener('offline', () => { log("offline") });
+
+  // Event listener for going online
+  window.addEventListener('online', () => { log("online") });
+
+  log(`${navigator.onLine ? "online" : "offline"}`)
+
+}
+
+function initButtons(userID: string, posts: Post[]) {
+  let font1Button = document.getElementById("button_font1") as HTMLButtonElement;
+  let font2Button = document.getElementById("button_font2") as HTMLButtonElement;
+
+  font1Button.addEventListener('click', () => { setFont('Bookerly'); });
+  font2Button.addEventListener('click', () => { setFont('Virgil') });
+
+
+  let postButton = document.getElementById("button_post") as HTMLButtonElement;
+  let postText = document.getElementById("textarea_post") as HTMLTextAreaElement;
+
+  if (!(postButton && postText)) {
+    throw new Error();
+  }
+
+  postButton.addEventListener("click", () => {
+    addPost(userID, posts, postText.value);
+    postText.value = "";
+  });
+
+}
+
+async function loadPosts(userID: string) {
+ 
+  timerStart();
+  let posts = await getData(userID, 1, 500);
+  
+  if (posts.length > 0) {
+    log(`Loaded ${posts.length} posts in ${timerDelta().toFixed(2)}ms`);
+    return posts;
+  }
+
+  posts = await createTestData3(userID);
+  
+  log("Adding test data...");
+  addDataArray(userID, posts);
+
+  // let count = 0;
+  // for (let post of posts) {
+  //   debugger;
+  //   await addData(userID, post);
+  //   count++;
+  //   if (count % 100 === 0) {
+  //     log(`Added ${count} posts...`);
+  //   }
+  // }
+  // log("Finished!");
+
+
+  return await getData(userID, 1, 100);
+  
+
+  // debugger;
+
+  // let postsJSON = await getData(userID)
+
+  // if (!postsJSON) {
+  //   let testPosts = await createTestData3(userID);
+  //   for (let post of testPosts) {
+  //     await addData(userID, post);
+  //   }
+  //   // localStorage.setItem(key, postsJSON);
+  // }
+
+  // let delta = timerDelta();
+  // if (postsJSON) {
+  //   log(`read ${(postsJSON.length / 1024 / 1024).toFixed(2)}Mb from indexedDB in ${delta.toFixed(2)}ms`);
+  // }
+
+  // let posts = [];
+  // try {
+  //   timerStart();
+  //   posts = JSON.parse(postsJSON);
+  //   delta = timerDelta();
+  //   log(`parsed ${posts.length} posts from indexedDB in ${delta.toFixed(2)}ms`);
+  // } catch (e) {
+  //   log("Couldn't read posts from local storage, resetting...");
+  // }
+
+  // if (!posts) {
+  //   await createTestData3();
+  //   // localStorage.setItem(key, JSON.stringify(testData));
+  //   posts = testData;
+  // }
+
+  // return posts;
+}
+
+async function main() {
+  let posts: Post[] = [];
+  let time = 0; ``
+  let delta = 0;
+
+  let urlParams = (new URL(window.location.href)).searchParams;
+
+  if (urlParams.get("sw") === "true") {
+    let registration = await registerServiceWorker();
+  }
+
+  let userID = getUserID();
+
+
+  log(`Your user ID is: ${userID}`);
+
+  if (navigator.storage && navigator.storage.persist && !navigator.storage.persisted) {
+    const isPersisted = await navigator.storage.persist();
+    console.log(`Persisted storage granted: ${isPersisted}`);
+  }
+
+  let websocket = connectWebsocket(userID);
+  initOffline();
+  initButtons(userID, posts);
+
+  // let main = await fetch("/main.js");
+  // let code = await main.text();
+  //   console.log(code);
+  //   registration.active.postMessage({type:"updateMain", code:code});
+
+  posts = await loadPosts(userID);
+  // debugger;
+
+  timerStart();
+  render(posts);
+  let renderTime = timerDelta();
+
+  log(`render took: ${renderTime.toFixed(2)}ms`);
+
+  log(`memory used: ${((performance as any).memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}Mb`)
+}
+
+function render(posts: Post[]) {
+  const fragment = document.createDocumentFragment();
+  let contentDiv = document.getElementById("content");
+  if (!contentDiv) {
+    throw new Error();
+  }
+  contentDiv.innerHTML = "";
+  let count = 0;
+  for (const postData of posts) {
+    let post = renderPost(postData);
+
+    fragment.appendChild(post);
+
+    count++;
+    if (count > 500) {
+      break;
+    }
+  }
+
+  if (!contentDiv) {
+    throw new Error("Couldn't get content div!");
+  }
+
+  contentDiv.appendChild(fragment);
+
+}
+
+function renderPost(post: Post) {
+  if (!(post.hasOwnProperty("text"))) {
+    throw new Error("Post is malformed!");
+  }
+  let containerDiv = document.createElement("div");
+  let textDiv = document.createElement("div");
+  let hr = document.createElement("hr");
+
+  // @ts-ignore
+  textDiv.innerHTML = marked.parse(post.text);
+  containerDiv.appendChild(hr);
+  containerDiv.appendChild(textDiv);
+
+  if (!("image" in post && post.image)) {
+    return containerDiv;
+  }
+
+  let image = document.createElement("img");
+  image.src = image.src = "data:image/png;base64," + post.image;
+
+  containerDiv.appendChild(image);
+  return containerDiv;
+}
+
+window.addEventListener("load", main);