stream4chan

Click the button to stream all webms in a 4chan thread
目前為 2016-10-19 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         stream4chan
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Click the button to stream all webms in a 4chan thread
// @author       Lauchlan105
// @match        http://boards.4chan.org/*/thread/*
// @grant        none
// ==/UserScript==


//Settings Header
countStep = 1;
modalSettings_auto = '<li class="SFC-li"><input id="stream4chan-auto?" class="SFC-input" type="checkbox" checked> Play Automatically</li>';
modalSettings_webms = '<li class="SFC-li"><input id="stream4chan-webms?" class="SFC-input" type="checkbox" checked> Play Webms</li>';
modalSettings_gifs = '<li class="SFC-li"><input id="stream4chan-gifs?" class="SFC-input" type="checkbox" checked> Play Gifs</li>';
modalSettings_loopAll = '<li class="SFC-li"><input id="stream4chan-loopAll?" class="SFC-input" type="checkbox" checked> Loop whole thread</li>';
modalSettings_shuffle = '<li class="SFC-li" style="display: none;"><input id="stream4chan-shuffle?" class="SFC-input" type="checkbox"> Randomize</li>';
modalSettings_duration = '<li class="SFC-li"><input id="stream4chan-duration?" class="SFC-input" type="number" min="' + countStep + '" max="60" value="3" step="' + countStep + '"> Gif Duration (Seconds)</li>';
    modalSettings = '<ul id="stream4chan-settings" class="SFC-settings">' + modalSettings_auto + modalSettings_webms + modalSettings_gifs + modalSettings_loopAll + modalSettings_shuffle + modalSettings_duration + '</ul>';

//Content Table
modalContent = '<div id="stream4chan-content" class="SFC-content"></div>';
modalContent_Left = '<th id="stream4chan-prev" class="SFC_th_left SFC_arrow"></th>';
modalContent_Right = '<th id="stream4chan-next" class="SFC_th_right SFC_arrow"></th>';
modalContent_Mid = '<th class="SFC_th_mid">' + modalSettings + modalContent + '</th>';
    modalTable = '<table id="stream4chan-table" class="SFC_table"><tr class="SFC_table_row">' + modalContent_Left + modalContent_Mid + modalContent_Right + '</tr></table>';

//Main Div
startBtn = '<input id="stream4chan-start" style="margin-left:1em;" type="button" value="Run Slideshow" >';
resumeBtn = '<input id="stream4chan-continue" style="margin-left:1em;" type="button" value="Resume Slideshow" >';
modalMain = '<div id="stream4chan-modal" class="SFC-modal">' + modalTable + '</div>';

//CSS
settingsCSS = '.SFC-settings { opacity: 0.35; display: inline-block; list-style-type: none; width:100%; top: 0; height: 25px; margin: 0em; padding: 0em } .SFC-settings:hover { opacity: 1; }';
settingsLiCSS = '.SFC-li { display: inline-block; padding-left: 1em; color:#9d9393;}';
settingsInputCSS = '.SFC-input { margin: 0em; padding: 0em; padding-top: 0.3em; width: auto;  }';
AllSettingsCSS = settingsCSS + settingsLiCSS + settingsInputCSS;

//table
tableCSS = '.SFC_table { max-height: 100vh; min-height: 100vh; max-width: 100vw; min-width: 100vw; } ';
tableRowCSS = '.SFC_table_row { vertical-align: top; }';
arrowCSS = '.SFC_arrow { width: 15px; padding: 15px; height: 100%; background-image: url("http://www.dsetechnology.co.uk/images/disclose-arrow.png"); background-repeat: no-repeat; background-position: center; background-color: rgba(255, 255, 255, 0); background-size: contain; }';
leftCSS = '.SFC_th_left { transform: rotate(180deg); }' + '.SFC_th_left:hover { background-color:rgba(255, 255, 255, 0.6); }';
rightCSS = '.SFC_th_right {  }' + '.SFC_th_right:hover { background-color:rgba(255, 255, 255, 0.6); }';
midCSS = '.SFC_th_mid { height: 100vh;  }';
allTableCSS = tableCSS + tableRowCSS + arrowCSS + leftCSS + rightCSS + midCSS;

