SxyPrn Preview Button

Adds preview button to videos

// ==UserScript==
// @name         SxyPrn Preview Button
// @namespace    http://sxyprn.com/
// @version      1.2
// @description  Adds preview button to videos
// @author       669_6silicone9_6test9_699
// @include      *sxyprn.com*
// @grant        none
// ==/UserScript==
/*jshint esversion: 6 */
(function() {
    'use strict';

    // Allows previews to be resizable by dragging from the bottom-right corner
    // Default: false
    const IS_RESIZABLE = false;

    // Get all posts
    let posts = document.querySelectorAll('.post_el_small:not(.post_el_post)');
    // Loop through posts
    posts.forEach((post)=>{
        if (post.querySelector('video')) {
            let controls = post.querySelector('.post_control');
            let videoContainer = post.querySelector('.vid_container');
            let previewVideoSrc = post.querySelector('video').getAttribute('src');
            controls.querySelector('.post_time').style='display: inline-block !important;';
            controls.querySelector('.post_control_time').style='float: none !important;display: inline-block !important;';
            let postID = post.querySelector('[data-postid]').getAttribute('data-postid');
            let catEl = videoContainer.querySelector('.post_el_small_subcat');

            let playButton = document.createElement('div');
            playButton.className = 'play-button';
            playButton.innerText = '►';
            playButton.style = 'user-select: none;position:relative;cursor:pointer;color: white; display: inline-block; margin: 0 5px; font-size: 1.25rem; border: 1px solid white; background: rgba(0,0,0,0.5); padding: 0.3em 0.5em; line-height: 1.25rem;';
            playButton.onclick = function () {
                let video = document.querySelector('#preview-'+postID);
                let container = document.querySelector('#preview-container-'+postID);
                if (video.style.display == 'none') {
                    container.style.display = '';
                    video.style.display = '';
                    playButton.innerText = '×';
                    if (catEl) catEl.style.display = 'none';
                    newTabButton.style.display = 'inline-block';
                } else {
                    container.style.display = 'none';
                    video.style.display = 'none';
                    playButton.innerText = '►';
                    if (catEl) catEl.style.display = '';
                    newTabButton.style.display = 'none';
                }
            }

            let newTabButton = document.createElement('div');
            newTabButton.innerText = '🡵';
            newTabButton.style = 'display: none; user-select: none;position:relative;cursor:pointer;color: white; margin: 0 5px; font-size: 1.25rem; border: 1px solid white; background: rgba(0,0,0,0.5); padding: 0.3em 0.5em; line-height: 1.25rem;';
            newTabButton.onclick = function() {
                window.open(previewVideoSrc.replace('//', 'https://'), '_blank');
            }

            let previewContainer = document.createElement('div');
            previewContainer.className = 'preview-container';
            previewContainer.id = 'preview-container-'+postID;
            previewContainer.style = IS_RESIZABLE ? 'display: none; position: absolute;bottom: 130%;height: 13.5em; min-width: 24em; resize: both; min-height: 13.5em; overflow: auto; z-index: 1' : 'display: none; position: absolute;bottom: 130%;height: 13.5em;';

            let previewVideo = document.createElement('video');
            previewVideo.id = 'preview-'+postID;
            previewVideo.style = 'height:100%;width:100%;display: none;border:1px solid white;';
            previewVideo.src = previewVideoSrc;
            previewVideo.loop = true;
            previewVideo.controls = true;

            previewContainer.append(previewVideo);
            controls.prepend(newTabButton);
            controls.prepend(playButton);
            controls.append(previewContainer);
        }
    });
})();