diff --git a/public/popup.css b/public/popup.css index b9656c26..e2494158 100644 --- a/public/popup.css +++ b/public/popup.css @@ -100,6 +100,10 @@ margin-bottom: 16px; } +#sponsorBlockPopupContainer iframe { + width: 100%; +} + /* * Disable popup max height when displayed in-page (content.ts) */ @@ -110,7 +114,7 @@ /* * Disable fixed popup width when displayed in-page (content.ts) */ -#sponsorBlockPopupContainer #sponsorBlockPopupBody { +#sponsorBlockPopupBody.is-embedded { width: auto; } @@ -240,7 +244,7 @@ border-radius: 50%; display: inline-block; } -/* +/* * Category name in segment */ .summaryLabel { @@ -544,7 +548,7 @@ background: var(--sb-grey-bg-color); } -/* +/* * Submissions */ #sponsorTimesContributionsContainer { diff --git a/src/popup.ts b/src/popup.ts index 60c875a1..e357034c 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -86,6 +86,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { const PageElements: PageElements = {}; [ + "sponsorBlockPopupBody", "sponsorblockPopup", "sponsorStart", // Top toggles @@ -153,7 +154,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { getSegmentsFromContentScript(false); await utils.wait(() => Config.config !== null && allowPopup, 5000, 5); - document.querySelector("body").style.removeProperty("visibility"); + PageElements.sponsorBlockPopupBody.style.removeProperty("visibility"); if (!Config.configSyncListeners.includes(contentConfigUpdateListener)) { Config.configSyncListeners.push(contentConfigUpdateListener); } @@ -166,6 +167,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { if (window !== window.top) { PageElements.sbCloseButton.classList.remove("hidden"); + PageElements.sponsorBlockPopupBody.classList.add("is-embedded"); } // Hide donate button if wanted (Safari, or user choice) @@ -212,7 +214,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { if (window !== window.top) { document.addEventListener("keydown", (e) => { const target = e.target as HTMLElement; - if (target.tagName === "INPUT" + if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || e.key === "ArrowUp" || e.key === "ArrowDown") { @@ -283,7 +285,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { } PageElements.sponsorTimesOthersTimeSavedDisplay.innerText = getFormattedHours(minutesSaved); } - + Config.config.isVip = userInfo.vip; Config.config.permissions = userInfo.permissions; @@ -580,7 +582,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { } segmentTimeFromToNode.style.margin = "5px"; - + // for inline-styling purposes const labelContainer = document.createElement("div"); if (actionType !== ActionType.Chapter) labelContainer.appendChild(categoryColorCircle); diff --git a/src/utils/genericUtils.ts b/src/utils/genericUtils.ts index 0f8555d0..8b07e699 100644 --- a/src/utils/genericUtils.ts +++ b/src/utils/genericUtils.ts @@ -72,7 +72,7 @@ function getFormattedTime(seconds: number, precise?: boolean): string { * @returns {string} errorMessage */ function getErrorMessage(statusCode: number, responseText: string): string { - const postFix = ((responseText && !responseText.includes(`cf-wrapper`)) ? "\n\n" + responseText : ""); + const postFix = ((responseText && !(responseText.includes(`cf-wrapper`) || responseText.includes(""))) ? "\n\n" + responseText : ""); // display response body for 4xx if([400, 429, 409, 0].includes(statusCode)) { return chrome.i18n.getMessage(statusCode + "") + " " + chrome.i18n.getMessage("errorCode") + statusCode + postFix;