☰

IP2 VideoFix BETA

This script adds video thumbnails to IP2 and fixes various issues with video playback. Message /u/ChangThunderwang for bugs and anything related to this.

// ==UserScript==
// @name        IP2 VideoFix BETA
// @description This script adds video thumbnails to IP2 and fixes various issues with video playback. Message /u/ChangThunderwang for bugs and anything related to this.
// @grant       GM_addStyle
// @version     2.1
// @match       *://ip2always.win/*
// @match       *://communities.win/*
// @namespace https://greasyfork.org/users/764563
// ==/UserScript==
"use strict";
/*jshint esversion: 6 */

// Fixes janky CSS
GM_addStyle(`
     body .post-list div.content.link div.inner{
         background: rgba(0,0,0,0)!important;
    }
     body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
     .post-list .content , .post-list .content.text{
         margin: 8px 0 0 67px;
         padding: 0;
    }
     .post-list .content:not(.text) .inner {
         padding: 0 
    }
     .video-container.iframe-parent{
         position: relative;
         overflow: hidden;
         width: 100%;
         padding-top: 56.25%;
    }
     .video-container.iframe-parent > .responsive-iframe {
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         width: 100%;
         height: 100%;
    }
     .video-container {
         margin: 0px;
         padding: 0px;
         overflow: inherit;
         height: auto;
    }
     .video-container video {
         max-height: calc(100vw/3);
    }
     .content img {
         display: block;
         max-height:80vh;
         width: auto;
         height: auto;
    }
`);

// Replaces iframes with video tags, mostly for videy.co
var ifr = document.querySelector(".main-content:not(.post-list) .video-container > iframe");
if (ifr != null) {
    if (/.+(\.mp4|\.mov|\.webm)/i.test(ifr.src)) {
        console.log('replacing');
        var src = ifr.src;
        var par = ifr.parentElement;
        ifr.remove();
        var vid = document.createElement('video');
        vid.autoplay = true;
        vid.src = src;
        vid.controls = true;
        vid.preload = 'auto';
        par.appendChild(vid);
    } else {
        ifr.classList.add('responsive-iframe');
        ifr.parentElement.classList.add('iframe-parent');
        ifr.scrolling = 'no';
    }
}

//Function to add thumbnails to videos
async function addThumbs() {
    var vidposts = document.querySelectorAll('.post:not([data-thumb-checked]) .video-container.mp4, .post:not([data-thumb-checked]) .video-container[data-src$=".mp4"]');
    console.log(vidposts);

    if (vidposts.length == 0) {
        return;
    }

    for (var i = 0; i < Math.min(vidposts.length, 3); i++) {
        vidposts[i].parentElement.closest('.post').dataset.thumbChecked = '';
    }

    var count = 3;

    for (var i = 0; i < Math.min(vidposts.length, 3); i++) {
        var vid = vidposts[i];
        var post = vid.parentElement.closest(".post");
        var thumb = post.querySelector(".thumb");
        var videoUrl = vid.getAttribute("data-src");
        var newThumb = document.createElement('video');
        newThumb.preload = 'metadata';
        newThumb.style = 'object-fit:cover';
        newThumb.classList.add('thumb');
        newThumb.dataset.action= 'expand';

        newThumb.oncontextmenu = () => {
            return;
        };

        newThumb.src = videoUrl;
        post.insertBefore(newThumb, thumb);
        thumb.remove();
        count--;
    }

    if (count <= 0) {
        setTimeout(addThumbs, 1000);
    }
}

//Adds thumbnails upon loading and upon entering new pages
addThumbs();
if (!(typeof ias === 'undefined')) {
    ias.on("appended", addThumbs);
}

//Removes old handler for the expand buttons upon mouseover.
var once = false;

function removeOldExpander() {
    console.log('mouseover');
    if (!once) {
        $(document).off("click", '[data-action="expand"]');
        once = true;
    } else {
        document.querySelector('a[data-action="expand"], .thumb[data-action="expand"]').removeEventListener("mouseover", removeOldExpander);
    }
}

document.querySelectorAll('a[data-action="expand"], .thumb[data-action="expand"]').forEach(x => x.addEventListener("mouseover", removeOldExpander));
window.onload = function () {
    $(document).off("click", '[data-action="expand"]');
};

//Assigns new improved handler for video embeds which removes video tags upon closing
function expandHandler() {
    $(document).off("click", '[data-action="expand"]');
    var content = this.parentElement.closest(".post").querySelector(".content");
    console.log(content);

    if ("opened" in content.dataset) {
        return;
    }

    content.dataset.opened = true;
    var img = content.querySelector('img');
    var first = content.querySelector(".video-container");
    console.log(first);

    if (img != null && img.getAttribute("src") === "") {
        img.setAttribute("src", img.dataset.src);
    } else if (first != null) {
        if (!first.hasChildNodes()) {
            if (first.classList.contains("mp4") || /.+(\.mp4|\.mov|\.webm)/i.test(first.dataset.src)) {
                var vid = document.createElement('video');
                vid.style.display = 'block';
                vid.autoplay = true;
                vid.classList.add('child-video', 'child-content');
                vid.controls = true;
                vid.preload = 'auto';
                vid.src = first.dataset.src;
                first.appendChild(vid);
                window.setTimeout(function () {
                    vid.focus();
                    vid.scrollIntoView({block: "center", inline: "nearest"});
                }, 50);
            } else {
                var iframe = document.createElement('iframe');
                iframe.scrolling = 'no';
                iframe.classList.add('responsive-iframe', 'child-content');
                iframe.src = first.dataset.src;
                iframe.frameborder = 0;
                iframe.allowfullscreen = true;
                first.appendChild(iframe);
                first.classList.add('iframe-parent');
                window.setTimeout(function () {
                    iframe.scrollIntoView({block: "center", inline: "nearest"});
                }, 50);
            }
        }
    }

    delete content.dataset.opened;

    if (img != null) {
        delete img.dataset.src;
    }

    if (content.style.display === '' || content.style.display === 'none') {
        content.style.display = 'block';
        img.onload = () => {img.scrollIntoView({block: "center", inline: "nearest"})};
    } else if (content.style.display === 'block') {
        content.style.display = 'none';
        var children = content.querySelector(".child-content");
        if (children != null) {
            children.remove();
        }
    }
}
function addExpandHandlers() {
    document.querySelectorAll('a[data-action="expand"]:not([data-onclick-added]), .thumb[data-action="expand"]:not([data-onclick-added])').forEach(x => {
        x.dataset.onclickAdded = '';
        x.addEventListener("click", expandHandler)
    });
}


addExpandHandlers()
if (!(typeof ias === 'undefined')) {
    ias.on("appended", addExpandHandlers);
}