Update MBViewer

public/MBViewer/index.html

@@ -151,8 +151,13 @@
 					</section>
 				</div>
 				<div class="tgme_header_info">
+					<a href="javascript:;" name="goBack" style="float: left; margin: 8px;" hidden="true">
+						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+							<path d="M16.943 7.609a1.333 1.333 0 1 0-1.886-1.886l-9.333 9.333a1.334 1.334 0 0 0 0 1.886l9.333 9.333a1.333 1.333 0 1 0 1.886-1.886l-7.057-7.057h15.448a1.333 1.333 0 0 0 0-2.666H9.886l7.057-7.057z"/>
+						</svg>
+					</a>
 					<!--
-					<a class="tgme_channel_join_telegram" href="dl?tme=f036ac1a4091d93f77_16903051027483582417">
+					<a class="tgme_channel_join_telegram">
 						<svg class="tgme_channel_join_telegram_icon" width="19px" height="16px" viewBox="0 0 19 16">
 							<g fill="none">
 								<path fill="#ffffff" d="M0.465,6.638 L17.511,0.073 C18.078,-0.145 18.714,0.137 18.932,0.704 C19.009,0.903 19.026,1.121 18.981,1.33 L16.042,15.001 C15.896,15.679 15.228,16.111 14.549,15.965 C14.375,15.928 14.211,15.854 14.068,15.748 L8.223,11.443 C7.874,11.185 7.799,10.694 8.057,10.345 C8.082,10.311 8.109,10.279 8.139,10.249 L14.191,4.322 C14.315,4.201 14.317,4.002 14.195,3.878 C14.091,3.771 13.926,3.753 13.8,3.834 L5.602,9.138 C5.112,9.456 4.502,9.528 3.952,9.333 L0.486,8.112 C0.077,7.967 -0.138,7.519 0.007,7.11 C0.083,6.893 0.25,6.721 0.465,6.638 Z"></path>

public/MBViewer/js/MBViewer.js

@@ -11,6 +11,8 @@
 
 let MbState = {};
 
