userscript.js

// ==UserScript==
// @name         Erome Video Cloner
// @namespace    http://tampermonkey.net/
// @version      0.9.704
// @description  clone videos in an erome album, play multiple & side-by-side!
// @author       throwinglove23
// @license      MIT
// @match        https://www.erome.com/a/*
// @match        http://www.erome.com/a/*
// @match        https://www.erome.com/*
// @exclude      http://www.erome.com/a/*/edit
// @exclude      https://www.erome.com/a/*/edit
// @icon         https://www.erome.com/favicon-32x32.png
// @grant        none
// ==/UserScript==
/* jshint esversion: 8 */ 

function mainFunction() {
    'use strict';
    // removing default seek functions
    document.onkeydown = null;
    window.addEventListener('keydown', function(e) {
        // avoiding space which scrolls down to allow pausing
      if(e.keyCode == 32) {
          
        e.preventDefault();
      }
});
    const userRow = document.querySelector('.username');
    const cleanseBtn = document.createElement('button');
    // if (userRow == null || document.querySelector('video') == null)
    // {
    //     return;
    // }
    cleanseBtn.classList.add('btn', 'btn-grey', 'btn-sm', 'url-btn');
    cleanseBtn.textContent = 'SHOW URLS';
    userRow.appendChild(cleanseBtn);
    cleanseBtn.addEventListener('click', urlShow);
    if (document.querySelectorAll('.video').length>0)
    {
        const infoRow = document.querySelector('.user-info.text-right');
        const spanItem = document.createElement('span');
        //spanItem.classList.add('btn', 'mr-5', 'btn-grey', 'cloner');
        const cloneIcon = document.createElement('i');
        if (document.querySelectorAll('#legend a').length > 0)
            {
                const legendBtn = document.createElement('a');
                legendBtn.classList.add('btn', 'btn-grey', 'btn-sm', 'mr-5');
                legendBtn.href='#legend';
                legendBtn.textContent = 'GO TO LEGEND';
                spanItem.append(legendBtn);
            }
        infoRow.insertBefore(spanItem, infoRow.firstElementChild);
    
        //spanItem.addEventListener('click', cloneFunction);
    }
    // adding transitions to legend links if exists
    replaceAdWithButtons();

    // Your code here...
}

function copySourceFromAlbum()
{
    const albums = Array.from(document.getElementsByClassName('album'));
    albums.forEach(async function(album)
        {
            const hr = album.querySelector('.album-link').href;
            const hdr = await fetch(hr);
            const data = await hdr.text();
            var parser = new DOMParser();
            var doc = parser.parseFromString(data, 'text/html');
            album.querySelector('.album-thumbnail').style.objectFit = 'cover';
            album.style.maxHeight = '200px';
            if (doc.querySelector('source') == null)
            {
                return;
            }
            const vidSrc = doc.querySelector('source').src;
            async function copyFxn()
            {
                await navigator.clipboard.writeText(vidSrc);
            }
            album.insertAdjacentHTML("afterbegin", '<button class="copy-link-btn btn btn-sm btn-pink" style="margin-left: 2px;width: fit-content;position: relative;z-index: 30;bottom: 61px;font-size: 1.5rem;padding: 0;">COPY</button>');
            album.querySelector('.copy-link-btn').onclick = copyFxn;
            const btnCopy = album.querySelector('.copy-link-btn');
            copyOnHover(btnCopy);
        });
}

function copyOnHover(btn)
{
        btn.style.opacity=0;
      btn.closest('.album').addEventListener('mouseover', function()
        {
            btn.style.opacity=1;
        });
        btn.closest('.album').addEventListener('mouseout', function()
        {
            btn.style.opacity=0;
        });
}

function checkForChapters()
{
    if (document.querySelector('video') == null)
    {
        return;
    }
    const legend = document.querySelector('#legend');
    // if no text nodes/chapters found in legend, return ;
    if (!legend || legend.children.length < 2)
    {
        return;
    }
    const nodeTypes = Array.from(legend.childNodes).filter(function(item)
                                                       {
                                                           return item.nodeType === 3 && item.textContent.trim() != '';
                                                       })
                                                       .map(item => item.textContent.trim());
    const startingIndex = nodeTypes.indexOf('CHAPTERS BELOW');
    if (startingIndex == -1)
    {
        return;
    }
    else
    {
        document.querySelector('#bubble').style.width = 'min-content';
        document.querySelector('#bubble').insertAdjacentHTML("beforeend", '<button class="btn btn-sm btn-pink chapter-btn mb-5">ADD CHAPTERS</button>');
        const chapterBtn = document.querySelector('.chapter-btn');
        chapterBtn.addEventListener('click', function()
        {
            parseChapters(nodeTypes.slice(startingIndex+1));
            chapterBtn.textContent == 'REMOVE CHAPTERS' ? chapterBtn.textContent = 'ADD CHAPTERS' : chapterBtn.textContent = 'REMOVE CHAPTERS';
        });
    }
}

