diff --git a/index.ts b/index.ts index 9b6b004..06e4807 100644 --- a/index.ts +++ b/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) + 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) } + 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() })(); diff --git a/package-lock.json b/package-lock.json index 777713f..2d4801c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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",