diff --git a/app/src/main/assets/web_extensions/webcompat_youtube/main.js b/app/src/main/assets/web_extensions/webcompat_youtube/main.js index 812e778943..8256b0b173 100644 --- a/app/src/main/assets/web_extensions/webcompat_youtube/main.js +++ b/app/src/main/assets/web_extensions/webcompat_youtube/main.js @@ -8,7 +8,8 @@ const YT_SELECTORS = { embedPlayer: '.html5-video-player', largePlayButton: '.ytp-large-play-button', thumbnail: '.ytp-cued-thumbnail-overlay-image', - embedTitle: '.ytp-title-text' + embedTitle: '.ytp-title-text', + gridRenderer: "ytd-rich-grid-renderer" }; const ENABLE_LOGS = true; const logDebug = (...args) => ENABLE_LOGS && console.log(LOGTAG, ...args); @@ -122,6 +123,29 @@ class YoutubeExtension { } } + overrideGridRenderer() { + if (this.isWatchingPage()) { + return; + } + // Fix Youtube homepage are wrongly displayed on only one column + // See https://github.com/MozillaReality/FirefoxReality/issues/2595 + const grid = document.getElementsByTagName(YT_SELECTORS.gridRenderer)[0]; + if (grid) { + const itemsPerRow = "--ytd-rich-grid-items-per-row"; + const postsPerRow = "--ytd-rich-grid-posts-per-row"; + const targetCols = window.innerWidth > 1115 ? "4" : (window.innerWidth > 900 ? "3" : "2"); + logDebug(`grid before ${grid.style.getPropertyValue(itemsPerRow)} ${grid.style.getPropertyValue(postsPerRow)}`) + if (grid.style.getPropertyValue(itemsPerRow) === "0") { + grid.style.setProperty(itemsPerRow, targetCols); + logDebug(`${itemsPerRow} updated to ${grid.style.getPropertyValue(itemsPerRow)}`); + } + if (grid.style.getPropertyValue(postsPerRow) === "0") { + grid.style.setProperty(postsPerRow, targetCols); + logDebug(`${postsPerRow} updated to ${grid.style.getPropertyValue(postsPerRow)}`); + } + } + } + // Runs the callback when the video is ready (has loaded the first frame). waitForVideoReady(callback) { this.retry("VideoReady", () => { @@ -208,6 +232,7 @@ youtube.overrideViewport(); window.addEventListener('load', () => { logDebug('page load'); youtube.overrideVideoProjection(); + youtube.overrideGridRenderer(); // Wait until video has loaded the first frame to force quality change. // This prevents the infinite spinner problem. // See https://github.com/MozillaReality/FirefoxReality/issues/1433