function parseChapters(chapterInfo)
{
    document.querySelector('.vjs-chapters-button.vjs-control').classList.toggle('vjs-hidden');
    let listTimes = [];
    let listNames = [];
    // https://stackoverflow.com/questions/9640266/convert-hhmmss-string-to-seconds-only-in-javascript
    function timeToSeconds(str)
    {
        var timeElements = str.split(':'),
            seconds = 0, minutes = 1;
    
        while (timeElements.length > 0)
        {
            seconds += minutes * parseInt(timeElements.pop(), 10);
            minutes *= 60;
        }
    
        return seconds;
    }
    for (let i = 0; i<chapterInfo.length;i++)
        {
            listTimes.push(timeToSeconds(chapterInfo[i].split('-')[0]));
            listNames.push(chapterInfo[i].split('-')[1]);
        }
    const chapterBar = document.querySelector('.vjs-chapters-button .vjs-menu-content');
    if (chapterBar.children.length > 1)
    {
        chapterBar.innerHTML = '<li class="vjs-menu-title" tabindex="-1">Chapters</li>';
    }
    for (let i = 0; i< listTimes.length;i++)
        {
            chapterBar.insertAdjacentHTML("beforeend", `<li class="vjs-menu-item" onclick='function moveTo(){document.querySelector("video").currentTime=${listTimes[i]}} moveTo();' tabindex="-1">${listNames[i]}</li>`);
        }
}

function urlShow()
{
    if (document.querySelector('video') == null)
    {
        return;
    }
    const urlBtn = document.querySelector('.url-btn');
    urlBtn.textContent == 'SHOW URLS' ? urlBtn.textContent = 'HIDE URLS': urlBtn.textContent = 'SHOW URLS';
    const vids = document.querySelectorAll('.video');
    if (document.querySelector('.form-url') == null)
    {
        const area = document.querySelector('.clearfix').previousElementSibling.parentElement;
        area.insertAdjacentHTML("afterbegin", "<form class='form-url hidden'><input type='url' required id='video-input' style='width:430px' placeholder='enter video url(s) separated by comma ,'><button class='btn btn-sm btn-pink btn-add-url'>ADD</button></form>");
        const form = document.querySelector('.form-url').addEventListener('submit', function(e)
               {
                    e.preventDefault();
                });
        const btn = document.querySelector('.btn-add-url');
        btn.addEventListener('click', addVideo);
    }
    vids.forEach(vid =>
    {
        const src = vid.querySelector('video').firstElementChild.src;
        if (vid.firstChild.tagName != 'A')
        {
            const anc = document.createElement('a');
            anc.classList.add('video-url', 'hidden');
            anc.textContent = 'COPY LINK';
            vid.insertAdjacentElement("afterbegin", anc);
            anc.onclick = async function()
            {
                await navigator.clipboard.writeText(src);
            };
        }
    });

    function addVideo()
        {
            const input = document.getElementById('video-input');

            if (input.value == '' || input.value.length < 50 || input.value == null)
            {
                console.log("no valid input");
                return;
            }
            else
            {
                let vidURLs = input.value.split(',');
                vidURLs.forEach(url => createVid(url));
            }
        }

    function createVid(sourceURL)
        {
            let posterURL1 = sourceURL.replace('v', 's');
            let posterURL2 = posterURL1.replace('_720p', '');
            let posterURL = posterURL2.replace('mp4', 'jpg');
            const mediaDiv = document.createElement('div');
            const videoDiv = document.createElement('div');
            mediaDiv.classList.add('media-group');
            videoDiv.classList.add('video');
   
            const mainMedia = document.querySelector('.media-group');
            mainMedia.parentElement.appendChild(mediaDiv);
            mediaDiv.appendChild(videoDiv);
            const video = document.createElement('video');
            video.classList.add('video-js', 'vjs-16-9');
            video.controls = true;
            video.poster = posterURL;
       
            const src = document.createElement('source');
            src.setAttribute('src', sourceURL);
            video.appendChild(src);
            videoDiv.appendChild(video);
            var player = videojs(video);
            video.preload="none";
            allowPToPause(video);


            document.querySelector('.sidebyside-btn').click();
            document.querySelector('.sidebyside-btn').click();
        }


    if (urlBtn.textContent == 'SHOW URLS')
    {
        const links = document.querySelectorAll('.video-url');
        links.forEach(anc =>
        {
            anc.classList.add('hidden');
        });
    }
    else
    {
        const links = document.querySelectorAll('.video-url');
        links.forEach(anc =>
        {
            anc.classList.remove('hidden');
        });
    }
    document.querySelector('.form-url').classList.toggle('hidden');
                                                
}


