<br />
<b>Warning</b>:  fopen(/www/sites/update.greasyfork.icu/index/store/forever/74c477184ea56dabcfe2cab01e39856a.js): failed to open stream: No space left on device in <b>/www/sites/update.greasyfork.icu/index/scriptControl.php</b> on line <b>65</b><br />
// ==UserScript==
// @name         9GAG video control enabler
// @version      0.2
// @description  Enables the video controls on all video elements on 9GAG.
// @author       fischly
// @match        https://9gag.com/*
// @grant        none
// @run-at       document-idle
// @namespace    https://greasyfork.org/users/662249
// @icon         https://9gag.com/favicon.ico
// @license      CC BY-SA 4.0
// @downloadURL none
// ==/UserScript==

// entry point
(function() {
    'use strict';

	// first, enable controls to all elements that are already loaded on the 9GAG site
	enableVideoControls();
	
	// next, add the observer that will enable controls on all video elements that are dynamically loaded on scrolling
	addObserver();
})();


/**
 * Enables all video controls of all elements that are already loaded.
 */
function enableVideoControls() {
	// get all post containers that are loaded already on site load
	const postContainers = document.querySelectorAll('.list-stream');
    console.log('postContainers: ', postContainers);
	
	for (const container of postContainers) {
		enableControlsOnPostContainer(container);
	}
	
}

/**
 * Adds the observer to the site element, where all the postContainers are loaded to.
 */
function addObserver() {
	// the element that all new postContainers are loaded to is called 'list-view-2' for some reason
	const targetNode = document.getElementById('page');
    console.log('target node: ', targetNode);
	const config = { attributes: false, childList: true, subtree: true };

	const callback = function(mutationsList, observer) {
        console.log('CALLBACK: ', mutationsList);
		for(const mutation of mutationsList) {
			// loop over all added elements
			for (const addedElement of mutation.addedNodes) {
                // check if the main page has loaded
                if (addedElement.className && addedElement.className.includes('main-wrap')) {
                    // if the main page has loaded, get the list-view from it (a "post-container" containing 5 invididual posts)
                    // and enable controls on it
                    enableControlsOnPostContainer(addedElement.querySelector('#list-view-2'));
                }

				// check if the added element is directly a list-view ("post-container"), which is the case if you scroll down
                // and 9gag dynamically loads new posts. if it is one, enable controls on it
				if (addedElement.className && addedElement.className.includes('list-stream')) {
					// enable controls on all videos of this container
					enableControlsOnPostContainer(addedElement);
				}
			}
		}
	};

	// create the observer and observe the target
	const observer = new MutationObserver(callback);
	observer.observe(targetNode, config);
}


/**
 * Enables controls on video elements contained in all articles (= posts) of the given container.
 */
function enableControlsOnPostContainer(container) {
	const videos = container.querySelectorAll('article video');
	
	for (const video of videos) {
		video.controls = true;
	}
}