feat: #106 网页上显示音箱当前状态（播放中or空闲中）以及当前的播放模式

xiaomusic/httpserver.py

@@ -90,8 +90,15 @@ def searchmusic():
 def playingmusic():
     did = request.args.get("did")
     if not xiaomusic.did_exist(did):
-        return ""
-    return xiaomusic.playingmusic(did)
+        return {"ret": "Did not exist"}
+
+    is_playing = xiaomusic.isplaying(did)
+    cur_music = xiaomusic.playingmusic(did)
+    return {
+        "ret": "OK",
+        "is_playing": is_playing,
+        "cur_music": cur_music,
+    }
 
 
 @app.route("/isplaying", methods=["GET"])

xiaomusic/static/app.js

@@ -1,8 +1,13 @@
 $(function(){
   $container=$("#cmds");
-  append_op_button_name("全部循环");
-  append_op_button_name("单曲循环");
-  append_op_button_name("随机播放");
+
+  const PLAY_TYPE_ONE = 0; // 单曲循环
+  const PLAY_TYPE_ALL = 1; // 全部循环
+  const PLAY_TYPE_RND = 2; // 随机播放
+  append_op_button("play_type_all", "全部循环", "全部循环");
+  append_op_button("play_type_one", "单曲循环", "单曲循环");
+  append_op_button("play_type_rnd", "随机播放", "随机播放");
+
   append_op_button_name("刷新列表");
   append_op_button_name("下一首");
   append_op_button_name("关机");
@@ -42,6 +47,17 @@ $(function(){
             .text(cur_device.name)
             .prop('selected', value === did);
         $("#did").append(option);
+
+        if (cur_device.play_type == PLAY_TYPE_ALL) {
+          $("#play_type_all").css('background-color', '#b1a8f3');
+          $("#play_type_all").text('✔️ 全部循环');
+        } else if (cur_device.play_type == PLAY_TYPE_ONE) {
+          $("#play_type_one").css('background-color', '#b1a8f3');
+          $("#play_type_one").text('✔️ 单曲循环');
+        } else if (cur_device.play_type == PLAY_TYPE_RND) {
+          $("#play_type_rnd").css('background-color', '#b1a8f3');
+          $("#play_type_rnd").text('✔️ 随机播放');
+        }
       }
     });
   });
@@ -123,14 +139,17 @@ $(function(){
   });
 
   function append_op_button_name(name) {
-    append_op_button(name, name);
+    append_op_button(null, name, name);
   }
 
-  function append_op_button(name, cmd) {
+  function append_op_button(id, name, cmd) {
     // 创建按钮
     const $button = $("<button>");
     $button.text(name);
     $button.attr("type", "button");
+    if (id !== null) {
+      $button.attr("id", id);
+    }
 
     // 设置按钮点击事件
     $button.on("click", () => {
@@ -172,6 +191,9 @@ $(function(){
         if (cmd == "刷新列表") {
           setTimeout(refresh_music_list, 3000);
         }
+        if (["全部循环", "单曲循环", "随机播放"].includes(cmd)) {
+          location.reload();
+        }
       },
       error: () => {
         // 请求失败时执行的操作
@@ -204,7 +226,13 @@ $(function(){
   function get_playing_music() {
     $.get(`/playingmusic?did=${did}`, function(data, status) {
       console.log(data);
-      $("#playering-music").text(data);
+      if (data.ret == "OK") {
+        if (data.is_playing) {
+          $("#playering-music").text(`【播放中】 ${data.cur_music}`);
+        } else {
+          $("#playering-music").text(`【空闲中】 ${data.cur_music}`);
+        }
+      }
     });
   }
 

xiaomusic/static/index.html

@@ -45,8 +45,8 @@ <h2>小爱音箱操控面板
       <datalist id="autocomplete-list"></datalist>
       <input id="music-name" type="text" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)" list="autocomplete-list"></input>
       <input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)"></input>
-      <button id="play">播放</button>
-      <div class="container">
+      <div>
+        <button id="play">播放</button>
         <div id="playering-music" class="text"></div>
       </div>
     </div>

xiaomusic/static/setting.js

@@ -106,6 +106,7 @@ $(function(){
       data: JSON.stringify(data),
       success: (msg) => {
         alert(msg);
+        location.reload();
       },
       error: (msg) => {
         alert(msg);

xiaomusic/static/style.css

@@ -29,35 +29,6 @@ input,select {
   height: 40px;
 }
 
-.container{
-  width: 280px;
-  overflow: hidden;
-  display: inline-block;
-}
-@keyframes text-scroll {
-  0% {
-    left: 100%;
-  }
-  25% {
-    left: 50%;
-  }
-  50% {
-    left: 0%;
-  }
-  75% {
-    left: -50%;
-  }
-  100% {
-    left: -100%;
-  }
-}
-.text {
-  white-space: nowrap;
-  font-weight: bold;
-  position: relative;
-  animation: text-scroll 10s linear infinite;
-}
-
 .rows {
   display: flex;
   flex-direction: column;
@@ -97,3 +68,12 @@ footer {
   vertical-align: middle; /* 确保与复选框垂直居中对齐 */
   margin-left: 1px; /* 给复选框和标签之间一些距离，如果需要的话 */
 }
+
+.text {
+  margin: 10px;
+  width: 150px;
+  height: 50px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+}