feat: 页面与设置中的HOST不一致时弹窗提醒 (#281)

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);
+    console.log('网页播放出现错误: ', 'color: #007acc;', e.currentTarget.error.code,e.currentTarget.error.message);
-    alert(e.currentTarget.error.code==4 ? "无法打开媒体文件，XIAOMUSIC_HOSTNAME地址错误，请重新设置" : "在线播放失败，请截图反馈: "+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; 
+  }
 });

xiaomusic/static/default/index.html

@@ -94,5 +94,17 @@ var vConsole = new window.VConsole();
     <footer>
       <p>Powered by <a href="https://github.com/hanxi/xiaomusic" target="_blank">xiaomusic</a></p>
     </footer>
+    <dialog id="valid-host">
+      <form method="dialog">
+        <p>当前页面的HOST与设置中的HOST不一致，请检查是否设置错误</p>
+        <p>当前HOST: <span id="local-host"></span></p>
+        <p>设置中的HOST: <span id="setting-host"></span></p>
+        <div class="btn-list">
+        <a href="./setting.html" target="_blank">立即修改</a>
+        <button value="no-warning" type="submit">继续并不再显示</button>
+        <button value="cancle" type="submit">取消</button>
+        </div>
+      </form>
+    </dialog>
   </body>
 </html>

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;
 }