From 5e45870d5b7c0a08d90d49c007991f9e23fcbefe Mon Sep 17 00:00:00 2001 From: revengeday Date: Thu, 14 Nov 2024 22:09:04 +0000 Subject: [PATCH] Upload files to "js" --- js/create-circle.js | 1142 +++++++++++++++++++++++++++++++++++++++++++ js/image.js | 279 +++++++++++ js/url.js | 16 + 3 files changed, 1437 insertions(+) create mode 100644 js/create-circle.js create mode 100644 js/image.js create mode 100644 js/url.js diff --git a/js/create-circle.js b/js/create-circle.js new file mode 100644 index 0000000..0a66825 --- /dev/null +++ b/js/create-circle.js @@ -0,0 +1,1142 @@ +/** + * + * @param {RequestInfo | URL} url + * @param {{ body?: any } & RequestInit?} options + */ +async function apiRequestWithHeaders(url, options = null) { + console.log(`Fetching :: ${url}`); + + if (options && options.body) { + options.body = JSON.stringify(options.body); + } + + return await fetch(url, options ?? {}) + .then(response => { + if (response.ok) { + return response; + } + + throw new Error(`Error fetching ${url}: ${response.status} ${response.statusText}`); + }) + .then(async response => ({ response: { headers: response.headers, body: await response.json(), error: undefined }})) + .catch(error => { + console.error(`Error fetching ${url}:`, error); + return { + response: undefined, + error: `Error fetching ${url}: ${error}` + }; + }); +} + +/** + * + * @param {RequestInfo | URL} url + * @param {{ body?: any } & RequestInit?} options + */ +async function apiRequest(url, options = null) { + const reply = await apiRequestWithHeaders(url, options); + + if (!reply.response) { + return { + error: reply.error + }; + } + + return { + response: reply.response.body + }; +} + +function Handle(name, instance) { + let handleObj = Object.create(Handle.prototype); + handleObj.name = name; + handleObj.instance = instance; + handleObj._baseInstance = null; + handleObj._apiInstance = null; + handleObj.profileUrl = null; + + return handleObj; +} + +Object.defineProperty(Handle.prototype, "baseInstance", { + get: function () { + return this._baseInstance || this.instance; + } +}); + +Object.defineProperty(Handle.prototype, "apiInstance", { + get: function () { + return this._apiInstance || this.instance; + } +}); + +Object.defineProperty(Handle.prototype, "baseHandle", { + get: function () { + return this.name + "@" + this.baseInstance; + } +}); + +Handle.prototype.toString = function () { + return this.name + "@" + this.instance; +}; + +/** + * @returns {Promise} The handle WebFingered, or the original on fail + */ +Handle.prototype.webFinger = async function () { + if (this._baseInstance) { + return this; + } + + const defaultWebfingerUrl = `https://${this.instance}/.well-known/webfinger?` + new URLSearchParams({ + resource: `acct:${this}` + }); + + let { response: webFinger } = await apiRequest(defaultWebfingerUrl); + + if (!webFinger) { + const contentTypeXrd = "application/xrd+xml"; + const hostMetaUrl = `https://${this.instance}/.well-known/host-meta`; + + console.log(`Fetching :: ${hostMetaUrl}`); + let hostMeta = await fetch(hostMetaUrl, { + headers: { + "Accept": contentTypeXrd + }, + redirect: "follow" + }).then(async res => { + return new DOMParser() + .parseFromString(await res.text(), "text/xml"); + }).catch(e => { + console.error(`Error fetching ${hostMetaUrl}: ${e}`); + return null; + }); + + const webfingerTemplate = hostMeta.querySelector("Link[rel='lrdd']") + ?.getAttribute("template"); + + if (webfingerTemplate) + webFinger = (await apiRequest(webfingerTemplate.replace("{uri}", `acct:${this}`)))?.response; + } + + if (!webFinger) + return this; + + let acct = webFinger["subject"]; + + if (typeof acct !== "string") + return this; + + if (acct.startsWith("acct:")) { + acct = acct.substring("acct:".length); + } + + let baseHandle = parseHandle(acct); + baseHandle._baseInstance = baseHandle.instance; + baseHandle.instance = this.instance; + + const links = webFinger["links"]; + + if (!Array.isArray(links)) { + return baseHandle; + } + + const selfLink = links.find(link => link["rel"] === "self"); + if (!selfLink) { + return baseHandle; + } + + try { + const url = new URL(selfLink["href"]) + baseHandle._apiInstance = url.hostname; + } catch (e) { + console.error(`Error parsing WebFinger self link ${selfLink["href"]}: ${e}`); + } + + const profileLink = links.find(link => link["rel"] === "http://webfinger.net/rel/profile-page"); + if (profileLink?.["href"]) { + try { + baseHandle.profileUrl = new URL(profileLink["href"]); + } catch (e) { + console.error(`Error parsing WebFinger profile page link ${profileLink["href"]}: ${e}`); + } + } + + return baseHandle; +}; + + +/** + * @typedef {{ + * id: string, + * avatar: string, + * bot: boolean, + * name: string, + * handle: Handle, + * }} FediUser + */ + +/** + * @typedef {FediUser & {conStrength: number}} RatedUser + */ + +/** + * @typedef {{ + * id: string, + * replies: number, + * renotes: number, + * favorites: number, + * extra_reacts: boolean, + * instance: string, + * author?: FediUser, + * }} Note + */ + +class ApiClient { + /** + * @param {string} instance + */ + constructor(instance) { + this._instance = instance; + // How many objects to max consider per type + this._CNT_NOTES = 70; + this._CNT_RENOTES = 50; + this._CNT_REPLIES = 100; + this._CNT_FAVS = 100; + } + + /** + * + * @param instance + * @returns {Promise} + */ + static async getClient(instance) { + if (instanceTypeCache.has(instance)) { + return instanceTypeCache.get(instance); + } + + let url = `https://${instance}/.well-known/nodeinfo`; + let { response: nodeInfo } = await apiRequest(url); + + if (!nodeInfo || !Array.isArray(nodeInfo.links)) { + const client = new MastodonApiClient(instance, true); + instanceTypeCache.set(instance, client); + return client; + } + + const { links } = nodeInfo; + + let apiLink = links.find(link => link.rel === "http://nodeinfo.diaspora.software/ns/schema/2.1"); + if (!apiLink) { + apiLink = links.find(link => link.rel === "http://nodeinfo.diaspora.software/ns/schema/2.0"); + } + + if (!apiLink) { + console.error(`No NodeInfo API found for ${instance}}`); + const client = new MastodonApiClient(instance, true); + instanceTypeCache.set(instance, client); + return client; + } + + let { response: apiResponse } = await apiRequest(apiLink.href); + + if (!apiResponse) { + // Guess from API endpoints + const { response: misskeyMeta } = await apiRequest(`https://${instance}/api/meta`, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: {} + }); + + if (misskeyMeta) { + const client = new MisskeyApiClient(instance); + instanceTypeCache.set(instance, client); + return client; + } + + const client = new MastodonApiClient(instance, true); + instanceTypeCache.set(instance, client); + return client; + } + + let { software } = apiResponse; + software.name = software.name.toLowerCase(); + + if (software.name.includes("fedibird")) { + const client = new FedibirdApiClient(instance, true); + instanceTypeCache.set(instance, client); + return client; + } + + if (software.name.includes("misskey") || + software.name.includes("calckey") || + software.name.includes("foundkey") || + software.name.includes("magnetar") || + software.name.includes("firefish") || + software.name.includes("sharkey") || + software.name.includes("cutiekey")) { + const client = new MisskeyApiClient(instance); + instanceTypeCache.set(instance, client); + return client; + } + + let features = apiResponse?.metadata?.["features"]; + if (Array.isArray(features) && features.includes("pleroma_api")) { + const has_emoji_reacts = features.includes("pleroma_emoji_reactions"); + const client = new PleromaApiClient(instance, has_emoji_reacts); + instanceTypeCache.set(instance, client); + return client; + } + + const client = new MastodonApiClient(instance, true); + instanceTypeCache.set(instance, client); + return client; + } + + /** + * @param {Handle} handle + * + * @returns {Promise<{ response: FediUser, error: undefined } | { response: undefined, error: string }>} + */ + async getUserIdFromHandle(handle){ throw new Error("Not implemented"); } + + /** + * @param {FediUser} user + * + * @returns {Promise<{ response: Note[], error: undefined } | { response: undefined, error: string }>} + */ + async getNotes(user){ throw new Error("Not implemented"); } + + /** + * @param {Note} note + * + * @returns {Promise} + */ + async getRenotes(note){ throw new Error("Not implemented"); } + + /** + * @param {Note} note + * + * @returns {Promise} + */ + async getReplies(note){ throw new Error("Not implemented"); } + + /** + * @param {Note} note + * + * @returns {Promise} + */ + async getReactions(note){ return []; } + + /** + * @param {Note} note + * + * @returns {Promise} + */ + async getFavs(note) { throw new Error("Not implemented"); } + + /** + * @param {Note} note + * @param {boolean} extra_reacts Also include emoji reacts + * + * @return {Promise} + */ + async getConsolidatedReactions(note, extra_reacts = false){ + let favs = await this.getFavs(note); + + if (!extra_reacts) + return favs; + + /** + * @type {Map} + */ + let users = new Map(); + if (favs !== null) { + favs.forEach(u => { + users.set(u.id, u); + }); + } + + const reactions = await this.getReactions(note); + if (reactions !== null) { + reactions.forEach(u => { + users.set(u.id, u); + }); + } + + + return Array.from(users.values()); + } + + /** + * @returns string + */ + getClientName() { throw new Error("Not implemented"); } +} + +class MastodonApiClient extends ApiClient { + /** + * @param {string} instance + * @param {boolean} emoji_reacts + * @param {MastodonApiClient} flavor + */ + constructor(instance, emoji_reacts, flavor = MastodonFlavor.MASTODON) { + super(instance); + this._emoji_reacts = emoji_reacts; + this._flavor = flavor; + // Server-side hard limits on return items; varies per endpoint + this._API_LIMIT = 80; + this._API_LIMIT_SMALL = 40; + } + + /** + * @param {Headers} headers + * @return {URL | null} request URL for next page or null + */ + static getNextPage(headers) { + /* + * https://docs.joinmastodon.org/api/guidelines/#pagination + * + * Not explicitly documented in the page linked above, but + * - the next page will automatically use the same limit as the original request + * (tested with Mastodon 4.2.1 and Akkoma 3.10.3) + * - the last page can sometimes still contain a next/prev link, but this "next" page + * will then be empty and not contain any Link header (e.g. Akkoma 3.10.3 with statuses) + * To save on API requests, we can check if less than expected were returned + */ + const links = headers.get("Link"); + if (links === null) + return null; + + for (const link of links.split(",")) { + const [url_raw, rel] = link.split(";").map(s => s.trim()); + if (url_raw && rel === 'rel="next"') { + try { + // Remove enclosing angle brackets <...> + return new URL(url_raw.substring(1, url_raw.length - 1)); + } catch (e) { + console.warn("Invalid URL: ", e); + } + } + } + + return null; + } + + /** + * @param {RequestInfo | URL} url + * @param {number} targetCount how many entries to gather + * @param {number | null} requestLimit how many entries a single request is expected to return. + * If set will be used to detect end of data early, without needing to request an empty page. + * @param {boolean} exactTarget if true, discard entries exceeding targetCount + */ + static async apiRequestPaged(url, targetCount, requestLimit = null, exactTarget = false) { + console.log(`Fetching repeatedly (${targetCount} a ${requestLimit}) :: ${url}`); + + let nextUrl = url; + let remaining = targetCount; + let data = []; + while (remaining > 0 && nextUrl !== null) { + const { response: reply, error } = await apiRequestWithHeaders(nextUrl); + if (reply?.body == null || error) { + console.error(`Error while gathering entries. Returning incomplete data!`); + if (data.length === 0) { + return { error }; + } + + break; + } + nextUrl = MastodonApiClient.getNextPage(reply.headers); + let newdata = reply.body; + if (exactTarget && newdata.length > remaining) + newdata = newdata.slice(0, remaining); + + data.push(newdata); + remaining -= newdata.length; + if (requestLimit !== null && newdata.length < requestLimit) + break; + } + + return { response: data.length === 0 ? null : data.flat() }; + } + + async getUserIdFromHandle(handle) { + const url = `https://${this._instance}/api/v1/accounts/lookup?acct=${handle.baseHandle}`; + let { response } = await apiRequest(url, null); + + if (!response) { + const url = `https://${this._instance}/api/v1/accounts/lookup?acct=${handle}`; + + const { response: res, error } = (await apiRequest(url, null)); + if (error) { + return { error }; + } + + response = res; + } + + if (typeof response !== "object") { + return { error: `Could not parse user lookup response from server, invalid object: ${response}` }; + } + + return { + response: { + id: response.id, + avatar: response.avatar, + bot: response.bot, + name: response["display_name"], + handle: handle, + } + }; + } + + async getNotes(user) { + const url = `https://${this._instance}/api/v1/accounts/${user.id}/statuses?exclude_replies=true&exclude_reblogs=true&limit=${this._API_LIMIT_SMALL}`; + const { response, error} = await MastodonApiClient.apiRequestPaged(url, this._CNT_NOTES, this._API_LIMIT_SMALL, true); + + if (error) { + return { error }; + } + + if (response?.some(note => note?.["pleroma"]?.["emoji_reactions"]?.length)) { + this._flavor = MastodonFlavor.PLEROMA; + } else if (response?.some(note => note?.["emoji_reactions"]?.length)) { + this._flavor = MastodonFlavor.FEDIBIRD; + } + + return { + response: response.map(note => ({ + id: note.id, + replies: note["replies_count"] || 0, + renotes: note["reblogs_count"] || 0, + favorites: note["favourites_count"], + extra_reacts: note?.["emoji_reactions"]?.length > 0 || note?.["pleroma"]?.["emoji_reactions"]?.length > 0, + instance: this._instance, + author: user + })) + }; + } + + async getRenotes(note) { + const url = `https://${this._instance}/api/v1/statuses/${note.id}/reblogged_by?limit=${this._API_LIMIT}`; + const response = await MastodonApiClient.apiRequestPaged(url, this._CNT_RENOTES, this._API_LIMIT); + + if (!response) { + return null; + } + + return response.map(user => ({ + id: user.id, + avatar: user.avatar, + bot: user.bot, + name: user["display_name"], + handle: parseHandle(user["acct"], note.instance) + })); + } + + async getReplies(noteIn) { + // The context endpoint has no limit parameter or pages + const url = `https://${this._instance}/api/v1/statuses/${noteIn.id}/context`; + const response = (await apiRequest(url)).response; + + if (!response) { + return null; + } + + if (response["descendants"]?.some(note => note?.["pleroma"]?.["emoji_reactions"]?.length)) { + this._flavor = MastodonFlavor.PLEROMA; + } else if (response["descendants"]?.some(note => note?.["emoji_reactions"]?.length)) { + this._flavor = MastodonFlavor.FEDIBIRD; + } + + return response["descendants"].map(note => { + + let handle = parseHandle(note["account"]["acct"], noteIn.instance); + + return { + id: note.id, + replies: note["replies_count"] || 0, + renotes: note["reblogs_count"] || 0, + favorites: note["favourites_count"], + extra_reacts: note?.["emoji_reactions"]?.length > 0 || note?.["pleroma"]?.["emoji_reactions"]?.length > 0, + instance: handle.instance, + author: { + id: note["account"]["id"], + bot: note["account"]["bot"], + name: note["account"]["display_name"], + avatar: note["account"]["avatar"], + handle: handle + } + }; + }); + } + + async getFavs(note) { + const url = `https://${this._instance}/api/v1/statuses/${note.id}/favourited_by?limit=${this._API_LIMIT}`; + const response = (await MastodonApiClient.apiRequestPaged(url, this._CNT_FAVS, this._API_LIMIT)).response; + + if (!response) { + return null; + } + + return response.map(user => ({ + id: user.id, + avatar: user.avatar, + bot: user.bot, + name: user["display_name"], + handle: parseHandle(user["acct"], note.instance) + })); + } + + async getReactions(note) { + if (this._flavor === MastodonFlavor.MASTODON) { + return []; + } + + return this._flavor.getReactions.call(this, note); + } + + getClientName() { + return "mastodon"; + } +} + +class PleromaApiClient extends MastodonApiClient { + /** + * @param {string} instance + * @param {boolean} emoji_reacts + */ + constructor(instance, emoji_reacts) { + super(instance, emoji_reacts, MastodonFlavor.PLEROMA); + } + + async getReactions(note) { + if (!this._emoji_reacts) + return []; + + // The documentation doesn't specify the hardcoded limit, so just use the lowest known one + const url = `https://${this._instance}/api/v1/pleroma/statuses/${note.id}/reactions?limit=${this._API_LIMIT_SMALL}`; + const response = (await MastodonApiClient.apiRequestPaged(url, this._CNT_FAVS, this._API_LIMIT_SMALL)).response ?? []; + + /** + * @type {Map} + */ + const users = new Map(); + + for (const reaction of response) { + reaction["accounts"] + .map(account => ({ + id: account["id"], + avatar: account["avatar"], + bot: account["bot"], + name: account["display_name"], + handle: parseHandle(account["acct"], note.instance) + })) + .forEach(u => { + if(!users.has(u.id)) + users.set(u.id, u); + }) + } + + return Array.from(users.values()); + } + + getClientName() { + return "pleroma"; + } +} + +class FedibirdApiClient extends MastodonApiClient { + /** + * @param {string} instance + * @param {boolean} emoji_reacts + */ + constructor(instance, emoji_reacts) { + super(instance, emoji_reacts, MastodonFlavor.FEDIBIRD); + } + + async getReactions(note) { + if (!this._emoji_reacts) + return []; + + /** + * @type {Map} + */ + let users = new Map(); + + // Could not locate documentation for Fedibird API, so just use the lowest known limit + const url = `https://${this._instance}/api/v1/statuses/${note.id}/emoji_reactioned_by?limit=${this._API_LIMIT_SMALL}`; + const response = (await MastodonApiClient.apiRequestPaged(url, this._CNT_FAVS, this._API_LIMIT_SMALL)).response ?? []; + + for (const reaction of response) { + let account = reaction["account"]; + let u = { + id: account["id"], + avatar: account["avatar"], + bot: account["bot"], + name: account["display_name"], + handle: parseHandle(account["acct"], note.instance) + } + + if(!users.has(u.id)) + users.set(u.id, u); + } + + return Array.from(users.values()); + } + + getClientName() { + return "fedibird"; + } +} + +const MastodonFlavor = { + MASTODON: MastodonApiClient.prototype, + PLEROMA: PleromaApiClient.prototype, + FEDIBIRD: FedibirdApiClient.prototype, +}; + +class MisskeyApiClient extends ApiClient { + /** + * @param {string} instance + */ + constructor(instance) { + super(instance); + } + + async getUserIdFromHandle(handle) { + const lookupUrl = `https://${this._instance}/api/users/search-by-username-and-host`; + const lookup = (await apiRequest(lookupUrl, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: { + username: handle.name, + host: null + } + })).response; + + let id = null; + + for (const user of Array.isArray(lookup) ? lookup : []) { + const isLocal = user?.["host"] === handle.instance || + user?.["host"] === handle.baseInstance || + this._instance === handle.apiInstance && user?.["host"] === null; + + if (isLocal && user?.["username"] === handle.name && user["id"]) { + id = user["id"]; + break; + } + } + + const url = `https://${this._instance}/api/users/show`; + const { response, error } = await apiRequest(url, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: { + id: id ? id : undefined, + username: handle.name + } + }); + + if (error) { + return { error }; + } + + return { + response: { + id: response.id, + avatar: response["avatarUrl"], + bot: response["isBot"], + name: response["name"], + handle: handle, + } + }; + } + + async getNotes(user) { + const url = `https://${this._instance}/api/users/notes`; + const { response, error } = await apiRequest(url, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: { + userId: user.id, + limit: this._CNT_NOTES, + withReplies: false, + withRenotes: false, + includeReplies: false, + includeMyRenotes: false + } + }); + + if (error) { + return { error }; + } + + return { + response: response.map(note => ({ + id: note.id, + replies: note["repliesCount"], + renotes: note["renoteCount"], + favorites: Object.values(note["reactions"]).reduce((a, b) => a + b, 0), + extra_reacts: false, + instance: this._instance, + author: user + })) + }; + } + + async getRenotes(note) { + const url = `https://${this._instance}/api/notes/renotes`; + const response = (await apiRequest(url, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: { + noteId: note.id, + limit: this._CNT_RENOTES, + } + })).response; + + if (!response) { + return null; + } + + return response.map(renote => ({ + id: renote["user"]["id"], + avatar: renote["user"]["avatarUrl"], + bot: renote["user"]["isBot"] || false, + name: renote["user"]["name"], + handle: parseHandle(renote["user"]["username"], renote["user"]["host"] ?? this._instance) + })); + } + + async getReplies(note) { + const url = `https://${this._instance}/api/notes/replies`; + const response = (await apiRequest(url, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: { + noteId: note.id, + limit: this._CNT_REPLIES, + } + })).response; + + if (!response) { + return null; + } + + return response.map(reply => { + const handle = parseHandle(reply["user"]["username"], reply["user"]["host"] ?? this._instance); + + return { + id: reply.id, + replies: reply["repliesCount"], + renotes: reply["renoteCount"], + favorites: Object.values(reply["reactions"]).reduce((a, b) => a + b, 0), + extra_reacts: false, + instance: handle.instance, + author: { + id: reply["user"]["id"], + avatar: reply["user"]["avatarUrl"], + bot: reply["user"]["isBot"] || false, + name: reply["user"]["name"], + handle: handle + } + }; + }); + } + + async getFavs(note) { + const url = `https://${this._instance}/api/notes/reactions`; + const response = (await apiRequest(url, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: { + noteId: note.id, + limit: this._CNT_FAVS, + } + })).response; + + if (!response) { + return null; + } + + return response.map(reaction => ({ + id: reaction["user"]["id"], + avatar: reaction["user"]["avatarUrl"], + bot: reaction["user"]["isBot"] || false, + name: reaction["user"]["name"], + handle: parseHandle(reaction["user"]["username"], reaction["user"]["host"] ?? this._instance), + })); + } + + getClientName() { + return "misskey"; + } +} + +/** @type {Map} */ +let instanceTypeCache = new Map(); + +/** + * @param {string} fediHandle + * @param {string} fallbackInstance + * + * @returns {Handle} + */ +function parseHandle(fediHandle, fallbackInstance = "") { + if (fediHandle.charAt(0) === '@') + fediHandle = fediHandle.substring(1); + + fediHandle = fediHandle.replaceAll(" ", ""); + const [name, instance] = fediHandle.split("@", 2); + + return new Handle(name, instance || fallbackInstance); +} + +async function circleMain() { + let progress = document.getElementById("outInfo"); + + const generateBtn = document.getElementById("generateButton"); + + generateBtn.style.display = "none"; + + let fediHandle = document.getElementById("txt_mastodon_handle"); + const selfUser = await parseHandle(fediHandle.value).webFinger(); + + let form = document.getElementById("generateForm"); + let backend = form.backend; + for (const radio of backend) { + radio.disabled = true; + } + + fediHandle.disabled = true; + + let client; + switch (backend.value) { + case "mastodon": + client = new MastodonApiClient(selfUser.apiInstance, true); + break; + case "pleroma": + client = new PleromaApiClient(selfUser.apiInstance, true); + break; + case "misskey": + client = new MisskeyApiClient(selfUser.apiInstance); + break; + default: + progress.innerText = "Detecting instance..."; + client = await ApiClient.getClient(selfUser.apiInstance); + + backend.value = (() => { + switch (client.getClientName()) { + case "fedibird": return "mastodon"; + default: return client.getClientName(); + } + })(); + break; + } + + progress.innerText = "Fetching your user..."; + + const { response: user, error: userError } = await client.getUserIdFromHandle(selfUser); + + if (userError) { + alert(`Something went horribly wrong, couldn't fetch your user:\n\n${userError}`); + fediHandle.disabled = false; + for (const radio of backend) { + radio.disabled = false; + } + generateBtn.style.display = "inline"; + progress.innerText = ""; + + return; + } + + progress.innerText = "Fetching data..."; + + const { response: notes, error: noteError } = await client.getNotes(user); + + if (noteError) { + alert(`Something went horribly wrong, couldn't fetch your notes:\n\n${noteError}`); + return; + } + + /** + * @type {Map} + */ + let connectionList = new Map(); + await processNotes(client, connectionList, notes); + + showConnections(user, connectionList); +} + +/** + * @param {ApiClient} client + * @param {Map} connectionList + * @param {Note[]} notes + */ +async function processNotes(client, connectionList, notes) { + let progress = document.getElementById("outInfo"); + let counter = 0; + let total = notes.length; + + for (const note of notes) { + progress.innerText = `Processing (${counter}/${total}) `; + await evaluateNote(client, connectionList, note); + counter++; + } +} + +/** +@param {ApiClient} client + * @param {Map} connectionList + * @param {Note} note + */ +async function evaluateNote(client, connectionList, note) { + if (note.favorites > 0 || note.extra_reacts) { + await client.getConsolidatedReactions(note, note.extra_reacts).then(users => { + if (!users) + return; + + users.forEach(user => { + incConnectionValue(connectionList, user, 1.0); + }); + }).catch(() => {}); + } + + if (note.renotes > 0) { + await client.getRenotes(note).then(users => { + if (!users) + return; + + users.forEach(user => { + incConnectionValue(connectionList, user, 1.3); + }); + }).catch(() => {}); + } + + await client.getReplies(note).then(replies => { + if (!replies) + return []; + + replies.forEach(reply => { + incConnectionValue(connectionList, reply.author, 1.1); + }); + + return replies; + }).catch(() => {}); +} + +/** + * @param {Map} connectionList + * @param {FediUser} user + * @param {number} plus + */ +function incConnectionValue(connectionList, user, plus) { + if (user.bot) + return; + + if (!connectionList.has(user.id)) { + connectionList.set(user.id, { + conStrength: 0, + ...user + }); + } + + connectionList.get(user.id).conStrength += plus; +} + +/** + * @param {FediUser} localUser + * @param {Map} connectionList + */ +function showConnections(localUser, connectionList) { + if (connectionList.has(localUser.id)) + connectionList.delete(localUser.id); + + // Sort dict into Array items + const items = [...connectionList.values()].sort((first, second) => second.conStrength - first.conStrength); + + // Also export the Username List + let usersDivs = [ + document.getElementById("ud1"), + document.getElementById("ud2"), + document.getElementById("ud3") + ]; + + usersDivs.forEach((div) => div.innerHTML = "") + + const [inner, middle, outer] = usersDivs; + inner.innerHTML = "

Inner Circle

"; + middle.innerHTML = "

Middle Circle

"; + outer.innerHTML = "

Outer Circle

"; + + for (let i= 0; i < items.length; i++) { + const newUser = document.createElement("a"); + newUser.className = "userItem"; + newUser.innerText = items[i].handle.name; + newUser.title = items[i].name; + // I'm so sorry + newUser.href = "javascript:void(0)"; + const handle = items[i].handle; + newUser.onclick = async () => { + const fingeredHandle = await handle.webFinger(); + if (fingeredHandle.profileUrl) + window.open(fingeredHandle.profileUrl, "_blank"); + else + alert("Could not fetch the profile URL for " + fingeredHandle.baseHandle); + }; + + const newUserHost = document.createElement("span"); + newUserHost.className = "userHost"; + newUserHost.innerText = "@" + items[i].handle.instance; + newUser.appendChild(newUserHost); + + const newUserImg = document.createElement("img"); + newUserImg.src = items[i].avatar; + newUserImg.alt = ""; + newUserImg.className = "userImg"; + newUserImg.onload = () => { + newUserImg.title = newUserImg.alt = stripName(items[i].name || items[i].handle.name) + "'s avatar"; + }; + newUser.prepend(newUserImg); + + let udNum = 0; + if (i > numb[0]) udNum = 1; + if (i > numb[0] + numb[1]) udNum = 2; + if (i <= numb[0] + numb[1] + numb[2]) + usersDivs[udNum].appendChild(newUser); + } + + usersDivs.forEach((div) => { + const items = div.querySelectorAll(".userItem"); + + for (let i = 0; i < items.length - 1; i++) { + const item = items[i]; + item.appendChild(document.createTextNode(", ")); + } + }); + + const outDiv = document.getElementById("outDiv"); + outDiv.style.display = "block"; + document.getElementById("outSelfUser").innerText = stripName(localUser.name || localUser.handle.name); + + render(items, localUser); +} + +function stripName(name) { + return name.replaceAll(/:[a-zA-Z0-9_]+:/g, "").trim(); +} diff --git a/js/image.js b/js/image.js new file mode 100644 index 0000000..5aa8c7b --- /dev/null +++ b/js/image.js @@ -0,0 +1,279 @@ +// Configuration +// --------------------------------------------------------------------------------- +const config = { + logoSrc: 'img/logo.png', // Path to the logo image + logoHeight: 50, // Logo height + backgroundColor: '#090909', // Canvas background color + lineColor: '#159262', // Default dashed line color + lineThickness: 3, // Dashed line thickness + randomizeYellowLines: true, // Enable or disable random yellow lines + yellowLineColor: '#9d921d', // Yellow line color + avatarBackgroundColor: '#090909', // Background color behind the avatar + borderThickness: 5, // Border thickness around avatars + borderColor: '#1bec99', // Border color around avatars + urlText: '[ Create your own at ccc.cyber.to ]', // Text to display on the canvas + urlFont: '16px monospace', // Font for URL text + urlColor: '#159262', // URL text color + avatarScale: 75, // Avatar scale percentage + drawMazeBackground: true, // Whether to draw a random maze background + mazeColor: '#05130f', // Color of the maze lines + mazeThickness: 2, // Thickness of the maze lines + drawRedLine: true, // Enable or disable the red line + redLineColor: '#FB2735', // Red line color + consoleLogging: false, // Enable or disable console logging +}; +// --------------------------------------------------------------------------------- + +// Converts degrees to radians +const toRad = (x) => { + if (config.consoleLogging) console.log('Function call: toRad'); + return x * (Math.PI / 180); +}; + +const dist = [200, 330, 450]; // Distance of each user layer from the center +const numb = [8, 15, 26]; // Number of users in each layer +const radius = [64, 58, 50]; // Radius of avatars in each layer +let userNum = 0; // Counter for the number of users rendered +let remainingImg = 0; // Counter for remaining images to load +let totalImg = 0; // Total images to load + +function render(users, selfUser) { + if (config.consoleLogging) console.log('Function call: render'); + userNum = 0; + remainingImg = 0; + + // Get canvas element + const canvas = document.getElementById("canvas"); + if (!canvas) return; + const ctx = canvas.getContext("2d"); // Get canvas context + + const width = canvas.width; + const height = canvas.height; + + // Draw maze if enabled + if (config.drawMazeBackground) { + drawMazeBackground(ctx, width, height); + } + + // Configure canvas background + ctx.fillStyle = config.backgroundColor; + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillRect(0, 0, width, height); + ctx.globalCompositeOperation = 'source-over'; + + const userPositions = []; + const tasks = []; + const mainAvatarRadius = 110 * (config.avatarScale / 100); // Scale main avatar + + totalImg += 1; + remainingImg += 1; + loadImage( + ctx, + selfUser.avatar, + (width / 2) - mainAvatarRadius, + (height / 2) - mainAvatarRadius, + mainAvatarRadius, + null, + tasks + ); + + // Position and render user avatars + for (let layerIndex = 0; layerIndex < 3; layerIndex++) { + const angleSize = 360 / numb[layerIndex]; + + for (let i = 0; i < numb[layerIndex]; i++) { + if (userNum >= users.length) break; + + totalImg += 1; + remainingImg += 1; + + const offset = layerIndex * 30; + const r = toRad(i * angleSize + offset); + + const centerX = Math.cos(r) * dist[layerIndex] + width / 2; + const centerY = Math.sin(r) * dist[layerIndex] + height / 2; + userPositions.push({ x: centerX, y: centerY }); + + // Render connecting lines + ctx.beginPath(); + ctx.setLineDash([10, 3]); + ctx.moveTo(width / 2, height / 2); + ctx.lineTo(centerX, centerY); + ctx.strokeStyle = config.lineColor; + ctx.lineWidth = config.lineThickness; + ctx.stroke(); + ctx.setLineDash([]); + + loadImage( + ctx, + users[userNum].avatar, + centerX - radius[layerIndex] * (config.avatarScale / 100), + centerY - radius[layerIndex] * (config.avatarScale / 100), + radius[layerIndex] * (config.avatarScale / 100), + null, + tasks + ); + + userNum++; + } + } + + // Draw random yellow lines if enabled + if (config.randomizeYellowLines) { + randomizeYellowLines(ctx, userPositions, 10); + } + + // Draw red line if enabled + if (config.drawRedLine) { + drawRedLine(ctx, width, height, userPositions); + } + + const logo = new Image(); + logo.onload = function () { + // Load and draw logo + const aspectRatio = logo.width / logo.height; + const logoWidth = config.logoHeight * aspectRatio; + ctx.drawImage(logo, 10, 10, logoWidth, config.logoHeight); + }; + logo.src = config.logoSrc; + + // Draw URL text + ctx.font = config.urlFont; + ctx.fillStyle = config.urlColor; + const textWidth = ctx.measureText(config.urlText).width; + const textXPosition = width - textWidth - 10; + const textYPosition = height - 10; + + ctx.fillText(config.urlText, textXPosition, textYPosition); +} + +// Draws a maze background +function drawMazeBackground(ctx, width, height) { + if (config.consoleLogging) console.log('Function call: drawMazeBackground'); + const cellSize = 20; + ctx.strokeStyle = config.mazeColor; + ctx.lineWidth = config.mazeThickness; + for (let y = 0; y < height; y += cellSize) { + for (let x = 0; x < width; x += cellSize) { + if (Math.random() > 0.5) { + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x + cellSize, y + cellSize); + ctx.stroke(); + } else { + ctx.beginPath(); + ctx.moveTo(x + cellSize, y); + ctx.lineTo(x, y + cellSize); + ctx.stroke(); + } + } + } +} + +// Draw random yellow lines +function randomizeYellowLines(ctx, userPositions, maxLines) { + if (config.consoleLogging) console.log('Function call: randomizeYellowLines'); + const numberOfLines = Math.min(maxLines, Math.floor(Math.random() * userPositions.length)); + + for (let i = 0; i < numberOfLines; i++) { + const index1 = Math.floor(Math.random() * userPositions.length); + let index2; + do { + index2 = Math.floor(Math.random() * userPositions.length); + } while (index2 === index1); + + const startPos = userPositions[index1]; + const endPos = userPositions[index2]; + + ctx.beginPath(); + ctx.setLineDash([10, 3]); + ctx.moveTo(startPos.x, startPos.y); + ctx.lineTo(endPos.x, endPos.y); + ctx.strokeStyle = config.yellowLineColor; + ctx.lineWidth = config.lineThickness; + ctx.stroke(); + ctx.setLineDash([]); + } +} + +// Draw a random red line +function drawRedLine(ctx, width, height, userPositions) { + if (config.consoleLogging) console.log('Function call: drawRedLine'); + if (userPositions.length === 0) return; + + const selectedPosition = userPositions[Math.floor(Math.random() * userPositions.length)]; + + ctx.beginPath(); + ctx.setLineDash([10, 3]); + ctx.moveTo(width / 2, height / 2); + ctx.lineTo(selectedPosition.x, selectedPosition.y); + ctx.strokeStyle = config.redLineColor; + ctx.lineWidth = config.lineThickness; + ctx.stroke(); + ctx.setLineDash([]); +} + +// Load and draw user images +function loadImage(ctx, url, x, y, r, name, tasks) { + if (config.consoleLogging) console.log('Function call: loadImage'); + let progress = document.getElementById("outInfo"); + if (!progress) return; + + tasks.push(() => { /* No text addition here */ }); + + // Decrement image counter + const decrementRemaining = () => { + remainingImg -= 1; + progress.innerText = `Loading avatars: ${totalImg - remainingImg}/${totalImg}`; + + if (remainingImg <= 0) { + progress.innerText = ""; + tasks.forEach((task) => task()); + } + }; + + const img = new Image(); + + // Handle image loading errors + const drawImageWithFallback = (imageSrc) => { + img.onload = function() { + ctx.save(); + ctx.beginPath(); + ctx.arc(x + r, y + r, r, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.clip(); + + ctx.fillStyle = config.avatarBackgroundColor; + ctx.beginPath(); + ctx.arc(x + r, y + r, r, 0, Math.PI * 2, true); + ctx.fill(); + ctx.closePath(); + + ctx.drawImage(img, x, y, r * 2, r * 2); + + ctx.beginPath(); + ctx.arc(x + r, y + r, r, 0, Math.PI * 2, true); + ctx.lineWidth = config.borderThickness; + ctx.strokeStyle = config.borderColor; + ctx.stroke(); + ctx.closePath(); + + ctx.restore(); + + decrementRemaining(); + }; + + img.onerror = function() { + console.error(`IMG Error: ${imageSrc}`); + if (imageSrc !== 'img/placeholder.png') { + drawImageWithFallback('img/placeholder.png'); + } else { + decrementRemaining(); + } + }; + + img.src = imageSrc; + }; + + drawImageWithFallback(url); +} \ No newline at end of file diff --git a/js/url.js b/js/url.js new file mode 100644 index 0000000..8c540fa --- /dev/null +++ b/js/url.js @@ -0,0 +1,16 @@ + document.addEventListener("DOMContentLoaded", function() { + function getFediverseHandle() { + const url = window.location.href; + const prefix = "?@"; + const index = url.indexOf(prefix); + if(index !== -1) { + return decodeURIComponent(url.substring(index + prefix.length)); + } + return null; + } + var fediverseHandle = getFediverseHandle(); + if(fediverseHandle) { + document.getElementById('txt_mastodon_handle').value = fediverseHandle; + (async() => await circleMain())(); + } + }); \ No newline at end of file