Create movie posters view on Movies & TV page
// ==UserScript==
// @name SiG Poster View
// @namespace SoItGoes
// @version 0.25
// @description Create movie posters view on Movies & TV page
// @author cykage
// @match https://intotheinter.net/?c=Movies*
// @match https://intotheinter.net/?c=TV*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
//add toggle to middle bar
var toggle = document.createElement('div');
toggle.style.display = "inline-block";
toggle.innerHTML = '<a><button id="poster-button">Poster Mode</button></a>';
var middlebar = document.querySelector('#middlebar');
var rightButtons = middlebar.childNodes[4];
middlebar.insertBefore(toggle, rightButtons);
if (GM_getValue('postersEnabled') === undefined) {
GM_setValue('postersEnabled', false);
} else if (GM_getValue('postersEnabled') === true) {
document.querySelector('#poster-button').setAttribute('style', 'color: white !important');
showPosters();
}
toggle.addEventListener('click', function() {
if (!GM_getValue('postersEnabled')) {
showPosters();
GM_setValue('postersEnabled', true);
document.querySelector('#poster-button').setAttribute('style', 'color: white !important');
} else {
//remove posters, bring back table
document.querySelector('#poster-container').remove();
document.querySelector('#links').style.display='block';
document.querySelector('#poster-button').setAttribute('style', 'color: black !important');
GM_setValue('postersEnabled', false);
}
});
function showPosters(addedLinks=0) {
//if Load More is clicked, addedLinks will be the list of the new links
var posters = [];
var links = document.querySelector('#links');
var media;
if (document.querySelectorAll('.row.Movies').length > 0) {
media = addedLinks || document.querySelectorAll('.row.Movies');
} else if (document.querySelectorAll('.row.TV')) {
media = addedLinks || document.querySelectorAll('.row.TV');
}
if (addedLinks || document.querySelectorAll('.row.Movies'));
if (media.length<1) {
media = addedLinks || document.querySelectorAll('.row.TV');
}
for (var m of media) {
var img = m.querySelector('img');
var resTags = m.querySelector('.tags').innerText;
var sigLink = m.querySelectorAll('a')[1].href;
var tv_ep;
if (document.querySelectorAll('.row.TV').length>1) {
console.log(m.childNodes[1].innerText);
var ep_text = m.childNodes[1].innerText;
if (ep_text.match(/([sS]\d\d[eE]\d\d)/) !== null) {
tv_ep = ep_text.match(/([sS]\d\d[eE]\d\d)/)[0];
} else if(ep_text.match(/([sS]eason \d\d)/) !== null) {
tv_ep = ep_text.match(/([sS]eason \d\d)/)[0];
} else if (ep_text.match(/([sS]eason \d)/) !== null) {
tv_ep = ep_text.match(/([sS]eason \d)/)[0];
} else {
tv_ep = '';
}
}
if (img) {
var src = img.src;
var res;
if ( resTags.includes('720P') ) {
res = '720P';
} else if ( resTags.includes('1080P') ) {
res = '1080P';
} else if ( resTags.includes('UHD') || resTags.includes('4K') || resTags.includes('2160p')) {
res = 'UDH/4K';
} else if ( resTags.includes('SD') || resTags.includes('480P')) {
res = '480P';
} else {
res = '';
}
posters.push( {'src': src, 'res': res, 'link': sigLink, 'tv_ep': tv_ep} );
}
}
//hide link table, create container and posters
links.style.display = 'none';
var posterContainer = document.createElement('div');
posterContainer.setAttribute('id', 'poster-container');
posterContainer.setAttribute('style','display:flex; justify-content: space-around; -webkit-flex-flow: row wrap');
posterContainer.setAttribute('class', 'sixteen columns');
var mainContainer = document.querySelector('#mainpage');
if (addedLinks === 0) {
//if Load More wasn't clicked, create new container
mainContainer.insertBefore(posterContainer, links);
} else {
//if Load More was clicked, use existing container
posterContainer = document.querySelector('#poster-container');
}
for (var poster of posters) {
var posterImg = document.createElement('div');
posterImg.innerHTML = (`
<div style="padding:10px; position: relative">
<a href="${poster.link}"><img style="width: 100%" src="${poster.src}" /></a>
<span style="
position: absolute;
top: 10px;
left: 10px;
color: white !important;
font: bold 11px/16px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
padding: 3px; ">
${poster.res}
</span>
</div>`);
if (document.querySelectorAll('.row.TV').length > 1) {
posterImg.innerHTML = (`
<div style="padding:10px; position: relative">
<a href="${poster.link}"><img style="width: 100%" src="${poster.src}" /></a>
<span style="
position: absolute;
top: 10px;
left: 10px;
color: white !important;
font: bold 11px/16px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
padding: 3px; ">
${poster.res}
</span>
<span style="
position: absolute;
top: 10px;
right: 10px;
color: white !important;
font: bold 11px/16px Helvetica, Sans-Serif;
letter-spacing: 0px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
padding: 3px; ">
${poster.tv_ep}
</span>
</div>`);
}
posterImg.style.width = "150px";
posterContainer.appendChild(posterImg);
}
}
//watch for new links added with Load More and add new divs to poster container
var linkTable = document.querySelector('#links');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (GM_getValue('postersEnabled')) {
showPosters(mutation.addedNodes);
}
});
});
observer.observe(linkTable, {childList: true });
})();