Merge pull request #43 from ItsVipra/glitch-soc-types

Better fetching for glitch-soc notifications

src/content_scripts/protoots.js

@@ -19,7 +19,12 @@ import {
 	waitForElement,
 	waitForElementRemoved,
 } from "../libs/domhelpers";
-import { addTypeAttribute, normaliseAccountName, sanitizePronouns } from "../libs/protootshelpers";
+import {
+	accountNameFromURL,
+	addTypeAttribute,
+	normaliseAccountName,
+	sanitizePronouns,
+} from "../libs/protootshelpers";
 
 //before anything else, check whether we're on a Mastodon page
 checkSite();
@@ -81,6 +86,7 @@ function main() {
 						"conversation",
 						"account-authorize",
 						"notification",
+						"notification__message",
 						"account",
 					))
 			);
@@ -115,6 +121,11 @@ function onTootIntersection(observerentries) {
 				waitForElement(ArticleElement, ".conversation__content__names", () =>
 					addProplate(ArticleElement),
 				);
+			} else if (ArticleElement.nodeName == "ASIDE") {
+				//glitch-soc notifications
+				waitForElement(ArticleElement, ".status__display-name", () => {
+					addProplate(ArticleElement);
+				});
 			} else {
 				waitForElement(ArticleElement, ".display-name", () => addProplate(ArticleElement));
 			}
@@ -215,13 +226,15 @@ async function addProplate(element) {
 	 * @returns {string}
 	 */
 	function getID(element) {
-		const id = element.dataset.id;
+		let id = element.dataset.id;
 		if (!id) {
 			// We don't have a status ID, pronouns might not be in cache
 			warn(
-				"The element passed to addProplate does not have a data-id attribute, although it should have one.",
+				"The element passed to addProplate does not have a data-id attribute, searching for article.",
 				element,
 			);
+			//if we couldn't get an id from the div try the closest article
+			id = element.closest("article[data-id]")?.dataset.id;
 		}
 		return id;
 	}
@@ -236,7 +249,7 @@ async function addProplate(element) {
 		const accountNameEl = /** @type {HTMLElement|null} */ (element.querySelector(accountNameClass));
 		if (!accountNameEl) {
 			warn(
-				"The element passed to addProplate does not have a .display-name__account, although it should have one.",
+				`The element passed to addProplate does not have a ${accountNameClass}, although it should have one.`,
 				element,
 			);
 		}
@@ -283,11 +296,7 @@ async function addProplate(element) {
 	async function addToStatus(element) {
 		let statusId = getID(element);
 		if (!statusId) {
-			//if we couldn't get an id from the div try the closest article
+			if (type === "detailed-status") {
-			const ArticleElement = element.closest("article");
-			if (ArticleElement) {
-				statusId = getID(ArticleElement);
-			} else if (type === "detailed-status") {
 				//if we still don't have an ID try the domain as a last resort
 				warn("Attempting to retrieve id from url - this may have unforseen consequences.");
 				statusId = location.pathname.split("/").pop();
@@ -310,18 +319,23 @@ async function addProplate(element) {
 	}
 
 	async function addToNotification(element) {
+		//debug("adding to notification");
 		const statusId = getID(element);
 
-		const accountNameEl = getAccountNameEl(element, ".notification__display-name");
+		let accountNameEl = getAccountNameEl(element, ".notification__display-name");
-		const accountName = getAccountName(accountNameEl, "title");
+		if (!accountNameEl) accountNameEl = getAccountNameEl(element, ".status__display-name");
 
-		const nametagEl = getNametagEl(element, ".notification__display-name");
+		let accountName = getAccountName(accountNameEl, "title");
+		if (!accountName) accountName = accountNameFromURL(getAccountName(accountNameEl, "href"));
+
+		let nametagEl = accountNameEl;
 
 		element.setAttribute("protoots-checked", "true");
 		generateProPlate(statusId, accountName, nametagEl, "notification");
 	}
 
 	async function addToAccount(element) {
+		//debug("adding to account");
 		const statusId = getID(element);
 		const nametagEl = element.querySelector(".display-name__html");
 		const accountName = getAccountName(element.querySelector(".display-name__account"));
@@ -329,6 +343,7 @@ async function addProplate(element) {
 		nametagEl.parentElement.style.display = "flex";
 
 		element.setAttribute("protoots-checked", "true");
+
 		generateProPlate(statusId, accountName, nametagEl, "account");
 	}
 

src/libs/fetchPronouns.js

@@ -1,4 +1,4 @@
-import { debug, error, info, warn } from "./logging";
+import { debug, error, info, log, warn } from "./logging";
 import { cachePronouns, getPronouns } from "./caching";
 import { normaliseAccountName } from "./protootshelpers";
 
@@ -60,6 +60,9 @@ export async function fetchPronouns(dataID, accountName, type) {
 		status = await fetchStatus(dataID);
 	}
 
+	log(`Fetching ${type} failed, trying notification instead.`);
+	if (!status) status = await fetchNotification(dataID); //fallback for glitch-soc notifications
+
 	const PronounField = getPronounField(status, accountName);
 	if (PronounField == "null") {
 		//TODO: if no field check bio
@@ -84,6 +87,8 @@ async function fetchStatus(statusID) {
 		},
 	);
 
+	if (!response.ok) return null;
+
 	let status = await response.json();
 
 	//if status contains a reblog get that for further processing - we want the embedded post's author
@@ -128,6 +133,8 @@ async function fetchAccount(accountID) {
 		},
 	);
 
+	if (!response.ok) return null;
+
 	const account = await response.json();
 
 	return { account: account };

src/libs/protootshelpers.js

@@ -17,6 +17,21 @@ export function normaliseAccountName(name) {
 	return name;
 }
 
+/**
+ * Turns a link to an account on a remote instance into a username.
+ *
+ *  e.g. `https://example.com/@test` -> `@test@example.com`
+ * @param {string} url URL to an account on their own instance
+ * @returns {string} username (not normalised)
+ */
+export function accountNameFromURL(url) {
+	const splitURL = url.split("/");
+
+	const username = [splitURL.pop(), splitURL.pop()].join("@");
+
+	return username;
+}
+
 /**
  * Sanitizes the pronoun field by removing various long information parts.
  * As of today, this just removes custom emojis from the field.
@@ -40,7 +55,7 @@ export function sanitizePronouns(str) {
  * @param {HTMLElement} ActionElement
  */
 export function addTypeAttribute(ActionElement) {
-	if (hasClasses(ActionElement, "status")) {
+	if (hasClasses(ActionElement, "status") && !hasClasses(ActionElement, "notification__message")) {
 		ActionElement.setAttribute("protoots-type", "status");
 	} else if (hasClasses(ActionElement, "detailed-status")) {
 		ActionElement.setAttribute("protoots-type", "detailed-status");
@@ -50,7 +65,7 @@ export function addTypeAttribute(ActionElement) {
 	} else if (hasClasses(ActionElement, "account-authorize")) {
 		ActionElement.setAttribute("protoots-type", "account-authorize");
 		ActionElement.closest("article").setAttribute("protoots-type", "account-authorize");
-	} else if (hasClasses(ActionElement, "notification")) {
+	} else if (hasClasses(ActionElement, "notification", "notification__message")) {
 		ActionElement.setAttribute("protoots-type", "notification");
 		ActionElement.closest("article").setAttribute("protoots-type", "notification");
 	} else if (hasClasses(ActionElement, "account")) {