ar0c/xiaomusic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 修改默认主题

Browse Source
This commit is contained in:
涵曦 2024-12-12 00:16:01 +08:00
parent accc449824
commit 73df9dec48
7 changed files with 134 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
xiaomusic/static/default/debug.html
View File

@ -6,9 +6,9 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Debug For XiaoMusic</title> <title>Debug For XiaoMusic</title>
<link rel="stylesheet" type="text/css" href="./main.css?version=1733743591"> <link rel="stylesheet" type="text/css" href="./main.css?version=1733933734">
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script src="./jquery-3.7.1.min.js?version=1733743591"></script> <script src="./jquery-3.7.1.min.js?version=1733933734"></script>
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

4
xiaomusic/static/default/downloadtool.html
View File

@ -4,8 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>歌曲下载工具</title> <title>歌曲下载工具</title>
<link rel="stylesheet" type="text/css" href="./main.css?version=1733743591"> <link rel="stylesheet" type="text/css" href="./main.css?version=1733933734">
<script src="./jquery-3.7.1.min.js?version=1733743591"></script> <script src="./jquery-3.7.1.min.js?version=1733933734"></script>
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

96
xiaomusic/static/default/index.html
View File

@ -5,9 +5,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小爱音箱操控面板</title> <title>小爱音箱操控面板</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<script src="./jquery-3.7.1.min.js?version=1733743591"></script> <script src="./jquery-3.7.1.min.js?version=1733933734"></script>
<link rel="stylesheet" href="./main.css?version=1733743591"> <link rel="stylesheet" href="./main.css?version=1733933734">
<link rel="icon" href="./favicon.ico"> <link rel="icon" href="./favicon.ico">
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
@ -53,69 +53,71 @@
<select id="music_name" class="song-selector"> <select id="music_name" class="song-selector">
</select> </select>
<progress class="progress" id="progress" value="0" max="100"></progress> <div id="device-audio">
<div style="display: flex; justify-content: space-between; width: 100%;"> <progress class="progress" id="progress" value="0" max="100"></progress>
<span class="current-time" id="current-time">0:00</span> <div style="display: flex; justify-content: space-between; width: 100%;">
<div class="current-song" id="playering-music">当前播放歌曲：无</div> <span class="current-time" id="current-time">0:00</span>
<span class="duration" id="duration">0:00</span> <div class="current-song" id="playering-music">当前播放歌曲：无</div>
<span class="duration" id="duration">00:00</span>
</div>
</div> </div>
<audio id="audio" controls src="" autoplay> <audio id="audio" controls src="" autoplay></audio>
</audio>
<div class="buttons"> <div class="buttons">
<div class="player-controls button-group"> <div class="player-controls button-group">
<button onclick="prevTrack()"> <div id="modeBtn" onclick="togglePlayMode()" class="control-button device-enable">
<span class="material-icons">shuffle</span>
<span class="tooltip">切换播放模式</span>
</div>
<div onclick="prevTrack()" class="control-button device-enable">
<span class="material-icons">skip_previous</span> <span class="material-icons">skip_previous</span>
<span class="tooltip">上一首</span> <span class="tooltip">上一首</span>
</button> </div>
<button onclick="playOnDevice()"> <div onclick="play()" class="control-button">
<span class="material-icons" id="playPauseIcon">play_arrow</span> <span class="material-icons-outlined play">play_circle_outline</span>
<span class="tooltip">播放</span> <span class="tooltip">播放</span>
</button> </div>
<button onclick="nextTrack()"> <div onclick="nextTrack()" class="control-button device-enable">
<span class="material-icons">skip_next</span> <span class="material-icons">skip_next</span>
<span class="tooltip">下一首</span> <span class="tooltip">下一首</span>
</button> </div>
<button onclick="stopPlay()"> <div onclick="stopPlay()" class="control-button device-enable">
<span class="material-icons" id="playPauseIcon">stop</span> <span class="material-icons">stop</span>
<span class="tooltip">关机</span> <span class="tooltip">关机</span>
</button> </div>
</div> </div>
<div class="mode-controls button-group"> <div class="mode-controls button-group">
<button id="modeBtn" onclick="togglePlayMode()"> <div onclick="addToFavorites()" class="favorite icon-item device-enable">
<span class="material-icons">shuffle</span>
<span class="tooltip">切换播放模式</span>
</button>
<button onclick="addToFavorites()" class="favorite">
<span class="material-icons">favorite</span> <span class="material-icons">favorite</span>
<span class="tooltip">收藏歌曲</span> <p>收藏</p>
</button> </div>
<button onclick="toggleVolume()"> <div onclick="toggleVolume()" class="icon-item device-enable">
<span class="material-icons">volume_up</span> <span class="material-icons">volume_up</span>
<span class="tooltip">调节音量</span> <p>音量</p>
</button> </div>
<button onclick="toggleLocalPlay()" id="web_play"> <!--
<div onclick="toggleLocalPlay()" id="web_play">
<span class="material-icons">headphones</span> <span class="material-icons">headphones</span>
<span class="tooltip">网页播放</span> <span class="tooltip">网页播放</span>
</button> </div>
</div> -->
<div class="mode-controls button-group"> <div onclick="toggleSearch()" class="icon-item device-enable">
<button onclick="toggleSearch()">
<span class="material-icons">search</span> <span class="material-icons">search</span>
<span class="tooltip">搜索歌曲</span> <p>搜索</p>
</button> </div>
<button onclick="togglePlayLink()"> <div onclick="togglePlayLink()" class="icon-item device-enable">
<span class="material-icons">link</span> <span class="material-icons">link</span>
<span class="tooltip">播放链接</span> <p>链接</p>
</button> </div>
<button onclick="toggleTimer()"> <div onclick="toggleTimer()" class="icon-item device-enable">
<span class="material-icons">timer</span> <span class="material-icons">timer</span>
<span class="tooltip">定时关机</span> <p>定时</p>
</button> </div>
<button onclick="openSettings()"> <div onclick="openSettings()" class="icon-item">
<span class="material-icons">settings</span> <span class="material-icons">settings</span>
<span class="tooltip">设置</span> <p>设置</p>
</button> </div>
</div> </div>
</div> </div>
</div> </div>
@ -194,7 +196,7 @@
Powered by XiaoMusic Powered by XiaoMusic
</div> </div>
<script src="./md.js?version=1733743591"> <script src="./md.js?version=1733933734">
</script> </script>
</body> </body>

