")[1];
const changelogHtml = yield parseMarkdown(changelogMd);
verNotifDialog = new BytmDialog({
id: "version-notif",
maxWidth: 600,
maxHeight: 800,
closeOnBgClick: false,
closeOnEscPress: true,
destroyOnClose: true,
smallMenu: true,
renderBody: () => renderBody({
latestTag,
changelogHtml,
}),
});
}
return verNotifDialog;
});
}
function renderBody({ latestTag, changelogHtml, }) {
const hostPlatformNames = {
github: "GitHub",
greasyfork: "GreasyFork",
openuserjs: "OpenUserJS",
};
const wrapperEl = document.createElement("div");
const pEl = document.createElement("p");
pEl.textContent = t("new_version_available", scriptInfo.name, scriptInfo.version, latestTag, hostPlatformNames[host]);
wrapperEl.appendChild(pEl);
const changelogDetailsEl = document.createElement("details");
changelogDetailsEl.id = "bytm-version-notif-changelog-details";
changelogDetailsEl.open = false;
const changelogSummaryEl = document.createElement("summary");
changelogSummaryEl.ariaLabel = changelogSummaryEl.title = changelogSummaryEl.textContent = t("expand_release_notes");
changelogDetailsEl.appendChild(changelogSummaryEl);
const changelogEl = document.createElement("p");
changelogEl.id = "bytm-version-notif-changelog-cont";
changelogEl.classList.add("bytm-markdown-container");
changelogEl.innerHTML = changelogHtml;
changelogEl.querySelectorAll("a").forEach((a) => {
a.target = "_blank";
a.rel = "noopener noreferrer";
});
changelogDetailsEl.appendChild(changelogEl);
wrapperEl.appendChild(changelogDetailsEl);
const disableUpdCheckEl = document.createElement("div");
disableUpdCheckEl.id = "bytm-disable-update-check-wrapper";
const checkboxEl = document.createElement("input");
checkboxEl.type = "checkbox";
checkboxEl.id = "bytm-disable-update-check-chkbox";
checkboxEl.tabIndex = 0;
checkboxEl.checked = false;
const labelEl = document.createElement("label");
labelEl.htmlFor = "bytm-disable-update-check-chkbox";
labelEl.textContent = t("disable_update_check");
disableUpdCheckEl.appendChild(checkboxEl);
disableUpdCheckEl.appendChild(labelEl);
wrapperEl.appendChild(disableUpdCheckEl);
verNotifDialog === null || verNotifDialog === void 0 ? void 0 : verNotifDialog.on("close", () => __awaiter(this, void 0, void 0, function* () {
const config = getFeatures();
if (checkboxEl.checked)
config.versionCheck = false;
yield saveFeatures(config);
}));
const btnWrapper = document.createElement("div");
btnWrapper.id = "bytm-version-notif-dialog-btns";
const btnUpdate = document.createElement("button");
btnUpdate.className = "bytm-btn";
btnUpdate.tabIndex = 0;
btnUpdate.textContent = t("open_update_page_install_manually", hostPlatformNames[host]);
const btnUpdateClicked = () => {
window.open(pkg.updates[host]);
verNotifDialog === null || verNotifDialog === void 0 ? void 0 : verNotifDialog.close();
};
btnUpdate.addEventListener("click", btnUpdateClicked);
btnUpdate.addEventListener("keydown", (e) => e.key === "Enter" && btnUpdateClicked());
const btnClose = document.createElement("button");
btnClose.className = "bytm-btn";
btnClose.tabIndex = 0;
btnClose.textContent = t("ignore_for_24h");
checkboxEl.addEventListener("change", () => {
if (checkboxEl.checked)
btnClose.textContent = t("close");
else
btnClose.textContent = t("ignore_for_24h");
});
btnClose.addEventListener("click", () => verNotifDialog === null || verNotifDialog === void 0 ? void 0 : verNotifDialog.close());
btnClose.addEventListener("keydown", (e) => e.key === "Enter" && (verNotifDialog === null || verNotifDialog === void 0 ? void 0 : verNotifDialog.close()));
btnWrapper.appendChild(btnUpdate);
btnWrapper.appendChild(btnClose);
wrapperEl.appendChild(btnWrapper);
return wrapperEl;
}
const releaseURL = "https://github.com/Sv443/BetterYTM/releases/latest";
function checkVersion() {
var _a;
return __awaiter(this, void 0, void 0, function* () {
try {
if (getFeatures().versionCheck === false)
return info("Version check is disabled");
const lastCheck = yield GM.getValue("bytm-version-check", 0);
if (Date.now() - lastCheck < 1000 * 60 * 60 * 24)
return;
yield GM.setValue("bytm-version-check", Date.now());
const res = yield sendRequest({
method: "GET",
url: releaseURL,
});
const latestTag = (_a = res.finalUrl.split("/").pop()) === null || _a === void 0 ? void 0 : _a.replace(/[a-zA-Z]/g, "");
if (!latestTag)
return;
const versionComp = compareVersions(scriptInfo.version, latestTag);
info("Version check - current version:", scriptInfo.version, "- latest version:", latestTag);
if (versionComp < 0) {
const dialog = yield getVersionNotifDialog({ latestTag });
yield dialog.open();
}
}
catch (err) {
error("Version check failed:", err);
}
});
}
/**
* Crudely compares two semver version strings.
* @returns Returns 1 if a > b or -1 if a < b or 0 if a == b
*/
function compareVersions(a, b) {
const pa = a.split(".");
const pb = b.split(".");
for (let i = 0; i < 3; i++) {
const na = Number(pa[i]);
const nb = Number(pb[i]);
if (na > nb)
return 1;
if (nb > na)
return -1;
if (!isNaN(na) && isNaN(nb))
return 1;
if (isNaN(na) && !isNaN(nb))
return -1;
}
return 0;
}
//#MARKER feature dependencies
const localeOptions = Object.entries(locales).reduce((a, [locale, { name }]) => {
return [...a, {
value: locale,
label: name,
}];
}, [])
.sort((a, b) => a.label.localeCompare(b.label));
//#MARKER features
/**
* Contains all possible features with their default values and other configuration.
*
* **Required props:**
* | Property | Description |
* | :-- | :-- |
* | `type` | type of the feature configuration element - use autocomplete or check `FeatureTypeProps` in `src/types.ts` |
* | `category` | category of the feature - use autocomplete or check `FeatureCategory` in `src/types.ts` |
* | `default` | default value of the feature - type of the value depends on the given `type` |
* | `enable(value: any)` | function that will be called when the feature is enabled / initialized for the first time |
*
* **Optional props:**
* | Property | Description |
* | :-- | :-- |
* | `disable(newValue: any)` | for type `toggle` only - function that will be called when the feature is disabled - can be a synchronous or asynchronous function |
* | `change(prevValue: any, newValue: any)` | for types `number`, `select`, `slider` and `hotkey` only - function that will be called when the value is changed |
* | `helpText(): string / () => string` | function that returns an HTML string or the literal string itself that will be the help text for this feature - writing as function is useful for pluralizing or inserting values into the translation at runtime - if not set, translation with key `feature_helptext_featureKey` will be used instead, if available |
* | `textAdornment(): string / Promise
` | function that returns an HTML string that will be appended to the text in the config menu as an adornment element - TODO: to be replaced in the big menu rework |
* | `hidden` | if true, the feature will not be shown in the settings - default is undefined (false) |
* | `min` | Only if type is `number` or `slider` - Overwrites the default of the `min` property of the HTML input element |
* | `max` | Only if type is `number` or `slider` - Overwrites the default of the `max` property of the HTML input element |
* | `step` | Only if type is `number` or `slider` - Overwrites the default of the `step` property of the HTML input element |
* | `unit` | Only if type is `number` or `slider` - The unit text that is displayed next to the input element, i.e. "px" |
*
* **Notes:**
* - If no `disable()` or `change()` function is present, the page needs to be reloaded for the changes to take effect
*/
const featInfo = {
//#SECTION layout
removeUpgradeTab: {
type: "toggle",
category: "layout",
default: true,
enable: () => void "TODO",
},
volumeSliderLabel: {
type: "toggle",
category: "layout",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
volumeSliderSize: {
type: "number",
category: "layout",
min: 50,
max: 500,
step: 5,
default: 150,
unit: "px",
enable: () => void "TODO",
change: () => void "TODO",
},
volumeSliderStep: {
type: "slider",
category: "layout",
min: 1,
max: 25,
default: 2,
unit: "%",
enable: () => void "TODO",
change: () => void "TODO",
},
volumeSliderScrollStep: {
type: "slider",
category: "layout",
min: 1,
max: 25,
default: 10,
unit: "%",
enable: () => void "TODO",
change: () => void "TODO",
},
watermarkEnabled: {
type: "toggle",
category: "layout",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
removeShareTrackingParam: {
type: "toggle",
category: "layout",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
fixSpacing: {
type: "toggle",
category: "layout",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
scrollToActiveSongBtn: {
type: "toggle",
category: "layout",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
//#SECTION song lists
lyricsQueueButton: {
type: "toggle",
category: "songLists",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
deleteFromQueueButton: {
type: "toggle",
category: "songLists",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
listButtonsPlacement: {
type: "select",
category: "songLists",
options: () => [
{ value: "queueOnly", label: t("list_button_placement_queue_only") },
{ value: "everywhere", label: t("list_button_placement_everywhere") },
],
default: "everywhere",
enable: () => void "TODO",
disable: () => void "TODO",
},
//#SECTION behavior
disableBeforeUnloadPopup: {
type: "toggle",
category: "behavior",
default: false,
enable: () => void "TODO",
},
closeToastsTimeout: {
type: "number",
category: "behavior",
min: 0,
max: 30,
step: 0.5,
default: 0,
unit: "s",
enable: () => void "TODO",
change: () => void "TODO",
},
rememberSongTime: {
type: "toggle",
category: "behavior",
default: true,
enable: () => void "TODO",
disable: () => void "TODO", // TODO: feasible?
helpText: () => tp("feature_helptext_rememberSongTime", remSongMinPlayTime, remSongMinPlayTime)
},
rememberSongTimeSites: {
type: "select",
category: "behavior",
options: () => [
{ value: "all", label: t("remember_song_time_sites_all") },
{ value: "yt", label: t("remember_song_time_sites_yt") },
{ value: "ytm", label: t("remember_song_time_sites_ytm") },
],
default: "ytm",
enable: () => void "TODO",
change: () => void "TODO",
},
//#SECTION input
arrowKeySupport: {
type: "toggle",
category: "input",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
arrowKeySkipBy: {
type: "number",
category: "input",
min: 0.5,
max: 60,
step: 0.5,
default: 5,
enable: () => void "TODO",
change: () => void "TODO",
},
switchBetweenSites: {
type: "toggle",
category: "input",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
switchSitesHotkey: {
type: "hotkey",
category: "input",
default: {
code: "F9",
shift: false,
ctrl: false,
alt: false,
},
enable: () => void "TODO",
change: () => void "TODO",
},
anchorImprovements: {
type: "toggle",
category: "input",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
numKeysSkipToTime: {
type: "toggle",
category: "input",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
//#SECTION lyrics
geniusLyrics: {
type: "toggle",
category: "lyrics",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
//#SECTION general
locale: {
type: "select",
category: "general",
options: localeOptions,
default: getPreferredLocale(),
enable: () => void "TODO",
// TODO: to be reworked or removed in the big menu rework
textAdornment: () => __awaiter(void 0, void 0, void 0, function* () { var _a; return (_a = yield resourceToHTMLString("img-globe")) !== null && _a !== void 0 ? _a : ""; }),
},
versionCheck: {
type: "toggle",
category: "general",
default: true,
enable: () => void "TODO",
disable: () => void "TODO",
},
logLevel: {
type: "select",
category: "general",
options: () => [
{ value: 0, label: t("log_level_debug") },
{ value: 1, label: t("log_level_info") },
],
default: 1,
enable: () => void "TODO",
},
};
/** If this number is incremented, the features object data will be migrated to the new format */
const formatVersion = 4;
/** Config data format migration dictionary */
const migrations = {
// 1 -> 2
2: (oldData) => {
const queueBtnsEnabled = Boolean(oldData.queueButtons);
delete oldData.queueButtons;
return Object.assign(Object.assign({}, oldData), { deleteFromQueueButton: queueBtnsEnabled, lyricsQueueButton: queueBtnsEnabled });
},
// 2 -> 3
3: (oldData) => (Object.assign(Object.assign({}, oldData), { removeShareTrackingParam: getFeatureDefault("removeShareTrackingParam"), numKeysSkipToTime: getFeatureDefault("numKeysSkipToTime"), fixSpacing: getFeatureDefault("fixSpacing"), scrollToActiveSongBtn: getFeatureDefault("scrollToActiveSongBtn"), logLevel: getFeatureDefault("logLevel") })),
// 3 -> 4
4: (oldData) => {
var _a, _b, _c, _d;
const oldSwitchSitesHotkey = oldData.switchSitesHotkey;
return Object.assign(Object.assign({}, oldData), { rememberSongTime: getFeatureDefault("rememberSongTime"), rememberSongTimeSites: getFeatureDefault("rememberSongTimeSites"), arrowKeySkipBy: 10, switchSitesHotkey: {
code: (_a = oldSwitchSitesHotkey.key) !== null && _a !== void 0 ? _a : "F9",
shift: Boolean((_b = oldSwitchSitesHotkey.shift) !== null && _b !== void 0 ? _b : false),
ctrl: Boolean((_c = oldSwitchSitesHotkey.ctrl) !== null && _c !== void 0 ? _c : false),
alt: Boolean((_d = oldSwitchSitesHotkey.meta) !== null && _d !== void 0 ? _d : false),
}, listButtonsPlacement: "queueOnly", volumeSliderScrollStep: getFeatureDefault("volumeSliderScrollStep"), locale: getFeatureDefault("locale"), versionCheck: getFeatureDefault("versionCheck") });
},
};
function getFeatureDefault(key) {
return featInfo[key].default;
}
const defaultConfig = Object.keys(featInfo)
.reduce((acc, key) => {
acc[key] = featInfo[key].default;
return acc;
}, {});
const cfgMgr = new UserUtils.ConfigManager({
id: "bytm-config",
formatVersion,
defaultConfig,
migrations,
});
/** Initializes the ConfigManager instance and loads persistent data into memory */
function initConfig() {
return __awaiter(this, void 0, void 0, function* () {
const oldFmtVer = Number(yield GM.getValue(`_uucfgver-${cfgMgr.id}`, NaN));
const data = yield cfgMgr.loadData();
log(`Initialized ConfigManager (format version = ${cfgMgr.formatVersion})`);
if (isNaN(oldFmtVer))
info("Config data initialized with default values");
else if (oldFmtVer !== cfgMgr.formatVersion)
info(`Config data migrated from version ${oldFmtVer} to ${cfgMgr.formatVersion}`);
return data;
});
}
/** Returns the current feature config from the in-memory cache */
function getFeatures() {
return cfgMgr.getData();
}
/** Saves the feature config synchronously to the in-memory cache and asynchronously to the persistent storage */
function saveFeatures(featureConf) {
const res = cfgMgr.setData(featureConf);
emitSiteEvent("configChanged", cfgMgr.getData());
info("Saved new feature config:", featureConf);
return res;
}
/** Saves the default feature config synchronously to the in-memory cache and asynchronously to persistent storage */
function setDefaultFeatures() {
const res = cfgMgr.saveDefaultData();
emitSiteEvent("configChanged", cfgMgr.getData());
info("Reset feature config to its default values");
return res;
}
/** Clears the feature config from the persistent storage - since the cache will be out of whack, this should only be run before a site re-/unload */
function clearConfig() {
return __awaiter(this, void 0, void 0, function* () {
yield cfgMgr.deleteConfig();
info("Deleted config from persistent storage");
});
}
const { getUnsafeWindow } = UserUtils__namespace;
const globalFuncs = {
addSelectorListener,
getResourceUrl,
getSessionId,
getVideoTime,
setLocale,
getLocale,
hasKey,
hasKeyFor,
t,
tp,
getFeatures,
saveFeatures,
fetchLyricsUrl,
getLyricsCacheEntry,
sanitizeArtists,
sanitizeSong,
};
/** Initializes the BYTM interface */
function initInterface() {
const props = Object.assign(Object.assign(Object.assign({ mode,
branch }, scriptInfo), globalFuncs), { UserUtils: UserUtils__namespace });
for (const [key, value] of Object.entries(props))
setGlobalProp(key, value);
log("Initialized BYTM interface");
}
/** Sets a global property on the window.BYTM object */
function setGlobalProp(key, value) {
// use unsafeWindow so the properties are available outside of the userscript's scope
const win = getUnsafeWindow();
if (!win.BYTM)
win.BYTM = {};
win.BYTM[key] = value;
}
/** Emits an event on the BYTM interface */
function emitInterface(type, ...data) {
getUnsafeWindow().dispatchEvent(new CustomEvent(type, { detail: data[0] }));
}
const fetchOpts = {
timeout: 10000,
};
/** Contains all translation keys of all initialized and loaded translations */
const allTrKeys = new Map();
/** Contains the identifiers of all initialized and loaded translation locales */
const initializedLocales = new Set();
/** Initializes the translations */
function initTranslations(locale) {
var _a;
return __awaiter(this, void 0, void 0, function* () {
if (initializedLocales.has(locale))
return;
initializedLocales.add(locale);
try {
const transUrl = yield getResourceUrl(`trans-${locale}`);
const transFile = yield (yield UserUtils.fetchAdvanced(transUrl, fetchOpts)).json();
// merge with base translations if specified
const baseTransUrl = transFile.base ? yield getResourceUrl(`trans-${transFile.base}`) : undefined;
const baseTransFile = baseTransUrl ? yield (yield UserUtils.fetchAdvanced(baseTransUrl, fetchOpts)).json() : undefined;
const translations = Object.assign(Object.assign({}, ((_a = baseTransFile === null || baseTransFile === void 0 ? void 0 : baseTransFile.translations) !== null && _a !== void 0 ? _a : {})), transFile.translations);
UserUtils.tr.addLanguage(locale, translations);
allTrKeys.set(locale, new Set(Object.keys(translations)));
info(`Loaded translations for locale '${locale}'`);
}
catch (err) {
const errStr = `Couldn't load translations for locale '${locale}'`;
error(errStr, err);
throw new Error(errStr);
}
});
}
/** Sets the current language for translations */
function setLocale(locale) {
UserUtils.tr.setLanguage(locale);
setGlobalProp("locale", locale);
emitInterface("bytm:setLocale", { locale });
}
/** Returns the currently set language */
function getLocale() {
return UserUtils.tr.getLanguage();
}
/** Returns whether the given translation key exists in the current locale */
function hasKey(key) {
return hasKeyFor(getLocale(), key);
}
/** Returns whether the given translation key exists in the given locale */
function hasKeyFor(locale, key) {
var _a, _b;
return (_b = (_a = allTrKeys.get(locale)) === null || _a === void 0 ? void 0 : _a.has(key)) !== null && _b !== void 0 ? _b : false;
}
/** Returns the translated string for the given key, after optionally inserting values */
function t(key, ...values) {
return UserUtils.tr(key, ...values);
}
/**
* Returns the translated string for the given key with an added pluralization identifier based on the passed `num`
* Tries to fall back to the non-pluralized syntax if no translation was found
*/
function tp(key, num, ...values) {
if (typeof num !== "number")
num = num.length;
const plNum = num === 1 ? "1" : "n";
const trans = t(`${key}-${plNum}`, ...values);
if (trans === key)
return t(key, ...values);
return trans;
}
/** ID of the last opened (top-most) dialog */
let lastDialogId = null;
/** Creates and manages a modal dialog element */
class BytmDialog extends NanoEmitter {
constructor(options) {
super();
Object.defineProperty(this, "options", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "id", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "dialogOpen", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "dialogRendered", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "listenersAttached", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
this.options = Object.assign({ closeOnBgClick: true, closeOnEscPress: true, closeBtnEnabled: true, destroyOnClose: false, smallHeader: false }, options);
this.id = options.id;
}
/** Call after DOMContentLoaded to pre-render the dialog and invisibly mount it in the DOM */
mount() {
return __awaiter(this, void 0, void 0, function* () {
if (this.dialogRendered)
return;
this.dialogRendered = true;
const bgElem = document.createElement("div");
bgElem.id = `bytm-${this.id}-dialog-bg`;
bgElem.classList.add("bytm-dialog-bg");
if (this.options.closeOnBgClick)
bgElem.ariaLabel = bgElem.title = t("close_menu_tooltip");
bgElem.style.visibility = "hidden";
bgElem.style.display = "none";
bgElem.inert = true;
bgElem.appendChild(yield this.getDialogContent());
document.body.appendChild(bgElem);
this.attachListeners(bgElem);
UserUtils.addGlobalStyle(`\
#bytm-${this.id}-dialog-bg {
--bytm-dialog-width-max: ${this.options.maxWidth}px;
--bytm-dialog-height-max: ${this.options.maxHeight}px;
}`).id = `bytm-style-dialog-${this.id}`;
this.events.emit("render");
return bgElem;
});
}
/** Clears all dialog contents (unmounts them from the DOM) in preparation for a new rendering call */
unmount() {
var _a;
this.dialogRendered = false;
const clearSelectors = [
`#bytm-${this.id}-dialog-bg`,
`#bytm-style-dialog-${this.id}`,
];
for (const sel of clearSelectors) {
const elem = document.querySelector(sel);
(elem === null || elem === void 0 ? void 0 : elem.hasChildNodes()) && clearInner(elem);
(_a = document.querySelector(sel)) === null || _a === void 0 ? void 0 : _a.remove();
}
this.events.emit("clear");
}
/** Clears and then re-renders the dialog */
rerender() {
return __awaiter(this, void 0, void 0, function* () {
this.unmount();
yield this.mount();
});
}
/**
* Opens the dialog - also mounts it if it hasn't been mounted yet
* Prevents default action and immediate propagation of the passed event
*/
open(e) {
var _a;
return __awaiter(this, void 0, void 0, function* () {
e === null || e === void 0 ? void 0 : e.preventDefault();
e === null || e === void 0 ? void 0 : e.stopImmediatePropagation();
if (this.isOpen())
return;
this.dialogOpen = true;
if (!this.isRendered())
yield this.mount();
document.body.classList.add("bytm-disable-scroll");
(_a = document.querySelector("ytmusic-app")) === null || _a === void 0 ? void 0 : _a.setAttribute("inert", "true");
const dialogBg = document.querySelector(`#bytm-${this.id}-dialog-bg`);
if (!dialogBg)
return warn(`Couldn't find background element for dialog with ID '${this.id}'`);
dialogBg.style.visibility = "visible";
dialogBg.style.display = "block";
dialogBg.inert = false;
lastDialogId = this.id;
this.events.emit("open");
return dialogBg;
});
}
/** Closes the dialog - prevents default action and immediate propagation of the passed event */
close(e) {
var _a;
e === null || e === void 0 ? void 0 : e.preventDefault();
e === null || e === void 0 ? void 0 : e.stopImmediatePropagation();
if (!this.isOpen())
return;
this.dialogOpen = false;
document.body.classList.remove("bytm-disable-scroll");
(_a = document.querySelector("ytmusic-app")) === null || _a === void 0 ? void 0 : _a.removeAttribute("inert");
const dialogBg = document.querySelector(`#bytm-${this.id}-dialog-bg`);
if (!dialogBg)
return warn(`Couldn't find background element for dialog with ID '${this.id}'`);
dialogBg.style.visibility = "hidden";
dialogBg.style.display = "none";
dialogBg.inert = true;
if (BytmDialog.getLastDialogId() === this.id)
lastDialogId = null;
this.events.emit("close");
if (this.options.destroyOnClose)
this.destroy();
}
/** Returns true if the dialog is open */
isOpen() {
return this.dialogOpen;
}
/** Returns true if the dialog has been rendered */
isRendered() {
return this.dialogRendered;
}
/** Clears the dialog and removes all event listeners */
destroy() {
this.events.emit("destroy");
this.unmount();
this.unsubscribeAll();
}
/** Returns the ID of the top-most dialog (the dialog that has been opened last) */
static getLastDialogId() {
return lastDialogId;
}
/** Called once to attach all generic event listeners */
attachListeners(bgElem) {
if (this.listenersAttached)
return;
this.listenersAttached = true;
if (this.options.closeOnBgClick) {
bgElem.addEventListener("click", (e) => {
var _a;
if (this.isOpen() && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.id) === `bytm-${this.id}-dialog-bg`)
this.close(e);
});
}
if (this.options.closeOnEscPress) {
document.body.addEventListener("keydown", (e) => {
if (e.key === "Escape" && this.isOpen() && BytmDialog.getLastDialogId() === this.id)
this.close(e);
});
}
}
getDialogContent() {
var _a, _b, _c, _d;
return __awaiter(this, void 0, void 0, function* () {
const header = (_b = (_a = this.options).renderHeader) === null || _b === void 0 ? void 0 : _b.call(_a);
const footer = (_d = (_c = this.options).renderFooter) === null || _d === void 0 ? void 0 : _d.call(_c);
const dialogWrapperEl = document.createElement("div");
dialogWrapperEl.id = `bytm-${this.id}-dialog`;
dialogWrapperEl.classList.add("bytm-dialog");
dialogWrapperEl.ariaLabel = dialogWrapperEl.title = "";
//#SECTION header
const headerWrapperEl = document.createElement("div");
headerWrapperEl.classList.add("bytm-dialog-header");
this.options.smallMenu && headerWrapperEl.classList.add("small");
if (header) {
const headerTitleWrapperEl = document.createElement("div");
headerTitleWrapperEl.classList.add("bytm-dialog-title-wrapper");
headerTitleWrapperEl.role = "heading";
headerTitleWrapperEl.ariaLevel = "1";
headerTitleWrapperEl.appendChild(header);
headerWrapperEl.appendChild(headerTitleWrapperEl);
}
else
headerWrapperEl.appendChild(document.createElement("div"));
if (this.options.closeBtnEnabled) {
const closeBtnEl = document.createElement("img");
closeBtnEl.classList.add("bytm-dialog-close");
this.options.smallMenu && closeBtnEl.classList.add("small");
closeBtnEl.src = yield getResourceUrl("img-close");
closeBtnEl.role = "button";
closeBtnEl.tabIndex = 0;
closeBtnEl.addEventListener("click", () => this.close());
headerWrapperEl.appendChild(closeBtnEl);
}
dialogWrapperEl.appendChild(headerWrapperEl);
//#SECTION body
const menuBodyElem = document.createElement("div");
menuBodyElem.id = `bytm-${this.id}-dialog-body`;
menuBodyElem.classList.add("bytm-dialog-body");
this.options.smallMenu && menuBodyElem.classList.add("small");
menuBodyElem.appendChild(this.options.renderBody());
dialogWrapperEl.appendChild(menuBodyElem);
//#SECTION footer
if (footer) {
const footerWrapper = document.createElement("div");
footerWrapper.classList.add("bytm-dialog-footer-cont");
dialogWrapperEl.appendChild(footerWrapper);
footerWrapper.appendChild(footer);
}
return dialogWrapperEl;
});
}
}
//#SECTION video time
const videoSelector = getDomain() === "ytm" ? "ytmusic-player video" : "#content ytd-player video";
/**
* Returns the current video time in seconds
* Dispatches mouse movement events in case the video time can't be read from the video or progress bar elements (needs a prior user interaction to work)
* @returns Returns null if the video time is unavailable or no user interaction has happened prior to calling in case of the fallback behavior being used
*/
function getVideoTime() {
return new Promise((res) => {
const domain = getDomain();
try {
if (domain === "ytm") {
const vidElem = document.querySelector(videoSelector);
if (vidElem)
return res(Math.floor(vidElem.currentTime));
onSelectorOld("tp-yt-paper-slider#progress-bar tp-yt-paper-progress#sliderBar", {
listener: (pbEl) => res(!isNaN(Number(pbEl.value)) ? Math.floor(Number(pbEl.value)) : null)
});
}
else if (domain === "yt") {
const vidElem = document.querySelector(videoSelector);
if (vidElem)
return res(Math.floor(vidElem.currentTime));
// YT doesn't update the progress bar when it's hidden (contrary to YTM which never hides it)
ytForceShowVideoTime();
const pbSelector = ".ytp-chrome-bottom div.ytp-progress-bar[role=\"slider\"]";
let videoTime = -1;
const mut = new MutationObserver(() => {
// .observe() is only called when the element exists - no need to check for null
videoTime = Number(document.querySelector(pbSelector).getAttribute("aria-valuenow"));
});
const observe = (progElem) => {
mut.observe(progElem, {
attributes: true,
attributeFilter: ["aria-valuenow"],
});
if (videoTime >= 0 && !isNaN(videoTime)) {
res(Math.floor(videoTime));
mut.disconnect();
}
else
setTimeout(() => {
res(videoTime >= 0 && !isNaN(videoTime) ? Math.floor(videoTime) : null);
mut.disconnect();
}, 500);
};
onSelectorOld(pbSelector, { listener: observe });
}
}
catch (err) {
error("Couldn't get video time due to error:", err);
res(null);
}
});
}
/**
* Sends events that force the video controls to become visible for about 3 seconds.
* This only works once (for some reason), then the page needs to be reloaded!
*/
function ytForceShowVideoTime() {
const player = document.querySelector("#movie_player");
if (!player)
return false;
const defaultProps = {
// needed because otherwise YTM errors out - see https://github.com/Sv443/BetterYTM/issues/18#show_issue
view: UserUtils.getUnsafeWindow(),
bubbles: true,
cancelable: false,
};
player.dispatchEvent(new MouseEvent("mouseenter", defaultProps));
const { x, y, width, height } = player.getBoundingClientRect();
const screenY = Math.round(y + height / 2);
const screenX = x + Math.min(50, Math.round(width / 3));
player.dispatchEvent(new MouseEvent("mousemove", Object.assign(Object.assign({}, defaultProps), { screenY,
screenX, movementX: 5, movementY: 0 })));
return true;
}
/** Removes all child nodes of an element without invoking the slow-ish HTML parser */
function clearInner(element) {
while (element.hasChildNodes())
clearNode(element.firstChild);
}
function clearNode(element) {
while (element.hasChildNodes())
clearNode(element.firstChild);
element.parentNode.removeChild(element);
}
let curLogLevel = LogLevel.Info;
/** Common prefix to be able to tell logged messages apart and filter them in devtools */
const consPrefix = `[${scriptInfo.name}]`;
`[${scriptInfo.name}/#DEBUG]`;
/** Sets the current log level. 0 = Debug, 1 = Info */
function setLogLevel(level) {
if (curLogLevel !== level)
console.log(consPrefix, "Setting log level to", level === 0 ? "Debug" : "Info");
curLogLevel = level;
setGlobalProp("logLevel", level);
}
/** Extracts the log level from the last item from spread arguments - returns 0 if the last item is not a number or too low or high */
function getLogLevel(args) {
const minLogLvl = 0, maxLogLvl = 1;
if (typeof args.at(-1) === "number")
return UserUtils.clamp(args.splice(args.length - 1)[0], minLogLvl, maxLogLvl);
return LogLevel.Debug;
}
/**
* Logs all passed values to the console, as long as the log level is sufficient.
* @param args Last parameter is log level (0 = Debug, 1/undefined = Info) - any number as the last parameter will be stripped out! Convert to string if they shouldn't be.
*/
function log(...args) {
if (curLogLevel <= getLogLevel(args))
console.log(consPrefix, ...args);
}
/**
* Logs all passed values to the console as info, as long as the log level is sufficient.
* @param args Last parameter is log level (0 = Debug, 1/undefined = Info) - any number as the last parameter will be stripped out! Convert to string if they shouldn't be.
*/
function info(...args) {
if (curLogLevel <= getLogLevel(args))
console.info(consPrefix, ...args);
}
/** Logs all passed values to the console as a warning, no matter the log level. */
function warn(...args) {
console.warn(consPrefix, ...args);
}
/** Logs all passed values to the console as an error, no matter the log level. */
function error(...args) {
console.error(consPrefix, ...args);
}
//#SECTION misc
/**
* Returns the current domain as a constant string representation
* @throws Throws if script runs on an unexpected website
*/
function getDomain() {
if (location.hostname.match(/^music\.youtube/))
return "ytm";
else if (location.hostname.match(/youtube\./))
return "yt";
else
throw new Error("BetterYTM is running on an unexpected website. Please don't tamper with the @match directives in the userscript header.");
}
/** Returns a pseudo-random ID unique to each session - returns null if sessionStorage is unavailable */
function getSessionId() {
try {
let sesId = window.sessionStorage.getItem("_bytm-session-id");
if (!sesId)
window.sessionStorage.setItem("_bytm-session-id", sesId = UserUtils.randomId(8, 36));
return sesId;
}
catch (err) {
warn("Couldn't get session ID, sessionStorage / cookies might be disabled:", err);
return null;
}
}
//#SECTION resources
/**
* Returns the URL of a resource by its name, as defined in `assets/resources.json`, from GM resource cache - [see GM.getResourceUrl docs](https://wiki.greasespot.net/GM.getResourceUrl)
* Falls back to a `raw.githubusercontent.com` URL or base64-encoded data URI if the resource is not available in the GM resource cache
*/
function getResourceUrl(name) {
var _a;
return __awaiter(this, void 0, void 0, function* () {
let url = yield GM.getResourceUrl(name);
if (!url || url.length === 0) {
const resource = (_a = GM.info.script.resources) === null || _a === void 0 ? void 0 : _a[name].url;
if (typeof resource === "string") {
const resourceUrl = new URL(resource);
const resourcePath = resourceUrl.pathname;
if (resourcePath)
return `https://raw.githubusercontent.com/${repo}/${branch}${resourcePath}`;
}
warn(`Couldn't get blob URL nor external URL for @resource '${name}', trying to use base64-encoded fallback`);
// @ts-ignore
url = yield GM.getResourceUrl(name, false);
}
return url;
});
}
/**
* Returns the preferred locale of the user, provided it is supported by the userscript.
* Prioritizes `navigator.language`, then `navigator.languages`, then `"en_US"` as a fallback.
*/
function getPreferredLocale() {
var _a;
const navLang = navigator.language.replace(/-/g, "_");
const navLangs = navigator.languages
.filter(lang => lang.match(/^[a-z]{2}(-|_)[A-Z]$/) !== null)
.map(lang => lang.replace(/-/g, "_"));
if (Object.entries(locales).find(([key]) => key === navLang))
return navLang;
for (const loc of navLangs) {
if (Object.entries(locales).find(([key]) => key === loc))
return loc;
}
// if navigator.languages has entries that aren't locale codes in the format xx_XX
if (navigator.languages.some(lang => lang.match(/^[a-z]{2}$/))) {
for (const lang of navLangs) {
const foundLoc = (_a = Object.entries(locales).find(([key]) => key.startsWith(lang))) === null || _a === void 0 ? void 0 : _a[0];
if (foundLoc)
return foundLoc;
}
}
return "en_US";
}
/** Returns the content behind the passed resource identifier to be assigned to an element's innerHTML property */
function resourceToHTMLString(resource) {
return __awaiter(this, void 0, void 0, function* () {
try {
const resourceUrl = yield getResourceUrl(resource);
if (!resourceUrl)
throw new Error(`Couldn't find URL for resource '${resource}'`);
return yield (yield UserUtils.fetchAdvanced(resourceUrl)).text();
}
catch (err) {
error("Couldn't get SVG element from resource:", err);
return null;
}
});
}
/** Parses a markdown string and turns it into an HTML string - doesn't sanitize against XSS! */
function parseMarkdown(md) {
return marked.marked.parse(md, {
async: true,
gfm: true,
});
}
/** Returns the content of the changelog markdown file */
function getChangelogMd() {
return __awaiter(this, void 0, void 0, function* () {
return yield (yield UserUtils.fetchAdvanced(yield getResourceUrl("doc-changelog"))).text();
});
}
const selectorMap = new Map();
/**
* Calls the {@linkcode listener} as soon as the {@linkcode selector} exists in the DOM.
* Listeners are deleted when they are called once, unless `options.continuous` is set.
* Multiple listeners with the same selector may be registered.
* @param selector The selector to listen for
* @param options Used for switching to `querySelectorAll()` and for calling the listener continuously
* @template TElem The type of element that the listener will return as its argument (defaults to the generic type HTMLElement)
* @deprecated To be replaced with UserUtils' SelectorObserver class
*/
function onSelectorOld(selector, options) {
let selectorMapItems = [];
if (selectorMap.has(selector))
selectorMapItems = selectorMap.get(selector);
// I don't feel like dealing with intersecting types, this should work just fine at runtime
// @ts-ignore
selectorMapItems.push(options);
selectorMap.set(selector, selectorMapItems);
checkSelectorExists(selector, selectorMapItems);
}
function checkSelectorExists(selector, options) {
const deleteIndices = [];
options.forEach((option, i) => {
try {
const elements = option.all ? document.querySelectorAll(selector) : document.querySelector(selector);
if ((elements !== null && elements instanceof NodeList && elements.length > 0) || elements !== null) {
// I don't feel like dealing with intersecting types, this should work just fine at runtime
// @ts-ignore
option.listener(elements);
if (!option.continuous)
deleteIndices.push(i);
}
}
catch (err) {
console.error(`Couldn't call listener for selector '${selector}'`, err);
}
});
if (deleteIndices.length > 0) {
const newOptsArray = options.filter((_, i) => !deleteIndices.includes(i));
if (newOptsArray.length === 0)
selectorMap.delete(selector);
else {
// once again laziness strikes
// @ts-ignore
selectorMap.set(selector, newOptsArray);
}
}
}
/**
* Initializes a MutationObserver that checks for all registered selectors whenever an element is added to or removed from the ``
* @param options For fine-tuning what triggers the MutationObserver's checking function - `subtree` and `childList` are set to true by default
*/
function initOnSelector(options = {}) {
const observer = new MutationObserver(() => {
for (const [selector, options] of selectorMap.entries())
checkSelectorExists(selector, options);
});
observer.observe(document.body, Object.assign({ subtree: true, childList: true }, options));
}
/**
* Constructs a URL from a base URL and a record of query parameters.
* If a value is null, the parameter will be valueless.
* All values will be stringified using their `toString()` method and then URI-encoded.
* @returns Returns a string instead of a URL object
*/
function constructUrlString(baseUrl, params) {
return `${baseUrl}?${Object.entries(params).map(([key, val]) => `${key}${val === null ? "" : `=${encodeURIComponent(String(val))}`}`).join("&")}`;
}
/**
* Sends a request with the specified parameters and returns the response as a Promise.
* Ignores the CORS policy, contrary to fetch and fetchAdvanced.
*/
function sendRequest(details) {
return new Promise((resolve, reject) => {
GM.xmlHttpRequest(Object.assign(Object.assign({}, details), { onload: resolve, onerror: reject, ontimeout: reject, onabort: reject }));
});
}
//#MARKER menu
let isWelcomeMenuOpen = false;
/** Adds the welcome menu to the DOM */
function addWelcomeMenu() {
return __awaiter(this, void 0, void 0, function* () {
//#SECTION backdrop & menu container
const backgroundElem = document.createElement("div");
backgroundElem.id = "bytm-welcome-menu-bg";
backgroundElem.classList.add("bytm-menu-bg");
backgroundElem.style.visibility = "hidden";
backgroundElem.style.display = "none";
const menuContainer = document.createElement("div");
menuContainer.ariaLabel = menuContainer.title = ""; // prevent bg title from propagating downwards
menuContainer.classList.add("bytm-menu");
menuContainer.id = "bytm-welcome-menu";
//#SECTION title bar
const headerElem = document.createElement("div");
headerElem.classList.add("bytm-menu-header");
const titleWrapperElem = document.createElement("div");
titleWrapperElem.id = "bytm-welcome-menu-title-wrapper";
const titleLogoElem = document.createElement("img");
titleLogoElem.id = "bytm-welcome-menu-title-logo";
titleLogoElem.classList.add("bytm-no-select");
titleLogoElem.src = yield getResourceUrl("img-logo");
const titleElem = document.createElement("h2");
titleElem.id = "bytm-welcome-menu-title";
titleElem.className = "bytm-menu-title";
titleElem.role = "heading";
titleElem.ariaLevel = "1";
titleWrapperElem.appendChild(titleLogoElem);
titleWrapperElem.appendChild(titleElem);
headerElem.appendChild(titleWrapperElem);
//#SECTION footer
const footerCont = document.createElement("div");
footerCont.id = "bytm-welcome-menu-footer-cont";
footerCont.className = "bytm-menu-footer-cont";
const openCfgElem = document.createElement("button");
openCfgElem.id = "bytm-welcome-menu-open-cfg";
openCfgElem.classList.add("bytm-btn");
openCfgElem.addEventListener("click", () => {
closeWelcomeMenu();
openCfgMenu();
});
const openChangelogElem = document.createElement("button");
openChangelogElem.id = "bytm-welcome-menu-open-changelog";
openChangelogElem.classList.add("bytm-btn");
openChangelogElem.addEventListener("click", () => __awaiter(this, void 0, void 0, function* () {
yield openChangelogMenu("exit");
closeWelcomeMenu();
}));
const closeBtnElem = document.createElement("button");
closeBtnElem.id = "bytm-welcome-menu-footer-close";
closeBtnElem.classList.add("bytm-btn");
closeBtnElem.addEventListener("click", () => __awaiter(this, void 0, void 0, function* () {
closeWelcomeMenu();
}));
const leftButtonsCont = document.createElement("div");
leftButtonsCont.id = "bytm-menu-footer-left-buttons-cont";
leftButtonsCont.appendChild(openCfgElem);
leftButtonsCont.appendChild(openChangelogElem);
footerCont.appendChild(leftButtonsCont);
footerCont.appendChild(closeBtnElem);
//#SECTION content
const contentWrapper = document.createElement("div");
contentWrapper.id = "bytm-welcome-menu-content-wrapper";
// locale switcher
const localeCont = document.createElement("div");
localeCont.id = "bytm-welcome-menu-locale-cont";
const localeImg = document.createElement("img");
localeImg.id = "bytm-welcome-menu-locale-img";
localeImg.classList.add("bytm-no-select");
localeImg.src = yield getResourceUrl("img-globe");
const localeSelectElem = document.createElement("select");
localeSelectElem.id = "bytm-welcome-menu-locale-select";
for (const [locale, { name }] of Object.entries(locales)) {
const localeOptionElem = document.createElement("option");
localeOptionElem.value = locale;
localeOptionElem.textContent = name;
localeSelectElem.appendChild(localeOptionElem);
}
localeSelectElem.value = getFeatures().locale;
localeSelectElem.addEventListener("change", () => __awaiter(this, void 0, void 0, function* () {
const selectedLocale = localeSelectElem.value;
const feats = Object.assign({}, getFeatures());
feats.locale = selectedLocale;
saveFeatures(feats);
yield initTranslations(selectedLocale);
setLocale(selectedLocale);
retranslateWelcomeMenu();
}));
localeCont.appendChild(localeImg);
localeCont.appendChild(localeSelectElem);
contentWrapper.appendChild(localeCont);
// text
const textCont = document.createElement("div");
textCont.id = "bytm-welcome-menu-text-cont";
const textElem = document.createElement("p");
textElem.id = "bytm-welcome-menu-text";
const textElems = [];
const line1Elem = document.createElement("span");
line1Elem.id = "bytm-welcome-text-line1";
textElems.push(line1Elem);
const br1Elem = document.createElement("br");
textElems.push(br1Elem);
const line2Elem = document.createElement("span");
line2Elem.id = "bytm-welcome-text-line2";
textElems.push(line2Elem);
const br2Elem = document.createElement("br");
textElems.push(br2Elem);
const br3Elem = document.createElement("br");
textElems.push(br3Elem);
const line3Elem = document.createElement("span");
line3Elem.id = "bytm-welcome-text-line3";
textElems.push(line3Elem);
const br4Elem = document.createElement("br");
textElems.push(br4Elem);
const line4Elem = document.createElement("span");
line4Elem.id = "bytm-welcome-text-line4";
textElems.push(line4Elem);
const br5Elem = document.createElement("br");
textElems.push(br5Elem);
const br6Elem = document.createElement("br");
textElems.push(br6Elem);
const line5Elem = document.createElement("span");
line5Elem.id = "bytm-welcome-text-line5";
textElems.push(line5Elem);
textElems.forEach((elem) => textElem.appendChild(elem));
textCont.appendChild(textElem);
contentWrapper.appendChild(textCont);
//#SECTION finalize
menuContainer.appendChild(headerElem);
menuContainer.appendChild(contentWrapper);
menuContainer.appendChild(footerCont);
backgroundElem.appendChild(menuContainer);
document.body.appendChild(backgroundElem);
retranslateWelcomeMenu();
});
}
//#MARKER (re-)translate
/** Retranslates all elements inside the welcome menu */
function retranslateWelcomeMenu() {
const getLink = (href) => {
return [``, ""];
};
const changes = {
"#bytm-welcome-menu-title": (e) => e.textContent = t("welcome_menu_title", scriptInfo.name),
"#bytm-welcome-menu-title-close": (e) => e.ariaLabel = e.title = t("close_menu_tooltip"),
"#bytm-welcome-menu-open-cfg": (e) => {
e.textContent = t("config_menu");
e.ariaLabel = e.title = t("open_config_menu_tooltip");
},
"#bytm-welcome-menu-open-changelog": (e) => {
e.textContent = t("open_changelog");
e.ariaLabel = e.title = t("open_changelog_tooltip");
},
"#bytm-welcome-menu-footer-close": (e) => {
e.textContent = t("close");
e.ariaLabel = e.title = t("close_menu_tooltip");
},
"#bytm-welcome-text-line1": (e) => e.innerHTML = t("welcome_text_line_1"),
"#bytm-welcome-text-line2": (e) => e.innerHTML = t("welcome_text_line_2", scriptInfo.name),
"#bytm-welcome-text-line3": (e) => e.innerHTML = t("welcome_text_line_3", scriptInfo.name, ...getLink(`${pkg.hosts.greasyfork}/feedback`), ...getLink(pkg.hosts.openuserjs)),
"#bytm-welcome-text-line4": (e) => e.innerHTML = t("welcome_text_line_4", ...getLink(pkg.funding.url)),
"#bytm-welcome-text-line5": (e) => e.innerHTML = t("welcome_text_line_5", ...getLink(pkg.bugs.url)),
};
for (const [selector, cb] of Object.entries(changes)) {
const elem = document.querySelector(selector);
if (!elem) {
warn(`Couldn't find element ${selector} in welcome menu`);
continue;
}
cb(elem);
}
}
/** Closes the welcome menu if it is open. If a bubbling event is passed, its propagation will be prevented. */
function closeWelcomeMenu(evt) {
var _a;
if (!isWelcomeMenuOpen)
return;
isWelcomeMenuOpen = false;
(evt === null || evt === void 0 ? void 0 : evt.bubbles) && evt.stopPropagation();
document.body.classList.remove("bytm-disable-scroll");
(_a = document.querySelector("ytmusic-app")) === null || _a === void 0 ? void 0 : _a.removeAttribute("inert");
const menuBg = document.querySelector("#bytm-welcome-menu-bg");
siteEvents.emit("welcomeMenuClosed");
if (!menuBg)
return warn("Couldn't find welcome menu background element");
menuBg.style.visibility = "hidden";
menuBg.style.display = "none";
}
//#MARKER open, show & close
/** Opens the welcome menu if it is closed */
function openWelcomeMenu() {
var _a;
if (isWelcomeMenuOpen)
return;
isWelcomeMenuOpen = true;
document.body.classList.add("bytm-disable-scroll");
(_a = document.querySelector("ytmusic-app")) === null || _a === void 0 ? void 0 : _a.setAttribute("inert", "true");
const menuBg = document.querySelector("#bytm-welcome-menu-bg");
if (!menuBg)
return warn("Couldn't find welcome menu background element");
menuBg.style.visibility = "visible";
menuBg.style.display = "block";
}
/** Shows the welcome menu and returns a promise that resolves when the menu is closed */
function showWelcomeMenu() {
return new Promise((resolve) => {
const unsub = siteEvents.on("welcomeMenuClosed", () => {
unsub();
resolve();
});
openWelcomeMenu();
});
}
{
// console watermark with sexy gradient
const styleGradient = "background: rgba(165, 38, 38, 1); background: linear-gradient(90deg, rgb(154, 31, 103) 0%, rgb(135, 31, 31) 40%, rgb(184, 64, 41) 100%);";
const styleCommon = "color: #fff; font-size: 1.5em; padding-left: 6px; padding-right: 6px;";
console.log();
console.log(`%c${scriptInfo.name}%cv${scriptInfo.version}%c\n\nBuild ${scriptInfo.buildNumber} ─ ${scriptInfo.namespace}`, `font-weight: bold; ${styleCommon} ${styleGradient}`, `background-color: #333; ${styleCommon}`, "padding: initial;");
console.log([
"Powered by:",
"─ Lots of ambition and dedication",
`─ My song metadata API: ${geniUrlBase}`,
"─ My userscript utility library: https://github.com/Sv443-Network/UserUtils",
"─ This tiny event listener library: https://github.com/ai/nanoevents",
"─ This markdown parser library: https://github.com/markedjs/marked",
].join("\n"));
console.log();
}
let domLoaded = false;
const domain = getDomain();
/** Stuff that needs to be called ASAP, before anything async happens */
function preInit() {
log("Session ID:", getSessionId());
initInterface();
setLogLevel(defaultLogLevel);
if (domain === "ytm")
initBeforeUnloadHook();
init();
}
function init() {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
try {
registerMenuCommands();
}
catch (e) {
}
try {
document.addEventListener("DOMContentLoaded", () => {
domLoaded = true;
});
const features = yield initConfig();
yield initTranslations((_a = features.locale) !== null && _a !== void 0 ? _a : "en_US");
setLocale((_b = features.locale) !== null && _b !== void 0 ? _b : "en_US");
setLogLevel(features.logLevel);
setLayoutConfig(features);
setBehaviorConfig(features);
setInputConfig(features);
setSongListsConfig(features);
if (features.disableBeforeUnloadPopup && domain === "ytm")
disableBeforeUnload();
if (!domLoaded)
document.addEventListener("DOMContentLoaded", onDomLoad);
else
onDomLoad();
if (features.rememberSongTime)
initRememberSongTime();
}
catch (err) {
error("General Error:", err);
}
// init menu separately from features
try {
void "TODO(v1.2):";
// initMenu();
}
catch (err) {
error("Couldn't initialize menu:", err);
}
});
}
/** Called when the DOM has finished loading and can be queried and altered by the userscript */
function onDomLoad() {
return __awaiter(this, void 0, void 0, function* () {
insertGlobalStyle();
initObservers();
initOnSelector();
const features = getFeatures();
const ftInit = [];
yield checkVersion();
log(`DOM loaded. Initializing features for domain "${domain}"...`);
try {
if (domain === "ytm") {
disableDarkReader();
ftInit.push(initSiteEvents());
if (typeof (yield GM.getValue("bytm-installed")) !== "string") {
// open welcome menu with language selector
yield addWelcomeMenu();
info("Showing welcome menu");
yield showWelcomeMenu();
yield GM.setValue("bytm-installed", JSON.stringify({ timestamp: Date.now(), version: scriptInfo.version }));
}
observers$1.body.addListener("tp-yt-iron-dropdown #contentWrapper ytd-multi-page-menu-renderer #container.menu-container", {
listener: addConfigMenuOption,
});
if (features.arrowKeySupport)
ftInit.push(initArrowKeySkip());
if (features.removeUpgradeTab)
ftInit.push(removeUpgradeTab());
if (features.watermarkEnabled)
ftInit.push(addWatermark());
if (features.geniusLyrics)
ftInit.push(addMediaCtrlLyricsBtn());
if (features.deleteFromQueueButton || features.lyricsQueueButton)
ftInit.push(initQueueButtons());
if (features.anchorImprovements)
ftInit.push(addAnchorImprovements());
if (features.closeToastsTimeout > 0)
ftInit.push(initAutoCloseToasts());
if (features.removeShareTrackingParam)
ftInit.push(removeShareTrackingParam());
if (features.numKeysSkipToTime)
ftInit.push(initNumKeysSkip());
if (features.fixSpacing)
ftInit.push(fixSpacing());
if (features.scrollToActiveSongBtn)
ftInit.push(addScrollToActiveBtn());
ftInit.push(initVolumeFeatures());
}
if (["ytm", "yt"].includes(domain)) {
if (features.switchBetweenSites)
ftInit.push(initSiteSwitch(domain));
}
Promise.allSettled(ftInit).then(() => {
emitInterface("bytm:ready");
});
}
catch (err) {
error("Feature error:", err);
}
});
}
/** Inserts the bundled CSS files imported throughout the script into a