mediaCSS = '.SFC-media { width: 100%; }';
contentCSS = '.SFC-content { display: block; color: white; }';
modalCSS = ' .SFC-modal { display: none; height: 100vh; width: 100vw; position: fixed; z-index: 1; left: 0; top: 0; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: inset 0px 0px 71px 41px rgba(0,0,0,0.75); -moz-box-shadow: inset 0px 0px 71px 41px rgba(0,0,0,0.75); box-shadow: inset 0px 0px 71px 41px rgba(0,0,0,0.75);}';
allModalCSS = mediaCSS + contentCSS + modalCSS;

allCSS = '<style>' + allModalCSS + allTableCSS + AllSettingsCSS + '</style>';

//Media Elements
gifDiv = '<img id="stream4chan-gif" class="SFC-media" src="" alt="Stream4chan - Gif not loaded!">';
webmDiv = '<video id="stream4chan-webm" class="SFC-media" src="" controls autoplay></video>';



//Main
(function() {
    injectNewElements();
    initVars();

    currentVideo = 0;
    window.onclick = function(event){if (event.target.id == 'stream4chan-content') { end(); }};
    window.onresize = function(){  };

    //event for key strokes
    document.onkeyup = function(event){

        //left arrow
        if(event.keyCode == 37 && document.getElementById('stream4chan-modal').style.display == 'block'){
            console.log(document.getElementById('stream4chan-modal').style.display);
            previousVideo();

        //right arrow
        }else if(event.keyCode == 39 && document.getElementById('stream4chan-modal').style.display == 'block'){
            console.log(document.getElementById('stream4chan-modal').style.display);
            nextVideo();

        //Escape key
        }else if(event.keyCode == 27 && document.getElementById('stream4chan-modal').style.display == 'block'){
            end();

        //W key
        }else if(event.keyCode == 87 && document.getElementById('stream4chan-modal').style.display == 'block'){
            playWebms.checked = !playWebms.checked;

        //G key
        }else if(event.keyCode == 71 && document.getElementById('stream4chan-modal').style.display == 'block'){
            playGifs.checked = !playGifs.checked;

        //A key
        }else if(event.keyCode == 65 && document.getElementById('stream4chan-modal').style.display == 'block'){
            autoplay.checked = !autoplay.checked;

        //L key
        }else if(event.keyCode == 76 && document.getElementById('stream4chan-modal').style.display == 'block'){
            loopAll.checked = !loopAll.checked;

        //R key
        }else if(event.keyCode == 82 && document.getElementById('stream4chan-modal').style.display == 'block'){
            random.checked = !random.checked;
        }else{
            //console.log(event.keyCode);
        }
    };
    document.onkeydown = function(event){
        //up arrow
        if(event.keyCode == 38 && document.getElementById('stream4chan-modal').style.display == 'block'){
            val = parseInt(duration.value, 10);
            max = parseInt(duration.max, 10);
            val += countStep;
            if(val > max){ val = max; }
            duration.value = val;

        //Down arrow
        }else if(event.keyCode == 40 && document.getElementById('stream4chan-modal').style.display == 'block'){
            val = parseInt(duration.value, 10);
            min = parseInt(duration.min, 10);
            val -= countStep;
            if(val < min){ val = min; }
            duration.value = val;
        }
    };
    
    startButton.onclick = function(){ start(); };
    resumeButton.onclick = function(){ initVars(); start(currentVideo, media.time); };
    autoplay.onclick = function(){ updateAutoplay(); };
    shuffle.onclick = function(){ initVars(); };
    prevBtn.onclick = function(){ previousVideo(); };
    nextBtn.onclick = function(){ nextVideo(); };
})();

