From ed9bdaf9fae77ee83bf8913b3b9bb549edd502a6 Mon Sep 17 00:00:00 2001 From: octospacc Date: Tue, 16 Jan 2024 00:16:00 +0100 Subject: [PATCH] update MBViewer --- public/MBViewer/css/MBViewer.css | 8 +++ public/MBViewer/index.html | 4 +- public/MBViewer/js/MBViewer.js | 111 ++++++++++++++++++++++------- public/MBViewer/js/telegram-web.js | 45 ++++++++---- 4 files changed, 127 insertions(+), 41 deletions(-) diff --git a/public/MBViewer/css/MBViewer.css b/public/MBViewer/css/MBViewer.css index c93c18d..b0b3919 100644 --- a/public/MBViewer/css/MBViewer.css +++ b/public/MBViewer/css/MBViewer.css @@ -1,3 +1,11 @@ +html.theme_dark svg.IconBlack { + filter: invert(1); +} + +body { + overflow-x: hidden; +} + .MbPost * { max-width: 100%; height: auto; diff --git a/public/MBViewer/index.html b/public/MBViewer/index.html index d67f99a..a0fce6e 100644 --- a/public/MBViewer/index.html +++ b/public/MBViewer/index.html @@ -77,7 +77,7 @@
@@ -159,7 +159,7 @@
Platform
diff --git a/public/MBViewer/js/MBViewer.js b/public/MBViewer/js/MBViewer.js index e75608e..cf03ad6 100644 --- a/public/MBViewer/js/MBViewer.js +++ b/public/MBViewer/js/MBViewer.js @@ -1,6 +1,5 @@ // TODO: -// * handle opening the feed at a specific post id in time -// ** support opening from not only id but also permalink +// * support opening posts from not only id but also permalink // * custom colors // * reduce lag on mobile somehow // * open author profiles/bios as a channel and show only their messages instead of the full site @@ -17,6 +16,7 @@ // * fix unfinished tasks still executing when clicking back // * fix imported SVG buttons not fitting with dark theme // * I think we might need to handle acronicized names for users when needed? +// * show, and/or sort by, posts tags/categories let MbState = {}; @@ -84,9 +84,11 @@ function MakeApiEndpoint (type, options={}) { const translations = { "wordpress.org": { count: "per_page", + orderBy: "orderby", }, "wordpress.com": { count: "number", + orderBy: "order_by", } } let query = ''; @@ -130,6 +132,9 @@ async function MbViewerInit () { `, }, authors: {}, + lastPostOffsetAfter: 0, + lastPostOffsetBefore: 0, + lastMustScroll: true, }; $('form.tgme_header_search_form')[0].action = ''; $('form.tgme_header_search_form')[0].onsubmit = function(event){ @@ -148,9 +153,11 @@ async function MbViewerInit () { $('a.tgme_header_link')[0].onclick = function(){ if (window.innerWidth <= 720 ) { // .tgme_header_right_column @media max-width if (!$('.tgme_header_right_column')[0].style.display) { + $('body')[0].style.overflow = 'hidden'; $('main.tgme_main')[0].style.visibility = 'hidden'; + $('.tgme_header_search')[0].style.display = 'none'; $('.tgme_header_right_column')[0].style.display = 'revert'; - $('.tgme_header_right_column')[0].style.width = 'revert'; + $('.tgme_header_right_column')[0].style.width = 'calc(100% - 24px)'; $('.tgme_header_right_column .tgme_channel_info')[0].style.height = 'calc(100% - 32px)'; $('.tgme_header_right_column a[name="closeColumn"]')[0].hidden = false; } else { @@ -159,7 +166,6 @@ async function MbViewerInit () { } }; $('.tgme_header_right_column a[name="closeColumn"]')[0].onclick = HideMobileRightColumn; - //$('a.tgme_header_link')[0].removeAttribute('href'); $('.tgme_channel_info_header_username').html(''); $('.tgme_page_photo_image').html(''); $('.tgme_page_photo_image').removeClass('bgcolor0 bgcolor1 bgcolor2 bgcolor3 bgcolor4 bgcolor5 bgcolor6'); @@ -176,6 +182,8 @@ async function MbViewerInit () { } MbState.siteUrl = MbState.args.siteurl; MbState.platform = /*SureArray(*/MbState.args.platform/*)*/; + MbState.postId = MbState.args.postid; + //MbState.postSlug = MbState.args.postslug; if (MbState.siteUrl) { if (!MbState.platform) { if (GetDomainFromUrl(MbState.siteUrl).toLowerCase().endsWith('wordpress.com')) { @@ -189,16 +197,30 @@ async function MbViewerInit () { MbState.siteData = await siteRequest.json(); } catch(err) { setTimeout(MbViewerInit, 1000); + return; } const siteLink = (MbState.siteData.url || MbState.siteData.URL || MbState.siteUrl); + MbState.startingPost = MbState.postId;//!!(MbState.postId || MbState.postSlug); + if (MbState.startingPost) { + try { + const postRequest = await fetch(MakeSiteRestUrl(MakeApiEndpoint('posts', { id: MbState.postId }))); + MbState.startingPost = await postRequest.json(); + $('section.tgme_channel_history.js-message_history').append(MakeMoreWrapperHtml('after')); + MbState.lastPostOffsetAfter = 0; // for some reason we need to clear this after making the wrapper or else we lose a post + TWeb.loadMore($('.js-messages_more_wrap > a[data-after]'), MbState.startingPost); + $('section.tgme_channel_history.js-message_history').prepend(MakeMoreWrapperHtml('before')); + } catch(err) { + setTimeout(MbViewerInit, 1000); + return; + } + } else { + $('section.tgme_channel_history.js-message_history').html(MakeMoreWrapperHtml('before')); + TWeb.loadMore($('.js-messages_more_wrap > a')); + } $('form.tgme_header_search_form')[0].action = `${siteLink}/?s`; $('form.tgme_header_search_form')[0].onsubmit = null; - //$('a.tgme_header_link')[0].href = siteLink; $('.tgme_channel_info_header_username').html(`${GetDomainFromUrl(siteLink).toLowerCase()}`); $('a[name="goBack"]')[0].hidden = false; - $('section.tgme_channel_history.js-message_history').html(MakeMoreWrapperHtml(0, 'before')); - MbState.lastMustScroll = true; - TWeb.loadMore($('.js-messages_more_wrap > a')); } MbState.siteData.iconUrl = (MbState.siteData.site_icon_url || MbState.siteData.icon?.img || MbState.siteData.icon?.ico); MbState.siteData.acroName ||= (!MbState.siteData.iconUrl ? MakeAcroName(MbState.siteData.name) : ''); @@ -234,6 +256,12 @@ async function MbViewerInit () {
* Now sites without an icon will display a random color and their acronicized name
* Hopefully fixed all the scrolling-loading issues for real this time...

`, date: '2024-01-15T01:00' }, { content: `

+ New changes: +
* Adapt newly-added icons for dark mode +
* Improved visualization of info column for small screens +
* Improved video anti-hotlinking bypass, added fullscreen button for browsers which wouldn't otherwise show the native one +
* Allow opening the stream at the point in time of a specific post ID for a website +

`, date: '2024-01-16T00:00' }, { content: `

Copyright notice: MBViewer uses code borrowed from t.me, specially modified to handle customized data visualizations in an MB-style.
@@ -249,21 +277,34 @@ async function MbViewerInit () { } else { $('.tgme_page_photo_image').addClass(`bgcolor${MbState.siteData.bgColor}`); } - MbState.lastMustScroll = true; } -function MakeMoreWrapperHtml (postOffset, wrapType) { - if (postOffset >= 0) { - MbState.lastPostOffset = (postOffset + 1); +function MakeMoreWrapperHtml (wrapType) { + let offset, order, relativeOpts; + switch (wrapType) { + case 'after': + offset = MbState.lastPostOffsetAfter; + MbState.lastPostOffsetAfter--; + order = 'asc'; + break; + case 'before': + offset = MbState.lastPostOffsetBefore; + MbState.lastPostOffsetBefore++; + order = 'desc'; + break; + } + if (MbState.startingPost) { + relativeOpts = { order: order, exclude: (MbState.startingPost.id || MbState.startingPost.ID) }; + relativeOpts[wrapType] = MbState.startingPost.date; } return `

- +
`; } -async function MakeMbHtml (postData) { +async function MakeMbHtml (postData, makeMoreWrap) { postData = (typeof(postData) === 'string' ? JSON.parse(postData) : postData); - let html = (MbState.siteUrl ? MakeMoreWrapperHtml(MbState.lastPostOffset, 'before') : ''); + let html = ''; const siteLink = (MbState.siteData.url || MbState.siteData.URL || MbState.siteLink); const siteHref = (siteLink ? `href="${siteLink}"` : ''); for (postData of (postData.posts ? postData.posts : SureArray(postData))) { @@ -280,7 +321,7 @@ async function MakeMbHtml (postData) { const iconUrl = (Object.values(authorData?.avatar_urls || {}).slice(-1)[0] || authorData?.avatar_URL || MbState.siteData.iconUrl); html += `
-
+
@@ -329,6 +370,18 @@ async function MakeMbHtml (postData) {
`; } + if (!html) { + // no more messages? + return; + } + if (makeMoreWrap && MbState.siteUrl) { + const wrapHtml = MakeMoreWrapperHtml(makeMoreWrap); + switch (makeMoreWrap) { + case 'after': html = `${html}${wrapHtml}`; break; + case 'before': html = `${wrapHtml}${html}`; break; + } + } + MbState.lastMoreWrap = makeMoreWrap; return html; } @@ -337,10 +390,11 @@ function ReformatPostHtml (html) { // bypass Altervista's anti-hotlinking protection by hiding our HTTP Referer header // TODO: only do this for altervista sites maybe for (const videoElem of content.find('video').toArray()) { + videoElem.preload = 'none'; const frameElem = document.createElement('iframe'); frameElem.style = 'border: none; width: 100%;'; frameElem.allow = 'fullscreen'; - frameElem.src = `data:text/html;utf8, + frameElem.src = `data:text/html;utf8,