function addTransitionToID()
{
    const legendLinks = document.querySelectorAll('#legend a');
    legendLinks.forEach(link => 
    {
            const idText = link.textContent.trim();
            const parsedInt = parseInt(idText.substring(1), 10);
            const textInLink = link.nextSibling;
            const idEl = document.getElementById(parsedInt);
            if (Number.isNaN(parsedInt))
            {
                return;
            }
            if (textInLink.nodeType == 3)
            {
                idEl.title=textInLink.textContent.trim();
            }
    });
    legendLinks.forEach(link => link.onclick= function() 
        {
            const idText = link.textContent.trim();
            const parsedInt = parseInt(idText.substring(1), 10);
            const idEl = document.getElementById(parsedInt);
            if (!Number.isNaN(parsedInt))
            {
                link.href=`#${parsedInt}`;
            }
            idEl.style.transition = 'all 0.3s ease-in-out';
            idEl.style.opacity = '0.4';
            function backTo(elem)
                {
                    elem.style.opacity='1';
                }
            setTimeout(backTo, 400, idEl);
        });
}

function addProperID()
{
    let count = 0;
    document.querySelectorAll('.media-group img.img-front, .media-group video').forEach
    (item => 
        {
            count++;
            item.closest('.media-group').removeAttribute('id');
            item.closest('.media-group').id=count;
        }
    );
}

function playerSeekables()
{
    var btn = document.createElement('button');
    var backwardIcon = document.createElement('i');
    backwardIcon.classList.add('fas', 'fa-forward', 'fa-flip-horizontal');
    btn.append(backwardIcon);
    btn.title = "Back 10 seconds";
    btn.addEventListener('click', seekNeg);
        function seekNeg()
        {
            this.closest('.video').querySelector('video').currentTime -= 10;
        }
    function seekPos()
        {
            this.closest('.video').querySelector('video').currentTime += 10;
        }
    var btn2 = document.createElement('button');
    var forwardIcon = document.createElement('i');
    forwardIcon.classList.add('fas', 'fa-forward');
    btn2.append(forwardIcon);
    btn2.title = 'Forward 10 seconds';
    btn2.onclick = seekPos;
    var flipIcon = document.createElement('i');
    flipIcon.classList.add('fas','fa-sort', 'fa-rotate-90', 'fa-2x', 'ml-10');
    const flipBtn = document.createElement('button');
    flipBtn.append(flipIcon);
    flipBtn.classList.add('mirror-btn');
    flipBtn.onclick = flip;

    return {btn, btn2, flipBtn};
   
}

function flip()
        {
            let flipper = this.closest('.mirror-btn');
            if (this.closest('.mirror-btn').classList.contains('flipped'))
                {
                    this.closest('.video').querySelector('video').style.transform = '';
                    flipper.classList.toggle('flipped');
                    return;
                }
            this.closest('.video').querySelector('video').style.transform = 'rotateY(170deg)';
            flipper.classList.add('flipped');
        }

function replaceAdWithButtons()
{
    const ad = document.getElementById('bubble');
    ad.removeAttribute('href');
    ad.textContent = '';
    ad.style.display='block';
    const sbsBtn = document.createElement('button');
    sbsBtn.textContent = 'SBS: OFF';
    const clonerBtn = document.createElement('button');
    clonerBtn.textContent = 'CLONER: OFF';
    sbsBtn.classList.add('btn', 'btn-sm', 'btn-pink', 'sidebyside-btn', 'mr-5', 'mb-5');
    clonerBtn.classList.add('btn', 'btn-sm', 'btn-pink', 'cloner', 'mb-5');
    sbsBtn.addEventListener('click', sideBySide);
    clonerBtn.addEventListener('click', cloneFunction);
    
    ad.append(sbsBtn, clonerBtn);
}

