mirror of
https://github.com/Neur0toxine/yt-normal-thumbnails.git
synced 2024-11-21 20:36:07 +03:00
fix for the lates update & add license
This commit is contained in:
parent
ccd8d5a194
commit
29480f0a16
103
index.ts
103
index.ts
@ -1,18 +1,18 @@
|
||||
// ==UserScript==
|
||||
// @name YouTube Normal Thumbnails
|
||||
// @namespace http://greasyfork.org
|
||||
// @version 0.7.0
|
||||
// @version 0.7.1
|
||||
// @description Restores normal thumbnails size
|
||||
// @author NeoCortex
|
||||
// @license MIT
|
||||
// @match *://www.youtube.com/*
|
||||
// @match *://youtube.com/*
|
||||
// @run-at document-end
|
||||
// @run-at document-start
|
||||
// @grant none
|
||||
// ==/UserScript==
|
||||
|
||||
(function () {
|
||||
const perRowProperty = '--ytd-rich-grid-items-per-row';
|
||||
const styleContent = `
|
||||
const styles = `
|
||||
ytd-rich-grid-video-renderer[mini-mode] #video-title.ytd-rich-grid-video-renderer {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
@ -22,102 +22,37 @@
|
||||
#avatar-link.ytd-rich-grid-video-renderer {
|
||||
display: none !important;
|
||||
}
|
||||
`.trim();
|
||||
const commonStyles = `
|
||||
|
||||
ytd-video-renderer[use-prominent-thumbs] ytd-thumbnail.ytd-video-renderer {
|
||||
min-width: 120px !important;
|
||||
max-width: 240px !important;
|
||||
}
|
||||
`.trim();
|
||||
`.trim()
|
||||
|
||||
class YoutubeThumbnailsFixer {
|
||||
private oldPerRow?: number;
|
||||
private observer?: MutationObserver;
|
||||
private target?: HTMLElement;
|
||||
private videoObserverConfig = {
|
||||
attributes: true,
|
||||
childList: false,
|
||||
subtree: false
|
||||
};
|
||||
|
||||
constructor() {
|
||||
this.installContentObserver();
|
||||
this.installStyle(commonStyles);
|
||||
this.replaceMathMin()
|
||||
document.addEventListener("DOMContentLoaded", () => this.installStyle(styles))
|
||||
}
|
||||
|
||||
private installContentObserver(): void {
|
||||
this.observer = new MutationObserver((mutationsList, observer) => {
|
||||
this.target = document.querySelector('ytd-rich-grid-renderer') as HTMLElement;
|
||||
|
||||
if (null !== this.target) {
|
||||
this.observer?.disconnect();
|
||||
this.installStyle(styleContent);
|
||||
this.updateRowsCount();
|
||||
this.installVideoGridObserver();
|
||||
private replaceMathMin(): void {
|
||||
const origMathMin = Math.min
|
||||
function modifiedMathMin () {
|
||||
if (/calcElementsPerRow/img.test(Error().stack || '')) {
|
||||
return origMathMin.apply(Math, (arguments as unknown) as Array<number>) + 1
|
||||
}
|
||||
});
|
||||
this.observer.observe(document.getElementById('content') as Node, {
|
||||
attributes: false,
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
|
||||
private installVideoGridObserver(): void {
|
||||
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}`)
|
||||
return origMathMin.apply(Math, (arguments as unknown) as Array<number>)
|
||||
}
|
||||
Math.min = modifiedMathMin
|
||||
}
|
||||
|
||||
private installStyle(contents: string): void {
|
||||
let style = document.createElement('style');
|
||||
style.innerHTML = contents;
|
||||
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));
|
||||
let style = document.createElement('style')
|
||||
style.innerHTML = contents
|
||||
document.body.appendChild(style)
|
||||
}
|
||||
}
|
||||
|
||||
new YoutubeThumbnailsFixer();
|
||||
new YoutubeThumbnailsFixer()
|
||||
})();
|
||||
|
24
package-lock.json
generated
24
package-lock.json
generated
@ -1,8 +1,30 @@
|
||||
{
|
||||
"name": "yt-thumbnails-fixer",
|
||||
"version": "0.6.0",
|
||||
"lockfileVersion": 1,
|
||||
"lockfileVersion": 2,
|
||||
"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": {
|
||||
"typescript": {
|
||||
"version": "4.0.5",
|
||||
|
Loading…
Reference in New Issue
Block a user