fix for the lates update & add license

This commit is contained in:
Pavel 2021-11-18 16:16:24 +03:00
parent ccd8d5a194
commit 29480f0a16
2 changed files with 43 additions and 86 deletions

103
index.ts
View File

@ -1,18 +1,18 @@
// ==UserScript== // ==UserScript==
// @name YouTube Normal Thumbnails // @name YouTube Normal Thumbnails
// @namespace http://greasyfork.org // @namespace http://greasyfork.org
// @version 0.7.0 // @version 0.7.1
// @description Restores normal thumbnails size // @description Restores normal thumbnails size
// @author NeoCortex // @author NeoCortex
// @license MIT
// @match *://www.youtube.com/* // @match *://www.youtube.com/*
// @match *://youtube.com/* // @match *://youtube.com/*
// @run-at document-end // @run-at document-start
// @grant none // @grant none
// ==/UserScript== // ==/UserScript==
(function () { (function () {
const perRowProperty = '--ytd-rich-grid-items-per-row'; const styles = `
const styleContent = `
ytd-rich-grid-video-renderer[mini-mode] #video-title.ytd-rich-grid-video-renderer { ytd-rich-grid-video-renderer[mini-mode] #video-title.ytd-rich-grid-video-renderer {
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 500; font-weight: 500;
@ -22,102 +22,37 @@
#avatar-link.ytd-rich-grid-video-renderer { #avatar-link.ytd-rich-grid-video-renderer {
display: none !important; display: none !important;
} }
`.trim();
const commonStyles = `
ytd-video-renderer[use-prominent-thumbs] ytd-thumbnail.ytd-video-renderer { ytd-video-renderer[use-prominent-thumbs] ytd-thumbnail.ytd-video-renderer {
min-width: 120px !important; min-width: 120px !important;
max-width: 240px !important; max-width: 240px !important;
} }
`.trim(); `.trim()
class YoutubeThumbnailsFixer { class YoutubeThumbnailsFixer {
private oldPerRow?: number;
private observer?: MutationObserver;
private target?: HTMLElement;
private videoObserverConfig = {
attributes: true,
childList: false,
subtree: false
};
constructor() { constructor() {
this.installContentObserver(); this.replaceMathMin()
this.installStyle(commonStyles); document.addEventListener("DOMContentLoaded", () => this.installStyle(styles))
} }
private installContentObserver(): void { private replaceMathMin(): void {
this.observer = new MutationObserver((mutationsList, observer) => { const origMathMin = Math.min
this.target = document.querySelector('ytd-rich-grid-renderer') as HTMLElement; function modifiedMathMin () {
if (/calcElementsPerRow/img.test(Error().stack || '')) {
if (null !== this.target) { return origMathMin.apply(Math, (arguments as unknown) as Array<number>) + 1
this.observer?.disconnect();
this.installStyle(styleContent);
this.updateRowsCount();
this.installVideoGridObserver();
} }
});
this.observer.observe(document.getElementById('content') as Node, {
attributes: false,
childList: true,
subtree: true
});
}
private installVideoGridObserver(): void { return origMathMin.apply(Math, (arguments as unknown) as Array<number>)
if (this.isNil(this.target)) {
return;
}
this.observer = new MutationObserver((mutationsList, observer) => {
for (let mutation of mutationsList) {
if (mutation.attributeName == 'style') {
this.observer?.disconnect();
this.updateRowsCount();
this.observer?.observe(this.target as Node, this.videoObserverConfig);
}
}
});
this.observer?.observe(this.target as Node, this.videoObserverConfig);
console.info(`[YouTube Normal Thumbnails] Changed to ${this.currentPerRow} thumbnails per row instead of ${this.oldPerRow}.`);
}
private updateRowsCount(): void {
if (this.isNil(this.target)) {
return;
}
try {
if (this.oldPerRow === undefined || this.oldPerRow == this.currentPerRow || this.oldPerRow === 0) {
this.oldPerRow = this.currentPerRow;
this.currentPerRow += 1;
}
} catch (e) {
console.warn(`[YouTube Normal Thumbnails] Cannot update thumbnails count: ${e}`)
} }
Math.min = modifiedMathMin
} }
private installStyle(contents: string): void { private installStyle(contents: string): void {
let style = document.createElement('style'); let style = document.createElement('style')
style.innerHTML = contents; style.innerHTML = contents
document.body.appendChild(style); document.body.appendChild(style)
}
private isNil(item: any): boolean {
return null === item || undefined === item;
}
get currentPerRow(): number {
if (this.isNil(this.target)) {
return 0;
}
return +(this.target as HTMLElement).style.getPropertyValue(perRowProperty);
}
set currentPerRow(value: number) {
this.target?.style.setProperty(perRowProperty, String(value));
} }
} }
new YoutubeThumbnailsFixer(); new YoutubeThumbnailsFixer()
})(); })();

24
package-lock.json generated
View File

@ -1,8 +1,30 @@
{ {
"name": "yt-thumbnails-fixer", "name": "yt-thumbnails-fixer",
"version": "0.6.0", "version": "0.6.0",
"lockfileVersion": 1, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": {
"": {
"name": "yt-thumbnails-fixer",
"version": "0.6.0",
"license": "ISC",
"dependencies": {
"typescript": "^4.0.5"
}
},
"node_modules/typescript": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz",
"integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=4.2.0"
}
}
},
"dependencies": { "dependencies": {
"typescript": { "typescript": {
"version": "4.0.5", "version": "4.0.5",