3.6.1

.github/ISSUE_TEMPLATE/bug_report.md

@@ -25,12 +25,12 @@ If applicable, add screenshots to help explain your problem.
 
 **Logs**
 # Here is a video to help you send the logs https://www.youtube.com/watch?v=C4fQXRYwbrs&t=66s
-# Then attach the file to the issue.
+# Then attach the zip file to the issue.
 
 **Specification**
  - OS: [e.g. Windows 10]
  - Browser version: [e.g. Firefox 75]
- - Plugin version: [e.g. 1.0.1]
+ - Plugin version: [e.g. 1.0.1]  # Can be checked on this page: https://addons.mozilla.org/fr/firefox/addon/youtube_auto_like/versions/
  - YouTube Premium: [e.g. yes]
- - Youtube Player: [e.g. normal, large Theater, ... ]
+ - Youtube Player: [e.g. normal, large Theater, shorts, gaming, live... ]
  - Youtube Country: [e.g. ES]

app/manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "__MSG_appName__",
-	"version": "3.6.0",
+	"version": "3.6.1",
 	"manifest_version": 2,
 	"description": "__MSG_appDesc__",
 	"icons": {

app/scripts/content.js

@@ -1,12 +1,8 @@
 // We need to know which version of YouTube we're dealing with
 // The material version has no ID on the body, hence this dumb check
-const IS_NOT_MATERIAL = document.body.id !== "";
-const IS_GAMING = window.location.hostname.indexOf('gaming.youtube') > -1; //using hostname to avoid url injection
 //cannot use hostname, using regex to force starting with
 const IS_TV = window.location.pathname === '/tv';
-//allow to do noting on home page
 const IS_CLASSIC = (window.location.hostname === 'www.youtube.com') && !IS_TV;
-const IS_PAPER = document.querySelector("ytd-subscribe-button-renderer[modern]") !== null;
 
 // Create an OptionManager
 let optionManager = new OptionManager(OPTIONS);
@@ -31,34 +27,127 @@ browser.runtime.onMessage.addListener( function(msg, sender, sendResponse) {
 	}
 });
 
+function startLikerProcess(options) {
+	var IS_PAPER = document.querySelector("ytd-subscribe-button-renderer[modern]") !== null;
+	window.IS_PAPER = IS_PAPER;
+	let liker = null;
+	if (IS_PAPER) {
+		log("paper liker init");
+		liker = new PaperLiker(options);
+	} else {
+		log("material liker init");
+		liker = new MaterialLiker(options);
+	}
+	if (IS_CLASSIC) {
+		log("Classic youtube detected");
+		liker.init();
+	} else {
+		log("YAL: Other youtube are not supported");
+	}
+}
+
+function isInViewport(element) {
+  const rect = element.getBoundingClientRect();
+  const height = innerHeight || document.documentElement.clientHeight;
+  const width = innerWidth || document.documentElement.clientWidth;
+  return (
+    // When short (channel) is ignored, the element (like/dislike AND short itself) is
+    // hidden with a 0 DOMRect. In this case, consider it outside of Viewport
+    !(rect.top == 0 && rect.left == 0 && rect.bottom == 0 && rect.right == 0) &&
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= height &&
+    rect.right <= width
+  );
+}
+
+function isVisible(elem) {
+  if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
+
+  if (!isInViewport) return false;
+
+  const style = getComputedStyle(elem);
+  if (style.display === 'none') return false;
+  if (style.visibility !== 'visible') return false;
+  if (style.opacity < 0.1) return false;
+  if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
+    elem.getBoundingClientRect().width === 0) {
+    return false;
+  }
+  const elemCenter   = {
+    x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
+    y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
+  };
+  if (elemCenter.x < 0) return false;
+  if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
+  if (elemCenter.y < 0) return false;
+  if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
+  let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
+  do {
+    if (pointContainer === elem) return true;
+  } while (pointContainer = pointContainer.parentNode);
+  return false;
+}
+
+function getButtons() {
+  //---   If Menu Element Is Displayed:   ---//
+  if (document.getElementById("menu-container")?.offsetParent === null) {
+    return document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div");
+    //---   If Menu Element Isnt Displayed:   ---//
+  } else {
+    return document
+      .getElementById("menu-container")
+      ?.querySelector("#top-level-buttons-computed");
+  }
+}
+
+function getVideoId(url) {
+  const urlObject = new URL(url);
+  const pathname = urlObject.pathname;
+  if (pathname.startsWith("/clip")) {
+    return document.querySelector("meta[itemprop='videoId']").content;
+  } else {
+    if (pathname.startsWith("/shorts")) {
+      return pathname.slice(8);
+    }
+    return urlObject.searchParams.get("v");
+  }
+}
+
+function isVideoLoaded() {
+  const videoId = getVideoId(window.location.href);
+  return (
+    document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null ||
+    // mobile: no video-id attribute
+    document.querySelector('#player[loading="false"]:not([hidden])') !== null
+  );
+}
+
 // Fetch our options then fire things up
 optionManager.get().then((options) => {
 	// set the real log function once options are loaded
 	log = options.debug ? console.log.bind(console) : function () {};
-	log("auto like injected");
-	if (IS_NOT_MATERIAL) {
-		log("old youtube detected");
-		console.error("youtube-auto-like do not support old youtube layout anymore");
-	} else {
-		let liker = null;
-		if (IS_PAPER) {
-			liker = new PaperLiker(options);
-		} else {
-			liker = new MaterialLiker(options);
-		}
-		if (IS_CLASSIC) {
-			log("material youtube detected");
-
-			liker.init();
-			document.addEventListener('yt-page-data-updated', () => liker.init() );
-		} else if (IS_GAMING) {
-			log("gaming youtube detected");
-
-			liker.init();
-			document.querySelector('ytg-app').addEventListener('yt-page-data-updated', () => liker.init() );
-		} else if (IS_TV) {
-			log("tv youtube detected");
+	log(`youtube auto like ${options.plugin_version} injected`);
+	let jsInitChecktimer = null;
+
+	function setEventListeners(evt) {
+		function checkForJS_Finish() {
+			if ( getButtons()?.offsetParent && isVideoLoaded() ) {
+				startLikerProcess(options);
+				// getBrowser().storage.onChanged.addListener(storageChangeHandler);
+				clearInterval(jsInitChecktimer);
+				jsInitChecktimer = null;
+			}
 		}
+
+		jsInitChecktimer = setInterval(checkForJS_Finish, 1000);
 	}
-});
 
+	setEventListeners();
+
+	document.addEventListener("yt-navigate-finish", function (event) {
+		if (jsInitChecktimer !== null) clearInterval(jsInitChecktimer);
+		window.returnLikerProcessSet = false;
+		setEventListeners();
+	});
+});

