mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-09-20 04:53:43 +02:00
improve display while popup loads
This commit is contained in:
parent
96173dd901
commit
3d9221eb8d
8 changed files with 43 additions and 45 deletions
|
@ -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">
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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 != "") {
|
||||
|
|
|
@ -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(",");
|
||||
|
||||
|
|
20
src/popup.ts
20
src/popup.ts
|
@ -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,
|
||||
|
|
25
src/utils.ts
25
src/utils.ts
|
@ -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, "<")
|
||||
.replace(/"/g, """).replace(/\n/g, "<br/>") : "";
|
||||
});
|
||||
|
||||
if(valNewH != text) {
|
||||
return valNewH;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {String[]} Domains in regex form
|
||||
*/
|
||||
|
|
|
@ -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, "<")
|
||||
.replace(/"/g, """).replace(/\n/g, "<br/>") : "";
|
||||
});
|
||||
|
||||
if (valNewH != text) {
|
||||
return valNewH;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue