// ==UserScript==
// @name:en Userscript Helper for Flat-Style Netease Music Userstyle 适用于网易云音乐扁平风格样式表的辅助用户脚本
// @description:en Provides a better experience for Flat-Style Netease Music Userstyle. 为网易云音乐扁平风格样式表提供更佳的用户体验。
// @name:zh 适用于网易云音乐扁平风格样式表的辅助用户脚本
// @description:zh 为网易云音乐扁平风格样式表提供更佳的用户体验。
// @name 适用于网易云音乐扁平风格样式表的辅助用户脚本
// @description 为网易云音乐扁平风格样式表提供更佳的用户体验。
// @namespace wTonyChen.flatnmusich
// @version 0.2.2-0.8.8
// @author wTonyChen (https://wtonychen.github.io)
// @compatible chrome 87+
// @compatible edge 87+
// @compatible opera 73+
// @compatible firefox 84+
// @license Apache-2.0
// @homepage https://wtonychen.github.io/flatnmusic/
// @supportURL https://github.com/wTonyChen/flatnmusic/issues
// @match http*://music.163.com/*
// @run-at document-end
// @grant none
// ==/UserScript==
!(function () {
"use strict";
let e = "wk-fnm-hi-cfg",
t = document.querySelector("." + e);
t ||
((t = document.createElement("div")),
(t.className = e),
document.body.appendChild(t));
let a,
s = getComputedStyle(t),
l = {
86: "1f603",
85: "1f60a",
359: "263a",
95: "1f60d",
363: "1f618",
96: "1f631",
356: "1f62d",
362: "1f619",
352: "1f633",
342: "1f61e",
343: "1f601",
348: "1f61d",
353: "1f612",
361: "1f621",
341: "1f60f",
97: "1f613",
346: "1f616",
354: "1f630",
350: "1f628",
351: "1f637",
357: "1f602",
355: "1f635",
115: "1f47f",
360: "1f604",
94: "1f61c",
87: "1f614",
358: "1f625",
33: "2764",
34: "1f494",
303: "1f498",
309: "2b50",
314: "1f4a2",
89: "1f4a9",
13: "1f44d",
372: "1f44e",
14: "1f64f",
379: "1f46b",
380: "1f46f",
374: "1f645",
262: "1f481",
106: "1f48f",
376: "1f491",
367: "1f444",
81: "1f436",
78: "1f431",
100: "1f437",
459: "1f430",
450: "1f424",
461: "1f414",
116: "1f47b",
411: "1f385",
101: "1f47d",
52: "1f48e",
107: "1f381",
0: "1f466",
1: "1f467",
337: "1f382",
186: "1f51e",
312: "2b55",
313: "274c",
},
n = "/style/web2/emt/emoji_",
i = (e) => {
let t = s.getPropertyValue("--" + e);
if (t)
try {
t &&
t.indexOf("/") > -1 &&
(t = decodeURIComponent(t.replace(/\//g, "%")));
} catch (e) {}
return (
((0 === t.indexOf('"') && t.lastIndexOf('"') === t.length - 1) ||
(0 === t.indexOf("'") && t.lastIndexOf("'") === t.length - 1)) &&
(t = t.substr(1, t.length - 2)),
t
);
},
o = (e) => {
let t;
return window.localStorage && (t = localStorage.getItem(e)), t;
},
r = i("wkhi-a"),
c = i("wkhi-b");
if (!c) return void t.parentElement.removeChild(t);
document.documentElement.setAttribute("wk-style-assist", "true");
let d = o("wkoptin") || !1,
m = function () {
let e = arguments[0];
for (let t = 1; t < arguments.length; t++) {
let a = RegExp("\\{" + t + "\\}", "g");
e = e.replace(a, arguments[t]);
}
return e;
};
((e) => {
let t,
a = 0,
s = !1,
l = document.querySelector("#g-topbar"),
n = document.querySelector("#g_iframe"),
i = 0,
r = 0,
c = !0;
if (!l || !Object.is(window.self, window.top)) return;
let d = 1.6 * l.getBoundingClientRect().height,
m = (e) => {
t && t.cancel(),
(r = 0),
(i = 0),
(a = 0),
(c = !1),
(t = l.animate([{ transform: "translateY(0)" }], {
duration: 200,
fill: "backwards",
easing: "cubic-bezier(.16,1,.29,.99)",
})),
(t.onfinish = (e) => {
(c = !0), (l.style.transform = "translateY(0)");
});
};
n.addEventListener("load", (e) => {
n.contentWindow.addEventListener("beforeunload", m),
n.contentDocument.addEventListener("scroll", (e) => {
c || t.cancel(),
(a = n.contentWindow.scrollY),
s ||
(window.requestAnimationFrame((e) => {
((e) => {
if (o("wksdscrolling")) {
let t = e - i;
(r = Math.max(Math.min(r + t, d), 0)),
(l.style.top = "0 !important"),
(l.style.transform = `translateY(-${r}px)`);
} else (l.style.top = ""), (l.style.transform = ""), (r = 0);
i = e;
})(a),
(s = !1);
}),
(s = !0));
});
});
})(),
o("wksplayinguiani") &&
((DocumentFragment.prototype.appendChildHost =
DocumentFragment.prototype.appendChild),
(DocumentFragment.prototype.appendChild = function () {
if (
arguments[0].classList.contains("m-layer") &&
arguments[0].parentElement
) {
let e = arguments[0].cloneNode(!0);
arguments[0].parentElement.insertBefore(e, arguments[0]),
e.addEventListener("animationend", (t) => {
e.remove();
}),
e.classList.add("hidden");
}
"g_playlist" == arguments[0].id
? arguments[0].classList.add("hidden")
: this.appendChildHost.call(this, ...arguments);
}),
(Element.prototype.appendChildHost = Element.prototype.appendChild),
(Element.prototype.appendChild = function () {
"g_playlist" == arguments[0].id &&
arguments[0].classList.remove("hidden"),
this.appendChildHost.call(this, ...arguments);
})),
o("wksfullpl") &&
((e) => {
let t = i("wkhi-c"),
a = i("wkhi-d");
if (t && a) {
(t = t.split("|")), (a = a.split("|"));
for (let e = 0; e < t.length; e++)
for (let n = 0; n < a.length; n++)
(s = t[e]),
(l = a[n]),
(document.cookie = `${s};path=${l};max-age=3153600000`);
var s, l;
}
})();
let f = (e) => {
if (
(o("wkshiresimages") &&
((e) => {
let t = document.querySelectorAll("img[data-src]");
for (let e = 0; e < t; e++)
t[e].dataset.src && "" == t[e].src && (t[e].src = t[e].dataset.src);
let a = document.querySelectorAll('img[src*="param="]');
for (let e = 0; e < a.length; e++) {
let t = a[e].src.split("?")[0];
if (a[e].src != t) {
let s = new Image(),
l = (n) => {
a[e] &&
(a[e].src.split("?")[0] == t &&
((a[e].src = t), a[e].classList.add("wk-hires-loaded")),
s.removeEventListener("load", l, !1));
};
s.addEventListener("load", l, !1),
a[e].classList.remove("wk-hires-loaded"),
(s.src = t);
}
}
})(),
o("wksemojisym") &&
((e) => {
let t = document.querySelectorAll(`img[src*="${n}"]`);
for (let e = 0; e < t.length; e++) {
let a = t[e].src.split(n)[1];
a &&
((a = a.split(".")[0]),
!isNaN(+a) &&
l[+a] &&
(t[
e
].src = `data:image/svg+xml;charset=utf-8,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="21"%20height="21"><text%20xmlns="http://www.w3.org/2000/svg"%20font-size="14"%20x="10.5"%20y="12.4"%20font-family="AppleColorEmoji,'Noto%20Color%20Emoji','Segoe%20UI%20Emoji'"%20style="text-anchor:middle;dominant-baseline:middle">%26%23x${
l[+a]
};</text></svg>`));
}
})(),
o("wksimprovedlook"))
) {
if ("user" == location.pathname.substring(1).split("/")[0]) {
let e = document.querySelector(".m-proifo dt img"),
t = document.querySelector(".g-bd");
e &&
e.src &&
t &&
(document.documentElement.classList.add("has-upb"),
(t.style.cssText = `--upb:url("${e.src}")`));
let a = document.querySelector(".m-proifo .name .tit"),
s = document.querySelector(".m-proifo .name #j-name-wrap");
a &&
s &&
((s.dataset.wkUsernameFull = s.title = a.innerText),
s.classList.add("wk-full-username"));
}
let e = document.querySelector(".g-wrap>.m-info .cover img"),
t = document.querySelector(".g-wrap>.m-info");
e &&
t &&
(document.documentElement.classList.add("has-mib"),
(t.style.cssText = `--mib:url("${e.src}")`));
}
let t =
location.hash &&
("video" == location.hash.substring(2).split("?")[0].split("/")[0] ||
"mv" == location.hash.substring(2).split("?")[0].split("/")[0]),
s = "/" == location.pathname,
i =
"video" == location.pathname.substring(1).split("/")[0] ||
"mv" == location.pathname.substring(1).split("/")[0];
if (
o("wksmusicsessionmeta") &&
"mediaSession" in navigator &&
(i || (s && !t))
) {
let t = document.querySelector(
i ? ".n-mv .title h2" : ".m-playbar .words .name"
),
s = document.querySelector(
i ? ".n-mv .title .name" : ".m-playbar .words .by"
),
l = document.querySelector(
i ? ".m-ctvideo .poster .pic" : ".m-playbar .head img"
),
n = [],
o =
(document.querySelector(i ? null : ".m-playbar .btns .prv"),
document.querySelector(
i
? ".m-ctvideo.z-play .controls .wrap .play"
: ".m-playbar .btns .ply"
),
document.querySelector(i ? null : ".m-playbar .btns .nxt"),
document.querySelector(i ? ".m-ctvideo" : ".m-playbar .btns .ply"));
(o = o
? o.classList.contains(i ? "z-play" : "pas")
? "playing"
: o.classList.contains(i ? "z-pause" : "ply")
? "paused"
: "none"
: "none"),
l &&
l.src &&
(n = [
{
src: l.src.split("?")[0] + "?param=96y96",
sizes: "96x96",
type: "image/jpeg",
},
{
src: l.src.split("?")[0] + "?param=128y128",
sizes: "128x128",
type: "image/jpeg",
},
{
src: l.src.split("?")[0] + "?param=192y192",
sizes: "192x192",
type: "image/jpeg",
},
{
src: l.src.split("?")[0] + "?param=256y256",
sizes: "256x256",
type: "image/jpeg",
},
{
src: l.src.split("?")[0] + "?param=384y384",
sizes: "384x384",
type: "image/jpeg",
},
{
src: l.src.split("?")[0] + "?param=512y512",
sizes: "512x512",
type: "image/jpeg",
},
{ src: l.src.split("?")[0], sizes: "any", type: "image/jpeg" },
]);
try {
let e = {
title: t ? t.innerText : document.title,
artist: s ? s.innerText : "",
album: s ? s.innerText : "",
artwork: n,
};
!((e, t) => {
if ("object" == typeof e)
try {
e = JSON.stringify(e);
} catch (e) {}
if ("object" == typeof t)
try {
t = JSON.stringify(t);
} catch (e) {}
return e == t;
})(e, a) &&
i &&
((a = e), (navigator.mediaSession.metadata = new MediaMetadata(a)));
} catch (e) {}
}
};
f(),
window.setInterval(f, 500),
c &&
(function () {
if ("/user/update" == location.pathname) {
let e = (e) => {
let t = document.querySelector("#baseBox");
if (t) {
let e = `<div class="item"><h3><span class="f-fs1">辅助脚本设置</span><span class="sub s-fc3">辅助脚本版本：0.2.2-0.8.8</span><span class="sub s-fc3">样式表版本：${r}</span></h3><ul class="n-plist n-plist-1">{1}</ul></div>`,
a =
'<li><label><input type="checkbox" class="f-rdi" {2}>{1}</label></li>',
s = [
{
label:
"使用样式表的增强外观",
lsm: "wksimprovedlook",
},
{
label: "显示完整歌单",
lsm: "wksfullpl",
},
{
label: "显示高清图片",
lsm: "wkshiresimages",
},
{
label:
"启用视频页面的媒体信息显示",
lsm: "wksmusicsessionmeta",
test: "'mediaSession' in navigator",
},
{
label:
"使用动态固定的顶栏 (会忽略 顶栏滚动状态 设置, Beta)",
lsm: "wksdscrolling",
},
{
label:
"将表情图片替换成 Emoji 表情 (Beta)",
lsm: "wksemojisym",
},
{
label:
"使用正在播放歌单界面和窗口的增强动画 (刷新页面应用更改, Beta)",
lsm: "wksplayinguiani",
},
],
l = "";
for (let e = 0; e < s.length; e++) {
if (s[e].roi && !d) continue;
let t = !0;
if (s[e].test) {
t = !1;
try {
t = !!window.eval(s[e].test);
} catch (e) {}
}
if (!t) continue;
let n = o(s[e].lsm);
l += m(
a,
s[e].label,
`${n ? "checked " : ""}data-wk-lsm="${s[e].lsm}"`
);
}
l = m(e, l);
let n = document.createElement("div");
(n.className = "n-priv f-cb"),
(n.innerHTML = l),
n.addEventListener("change", (e) => {
let t = e.target.closest("[data-wk-lsm]"),
a = t.dataset.wkLsm;
t &&
a &&
((e, t) => {
window.localStorage && localStorage.setItem(e, t);
})(a, t.checked ? "1" : "");
}),
t.appendChild(n);
}
};
window.addEventListener("load", e);
}
})();
})();
