Greasy Fork is available in English.
美化QQ音乐播放页面
当前为
// ==UserScript==
// @name QQ音乐播放器美化
// @version 0.1.5
// @description 美化QQ音乐播放页面
// @author Mikkpotatoes
// @match https://y.qq.com/*
// @icon https://y.qq.com/favicon.ico
// @grant none
// @namespace http://greasyfork.icu/users/805106
// ==/UserScript==
var lrcc = false;
function hidePlayer(e) {
let player = document.querySelector("#app");
if (e.target.classList.contains("hide-player")) {
player.style.top = "calc(100vh - 64px)";
document.querySelector(".player__ft").classList.add("bar-mode");
document.querySelector(".player-bar").classList.add("show-bar");
let cl = document.querySelector(".player-action").classList;
cl.add("show-player");
cl.remove("hide-player");
} else {
player.style.top = "";
document.querySelector(".player__ft").classList.remove("bar-mode");
document.querySelector(".player-bar").classList.remove("show-bar");
let cl = document.querySelector(".player-action").classList;
cl.remove("show-player");
cl.add("hide-player");
}
}
function hidePlayList(s) {
let cl = document.querySelector(".btn_play_list").classList;
if(cl.contains("play_list_open")) {
document.querySelector(".mod_songlist_toolbar").style.bottom = "-280px";
document.querySelector(".sb_main").style.bottom = "-700px";
cl.remove("play_list_open");
} else {
if(s == true) {
document.querySelector(".mod_songlist_toolbar").style.bottom = "";
document.querySelector(".sb_main").style.bottom = "";
cl.add("play_list_open");
}
}
}
function setLrc(_e, v) {
v = v == undefined ? lrcc : v;
if (v) {
// console.log("exted!");
return;
}
if (!document.querySelector("audio").paused) {
lrcc = true
setTimeout(setLrc, 50, _e, v);
} else {
lrcc = false;
}
let lrc = document.querySelector(".lyric-bar>p");
if(lrc == null){
lrc = document.createElement("p");
document.querySelector(".lyric-bar").append(lrc);
}
if (document.querySelector(".on")) lrc.innerHTML = document.querySelector(".on").innerHTML;
}
(function() {
'use strict';
if(location.pathname =="/n/ryqq/player"){
window.addEventListener("load", ()=> {
let player = document.querySelector("#app");
let bps = document.querySelector(".btn_big_only");
let bp = document.createElement("a");
bp.classList.add("play_list_open");
bp.classList.add("btn_play_list");
bps.after(bp);
bps.remove();
bp.innerHTML = "";
let cl = bp.classList;
cl.remove("btn_big_only");
cl.add("btn_play_list");
bp.onclick = null;
bp.addEventListener("click", (e) => {
hidePlayList(true);
e.stopPropagation()
return false;
});
hidePlayList();
// document.querySelector(".bg_player_mask").addEventListener("click", hidePlayList);
let s = document.createElement("style");
s.innerHTML = '.player_login__guide{display:none}.mod_song_info{left:50%;width:100%;font-size:32px;line-height:56px;display:flex;flex-direction:row;align-items:center;max-width:1440px;transform:translate(-50%,0)}.song_info__cover:after{width:calc(100% - 16px);height:calc(100% - 16px);background-size:contain!important;z-index:-1;filter:blur(24px);top:24px}.song_info__pic{width:100%;height:100%;border-radius:8px}.song_info__album,.song_info__name,.song_info__singer{height:auto;font-size:24px;font-weight:700}.song_info__lyric{flex:1 0;height:100%;min-height:100%}.song_info__lyric,.song_info__lyric_box{position:unset}.song_info__lyric_box{margin-right:-20px}.song_info__lyric_inner{line-height:42px;font-weight:700;text-align:left;margin-top:50%}.song_info__lyric .on{color:#fff;opacity:1}.mod_songlist_toolbar{margin-left:0;background:rgba(255 255 255 / 80%);backdrop-filter:blur(24px);width:800px;box-sizing:border-box}.sb_main{position:fixed;right:105px;height:420px;bottom:120px;width:800px;box-sizing:border-box;z-index:100;border-radius:0 0 12px 12px}.sb_viewport{background:rgba(255 255 255 / 80%);padding:0 0 0 24px;backdrop-filter:blur(24px);transition:cubic-bezier(.65,.05,.36,1) 1s}.mod_only_lyric{font-size:32px;line-height:64px;font-weight:700}.player__bd{top:96px}.player_music{margin:0 316px 0 208px}@media (min-height:710px) and (max-height:900px){.song_info__lyric{top:unset}.song_info__lyric_box{height:auto;margin-top:-20%}}@media (min-height:1000px) and (max-height:1100px){.song_info__lyric_box{top:unset;margin-top:-20%;height:auto}}@supports (-webkit-appearance:none){.mod_songlist,.sb_overview{margin-right:-18px}}.btn_big_like{right:190px}.btn_big_down{display:none}.btn_big_style_list,.btn_big_style_single{top:2px;right:243px}.btn_play_list{top:3px;right:137px;width:26px;height:26px;background-position:0 -282px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAEx0lEQVR4nO3d3VHcSBQGUEIghAnBGawyWGewG4IzWGewzsBkwmQAGZgMTAbfPmhYUzZqA2p1T4/OqdILUEhz+34ltf7m6goAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARpTkQ5Jbi+UMlw+983GVZAqcp6l3PgSEcyYgUCAgUCAgUCAgUCAgUCAgUCAgUCAgUCAgUCAgUCAgUCAgUCAgUCAgUNA/IAAAAAAAAAAAAAAAAAAAAAAAAADABUpy7P3axdfoXSd2KgICyyIgsCwCAssiILAsAgLLIiCwLAICyyIgsCwCAssiILAsAgLLIiCwLAICyyIgsCx7CUiS6yR/WC5qua6Qgd/1TY2AHLdeanzQqcIH5bxMqxvj932zOiBbb2MVEZBLNDXoGwFhWFODvhEQhjU16BsBYVhTg74REIY1NegbAWFYU4O+ERCGNTXoGwFhWFODvhEQhjU16BsBYVhTg74REIY1NegbAWFYU4O+ERCGNTXoGwFhWFODvhEQhjU16JvdBOQ6c0gsl7MM8cDU1tsI3QgIFAgIFAgIFAgIFAgIFAgIFAgIFAgIFAgIFAgIFAgIFAgIFAgIFAgIFAgIFAgIFy/JIclfSf5Ncpvk2089/P3089vT3/yZ08NYAsJFOoXinyR3K3r7LnN4BITLkORDkq9rm7qm3jWBpz3G185ZeFHv2rBzST6mwqHQVnrXhx3Lme41nutdI3Yo82ucbjv3/qv0rhU7kzkca85ONdW7XuxMBtlzPOldL3YkA8w5fta7ZuxE5rNVw+ldN3Yg87zjbE/llvSuHTuQ5EvvRn+v3rXjwmW+fWRYvevHhUty07vJ1+hdPy5Y5rnH0HrXkAuW5PNGfXuf+VmPY5KHjdaRREDYUOpeMX/MHLjDC+s5nH73WHF9SQSEjaTu4dV9XvGVbZmDcl9xvQLCNlLvwuD9O9ZdLSRb1AZqXft4zDu+7DPznqTK4dYWtYEqL0xI8nnF+qucIKhYEvghdQJyWLH+Q4X1CwjbyPp7r94893hhG1afAq5RC/jF2sZMcqywDft4L1aSaX29edJozNY6VtgGAeHtGo3Z2rNIdxW24dvKbXioUIrtRUCqajRmlzBJP9aryIYiIFU1GrNLOM17rFeRDUVAqmo0ZjUa9Hvef6GwxhOMX7aoTXURkKoajVmtW03ePBdJvZskP25Rm+oiIFU1GrOaNyve5fU3K9a8g/jNe68uIiBVNRy3ms9qfM/8lQiHF9bz9HUJNV8MsfpCZTMRkKoajtunjT7CXX58ac63jdbxqVWdVouAVNVw3EZ+5HaMw6urKwGprfHYjfjShpuWNVotAlJV47GrcldtY4eWNVotAlJVh/Eb6cVxY1z7eC4CUlWH8bvOBi9U2MBDRpp7PImAVNVpDEd4efUYFwZ/FgGpquM4nvOh1niHVk8yv9/1aKmzdB7L45vato2bnjWB/2Wej1R9d9VKr3rnFjSTOSTnsCe5iXBwrtJ3TjLunIP9yHx2q+Up4IeMeraKfcp8yNVib/IlDqkYVebbUmrfu/V4+p+H3p8PqjgF5VPWne26P/0Pewwu1yksf2d+xv3pWs7zOcvDs59/zjynEQoAAAAAAAAAAAAAAAAAAAAAAAAA6vkPWUB8Iq0SK6MAAAAASUVORK5CYII=);background-size:100%;position:absolute}.play_list_open{opacity:1}.mod_btn_comment{display:none}.song_info__lyric_inner>p{max-width:350px;padding:12px 16px;border-radius:12px;opacity:.5}.song_info__lyric_inner>p:hover{background:rgba(255 255 255 / 25%)}.song_info__info{flex:1 0}.list_current .mod_playlist_text .playlist__title,.list_hover .mod_playlist_text .playlist__title{width:30.8986%}.mod_playlist_text .list_current .list_menu,.mod_playlist_text .list_hover .list_menu{position:static;float:left}.mod_playlist_text .playlist__time{position:absolute;right:10px;width:133px;top:0;color:#999}.mod_playlist_text .playlist__time span{position:relative;float:left;font-size:13px}.mod_songlist_toolbar{position:fixed;margin-bottom:0;bottom:540px;right:105px;padding:16px 24px;z-index:100;border-radius:12px 12px 0 0;transition:cubic-bezier(.65,.05,.36,1) 1s}.song_info__cover{width:320px;height:320px}@media (min-height:900px) and (max-height:1000px){.song_info__lyric_box{height:auto}}.mod_songlist{display:flex;flex-direction:column;max-height:100%;overflow:hidden}.sb_overview{height:100%!important}ul.songlist__list{overflow-y:auto}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes bar-out{0%{opacity:1;top:18px}50%{opacity:0;top:50%}90%{opacity:.5;top:unset}100%{opacity:1;top:unset}}.player-bar{justify-content:left;align-items:center;padding-left:3%;display:flex;height:64px;background:#fff;position:fixed;opacity:0;transition:.5s ease-out;width:100%;left:0}.show-bar{opacity:1;animation:1s 1 opacity ease-in}.bar-cover{width:48px;height:48px;box-shadow:0 2px 6px -1px rgba(0 0 0 / 50%);border-radius:5px}.bar-mode{z-index:16;top:18px;filter:brightness(0);animation:opacity 1s 1 ease-in}.mod_player{z-index:10}.lyric-bar{color:#333;text-align:center;font-size:17px;z-index:10;position:absolute;min-height:36px;overflow:hidden;width:100%;bottom:64px;background:#fff;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;border-top:solid 1px #eee;transition:1s ease-in-out;max-height:48px;padding-bottom:4px}.lyric-bar>p{transition:.5s ease-out}@keyframes btn-up{0%{top:calc(100vh - 48px);transform:rotate(180deg);filter:brightness(0)}100%{top:18px;transform:rotate(0);filter:brightness(1)}}@keyframes btn-down{0%{top:18px;transform:rotate(0);filter:brightness(1)}100%{top:calc(100vh - 48px);transform:rotate(180deg);filter:brightness(0)}}.player-action{width:36px;height:36px;border-radius:8px;display:block;position:fixed;right:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFZklEQVR4nO3dz4tVdRjH8asipoJpaokVBgWFVFQLW0REtIgW1iJsEUEURWVBQUG7Cvq5iwhaDNUiDAwDMyihmihcZJBELhKSEoqKJgJDRCT13eLMBRVnvNc553nO95z36x+43+d5/Mw49577fAcDSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkjQFYDWwEngE2A7cBS7LP1VfAhcCdJ83j1uwz9RJwP/AtM/sIuCX7nH0xHYY9M8ziCPABcE32OTsPWAl8N0swTvcuMD/73F0FrAP2jzGPl7PP3FnABWMOY+gz4Lzs83cNsB74+xzm8Xb22TsJ+OIchjE0aUjqA1wB/DWHeTyRXUOnAA/PYRgnh2RRdi2lAy4D/pjjLA4Da7Jr6YwaBjL0aXYtJQMuBQ7UNIs3suvpBGBDTQMZ2gkszK6rNMAa4Jca5/B7dk2dQPUWYt0MyRiAVcBPDczhouzaige82MBgAD7Orq0EVO8e7m1oBtdl11c84LmGhgOwA1iQXWNbAUsZ73Onca3PrrF4wCMNDghge3aNbUQVjt0N935ldp3FA65teEjgb5JTAIuArxvu+f7sOjsD+LnhYQF8mF1nWwCfB/T7tew6OwPYFDAwgG30+NktYAHwSUCf/wWWZ9fbKcD7AYODnoYEmA9sD+rxpux6Own4MmiAW7NrjUbcDyA/QW8K1R+Pk0GD3AbMy645AvBeUE+3ZNfaecSGZAsdDwkwEdTL3vzASUcVkl1Bg+1sSIA3g3q4gx7+XZcKWExgSLLrrRvwUlDvduJnTDmIDck72fXWBXg6qGc+FJoNQzIW4PGgXk1iONoBQzIS4KGgHu3Cb2+2C4ZkVsB9wImA3uwGFmfXqzMgNiRvZdc7KuAe4HhAT/YAS7Pr1SwwJKcA7gKOBfRiL7Asu16NAEMyGAwGA+AO4L+AHuwFVmTXqzHQ85BQ7Sk+GlD7PgxHmahC0vS34oZez653CLiZaidu0/YDq7Lr1RwQ89XRofSQADdSLWZr2gHcStIN9CQkwA3AoYAafwMuzqpTDSA2JK8m1HcVcDCgtj+BddH1KQAdDQnVMumpgJqmgMuj6lICOhYS6lkmPYop4Mqm61ELEBuS5xus4xLg14Aa/sFw9AuxIXm2gfPXvUx6JgeBq+s+vwpAoSGhuWXSpzsEXF/XuVUgCgsJsAL4MeCsh4ENdfRYhaMKyUy3tNbtyTmccxnwQ8AZjwA31dljFW76H19rQ0Lzm9aHjuL95joTWhoSqmfKvgk401Hg9iZ7rMIRG5JHRzhPxKZ1qB6LNxw6O1oSEmAhMZvWjwEbI3uswpEcEqpl0hGb1o8Dd2f0WIUjKSTAPGBrwGueAO7N7LEKB5xPXEgenH7NqGXSD2T3Vx0ALCcuJF8Fvc5j2X1VhxD7362mnfXdM2lsVCFp6s7wKOf8Sb50VlTPQpUakhey+6ceoMyQpC+UUI9QVkhat7dLPUAZISlu0bY6hHaHxHAoH+0MSeeujVPBaFdIvFFW7UM7QuKNsmqv5JB4o6zabzok+4LD4aWZKgfVap6okEzipZkqTVBIvFFW5Wo4JN4oq/I1FBJvlFV31BwSb5RV99QUEi/NVHfNMSRemqnuA1Yz/td3v8dLM9UXwBJgYsRwTABLss8shQPWAk9RLYk7cFIopoBXgLXZZ5QkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZKkUfwPA9EBv4stEe8AAAAASUVORK5CYII=) no-repeat center 1px;background-size:100%;cursor:pointer;z-index:1001;transition:.2s}.hide-player{top:18px}.show-player{transform:rotate(180deg);filter:brightness(0);top:calc(100vh - 48px)}.player-action:hover{background-color:rgba(255 255 255 / 20%)}#player{box-shadow:0 0 5px -1px rgba(0 0 0 / 50%);position:fixed;top:0;width:100%;height:100%;z-index:1000;border:none;transition:1s ease-in}.popup_guide{display:none}.show-player{animation:btn-down 1s 1 ease-in-out both}.hide-player{animation:btn-up 1s 1 running ease-in-out both}#content{width:100%;height:100%;position:fixed;z-index:10;overflow:hidden;border:none;top:0;transition:1s ease-in-out}#app{top:0;left:0;z-index:11;position:fixed;width:100%;background-color:inherit;transition:1s ease-in-out;box-shadow:0 0 6px -1px rgba(0 0 0 / 50%);overflow:hidden}.mod_songlist_toolbar>*{filter:brightness(.4)!important}.mod_songlist_toolbar>*{filter:brightness(.4)!important}.sb_overview *{color:#000!important}.sb_overview .list_menu__item,.sb_overview .songlist__checkbox,.sb_overview .songlist__delete{filter:brightness(.2)}';
document.head.append(s);
let bar = document.createElement("div");
bar.classList.add("player-bar");
bar.innerHTML = '<img class="bar-cover">';
document.querySelector(".mod_player").append(bar);
function imgLsr() {
let e = document.querySelector(".song_info__pic");
let cb = document.querySelector(".cover-blur");
if(!cb) {
cb = document.createElement("style");
cb.classList.add("cover-blur");
document.head.append(cb);
}
if(document.querySelector(".bar-cover")) {
document.querySelector(".bar-cover").src = e.src;
}
cb.innerHTML = ".song_info__cover::after{background: url("+ e.src +") no-repeat}"
};
document.querySelector(".song_info__pic").addEventListener("load", imgLsr);
imgLsr();
let index = document.createElement("iframe");
index.src = "/";
index.setAttribute("id", "content");
player.before(index);
let pa = document.createElement("span");
pa.classList.add("player-action", "hide-player");
document.body.append(pa);
pa.addEventListener("click", hidePlayer);
let lrc_bar = document.createElement("div");
lrc_bar.classList.add("lyric-bar");
player.before(lrc_bar);
document.querySelector("audio").addEventListener("play", setLrc);
});
} else {
let s = document.createElement("style");
s.innerHTML = 'li.top_nav__item:nth-child(3),.footer,.popup_guide,.btn_bottom_feedback,.btn_bottom_player {display: none;}.wrap {margin-bottom: 100px;}';
document.head.append(s);
}
// Your code here...
})();