small tweaks, public timeline now available

CSS/index.css

@@ -216,7 +216,7 @@ html {
 }
 
 /* Footer things */
-.Setting, .Posting, .Mail {
+.Setting, .Posting, .Mail, .Feed {
 	margin-top: 30px;
 	
 	border-style: solid;
@@ -226,12 +226,12 @@ html {
 	height: 100px;
 }
 
-.Time {
+.Mail, .Setting {	
-	font-size: 4ch;
+	margin-right: 5%;
 }
 
-.Posting {	
+.Time {
-	margin-right: 5%;
+	font-size: 4ch;
 }
 
 .MainFooter {

HTML/setting.html

@@ -17,7 +17,6 @@
 		</header>
 		<div style="display: flex; justify-content: center; height: 75vh;">
 			<div class="Button" style="margin: auto;">
-				<p class="Local">Toggle Local</p>
 				<p class="Remote">Toggle Remote</p>
 			</div>
 			<div class="Button" style="display: flex; justify-content: center; margin: auto;">

JS/BlueskyAPI.js

@@ -9,15 +9,14 @@ export async function GetTimeline(Cursor) {
 		return "";
 	}
 	
-	let PDS = localStorage.getItem(Variables.BlueskyPDS);
 	let DPoP;
 	let request;
 	if (Cursor == "") {
-		DPoP = await ClientDPoPPDS("GET", PDS + "/xrpc/app.bsky.feed.getTimeline");
+		DPoP = await ClientDPoPPDS("GET", localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getTimeline");
-		request = fetch(PDS + "/xrpc/app.bsky.feed.getTimeline", {method: "GET", headers: {"Authorization": "DPoP " + localStorage.getItem(Variables.BlueskyAccessToken), "DPoP": DPoP}});
+		request = fetch(localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getTimeline", {method: "GET", headers: {"Authorization": "DPoP " + localStorage.getItem(Variables.BlueskyAccessToken), "DPoP": DPoP}});
 	} else {
-		DPoP = await ClientDPoPPDS("GET", PDS + "/xrpc/app.bsky.feed.getTimeline?cursor=" + Cursor);
+		DPoP = await ClientDPoPPDS("GET", localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getTimeline?cursor=" + Cursor);
-		request = fetch(PDS + "/xrpc/app.bsky.feed.getTimeline?cursor=" + Cursor, {method: "GET", headers: {"Authorization": "DPoP " + localStorage.getItem(Variables.BlueskyAccessToken), "DPoP": DPoP}});
+		request = fetch(localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getTimeline?cursor=" + Cursor, {method: "GET", headers: {"Authorization": "DPoP " + localStorage.getItem(Variables.BlueskyAccessToken), "DPoP": DPoP}});
 	}
 	let body = await request.then((response) => response.json());
 	let status = await request.then((response) => response.status);
@@ -29,6 +28,32 @@ export async function GetTimeline(Cursor) {
 	return body;
 }
 
+// Gets a "public" timeline (essentially a feed by bsky.app where you can discover posts).
+export async function GetPublicTimeline(Cursor) {
+	if (localStorage.getItem(Variables.BlueskyAccessToken) == null) {
+		console.log("No access token!");
+		return "";
+	}
+	
+	let DPoP;
+	let request;
+	if (Cursor == "") {
+		DPoP = await ClientDPoPPDS("GET", localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getFeed?feed=at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot");
+		request = fetch(localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getFeed?feed=at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot", {method: "GET", headers: {"Authorization": "DPoP " + localStorage.getItem(Variables.BlueskyAccessToken), "DPoP": DPoP}});
+	} else {
+		DPoP = await ClientDPoPPDS("GET", localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getTimeline?feed=at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot&cursor=" + Cursor);
+		request = fetch(localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getTimeline?feed=at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot&cursor=" + Cursor, {method: "GET", headers: {"Authorization": "DPoP " + localStorage.getItem(Variables.BlueskyAccessToken), "DPoP": DPoP}});
+	}
+	let body = await request.then((response) => response.json());
+	let status = await request.then((response) => response.status);
+	let header = await request.then((response) => response.headers.get("dpop-nonce"));
+	if (status == 401) {
+		await HandleError(body, header);
+		body = await GetFeed(Cursor);
+	}
+	return body;
+}
+
 // This gets the post. If there are multiple URIs, they must be within an array.
 export async function GetPosts(URIs) {
 	if (localStorage.getItem(Variables.BlueskyAccessToken) == null) {
@@ -36,9 +61,8 @@ export async function GetPosts(URIs) {
 		return "";
 	}
 	
-	let PDS = localStorage.getItem(Variables.BlueskyPDS);
+	let DPoP = await ClientDPoPPDS("GET", localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getPosts?uris=" + URIs);
-	let DPoP = await ClientDPoPPDS("GET", PDS + "/xrpc/app.bsky.feed.getPosts?uris=" + URIs);
+	let request = fetch(localStorage.getItem(Variables.BlueskyPDS) + "/xrpc/app.bsky.feed.getPosts?uris=" + URIs, { method: "GET", headers: {"Authorization": "DPoP " + localStorage.getItem(Variables.BlueskyAccessToken), "DPoP": DPoP}});
-	let request = fetch(PDS + "/xrpc/app.bsky.feed.getPosts?uris=" + URIs, { method: "GET", headers: {"Authorization": "DPoP " + localStorage.getItem(Variables.BlueskyAccessToken), "DPoP": DPoP}});
 	let body = await request.then((response) => response.json());
 	let status = await request.then((response) => response.status);
 	let header = await request.then((response) => response.headers.get("dpop-nonce"));
@@ -220,10 +244,10 @@ export async function CreateRecord(Repo, Collection, Record, RKey) {
 
 // Applyers
 export function ApplyFacets(record, text) {
-	var StringArray = [];
+	let StringArray = [];
-	var SplitAreas = [0];
+	let SplitAreas = [0];
-	var Hrefs = [];
+	let Hrefs = [];
-	var TempText = "";
+	let TempText = "";
 	if (record.hasOwnProperty("facets")) {
 		// First, append split areas.
 		for (let i of record.facets) {
@@ -237,9 +261,9 @@ export function ApplyFacets(record, text) {
 		// Last minute append.
 		SplitAreas.push(text.length);
 		// Remove emoji regex
-		var EmojiRegex = /\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu;
+		let EmojiRegex = /\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu;
-		var EmojiObjects = text.match(EmojiRegex);
+		let EmojiObjects = text.match(EmojiRegex);
-		var SubtractNumber = 0;
+		let SubtractNumber = 0;
 		if (EmojiObjects != null) {
 			SubtractNumber = EmojiObjects.length * 2;
 		}
@@ -327,7 +351,7 @@ export async function ClientDPoPToken(POSTorGET, RequestURL) {
 	let PrivateKey = await crypto.subtle.importKey("jwk", JSON.parse(localStorage.getItem(Variables.BlueskyPrivateKey)), {name: "ECDSA", namedCurve: "P-256"}, true, ["sign"]);
 	
 	// Header
-	var Header = {typ: "dpop+jwt", alg: "ES256", jwk: 
+	let Header = {typ: "dpop+jwt", alg: "ES256", jwk: 
 		await crypto.subtle.exportKey("jwk", PublicKey)
 		.then(function(response) {
 			delete response["key_ops"];
@@ -336,7 +360,7 @@ export async function ClientDPoPToken(POSTorGET, RequestURL) {
 			return response})
 		};
 	// Payload
-	var Payload = {};
+	let Payload = {};
 	Payload.iss = "https://fedi.crowdedgames.group/oauth/client-metadata.json";
 	Payload.jti = crypto.randomUUID();
 	Payload.htm = POSTorGET;
@@ -344,9 +368,9 @@ export async function ClientDPoPToken(POSTorGET, RequestURL) {
 	Payload.iat = Math.floor(new Date(Date.now()).getTime() / 1000);
 	Payload.nonce = localStorage.getItem(Variables.BlueskyNonce);
 
-	var sHeader = JSON.stringify(Header);
+	let sHeader = JSON.stringify(Header);
-	var sPayload = JSON.stringify(Payload);
+	let sPayload = JSON.stringify(Payload);
-	var JWT = KJUR.jws.JWS.sign("ES256", sHeader, sPayload, 
+	let JWT = KJUR.jws.JWS.sign("ES256", sHeader, sPayload, 
 	await crypto.subtle.exportKey("jwk", PrivateKey)
 	.then(function(response) {
 		delete response["key_ops"];
@@ -362,7 +386,7 @@ export async function ClientDPoPPDS(POSTorGET, RequestURL) {
 	let PrivateKey = await crypto.subtle.importKey("jwk", JSON.parse(localStorage.getItem(Variables.BlueskyPrivateKey)), {name: "ECDSA", namedCurve: "P-256"}, true, ["sign"]);
 	
 	// Header
-	var Header = {typ: "dpop+jwt", alg: "ES256", jwk: 
+	let Header = {typ: "dpop+jwt", alg: "ES256", jwk: 
 		await crypto.subtle.exportKey("jwk", PublicKey)
 		.then(function(response) {
 			delete response["key_ops"];
@@ -371,7 +395,7 @@ export async function ClientDPoPPDS(POSTorGET, RequestURL) {
 			return response})
 		};
 	// Payload
-	var Payload = {};
+	let Payload = {};
 	Payload.iss = "https://fedi.crowdedgames.group/oauth/client-metadata.json";
 	Payload.jti = crypto.randomUUID();
 	Payload.htm = POSTorGET;
@@ -380,9 +404,9 @@ export async function ClientDPoPPDS(POSTorGET, RequestURL) {
 	Payload.nonce = localStorage.getItem(Variables.BlueskyNonce);
 	Payload.ath = await CreatePKCECodeChallenge(localStorage.getItem(Variables.BlueskyAccessToken));
 
-	var sHeader = JSON.stringify(Header);
+	let sHeader = JSON.stringify(Header);
-	var sPayload = JSON.stringify(Payload);
+	let sPayload = JSON.stringify(Payload);
-	var JWT = KJUR.jws.JWS.sign("ES256", sHeader, sPayload, 
+	let JWT = KJUR.jws.JWS.sign("ES256", sHeader, sPayload, 
 	await crypto.subtle.exportKey("jwk", PrivateKey)
 	.then(function(response) {
 		delete response["key_ops"];

JS/MastodonAPI.js

@@ -4,24 +4,33 @@ export const Scopes = "read write follow push";
 
 // Getters
 // Gets the public timeline.
-export async function GetPublicTimeline(Local = false, Remote = false, Website) {
+export async function GetPublicTimeline(Local = false, Remote = false, Website, Cursor) {
 	// Variables can be found in `setting.js`
 	let Timeline;
-	if (Local == true && Remote == true) {
-		console.error("Don't set both Local and Remote timelines to true.");
-		return Timeline;
-	}
 	
-	if (Local == true) {
+	if (Cursor == "") {
-		Timeline = await fetch(Website + "/api/v1/timelines/public?local=true")
+		if (Remote == true && Local == false) {
-		.then((response) => response.json());
-	} else if (Remote == true) {
 			Timeline = await fetch(Website + "/api/v1/timelines/public?remote=true")
 			.then((response) => response.json());
+		} else if (Local == true && Remote == false) {
+			Timeline = await fetch(Website + "/api/v1/timelines/public?local=true")
+			.then((response) => response.json());
 		} else {
 			Timeline = await fetch(Website + "/api/v1/timelines/public")
 			.then((response) => response.json());
 		}
+	} else {
+		if (Remote == true && Local == false) {
+			Timeline = await fetch(Website + "/api/v1/timelines/public?remote=true&max_id=" + Cursor)
+			.then((response) => response.json());
+		} else if (Local == true && Remote == false) {
+			Timeline = await fetch(Website + "/api/v1/timelines/public?local=true&max_id=" + Cursor)
+			.then((response) => response.json());
+		} else {
+			Timeline = await fetch(Website + "/api/v1/timelines/public?max_id=" + Cursor)
+			.then((response) => response.json());
+		}
+	}
 	return Timeline;
 }
 

JS/index.js

@@ -14,22 +14,27 @@ let BrowserWidth = window.innerWidth;
 let BrowserHeight = window.innerHeight;
 
 let ArrowsButton = document.getElementsByClassName("Arrow");
+
 let SettingButton = document.getElementsByClassName("Setting")[0];
 let MailButton = document.getElementsByClassName("Mail")[0];
 let PostingButton = document.getElementsByClassName("Posting")[0];
+let FeedButton = document.getElementsByClassName("Feed")[0];
 
 // Sounds
 const ButtonSound = new Audio("Audio/button-305770.mp3");
 const WarningClick = new Audio("Audio/button-pressed-38129.mp3");
 const BackgroundMusic = new Audio("Audio/soft-piano-music-312509.mp3");
 
+// Discoverability
+let Discover = false;
+
 // Update a timer
 function UpdateTime() {
 	let TimeNow = new Date();
 	let Hour = TimeNow.getHours();
 	let Minute = TimeNow.getMinutes();
 	
-	var WebsiteTime = document.getElementsByClassName("Time")[0]
+	let WebsiteTime = document.getElementsByClassName("Time")[0]
 	WebsiteTime.innerHTML = "";
 	if (Hour < 10) {
 		WebsiteTime.innerHTML = WebsiteTime.innerHTML + "0" + Hour;
@@ -149,21 +154,33 @@ async function PosterContainerUpdate(Direction) {
 	
 	// Mastodon gaining of timeline.
 	if (localStorage.getItem(Variables.MastodonWebsite) == null) {
-		// The default website is Wetdry :3
 		console.log("No Mastodon instance. multiplying mastodon posts by 2...");
 		Lim = Lim * 2;
 		Mastodon = false;
 	} else if (MastodonLoadedFeed == 0) {
+		// If discover is turned on...
+		if (Discover == true) {
+			if (localStorage.getItem("Remote") != null) {
+				MastodonLoadedFeed = await MastodonAPI.GetPublicTimeline(true, true, localStorage.getItem(Variables.MastodonWebsite), "");
+			} else {
+				MastodonLoadedFeed = await MastodonAPI.GetPublicTimeline(true, false, localStorage.getItem(Variables.MastodonWebsite), "");
+			}
+		} else {
 			MastodonLoadedFeed = await MastodonAPI.GetTimeline("");
 		}
+	}
 	// Bluesky gaining of timeline.
 	if (localStorage.getItem(Variables.BlueskyPDS) == null) {
 		console.log("No Bluesky instance. multiplying mastodon posts by 2...");
 		Lim = Lim * 2;
 		Bluesky = false;
 	} else if (BlueskyLoadedFeed.length == 0) {
+		if (Discover == true) {
+			BlueskyLoadedFeed = await BlueskyAPI.GetPublicTimeline("").then((response) => response.feed);
+		} else {
 			BlueskyLoadedFeed = await BlueskyAPI.GetTimeline("").then((response) => response.feed);
 		}
+	}
 	if (Direction == "Forward") {
 		CurrentThing = CurrentThing + Lim;
 	} else if (Direction == "Backward") {
@@ -192,7 +209,16 @@ async function PosterContainerUpdate(Direction) {
 				WebsiteAPIType.push("Mastodon");
 				i.getElementsByClassName("PostContent")[0].innerHTML = "";
 				if (MastodonLoadedFeed[CurrentThing + counter] == undefined) {
-					let TempFeed = await MastodonAPI.GetTimeline(MastodonLoadedFeed[CurrentThing + counter - 1].id);
+					let TempFeed;
+					if (Discover == true) {
+						if (localStorage.getItem("Remote") != null) {
+							TempFeed = await MastodonAPI.GetPublicTimeline(true, true, localStorage.getItem(Variables.MastodonWebsite), MastodonLoadedFeed[CurrentThing + counter - 1].id);
+						} else {
+							TempFeed = await MastodonAPI.GetPublicTimeline(true, false, localStorage.getItem(Variables.MastodonWebsite), MastodonLoadedFeed[CurrentThing + counter - 1].id);
+						}
+					} else {
+						TempFeed = await MastodonAPI.GetTimeline(MastodonLoadedFeed[CurrentThing + counter - 1].id);
+					}
 					MastodonLoadedFeed = MastodonLoadedFeed.concat(TempFeed);
 				}
 				// Check for images. Reblog roundabout fix included.
@@ -238,7 +264,12 @@ async function PosterContainerUpdate(Direction) {
 				WebsiteAPIType.push("Bluesky");
 				i.getElementsByClassName("PostContent")[0].innerHTML = "";
 				if (BlueskyLoadedFeed[CurrentThing + counter] == undefined) {
-					let TempFeed = await BlueskyAPI.GetTimeline(BlueskyLoadedFeed[CurrentThing + counter - 1].post.indexedAt).then((response) => response.feed)
+					let TempFeed;
+					if (Discover == true) {
+						BlueskyLoadedFeed = await BlueskyAPI.GetPublicTimeline(BlueskyLoadedFeed[CurrentThing + counter - 1].post.indexedAt).then((response) => response.feed);
+					} else {
+						TempFeed = await BlueskyAPI.GetTimeline(BlueskyLoadedFeed[CurrentThing + counter - 1].post.indexedAt).then((response) => response.feed);
+					}
 					BlueskyLoadedFeed = BlueskyLoadedFeed.concat(TempFeed);
 				}
 				// check for "already seen" posts, then put it as a seen post.
@@ -273,7 +304,7 @@ async function PosterContainerUpdate(Direction) {
 					i.getElementsByClassName("Username")[0].innerHTML = BlueskyLoadedFeed[CurrentThing + counter].post.author.handle;
 				}
 				// Apply correct facets.
-				var TempText = await BlueskyAPI.ApplyFacets(BlueskyLoadedFeed[CurrentThing + counter].post.record, BlueskyLoadedFeed[CurrentThing + counter].post.record.text);
+				let TempText = await BlueskyAPI.ApplyFacets(BlueskyLoadedFeed[CurrentThing + counter].post.record, BlueskyLoadedFeed[CurrentThing + counter].post.record.text);
 				TempText = TempText.replace(/\r?\n|\r/g, "<br/>");
 				i.getElementsByClassName("PostContent")[0].innerHTML += TempText;
 				break;
@@ -316,3 +347,12 @@ MailButton.onclick = (event) => {
 PostingButton.onclick = (event) => {
 	window.location.href = "./HTML/post.html";
 }
+
+FeedButton.onclick = (event) => {
+	Discover = !(Discover);
+	MastodonLoadedFeed = [];
+	BlueskyLoadedFeed = [];
+	CurrentThing = 0;
+	PosterContainerUpdate();
+	
+}

JS/setting.js

@@ -5,7 +5,6 @@ import * as YoutubeAPI from "./YoutubeAPI.js";
 import * as Variables from "./Variables.js";
 
 // Settings buttons
-let LocalButton = document.getElementsByClassName("Local")[0];
 let RemoteButton = document.getElementsByClassName("Remote")[0];
 
 // Website Stuff
@@ -25,16 +24,7 @@ let YoutubeLogoutButton = document.getElementsByClassName("Logout Youtube")[0];
 // original link
 let Origin = location.origin + "/HTML/setting.html"
 
-// Change weather the timelines are public or remote
+// Allow the user to change if Remote is a thing or not.
-LocalButton.onclick = (event) => {
-	// Toggle the Variable
-	if (localStorage.getItem("Local") != null) {
-		localStorage.removeItem("Local");
-	} else {
-		localStorage.setItem("Local", "true");
-	}
-}
-
 RemoteButton.onclick = (event) => {
 	// Toggle the Variable
 	if (localStorage.getItem("Remote") != null) {

index.html

@@ -301,10 +301,10 @@
 			
 			<footer class="MainFooter">
 				<p class="Setting">Setting</p>
-				<p class="Setting">Setting2</p>
+				<p class="Feed">Feed</p>
 				<p class="Time" style="width: 50%">Time</p>
-				<p class="Posting">Post</p>
 				<p class="Mail">Mail</p>
+				<p class="Posting">Posting</p>
 			</footer>
 		</section>
 	</body>