diff --git a/.gitignore b/.gitignore index cc03972..de733fa 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ *.pdf *.pptx *.zip +\.directory diff --git a/background.js b/background.js index bf00190..97326cf 100644 --- a/background.js +++ b/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); diff --git a/components/no-ora-tv.js b/components/no-ora-tv.js index 5080127..2581c44 100644 --- a/components/no-ora-tv.js +++ b/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); \ No newline at end of file + +activateComponent(rmOraVid); diff --git a/components/no-social-buttons.js b/components/no-social-buttons.js index 90cf970..3a55f30 100644 --- a/components/no-social-buttons.js +++ b/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); \ No newline at end of file +activateComponent(rmShareBtns); +document.addEventListener("DOMContentLoaded", rmStickyBtn); diff --git a/components/nsfw-unlock.js b/components/nsfw-unlock.js index b7b9a7c..dee156a 100644 --- a/components/nsfw-unlock.js +++ b/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); diff --git a/components/video-controls.js b/components/video-controls.js index e72e96c..653cc06 100644 --- a/components/video-controls.js +++ b/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(); +}); diff --git a/content.js b/content.js index 682d6ec..85ee31a 100644 --- a/content.js +++ b/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 diff --git a/lib/better9gag.js b/lib/better9gag.js index 0c2ad4d..d2c6085 100644 --- a/lib/better9gag.js +++ b/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); + }); +} diff --git a/manifest.json b/manifest.json index abf4403..82d253b 100644 --- a/manifest.json +++ b/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", diff --git a/stylesheets/darken-9gag.css b/stylesheets/darken-9gag.css index 9e0445c..d6a0c75 100644 --- a/stylesheets/darken-9gag.css +++ b/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; +} diff --git a/stylesheets/ui-tweaks.css b/stylesheets/ui-tweaks.css index 394e96f..d010b48 100644 --- a/stylesheets/ui-tweaks.css +++ b/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 */