diff --git a/xiaomusic/static/default/app.js b/xiaomusic/static/default/app.js index ae07e05..7b6bc93 100644 --- a/xiaomusic/static/default/app.js +++ b/xiaomusic/static/default/app.js @@ -29,7 +29,7 @@ $(function(){ var offset = 0; var duration = 0; - + let no_warning = localStorage.getItem('no-warning'); // 拉取现有配置 $.get("/getsetting", function(data, status) { console.log(data, status); @@ -196,7 +196,16 @@ $(function(){ var music_list = $("#music_list").val(); var music_name = $("#music_name").val(); let cmd = "播放列表" + music_list + "|" + music_name; - sendcmd(cmd); + if (no_warning) { + sendcmd(cmd); + return; + } + $.get(`/musicinfo?name=${music_name}`, function(data, status) { + console.log(data); + if (data.ret == "OK") { + validHost(data.url) && sendcmd(cmd); + } + }); }); $("#web_play").on("click", () => { @@ -204,7 +213,7 @@ $(function(){ $.get(`/musicinfo?name=${music_name}`, function(data, status) { console.log(data); if (data.ret == "OK") { - $('audio').attr('src',data.url); + validHost(data.url) && $('audio').attr('src',data.url); } }); }); @@ -375,7 +384,7 @@ $(function(){ .catch(error => { console.error('Error fetching data:', error); }); - }, 300)); + }, 500)); // 动态显示保存文件名输入框 const musicNameSelect = document.getElementById('music-name'); @@ -438,7 +447,41 @@ $(function(){ } $("audio").on("error", (e) => { - console.log('app.js:441 e.currentTarget.error.code,e.currentTarget.error.message', 'color: #007acc;', e.currentTarget.error.code,e.currentTarget.error.message); - alert(e.currentTarget.error.code==4 ? "无法打开媒体文件,XIAOMUSIC_HOSTNAME地址错误,请重新设置" : "在线播放失败,请截图反馈: "+e.currentTarget.error.message); + console.log('网页播放出现错误: ', 'color: #007acc;', e.currentTarget.error.code,e.currentTarget.error.message); + alert(e.currentTarget.error.code==4 ? "无法打开媒体文件,XIAOMUSIC_HOSTNAME或端口地址错误,请重新设置" : "在线播放失败,请截图反馈: "+e.currentTarget.error.message); }); + function validHost(url) { + //如果 localStorage 中有 no-warning 则直接返回true + if (no_warning) { + return true; + } + const local = location.host; + const host = new URL(url).host; + // 如果当前页面的Host与设置中的XIAOMUSIC_HOSTNAME、PORT一致, 不再提醒 + if (local === host) { + + localStorage.setItem('no-warning', 'true'); + // 设置全局变量 + no_warning = true; + return true; + } + // 如果当前页面的Host与设置中的XIAOMUSIC_HOSTNAME、PORT不一致 + const validHost = document.getElementById('valid-host'); + let validFlag = false; + $('#local-host').text(local); + $('#setting-host').text(host); + validHost.showModal(); + //监听validHost的close事件 + function _handleClose() { + console.log('%c提醒HOST不一致弹窗,用户已选择: ', 'color: #007acc;', validHost.returnValue); + if (validHost.returnValue == "no-warning") { + localStorage.setItem('no-warning', 'true'); + no_warning = true; + validFlag = true; + } + validHost.removeEventListener('close', _handleClose) + } + validHost.addEventListener('close', _handleClose) + return validFlag; + } }); diff --git a/xiaomusic/static/default/index.html b/xiaomusic/static/default/index.html index 0d8f2f7..6e29584 100644 --- a/xiaomusic/static/default/index.html +++ b/xiaomusic/static/default/index.html @@ -94,5 +94,17 @@ var vConsole = new window.VConsole(); + +
+

当前页面的HOST与设置中的HOST不一致,请检查是否设置错误

+

当前HOST:

+

设置中的HOST:

+
+ 立即修改 + + +
+
+
diff --git a/xiaomusic/static/default/style.css b/xiaomusic/static/default/style.css index 48ae289..b2688e0 100644 --- a/xiaomusic/static/default/style.css +++ b/xiaomusic/static/default/style.css @@ -107,4 +107,59 @@ footer { .login-tips a { color: rgb(9, 105, 218); text-decoration: underline; +} +#valid-host { + padding: 20px; + border: none; + border-radius: 10px; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + +#valid-host::backdrop { + background-color: rgba(0, 0, 0, 0.5); +} + + +#valid-host form input { + width: fit-content; + margin: 0; + height: fit-content; +} +#valid-host p { + word-break: break-all; +} +#valid-host p span { + color: red; +} +#valid-host a, #valid-host a:visited { + color: rgb(9, 105, 218);; + text-decoration: underline; + display: flex; + align-items: center; +} +#valid-host a:hover { + color: rgb(9, 95, 198); +} +#valid-host .btn-list { + display: flex; + justify-content: center; + margin-top: 20px; +} + +#valid-host .btn-list button { + width: fit-content; + min-width: 60px; + height: 40px; + border: none; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + border-radius: 10px; + background-color: #008CBA; +} +#valid-host .btn-list button:hover { + font-weight:bold; + background-color: #007CBA; } \ No newline at end of file