Merge branch 'v-next'

.gitignore

@@ -2,3 +2,4 @@
 *.pdf
 *.pptx
 *.zip
+\.directory

background.js

@@ -5,7 +5,7 @@ function handleOnInstalled(details) {
         let notificationOptions = {
             type: "basic",
             title: "Thanks!",
-            message: "Thanks for installing Better 9gag.",
+            message: "Thank you for installing Better 9gag. If you like this extension, please consider giving it a good review. If you don't like it, feel free to tell me why.",
             iconUrl: "icons/icon-48.png"
         };
         browser.notifications.create(notificationOptions);
@@ -15,12 +15,14 @@ function handleOnInstalled(details) {
             type: "basic",
             title: `Version ${manifest.version} Changelog`,
             message: `Better 9gag was updated. Here is what has changed:
-• Removed own theme switching button; uses 9gags new, own button instead.
--> If you've used 9gag's night mode before this update and you're stuck between the two night modes, please disable this extension, on 9gag switch off the native night mode, and then reactivate this extension.
-• Simplified cross-browser stuff; this should give better performance.`,
+• Videos don't start playing, when you just scroll past them
+• No more YouTube posts
+• General improvements to the video controls stuff
+• Maybe better performance`,
             iconUrl: "icons/icon-48.png"
         };
         browser.notifications.create(notificationOptions);
     }
 }
+
 browser.runtime.onInstalled.addListener(handleOnInstalled);

components/no-ora-tv.js

@@ -8,5 +8,5 @@ function rmOraVid() {
         ora.parentNode.removeChild(ora);
     }
 }
-// TODO: Replace event by Mutation Observer
-document.addEventListener("scroll", rmOraVid);
+
+activateComponent(rmOraVid);

components/no-social-buttons.js

@@ -13,6 +13,5 @@ function rmStickyBtn() {
     stickyBtn.parentNode.removeChild(stickyBtn);
 }
 
-// TODO: replace onscroll event with Mutation Observer
-document.addEventListener("scroll", rmShareBtns);
-document.addEventListener("DOMContentLoaded", rmStickyBtn);
+activateComponent(rmShareBtns);
+document.addEventListener("DOMContentLoaded", rmStickyBtn);

components/nsfw-unlock.js

@@ -35,5 +35,5 @@ function unlockNsfwPosts() {
         parent.removeChild(nsfwPosts[i]);
     }
 }
-// TODO: replace onscroll event with Mutation Observer
-document.addEventListener("scroll", unlockNsfwPosts);
+
+activateComponent(unlockNsfwPosts);

components/video-controls.js

@@ -2,13 +2,43 @@
 function addControls() {
     let videos = document.getElementsByTagName("video");
     for (let i = 0; i < videos.length; i++) {
+        // Add controls
         videos[i].controls = true;
+        // Set Volume to 50%
         videos[i].volume = 0.5; // TODO: default video volume customizable
-        if (videos[i].nextElementSibling.classList[0] == "sound-toggle") {
-            videos[i].parentNode.removeChild(videos[i].nextElementSibling);
+        // Disable Autoplay
+        videos[i].autoplay = false;
+        // Stretch portrait videos => show volume slider instead of only volume icon
+        videos[i].style.minWidth = "500px";
+        // Remove a.badge-track around videos => disable autoplay
+        let badgeTracker = videos[i].parentNode.parentNode;
+        if (badgeTracker.className.includes("badge")) {
+            let actualPost =  badgeTracker.firstElementChild.cloneNode(true);
+            badgeTracker.parentNode.replaceChild(actualPost, badgeTracker);
         }
-        // TODO: remove a.badge-track around videos (div.post-container > div > a.badge-track > video)
+        // Remove now unnecessary elements
+        hideExtraElements(".play");
+        hideExtraElements(".sound-toggle");
+        hideExtraElements(".length");
+
+        function hideExtraElements(identifier) {
+            let el = videos[i].parentNode.querySelector(identifier);
+            if (el) {
+                el.classList.add("hide");
+            }
+        }
+    }
+}
+
+function removeYoutubePosts() {
+    let youtubePosts = document.querySelectorAll(".youtube-post");
+    for (let i = 0; i < youtubePosts.length; i++) {
+        let postRoot = youtubePosts[i].parentNode.parentNode.parentNode.parentNode;
+        postRoot.parentNode.removeChild(postRoot);
     }
 }
-// TODO: replace onscroll event with Mutation Observer
-document.addEventListener("scroll", addControls);
+
+activateComponent(function() {
+    addControls();
+    removeYoutubePosts();
+});

content.js

@@ -1,7 +1,2 @@
-// initial scroll to trigger the event once
-window.onload = function() { window.scrollBy(0,1); }
-
-
 // TODO: create a settings page
 // TODO: create a page action (for launching the settings page)
-// TODO: remove or hide Youtube embededs

lib/better9gag.js

@@ -1,3 +1,11 @@
 if (typeof browser == "undefined") {
     var browser = chrome;
 }
+
+function activateComponent(callback, observerConfig={ childList: true, subtree: true }, registeringEvent="DOMContentLoaded") {
+    document.addEventListener(registeringEvent, function() {
+        // Create and attach the observer
+        let body_observer = new MutationObserver(callback);
+        body_observer.observe(document.body, observerConfig);
+    });
+}

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Better 9gag",
-  "version": "1.6.2",
+  "version": "1.7",
   "author": "Fabian Große",
   "homepage_url": "https://github.com/Saphareas/Better-9gag",
 

stylesheets/darken-9gag.css

@@ -1,8 +1,10 @@
-/* Dark background for whole site (same grey as YouTubes dark theme) */
+/* Dark background for whole site (same grey as YouTube's dark theme) */
 .background-white,
 #container, body,
 .post-afterbar-a.in-post-top,
-.CS3 { background: rgb(35,35,35); }
+.CS3 {
+  background: rgb(35,35,35);
+}
 /* White font for everything */
 .section-sidebar .nav .label,
 .featured-tag a,
@@ -13,12 +15,23 @@ section.block-feature-cover a,
 .profile .tab-bar ul.menu a.selected,
 .CS3 .comment-entry .payload .username,
 .CS3 .collapsed-comment,
-.CS3 { color: white; }
-.profile .tab-bar ul.menu a.selected { border-bottom: 2px solid white; }
+.tab > .active > a,
+.post-text-container p,
+.CS3 {
+  color: white;
+}
+.profile .tab-bar ul.menu a.selected {
+  border-bottom: 2px solid white;
+}
 /* Make icons of 9gag sections white */
-.section-sidebar .nav i.icon { filter: invert(1); }
+.section-sidebar .nav i.icon {
+  filter: invert(1);
+}
 /* ...except the favorites star */
-i.icon.star { filter: none !important; }
+i.icon.star {
+  filter: none !important;
+}
 /* Black bg when hovering a 9gag section */
-.section-sidebar .nav li:hover .label { background: black; }
-/* TODO: rename to darken-9gag.css */
+.section-sidebar .nav li:hover .label {
+  background: black;
+}

stylesheets/ui-tweaks.css

@@ -1,14 +1,17 @@
-#theme-switch-wrapper {
-  margin-right: 10px;
+.avatar-container {
+  border-radius: 2px !important;
 }
-#theme-switch > img {
-  height: 30px;
-  width: 30px;
+.popup-menu ul {
+  background: rgb(35, 35, 35) !important;
+  border: 1px solid white;
 }
-#jsid-header-user-menu-avatar > a {
-  border-radius: 2px;
+.popup-menu ul li a {
+  color: white !important;
 }
-.popup-menu.postpage-share { 
-  top: 43px; left: 164px; 
+.popup-menu a:hover {
+  background: black !important;
+}
+.popup-menu.postpage-share {
+  top: 43px;
+  left: 164px;
 }
-/* TODO: rename to ui-tweaks.css */