//insert elements to html doc
function injectNewElements(){
    //add start slideshow button to navs
    var nav = document.getElementsByClassName("navLinks desktop");
    var i;
    if(nav){
        for(i = 0; i < nav.length; i++){
            nav[i].innerHTML += startBtn + resumeBtn;
        }
    }

    //add the modal to thread
    var target = document.getElementsByClassName('thread');
    for(i = 0; i < target.length; i++){
        target[i].innerHTML += modalMain + allCSS;
    }
}

//Assign the elemens that don't change to vars
function initVars(){
    modal = document.getElementById('stream4chan-modal');
    //if(!modal){ console.log('modal not found!');}

    startButton = document.getElementById('stream4chan-start');
    //if(!startButton){ console.log('Start button not found!');}

    resumeButton = document.getElementById('stream4chan-continue');
    //if(!resumeButton){ console.log('Resume button not found!');}

    table = document.getElementById('stream4chan-table');
    //if(!table){ console.log('table not found!');}

    prevBtn = document.getElementById('stream4chan-prev');
    //if(!prevBtn){ console.log('"Previous" button not found!');}

    content = document.getElementById('stream4chan-content');
    //if(!content){ console.log('content not found!');}

    nextBtn = document.getElementById('stream4chan-next');
    //if(!nextBtn){ console.log('"Next" button not found!');}

    media = document.getElementById('stream4chan-webm');
    if(!media){ media = document.getElementById('stream4chan-gif'); }
    //if(!media){ console.log('"Media" could not be found!'); }

    //Settings
    settings = document.getElementById('stream4chan-settings');
    //if(!settings){ console.log('"Settings" could not be found!'); }

    autoplay = document.getElementById('stream4chan-auto?');
    //if(!autoplay){ console.log('Autoplay checkbox not found!');}

    playWebms = document.getElementById('stream4chan-webms?');
    //if(!playWebms){ console.log('Player Webms input not found!');}

    playGifs = document.getElementById('stream4chan-gifs?');
    //if(!playGifs){ console.log('Player Gifs input not found!');}

    loopAll = document.getElementById('stream4chan-loopAll?');
    //if(!loopAll){ console.log('"loopAll" could not be found!'); }

    random = document.getElementById('stream4chan-shuffle?');
    //if(!random){ console.log('"random" could not be found!'); }

    playSelected = document.getElementById('stream4chan-playSelected?');
    //if(!playSelected){ console.log('"play selected" could not be found!'); }

    duration = document.getElementById('stream4chan-duration?');
    //if(!duration){ console.log('Gif duration input not found!');}

    //Misc
    currentTimeout = setTimeout(function(){}, (0));
    contentHrefs = document.getElementsByClassName("fileThumb");
    if(random.selected){ shuffle(contentHrefs); }
}

//start show
function start(position, time) {
    initVars();
    displayModal();

    currentTime = 0;
    currentVideo = 0;
    if(position){ currentVideo = position - 1; }
    if(time){ currentTime = time; }

    nextVideo();
}

//end show
function end() {
    initVars();
    modal.style.display = "none";

    var videoToPause = document.getElementById("stream4chan-webm");

    if(media){ currentTime = media.currentTime; }
    if(videoToPause){ videoToPause.pause(); }
    clearTimeout();

    var body = document.getElementsByTagName('body');
    for(i = 0; i < body.length; i++){
        if(body[i]){ body[i].style.overflow = "scroll"; }
    }
}

//Display the contents
function displayModal(){
    content.innerHTML = '';
    modal.style.display = "block";

    calcHeight();

    content.innerHTML = '<h1>No Video is Playing</h1>';

    var body = document.getElementsByTagName('body');
    for(i = 0; i < body.length; i++){
        if(body[i]){ body[i].style.overflow = "hidden"; }
    }
}

