diff --git a/xiaomusic/static/default/debug.html b/xiaomusic/static/default/debug.html index d8a7baa..8861bfa 100644 --- a/xiaomusic/static/default/debug.html +++ b/xiaomusic/static/default/debug.html @@ -6,9 +6,9 @@ Debug For XiaoMusic - + - + diff --git a/xiaomusic/static/default/downloadtool.html b/xiaomusic/static/default/downloadtool.html index bee55df..51484bd 100644 --- a/xiaomusic/static/default/downloadtool.html +++ b/xiaomusic/static/default/downloadtool.html @@ -4,8 +4,8 @@ 歌曲下载工具 - - + + diff --git a/xiaomusic/static/default/index.html b/xiaomusic/static/default/index.html index 8cab872..bc63147 100644 --- a/xiaomusic/static/default/index.html +++ b/xiaomusic/static/default/index.html @@ -5,9 +5,9 @@ 小爱音箱操控面板 - - - + + + @@ -53,69 +53,71 @@ - -
- 0:00 -
当前播放歌曲：无
- 0:00 +
+ +
+ 0:00 +
当前播放歌曲：无
+ 00:00 +
- + +
- -
+
+ play_circle_outline 播放 - -
+
skip_next 下一首 - -
+
+ stop 关机 - +
- - -
+
volume_up - 调节音量 - -
+ +
search - 搜索歌曲 - -
+
link - 播放链接 - -
+
timer - 定时关机 - -
+
settings - 设置 - +

设置

+
@@ -194,7 +196,7 @@ Powered by XiaoMusic - diff --git a/xiaomusic/static/default/m3u.html b/xiaomusic/static/default/m3u.html index 80687ea..54bbb01 100644 --- a/xiaomusic/static/default/m3u.html +++ b/xiaomusic/static/default/m3u.html @@ -5,7 +5,7 @@ M3U to JSON Converter - + diff --git a/xiaomusic/static/default/main.css b/xiaomusic/static/default/main.css index ab4d9d6..150b22a 100644 --- a/xiaomusic/static/default/main.css +++ b/xiaomusic/static/default/main.css @@ -112,12 +112,12 @@ button:hover { bottom: 150%; /* 控制tooltip相对按钮的位置 */ left: 50%; margin-left: -50px; /* 调整位置以居中显示 Tooltip */ - width: 100px; /* 设置固定宽度以保证足够的显示空间 */ + width: 80px; /* 设置固定宽度以保证足够的显示空间 */ white-space: nowrap; /* 防止换行 */ opacity: 0; transition: opacity 0.3s; } -button:hover .tooltip,.option-inline:hover .tooltip { +button:hover .tooltip,.option-inline:hover .tooltip,.control-button:hover .tooltip { visibility: visible; opacity: 1; } @@ -129,9 +129,12 @@ button:hover .tooltip,.option-inline:hover .tooltip { } .option-inline:hover .tooltip { /* 位置调整到左边 */ - left: -80px; /* 调整位置以居中显示 Tooltip */ + left: -50px; /* 调整位置以居中显示 Tooltip */ bottom: 0; } +.control-button{ + position: relative; /* 为tooltip绝对定位做准备 */ +} .progress { width: 90%; height: 6px; @@ -193,8 +196,14 @@ progress::-webkit-progress-value { .player-controls { display: flex; - justify-content: center; + justify-content: space-around; align-items: center; + margin-top: 20px; + margin-bottom: 20px; +} + +.play { + font-size: 48px; } .footer { @@ -202,6 +211,7 @@ progress::-webkit-progress-value { bottom: 20px; font-size: 14px; color: #555; + user-select: none; } .timer-tooltip { @@ -306,3 +316,29 @@ textarea { .song-selector { width: 300px; } + +.mode-controls { + display: flex; + justify-content: space-around; + align-items: center; + padding: 10px 0; + border-top: 1px solid #ddd; + color: #555; +} +.icon-item { + text-align: center; +} + +.icon-item p { + font-size: 12px; + margin: 5px 0 0; +} +.disabled { + color: #ccc; + pointer-events: none; +} + +span,p { + cursor: pointer; + user-select: none; +} diff --git a/xiaomusic/static/default/md.js b/xiaomusic/static/default/md.js index 47e9245..9c5ff03 100644 --- a/xiaomusic/static/default/md.js +++ b/xiaomusic/static/default/md.js @@ -29,7 +29,28 @@ const playModes = { let favoritelist = []; //收藏列表 +function webPlay() { + console.log("webPlay"); + const music_name = $("#music_name").val(); + $.get(`/musicinfo?name=${music_name}`, function (data, status) { + console.log(data); + if (data.ret == "OK") { + validHost(data.url) && $("audio").attr("src", data.url); + } + }); +} + +function play() { + var did = $("#did").val(); + if (did == "web_device") { + webPlay(); + } else { + playOnDevice(); + } +} + function playOnDevice() { + console.log("playOnDevice"); var music_list = $("#music_list").val(); var music_name = $("#music_name").val(); if (no_warning) { @@ -153,7 +174,7 @@ $.get("/getsetting", function (data, status) { } console.log("cur_did", did); console.log("dids", dids); - if (dids.length > 0 && (did == null || did == "" || !dids.includes(did))) { + if (did != "web_device" && dids.length > 0 && (did == null || did == "" || !dids.includes(did))) { did = dids[0]; localStorage.setItem("cur_did", did); } @@ -189,6 +210,11 @@ $.get("/getsetting", function (data, status) { } } }); + var option = $("") + .val("web_device") + .text("本机") + .prop("selected", "web_device" === did); + $("#did").append(option); console.log("cur_did", did); $("#did").change(function () { @@ -198,6 +224,16 @@ $.get("/getsetting", function (data, status) { console.log("cur_did", did); location.reload(); }); + + if (did == "web_device") { + $("#audio").fadeIn(); + $("#device-audio").fadeOut(); + $(".device-enable").addClass('disabled'); + } else { + $("#audio").fadeOut(); + $("#device-audio").fadeIn(); + $(".device-enable").removeClass('disabled'); + } }); function compareVersion(version1, version2) { @@ -333,16 +369,6 @@ $("#play_music_list").on("click", () => { }); }); -$("#web_play").on("click", () => { - const music_name = $("#music_name").val(); - $.get(`/musicinfo?name=${music_name}`, function (data, status) { - console.log(data); - if (data.ret == "OK") { - validHost(data.url) && $("audio").attr("src", data.url); - } - }); -}); - $("#playurl").on("click", () => { var url = $("#music-url").val(); const encoded_url = encodeURIComponent(url); diff --git a/xiaomusic/static/default/setting.html b/xiaomusic/static/default/setting.html index 4480c7a..511f394 100644 --- a/xiaomusic/static/default/setting.html +++ b/xiaomusic/static/default/setting.html @@ -5,9 +5,9 @@ 小爱音箱操控面板 - - - + + +