app/scripts/modules/liker-paper.js

@@ -275,14 +275,10 @@ class PaperLiker {
 	isVideoRated() {
 		log("checking if video is rated");
 		if (IS_CLASSIC) {
-			return this.btns.like.parentNode.parentNode.classList
-			    .contains("style-default-active") ||
-				this.btns.dislike.parentNode.parentNode.classList
-				.contains("style-default-active");
-
-		} else if (IS_GAMING) {
-			return this.btns.like.classList.contains("active") ||
-				 this.btns.dislike.classList.contains("active");
+			let isRated = this.btns.like.attributes["aria-pressed"].nodeValue === "true" ||
+				this.btns.dislike.attributes["aria-pressed"].nodeValue === "true";
+			log("is rated: ", isRated);
+			return isRated;
 		} else {
 			throw "Unknow youtube type";
 		}

app/scripts/modules/miscellaneous.js

@@ -68,14 +68,14 @@ function getCreatorFromVideo() {
 	let creatorBlock = null;
 	let name = null;
 	let URL = null;
-	if (IS_PAPER) {
-		let creatorBlock = document.querySelector("ytd-video-owner-renderer[modern-metapanel]");
-		let name = creatorBlock.querySelector("ytd-channel-name#channel-name a").textContent;
-		let URL = creatorBlock.querySelector("ytd-channel-name#channel-name a").href;
+	if (window.IS_PAPER) {
+		creatorBlock = document.querySelector("ytd-video-owner-renderer[modern-metapanel]");
+		name = creatorBlock.querySelector("ytd-channel-name#channel-name a").textContent;
+		URL = creatorBlock.querySelector("ytd-channel-name#channel-name a").href;
 	} else {
-		let creatorBlock = document.querySelector("#container.ytd-video-secondary-info-renderer");
-		let name = creatorBlock.querySelector("yt-formatted-string.ytd-channel-name>a").textContent;
-		let URL = creatorBlock.querySelector("yt-formatted-string.ytd-channel-name>a").href;
+		creatorBlock = document.querySelector("#container.ytd-video-secondary-info-renderer");
+		name = creatorBlock.querySelector("yt-formatted-string.ytd-channel-name>a").textContent;
+		URL = creatorBlock.querySelector("yt-formatted-string.ytd-channel-name>a").href;
 	}
 	return {name, URL};
 }

app/update_info.html

@@ -14,6 +14,7 @@ <h1 id="title"><strong>YouTube</strong> Auto Like</h1>
 	<p>What's new :</p>
 	<ul>
 		<li>Update to new Youtube layout. Thank you <a href="https://github.com/Taknok/youtube-auto-like/issues/68"> NexusDarkshade</a> !</li>
+		<li>Fix changes after new Youtube layout. Thank you <a href="https://github.com/Taknok/youtube-auto-like/issues/72"> JoelleEmmily & Fraeksn (and also Divin1ty666  &  ReiNasc)</a> !</li>
 	</ul>
 	<p>Feel free to report any bug on <a id="report-link" href="https://github.com/Taknok/youtube-auto-like">Github</a>.</p>
 	<div id="links">