function allowPToPause(videoToAllow)
{
    videoToAllow.parentElement.onkeydown = function(event){
        if(event.key == 'p' || event.key == ' ')
        {
            videoToAllow.parentElement.querySelector('.vjs-play-control').click();
        }
        else if (event.key == 'ArrowRight')
        {
            videoToAllow.currentTime+=10;
        }
        else if (event.key == 'ArrowLeft')
        {
            videoToAllow.currentTime-=10;
        }
        else if (event.key == 'r')
        {
            const rng = Math.random() * (videoToAllow.duration - 1);
            videoToAllow.currentTime = rng;
        }
        else if (event.key == 'x')
        {
            if (videoToAllow.parentElement.querySelector('.mirror-btn')!= null)
            {
               videoToAllow.parentElement.querySelector('.mirror-btn').click();
               return;
            }
            if (videoToAllow.classList.contains('flipped'))
            {
                videoToAllow.style.transform = '';
                videoToAllow.classList.remove('flipped');
            }
            else
            {
                videoToAllow.style.transform = 'rotateY(173deg)';
                videoToAllow.classList.add('flipped');
            }
        }
        else if (event.key == 'f')
        {
            videoToAllow.parentElement.querySelector('.vjs-fullscreen-control').click();
        }
        else if (!isNaN(event.key) && event.key != ' ')
        {
            videoToAllow.currentTime = (videoToAllow.duration/10) * (event.key);
        }
        else if (event.key == 'z')
        {
            if (!videoToAllow.classList.contains('zoomed'))
            {
                videoToAllow.style.scale = 1.6;
            }
            else
            {
                videoToAllow.style.scale= 1;
            }
            videoToAllow.classList.toggle('zoomed');
        }
        else if (event.key == 't')
        {
            if (!document.querySelector('.sea-css'))
            {
                const css = document.createElement('link');
                css.href='https://unpkg.com/@videojs/themes@1/dist/sea/index.css';
                css.classList.add('sea-css');
                css.rel='stylesheet';
                document.head.appendChild(css);
            }
            videoToAllow.parentElement.classList.toggle('vjs-theme-sea');
        }
    };
}

function playerVersion(data)
{
        const mediaDiv = document.createElement('div');
        const videoDiv = document.createElement('div');
        mediaDiv.classList.add('media-group');
        videoDiv.classList.add('video');

        const mainMedia = document.querySelector('.media-group');
        mainMedia.parentElement.appendChild(mediaDiv);
        mediaDiv.appendChild(videoDiv);
        const video = document.createElement('video');
        video.classList.add('video-js', 'vjs-16-9');
        video.controls = true;
        video.poster=data.bi;
    
        const src = document.createElement('source');
        src.setAttribute('src', data.urL);
        video.appendChild(src);
        videoDiv.appendChild(video);
        var player = videojs(video);
        video.preload="none";
        
        let btn = playerSeekables().btn;
        let btn2 = playerSeekables().btn2;
        let flipper = playerSeekables().flipBtn;
        mediaDiv.querySelector('.vjs-control-bar').insertAdjacentElement("afterbegin", btn);
        mediaDiv.querySelector('.vjs-play-control').insertAdjacentElement("afterend", btn2);
        mediaDiv.querySelector('.vjs-fullscreen-control').insertAdjacentElement("beforebegin", flipper);
        
        allowPToPause(video);
}

