mirror of
https://github.com/Neur0toxine/yt-normal-thumbnails.git
synced 2024-11-24 22:06:04 +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==
|
// ==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
24
package-lock.json
generated
@ -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",
|
||||||
|
Loading…
Reference in New Issue
Block a user