|
|
@@ -17,7 +17,7 @@
|
|
|
// @license AGPL-3.0-only
|
|
|
// @author Sv443
|
|
|
// @copyright Sv443 (https://github.com/Sv443)
|
|
|
-// @icon http://localhost:8710/assets/images/logo/logo_48.png?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
+// @icon https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/images/logo/logo_48.png?b=3f07aa8
|
|
|
// @match https://music.youtube.com/*
|
|
|
// @match https://www.youtube.com/*
|
|
|
// @run-at document-start
|
|
|
@@ -35,40 +35,40 @@
|
|
|
// @grant GM.openInTab
|
|
|
// @grant unsafeWindow
|
|
|
// @noframes
|
|
|
-// @resource css-anchor_improvements http://localhost:8710/assets/style/anchorImprovements.css?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource css-fix_spacing http://localhost:8710/assets/style/fixSpacing.css?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource doc-changelog http://localhost:8710/changelog.md?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-advanced_mode http://localhost:8710/assets/icons/plus_circle_small.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-arrow_down http://localhost:8710/assets/icons/arrow_down.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-delete http://localhost:8710/assets/icons/delete.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-error http://localhost:8710/assets/icons/error.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-experimental http://localhost:8710/assets/icons/beaker_small.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-globe http://localhost:8710/assets/icons/globe.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-help http://localhost:8710/assets/icons/help.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-image http://localhost:8710/assets/icons/image.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-image_off http://localhost:8710/assets/icons/image_off.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-lock http://localhost:8710/assets/icons/lock.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-lock_off http://localhost:8710/assets/icons/lock_off.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-link http://localhost:8710/assets/icons/link.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-link_off http://localhost:8710/assets/icons/link_off.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-lyrics http://localhost:8710/assets/icons/lyrics.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-skip_to http://localhost:8710/assets/icons/skip_to.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource icon-spinner http://localhost:8710/assets/icons/spinner.svg?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource img-logo http://localhost:8710/assets/images/logo/logo_48.png?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource img-close http://localhost:8710/assets/images/close.png?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource img-discord http://localhost:8710/assets/images/external/discord.png?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource img-github http://localhost:8710/assets/images/external/github.png?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource img-greasyfork http://localhost:8710/assets/images/external/greasyfork.png?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource img-openuserjs http://localhost:8710/assets/images/external/openuserjs.png?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource trans-de_DE http://localhost:8710/assets/translations/de_DE.json?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource trans-en_US http://localhost:8710/assets/translations/en_US.json?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource trans-en_UK http://localhost:8710/assets/translations/en_UK.json?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource trans-es_ES http://localhost:8710/assets/translations/es_ES.json?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource trans-fr_FR http://localhost:8710/assets/translations/fr_FR.json?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource trans-hi_IN http://localhost:8710/assets/translations/hi_IN.json?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource trans-ja_JA http://localhost:8710/assets/translations/ja_JA.json?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource trans-pt_BR http://localhost:8710/assets/translations/pt_BR.json?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
-// @resource trans-zh_CN http://localhost:8710/assets/translations/zh_CN.json?b=a19b6c80-4220-4071-8142-a6f05ebbc8b9
|
|
|
+// @resource css-anchor_improvements https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/style/anchorImprovements.css?b=3f07aa8
|
|
|
+// @resource css-fix_spacing https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/style/fixSpacing.css?b=3f07aa8
|
|
|
+// @resource doc-changelog https://raw.githubusercontent.com/Sv443/BetterYTM/develop/changelog.md?b=3f07aa8
|
|
|
+// @resource icon-advanced_mode https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/plus_circle_small.svg?b=3f07aa8
|
|
|
+// @resource icon-arrow_down https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/arrow_down.svg?b=3f07aa8
|
|
|
+// @resource icon-delete https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/delete.svg?b=3f07aa8
|
|
|
+// @resource icon-error https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/error.svg?b=3f07aa8
|
|
|
+// @resource icon-experimental https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/beaker_small.svg?b=3f07aa8
|
|
|
+// @resource icon-globe https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/globe.svg?b=3f07aa8
|
|
|
+// @resource icon-help https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/help.svg?b=3f07aa8
|
|
|
+// @resource icon-image https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/image.svg?b=3f07aa8
|
|
|
+// @resource icon-image_off https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/image_off.svg?b=3f07aa8
|
|
|
+// @resource icon-lock https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/lock.svg?b=3f07aa8
|
|
|
+// @resource icon-lock_off https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/lock_off.svg?b=3f07aa8
|
|
|
+// @resource icon-link https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/link.svg?b=3f07aa8
|
|
|
+// @resource icon-link_off https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/link_off.svg?b=3f07aa8
|
|
|
+// @resource icon-lyrics https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/lyrics.svg?b=3f07aa8
|
|
|
+// @resource icon-skip_to https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/skip_to.svg?b=3f07aa8
|
|
|
+// @resource icon-spinner https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/icons/spinner.svg?b=3f07aa8
|
|
|
+// @resource img-logo https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/images/logo/logo_48.png?b=3f07aa8
|
|
|
+// @resource img-close https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/images/close.png?b=3f07aa8
|
|
|
+// @resource img-discord https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/images/external/discord.png?b=3f07aa8
|
|
|
+// @resource img-github https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/images/external/github.png?b=3f07aa8
|
|
|
+// @resource img-greasyfork https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/images/external/greasyfork.png?b=3f07aa8
|
|
|
+// @resource img-openuserjs https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/images/external/openuserjs.png?b=3f07aa8
|
|
|
+// @resource trans-de_DE https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/translations/de_DE.json?b=3f07aa8
|
|
|
+// @resource trans-en_US https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/translations/en_US.json?b=3f07aa8
|
|
|
+// @resource trans-en_UK https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/translations/en_UK.json?b=3f07aa8
|
|
|
+// @resource trans-es_ES https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/translations/es_ES.json?b=3f07aa8
|
|
|
+// @resource trans-fr_FR https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/translations/fr_FR.json?b=3f07aa8
|
|
|
+// @resource trans-hi_IN https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/translations/hi_IN.json?b=3f07aa8
|
|
|
+// @resource trans-ja_JA https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/translations/ja_JA.json?b=3f07aa8
|
|
|
+// @resource trans-pt_BR https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/translations/pt_BR.json?b=3f07aa8
|
|
|
+// @resource trans-zh_CN https://raw.githubusercontent.com/Sv443/BetterYTM/develop/assets/translations/zh_CN.json?b=3f07aa8
|
|
|
// @require https://cdn.jsdelivr.net/npm/@sv443-network/[email protected]/dist/index.global.js
|
|
|
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/fuse.basic.js
|
|
|
// @require https://cdn.jsdelivr.net/npm/[email protected]/lib/marked.umd.js
|
|
|
@@ -301,7 +301,7 @@ var PluginIntent;
|
|
|
})(PluginIntent || (PluginIntent = {}));const modeRaw = "development";
|
|
|
const branchRaw = "develop";
|
|
|
const hostRaw = "github";
|
|
|
-const buildNumberRaw = "ad6724a";
|
|
|
+const buildNumberRaw = "3f07aa8";
|
|
|
/** The mode in which the script was built (production or development) */
|
|
|
const mode = (modeRaw.match(/^#{{.+}}$/) ? "production" : modeRaw);
|
|
|
/** The branch to use in various URLs that point to the GitHub repo */
|
|
|
@@ -3245,15 +3245,14 @@ function addScrollToActiveBtn() {
|
|
|
//#MARKER thumbnail overlay
|
|
|
/** To be changed when the toggle button is pressed - used to invert the state of "showOverlay" */
|
|
|
let invertOverlay = false;
|
|
|
-// TODO:
|
|
|
-// - use onSelectorOld to add the overlay if the /watch page isn't open on script init
|
|
|
function initThumbnailOverlay() {
|
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|
|
const behavior = getFeatures().thumbnailOverlayBehavior;
|
|
|
const toggleBtnShown = getFeatures().thumbnailOverlayToggleBtnShown;
|
|
|
if (behavior === "never" && !toggleBtnShown)
|
|
|
return;
|
|
|
- const playerEl = document.querySelector("ytmusic-player#player");
|
|
|
+ const playerSelector = "ytmusic-player#player";
|
|
|
+ const playerEl = document.querySelector(playerSelector);
|
|
|
if (!playerEl)
|
|
|
return warn("Couldn't find video player element while adding thumbnail overlay");
|
|
|
/** Checks and updates the overlay and toggle button states based on the current song type (yt video or ytm song) */
|
|
|
@@ -3281,59 +3280,79 @@ function initThumbnailOverlay() {
|
|
|
toggleBtnElem.ariaLabel = toggleBtnElem.title = t(`thumbnail_overlay_toggle_btn_tooltip${showOverlay ? "_hide" : "_show"}`);
|
|
|
}
|
|
|
});
|
|
|
- const watchId = getWatchId();
|
|
|
- if (!watchId)
|
|
|
- return warn("Couldn't get watch ID while adding thumbnail overlay");
|
|
|
- // overlay
|
|
|
- const overlayElem = document.createElement("div");
|
|
|
- overlayElem.id = "bytm-thumbnail-overlay";
|
|
|
- overlayElem.classList.add("bytm-no-select");
|
|
|
- overlayElem.style.display = "none";
|
|
|
- const thumbImgElem = document.createElement("img");
|
|
|
- thumbImgElem.id = "bytm-thumbnail-overlay-img";
|
|
|
- thumbImgElem.role = "presentation";
|
|
|
- thumbImgElem.ariaHidden = "true";
|
|
|
- overlayElem.appendChild(thumbImgElem);
|
|
|
- playerEl.appendChild(overlayElem);
|
|
|
- siteEvents.on("watchIdChanged", () => __awaiter(this, void 0, void 0, function* () {
|
|
|
- const watchId = getWatchId();
|
|
|
- if (!watchId)
|
|
|
- return warn("Couldn't get watch ID while updating thumbnail overlay");
|
|
|
- const thumbUrl = yield getBestThumbnailUrl(watchId);
|
|
|
- if (thumbUrl) {
|
|
|
- const toggleBtnElem = document.querySelector("#bytm-thumbnail-overlay-toggle");
|
|
|
- if (toggleBtnElem)
|
|
|
- toggleBtnElem.href = thumbUrl;
|
|
|
- thumbImgElem.src = thumbUrl;
|
|
|
- }
|
|
|
- invertOverlay = false;
|
|
|
- updateOverlayVisibility();
|
|
|
- }));
|
|
|
- // toggle button
|
|
|
- if (toggleBtnShown) {
|
|
|
- const toggleBtnElem = document.createElement("a");
|
|
|
- toggleBtnElem.id = "bytm-thumbnail-overlay-toggle";
|
|
|
- toggleBtnElem.role = "button";
|
|
|
- toggleBtnElem.tabIndex = 0;
|
|
|
- toggleBtnElem.classList.add("ytmusic-player-bar", "bytm-generic-btn", "bytm-no-select");
|
|
|
- onInteraction(toggleBtnElem, (e) => __awaiter(this, void 0, void 0, function* () {
|
|
|
- if (e.shiftKey || (e instanceof MouseEvent && e.button === 3)) {
|
|
|
- const thumbUrl = yield getBestThumbnailUrl(watchId);
|
|
|
- if (thumbUrl)
|
|
|
- return GM.openInTab(thumbUrl);
|
|
|
+ const createElements = () => {
|
|
|
+ // overlay
|
|
|
+ const overlayElem = document.createElement("div");
|
|
|
+ overlayElem.id = "bytm-thumbnail-overlay";
|
|
|
+ overlayElem.classList.add("bytm-no-select");
|
|
|
+ overlayElem.style.display = "none";
|
|
|
+ const thumbImgElem = document.createElement("img");
|
|
|
+ thumbImgElem.id = "bytm-thumbnail-overlay-img";
|
|
|
+ thumbImgElem.role = "presentation";
|
|
|
+ thumbImgElem.ariaHidden = "true";
|
|
|
+ overlayElem.appendChild(thumbImgElem);
|
|
|
+ playerEl.appendChild(overlayElem);
|
|
|
+ siteEvents.on("watchIdChanged", () => __awaiter(this, void 0, void 0, function* () {
|
|
|
+ const watchId = getWatchId();
|
|
|
+ if (!watchId)
|
|
|
+ return error("Couldn't get watch ID while updating thumbnail overlay");
|
|
|
+ const thumbUrl = yield getBestThumbnailUrl(watchId);
|
|
|
+ if (thumbUrl) {
|
|
|
+ const toggleBtnElem = document.querySelector("#bytm-thumbnail-overlay-toggle");
|
|
|
+ if (toggleBtnElem)
|
|
|
+ toggleBtnElem.href = thumbUrl;
|
|
|
+ thumbImgElem.src = thumbUrl;
|
|
|
}
|
|
|
- invertOverlay = !invertOverlay;
|
|
|
+ invertOverlay = false;
|
|
|
updateOverlayVisibility();
|
|
|
}));
|
|
|
- const imgElem = document.createElement("img");
|
|
|
- imgElem.classList.add("bytm-generic-btn-img");
|
|
|
- toggleBtnElem.appendChild(imgElem);
|
|
|
- onSelectorOld(".middle-controls-buttons ytmusic-like-button-renderer#like-button-renderer", {
|
|
|
- listener: (likeContainer) => UserUtils.insertAfter(likeContainer, toggleBtnElem),
|
|
|
- });
|
|
|
- }
|
|
|
- updateOverlayVisibility();
|
|
|
- log("Added thumbnail overlay");
|
|
|
+ // toggle button
|
|
|
+ if (toggleBtnShown) {
|
|
|
+ const toggleBtnElem = document.createElement("a");
|
|
|
+ toggleBtnElem.id = "bytm-thumbnail-overlay-toggle";
|
|
|
+ toggleBtnElem.role = "button";
|
|
|
+ toggleBtnElem.tabIndex = 0;
|
|
|
+ toggleBtnElem.classList.add("ytmusic-player-bar", "bytm-generic-btn", "bytm-no-select");
|
|
|
+ onInteraction(toggleBtnElem, (e) => __awaiter(this, void 0, void 0, function* () {
|
|
|
+ if (e.shiftKey || (e instanceof MouseEvent && e.button === 3)) {
|
|
|
+ const watchId = getWatchId();
|
|
|
+ if (!watchId)
|
|
|
+ return error("Couldn't get watch ID while opening thumbnail in new tab");
|
|
|
+ const thumbUrl = yield getBestThumbnailUrl(watchId);
|
|
|
+ if (thumbUrl)
|
|
|
+ return GM.openInTab(thumbUrl);
|
|
|
+ }
|
|
|
+ invertOverlay = !invertOverlay;
|
|
|
+ updateOverlayVisibility();
|
|
|
+ }));
|
|
|
+ const imgElem = document.createElement("img");
|
|
|
+ imgElem.classList.add("bytm-generic-btn-img");
|
|
|
+ toggleBtnElem.appendChild(imgElem);
|
|
|
+ onSelectorOld(".middle-controls-buttons ytmusic-like-button-renderer#like-button-renderer", {
|
|
|
+ listener: (likeContainer) => UserUtils.insertAfter(likeContainer, toggleBtnElem),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ updateOverlayVisibility();
|
|
|
+ log("Added thumbnail overlay");
|
|
|
+ };
|
|
|
+ globservers.body.addListener(playerSelector, {
|
|
|
+ listener(playerEl) {
|
|
|
+ if (playerEl.getAttribute("player-ui-state") === "INACTIVE") {
|
|
|
+ const obs = new MutationObserver(() => {
|
|
|
+ if (playerEl.getAttribute("player-ui-state") === "INACTIVE")
|
|
|
+ return;
|
|
|
+ createElements();
|
|
|
+ obs.disconnect();
|
|
|
+ });
|
|
|
+ obs.observe(playerEl, {
|
|
|
+ attributes: true,
|
|
|
+ attributeFilter: ["player-ui-state"],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else
|
|
|
+ createElements();
|
|
|
+ },
|
|
|
+ });
|
|
|
});
|
|
|
}//#MARKER beforeunload popup
|
|
|
let beforeUnloadEnabled = true;
|
Sv443