function getVidData(vidDiv)
{
    const urL = vidDiv.querySelector('.video video source').src;
    var img = vidDiv.querySelector('.vjs-poster');
    var bi = img.style.backgroundImage.slice(4, -1).replace(/"/g, "");
    
    return {urL, bi};
}
// remove original videos and get their poster+vid url
function removeWithData(vidDiv)
{
    let data = getVidData(vidDiv);
    vidDiv.remove();
    return data;
}

function videoCleanseReplace()
{
    const vidDivs = document.getElementsByClassName('video');
    console.log("started cleansing");
    Array.from(vidDivs).forEach(vidDiv =>
    {
        let data = removeWithData(vidDiv);
        playerVersion(data);
    });
    //showing message on load
    const messageDiv = document.querySelector('#user_message');
    messageDiv.textContent = 'videos replaced';
    setTimeout(() => {
        messageDiv.style.display='none';
    }, 5000);
    // deleting empty first video section
     Array.from(document.querySelectorAll('.video-lg')).forEach(lgVid => lgVid.parentElement.remove());
    
    
}

function sideBySide()
{
    if (document.querySelectorAll('.media-group.col-sm-6').length > 0)
    {
        const sideVideos = Array.from(document.querySelectorAll('.media-group.col-sm-6'));
        sideVideos.forEach(group => 
        {
            group.classList.remove('col-sm-6');
        });
        document.querySelector('a .sidebyside-btn').textContent = 'SBS: OFF';
    }
    else
    {
        const sideVideos = Array.from(document.querySelectorAll('.media-group.col-sm-6'));
        sideVideos.forEach(group => 
        {
            group.classList.remove('col-sm-6');
        });
        const groups = Array.from(document.querySelectorAll('.media-group'));
        groups.forEach(group => 
        {
           group.classList.add('col-sm-6');
        });
        document.querySelector('a .sidebyside-btn').textContent = 'SBS: ON';
        
    }
}

function showMessage()
{
    if (document.querySelector('.video') == null)
    {
        return;
    }
    const messageDiv = document.querySelector('#user_message');
    messageDiv.textContent = 'videos replaced + multi-play ON';
    messageDiv.style.display='block';
    messageDiv.style.width="400px";
    setTimeout(() => {
        messageDiv.style.display='none';
        messageDiv.style.width="200px";
    }, 1500);
}

// adding clone button to each video
function cloneFunction()
{
    if (document.querySelector('.video video') == null)
    {
        console.log("no videos");
        return;
    }
    // pressing button again up top should clear the clone buttons if second time pressing it
    if (document.getElementsByClassName('clone-btn').length > 0)
    {
        const allButtons = document.querySelectorAll('.clone-btn');
        allButtons.forEach(button => button.remove());
        document.querySelector('a .cloner').textContent = 'CLONER: OFF';
        return;
    }
    const videoDivs = document.querySelectorAll('.video');
    videoDivs.forEach(videoDiv => 
    {
        const cloneBtn = document.createElement('button');
        cloneBtn.style.position = 'absolute';
        cloneBtn.style.top = '0px';
        cloneBtn.style.zIndex = 1;
        cloneBtn.style.left="94.75%";
        if (videoDiv.parentElement.classList.contains('col-sm-6'))
        {
            cloneBtn.style.left="89%";
        }
        cloneBtn.style.transition = 'all 0.6s ease-in-out';
        cloneBtn.style.opacity=0;
        cloneBtn.classList.add('btn','btn-sm','btn-default','clone-btn');
        cloneBtn.textContent = 'CLONE';
        
        videoDiv.addEventListener('mouseover', function()
                        {
                            cloneBtn.style.opacity=1;
                        });
        videoDiv.addEventListener('mouseout', function()
                        {
                                cloneBtn.style.opacity = 0;
                        });
        
        videoDiv.insertBefore(cloneBtn, videoDiv.firstElementChild);
        cloneBtn.onclick = cloneThis;
    });
    document.querySelector('a .cloner').textContent = 'CLONER: ON';
}

function cloneThis()
{
    
    if (document.querySelector('.video video') == null)
    {
        console.log("no videos");
        return;
    }
    else
    {
        const videoDivData = this.parentElement;
        let data = getVidData(videoDivData);
        const videoOriginal = videoDivData.querySelector('video');
        
        
        const mediaDiv = document.createElement('div');
        const videoDiv = document.createElement('div');
        mediaDiv.classList.add('media-group');
        if (videoOriginal.closest('.media-group').classList.contains('col-sm-6'))
        {
            mediaDiv.classList.add('col-sm-6');
        }
        videoDiv.classList.add('video');

        const currentMedia = this.parentElement.parentElement;
        currentMedia.insertAdjacentElement("afterend", mediaDiv);

        mediaDiv.appendChild(videoDiv);
        const video = document.createElement('video');
        video.classList.add('video-js', 'vjs-16-9');
        video.controls = true;
        video.poster=data.bi;
    
        const src = document.createElement('source');
        src.setAttribute('src', data.urL);
        video.appendChild(src);
        videoDiv.appendChild(video);
        var player = videojs(video);
        // var player = videojs(duplicateVid);
        allowPToPause(video);
        console.log("found videos");
    }
}

function showHideMenuE()
{
    document.addEventListener('keypress', function(event)
    {
       if (event.key == 'e')
       {
           document.querySelector('#bubble').classList.toggle('hidden');
       }
       else if (event.key == 's' && event.target != document.querySelector('#q') && event.target != document.querySelector('#content'))
       {
           sideBySide();
       }
    });
    
}

function cleanOnLoad()
{
    mainFunction();
    videoCleanseReplace();
    showMessage();
    addProperID();
    addTransitionToID();
    copySourceFromAlbum();
    checkForChapters();
    showHideMenuE();
}
window.addEventListener('load', cleanOnLoad);