From ee6f4ee4e4e12307bade09f70e0f5e06c9eb8cb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B6=B5=E6=9B=A6?= <im.hanxi@gmail.com>
Date: Thu, 11 Jul 2024 11:09:12 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20#106=20=E7=BD=91=E9=A1=B5=E4=B8=8A?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=9F=B3=E7=AE=B1=E5=BD=93=E5=89=8D=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=EF=BC=88=E6=92=AD=E6=94=BE=E4=B8=ADor=E7=A9=BA?=
 =?UTF-8?q?=E9=97=B2=E4=B8=AD=EF=BC=89=E4=BB=A5=E5=8F=8A=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E7=9A=84=E6=92=AD=E6=94=BE=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 xiaomusic/httpserver.py     | 11 ++++++++--
 xiaomusic/static/app.js     | 40 +++++++++++++++++++++++++++++++------
 xiaomusic/static/index.html |  4 ++--
 xiaomusic/static/setting.js |  1 +
 xiaomusic/static/style.css  | 38 +++++++++--------------------------
 5 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/xiaomusic/httpserver.py b/xiaomusic/httpserver.py
index 3d7e5bb5f..52089cc45 100644
--- a/xiaomusic/httpserver.py
+++ b/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"])
diff --git a/xiaomusic/static/app.js b/xiaomusic/static/app.js
index 1afbccec3..d5366acfb 100644
--- a/xiaomusic/static/app.js
+++ b/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}`);
+        }
+      }
     });
   }
 
diff --git a/xiaomusic/static/index.html b/xiaomusic/static/index.html
index a3f30206b..ba18ac41c 100644
--- a/xiaomusic/static/index.html
+++ b/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>
diff --git a/xiaomusic/static/setting.js b/xiaomusic/static/setting.js
index 845913b06..70ba74683 100644
--- a/xiaomusic/static/setting.js
+++ b/xiaomusic/static/setting.js
@@ -106,6 +106,7 @@ $(function(){
       data: JSON.stringify(data),
       success: (msg) => {
         alert(msg);
+        location.reload();
       },
       error: (msg) => {
         alert(msg);
diff --git a/xiaomusic/static/style.css b/xiaomusic/static/style.css
index c570b0c9f..392212b00 100644
--- a/xiaomusic/static/style.css
+++ b/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;
+}