☰

stream4chan

Turn those beastly 4chan threads in an easy to use, easy to watch stream of content, given to you in a gallery-like format. Batteries not included

  1. // ==UserScript==
  2. // @name         stream4chan
  3. // @namespace    http://tampermonkey.net/
  4. // @version      4.3
  5. // @description  Turn those beastly 4chan threads in an easy to use, easy to watch stream of content, given to you in a gallery-like format. Batteries not included
  6. // @author       Lauchlan105
  7. // @match        http://boards.4chan.org/*/thread/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. //////////////////
  12. // # Settings # //
  13. //////////////////
  14.  
  15. //////////////////
  16. // # Settings # //
  17. //////////////////
  18.  
  19. /*
  20.  
  21. fix resizing (again)
  22. remove (S) for shuffle
  23. change settings font color
  24. make video size change with gallery
  25. prevent arrow from being pushed outside 
  26.  
  27. */
  28.  
  29. var settingsArray = [
  30.     
  31.     //Loop whole thread
  32.     true,
  33.  
  34.     //Play automatically
  35.     true,
  36.  
  37.     //Shuffle on startup
  38.     false,
  39.  
  40.     //Play Webms
  41.     true,
  42.  
  43.     //Show Webm controls
  44.     true,
  45.  
  46.     //Play webm sound
  47.     true,
  48.  
  49.     //Play Gifs
  50.     true,
  51.  
  52.     //Gif duration (Seconds)
  53.     3,
  54.  
  55.     //Play Images
  56.     true,
  57.  
  58.     //Image duration (Seconds)
  59.     3,
  60.  
  61.     //Open Stream4chan on startup
  62.     true,
  63.  
  64.     //Override Individual media?
  65.     true,
  66.  
  67.     //Select Media randomly
  68.     false
  69. ];
  70.  
  71. ///////////////////
  72. // # Variables # //
  73. ///////////////////
  74.  
  75. //Placeholder variables
  76. var globalTimeout;
  77. var webm;
  78. var gif;
  79. var png;
  80. var jpg;
  81. var SOT;
  82. var EOT;
  83. var noneSelected;
  84. var allContent;
  85. var usedContent;
  86. var currentContent;
  87.  
  88. ////////////////////////////
  89. // # Media Object Model # //
  90. ////////////////////////////
  91.  
  92. class Media{
  93.     constructor(thumb, source, id){
  94.  
  95.     	// local scope variable for object access via video/thumbnail elements
  96.         var obj = this;
  97.  
  98.         this.position = 0;
  99.         this.playcount = 0;
  100.         this.prevMedia = noneSelected;
  101.         this.nextMedia = noneSelected;
  102.  
  103.         this.id = id === undefined ? "" : id;
  104.  
  105.         this.thumb = document.createElement('img');
  106.         this.thumb.src = thumb;
  107.         this.thumb.setAttribute('class','sfc-slide-preview');
  108.  
  109.         this.type = mediaType(source);
  110.  
  111.         this.resizeTimeout = setTimeout(function(){}, 0);
  112.  
  113.         //Handles deleted files/invalid media
  114.         if(this.type === undefined || this.type === null){
  115.  
  116.         	//Force null for simpler conditionals
  117.         	this.type = null;
  118.  
  119.         	console.log('Media could not be made. One or more of the following are invalid...');
  120.         	console.log('	Given Arguments:');
  121.         	console.log('		thumb: ' + thumb);
  122.         	console.log('		source: ' + source);
  123.         	console.log('		id: ' + id);
  124.         	console.log('');
  125.         	console.log('	All functions will be assigned placeholders');
  126.  
  127.         	function placeHolderFunction(calledFunction){
  128.                 el_stage.innerHTML = calledFunction + ' cannot be called on comment with id ' + this.id;
  129.         		console.log(calledFunction + ' cannot be called on object with id ' + this.id);
  130.         		return;
  131.     		}
  132.  
  133. 			this.unhighlight = function(){ placeHolderFunction('unhiglight'); };
  134. 			this.highlight   = function(){ placeHolderFunction('highlight'); };
  135.        	    this.deselect    = function(){ placeHolderFunction('deselect'); };
  136.        	   	this.resize      = function(){ placeHolderFunction('resize'); };
  137.        	    this.select      = function(){ placeHolderFunction('select'); };
  138. 			this.pause       = function(){ placeHolderFunction('pause'); };
  139.      	    this.play        = function(){ placeHolderFunction('play'); };
  140. 			
  141.         	return false;
  142.         }
  143.  
  144.     	if(this.type === webm){
  145.             this.media = document.createElement('video');
  146.  
  147.             this.media.setAttribute("id", "sfc-webm");
  148.  
  149.             this.media.setAttribute("controls","");
  150.  
  151.             this.media.setAttribute("loop","");
  152.             this.media.loop = true;
  153.  
  154.             this.media.setAttribute("autoplay","");
  155.             this.media.autoplay = false;
  156.  
  157.             this.media.setAttribute("preload","");
  158.             this.media.preload = "none";
  159.  
  160.         }else if(this.type === png || this.type === gif || this.type === jpg){
  161.             this.media = document.createElement('img');
  162.             this.media.setAttribute("id","sfc-img");
  163.             this.media.alt = source;
  164.         }
  165.  
  166.     	this.media.setAttribute("class", "sfc-media");
  167.     	this.media.src = source;
  168.  
  169.  
  170.         ///////////////////
  171.         //MEDIA FUNCTIONS//
  172.         ///////////////////
  173.     	this.play = function(){
  174.  
  175.         	if(obj !== SOT && obj !== EOT && obj !== noneSelected){
  176.         		if(obj.type == webm){
  177. 	                obj.media.volume = op_playSound.checked ? obj.media.volume : 0;
  178. 	                obj.media.play();
  179. 	            }else if(obj.type == gif || obj.type == jpg || obj.type == png){
  180.                     obj.media.src = obj.media.alt;
  181.                     updateAutoplay();
  182.                 }
  183.  
  184.         	}
  185.         };
  186.  
  187.         this.pause = function(){
  188.  
  189.             clearTimeout(globalTimeout);
  190.             if(obj.type == webm){
  191.                 obj.media.pause();
  192.             }else if(obj.type == gif || obj.type == jpg || obj.type == png){
  193.                 obj.media.src = obj.thumb.src;
  194.             }
  195.         };
  196.  
  197.         ///////////////////////
  198.         //THUMBNAIL FUNCTIONS//
  199.         ///////////////////////
  200.  
  201.         var highlight = function(){
  202.  
  203.             obj.thumb.style.border = "2px solid gainsboro";
  204.  
  205.             /*
  206.  
  207. 			//Scroll into view
  208. 	        var pc = document.getElementById('pc' + id.substr(id.lastIndexOf('p') + 1));
  209.   	 		pc.scrollIntoView();
  210.  
  211. 			//Set container style to mimic focused content 
  212.   			pc.style.background = '#f0e0d6';
  213.     		pc.style.border = '1px solid #D99F91!important';
  214.  
  215.     		*/
  216.         };
  217.  
  218.         var unhighlight = function(){
  219.  
  220.             obj.thumb.style.border = "2px solid transparent";
  221.  
  222. 			/*
  223.  
  224. 			//Remove focused content styles           
  225.  			var pc = document.getElementById('pc' + id.substr(id.lastIndexOf('p') + 1));
  226.   			pc.style.background = '#F0C0B0!important';
  227.     		pc.style.border = '1px solid #D9BFB7';
  228.  
  229.     		*/
  230.         };
  231.  
  232.         ///////////////////////////
  233.         //MISCELLANEOUS FUNCTIONS//
  234.         ///////////////////////////
  235.  
  236.         this.select = function(){
  237.  
  238.         	obj.playcount++;
  239.  
  240.             //Deselect active content
  241.             if(currentContent !== null){
  242.                 currentContent.deselect();
  243.             }
  244.  
  245.             //Set currentContent to this object
  246.             currentContent = obj;
  247.  
  248.             //Highlight thumbnail border
  249.             highlight();
  250.  
  251.             //Add media to stage
  252.             obj.media.controls = op_controls.checked;
  253.             el_stage.appendChild(obj.media);
  254.  
  255.             //Play Media
  256.             obj.play();
  257.  
  258.             //resize media
  259.             obj.resize();
  260.  
  261.             //Update auto playing
  262.             updateAutoplay();
  263.  
  264.             //Moves gallery so selected object is centered
  265.             obj.slideGallery();
  266.             
  267.             //Update counter in top right
  268.             updateCounter();
  269.  
  270.             //Assign and load neighbouring media
  271.             obj.getNeighbours();
  272.  
  273.             if(obj.prevMedia.type === webm){
  274.                 obj.prevMedia.media.load();
  275.             }else if(obj.nextMedia.type === webm){
  276.                 obj.nextMedia.media.load();
  277.             }
  278.         };
  279.  
  280.         this.deselect = function(){
  281.             obj.pause();
  282.             obj.media.currentTime = 0;
  283.             unhighlight();
  284.             el_stage.innerHTML = "";
  285.             currentContent = null;
  286.  
  287.             //Reset prev and next media
  288.             obj.prevMedia = noneSelected;
  289.             obj.nextMedia = noneSelected;
  290.         };
  291.  
  292.         this.thumb.onclick = function(){
  293.         	if(obj.thumb.style.border == "2px solid gainsboro"){
  294.         		obj.deselect();
  295.         	}else{
  296.         		obj.select();
  297.         	}
  298.         };
  299.  
  300.         this.resize = function(){
  301.  
  302.             clearTimeout(obj.resizeTimeout);
  303.  
  304.         	//Recursive resize function
  305.         	//repeats every {interval} seconds
  306.         	//if interval is undefined or < 0.01, default to 0.01
  307.         	function execResize(interval){
  308.  
  309.         		//if interval is below 0.01, set to minimum 0.01
  310.         		if(interval){
  311.         			if(interval < 0.05)
  312.         				interval = 0.05;
  313.         		}
  314.  
  315.                 if(isShown(el_sfc)){
  316.                     if(obj === currentContent){
  317.                         var setByWidth = true;
  318.  
  319.                         console.log('resizing');
  320.  
  321.                         //Set to max width
  322.                         obj.media.style.width = window.innerWidth - (el_stagePrev.clientWidth + el_stageNext.clientWidth) + 'px';
  323.                         obj.media.style.height = 'auto';
  324.  
  325.                         //if media height exceeds the stage height
  326.                         if(obj.media.clientHeight > el_stage.clientHeight){
  327.                             //Set to max height instead
  328.                             obj.media.style.height = el_stage.clientHeight + 'px';
  329.                             obj.media.style.width = 'auto';
  330.                             setByWidth = false;
  331.                         }
  332.  
  333.                         if(setByWidth){
  334.                             // if full width, set height padding
  335.                             obj.media.style.marginLeft = '0px';
  336.                             var difHeight = (el_stage.clientHeight - obj.media.clientHeight)/2;
  337.                             var topMarg = (difHeight) - ( difHeight%1 ); //Minus any decimals
  338.                             obj.media.style.marginTop = topMarg  + 'px';
  339.                         }else{
  340.                             // if full height, set width padding
  341.                             obj.media.style.marginTop = '0px';
  342.                             var difWidth = (el_stage.clientWidth - obj.media.clientWidth)/2;
  343.                             var leftMarg = (difWidth) - ( difWidth%1 ); //Minus any decimals
  344.                             obj.media.style.marginLeft = leftMarg  + 'px';
  345.                         }
  346.  
  347.                         if(interval){
  348.                             obj.resizeTimeout = setTimeout(function(){
  349.                                 execResize(interval);
  350.                             }, interval*1000);
  351.                         }else{
  352.                             return;
  353.                         }
  354.                     }else{
  355.                         clearTimeout(obj.resizeTimeout);
  356.                     }  
  357.                 }else{
  358.                     clearTimeout(obj.resizeTimeout);
  359.                 }
  360.         		
  361.         		return;
  362.         	}
  363.  
  364.         	//Continue resizing every 1 second till video ends
  365.         	execResize(0.2);
  366.  
  367.         };
  368.  
  369.         this.slideGallery = function(){
  370.  
  371.             //resets slider transform
  372.             el_internalSlider.style.transform = '';
  373.  
  374.             //distance from the left of the browser to the middle of the thumbnail
  375.             var middleOfThumb = getPageTopLeft(obj.thumb).left + (obj.thumb.clientWidth*1.5);
  376.  
  377.             //The distance between left side of browser and vertical middle of browser
  378.             var middleOfWindow = window.innerWidth/2;
  379.  
  380.             //Displacement from middle
  381.             var displacement = middleOfWindow - middleOfThumb;
  382.  
  383.             //Include the current position of the internal slider
  384.             var crntSliderValue = getPageTopLeft(el_internalSlider).left;
  385.             displacement += crntSliderValue;
  386.  
  387.             //Apply change
  388.             el_internalSlider.style.transform = 'translateX( ' + displacement + 'px)';
  389.  
  390.         }
  391.  
  392.         this.previous = function(){
  393.             obj.prevMedia.select();
  394.         }
  395.  
  396.         this.next = function(){
  397.             obj.nextMedia.select();
  398.         }
  399.  
  400.         this.getNeighbours = function(){
  401.             if(!canPlay(obj)){
  402.                 //If the current object isn't in usedContent -> prev = last in used content, next = first in used content
  403.                 obj.prevMedia = usedContent[usedContent.length - 1].select();
  404.                 obj.nextMedia = usedContent[0].select();
  405.             }else if(op_random.checked){
  406.                 obj.prevMedia = getRandom();
  407.                 obj.nextMedia = getRandom(obj.prevMedia);
  408.             }else if(op_loopAll.checked){
  409.                 obj.prevMedia = obj.position === 0 ? usedContent[usedContent.length - 1] : usedContent[obj.position - 1];
  410.                 obj.nextMedia = obj.position === usedContent.length - 1 ? usedContent[0] : usedContent[obj.position + 1];
  411.             }else if(!op_loopAll.checked){
  412.                 obj.prevMedia = obj.position === 0 ? obj : usedContent[obj.position - 1];
  413.                 obj.nextMedia = obj.position === usedContent.length - 1 ? obj : usedContent[obj.position + 1];
  414.             }
  415.         }
  416.  
  417.         this.media.getObj = function(){ return obj; };
  418.         this.thumb.getObj = function(){ return obj; };
  419.  
  420.         return true;
  421.     }
  422. }
  423.  
  424. //////////////
  425. // # Main # //
  426. //////////////
  427.  
  428. (function(){
  429.  
  430.     //Removes default padding
  431.     document.body.style.padding = "0px";
  432.  
  433.     insertElements();
  434.     initVars();
  435.     initPlaceholders();
  436.     startInteractions();
  437.     startEventListeners();
  438.     
  439.     var validSettings = applyDefaulSettings();
  440.     if( !validSettings.valid ){
  441.         console.log(validSettings.valid);
  442.         for(var i = 0; i < validSettings.messages.length; i++){
  443.         	console.log(validSettings.messages[i]);
  444.             el_stage.innerHTML = '<h1>' + validSettings.messages[i] + '</h1>';    
  445.         }
  446.         return;
  447.     }
  448.  
  449.     //Show and hide gallery to force load thumbnails
  450.     //without this .select() does not work until gallery is shown
  451.     showGallery(true);
  452.     showGallery(false);
  453.  
  454.     magicMouse(false);
  455.     sfc.style.display = "none"; //Force hide SFC
  456.     showSFC(false);             //Force styles to be ready for fade in 
  457.  
  458.     //If shuffled on start up  -> shuffle
  459.     if(settingsArray[2]){
  460.     	shuffle(true);
  461.     }
  462.  
  463.     //If open on startup is selected -> open on startup
  464.     if(settingsArray[10]){
  465.         showSFC(true);
  466.         usedContent[0].select();
  467.     }
  468. })();
  469.  
  470. /////////////////////////////////
  471. // # Initial Setup Functions # //
  472. /////////////////////////////////
  473.  
  474. //Insert html for buttons and modal
  475. function insertElements(){
  476.  
  477.     //Start Button
  478.     var btn1 = '[<a id="sfc-start" href="#">start</a>]';
  479.     var btn2 = '[<a id="sfc-resume" href="#">resume</a>]';
  480.  
  481.     //Add span to nav
  482.     var nav = document.getElementsByClassName('navLinks desktop');
  483.     for(var i = 0; i < nav.length; i++){
  484.         var span = document.createElement('span');
  485.         span.innerHTML = btn1 + " " + btn2;
  486.  
  487.         span.className = 'sfc-nav';
  488.         span.style.display = nav[i].style.display;
  489.  
  490.         nav[i].parentNode.insertBefore(span, nav[i]);
  491.         nav[i].parentNode.insertBefore(document.getElementById('op'), nav[i]);
  492.     }
  493.  
  494.     var html = '<!-- SETTINGS --> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <div id="sfc-settings-column"> <div id="sfc-settings-row"> <div id="sfc-settings-panel"> Settings <div id="sfc-settings-exit"></div> <!-- GENERAL SETTINGS --> <div> <p class="sfc-settings-title"> General </p> <div id="sfc-option"> <input id="stream4chan-loopAll" class="SFC-input" type="checkbox"> Loop whole thread (L) </div> <div id="sfc-option"> <input id="stream4chan-auto" class="SFC-input" type="checkbox"> Play Automatically (A) </div> <div id="sfc-option"> <input id="stream4chan-random" class="SFC-input" type="checkbox"> Random (R) </div> <div id="sfc-option"> <input id="stream4chan-shuffle" class="SFC-input" type="button" value=" Shuffle "> (S) </div> </div> <!-- WEBM SETTINGS --> <div> <p class="sfc-settings-title"> Webm </p> <div id="sfc-option"> <input id="stream4chan-webms" class="SFC-input" type="checkbox"> Play Webms (W) </div> <div id="sfc-option"> <input id="stream4chan-controls" class="SFC-input" type="checkbox"> Show Controls (C) </div> <div id="sfc-option"> <input id="stream4chan-playSound" class="SFC-input" type="checkbox"> Play sound (S) </div> </div> <!-- GIF SETTINGS --> <div> <p class="sfc-settings-title"> Gif </p> <div id="sfc-option"> <input id="stream4chan-gifs" class="SFC-input" type="checkbox"> Play Gifs (G) </div> <div id="sfc-option"> <input id="stream4chan-gif-duration" class="SFC-input" type="number" min="1" max="60" value="3" step="1"> Gif Duration (up/down) </div> </div> <!-- IMG SETTINGS --> <div> <p class="sfc-settings-title"> Images </p> <div id="sfc-option"> <input id="stream4chan-imgs" class="SFC-input" type="checkbox"> Play Images (I) </div> <div id="sfc-option"> <input id="stream4chan-img-duration" class="SFC-input" type="number" min="1" max="60" value="3" step="1"> Image Duration (Shift + up/down) </div> </div> </div> </div> </div> <!-- Main --> <div id="sfc-main"> <div id="sfc-main-prev" class="sfc-util prev"></div> <div id="sfc-stage"> </div> <div id="sfc-utility"> <div id="sfc-main-settings" class="sfc-util settings"></div> <div id="sfc-main-gallery" class="sfc-util gallery"></div> </div> <div id="sfc-counter"> <p id="sfc-counter-first">1</p> / <p id="sfc-counter-second">2</p> </div> <div id="sfc-main-next" class="sfc-util next"></div> </div> <!-- Gallery Slider --> <div id="sfc-gallery"> <div id="sfc-gallery-prev" class="sfc-util prev"></div> <div id="sfc-slider"> <div id="sfc-slider-internal"> </div> </div> <div id="sfc-gallery-next" class="sfc-util next"></div> </div> <!-- Hidden Cursor Overlay --> <span id="sfc-magicMouse"> </span>';
  495.     // var html = '<!-- SETTINGS --> <div id="sfc-settings-column"><div id="sfc-settings-row"> <div id="sfc-settings-panel"> Settings <div id="sfc-settings-exit"></div> <!-- GENERAL SETTINGS --> <div> <p class="sfc-settings-title"> General </p> <div id="sfc-option"> <input id="stream4chan-loopAll" class="SFC-input" type="checkbox"> Loop whole thread (L) </div> <div id="sfc-option"> <input id="stream4chan-auto" class="SFC-input" type="checkbox"> Play Automatically (A) </div> <div id="sfc-option"> <input id="stream4chan-random" class="SFC-input" type="checkbox"> Random (R) </div> <div id="sfc-option"> <input id="stream4chan-shuffle" class="SFC-input" type="button" value=" Shuffle "> (S) </div> </div> <!-- WEBM SETTINGS --> <div> <p class="sfc-settings-title"> Webm </p> <div id="sfc-option"> <input id="stream4chan-webms" class="SFC-input" type="checkbox"> Play Webms (W) </div> <div id="sfc-option"> <input id="stream4chan-controls" class="SFC-input" type="checkbox"> Show Controls (C) </div> <div id="sfc-option"> <input id="stream4chan-playSound" class="SFC-input" type="checkbox"> Play sound (S) </div> </div> <!-- GIF SETTINGS --> <div> <p class="sfc-settings-title"> Gif </p> <div id="sfc-option"> <input id="stream4chan-gifs" class="SFC-input" type="checkbox"> Play Gifs (G) </div> <div id="sfc-option"> <input id="stream4chan-gif-duration" class="SFC-input" type="number" min="1" max="60" value="3" step="1"> Gif Duration (up/down) </div> </div> <!-- IMG SETTINGS --> <div> <p class="sfc-settings-title"> Images </p> <div id="sfc-option"> <input id="stream4chan-imgs" class="SFC-input" type="checkbox"> Play Images (I) </div> <div id="sfc-option"> <input id="stream4chan-img-duration" class="SFC-input" type="number" min="1" max="60" value="3" step="1"> Image Duration (Shift + up/down) </div> </div> </div> </div> </div> <!-- Main --> <div id="sfc-main"> <div id="sfc-main-prev" class="sfc-util prev"></div> <div id="sfc-stage"> </div> <div id="sfc-utility"> <div id="sfc-main-settings" class="sfc-util settings"></div> <div id="sfc-main-gallery" class="sfc-util gallery"></div> </div> <div id="sfc-main-next" class="sfc-util next"></div> </div> <!-- Gallery Slider --> <div id="sfc-gallery"> <div id="sfc-gallery-prev" class="sfc-util prev"></div> <div id="sfc-slider"> <div id="sfc-slider-internal"> </div> </div> <div id="sfc-gallery-next" class="sfc-util next"></div> </div>';
  496.     // var css = '<!-- CSS --> <style> body, div, img, a, span, html, p{ margin: 0px; border: 0px; padding: 0px; } .sfc-nav{ height: auto; width: auto; } #sfc{ opacity: 1; -moz-transition: opacity 0.50s ease-in-out; -webkit-transition: opacity 0.50s ease-in-out; -o-transition: opacity 0.50s ease-in-out; -ms-transition: opacity 0.50s ease-in-out; transition: opacity 0.50s ease-in-out; } #sfc-main { width: 100%; height: 100%; z-index: 500; position: fixed; top: 0; display: flex; flex-flow: row; background-color: rgba(0,0,0,0.9 ); -webkit-box-shadow: inset 0px 0px 300px 28px rgba(0,0,0,1); -moz-box-shadow: inset 0px 0px 300px 28px rgba(0,0,0,1); box-shadow: inset 0px 0px 300px 28px rgba(0,0,0,1); } #sfc-gallery{ width: 100%; height: auto; z-index: 1000; position: fixed; bottom: 0; display: flex; flex-flow: row; background-color: rgba(0,0,0,0.35); transform: translateY(100%); -webkit-transition: transform 0.4s ease-in-out 0.05s; transition: transform 0.4s ease-in-out 0.05s; } #sfc-settings-column{ height: 100vh; z-index: 1500; top: 0; display: none; flex-flow: column; position: fixed; background-color: rgba(0,0,0,0.7); font-family: "PT Sans", sans-serif; font-size: 16pt; } #sfc-settings-row{ width: 100vw; display: flex; flex-flow: row; flex: 1 1 auto; } #sfc-settings-panel{ margin: auto; padding: 20px; flex: 0 1 auto; background-color: rgba(255,255,255,0.8); } .sfc-settings-title{ margin-top: 7%; text-decoration: underline; } #sfc-settings-exit { width: 20px; height: 20px; opacity: 0.3; float: right; background-image: url("http://www.myiconfinder.com/uploads/iconsets/4c515d45f6a8c4fe16e448a692a9370d.png"); background-size: contain; -webkit-transition: opacity 0.2s linear 0.05s, visibility 0s; transition: opacity 0.2s linear 0.05s, visibility 0s; } #sfc-settings-exit:hover{ opacity: 1; } #sfc-stage, #sfc-slider{ flex: 1 1 auto; margin: 5px; } #sfc-slider-internal{ width: 0px; } #sfc-utility{ position: fixed; bottom: 0; -webkit-transition: transform 0.4s ease-in-out 0.05s; transition: transform 0.4s ease-in-out 0.05s; } .sfc-util{ opacity: 0.1; width: 3vw; height: 3vw; background-color: rgba(255,255,255,0.6); background-clip: content-box; border-radius: 50%; background-size: 1.5vw; background-repeat: no-repeat; background-position:center; margin: auto; padding: 5px; -webkit-transition: opacity 0.2s linear 0.05s, visibility 0s; transition: opacity 0.2s linear 0.05s, visibility 0s; } .sfc-util:hover{ opacity: 1; } .gallery, .settings{ background-size: 2.2vw; } .gallery{ background-image: url("https://maxcdn.icons8.com/Android_L/PNG/24/Photo_Video/gallery-24.png"); } .settings{ background-image: url("https://maxcdn.icons8.com/Android_L/PNG/24/Very_Basic/settings-24.png"); } .prev, .next { flex: 0 0 3vw; background-image: url("http://www.dsetechnology.co.uk/images/disclose-arrow.png"); } .prev{ transform: rotate(180deg); } .sfc-slide-preview{ height: 6vh; width: auto; border: 2px solid transparent; -webkit-transition: border 0.2s linear 0.05s, visibility 0s; transition: border 0.2s linear 0.05s, visibility 0s; } .sfc-slide-preview:hover { border: 2px solid white; } </style> ';
  497.     var css = '<style> <!-- CSS --> <style> body, div, img, a, span, html, p{ margin: 0px; border: 0px; padding: 0px; } #sfc-magicMouse { z-index: 1000; position: fixed; top: 0px; height: 100vh; width: 100vw; cursor: none; } #sfc-counter { min-height: ; position: fixed; top: 0px; right: 0px; color: rgba(255,255,255,0.3); font-family: \'Montserrat\', sans-serif; } #sfc-counter p { display: inline; } .sfc-nav{ height: auto; width: auto; } #sfc{ opacity: 1; -moz-transition: opacity 0.50s ease-in-out; -webkit-transition: opacity 0.50s ease-in-out; -o-transition: opacity 0.50s ease-in-out; -ms-transition: opacity 0.50s ease-in-out; transition: opacity 0.50s ease-in-out; } #sfc-main { width: 100%; height: 100%; z-index: 500; position: fixed; top: 0; display: flex; flex-flow: row; background-color: rgba(0,0,0,0.9 ); -webkit-box-shadow: inset 0px 0px 300px 28px rgba(0,0,0,1); -moz-box-shadow: inset 0px 0px 300px 28px rgba(0,0,0,1); box-shadow: inset 0px 0px 300px 28px rgba(0,0,0,1); } #sfc-gallery{ width: 100%; height: auto; z-index: 1000; position: fixed; bottom: 0; display: flex; flex-flow: row; background-color:rgba(0,0,0,0.35); transform: translateY(100%); -webkit-transition: transform 0.4s ease-in-out 0.05s; transition: transform 0.4s ease-in-out 0.05s; } #sfc-settings-column{ height: 100vh; z-index: 1500; top: 0; display: none; flex-flow: column; position: fixed; background-color: rgba(0,0,0,0.7); font-family: "PT Sans", sans-serif; font-size: 16pt; } #sfc-settings-row{ width: 100vw; display: flex; flex-flow: row; flex: 1 1 auto; } #sfc-settings-panel{ margin: auto; padding: 20px; flex: 0 1 auto; background-color: rgba(255,255,255,0.8); } .sfc-settings-title{ margin-top: 7%; text-decoration: underline; } #sfc-settings-exit { width: 20px; height: 20px; opacity: 0.3; float: right; background-image: url("http://www.myiconfinder.com/uploads/iconsets/4c515d45f6a8c4fe16e448a692a9370d.png"); background-size: contain; -webkit-transition: opacity 0.2s linear 0.05s, visibility 0s; transition: opacity 0.2s linear 0.05s, visibility 0s; } #sfc-settings-exit:hover{ opacity: 1; } #sfc-stage, #sfc-slider{ flex: 1 1 auto; margin: 5px; } #sfc-slider-internal{ width: 0px; -webkit-transition: transform 0.4s ease-in-out 0.05s; transition: transform 0.4s ease-in-out 0.05s; } #sfc-utility{ position: fixed; bottom: 0; -webkit-transition: transform 0.4s ease-in-out 0.05s; transition: transform 0.4s ease-in-out 0.05s; } .sfc-util{ opacity: 0.1; width: 3vw; height: 3vw; background-color: rgba(255,255,255,0.6); background-clip: content-box; border-radius: 50%; background-size: 1.5vw; background-repeat: no-repeat; background-position:center; margin: auto; padding: 5px; -webkit-transition: opacity 0.2s linear 0.05s, visibility 0s; transition: opacity 0.2s linear 0.05s, visibility 0s; } .sfc-util:hover{ opacity: 1; } .gallery, .settings{ background-size: 2.2vw; } .gallery{ background-image: url("https://maxcdn.icons8.com/Android_L/PNG/24/Photo_Video/gallery-24.png"); } .settings{ background-image: url("https://maxcdn.icons8.com/Android_L/PNG/24/Very_Basic/settings-24.png"); } .prev, .next { flex: 0 0 3vw; background-image: url("http://www.dsetechnology.co.uk/images/disclose-arrow.png"); } .prev{ transform: rotate(180deg); } .sfc-slide-preview{ height: 6vh; width: auto; border: 2px solid transparent; -webkit-transition: border 0.2s linear 0.05s, visibility 0s; transition: border 0.2s linear 0.05s, visibility 0s; } .sfc-slide-preview:hover { border: 2px solid white; } </style>';
  498.  
  499.     var sfc = document.createElement('div');
  500.     sfc.setAttribute('id','sfc');
  501.     sfc.innerHTML = html + css;
  502.  
  503.     var target = document.getElementsByClassName('thread');
  504.     for(i = 0; i < target.length; i++){
  505.         target[i].prepend(sfc);
  506.     }
  507. }
  508.  
  509. //Create and initialize global variables for easy access to HTML elements
  510. function initVars(){
  511.  
  512.     //Custom function to find elements while 
  513.         //alerting console of errors in case of null || undefined
  514.     function getEl(elName){
  515.         var temp = document.getElementById(elName);
  516.         if(temp === null || temp === undefined){
  517.             temp = document.getElementsByClassName(elName)[0];
  518.             if(temp === null || temp === undefined){
  519.                 console.log('### ERROR ###');
  520.                 console.log('initVars: getEl(\'' + elName +'\') returned... ');
  521.                 console.log(temp);
  522.             }
  523.         }
  524.         return temp;
  525.     }
  526.  
  527.     //Main Page
  528.     el_startBtn = getEl('sfc-start');
  529.     el_resumeBtn = getEl('sfc-resume');
  530.  
  531.     //Modal
  532.     el_sfc = getEl('sfc');
  533.     el_magicMouse = getEl('sfc-magicMouse');
  534.  
  535.     //Stage Area
  536.     el_stage = getEl('sfc-stage');
  537.     el_stagePrev = getEl('sfc-main-prev');
  538.     el_stageNext = getEl('sfc-main-next');
  539.  
  540.     //Utility buttons
  541.     el_util = getEl("sfc-utility");
  542.     el_galleryBtn = getEl("sfc-main-gallery");
  543.     el_settingsBtn = getEl("sfc-main-settings");
  544.     el_counter_first = getEl("sfc-counter-first");
  545.     el_counter_second = getEl("sfc-counter-second");
  546.  
  547.     //Gallery Area
  548.     el_gallery = getEl("sfc-gallery");
  549.     el_slider = getEl('sfc-slider');
  550.     el_internalSlider = getEl('sfc-slider-internal');
  551.     el_internalSlider.style.transform = "translateX(0px)";
  552.     el_sliderPrev = getEl('sfc-gallery-prev');
  553.     el_sliderNext = getEl('sfc-gallery-next');
  554.  
  555.     //Settings and option area
  556.     el_settings = getEl("sfc-settings-column");
  557.     el_settingsExit = getEl("sfc-settings-exit");
  558.     op_loopAll = getEl('stream4chan-loopAll');
  559.     op_auto = getEl('stream4chan-auto');
  560.     op_random = getEl('stream4chan-random');
  561.     op_shuffle = getEl('stream4chan-shuffle');
  562.  
  563.     op_webms = getEl('stream4chan-webms');
  564.     op_controls = getEl('stream4chan-controls');
  565.     op_playSound = getEl('stream4chan-playSound');
  566.  
  567.     op_gifs = getEl('stream4chan-gifs');
  568.     op_gif_duration = getEl('stream4chan-gif-duration');
  569.  
  570.     op_imgs = getEl('stream4chan-imgs');
  571.     op_img_duration = getEl('stream4chan-img-duration');
  572. }
  573.  
  574. //Inititialize values to placeholder variables
  575. function initPlaceholders(){
  576.     //Type placeholders. Less quotations in code
  577.     webm = 'webm';
  578.     gif = 'gif';
  579.     png = 'png';
  580.     jpg ='jpg';
  581.  
  582.     //Start of thread
  583.     //Object based placeholder for the beginning of the thread (used when loopAll is unchecked)
  584.     SOT = new Media("https://dummyimage.com/1920x1080/000000/ffffff.png","https://dummyimage.com/1920x1080/000000/ffffff.png");
  585.     SOT.media.src = "https://dummyimage.com/1920x1080/000000/ffffff.png&text=Start+of+thread"; 
  586.     SOT.thumb.src = "https://dummyimage.com/480x270/000000/ffffff.png&text=Start+of+thread";
  587.     SOT.type = "SOT";
  588.  
  589.     //End of thread
  590.     //Object based placeholder for the end of the thread (used when loopAll is unchecked)
  591.     EOT = new Media("https://dummyimage.com/1920x1080/000000/ffffff.png","https://dummyimage.com/1920x1080/000000/ffffff.png");
  592.     EOT.media.src = "https://dummyimage.com/1920x1080/000000/ffffff.png&text=End+of+thread";
  593.     EOT.thumb.src = "https://dummyimage.com/480x270/000000/ffffff.png&text=End+of+thread";
  594.     EOT.type = "EOT";
  595.  
  596.     //Object based placeholder for when there is no applicable media found or nothing is selected
  597.     noneSelected = new Media("https://dummyimage.com/1920x1080/000000/ffffff.png","https://dummyimage.com/1920x1080/000000/ffffff.png");
  598.     noneSelected.media.src = "https://dummyimage.com/1920x1080/000000/ffffff.png&text=No+Media+Selected";
  599.     noneSelected.thumb.src = "https://dummyimage.com/480x270/000000/ffffff.png&text=No+Media+Selected";
  600.  
  601.     allContent = getContent();
  602.     usedContent = getUsedContent();
  603.     currentContent = noneSelected;
  604. }
  605.  
  606. //Links keyboard controls with functions and updates sfc accordinglys
  607. function startEventListeners(){
  608.  
  609.     window.onresize = function(){
  610.         // updateGallery();
  611.         currentContent.resize();
  612.         currentContent.slideGallery();
  613.     }
  614.  
  615.     op_loopAll.onchange = updateGallery;
  616.     
  617.     op_controls.onchange = function(){
  618.         if(currentContent.type == webm){
  619.             currentContent.media.controls = op_controls.checked;
  620.         }
  621.     };
  622.  
  623.     op_playSound.onchange = function(){
  624.         if(currentContent.type == webm){
  625.             currentContent.media.volume = op_playSound.checked ? 1 : 0;
  626.         }
  627.     };
  628.  
  629.     op_webms.onchange = updateGallery;
  630.     op_gifs.onchange = updateGallery;
  631.     op_imgs.onchange = updateGallery;
  632.     op_auto.onchange = updateAutoplay;
  633.     op_shuffle.onclick = shuffle;
  634.  
  635.     el_stagePrev.onclick = previous;
  636.     el_stageNext.onclick = next;
  637.  
  638.     document.onkeydown = function(event){
  639.         switch(event.keyCode){
  640.  
  641.             //Space Key
  642.             case 32:
  643.                 if(currentContent !== null){
  644.                     //if paused
  645.                     if(currentContent.type == webm){
  646.                         if(currentContent.media.paused){
  647.                             currentContent.play();
  648.                         }else{
  649.                             currentContent.pause();
  650.                         }
  651.                     }else{
  652.                         if(currentContent.media.src == currentContent.thumb.src){
  653.                             currentContent.play();
  654.                         }else{
  655.                             currentContent.pause();
  656.                         }
  657.                     }
  658.                 }
  659.                 break;
  660.  
  661.             //Enter Key
  662.             case 13:
  663.                 if(event.ctrlKey)
  664.                     return;
  665.  
  666.                 if(!isShown(el_sfc)){
  667.  
  668.                     if(event.altKey){
  669.                         el_resumeBtn.onclick();                        
  670.                     }else{
  671.                         el_startBtn.onclick();
  672.                     }
  673.  
  674.                 }
  675.                 break;    
  676.  
  677.             //Esc Key
  678.             case 27:
  679.                 if(isShown(el_settings)){
  680.                     showSettings(false);
  681.                 }else if(isShown(el_gallery)){
  682.                     showGallery(false);
  683.                 }else if(isShown(el_sfc)){
  684.                     showSFC(false);
  685.                 }
  686.                 break;
  687.  
  688.             //Left arrow Key
  689.             case 37:
  690.                 if(!event.altKey)
  691.                     previous();
  692.                 break;
  693.  
  694.             //Right arrow Key
  695.             case 39:
  696.                 if(!event.altKey)
  697.                     next();
  698.                 break;
  699.  
  700.             //Up arrow Key
  701.             case 38:
  702.                 if(event.shiftKey){
  703.                     op_img_duration.value++;
  704.                 }else{
  705.                     op_gif_duration.value++;
  706.                 }
  707.                 break;
  708.  
  709.             //Down arrow Key
  710.             case 40:
  711.                 if(event.shiftKey){
  712.                     op_img_duration.value--;
  713.                 }else{
  714.                     op_gif_duration.value--;
  715.                 }
  716.                 break;
  717.  
  718.             //L Key
  719.             case 76:
  720.                 op_loopAll.checked = !op_loopAll.checked;
  721.                 op_loopAll.onchange();
  722.                 break;
  723.  
  724.              //A Key
  725.             case 65:
  726.                 op_auto.checked = !op_auto.checked;
  727.                 op_auto.onchange();
  728.                 break;
  729.  
  730.             //R Key
  731.             case 82:
  732.                 if(!event.ctrlKey)
  733.                     op_random.checked = !op_random.checked;
  734.                 break;
  735.  
  736.             //Q Key
  737.             case 81:
  738.                 break;
  739.  
  740.             //S Key
  741.             case 83:
  742.                 op_playSound.checked = !op_playSound.checked;
  743.                 op_playSound.onchange();
  744.                 break;
  745.  
  746.             //W Key
  747.             case 87:
  748.                 op_webms.checked = !op_webms.checked;
  749.                 op_webms.onchange();
  750.                 break;
  751.  
  752.             //C Key
  753.             case 67:
  754.                 op_controls.checked = !op_controls.checked;
  755.                 op_controls.onchange();
  756.                 break;
  757.  
  758.             //G Key
  759.             case 71:
  760.                 op_gifs.checked = !op_gifs.checked;
  761.                 op_gifs.onchange();
  762.                 break;
  763.  
  764.             //I Key
  765.             case 73:
  766.                 op_imgs.checked = !op_imgs.checked;
  767.                 op_imgs.onchange();
  768.                 break;
  769.  
  770.              //Backspace
  771.              case 8:
  772.                 settingsArray[11] = !settingsArray[11];
  773.                 break;
  774.  
  775.             //Print what was typed into console
  776.             default:
  777.                 var temp = "";
  778.                 
  779.                 if(event.shiftKey){
  780.                     temp += "Shift + ";
  781.                 }
  782.  
  783.                 if(event.altKey){
  784.                     temp += "Alt + ";
  785.                 }
  786.  
  787.                 if(event.ctrlKey){
  788.                     temp += "Ctrl + ";
  789.                 }
  790.  
  791.                 temp += event.keyCode;
  792.  
  793.                 console.log(temp);
  794.         }
  795.     }
  796.  
  797.     el_gallery.onwheel = function(event){
  798.  
  799.         //This number, when used with 
  800.         // if(event.wheelDelta > 0 ){
  801.                         
  802.         // }else{
  803.         //     console.log('scrolling down');
  804.         //     el_internalSlider.style.transform = 'translateX(' + (getPageTopLeft(el_internalSlider).left) + 'px)';    
  805.         // }
  806.         
  807.     }
  808.  
  809.     el_stage.onclick = function(e) {
  810.         if (e.target === this){
  811.             currentContent.pause();
  812.             showSFC(false);
  813.             return;
  814.         }
  815.     };
  816. }
  817.  
  818. //////////////////////////////////////////////
  819. // # SFC Control  and Animation Functions # //
  820. //////////////////////////////////////////////
  821.  
  822. //Links functions with page controllers
  823. //eg: making gallery button show/hide gallery
  824. function startInteractions(){
  825.  
  826.     //Apply functionality: click start to show modal and play first media item
  827.     el_startBtn.onclick = function(){
  828.         showSFC(true);
  829.         if(op_auto.checked){
  830.             usedContent[0].select();
  831.         }
  832.     };
  833.  
  834.     el_resumeBtn.onclick = function(){
  835.         showSFC(true);
  836.         currentContent.resize();
  837.         currentContent.play();
  838.         updateAutoplay();
  839.     };
  840.  
  841.     //Apply functionality: click gallery button to show/hide gallery
  842.     el_gallery.style.transform = "translateY(100%)";
  843.     el_galleryBtn.onclick = showGallery;
  844.  
  845.     //Apply functionality: click settings button to show settings
  846.         //Click exit button to exit settings
  847.     el_settingsBtn.onclick = function(){ showSettings(true); };
  848.     el_settingsExit.onclick = function(){ showSettings(false); };
  849. }
  850.  
  851. //Applies default settings
  852. //  • Default settings are on line 5
  853. function applyDefaulSettings(){
  854.  
  855.     var messages = Array();
  856.  
  857.     //Loop whole thread
  858.     if(settingsArray[0] !== true && settingsArray[0] !== false){
  859.         messages.push("Loop whole thread");
  860.     }else{
  861.         op_loopAll.checked = settingsArray[0];
  862.     }
  863.  
  864.     //Play automatically
  865.     if(settingsArray[1] !== true && settingsArray[1] !== false){
  866.         messages.push("Play automatically");
  867.     }else{
  868.         op_auto.checked = settingsArray[1];       
  869.     }
  870.  
  871.     //Shuffle on startup
  872.     if(settingsArray[2] !== true && settingsArray[2] !== false){
  873.         messages.push("Shuffle on startup");
  874.     }else{
  875.         op_shuffle.value = settingsArray[2] ? "Unshuffle" : "Shuffle";
  876.     }
  877.  
  878.     //Play Webms
  879.     if(settingsArray[3] !== true && settingsArray[3] !== false){
  880.         messages.push("Play Webms");
  881.     }else{
  882.         op_webms.checked = settingsArray[3];       
  883.     }
  884.  
  885.     //Show Webm controls
  886.     if(settingsArray[4] !== true && settingsArray[4] !== false){
  887.         messages.push("Show Webm controls");
  888.     }else{
  889.         op_controls.checked = settingsArray[4];      
  890.     }
  891.  
  892.     //Play webm sound
  893.     if(settingsArray[5] !== true && settingsArray[5] !== false){
  894.         messages.push("Play webm sound");
  895.     }else{
  896.         op_playSound.checked = settingsArray[5];       
  897.     }
  898.  
  899.     //Play Gifs
  900.     if(settingsArray[6] !== true && settingsArray[6] !== false){
  901.         messages.push("Play Gifs");
  902.     }else{
  903.         op_gifs.checked = settingsArray[6];
  904.     }
  905.  
  906.     //Gif duration (Seconds)
  907.     if( isNaN(settingsArray[7]) ){
  908.         messages.push("Gif duration (Seconds)");
  909.     }else{
  910.         op_gif_duration.value = settingsArray[7];
  911.     }
  912.  
  913.     //Play Images
  914.     if(settingsArray[8] !== true && settingsArray[8] !== false){
  915.         messages.push("Play Images");
  916.     }else{
  917.         op_imgs.checked = settingsArray[8];
  918.     }
  919.  
  920.     //Image duration (Seconds)
  921.     if( isNaN(settingsArray[9]) ){
  922.         messages.push("Image duration (Seconds)");
  923.     }else{
  924.         op_img_duration.value = settingsArray[9];
  925.     }
  926.     
  927.     //Open Stream4chan on startup
  928.     if(settingsArray[10] !== true && settingsArray[10] !== false){
  929.         messages.push("Open Stream4chan on startup");
  930.     }
  931.  
  932.     //Override Individual Media
  933.     if(settingsArray[11] !== true && settingsArray[11] !== false){
  934.     	messages.push("Override Individual Media");
  935.     }
  936.  
  937.     //Select Media randomly
  938.     if(settingsArray[12] !== true && settingsArray[12] !== false){
  939.     	messages.push("Select Media Randomly");
  940.     }else{
  941.     	op_random.checked = settingsArray[12];
  942.     }
  943.     
  944.     return {
  945.         valid: (messages.length <= 0),
  946.         messages: messages
  947.     };
  948. }
  949.  
  950. //Toggles showing the modal
  951. function showSFC(bool){
  952.  
  953.     function show(){
  954.         document.body.style.overflow = "hidden";
  955.         el_sfc.style.display = "block";
  956.         setTimeout(function(){
  957.             el_sfc.style.opacity = 1;
  958.             magicMouse(true);
  959.         }, 40);
  960.         return true;
  961.     }
  962.  
  963.     function hide(){
  964.         showGallery(false);
  965.         showSettings(false);
  966.         currentContent.pause();
  967.         el_sfc.style.opacity = 0;
  968.         el_sfc.addEventListener("transitionend", function() {
  969.             if(el_sfc.style.opacity == 0){
  970.                 el_sfc.style.display = "none";
  971.                 el_sfc.removeEventListener("transitionend", function(){}, false);
  972.                 document.body.style.overflow = "auto";
  973.                 showMouse(false);
  974.             }
  975.         }, false);
  976.  
  977.         return true;
  978.     }
  979.  
  980.     if(bool === true){
  981.         show();
  982.     }else if (bool === false){
  983.         hide();
  984.     }else if (isShown(el_sfc)){
  985.         show();
  986.     }else{
  987.         hide();
  988.     }
  989.  
  990.     return false;
  991. }
  992.  
  993. //Toggles showing the gallery
  994. function showGallery(bool){
  995.     
  996.  
  997.     function show(){
  998.  
  999.         //Sets internal gallery slider to appropriate width
  1000.         //'if' statements causes this to only fire once
  1001.         updateGallery();
  1002.  
  1003.         el_gallery.style.transform = "translateY(0px)";
  1004.         el_util.style.transform = "translateY(-" + el_gallery.clientHeight + "px)";
  1005.  
  1006.         return true;
  1007.     }
  1008.  
  1009.     function hide(){
  1010.         el_gallery.style.transform = "translateY(100%)";
  1011.         el_util.style.transform = "translateY(0)";
  1012.         return true;
  1013.     }
  1014.  
  1015.     if(bool === true){
  1016.         show();
  1017.     }else if(bool === false){
  1018.         hide();
  1019.     }else if(el_gallery.style.transform == "translateY(100%)"){
  1020.         show();
  1021.     }else{
  1022.         hide();
  1023.     }
  1024.  
  1025.     return false;
  1026. }
  1027.  
  1028. //Toggles showing the settings
  1029. function showSettings(bool){
  1030.  
  1031.     function show(){
  1032.         el_settings.style.display = "flex";
  1033.         return true;
  1034.     }
  1035.  
  1036.     function hide(){
  1037.         el_settings.style.display = "none";
  1038.         return true;
  1039.     }
  1040.  
  1041.     if(bool === true){
  1042.         show();
  1043.     }else if(bool === false){
  1044.         hide();
  1045.     }else if(el_settings.style.display == "none" || el_settings.style.display === ""){
  1046.         show();
  1047.     }else{
  1048.         hide();
  1049.     }
  1050.  
  1051.     return false;
  1052. }
  1053.  
  1054. //Parse through el_sfc, el_settings or el_gallery
  1055. //Return boolean indicating it's state
  1056. function isShown(el){
  1057.     if(el === el_sfc){
  1058.         return !(el_sfc.style.display == "none");
  1059.     }
  1060.  
  1061.     if(el === el_settings){
  1062.         return !(el_settings.style.display == "none" || el_settings.style.display === "");
  1063.     }
  1064.  
  1065.     if(el === el_gallery){
  1066.         return !(el_gallery.style.transform == "translateY(100%)");
  1067.     }
  1068. }
  1069.  
  1070. /////////////////////////////////////////
  1071. // # Media and Media Array Functions # //
  1072. /////////////////////////////////////////
  1073.  
  1074. function previous(){
  1075.  
  1076.     currentContent.previous();
  1077. }
  1078.  
  1079. function next(){
  1080.  
  1081.     currentContent.next();
  1082. }
  1083.  
  1084. //Updates usedContent array, populates gallery and re-adjusts width
  1085. function updateGallery(contentToUse){
  1086.  
  1087.     //Update contents of usedContent array
  1088.     var validParams = contentToUse !== null && contentToUse !== undefined;
  1089.     usedContent = validParams ? contentToUse : getUsedContent();
  1090.  
  1091.     //Recalculate the previous and next media
  1092.     currentContent.getNeighbours();
  1093.  
  1094.     //Change currentContent to closest valid content
  1095.     if(currentContent !== noneSelected && currentContent !== null){
  1096.  
  1097.         if(!canPlay(currentContent)){
  1098.  
  1099.             var newContent = null;
  1100.             var crntContentFound = false;
  1101.  
  1102.             //Find currentContent in allContent array and set newContent to next valid content
  1103.             for(var i = 0; i <= allContent.length; i++){
  1104.  
  1105.             	//Keep i within bounds if settingsArray[0] (loop whole thread)
  1106.             	i = settingsArray[0] ? i%allContent.length : i;
  1107.  
  1108.             	//Terminates loop if out of bounds
  1109.             	if( i === allContent.length)
  1110.             		break;
  1111.  
  1112.             	//If crntContent is reached again, nothing was found
  1113.             	if(crntContentFound && allContent[i] === currentContent)
  1114.             		break;
  1115.  
  1116.             	//If content matches, crntContent has been found
  1117.                 if(allContent[i] === currentContent)
  1118.                     crntContentFound = true;
  1119.  
  1120.                 //If playable content has been found after crntcontent, save to newContent
  1121.                 if(crntContentFound && canPlay(allContent[i])){
  1122.                 	newContent = allContent[i];
  1123.                 	break;
  1124.                 }
  1125.             }
  1126.             
  1127.             //If newContent is null, change to noneSelected
  1128.             newContent = newContent === null ? noneSelected : newContent;
  1129.  
  1130.             newContent.select();
  1131.         }
  1132.     }
  1133.  
  1134.     //Clear contents and width of internalSlider
  1135.     el_internalSlider.innerHTML = "";
  1136.     el_internalSlider.style.width = "-1px";
  1137.  
  1138.     //Add all thumbnails to internalSlider
  1139.     for(var i = 0; i < usedContent.length; i++){
  1140.         el_internalSlider.appendChild(usedContent[i].thumb);
  1141.         el_internalSlider.style.width = (el_internalSlider.clientWidth + (usedContent[i].thumb.clientWidth*1.2) ) + "px";
  1142.     }
  1143.  
  1144.     //Scroll seleceted media into gallery view again
  1145.     currentContent.slideGallery();
  1146.  
  1147.     updateCounter();
  1148.     //Trigger height calculations without changing gallery state
  1149.     // showGallery(isShown(el_gallery));
  1150. }
  1151.  
  1152. //Returns media type when given source
  1153. function mediaType(input){
  1154. 	if(input === undefined){
  1155. 		console.log('Error: mediaType input argument was undefined');
  1156. 	}else if(input === null){
  1157. 		console.log('Error: mediaType input argument was null');
  1158. 	}else{
  1159. 		var temp = input.toString();
  1160.  
  1161. 	    temp = temp.substr(temp.lastIndexOf('.') + 1);
  1162.  
  1163. 	    if(temp == webm) return webm;
  1164. 	    if(temp == gif)   return gif;
  1165. 	    if(temp == png)  return png;
  1166. 	    if(temp == jpg)  return jpg;
  1167. 	}
  1168.  
  1169. 	//Last Resort    
  1170.     return null;
  1171. }
  1172.  
  1173. //Returns if current user settings permits the playing of parsed object
  1174. function canPlay(mediaObj){
  1175.     var objType = mediaObj.type;
  1176.  
  1177.     var canPlay = false;
  1178.  
  1179.     //Return 'checked' value of checkbox corresponding to the object type
  1180.     switch(objType){
  1181.  
  1182.     	case webm:
  1183.     		return op_webms.checked;
  1184.     	case gif:
  1185.     		return op_gifs.checked;
  1186.     	case png:
  1187.     	case jpg:
  1188.     		return op_imgs.checked;
  1189.     	case "SOT":
  1190.     	case "EOT":
  1191.     		return !op_loopAll.checked;
  1192.     		break;
  1193.     	default:
  1194.     		return false;
  1195.     }
  1196.  
  1197.     // return (objType == webm && op_webms.checked) || (objType == gif && op_gifs.checked) || ( (objType == png || objType == jpg) && op_imgs.checked ) || (objType == "SOT" && !op_loopAll.checked) || (objType == "EOT" && !op_loopAll.checked);
  1198. }
  1199.  
  1200. //Applies autoplay based on user settings
  1201. function updateAutoplay(){
  1202.  
  1203.     //Clear timeout to avoid timeout overlaps and
  1204.     //unwanted function calls
  1205.     clearTimeout(globalTimeout);
  1206.  
  1207.     if(currentContent.type == webm){
  1208.  
  1209.         //Loop media (incase auto is not turned on)
  1210.         currentContent.media.loop = true;
  1211.  
  1212.         //If it is turned on, set to false and await end of video
  1213.         if(op_auto.checked){
  1214.             currentContent.media.loop = false;
  1215.             currentContent.media.onended = next;
  1216.         }
  1217.     }else if(currentContent.type == gif){
  1218.  
  1219.         //If auto is checked apply according timeout
  1220.         if(op_auto.checked){
  1221.             globalTimeout = setTimeout(next, op_gif_duration.value*1000);
  1222.         }
  1223.     }else if(currentContent.type == png || currentContent.type == jpg){
  1224.  
  1225.         //If auto is checked apply according timeout
  1226.         if(op_auto.checked){
  1227.             globalTimeout = setTimeout(next, op_img_duration.value*1000);
  1228.         }
  1229.     }
  1230. }
  1231.  
  1232. //Returns array of ALL elemnts. Including SOT, EOT and noneSelected
  1233. //Also sets the onclick method for the thumbnail in the default thread
  1234. function getContent(){
  1235.  
  1236.     var temp = [];
  1237.  
  1238.     var elements = document.getElementsByClassName('fileThumb');
  1239.  
  1240.     //Pushes 'start of thread' placeholder
  1241.     temp.push(SOT);
  1242.  
  1243.     //Loops over all media elements in thread
  1244.     //and pushes them to temp array
  1245.     for(var i = 0; i < elements.length; i++){
  1246.  
  1247.         var vidSrc = elements[i].href;
  1248.         var imgSrc = elements[i].getElementsByTagName('img')[0].src;
  1249.         var id = elements[i].parentNode.parentNode.id;
  1250.  
  1251.         var x = new Media(imgSrc, vidSrc, id);
  1252.  
  1253.         function playThis(){
  1254.         	showSFC(true);
  1255.         	x.select();
  1256.         }
  1257.  
  1258.         temp.push(x);
  1259.  
  1260.         //Change clicking the video element to open SFC
  1261.         var href = elements[i].getElementsByTagName('img')[0].parentNode;
  1262.         href.setAttribute('oldHref', href.href);
  1263.         href.oldHref = href.href;
  1264.         href.setAttribute('imgSrc', imgSrc);
  1265.         href.imgSrc = imgSrc;
  1266.         href.href = imgSrc;
  1267.     	href.onclick = function(event){
  1268.     		inThreadClick(event);
  1269.     	};
  1270.     }
  1271.  
  1272.     //Pushes 'end of thread' placeholder
  1273.     temp.push(EOT);
  1274.  
  1275.     return temp;
  1276. }
  1277.  
  1278. //Returns all media permitted to play by user settings
  1279. function getUsedContent(){
  1280.     var temp = [];
  1281.     var count = 0;
  1282.  
  1283.     for(var i = 0; i < allContent.length; i++){
  1284.         if(canPlay(allContent[i])){
  1285.             temp.push(allContent[i]);
  1286.             temp[count].position = count;
  1287.             count++;
  1288.         }
  1289.     }
  1290.     return temp;
  1291. }
  1292.  
  1293. //Shuffles the usedContent array
  1294. function shuffle(){
  1295.  
  1296. 	//Direction is shuffle/unshuffle
  1297. 	var shuffled = op_shuffle.value === "Unshuffled";
  1298.  
  1299. 	if(!shuffled){
  1300. 		var newUsedContent = [];
  1301. 		var max, min = 0;
  1302.  
  1303. 		//Push a random index from the usedContent into a new array
  1304. 		while(usedContent.length > 0){
  1305.  
  1306. 			//Get random index
  1307. 			max = usedContent.length - 1;
  1308. 			var rand = Math.floor(Math.random() * (max - min + 1)) + min;
  1309.  
  1310. 			//remove one from old and add to new
  1311. 			newUsedContent.push(usedContent.splice(rand, 1)[0]);
  1312.  
  1313. 			//Update positions
  1314. 			newUsedContent[newUsedContent.length - 1].position = newUsedContent.length - 1;
  1315.  
  1316. 		}
  1317. 		
  1318. 		//Overwrite the old and update gallery
  1319. 		usedContent = newUsedContent;
  1320. 		updateGallery(usedContent);
  1321.  
  1322. 		op_shuffle.value = "Unshuffle";
  1323.  
  1324. 	}else {
  1325. 		updateGallery();
  1326. 		op_shuffle.value = "Shuffle";
  1327. 	}
  1328. }
  1329.  
  1330. function getRandom(exclude){
  1331.  
  1332. 	//Array of media with lowest view count
  1333. 	var lowestPlayCount = [];
  1334.  
  1335. 	//Fill array with least viewed content
  1336. 	for(var i = 0; i < usedContent.length; i++){
  1337.  
  1338. 		//If placeholder media -> continue
  1339. 		if(usedContent[i] === SOT || usedContent[i] === EOT || usedContent[i] === exclude){
  1340. 			continue;
  1341. 		}
  1342.  
  1343. 		//If array is empty -> add current media
  1344. 		if(lowestPlayCount.length === 0){
  1345. 			lowestPlayCount.push(usedContent[i]);
  1346. 			continue;
  1347. 		}
  1348.  
  1349. 		//If new lowest found -> erase and push
  1350. 		if(usedContent[i].playcount < lowestPlayCount[0].playcount){
  1351. 			lowestPlayCount = [];
  1352. 			lowestPlayCount.push(usedContent[i]);
  1353. 			continue;
  1354. 		}
  1355.  
  1356. 		//If matching view count -> push
  1357. 		if(usedContent[i].playcount === lowestPlayCount[0].playcount){
  1358. 			lowestPlayCount.push(usedContent[i]);
  1359. 			continue;
  1360. 		}
  1361. 	}
  1362.  
  1363. 	//Select random media from array
  1364. 	var min = 0;
  1365. 	var max = lowestPlayCount.length - 1;
  1366. 	var rand = Math.floor(Math.random() * (max - min + 1)) + min;
  1367.     console.log("Random");
  1368.     console.log(lowestPlayCount);
  1369.     console.log("");
  1370. 	return lowestPlayCount[rand];
  1371. }
  1372.  
  1373. function updateCounter(){
  1374. 	el_counter_first.innerHTML = currentContent.position + 1;
  1375. 	el_counter_second.innerHTML = usedContent.length;
  1376. }
  1377.  
  1378.  
  1379. ///////////////////////
  1380. // # Miscellaneous # //
  1381. ///////////////////////
  1382.  
  1383. //This function is called when a thumbnail in the thread is clicked
  1384. function inThreadClick(event, videoHref){
  1385. 	if(event.target === null)
  1386. 		return;
  1387.  
  1388. 	if(settingsArray[11]){
  1389.  
  1390.     	var hrefContainer = event.target.parentNode;
  1391.     	var currentID = hrefContainer.parentNode.parentNode.id;
  1392.  
  1393.     	setTimeout( function(){
  1394.     		hrefContainer.parentNode.classList.remove("image-expanded");	
  1395.     	}, 0.0001);
  1396.  
  1397.     	for(var j = 0; j < allContent.length; j++){
  1398.     		if(allContent[j].id === currentID){
  1399.     			showSFC(true);
  1400.     			allContent[j].select();
  1401.     		}
  1402.     	}
  1403.         	
  1404. 	}else{
  1405. 		event.target.href = event.target.oldHref;
  1406. 		event.target.click();
  1407. 	}
  1408. }
  1409.  
  1410. function magicMouse(bool){
  1411.  
  1412.     var timer = setTimeout(function(){},0);
  1413.  
  1414.     var showMouse = function(){
  1415.         console.log("showing");
  1416.         el_magicMouse.style.display = "none";
  1417.     }
  1418.  
  1419.     var hideMouse = function(){
  1420.         console.log("hiding");
  1421.         el_magicMouse.style.display = "block";
  1422.         document.body.style.cursor = "auto";
  1423.     }
  1424.  
  1425.     var resetTimer = function(){
  1426.         console.log("resetting");
  1427.  
  1428.         showMouse();
  1429.         clearTimeout(timer);
  1430.         timer = setTimeout(hideMouse, 500);
  1431.     }
  1432.  
  1433.     if(bool === true){
  1434.         document.body.onmousemove = resetTimer;
  1435.     }else{
  1436.         document.body.onmousemove = null;
  1437.     }
  1438. }
  1439.  
  1440. function getPageTopLeft(el) {
  1441.     var rect = el.getBoundingClientRect();
  1442.     var docEl = document.documentElement;
  1443.     return {
  1444.         left: rect.left + (window.pageXOffset || docEl.scrollLeft || 0),
  1445.         top: rect.top + (window.pageYOffset || docEl.scrollTop || 0)    
  1446.     };
  1447. }
  1448.  
  1449. //Convert css style strings to integer values (top, right, bottom and left)
  1450. function getCSSValues(styleStr){
  1451.  
  1452. 	var values = [];
  1453.  
  1454. 	do{
  1455. 		//Find match 
  1456. 		var match = styleStr.match("\\d+[a-zA-Z]{2}");
  1457. 		var foundString = match[0];
  1458.  
  1459. 		//Remove all characters before and including the match
  1460. 		styleStr = styleStr.substr( match.index + foundString.length, styleStr.length - 1);
  1461.  
  1462. 		values.push(parseInt(foundString, 10));
  1463.  
  1464. 	}while(styleStr.length > 3); //If below 3 than it's not a valid style value
  1465.  
  1466. 	return values;
  1467. }