Skip to content

Instantly share code, notes, and snippets.

@Renari
Last active December 19, 2018 16:11
Show Gist options
  • Save Renari/9e27906b74428c4da0104b49e1b62102 to your computer and use it in GitHub Desktop.
Save Renari/9e27906b74428c4da0104b49e1b62102 to your computer and use it in GitHub Desktop.
// ==UserScript==
// @name Plex Background Art
// @namespace com.arimil.renari.plexbackgroundart
// @version 0.5
// @description Sets the artwork image at the background in Plex.
// @author Renari
// @match YOURPLEXDOMAINHERE*
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @require https://greasyfork.org/scripts/1003-wait-for-key-elements/code/Wait%20for%20key%20elements.js?version=2765
// @grant none
// ==/UserScript==
waitForKeyElements('div.PrePlayArtwork-imageContainer-3dXG6 > div[style*="blob"]', moveArtwork);
function moveArtwork(node) {
var gradientCss = 'linear-gradient( rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75) ),';
var background = node[0].style.backgroundImage;
background = gradientCss + background;
var backgroundReplacement = document.getElementsByClassName('PageContent-pageContent-16mK6');
if(backgroundReplacement !== undefined) {
backgroundReplacement[0].style.backgroundImage = background;
backgroundReplacement[0].style.backgroundSize = 'cover';
}
node[0].parentNode.parentNode.removeChild(node[0].parentNode);
}
@amnacog
Copy link

amnacog commented Dec 19, 2018

I somewhat achieved the same feel with more blur and clunky code ;-)

waitForKeyElements('div.PrePlayArtwork-imageContainer-3dXG6', moveArtwork);
waitForKeyElements('div.PrePlayArtwork-imageContainer-3dXG6 div', fullHeight);

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.fixed-poster {top: 180px !important;}';
document.getElementsByTagName('head')[0].appendChild(style);

function moveArtwork(node) {
  node[0].style.position = "fixed";
  node[0].style.filter = "blur(3px)";
  node[0].style.opacity = ".3";
  node[0].style.height = "100%";
  node[0].style.zIndex = '-1';
  node[0].nextSibling.classList.add("fixed-poster");
}

function fullHeight(node) {
  if (node[0].style.zIndex == 2) {
    node[0].style.height = "100%";
  }
}

$(window).on('resize', function () {
  setTimeout(function () {
  $('div.PrePlayArtwork-imageContainer-3dXG6')
    .css("height", "100%");
  }, 5E2);
})

preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment