SHARE
TWEET

Untitled

a guest Jun 16th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // ==UserScript==
  2. // @name         AMQ Background script
  3. // @namespace    http://tampermonkey.net/
  4. // @version      3.3
  5. // @description  Adds multiple custom background to amq or even a video. Tried to include as many selectors as possible, so remove the ones where you prefer to have original background
  6. // @author       Juvian
  7. // @match        https://animemusicquiz.com/*
  8. // @grant        none
  9. // @require      https://gist.githubusercontent.com/arantius/3123124/raw/grant-none-shim.js
  10. // ==/UserScript==
  11.  
  12.  
  13. let timer = (secs) => setInterval(changeBackground, secs * 1000);
  14.  
  15. let onMusicChange = () => {
  16.     new Listener("play next song", function (data) {
  17.         changeBackground();
  18.     }).bindListener();
  19. };
  20.  
  21. let onManualChange = (key) => {
  22.     document.addEventListener ("keydown", function (zEvent) {
  23.         if (zEvent.ctrlKey && zEvent.key.toLowerCase() === key.toLowerCase()) {
  24.             changeBackground();
  25.             zEvent.preventDefault();
  26.         }
  27.     });
  28. }
  29.  
  30.  
  31. let options = {
  32.     images: [
  33.         "https://i.imgur.com/9ASjt7J.png" ],
  34.     imageChangePolicy: onManualChange("b"), //options: timer(3) = every 3 seconds, onMusicChange() or onManualChange("n") = when pressing ctrl + your key,
  35.     video: {
  36.         url: "https://desktophut-com.cdn.vidyome.com/videos/12-2018/kStWC5u7eyifonqthwFl.mp4", //another good one: "https://desktophut-com.cdn.vidyome.com/videos/04-2019/mySuBqs1CcijooCKJsOq.mp4"
  37.         enabled: false, // no images with this
  38.         filter: "none" // could be blur(3px) or "none" to deactivate
  39.     },
  40.     transparent: [
  41.         {
  42.             selector: "div.lobbyAvatarImgContainer",
  43.             description: "dots in game lobby",
  44.             opacity: 0.7,
  45.             enabled: true
  46.         },
  47.         {
  48.             selector: "#mpDriveStatsContainer>.col-xs-6 .floatingContainer",
  49.             description: "avatar drive entries",
  50.             opacity: 0.5,
  51.             enabled: true,
  52.             css: `.mpDriveEntryName::after {
  53.                       width: 0px;
  54.                  }
  55.                  .mpDriveEntry:nth-child(2n) {
  56.                      background-color: rgba(27, 27, 27, 0.6) !important;
  57.                  }
  58.                  `
  59.         },
  60.         {
  61.             selector: "#mpAvatarDriveContainer",
  62.             description: "dots in game lobby",
  63.             opacity: 0.5,
  64.             enabled: true
  65.         },
  66.         {
  67.             selector: ".qpAvatarImgContainer",
  68.             description: "backgound of avatar image in quiz",
  69.             enabled: true,
  70.             css: `.qpAvatarImgContainer {
  71.                        box-shadow:none;
  72.                    }`
  73.         },
  74.         {
  75.             selector: "#gameChatPage > .col-xs-9",
  76.             description: "quiz main screen",
  77.             enabled: true
  78.         },
  79.         {
  80.             selector: "#gameChatContainer, .gcInputContainer, .gcList > li:nth-child(2n)",
  81.             description: "quiz chat",
  82.             enabled: true,
  83.             opacity: 0.5
  84.         },
  85.         {
  86.             selector: ".rbRoom, .rbrRoomImageContainer",
  87.             description: "rooms to choose",
  88.             enabled: true,
  89.             opacity: 0.5,
  90.             css: `.rbrRoomImageContainer {
  91.                       background-color: transparent !important;
  92.                   }`
  93.         },
  94.         {
  95.             selector: "#mainMenuSocailButton",
  96.             description: "friends/social button (bottom left)",
  97.             enabled: true
  98.         },
  99.         {
  100.             selector: "#avatarUserImgContainer",
  101.             description: "avatar background (bottom right)",
  102.             enabled: true
  103.         },
  104.         {
  105.             selector: ".topMenuBar",
  106.             description: "top menu",
  107.             enabled: true
  108.         },
  109.         {
  110.             selector: ".awSkinPreviewButtom, .awSkinPreview",
  111.             description: "unlock/change avatar preview",
  112.             enabled: true
  113.         },
  114.         {
  115.             selector: "#footerMenuBarBackground, #rightMenuBarPartContainer::before",
  116.             description: "bottom menu",
  117.             enabled: true
  118.         },
  119.         {
  120.             selector: "#mpPlayButton",
  121.             description: "play button main screen",
  122.             enabled: true,
  123.             opacity: 0.5
  124.         },
  125.         {
  126.             selector: "#mpExpandButton",
  127.             description: "expand button main screen",
  128.             enabled: true,
  129.             opacity: 0.5
  130.         },
  131.         {
  132.             selector: "#mpAvatarDriveContainer, #mpAvatarDriveHeaderShadowHider .floatingContainer",
  133.             description: "avatar drive container main screen",
  134.             enabled: true,
  135.             opacity: 0.5
  136.         },
  137.         {
  138.             selector: "#mpDriveDonationContainer .button",
  139.             description: "avatar drive donate/faq buttons",
  140.             enabled: true
  141.         },
  142.         {
  143.             selector: "#mpDriveStatsContainer *",
  144.             description: "avatar drive entries",
  145.             enabled: false
  146.         },
  147.         {
  148.             selector: "#mpNewsContainer, #mpNewsTitleShadowHider div",
  149.             description: "news main menu",
  150.             enabled: true,
  151.             opacity: 0.5
  152.         },
  153.         {
  154.             selector: "#mpNewSocailTab .leftRightButtonTop, #mpPatreonContainer, .startPageSocailIcon",
  155.             description: "main menu black backgrounds near news",
  156.             enabled: true,
  157.             opacity: 0.5
  158.         },
  159.         {
  160.             selector: "#rbMajorFilters",
  161.             description: "game room top middle filters",
  162.             enabled: false
  163.         },
  164.         {
  165.             selector: "#roomBrowserHostButton",
  166.             description: "host room button",
  167.             enabled: false
  168.         },
  169.         {
  170.             selector: "#topMenuBack",
  171.             description: "top back button",
  172.             enabled: false
  173.         },
  174.         {
  175.             selector: "#qpAnimeContainer div:first-child .qpSideContainer",
  176.             description: "standings menu in quiz",
  177.             enabled: true,
  178.             opacity: 0.5
  179.         },
  180.         {
  181.             selector: ".qpAvatarInfoContainer > div, .qpAvatarAnswerContainer",
  182.             description: "name/guess near avatar image in quiz",
  183.             enabled: true,
  184.             opacity: 0.5,
  185.             css: `.qpAvatarInfoContainer > div {
  186.                       box-shadow:none;
  187.                   }`
  188.         },
  189.         {
  190.             selector: "#qpInfoHider, .col-xs-6 + .col-xs-3 .container.qpSideContainer.floatingContainer, .col-xs-3 .qpSingleRateContainer",
  191.             description: "song info in quiz",
  192.             enabled: true,
  193.             opacity: 0.5
  194.         },
  195.         {
  196.             selector: "#qpAnimeNameHider, .qpAnimeNameContainer, #qpCounter",
  197.             description: "anime name answer top menu in quiz",
  198.             enabled: true,
  199.             opacity: 0.5
  200.         },
  201.         {
  202.             selector: "#qpVideoHider, #qpVideoOverflowContainer",
  203.             description: "video counter/sound only background",
  204.             enabled: true,
  205.             opacity: 0.5
  206.         },
  207.         {
  208.             selector: "#socailTabFooter > .selected, #socialTab",
  209.             description: "friends online menu",
  210.             enabled: true,
  211.             opacity: 0.5
  212.         },
  213.         {
  214.             selector: ".lobbyAvatarTextContainer",
  215.             description: "username/level text lobby",
  216.             enabled: true,
  217.             opacity: 0.5
  218.         },
  219.         {
  220.             selector: "#startPageCenter",
  221.             description: "login screen",
  222.             enabled: true,
  223.             opacity: 0.5
  224.         },
  225.         {
  226.             selector: "#startPageLogoContainer",
  227.             description: "login screen logo",
  228.             enabled: true,
  229.             opacity: 0.5
  230.         }
  231.     ]
  232. }
  233.  
  234. let transparents = options.transparent.filter(opt => opt.enabled);
  235.  
  236. function changeBackground() {
  237.     this.index = ((this.index || 0) + 1) % options.images.length;
  238.     document.documentElement.style.setProperty('--url', `url("${options.images[this.index]}")`);
  239. }
  240.  
  241. let template = $(`<div id="custom-background"></div>`);
  242.  
  243.  
  244. if (options.video.enabled) {
  245.     template.append(`<video autoplay loop muted><source src="${options.video.url}"></video>`);
  246. } else {
  247.     images = [""]
  248. }
  249.  
  250. $("#mainContainer").append(template);
  251.  
  252. function extend (func, method, ext) {
  253.     let old = (func.fn ? func.fn : func.prototype)[method];
  254.     func.prototype[method] = function () {
  255.         let result = old.apply(this, Array.from(arguments));
  256.         ext.apply(this, Array.from(arguments));
  257.         return result;
  258.     }
  259. }
  260.  
  261. let loggedIn = window.QuizInfoContainer != null;
  262.  
  263. if (loggedIn) {//we are logged in
  264.     extend(QuizInfoContainer, "showContent", function () {
  265.         $("#qpInfoHider").prevAll().css("visibility", "visible");
  266.         $("#qpAnimeNameContainer").css("visibility", "visible");
  267.     });
  268.  
  269.     extend(QuizInfoContainer, "hideContent", function () {
  270.         $("#qpInfoHider").prevAll().css("visibility", "hidden");
  271.         $("#qpAnimeNameContainer").css("visibility", "hidden");
  272.     });
  273.  
  274.     extend(VideoOverlay, "show", function () {
  275.         this.$hider.siblings().css("visibility", "hidden");
  276.     });
  277.  
  278.     extend(VideoOverlay, "hide", function () {
  279.         this.$hider.siblings().css("visibility", "visible");
  280.     });
  281.  
  282.  
  283.     extend(VideoOverlay, "showWaitingBuffering", function () {
  284.         this.$bufferingScreen.siblings().css("visibility", "hidden");
  285.     });
  286.  
  287.     extend(VideoOverlay, "hideWaitingBuffering", function () {
  288.         this.$bufferingScreen.siblings().css("visibility", "visible");
  289.     });
  290.  
  291.     extend(AvatarWindow, "closeWindow", function () {
  292.         $("#custom-background").css("z-index", -1);
  293.         $("#avatarWindow").css("z-index", -1);
  294.     });
  295.  
  296.     extend(AvatarWindow, "showWindow", function () {
  297.         $("#custom-background").css("z-index", 10);
  298.         $("#avatarWindow").css("z-index", 11);
  299.     });
  300.  
  301.     let loadingScreenStateChange = function () {
  302.         if ($(this).attr("id") == "loadingScreen") {
  303.             if ($(this).hasClass("hidden")) {
  304.                 $("#custom-background").css("z-index", -1);
  305.             } else {
  306.                 $("#custom-background").css("z-index", 10);
  307.             }
  308.         }
  309.     }
  310.  
  311.     extend($, "addClass", loadingScreenStateChange);
  312.     extend($, "removeClass", loadingScreenStateChange);
  313. }
  314.  
  315. GM_addStyle(`
  316.  
  317. :root {
  318.   --url: url("${options.images[0]}");
  319. }
  320.  
  321. ${transparents.map(obj => `
  322.     ${obj.selector} {
  323.         background-color: rgba(${obj.color || "27, 27, 27"}, ${obj.opacity || 0}) !important;
  324.         background-image: none !important;
  325.     }
  326.     ${obj.css || ''}
  327. `).join('\n')}
  328.  
  329.  
  330. .leftShadowBorder, #currencyContainer, #menuBarOptionContainer, #awContentRow .rightShadowBorder {
  331.     box-shadow:none;
  332. }
  333.  
  334. #socialTab:not(.open), #optionsContainer:not(.open) {
  335.     display:none;
  336. }
  337.  
  338. #mainMenuSocailButton, #avatarUserImgContainer {
  339.     border:none !important;
  340. }
  341.  
  342. #optionsContainer li {
  343.     background-color:#424242 !important;
  344. }
  345.  
  346. #rbMajorFilters {
  347.     background-color: #1b1b1b;
  348.     padding-left: 10px;
  349. }
  350.  
  351. #custom-background {
  352.     position: absolute;
  353.     left: 0%;
  354.     top: 0%;
  355.     /* The following will size the video to fit the full container. Not necessary, just nice.*/
  356.     min-width: 100%;
  357.     min-height: 100%;
  358.     /*
  359.     left: 50%;
  360.     top: 50%;
  361.     -webkit-transform: translate(-50%,-50%);
  362.     -moz-transform: translate(-50%,-50%);
  363.     -ms-transform: translate(-50%,-50%);
  364.     transform: translate(-50%,-50%);*/
  365.     z-index: ${loggedIn ? 5 : -1};
  366.     filter: ${options.video.filter};
  367.     will-change: contents;
  368.     background-image: var(--url) !important;
  369.     background-size: 100% auto !important;
  370.     background-attachment: fixed !important;
  371.     background-position: 0px !important;
  372. }
  373.  
  374. #mainContainer > *, #awMainView, #avatarWindow, #startPage, #loadingScreen {
  375.     background: none;
  376. }
  377.  
  378. `);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top