improve display while popup loads

This commit is contained in:
Ajay 2022-06-02 21:08:34 -04:00
parent 96173dd901
commit 3d9221eb8d
8 changed files with 43 additions and 45 deletions

View file

@ -8,7 +8,7 @@
<link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
</head>
<body id="sponsorBlockPopupBody">
<body id="sponsorBlockPopupBody" style="visibility: hidden">
<div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
<button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton">

View file

@ -1694,7 +1694,7 @@ function openInfoMenu() {
const frame = document.createElement("iframe");
frame.width = "374";
frame.height = "500";
frame.onload = () => frame.contentWindow.postMessage("", "*");
frame.addEventListener("load", () => frame.contentWindow.postMessage("", "*"));
frame.src = chrome.extension.getURL("popup.html");
popup.appendChild(frame);

View file

@ -1,15 +1,15 @@
import Config from "./config";
import { showDonationLink } from "./utils/configUtils";
import Utils from "./utils";
const utils = new Utils();
import { localizeHtmlPage } from "./utils/pageUtils";
import { GenericUtils } from "./utils/genericUtils";
window.addEventListener('DOMContentLoaded', init);
async function init() {
utils.localizeHtmlPage();
localizeHtmlPage();
await utils.wait(() => Config.config !== null);
await GenericUtils.wait(() => Config.config !== null);
if (!Config.config.darkMode) {
document.documentElement.setAttribute("data-theme", "light");

View file

@ -12,13 +12,14 @@ import Utils from "./utils";
import CategoryChooser from "./render/CategoryChooser";
import KeybindComponent from "./components/KeybindComponent";
import { showDonationLink } from "./utils/configUtils";
import { localizeHtmlPage } from "./utils/pageUtils";
const utils = new Utils();
let embed = false;
window.addEventListener('DOMContentLoaded', init);
async function init() {
utils.localizeHtmlPage();
localizeHtmlPage();
// selected tab
if (location.hash != "") {

View file

@ -1,5 +1,6 @@
import Config from "./config";
import Utils from "./utils";
import { localizeHtmlPage } from "./utils/pageUtils";
const utils = new Utils();
// This is needed, if Config is not imported before Utils, things break.
@ -9,7 +10,7 @@ Config.config;
window.addEventListener('DOMContentLoaded', init);
async function init() {
utils.localizeHtmlPage();
localizeHtmlPage();
const domains = document.location.hash.replace("#", "").split(",");

View file

@ -6,6 +6,7 @@ import { Message, MessageResponse, IsInfoFoundMessageResponse } from "./messageT
import { showDonationLink } from "./utils/configUtils";
import { AnimationUtils } from "./utils/animationUtils";
import { GenericUtils } from "./utils/genericUtils";
import { localizeHtmlPage } from "./utils/pageUtils";
const utils = new Utils();
interface MessageListener {
@ -43,25 +44,20 @@ class MessageHandler {
}
}
let allowPopup = (window === window.top);
// To prevent clickjacking
window.onmessage = async e => {
if (e.source !== window.parent) return
let allowPopup = window === window.top;
window.addEventListener("message", async (e) => {
if (e.source !== window.parent) return;
if (e.origin.endsWith('.youtube.com')) return allowPopup = true;
await utils.wait(() => Config.config !== null);
if (Config.config.supportInvidious && e.origin.includes(Config.config.invidiousInstances)) return allowPopup = true;
}
});
//make this a function to allow this to run on the content page
async function runThePopup(messageListener?: MessageListener): Promise<void> {
if (window !== window.top) await utils.wait(() => allowPopup === true);
const messageHandler = new MessageHandler(messageListener);
localizeHtmlPage();
utils.localizeHtmlPage();
await utils.wait(() => Config.config !== null);
await utils.wait(() => Config.config !== null && allowPopup === true, 5000, 5);
document.querySelector("body").style.removeProperty("visibility");
type InputPageElements = {
whitelistToggle?: HTMLInputElement,

View file

@ -256,31 +256,6 @@ export default class Utils {
}
}
localizeHtmlPage(): void {
//Localize by replacing __MSG_***__ meta tags
const localizedMessage = this.getLocalizedMessage(document.title);
if (localizedMessage) document.title = localizedMessage;
const objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
for (let j = 0; j < objects.length; j++) {
const obj = objects[j];
const localizedMessage = this.getLocalizedMessage(obj.innerHTML.toString());
if (localizedMessage) obj.innerHTML = localizedMessage;
}
}
getLocalizedMessage(text: string): string | false {
const valNewH = text.replace(/__MSG_(\w+)__/g, function(match, v1) {
return v1 ? chrome.i18n.getMessage(v1).replace(/</g, "&#60;")
.replace(/"/g, "&quot;").replace(/\n/g, "<br/>") : "";
});
if(valNewH != text) {
return valNewH;
} else {
return false;
}
}
/**
* @returns {String[]} Domains in regex form
*/

View file

@ -61,4 +61,29 @@ export function getHashParams(): Record<string, unknown> {
}
return {};
}
export function localizeHtmlPage(): void {
//Localize by replacing __MSG_***__ meta tags
const localizedMessage = getLocalizedMessage(document.title);
if (localizedMessage) document.title = localizedMessage;
const objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
for (let j = 0; j < objects.length; j++) {
const obj = objects[j];
const localizedMessage = getLocalizedMessage(obj.innerHTML.toString());
if (localizedMessage) obj.innerHTML = localizedMessage;
}
}
export function getLocalizedMessage(text: string): string | false {
const valNewH = text.replace(/__MSG_(\w+)__/g, function(match, v1) {
return v1 ? chrome.i18n.getMessage(v1).replace(/</g, "&#60;")
.replace(/"/g, "&quot;").replace(/\n/g, "<br/>") : "";
});
if (valNewH != text) {
return valNewH;
} else {
return false;
}
}