From d0a14f0ee55addf3b3a8639c1f0c299c6c24da9c Mon Sep 17 00:00:00 2001
From: clerie <clemens@milchinsel.de>
Date: Fri, 29 Jun 2018 11:03:07 +0200
Subject: [PATCH] Grafiken passen Farbe nach Klick und bei wechsel des Videos
 an

---
 README.md |  4 ++++
 witzig.js | 40 +++++++++++++++++++++++++++++++++++++---
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 31abe70..7c86df8 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,10 @@ Dieses Firefox Plugin ersetzt die Daumen in YouTube getreu dem Känguru durch Wi
 
 # Installation
 ## Firefox
+### Aus Firefox Add-ons (Empfohlen)
+Einfach zu Firefox hinzufügen:
+https://addons.mozilla.org/de/firefox/addon/witzig-nicht-witzig/
+
 ### Als Entwicklerversion
 1. Herunterladen
 2. Entpacken
diff --git a/witzig.js b/witzig.js
index 1ba58cf..0b6a100 100644
--- a/witzig.js
+++ b/witzig.js
@@ -11,6 +11,9 @@ const image_container_path = 'html body ytd-app div#content.style-scope.ytd-app
 // CSS Pfad, der das Objekt, das die Daumen beinhaltet, beschriebt, um den Bereicht, in dem sich die Grafiken für die Objekte ausbreiten können, zu vergößern
 const container_path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer ytd-toggle-button-renderer.style-scope.ytd-menu-renderer.force-icon-button a.yt-simple-endpoint.style-scope.ytd-toggle-button-renderer yt-icon-button#button.style-scope.ytd-toggle-button-renderer';
 
+// Css Pfad, der beschreibt, von wo aus clicks zum ändern der Likes interprätiert werden sollen
+const link_path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer ytd-toggle-button-renderer.style-scope.ytd-menu-renderer.force-icon-button a.yt-simple-endpoint.style-scope.ytd-toggle-button-renderer';
+
 /*
 Hilfsfunktionen
 */
@@ -54,6 +57,8 @@ function inject() {
   log("Stempelfläche vergrößert.");
   var image_container_object = document.querySelectorAll(image_container_path);
   log("Packe Stempel aus...");
+
+  // wenn Like aktiv, zeige aktive Grafik an
   if(container_object[0].classList.contains('style-default-active')) {
     inject_image(image_container_object[0], getURL("media/stempel-witzig.png"));
   }
@@ -61,6 +66,8 @@ function inject() {
     inject_image(image_container_object[0], getURL("media/stempel-witzig-disabled.png"));
   }
   log("Witzig!");
+
+  // wenn Dislike aktiv, zeige aktive Grafik an
   if(container_object[1].classList.contains('style-default-active')) {
     inject_image(image_container_object[1], getURL("media/stempel-nicht-witzig.png"));
   }
@@ -70,10 +77,32 @@ function inject() {
   log("Nicht Witzig!");
 }
 
+// Warte noch kurz vor dem einfügen
+function inject_with_timeout() {
+  setTimeout(inject, 10);
+}
+
 /*
 Ladefunktion
 */
 
+// regelmäßig prüfen, ob sich die URL geändert hat und entsprechend den Like Status aktualisieren
+var current_url = '';
+var last_loaded_url = '';
+
+var link_object = '';
+
+function inject_loop () {
+  current_url = window.location.href;
+  if(current_url != last_loaded_url) {
+    log("Neues");
+    setTimeout(inject, 500);
+    last_loaded_url = current_url;
+  }
+
+  setTimeout(inject_loop, 500);
+}
+
 // Die YouTube Website läd die Inhalte durch ein externes JavaScript, wenn wir von vornherein unsere eigenen Inhalte einsetzen, werden diese später von YouTube wieder überschrieben. Wir schauen also, ob ein bestimmtes Objekt, dass durch JavaScript eingefügt wird, exstiert, dann erst bringen wir unsere eigenen Inhalte ein.
 var loaded = false;
 
@@ -81,11 +110,16 @@ function loading() {
   loaded = document.querySelector(load_end_check_path);
   if (loaded) {
     log("Stempelfläche gefunden.");
-    inject();
+    // initialisiere onclick events
+    link_object = document.querySelectorAll(link_path);
+    link_object[0].onclick = inject_with_timeout;
+    link_object[1].onclick = inject_with_timeout;
+
+    // starte Schleife, die nach aktualisierungen ausschau hält
+    inject_loop();
   }
   else {
-    log("Hier nicht.");
-    setTimeout(loading, 100);
+    setTimeout(loading, 500);
   }
 }