2
xiaomusic/static/default/m3u.html
View File

@ -5,7 +5,7 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>M3U to JSON Converter</title> <title>M3U to JSON Converter</title>
<link rel="stylesheet" type="text/css" href="./main.css?version=1733743591"> <link rel="stylesheet" type="text/css" href="./main.css?version=1733933734">
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>

44
xiaomusic/static/default/main.css
View File

@ -112,12 +112,12 @@ button:hover {
bottom: 150%; /* 控制tooltip相对按钮的位置 */ bottom: 150%; /* 控制tooltip相对按钮的位置 */
left: 50%; left: 50%;
margin-left: -50px; /* 调整位置以居中显示 Tooltip */ margin-left: -50px; /* 调整位置以居中显示 Tooltip */
width: 100px; /* 设置固定宽度以保证足够的显示空间 */ width: 80px; /* 设置固定宽度以保证足够的显示空间 */
white-space: nowrap; /* 防止换行 */ white-space: nowrap; /* 防止换行 */
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
button:hover .tooltip,.option-inline:hover .tooltip { button:hover .tooltip,.option-inline:hover .tooltip,.control-button:hover .tooltip {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
@ -129,9 +129,12 @@ button:hover .tooltip,.option-inline:hover .tooltip {
} }
.option-inline:hover .tooltip { .option-inline:hover .tooltip {
/* 位置调整到左边 */ /* 位置调整到左边 */
left: -80px; /* 调整位置以居中显示 Tooltip */ left: -50px; /* 调整位置以居中显示 Tooltip */
bottom: 0; bottom: 0;
} }
.control-button{
position: relative; /* 为tooltip绝对定位做准备 */
}
.progress { .progress {
width: 90%; width: 90%;
height: 6px; height: 6px;
@ -193,8 +196,14 @@ progress::-webkit-progress-value {
.player-controls { .player-controls {
display: flex; display: flex;
justify-content: center; justify-content: space-around;
align-items: center; align-items: center;
margin-top: 20px;
margin-bottom: 20px;
}
.play {
font-size: 48px;
} }
.footer { .footer {
@ -202,6 +211,7 @@ progress::-webkit-progress-value {
bottom: 20px; bottom: 20px;
font-size: 14px; font-size: 14px;
color: #555; color: #555;
user-select: none;
} }
.timer-tooltip { .timer-tooltip {
@ -306,3 +316,29 @@ textarea {
.song-selector { .song-selector {
width: 300px; 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;
}

48
xiaomusic/static/default/md.js
View File

@ -29,7 +29,28 @@ const playModes = {
let favoritelist = []; //收藏列表 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() { function playOnDevice() {
console.log("playOnDevice");
var music_list = $("#music_list").val(); var music_list = $("#music_list").val();
var music_name = $("#music_name").val(); var music_name = $("#music_name").val();
if (no_warning) { if (no_warning) {
@ -153,7 +174,7 @@ $.get("/getsetting", function (data, status) {
} }
console.log("cur_did", did); console.log("cur_did", did);
console.log("dids", dids); 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]; did = dids[0];
localStorage.setItem("cur_did", did); localStorage.setItem("cur_did", did);
} }
@ -189,6 +210,11 @@ $.get("/getsetting", function (data, status) {
} }
} }
}); });
var option = $("<option></option>")
.val("web_device")
.text("本机")
.prop("selected", "web_device" === did);
$("#did").append(option);
console.log("cur_did", did); console.log("cur_did", did);
$("#did").change(function () { $("#did").change(function () {
@ -198,6 +224,16 @@ $.get("/getsetting", function (data, status) {
console.log("cur_did", did); console.log("cur_did", did);
location.reload(); 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) { 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", () => { $("#playurl").on("click", () => {
var url = $("#music-url").val(); var url = $("#music-url").val();
const encoded_url = encodeURIComponent(url); const encoded_url = encodeURIComponent(url);

6
xiaomusic/static/default/setting.html
View File

@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>小爱音箱操控面板</title> <title>小爱音箱操控面板</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="./jquery-3.7.1.min.js?version=1733743591"></script> <script src="./jquery-3.7.1.min.js?version=1733933734"></script>
<script src="./setting.js?version=1733743591"></script> <script src="./setting.js?version=1733933734"></script>
<link rel="stylesheet" type="text/css" href="./main.css?version=1733743591"> <link rel="stylesheet" type="text/css" href="./main.css?version=1733933734">
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>