//Loads element based on URL
function displayVideo(href){
    filetype = getFiletype(href);
    media = document.getElementById("stream4chan-" + filetype);
    //create media if it's not there
    if(!media){
        if(filetype == 'gif'){
            content.innerHTML = gifDiv;
        }else if(filetype == 'webm'){
            content.innerHTML = webmDiv;
        }
        media = document.getElementById("stream4chan-" + filetype);
    }

    //change to new source, readjust the heigh, resume from last place
    media.src = href;
    initVars();
    calcHeight();
    if(filetype == 'webm'){
        media.onplay = function(){ calcHeight(); };
        media.currentTime = currentTime;
    }
}

//play next video
function nextVideo(){
    initVars();

    //If out of range
    if(0 > currentVideo || currentVideo > contentHrefs.length - 1){
        if(loopAll.checked){
            if(currentVideo < 0){
                currentVideo = contentHrefs.length - 1;
            }else{
                currentVideo = 0;
            }
        }else{
            console.log('out of range');
            end();
            displayModal();
            return;
        }
    }

    //Get filetype -> If its a gif and gifs are asked not to play -> return
    filetype = getFiletype(contentHrefs[currentVideo]);

    //skip if it can't play the current file
    if(!canPlay(currentVideo)){
       currentVideo++;
       nextVideo();
       return;
    }

    displayVideo(contentHrefs[currentVideo]);
    updateAutoplay();

    // increment the currentVideo
    currentVideo++;
}

//call next video when valid previous video is found
function previousVideo(){
    initVars();

    currentVideo--;
    while(currentVideo > -1){
        if(canPlay(currentVideo--)){ break; }
    }
    nextVideo();
}

//Returns true if current video is gif and gifs are selected etc
function canPlay(arrPosition){
    var currType = getFiletype(contentHrefs[arrPosition]);
    return !((currType == "gif" && !playGifs.checked) || (currType == "webm" && !playWebms.checked));
}

//Update timeouts and listeners to loop media
function updateAutoplay(){
    initVars();
    if(media){
        filename = getFiletype(media.src);

        if(filename == 'gif'){
            if(autoplay.checked){
                clearTimeout();
                currentTimeout = setTimeout(function(){
                    nextVideo();
                }, (duration.value*1000));
            }else{
                clearTimeout();
            }
        }else if(filename == 'webm'){
            media.loop = !autoplay.checked;
            clearTimeout();
            media.removeEventListener('ended', function(){ currentTime = 0; nextVideo();}, false);
            if(autoplay.checked){
                media.addEventListener('ended', function(){ currentTime = 0; nextVideo();}, false);
            }
        }else{
            console.log("Not a valid type! call to update autoplay");
        }
    }
    calcHeight();
}

//Clear Timeout functions to avoid related function calls
function clearTimeout(){
    if(currentTimeout){
        while(currentTimeout > 0){
            currentTimeout--;
            window.clearTimeout(currentTimeout);
        }
    }
}

//Return file extension type
function getFiletype(input){
    href = input.toString();
    return href.substr(href.lastIndexOf('.') + 1);
}

//Recalc height of content div to fit properly
function calcHeight(){
    initVars();
    content.style.height = window.innerHeight - settings.offsetHeight + "px";

    if(media){
        if(media.offsetHeight > (window.innerHeight - settings.offsetHeight)){
            media.style.height = '100%';
            media.style.width = 'auto';
        }

        if(media.offsetWidth > (window.innerWidth - (prevBtn.offsetWidth + nextBtn.offsetWidth))){
            media.style.width = '100%';
            media.style.height = 'auto';
        }
    }
}

//Shuffles the array of hrefs
function shuffle(input) {
    for (var i = input.length-1; i >=0; i--) {
        var randomIndex = Math.floor(Math.random()*(i+1));
        var itemAtIndex = input[randomIndex];

        input[randomIndex] = input[i];
        input[i] = itemAtIndex;
    }
}