+const SureArray = (obj) => (Array.isArray(obj) ? obj : [obj]);
+
 // <https://stackoverflow.com/questions/29956338/how-to-accurately-determine-if-an-element-is-scrollable/71170105#71170105>
 function CanScrollEl(el, scrollAxis) {
 	if (0 === el[scrollAxis]) {
@@ -35,12 +37,20 @@ function GetDomainFromUrl (url) {
 function MakeSiteRestUrl (path='') {
 	const siteUrl = MbState.siteUrl;
 	if (GetDomainFromUrl(siteUrl).toLowerCase() === 'octospacc.altervista.org') {
-		return `${siteUrl}/wp-content/uploads/${siteUrl.split('.').slice(0, 1)[0].split('//')[1]}/scripts/stuff.php?&Thing=SiteWpJsonCors&AccessToken=9ab6e20c&$Query=${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 {
-		// TODO: universal cors bypass
+		if (MbState.platform === 'wordpress.org') {
-		return `${siteUrl}/wp-json/${path}`;
+			const proxies = ["corsproxy.io", "corsproxy.org"];
+			return `https://${proxies[~~(Math.random() * proxies.length)]}/?${siteUrl}/wp-json/${path}`;
+		} else if (MbState.platform === 'wordpress.com') {
+			return `https://public-api.wordpress.com/rest/v1.1/sites/${GetDomainFromUrl(siteUrl)}/${path}`;
 		}
 	}
+}
+
+function MakeApiEndpoint (platform, options) {
+	// ...
+}
 
 async function MbViewerInit () {
 	if (!location.hash) {
@@ -49,8 +59,14 @@ async function MbViewerInit () {
 	MbState = {
 		siteData: {
 			name: "MBViewer",
-			description: "",
+			description: `
+				The messages of this channel are baked inside the app,
+				and serve as the centralized place for all kinds of information about it,
+				while at the same time acting as a demo.
+				Please enjoy your time here, or use the search bar to input a supported URL.
+			`,
 		},
+		platform: "wordpress.org",
 	};
 	$('form.tgme_header_search_form')[0].action = '';
 	$('form.tgme_header_search_form')[0].onsubmit = function(event){
@@ -68,6 +84,9 @@ async function MbViewerInit () {
 		MbState[argTokens[0]] = argTokens.slice(1).join('=');
 	}
 	if (MbState.siteUrl) {
+		if (GetDomainFromUrl(MbState.siteUrl).toLowerCase().endsWith('wordpress.com')) {
+			MbState.platform = 'wordpress.com';
+		}
 		const siteRequest = await fetch(MakeSiteRestUrl());
 		MbState.siteData = await siteRequest.json();
 		$('form.tgme_header_search_form')[0].action = `${MbState.siteUrl}/?s`;
@@ -75,56 +94,62 @@ async function MbViewerInit () {
 		$('a.tgme_header_link')[0].href = MbState.siteUrl;
 		$('.tgme_channel_info_header_username').html(`<a href="${MbState.siteUrl}">${GetDomainFromUrl(MbState.siteUrl).toLowerCase()}</a>`);
 		$('.tgme_page_photo_image').html(`<img src="${MbState.siteUrl}${MbState.siteData.site_icon_url}"/>`);
+		$('a[name="goBack"]')[0].hidden = false;
+		$('section.tgme_channel_history.js-message_history').html(MakeMoreWrapperHtml(0, 'before'));
+		MbState.lastMustScroll = 3; // Firefox fix
+		TWeb.loadMore($('.js-messages_more_wrap > a'), true);
 	} else {
+		$('a[name="goBack"]')[0].hidden = true;
 		$('.tgme_page_photo_image').addClass('bgcolor0');
 		$('.tgme_page_photo_image').attr('data-content', 'MBV');
-		$('section.tgme_channel_history.js-message_history').append(MakeMbHtml({ content: `
+		$('section.tgme_channel_history.js-message_history').html(MakeMoreWrapperHtml());
-			<p>
+		TWeb.loadMore($('.js-messages_more_wrap > a'), true, [{ content: `<p>
-				MBViewer WIP Version, 2024-01-13.
+			Here I am doing, another strange thing of mine.
-			</p>
+			This is my personal experiment to make an MB-style frontend for sources that are by default not really friendly to that concept.
-			<p>
+			Since this first day, we will start with just WordPress, and we'll see what comes from that.
-				Uses code borrowed from <a href="https://t.me">t.me</a>, specially modified to handle custom MB-style data visualization.
+			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>.
-				This webapp is not affiliated with Telegram, and all rights upon the original materials belong to the original owners.
+		</p>`, date: '2024-01-13' }, { content: `<p>
-			</p>
+			After fixing a few post-release issues driving me insane (scrolling cough cough), here are some new improvements:
-		</p>` }));
+			<br/> * Handling of posts without date is just a bit nicer.
+			<br/> * Added a back button to return to this page here from a real site stream.
+			<br/> * Added CORS proxies to handle sites normally inaccessible.
+			<br/> * Hey there, this text and everything is new...
+			<br/>
+			I also just now realized that wordpress.com uses a different REST API with different endpoints and parameters,
+			so I will need to handle that...
+		</p>`, date: '2024-01-14T02:00' }, { content: `<p>
+			Copyright notice: MBViewer uses code borrowed from <a href="https://t.me">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 
+			all rights upon the original materials (which are: everything not strictly related to the "MBViewer" mod) belong to the original owners.
+		</p>` }]);
 	}
 
 	$('.tgme_header_title, .tgme_channel_info_header_title').html(MbState.siteData.name);
 	$('.tgme_channel_info_description').html(MbState.siteData.description);
-
-	//const postsRequest = await fetch(MakeSiteRestUrl('wp/v2/posts/?&offset=0&per_page=1'));
-	//const postsData = await postsRequest.json();
-	// // TODO: since this request already gives us the content of the latest post, maybe we can cache it somewhere to avoid wasting too much traffic?
-
-	//$('section.tgme_channel_history.js-message_history').append(MakeMoreWrapperHtml(postsData[0].id, 'before'));
-	$('section.tgme_channel_history.js-message_history').append(MakeMoreWrapperHtml(0, 'before'));
-	MbState.lastMustScroll = 2;
-	TWeb.loadMore($('.js-messages_more_wrap > a'), true);
-	// TODO: scroll to the very bottom of the document somehow after showing a first message, to have a less jarring visual effect?
 }
 
-//function MakeMoreWrapperHtml (postId, wrapType) {
-//	return `<div class="tgme_widget_message_centered js-messages_more_wrap">
-//		<a href="${MakeSiteRestUrl(`wp/v2/posts/${postId}`)}" data-${wrapType}="" class="tme_messages_more js-messages_more"></a>
-//	</div>`
-//}
-
 function MakeMoreWrapperHtml (postOffset, wrapType) {
+	if (postOffset >= 0) {
 		MbState.lastPostOffset = (postOffset + 1);
+	}
 	return `<div class="tgme_widget_message_centered js-messages_more_wrap">
-		<a href="${MakeSiteRestUrl(`wp/v2/posts/?offset=${postOffset}&per_page=1`)}" data-${wrapType}="" class="tme_messages_more js-messages_more"></a>
+		<a href="${MbState.siteUrl && MakeSiteRestUrl(`wp/v2/posts/?offset=${postOffset}&per_page=1`)}" data-${wrapType}="" class="tme_messages_more js-messages_more"></a>
-	</div>`
+	</div>`;
 }
 
 function MakeMbHtml (postData) {
 	postData = (typeof(postData) === 'string' ? JSON.parse(postData) : postData);
-	postData = (postData[0] || postData);
+	let html = '';
-	return `
+	const siteHref = (MbState.siteUrl ? `href="${MbState.siteUrl}"` : '');
+	for (postData of SureArray(postData)) {
+		html += `
 			${MbState.siteUrl ? MakeMoreWrapperHtml(MbState.lastPostOffset, 'before') : ''}
 			<div class="tgme_widget_message_wrap js-widget_message_wrap date_visible">
-			<div class="tgme_widget_message text_not_supported_wrap js-widget_message" data-post="SpaccInc/1068">
+				<div class="tgme_widget_message text_not_supported_wrap js-widget_message" data-post="">
 					<div class="tgme_widget_message_user">
-					<a href="${MbState.siteUrl}">
+						<a ${siteHref}>
 							<i class="tgme_widget_message_user_photo ${MbState.siteUrl ? '' : 'bgcolor0'}" style="background-color: unset;" data-content="${MbState.siteUrl ? '' : 'MBV'}">
 								${MbState.siteUrl ? `<img src="${MbState.siteUrl}${MbState.siteData.site_icon_url}"/>` : ''}
 							</i>
@@ -142,7 +167,7 @@ function MakeMbHtml (postData) {
 							</svg>
 						</i>
 						<div class="tgme_widget_message_author accent_color">
-						<a class="tgme_widget_message_owner_name" href="${MbState.siteUrl}">
+							<a class="tgme_widget_message_owner_name" ${siteHref}>
 								<span dir="auto">
 									${MbState.siteData.name}
 								</span>
@@ -156,7 +181,7 @@ function MakeMbHtml (postData) {
 						<div class="tgme_widget_message_footer compact js-message_footer">
 							<div class="tgme_widget_message_info short js-message_info">
 								<span class="tgme_widget_message_meta">
-								<a class="tgme_widget_message_date" href="${postData.link}">
+									<a class="tgme_widget_message_date" ${postData.link ? `href="${postData.link}"` : ''}>
 										<time datetime="${postData.date}" class="time"></time>
 										<!-- TODO: show edited status -->
 									</a>
@@ -168,5 +193,11 @@ function MakeMbHtml (postData) {
 			</div>
 		`;
 	}
+	return html;
+}
+
+$('a[name="goBack"]')[0].onclick = function(){
+	location.hash = '/';
+};
 
 window.addEventListener('hashchange', MbViewerInit);

public/MBViewer/js/telegram-web.js

@@ -93,6 +93,9 @@ function formatDate(datetime) {
 	if (cur_date.getFullYear() == date.getFullYear()) {
 		return M + ' ' + j;
 	}
+	if (!j && !M && !Y) {
+		return 'Undefined';
+	}
 	return M + ' ' + j + ', ' + Y;
 }
 
@@ -277,7 +280,7 @@ var TWeb = {
 			$wrapEl.toggleClass('date_visible', date_visible);
 		}
 	},
-	loadMore: function($moreEl, scrollToLast) {
+	loadMore: function($moreEl, scrollToLast, dataOverride) {
 		var loading = $moreEl.data('loading');
 		if (loading) {
 			return false;
@@ -290,8 +293,20 @@ var TWeb = {
 		var time0 = +(new Date);
 		//console.log('loading...', before, after);
 		var _load = function(url, before, after) {
+			if (dataOverride) {
+				_loadContinue(dataOverride);
+			} else if (url) {
 				$.ajax(url, {
-				success: function(data) {
+					success: function(data) { _loadContinue(data) },
+					error: function(data) {
+						var timeout = $moreEl.data('timeout') || 1000;
+						$moreEl.data('timeout', timeout > 60000 ? timeout : timeout * 2);
+						setTimeout(function(){ _load(url, before, after); }, timeout);
+					}
+				});
+			}
+		};
+		function _loadContinue(data) {
 			var time1 = +(new Date);
 			//console.log('loaded ' + (time1 - time0) + 'ms');
 			var $data = $(MakeMbHtml(data));
@@ -331,14 +346,8 @@ var TWeb = {
 			}
 			if (!IsScrollableY($('html')[0])) {
 				TWeb.loadMore($('.js-messages_more_wrap > a'), true);
+				MbState.lastMustScroll--;
 			}
-				},
-				error: function(data) {
-					var timeout = $moreEl.data('timeout') || 1000;
-					$moreEl.data('timeout', timeout > 60000 ? timeout : timeout * 2);
-					setTimeout(function(){ _load(url, before, after); }, timeout);
-				}
-			});
 		};
 		_load(url, before, after);
 	},

public/MBViewer/js/widget-frame.js

@@ -1024,8 +1024,10 @@ function checkFrameSize() {
     if (H < 10) H = '0' + H;
     var i = date.getMinutes();
     if (i < 10) i = '0' + i;
+    if (H && i) {
       return H + ':' + i;
     }
+  }
 
   function formatDuration(duration) {
     duration = Math.floor(duration);