Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // ==UserScript==
- // @name AMQ Background script
- // @namespace http://tampermonkey.net/
- // @version 3.3
- // @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
- // @author Juvian
- // @match https://animemusicquiz.com/*
- // @grant none
- // @require https://gist.githubusercontent.com/arantius/3123124/raw/grant-none-shim.js
- // ==/UserScript==
- let timer = (secs) => setInterval(changeBackground, secs * 1000);
- let onMusicChange = () => {
- new Listener("play next song", function (data) {
- changeBackground();
- }).bindListener();
- };
- let onManualChange = (key) => {
- document.addEventListener ("keydown", function (zEvent) {
- if (zEvent.ctrlKey && zEvent.key.toLowerCase() === key.toLowerCase()) {
- changeBackground();
- zEvent.preventDefault();
- }
- });
- }
- let options = {
- images: [
- "https://i.imgur.com/9ASjt7J.png" ],
- imageChangePolicy: onManualChange("b"), //options: timer(3) = every 3 seconds, onMusicChange() or onManualChange("n") = when pressing ctrl + your key,
- video: {
- 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"
- enabled: false, // no images with this
- filter: "none" // could be blur(3px) or "none" to deactivate
- },
- transparent: [
- {
- selector: "div.lobbyAvatarImgContainer",
- description: "dots in game lobby",
- opacity: 0.7,
- enabled: true
- },
- {
- selector: "#mpDriveStatsContainer>.col-xs-6 .floatingContainer",
- description: "avatar drive entries",
- opacity: 0.5,
- enabled: true,
- css: `.mpDriveEntryName::after {
- width: 0px;
- }
- .mpDriveEntry:nth-child(2n) {
- background-color: rgba(27, 27, 27, 0.6) !important;
- }
- `
- },
- {
- selector: "#mpAvatarDriveContainer",
- description: "dots in game lobby",
- opacity: 0.5,
- enabled: true
- },
- {
- selector: ".qpAvatarImgContainer",
- description: "backgound of avatar image in quiz",
- enabled: true,
- css: `.qpAvatarImgContainer {
- box-shadow:none;
- }`
- },
- {
- selector: "#gameChatPage > .col-xs-9",
- description: "quiz main screen",
- enabled: true
- },
- {
- selector: "#gameChatContainer, .gcInputContainer, .gcList > li:nth-child(2n)",
- description: "quiz chat",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: ".rbRoom, .rbrRoomImageContainer",
- description: "rooms to choose",
- enabled: true,
- opacity: 0.5,
- css: `.rbrRoomImageContainer {
- background-color: transparent !important;
- }`
- },
- {
- selector: "#mainMenuSocailButton",
- description: "friends/social button (bottom left)",
- enabled: true
- },
- {
- selector: "#avatarUserImgContainer",
- description: "avatar background (bottom right)",
- enabled: true
- },
- {
- selector: ".topMenuBar",
- description: "top menu",
- enabled: true
- },
- {
- selector: ".awSkinPreviewButtom, .awSkinPreview",
- description: "unlock/change avatar preview",
- enabled: true
- },
- {
- selector: "#footerMenuBarBackground, #rightMenuBarPartContainer::before",
- description: "bottom menu",
- enabled: true
- },
- {
- selector: "#mpPlayButton",
- description: "play button main screen",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#mpExpandButton",
- description: "expand button main screen",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#mpAvatarDriveContainer, #mpAvatarDriveHeaderShadowHider .floatingContainer",
- description: "avatar drive container main screen",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#mpDriveDonationContainer .button",
- description: "avatar drive donate/faq buttons",
- enabled: true
- },
- {
- selector: "#mpDriveStatsContainer *",
- description: "avatar drive entries",
- enabled: false
- },
- {
- selector: "#mpNewsContainer, #mpNewsTitleShadowHider div",
- description: "news main menu",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#mpNewSocailTab .leftRightButtonTop, #mpPatreonContainer, .startPageSocailIcon",
- description: "main menu black backgrounds near news",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#rbMajorFilters",
- description: "game room top middle filters",
- enabled: false
- },
- {
- selector: "#roomBrowserHostButton",
- description: "host room button",
- enabled: false
- },
- {
- selector: "#topMenuBack",
- description: "top back button",
- enabled: false
- },
- {
- selector: "#qpAnimeContainer div:first-child .qpSideContainer",
- description: "standings menu in quiz",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: ".qpAvatarInfoContainer > div, .qpAvatarAnswerContainer",
- description: "name/guess near avatar image in quiz",
- enabled: true,
- opacity: 0.5,
- css: `.qpAvatarInfoContainer > div {
- box-shadow:none;
- }`
- },
- {
- selector: "#qpInfoHider, .col-xs-6 + .col-xs-3 .container.qpSideContainer.floatingContainer, .col-xs-3 .qpSingleRateContainer",
- description: "song info in quiz",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#qpAnimeNameHider, .qpAnimeNameContainer, #qpCounter",
- description: "anime name answer top menu in quiz",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#qpVideoHider, #qpVideoOverflowContainer",
- description: "video counter/sound only background",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#socailTabFooter > .selected, #socialTab",
- description: "friends online menu",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: ".lobbyAvatarTextContainer",
- description: "username/level text lobby",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#startPageCenter",
- description: "login screen",
- enabled: true,
- opacity: 0.5
- },
- {
- selector: "#startPageLogoContainer",
- description: "login screen logo",
- enabled: true,
- opacity: 0.5
- }
- ]
- }
- let transparents = options.transparent.filter(opt => opt.enabled);
- function changeBackground() {
- this.index = ((this.index || 0) + 1) % options.images.length;
- document.documentElement.style.setProperty('--url', `url("${options.images[this.index]}")`);
- }
- let template = $(`<div id="custom-background"></div>`);
- if (options.video.enabled) {
- template.append(`<video autoplay loop muted><source src="${options.video.url}"></video>`);
- } else {
- images = [""]
- }
- $("#mainContainer").append(template);
- function extend (func, method, ext) {
- let old = (func.fn ? func.fn : func.prototype)[method];
- func.prototype[method] = function () {
- let result = old.apply(this, Array.from(arguments));
- ext.apply(this, Array.from(arguments));
- return result;
- }
- }
- let loggedIn = window.QuizInfoContainer != null;
- if (loggedIn) {//we are logged in
- extend(QuizInfoContainer, "showContent", function () {
- $("#qpInfoHider").prevAll().css("visibility", "visible");
- $("#qpAnimeNameContainer").css("visibility", "visible");
- });
- extend(QuizInfoContainer, "hideContent", function () {
- $("#qpInfoHider").prevAll().css("visibility", "hidden");
- $("#qpAnimeNameContainer").css("visibility", "hidden");
- });
- extend(VideoOverlay, "show", function () {
- this.$hider.siblings().css("visibility", "hidden");
- });
- extend(VideoOverlay, "hide", function () {
- this.$hider.siblings().css("visibility", "visible");
- });
- extend(VideoOverlay, "showWaitingBuffering", function () {
- this.$bufferingScreen.siblings().css("visibility", "hidden");
- });
- extend(VideoOverlay, "hideWaitingBuffering", function () {
- this.$bufferingScreen.siblings().css("visibility", "visible");
- });
- extend(AvatarWindow, "closeWindow", function () {
- $("#custom-background").css("z-index", -1);
- $("#avatarWindow").css("z-index", -1);
- });
- extend(AvatarWindow, "showWindow", function () {
- $("#custom-background").css("z-index", 10);
- $("#avatarWindow").css("z-index", 11);
- });
- let loadingScreenStateChange = function () {
- if ($(this).attr("id") == "loadingScreen") {
- if ($(this).hasClass("hidden")) {
- $("#custom-background").css("z-index", -1);
- } else {
- $("#custom-background").css("z-index", 10);
- }
- }
- }
- extend($, "addClass", loadingScreenStateChange);
- extend($, "removeClass", loadingScreenStateChange);
- }
- GM_addStyle(`
- :root {
- --url: url("${options.images[0]}");
- }
- ${transparents.map(obj => `
- ${obj.selector} {
- background-color: rgba(${obj.color || "27, 27, 27"}, ${obj.opacity || 0}) !important;
- background-image: none !important;
- }
- ${obj.css || ''}
- `).join('\n')}
- .leftShadowBorder, #currencyContainer, #menuBarOptionContainer, #awContentRow .rightShadowBorder {
- box-shadow:none;
- }
- #socialTab:not(.open), #optionsContainer:not(.open) {
- display:none;
- }
- #mainMenuSocailButton, #avatarUserImgContainer {
- border:none !important;
- }
- #optionsContainer li {
- background-color:#424242 !important;
- }
- #rbMajorFilters {
- background-color: #1b1b1b;
- padding-left: 10px;
- }
- #custom-background {
- position: absolute;
- left: 0%;
- top: 0%;
- /* The following will size the video to fit the full container. Not necessary, just nice.*/
- min-width: 100%;
- min-height: 100%;
- /*
- left: 50%;
- top: 50%;
- -webkit-transform: translate(-50%,-50%);
- -moz-transform: translate(-50%,-50%);
- -ms-transform: translate(-50%,-50%);
- transform: translate(-50%,-50%);*/
- z-index: ${loggedIn ? 5 : -1};
- filter: ${options.video.filter};
- will-change: contents;
- background-image: var(--url) !important;
- background-size: 100% auto !important;
- background-attachment: fixed !important;
- background-position: 0px !important;
- }
- #mainContainer > *, #awMainView, #avatarWindow, #startPage, #loadingScreen {
- background: none;
- }
- `);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement