From cb29025f7e92c4b3ca3182f59c5d501b56b7f128 Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <1152958806@qq.com>
Date: Tue, 4 Jul 2023 22:46:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=B3=E4=B9=90=E9=A1=B5=E9=9D=A2=E6=B7=BB?=
=?UTF-8?q?=E5=8A=A0=EF=BC=8C=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=9C=89bug?=
=?UTF-8?q?=E5=90=8E=E9=9D=A2=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
settings.yaml | 1 -
templates/assets/js/heo.js | 54 +++
templates/assets/libs/aplayer/music.css | 568 ++++++++++++++++++++++++
templates/modules/head.html | 4 +
templates/modules/layouts/layout.html | 18 +-
templates/music.html | 39 ++
theme.yaml | 4 +
7 files changed, 681 insertions(+), 7 deletions(-)
create mode 100644 templates/assets/libs/aplayer/music.css
create mode 100644 templates/music.html
diff --git a/settings.yaml b/settings.yaml
index 444eea07..633af1c3 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -1569,7 +1569,6 @@ spec:
- $formkit: group
name: nav_music
label: 左下角音乐配置项
- if: "$get(nav_musicEnable).value"
value:
id:
server:
diff --git a/templates/assets/js/heo.js b/templates/assets/js/heo.js
index 9e4b0fa7..640edbef 100644
--- a/templates/assets/js/heo.js
+++ b/templates/assets/js/heo.js
@@ -446,4 +446,58 @@ var heo = {
document.documentElement.classList.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
},
+
+ // 音乐节目切换背景
+ changeMusicBg: function (isChangeBg = true) {
+ if (window.location.pathname != "/music") {
+ return;
+ }
+ const anMusicBg = document.getElementById("an_music_bg");
+
+ if (isChangeBg) {
+ // player listswitch 会进入此处
+ const musiccover = document.querySelector("#anMusic-page .aplayer-pic");
+ anMusicBg.style.backgroundImage = musiccover.style.backgroundImage;
+ } else {
+ // 第一次进入，绑定事件，改背景
+ let timer = setInterval(() => {
+ const musiccover = document.querySelector("#anMusic-page .aplayer-pic");
+ // 确保player加载完成
+ if (musiccover) {
+ clearInterval(timer);
+ anMusicBg.style.backgroundImage = musiccover.style.backgroundImage;
+ // 绑定事件
+ heo.addEventListenerChangeMusicBg();
+
+ // 暂停nav的音乐
+ if (
+ document.querySelector("#nav-music meting-js").aplayer &&
+ !document.querySelector("#nav-music meting-js").aplayer.audio.paused
+ ) {
+ heo.musicToggle();
+ }
+ }
+ }, 100);
+ }
+ },
+ addEventListenerChangeMusicBg: function () {
+ const anMusicPage = document.getElementById("anMusic-page");
+ const aplayerIconMenu = anMusicPage.querySelector(".aplayer-info .aplayer-time .aplayer-icon-menu");
+
+ anMusicPage.querySelector("meting-js").aplayer.on("loadeddata", function () {
+ heo.changeMusicBg();
+ console.info("player loadeddata");
+ });
+
+ aplayerIconMenu.addEventListener("click", function () {
+ document.getElementById("menu-mask").style.display = "block";
+ document.getElementById("menu-mask").style.animation = "0.5s ease 0s 1 normal none running to_show";
+ });
+
+ document.getElementById("menu-mask").addEventListener("click", function () {
+ if (window.location.pathname != "/music") return;
+ anMusicPage.querySelector(".aplayer-list").classList.remove("aplayer-list-hide");
+ });
+ },
+
}
\ No newline at end of file
diff --git a/templates/assets/libs/aplayer/music.css b/templates/assets/libs/aplayer/music.css
new file mode 100644
index 00000000..0faedc85
--- /dev/null
+++ b/templates/assets/libs/aplayer/music.css
@@ -0,0 +1,568 @@
+#an_music_bg {
+ display: none;
+ filter: blur(63px);
+ opacity: .6;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+ filter: alpha(opacity=60);
+ position: fixed;
+ z-index: -999;
+ background-attachment: local;
+ background-position: center center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ width: 200%;
+ height: 200%;
+ top: -50%;
+ left: -50%;
+ -webkit-transform: rotate(0);
+ -moz-transform: rotate(0);
+ -o-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ -webkit-transition: .3s;
+ -moz-transition: .3s;
+ -o-transition: .3s;
+ -ms-transition: .3s;
+ transition: .3s
+}
+
+body {
+ background: #0d0d0d;
+}
+
+#an_music_bg {
+ display: block;
+}
+
+body:has(#anMusic-page) #web_bg {
+ display: none;
+}
+body:has(#anMusic-page) #page {
+ min-height: calc(0px)
+}
+@media screen and (max-width: 768px) {
+ body:has(#anMusic-page) .page .layout#content-inner {
+ background: 0 0!important;
+ }
+ body:has(#anMusic-page) #page-header.not-top-img:not(.nav-fixed) #nav{
+ background: 0 0!important;
+ }
+}
+
+
+
+
+body:has(#anMusic-page) #footer,
+body:has(#anMusic-page) #nav-music {
+ display: none;
+}
+
+#anMusic-page .aplayer-body {
+ width: 40%;
+ height: 75vh;
+}
+
+#anMusic-page ol>li:hover {
+ background: #ffffff33;
+ border-radius: 6px;
+}
+
+
+
+@media screen and (max-width: 1400px) {
+
+ body #anMusic-page #anMusicBtnGetSong,
+ body #anMusic-page #anMusicRefreshBtn,
+ body #anMusic-page #anMusicSwitching {
+ right: 7vw
+ }
+
+ body #anMusic-page #anMusicSwitching {
+ bottom: 100px
+ }
+
+ body #anMusic-page #anMusicRefreshBtn {
+ bottom: 160px
+ }
+
+ body #anMusic-page #anMusicBtnGetSong {
+ bottom: 220px
+ }
+}
+
+#anMusic-page #anMusicBtnGetSong,
+#anMusic-page #anMusicRefreshBtn,
+#anMusic-page #anMusicSwitching {
+ position: fixed;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ width: 50px;
+ height: 50px;
+ bottom: 100px;
+ padding: 5px;
+ background: var(--heo-white-op);
+ backdrop-filter: saturate(180%) blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-radius: 50%;
+ color: #fff;
+ text-align: center;
+ -webkit-box-pack: center;
+ -moz-box-pack: center;
+ -o-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ cursor: pointer;
+ z-index: 2
+}
+
+#anMusic-page #anMusicBtnGetSong {
+ right: 11vw
+}
+
+#anMusic-page #anMusicRefreshBtn {
+ right: 7vw
+}
+
+#anMusic-page #anMusicSwitching {
+ right: 15vw
+}
+
+@media screen and (max-width: 768px) {
+ #anMusic-page div#anMusicBtnGetSong {
+ right: 80px;
+ bottom: 150px
+ }
+
+ #anMusic-page div#anMusicRefreshBtn {
+ right: 20px;
+ bottom: 150px
+ }
+
+ #anMusic-page div#anMusicSwitching {
+ right: 140px;
+ bottom: 150px
+ }
+}
+
+#anMusic-page meting-js .aplayer {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-direction: reverse;
+ -moz-box-direction: reverse;
+ -o-box-direction: reverse;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ -o-box-orient: horizontal;
+ -webkit-flex-direction: row-reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+ background: rgba(0, 0, 0, 0);
+ border: none;
+ -webkit-box-shadow: none;
+ box-shadow: none
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body {
+ width: 40%;
+ height: calc(100vh - 169px)
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-pic {
+ float: none;
+ width: 180px;
+ height: 180px;
+ border-radius: 12px;
+ margin: auto;
+ left: 0;
+ right: 0;
+ -webkit-transition: background-image .5s ease-in-out;
+ -moz-transition: background-image .5s ease-in-out;
+ -o-transition: background-image .5s ease-in-out;
+ -ms-transition: background-image .5s ease-in-out;
+ transition: background-image .5s ease-in-out;
+ background-size: cover;
+ background-color: transparent !important
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info {
+ margin: 0 20px 0 20px;
+ border-bottom: none
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music {
+ text-align: center;
+ height: auto;
+ margin: 15px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music .aplayer-author,
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music .aplayer-title {
+ font-size: 1.7rem;
+ font-weight: 700;
+ color: #fff
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc {
+ height: 800%;
+ margin-top: 10px;
+ mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p {
+ font-size: 20px;
+ line-height: 20px !important;
+ height: 20px !important;
+ margin: 20px 0 !important;
+ color: #fff
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
+ min-height: 20px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc::after,
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc::before {
+ display: none
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller {
+ position: fixed;
+ max-width: 1500px;
+ margin: auto;
+ left: 0;
+ right: 0;
+ bottom: 50px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap {
+ margin: 0 160px 0 150px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
+ height: 6px;
+ border-radius: 4px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
+ height: 6px;
+ border-radius: 4px;
+ background: var(--heo-white) !important
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
+ width: 20px;
+ height: 20px;
+ margin-top: -7px;
+ -webkit-transform: none;
+ -moz-transform: none;
+ -o-transform: none;
+ -ms-transform: none;
+ transform: none;
+ background: #fff !important
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
+ height: 6px;
+ border-radius: 4px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time {
+ position: absolute;
+ width: 100%;
+ bottom: 21px;
+ height: 0;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-pack: end;
+ -moz-box-pack: end;
+ -o-box-pack: end;
+ -ms-flex-pack: end;
+ -webkit-justify-content: flex-end;
+ justify-content: flex-end
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap .aplayer-volume-bar-wrap {
+ bottom: 0;
+ right: -5px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
+ width: 2rem;
+ height: 1.6rem;
+ margin-left: 6px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
+ fill: var(--heo-white);
+ opacity: .8;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+ filter: alpha(opacity=80)
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
+ margin-right: 15px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
+ margin-right: 18px;
+ margin-top: -8px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-back {
+ position: absolute;
+ left: 0;
+ display: inline
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-play {
+ position: absolute;
+ left: 40px;
+ display: inline
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-forward {
+ position: absolute;
+ left: 80px;
+ display: inline
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-menu {
+ display: none
+}
+
+#anMusic-page meting-js .aplayer .aplayer-list {
+ width: 60%;
+ height: 100%
+}
+
+#anMusic-page meting-js .aplayer ol {
+ padding-right: 25px
+}
+
+#anMusic-page meting-js .aplayer ol>li {
+ border-top: 1px solid transparent;
+ font-size: 14px
+}
+
+#anMusic-page meting-js .aplayer ol>li:hover {
+ background: rgba(255, 255, 255, .2);
+ border-radius: 6px
+}
+
+#anMusic-page meting-js .aplayer ol>li.aplayer-list-light {
+ background: rgba(255, 255, 255, .2);
+ border-radius: 6px;
+ padding: 20px 15px
+}
+
+#anMusic-page meting-js .aplayer ol>li.aplayer-list-light span.aplayer-list-title {
+ font-weight: bolder
+}
+
+#anMusic-page meting-js .aplayer ol>li.aplayer-list-light .aplayer-list-cur {
+ display: none
+}
+
+#anMusic-page meting-js .aplayer ol>li span {
+ color: var(--heo-white)
+}
+
+#anMusic-page meting-js .aplayer ol>li span.aplayer-list-author {
+ opacity: .6;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+ filter: alpha(opacity=60)
+}
+
+@media screen and (max-width: 768px) {
+ body[data-type=music] #rightside {
+ display: none
+ }
+
+ body[data-type=music] #content-inner,
+ body[data-type=music] #page {
+ z-index: auto
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list {
+ position: fixed;
+ z-index: 1002;
+ width: 100%;
+ bottom: -88%;
+ left: 0;
+ background: var(--sidebar-bg);
+ height: auto;
+ border-radius: 15px 15px 0 0;
+ padding: 15px 0
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list.aplayer-list-hide {
+ bottom: 0 !important
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list ol {
+ max-height: 60vh !important;
+ padding-right: 0
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list ol>li {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ margin: 0 10px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list ol>li span {
+ color: var(--font-color)
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list ol>li span.aplayer-list-title {
+ width: 30%;
+ max-width: 55%;
+ width: auto;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ overflow: hidden;
+ -webkit-box-orient: vertical
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list ol>li span.aplayer-list-author {
+ position: absolute;
+ right: 10px;
+ width: auto;
+ max-width: 35%;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ overflow: hidden;
+ -webkit-box-orient: vertical
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list ol>li.aplayer-list-light {
+ background: #33a673;
+ padding: 5px 20px;
+ border-radius: 10px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list ol>li.aplayer-list-light span {
+ color: #fff
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-list ol>li.aplayer-list-light span.aplayer-list-author {
+ right: 15px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body {
+ width: 100%;
+ position: fixed;
+ margin: auto;
+ left: 0;
+ right: 0;
+ top: 100px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc {
+ margin-top: 40px;
+ height: auto;
+ max-height: 200%;
+ min-height: 100%;
+ mask-image: linear-gradient(to bottom, #000, #000, #000, #000, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
+ color: #33a673
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller {
+ width: 100%;
+ bottom: 100px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-volume-wrap {
+ left: -66px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
+ bottom: 0;
+ right: 7px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap {
+ margin: 0 30px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time {
+ bottom: -40px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
+ position: absolute;
+ width: 100%;
+ margin-right: 0;
+ margin-top: -33px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner .aplayer-dtime {
+ position: absolute;
+ right: 30px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner .aplayer-ptime {
+ position: absolute;
+ left: 35px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-back {
+ margin: auto;
+ right: 110px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-play {
+ margin: auto;
+ right: 0;
+ left: 0
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-forward {
+ margin: auto;
+ left: 110px;
+ right: 0
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-order {
+ position: absolute;
+ left: 22px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-loop {
+ position: absolute;
+ right: 25px
+ }
+
+ #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-menu {
+ display: inline;
+ position: absolute;
+ right: 25px;
+ top: -90px
+ }
+}
\ No newline at end of file
diff --git a/templates/modules/head.html b/templates/modules/head.html
index 4f3f67fb..7e4a5d36 100644
--- a/templates/modules/head.html
+++ b/templates/modules/head.html
@@ -172,6 +172,7 @@
loadProgressBar: [[${theme.config.other.loadProgressBar}]],
error404Enable: [[${theme.config.other.error_404Enable}]],
allPlaylist: [[${theme.config.other.nav_music.all_playlist}]],
+ isMusic: [[${ htmlType == 'music'}]],
date_suffix: {
just: '刚刚',
min: '分钟前',
@@ -224,6 +225,9 @@
case '404':
title = '页面没有找到'
break;
+ case 'music':
+ title = '音乐馆'
+ break;
}
if (title != '')
diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html
index 074258c5..826c8037 100644
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@@ -15,6 +15,9 @@
+
+
+
@@ -77,17 +80,15 @@
-
-
+
-
+
-
+
-
+
-
@@ -352,6 +353,11 @@
if ([[${ theme.config.snackbar.switch }]]) {
heo.hidecookie()
}
+
+ //音乐页面切换歌曲调用
+ if(GLOBAL_CONFIG.isMusic){
+ heo.changeMusicBg(false);
+ }
diff --git a/templates/music.html b/templates/music.html
new file mode 100644
index 00000000..d62b55f7
--- /dev/null
+++ b/templates/music.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+