feat: 增加播放进度 (#160)

* fix: windows下保存配置失败

* feat: 增加播放进度

xiaomusic/httpserver.py

@@ -144,10 +144,14 @@ def playingmusic(did: str = "", Verifcation=Depends(verification)):
 
     is_playing = xiaomusic.isplaying(did)
     cur_music = xiaomusic.playingmusic(did)
+    # 播放进度
+    offset,duration = xiaomusic.get_offset_duration(did)
     return {
         "ret": "OK",
         "is_playing": is_playing,
         "cur_music": cur_music,
+        "offset": offset,
+        "duration": duration,
     }
 
 

xiaomusic/static/app.js

@@ -23,6 +23,9 @@ $(function(){
   append_op_button_name("30分钟后关机");
   append_op_button_name("60分钟后关机");
 
+  var offset = 0;
+  var duration = 0;
+
   // 拉取现有配置
   $.get("/getsetting", function(data, status) {
     console.log(data, status);
@@ -271,7 +274,26 @@ $(function(){
         } else {
           $("#playering-music").text(`【空闲中】 ${data.cur_music}`);
         }
+        offset = data.offset;
+        duration = data.duration;
       }
     });
   }
+  setInterval(()=>{
+      if (duration > 0) {
+        offset++;
+        $("#progress").val(offset / duration * 100);
+        $("#play-time").text(`${formatTime(offset)}/${formatTime(duration)}`)
+      }else{
+        $("#play-time").text(`${formatTime(0)}/${formatTime(0)}`)
+      }
+    },1000)
+  function formatTime(seconds) {
+    var minutes = Math.floor(seconds / 60);
+    var remainingSeconds =Math.floor(seconds % 60);
+    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
 });
+
+
+

xiaomusic/static/index.html

@@ -44,6 +44,10 @@ <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>
+      <div style="display: flex; align-items: center">
+        <progress id="progress" value="0" max="100" style="width: 270px"></progress>
+        <div id="play-time" style="margin-left: 10px">00:00/00:00</div>
+      </div>
       <div>
         <button id="play">播放</button>
         <div id="playering-music" class="text"></div>

xiaomusic/xiaomusic.py

@@ -805,6 +805,9 @@ def playingmusic(self, did):
         self.log.debug(f"playingmusic. cur_music:{cur_music}")
         return cur_music
 
+    def get_offset_duration(self, did):
+        return self.devices[did].get_offset_duration()
+
     # 当前是否正在播放歌曲
     def isplaying(self, did):
         return self.devices[did].isplaying()
@@ -865,6 +868,8 @@ def update_config_from_setting(self, data):
 
     # 重新初始化
     async def reinit(self, **kwargs):
+        for handler in self.log.handlers:
+            handler.close()
         self.setup_logger()
         await self.init_all_data(self.session)
         self._gen_all_music_list()
@@ -923,6 +928,10 @@ def __init__(self, xiaomusic: XiaoMusic, device: Device, group_name: str):
         self._next_timer = None
         self._timeout = 0
         self._playing = False
+        # 播放进度
+        self._start_time = 0
+        self._duration = 0
+
         # 关机定时器
         self._stop_timer = None
         self._last_cmd = None
@@ -931,6 +940,13 @@ def __init__(self, xiaomusic: XiaoMusic, device: Device, group_name: str):
     def get_cur_music(self):
         return self.device.cur_music
 
+    def get_offset_duration(self):
+        if not self._playing:
+            return -1, -1
+        offset = time.time() - self._start_time
+        duration = self._duration
+        return offset, duration
+
     # 初始化播放列表
     def update_playlist(self):
         if self.device.cur_playlist not in self.xiaomusic.music_list:
@@ -1056,6 +1072,8 @@ async def _playmusic(self, name):
             self.log.info(f"【{name}】不会设置下一首歌的定时器")
             return
         sec = sec + self.config.delay_sec
+        self._start_time = time.time()
+        self._duration = sec
         await self.set_next_music_timeout(sec)
         self.xiaomusic.save_cur_config()