From 53204d067b38f9c9104a99fa1ba99ca606bbfb31 Mon Sep 17 00:00:00 2001
From: octospacc <octo@tutamail.com>
Date: Mon, 1 Jul 2024 20:45:14 +0200
Subject: [PATCH] Fix ServiceWorker, update MBViewer, misc app fixes

---
 shared/OctoHub-Global.js              |   2 +-
 static/MBViewer/css/MBViewer.css      |  30 ++++++
 static/MBViewer/css/print.css         |  12 ++-
 static/MBViewer/index.html            |  11 ++-
 static/MBViewer/js/MBViewer.js        | 131 +++++++++++++++++++++-----
 static/MatrixStickerHelper/index.html |   7 +-
 static/ServiceWorker.js               |  10 +-
 static/TiktOctt/index.html            |   2 +-
 8 files changed, 172 insertions(+), 33 deletions(-)

diff --git a/shared/OctoHub-Global.js b/shared/OctoHub-Global.js
index 7d74831..7ba3d23 100644
--- a/shared/OctoHub-Global.js
+++ b/shared/OctoHub-Global.js
@@ -19,7 +19,7 @@ if (['', 'hub.octt.eu.org'].includes(location.host)) {
 		font-size: smaller;
 		text-align: center;
 	`;
-	noticeElem.innerHTML = `You are viewing this page on the secondary/backup domain. <a style="color: darkblue;" href="https://hub.octt.eu.org${location.pathname}">Open it on hub.octt.eu.org</a>.
+	noticeElem.innerHTML = `You are viewing this page on a secondary/backup domain. <a style="color: darkblue;" href="https://hub.octt.eu.org${location.pathname}">Open it on hub.octt.eu.org</a>.
 	<button style="
 		float: right;
 		height: 1.25em;
diff --git a/static/MBViewer/css/MBViewer.css b/static/MBViewer/css/MBViewer.css
index e86b6b7..ee16e91 100644
--- a/static/MBViewer/css/MBViewer.css
+++ b/static/MBViewer/css/MBViewer.css
@@ -14,3 +14,33 @@ div.tgme_widget_message_text > div.MbPost * {
 div.tgme_widget_message_text > div.MbPost figure {
 	margin: 1em;
 }
+
+section.tgme_right_column > div.tgme_channel_info {
+	overflow-y: auto;
+	width: calc(100% - 36px);
+}
+
+main.tgme_main > div.ChatList div.ChatButton {
+	background-color: var(--bubble-bgcolor);
+	margin-top: 4px;
+}
+
+main.tgme_main > div.ChatList div.ChatButton > a {
+	display: flex;
+}
+
+main.tgme_main > div.ChatList div.ChatButton > a > * {
+	float: left;
+}
+
+main.tgme_main > div.ChatList div.ChatButton > a > i.tgme_widget_message_user_photo {
+	margin: 4px;
+	background-color: unset;
+}
+
+main.tgme_main > div.ChatList div.ChatButton > a > span {
+	display: block;
+	padding-top: 0.8em;
+	padding-left: 4px;
+}
+
diff --git a/static/MBViewer/css/print.css b/static/MBViewer/css/print.css
index cc03f9c..e1a0933 100644
--- a/static/MBViewer/css/print.css
+++ b/static/MBViewer/css/print.css
@@ -3,9 +3,11 @@ body {
 	color: black;
 }
 
-img {
-	max-width: 100%;
+img, video, iframe {
+	max-width: 40em;
+	max-height: 30em;
 	height: auto;
+	width: auto;
 }
 
 div.tgme_background_wrap,
@@ -35,3 +37,9 @@ div.tgme_widget_message_footer a {
 	width: 36px;
 	height: 36px;
 }
+
+div.tgme_widget_message_wrap {
+	border-top: 2px solid black;
+	margin-top: 16px;
+	margin-bottom: 8px;
+}
diff --git a/static/MBViewer/index.html b/static/MBViewer/index.html
index 6d122ae..bf0cd0c 100644
--- a/static/MBViewer/index.html
+++ b/static/MBViewer/index.html
@@ -189,10 +189,19 @@
 			</div>
 		</header>
 		<main class="tgme_main">
+				<div class="ChatList">
+					<div class="ChatButton">
+						<a href="#/mbviewer" onclick="UpdateChatOpenTime()">
+							<i class="tgme_widget_message_user_photo bgcolor5" data-content="👁️‍🗨️️ MBV"></i>
+							<span>👁️‍🗨️️ MBViewer <small>(Info and help)</small></span>
+						</a>
+					</div>
+					<div class="ChatAdds"></div>
+				</div>
 			<div class="tgme_container">
 				<section class="tgme_channel_history js-message_history">
 					<noscript>
-						<p>
+						<p style="color: white; background-color: black;">
 							This application requires modern JavaScript.
 						</p>
 					</noscript>
diff --git a/static/MBViewer/js/MBViewer.js b/static/MBViewer/js/MBViewer.js
index 919d1a8..ecbb8d3 100644
--- a/static/MBViewer/js/MBViewer.js
+++ b/static/MBViewer/js/MBViewer.js
@@ -19,19 +19,32 @@
 let MbState = {};
 let MbApiTransformer;
 
+function MbStorage (key, value) {
+	base = 'org.eu.octt.MBViewer/v1';
+	data = (JSON.parse(localStorage.getItem(base)) || {});
+	if (value === undefined) {
+		return data[key];
+	}
+	data[key] = value;
+	return localStorage.setItem(base, JSON.stringify(data));
+}
+
 function ArgsRewrite (props={}, navigate=true) {
 	for (const key in props) {
 		const value = props[key];
 		value ? (MbState.args[key] = value) : (delete MbState.args[key]);
 	}
-	let hash = '/';
+	let hash = '';
 	for (const arg in MbState.args) {
 		hash += `${arg}=${MbState.args[arg]}|`;
 	}
+	if (hash) {
+		hash = `/${hash}`;
+	}
 	if (navigate) {
 		location.hash = hash;
 	}
-	return hash
+	return hash;
 }
 
 const SureArray = (obj) => (Array.isArray(obj) ? obj : [obj]);
@@ -74,8 +87,9 @@ function MakeSiteRestUrl (path='') {
 		return `${siteUrl}/wp-content/uploads/${siteUrl.split('.').slice(0, 1)[0].split('//')[1]}/scripts/stuff.php?&Thing=SiteWpJsonCors&AccessToken=9ab6e20c&$Query=${encodeURIComponent(path)}`;
 	} else {
 		if (["atom", "rss", "wordpress.org"].includes(MbState.platform)) {
-			const proxies = ["corsproxy.io", "corsproxy.org"];
-			return `https://${proxies[~~(Math.random() * proxies.length)]}/?${siteUrl}/${MbState.platform === 'wordpress.org' ? `wp-json/${path}` : ''}`;
+			const proxies = ["hlb0.octt.eu.org/cors-main.php/", "corsproxy.io/?", /*"corsproxy.org/?"*/];
+			const proxy = proxies[~~(Math.random() * proxies.length)];
+			return `https://${proxy}${siteUrl}${MbState.platform === 'wordpress.org' ? `/wp-json/${path}` : ''}`;
 		} else if (MbState.platform === 'wordpress.com') {
 			return `https://public-api.wordpress.com/rest/v1.1/sites/${GetDomainFromUrl(siteUrl)}/${path}`;
 		} else if (MbState.platform === 'mastodon') {
@@ -117,7 +131,7 @@ function MakeApiEndpoint (type, options={}) {
 	return query;
 }
 
-function MakeAcroName(name) {
+function MakeAcroName (name) {
 	let acro = '';
 	for (const word of name.split(' ').slice(0,3)) {
 		acro += word[0].toUpperCase();
@@ -125,10 +139,40 @@ function MakeAcroName(name) {
 	return acro;
 }
 
-async function MbViewerInit () {
-	if (!location.hash) {
-		location.hash = '/';
+function UpdateChatOpenTime (queryUrl) {
+	const chats = MbStorage('chats');
+	for (const chatIndex in chats) {
+		if (chats[chatIndex].queryUrl == queryUrl) {
+			chats[chatIndex].openTime = Date.now();
+			MbStorage('chats', chats);
+			break;
+		}
 	}
+}
+
+function CheckChatFavorite (siteUrl) {
+	return MbStorage('chats').some((chat) => (chat.siteUrl === siteUrl));
+}
+
+function ToggleChatFavorite (siteUrl) {
+	const chats = MbStorage('chats');
+	const present = CheckChatFavorite(siteUrl);
+	if (!present) {
+		chats.push({ name: MbState.siteData.name, iconUrl: MbState.siteData.iconUrl, siteUrl, queryUrl: location.hash, openTime: Date.now() });
+		MbStorage('chats', chats);
+	} else {
+		for (const chatIndex in chats) {
+			if (chats[chatIndex].siteUrl === siteUrl) {
+				chats.splice(chatIndex, 1);
+				MbStorage('chats', chats);
+				break;
+			}
+		}
+	}
+	$('button[name="ToggleChatFavorite"]').html(`${present ? '➕️ Add to' : '❌️ Remove from'} favorites ⭐️`);
+}
+
+async function MbViewerInit () {
 	if (!MbApiTransformer) {
 		MbApiTransformer = Trasformapi(MbViewerTrasformapiSchema).TransformForInput;
 	}
@@ -159,11 +203,7 @@ async function MbViewerInit () {
 		if (!urlLow.startsWith('http://') && !urlLow.startsWith('https://')) {
 			url = `https://${url}`;
 		}
-		if (["t.me", "telegram.me"].includes(url.toLowerCase().split('://')[1].split('/')[0])) {
-			location = url;
-		} else {
-			ArgsRewrite({ siteurl: url });
-		}
+		ArgsRewrite({ siteurl: url });
 		event.preventDefault();
 	};
 	$('a.tgme_header_link')[0].onclick = function(){
@@ -196,8 +236,40 @@ async function MbViewerInit () {
 			MbState.args[argTokens[0].toLowerCase()] = (valueItems.length > 1 ? valueItems : valueItems[0]);
 		}
 	}
+	if (!Object.keys(MbState.args).length) {
+		$('a[name="goBack"]')[0].hidden = true;
+		$('.tgme_header_title').html(MbState.siteData.name);
+		$('.tgme_header_right_column')[0].hidden = true;
+		$('div.ChatList > div.ChatAdds')[0].innerHTML = '';
+		$('div.ChatList')[0].hidden = false;
+		for (const chat of [...MbStorage('chats')].sort((a, b) => (b.openTime || 0) - (a.openTime || 0))) {
+			if (!chat.queryUrl) {
+				continue;
+			}
+			$('div.ChatList > div.ChatAdds')[0].innerHTML += `<div class="ChatButton">
+				<a href="${chat.queryUrl}" onclick="UpdateChatOpenTime('${chat.queryUrl}')">
+					<i class="tgme_widget_message_user_photo" data-content="${!chat.iconUrl ? MakeAcroName(chat.name) : ''}">
+						<img src="${chat.iconUrl || ''}"/>
+					</i>
+					<span>${chat.name}</span>
+				</a>
+			</div>`;
+		}
+		return
+	}
+	$('div.ChatList')[0].hidden = true;
+	$('.tgme_header_right_column')[0].hidden = false;
 	MbState.siteUrl = MbState.args.siteurl;
 	MbState.platform = /*SureArray(*/MbState.args.platform/*)*/;
+	if (!MbState.platform && MbState.siteUrl) {
+		if (["t.me", "telegram.me"].includes(GetDomainFromUrl(MbState.siteUrl).toLowerCase())) {
+			MbState.siteUrl = `https://rsshub.app/telegram/channel/${MbState.siteUrl.split('//')[1].split('/')[1]}`;
+			MbState.platform = 'rss';
+		}
+		if (MbState.siteUrl.toLowerCase().endsWith('.rss')) {
+			MbState.platform = 'rss';
+		}
+	}
 	MbState.postId = MbState.args.postid;
 	//MbState.postSlug = MbState.args.postslug;
 	RefreshIncludeStyle();
@@ -318,9 +390,7 @@ async function MbViewerInit () {
 		$('form.tgme_header_search_form')[0].onsubmit = null;
 		$('.tgme_channel_info_header_username').html(`<a href="${siteLink}">${GetDomainFromUrl(siteLink).toLowerCase()}</a>`);
 	}
-	if (MbState.siteUrl || MbState.dataInject) {
-		$('a[name="goBack"]')[0].hidden = false;
-	}
+	$('a[name="goBack"]')[0].hidden = false;
 	if (["atom", "rss"].includes(MbState.platform)) {
 		$('section.tgme_channel_history.js-message_history').html(MakeMoreWrapperHtml());
 		TWeb.loadMore($('.js-messages_more_wrap > a'), MbState.siteData);
@@ -333,13 +403,12 @@ async function MbViewerInit () {
 		MbState.siteData.iconUrl = `${MbState.siteUrl}${MbState.siteData.iconUrl}`;
 	}
 	if (!MbState.siteUrl && !MbState.dataInject) {
-		$('a[name="goBack"]')[0].hidden = true;
 		$('section.tgme_channel_history.js-message_history').html(MakeMoreWrapperHtml());
 		TWeb.loadMore($('.js-messages_more_wrap > a'), [{ content: `<p>
 			Here I am, doing another strange thing of mine.
 			This is my personal experiment to make an MB-style frontend for sources that are by default not really friendly to that concept.
 			Since this first day, we will start with just WordPress, and we'll see what comes from that.
-			See <a href="https://octospacc.altervista.org/2024/01/13/wordpress-che-non-e/">https://octospacc.altervista.org/2024/01/13/wordpress-che-non-e/</a>.
+			See <a href="https://octospacc.altervista.org/2024/01/13/wordpress-che-non-e/">octospacc.altervista.org/2024/01/13/wordpress-che-non-e/</a>.
 		</p>`, time: '2024-01-13T21:00' }, { content: `<p>
 			After fixing a few post-release issues driving me insane (scrolling cough cough), here are some new improvements:
 			<br/> * Handling of posts without date is just a bit nicer.
@@ -386,7 +455,7 @@ async function MbViewerInit () {
 			<br/> * Read Telegram's JSON chat exports (experimental, very slow and resource-heavy)
 			<br/>
 			Regarding Trasformapi, I transformed some of my development tears into words, read here if you're curious:
-			<a href="https://octospacc.altervista.org/2024/01/25/mbviewer-per-distrarci/">https://octospacc.altervista.org/2024/01/25/mbviewer-per-distrarci/</a>.
+			<a href="https://octospacc.altervista.org/2024/01/25/mbviewer-per-distrarci/">octospacc.altervista.org/2024/01/25/mbviewer-per-distrarci/</a>.
 		</p>`, time: '2024-01-25T01:00' }, { content: `<p>
 			Some small things:
 			<br/> * Fixed RSS feeds parsing on Firefox (mentioned in the post linked above), by fixing a bug in Trasformapi
@@ -396,12 +465,19 @@ async function MbViewerInit () {
 			New changes:
 			<br/> * Support including user-defined JS scripts from URL (<code>data:</code> supported) via the <code>includeScript</code> argument. A script must expose a <code>MbViewerFunction(data)</code> function to be invoked by the main application to do useful operations, and then return data by calling the <code>MbViewerReturn(data)</code> API function.
 			<br/>
-			...I will probably need to write actual documentation about this, but for sure I will post about this on <a href="https://octospacc.altervista.org/?p=1416">https://octospacc.altervista.org/?p=1416</a>.
+			...I will probably need to write actual documentation about this, but for sure I will post about this on <a href="https://octospacc.altervista.org/?p=1416">octospacc.altervista.org/?p=1416</a>.
 		</p>`, time: '2024-02-01T00:00' }, { content: `<p>
 			Updates:
 			<br/> * Include special CSS for optimized PDF/paper printing
-		</p>`, time: '2024-02-05T11:00' }, { content: `<p>
-			Copyright notice: MBViewer uses code borrowed from <a href="https://t.me">t.me</a>,
+		</p>`, time: '2024-02-05T11:00' }, { content: `<p><!--
+			++-->* Added a main sources list, new ones can be added via a button in their menu after being open by URL
+			<br/>* Made the printable CSS a bit nicer with borders, margins, and properly-sized images
+			<br/>* Updated CORS proxies
+			<br/>* Now handling Telegram URLs via <a href="https://rsshub.app">RSSHub.app</a>
+			<br/>* Probably fixed an issue with <code>location.hash</code> overriding that made going back to another site from the app impossible
+			<br/>Devlog: <a href="https://octospacc.altervista.org/?p=7098">octospacc.altervista.org/?p=7098</a>.
+		</p>`, time: '2024-07-01T20:00' }, { content: `<p>
+			Copyright notice: MBViewer uses code borrowed from <a href="https://t.me">https://t.me</a>,
 			specially modified to handle customized data visualizations in an MB-style.
 			<br/>
 			This webapp is not affiliated with Telegram (Telegram FZ LLC, Telegram Messenger Inc.), and 
@@ -411,7 +487,7 @@ async function MbViewerInit () {
 	document.title = `${MbState.siteData.name} — 👁️‍🗨️️ MBViewer`;
 	$('.tgme_page_photo_image').attr('data-content', MbState.siteData.acroName);
 	$('.tgme_header_title, .tgme_channel_info_header_title').html(MbState.siteData.name);
-	$('.tgme_channel_info_description').html(MbState.siteData.description);
+	$('.tgme_channel_info_description').html((MbState.siteUrl ? `<div><p><button name="ToggleChatFavorite" onclick="ToggleChatFavorite('${MbState.siteUrl}')">${!CheckChatFavorite(MbState.siteUrl) ? '➕️ Add to' : '❌️ Remove from'} favorites ⭐️</button></p></div>` : '') + MbState.siteData.description);
 	if (MbState.siteData.iconUrl) {
 		$('.tgme_page_photo_image').html(`<img src="${MbState.siteData.iconUrl}"/>`);
 	} else {
@@ -652,9 +728,16 @@ function ResizeLayouts () {
 }
 
 $('a[name="goBack"]')[0].onclick = function(){
-	ArgsRewrite({ dataurl: null, siteurl: null, postid: null, platform: null, includestyle: null, includescript: null /*postslug: null*/ });
+	//ArgsRewrite({ dataurl: null, siteurl: null, postid: null, platform: null, includestyle: null, includescript: null /*postslug: null*/ });
+	location.hash = '';
 };
 
+if (!MbStorage('chats')) {
+	const octospacc = { name: "fritto misto di octospacc <small>(Consigliato)</small>", siteUrl: "https://octospacc.altervista.org", iconUrl: "https://octospacc.altervista.org/wp-content/uploads/2024/05/fried-shrimp_1f364.png" };
+	octospacc.queryUrl = `#/siteUrl=${octospacc.siteUrl}`;
+	MbStorage('chats', [{}, octospacc]);
+}
+
 // TODO: we should check origin
 window.addEventListener('message', function(event){
 	// TODO edit the video embed function to send objects for consistency
diff --git a/static/MatrixStickerHelper/index.html b/static/MatrixStickerHelper/index.html
index 62a3792..522ed01 100644
--- a/static/MatrixStickerHelper/index.html
+++ b/static/MatrixStickerHelper/index.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta property="og:title" content="🃏️ [Matrix] Sticker Helper"/>
@@ -39,7 +41,8 @@ TODO:
 * APNG encoding, if it works
 * allow copying the JSON (and optionally reuploading images? probably not needed tho) when importing existing Maunium packs
 -->
-
+</head>
+<body>
 <div id="Main" hidden="true">
 	<div id="LayoutAccountSelect"></div>
 
@@ -1039,3 +1042,5 @@ TODO:
     	max-width: 128px;
 	}
 </style>
+</body>
+</html>
diff --git a/static/ServiceWorker.js b/static/ServiceWorker.js
index 3d4f2a2..7102e07 100644
--- a/static/ServiceWorker.js
+++ b/static/ServiceWorker.js
@@ -12,8 +12,12 @@ const checkUrlCaching = (url) => {
 };
 
 const putResponseInCache = (request, response) => {
-	if (response.ok) {
-		caches.open('OctoSpaccHub/v1').then((cache) => cache.put(request, response.clone()));
+	if (request.method === 'GET' && response.ok) {
+		return caches.open('GamingShitposting/v1').then((cache) => {
+			try {
+				return cache.put(request, response.clone());
+			} catch(err) {}
+		});
 	}
 }
 
@@ -42,4 +46,4 @@ self.addEventListener('fetch', (event) => {
 	if (strategy) {
 		return event.respondWith(strategy(event.request));
 	}
-});
\ No newline at end of file
+});
diff --git a/static/TiktOctt/index.html b/static/TiktOctt/index.html
index 5b839dc..1bea5a5 100644
--- a/static/TiktOctt/index.html
+++ b/static/TiktOctt/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>