Sync 0.1.2

Simsv-Software · Aug 22, 2024 · c14b0f9 · c14b0f9
1 parent 495ae9d
commit c14b0f9
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 58 deletions.
diff --git a/src/frontend/assets/components/PublicConfig.js b/src/frontend/assets/components/PublicConfig.js
@@ -8,8 +8,9 @@ const defaultConfig = {
 	lrcShow: true,
 	musicFormats: ".mp3 .wav .flac",
 	backgroundBlur: true,
-	"3dEffect": false,
+	audioFade: true,
 	lyricBlur: true,
+	lyricAlign: "left",
 	lyricSize: 1.5,
 	lyricTranslation: .8,
 	lyricSpace: .5,

diff --git a/src/frontend/assets/components/SimAP.js b/src/frontend/assets/components/SimAP.js
@@ -106,6 +106,7 @@ const switchMusic = (playConfig) => {
 		document.body.classList.remove("musicLoading");
 		SimAPProgress.setValue(audio.currentTime); SimAPProgressBottom.setValue(audio.currentTime);
 		if (!SimAPProgress.progressElement.classList.contains("dragging")) current.textContent = SimAPTools.formatTime(audio.currentTime);
+		if (SimAPControls.audioFadeInterval) return;
 		document.body.classList[!audio.paused ? "add" : "remove"]("playing");
 		SimAPControls.loadAudioState();
 	};
@@ -138,14 +139,15 @@ const switchMusic = (playConfig) => {
 		activeColor: "var(--SimAPTheme)",
 		normalColor: "rgba(0,0,0,.4)",
 		multiLangSupport: config.getItem("lyricMultiLang"),
+		align: config.getItem("lyricAlign"),
 		callback: txt => { ipcRenderer.invoke("lrcUpdate", txt); }
 	});
 	SimAPControls.loadConfig();
 };
 
 
 
-// 流光背景控制器
+// 动态混色控制器
 const PlayerBackground = {
 	init() {
 		canvas = document.getElementById("backgroundAnimation");
@@ -218,9 +220,36 @@ const SimAPControls = {
 	},
 	togglePlay() {
 		if (document.body.classList.contains("musicLoading")) return;
-		document.body.classList[audio.paused ? "add" : "remove"]("playing");
-		audio[audio.paused ? "play" : "pause"]();
+		const audio = document.getElementById("audio");
+		const isPlay = audio.paused;
+		document.body.classList[isPlay ? "add" : "remove"]("playing");
 		SimAPControls.loadAudioState();
+		clearInterval(this.audioFadeInterval);
+		// 音频淡入淡出处理
+		if (config.getItem("audioFade")) {
+			const configVolume = config.getItem("volume");
+			const volumeOffset = configVolume / 10;
+			if (isPlay) audio.play();
+			this.audioFadeInterval = setInterval(() => {
+				if (isPlay) {
+					const newVolume = audio.volume + volumeOffset;
+					if (newVolume > configVolume) {
+						clearInterval(SimAPControls.audioFadeInterval);
+						SimAPControls.audioFadeInterval = null;
+					} else audio.volume = newVolume;
+				} else {
+					const newVolume = audio.volume - volumeOffset;
+					if (newVolume < 0) {
+						clearInterval(SimAPControls.audioFadeInterval);
+						SimAPControls.audioFadeInterval = null;
+						audio.pause();
+					}
+					else audio.volume = newVolume;
+				} 
+			}, 50);
+		} else {
+			audio[isPlay ? "play" : "pause"]();
+		}
 	},
 	prev() {
 		const audio = document.getElementById("audio");
@@ -324,6 +353,7 @@ const SimAPUI = {
 	hide() {
 		if (this.playingAnimation) return;
 		if (!document.body.classList.contains("playerShown")) return;
+		document.exitFullscreen();
 		document.body.classList.remove("playerShown");
 		this.playingAnimation = true;
 		setTimeout(() => {
@@ -373,6 +403,10 @@ document.documentElement.addEventListener("keydown", e => {
 			SimAPUI.hide();
 			document.body.classList.remove("volume");
 			break;
+		case "F11": 
+			if (!document.fullscreenElement && document.body.classList.contains("playerShown")) document.getElementById("playPage").requestFullscreen();
+			else document.exitFullscreen();
+			break;
 	}
 });
 

diff --git a/src/frontend/assets/components/SimLRC.js b/src/frontend/assets/components/SimLRC.js
@@ -127,7 +127,7 @@ class SimLRC {
 			});
 		}
 		refreshLrcProgress(true);
-		setTimeout(() => {container.querySelector("div.active").scrollIntoView({block: "center", behavior: "smooth"});});
+		setTimeout(() => {container.querySelector("div.active").scrollIntoView({block: "center", behavior: "smooth"});}, 50);
 		// 处理用户滚动
 		const handleUserScroll = () => {
 			if (document.body.classList.contains("volume")) return;

diff --git a/src/frontend/assets/components/require.js b/src/frontend/assets/components/require.js
@@ -4,4 +4,3 @@ const path = require("path");
 const musicMetadata = require("music-metadata");
 const nodeId3 = require("node-id3");
 const fflate = require("fflate");
-const flacTagger = require("flac-tagger");
diff --git a/src/frontend/assets/main.css b/src/frontend/assets/main.css
@@ -22,7 +22,7 @@ a{color:#1E9FFF;text-decoration:none;}
 a:hover{text-decoration:underline;}
 a:active{opacity:.8;text-decoration:underline;}
 input,select{background:rgba(0,0,0,.03);padding:8px 10px;border-radius:5px;border:0;font-size:1rem;font-family:inherit;width:100%;margin:5px 0;}
-
+::selection{background:#DAEFFF;color:black;}
 
 
 .left .leftBar div,.right .musicListTitle section b,
@@ -57,6 +57,12 @@ header #hidePlayerBtn{opacity:0;position:absolute;right:120px;pointer-events:non
 
 
 
+
+/* 主窗体 - 左右容器 */
+#homePage{height:100vh;transition:all .2s;}
+.playerShown #homePage{transform:scale(.98);border-radius:20px;transition:all .5s;}
+
+
 /* 主窗体 - 左侧界面 */
 .left{position:fixed;top:0;bottom:0;width:var(--leftBarWidth);padding:35px 10px 0 10px;text-align:center;}
 .left img{width:150px;max-width:calc(100% - 25px);}
@@ -154,6 +160,7 @@ body:not(.disableHighlight) .right #musicListContainer .tableContainer table td>
 .right #settingsPage #settingsContainer .block.folded{margin-top:calc(-5px - var(--height));opacity:0;pointer-events:none;transform:scaleY(0);}
 .right #settingsPage #settingsContainer .block section, .right #extensionPage #extensionContainer>div section{width:100%;margin-right:10px;}
 .right #settingsPage #settingsContainer .block section div, .right #extensionPage #extensionContainer>div section div{font-size:1em;}
+.right #settingsPage #settingsContainer .block section div badge{font-size:.8em;background:rgba(0,0,0,.1);opacity:.5;padding:0 7px;margin-left:5px;margin-top:2px;vertical-align:top;border-radius:10px;display:inline-block;}
 .right #settingsPage #settingsContainer .block section span, .right #extensionPage #extensionContainer>div section span{display:block;font-size:.9em;opacity:.8;word-break:break-all;line-height:1.1em;margin-top:3px;}
 .right #settingsPage #settingsContainer .block button, .right #extensionPage #extensionContainer button{white-space:nowrap;}
 .right #settingsPage #settingsContainer .block .toggle{display:inline-block;height:20px;min-width:35px;max-width:35px;padding:2px;background:rgba(0,0,0,.05);border-radius:10px;vertical-align:middle;transition:background .2s;}
@@ -226,7 +233,7 @@ body:not(.miniModeStatus) .bottom .info .musicInfoBottom>div #miniModeStatus{tra
 
 
 /* 主窗体 - 播放内页 */
-#playPage{position:fixed;top:120vh;left:0;width:100%;height:100%;background:white;transition:top .3s;overflow:hidden;}
+#playPage{position:fixed;top:120vh;left:0;width:100%;height:100%;background:white;transition:top .3s;overflow:hidden;user-select:none;}
 .playerShown #playPage{top:0;}
 
 
@@ -242,6 +249,7 @@ body:not(.miniModeStatus) .bottom .info .musicInfoBottom>div #miniModeStatus{tra
 .miniMode .bottom #bottomProgressBar::after{display:none;}
 .miniMode .bottom .info{top:0;bottom:0!important;left:0;width:170px;bottom:10px;}
 .miniMode .bottom .info .img{width:60px;height:60px;border-radius:0;margin-right:10px;-webkit-app-region:drag;}
+.miniMode .bottom .info .img::after{display:none;}
 .miniMode .bottom .info .musicInfoBottom{font-size:1.1em;max-width:calc(100px / .75);zoom:.75;}
 .miniMode .bottom .info .musicInfoBottom>div{margin-top:-1px;}
 .miniMode .bottom .center{right:15px;zoom:.7;bottom:7.5px;width:220px;left:unset;}

diff --git a/src/frontend/assets/main.js b/src/frontend/assets/main.js
@@ -1,4 +1,4 @@
-SimMusicVersion = "0.1.1";
+SimMusicVersion = "0.1.2";
 
 
 // 窗口处理
@@ -215,7 +215,6 @@ const ExtensionRuntime = {
 					const jsCode = fflate.strFromU8(unzipped[filename]);
 					code += jsCode + "\n";
 				}
-				console.log(code)
 				const extData = config.getItem("ext");
 				extData[packageId] = {
 					version: manifest.version,
@@ -913,7 +912,7 @@ const PlayerController = {
 		document.getElementById("playList").innerHTML = "";
 		config.getItem("playList").forEach(file => {
 			const div = this.createListElement(file);
-			document.getElementById("playList").appendChild(div);
+			if (div) document.getElementById("playList").appendChild(div);
 		});
 		this.loadMusicListActive();
 	},
@@ -940,6 +939,7 @@ const PlayerController = {
 			} 
 		} else {
 			const div = this.createListElement(file);
+			if (!div) return;
 			if (!activeDiv) return alert("当前没有正在播放的曲目。");
 			if (toNext)	activeDiv.insertAdjacentElement("afterend", div);
 			else document.getElementById("playList").appendChild(div);
@@ -950,6 +950,7 @@ const PlayerController = {
 	},
 	// 创建列表元素（用于渲染列表&插入下一首播放）
 	createListElement(file) {
+		if (!lastMusicIndex[file]) return;
 		const div = document.createElement("div");
 		div.innerHTML = `
 			<img src="assets/placeholder.svg" onerror="this.src='assets/placeholder.svg'">
@@ -984,8 +985,8 @@ const PlayerController = {
 						document.getElementById("audio").remove();
 						const audio = document.createElement("audio");
 						audio.id = "audio";
-						audio.volume = config.getItem("volume");
 						document.body.appendChild(audio);
+						loadVolumeUi();
 					} else {
 						SimAPControls.next();
 					}
@@ -1212,8 +1213,8 @@ function setMiniModeStatus(text) {
 // 系统集成
 config.listenChange("systemMenu", value => {ipcRenderer.invoke("regFileExt", value);})
 ipcRenderer.on("fileLaunch", (_event, file) => {
+	file = "file:" + file;
 	updateMusicIndex([file], () => {
-		file = "file:" + file;
 		const list = config.getItem("playList");
 		if (list.includes(file)) PlayerController.switchMusic(file);
 		else PlayerController.switchMusicWithList(file, [file].concat(list));
@@ -1229,22 +1230,25 @@ const SettingsPage = {
 	data: [
 		{type: "title", text: "通用配置"},
 		{type: "boolean", text: "不驻留后台进程", description: "关闭主界面时停止播放并完全退出应用。", configItem: "disableBackground"},
-		{type: "boolean", text: "注册系统菜单", description: "开启后，您可以在音频文件右键的「打开方式」菜单中选择 SimMusic 进行播放。请在移除 SimMusic 前关闭此选项。", configItem: "systemMenu"},
+		{type: "boolean", text: "注册系统菜单", badges: ["experimental"], description: "开启后，您可以在音频文件右键的「打开方式」菜单中选择 SimMusic 进行播放。在移动 SimMusic 程序目录或移除 SimMusic 前，您需要先关闭此选项。", configItem: "systemMenu"},
 		{type: "title", text: "音频扫描"},
 		{type: "input", text: "音频格式", description: "扫描本地音乐时的音频文件扩展名，以空格分隔。", configItem: "musicFormats"},
 		{type: "button", text: "清除音频索引", description: "若您更改了音频元数据，可在此删除索引数据以重新从文件读取。", button: "清除", onclick: () => { SimMusicTools.writeMusicIndex({}, () => { alert("索引数据已清除，按「确定」重载此应用生效。", () => { ipcRenderer.invoke("restart"); }); }); }},
 		{type: "title", text: "播放界面"},
 		{type: "boolean", text: "背景动态混色", description: "关闭后可减少播放页对硬件资源的占用。", configItem: "backgroundBlur"},
-		{type: "boolean", text: "播放页 3D 特效", description: "在播放页的歌曲信息、播放列表与歌词界面使用 3D 视觉效果。", configItem: "3dEffect"},
-		{type: "boolean", text: "歌词层级虚化", description: "若无需虚化效果或需要提升性能可关闭此功能。", configItem: "lyricBlur"},
+		{type: "boolean", text: "3D 特效", badges: ["experimental"], description: "在播放页的歌曲信息、播放列表与歌词视图使用 3D 视觉效果。", configItem: "3dEffect"},
 		{type: "boolean", text: "对播放按钮应用主题色", configItem: "playBtnColor"},
+		{type: "title", text: "播放控制"},
+		{type: "boolean", text: "快速重播", description: "在曲目即将结束时按「快退」按钮以回到当前曲目的开头。", configItem: "fastPlayback"},
+		{type: "boolean", text: "音频淡入淡出", description: "在按下「播放」或「暂停」时对音频的输出音量使用渐变效果。", configItem: "audioFade"},
+		{type: "button", text: "均衡器", badges: ["pending"], description: "下次一定。", button: "配置", onclick: () => { alert("还没写。下次一定。"); }},
+		{type: "title", text: "歌词视图"},
+		{type: "boolean", text: "层级虚化", description: "若无需虚化效果或需要提升性能可关闭此功能。", configItem: "lyricBlur"},
+		{type: "select", text: "文字对齐", options: [["left", "左端对齐"], ["center", "居中对齐"]], description: "此配置项切换曲目生效。", configItem: "lyricAlign"},
 		{type: "range", text: "歌词字号", configItem: "lyricSize", min: 1, max: 3},
 		{type: "range", text: "歌词间距", configItem: "lyricSpace", min: .2, max: 1},
 		{type: "boolean", text: "歌词多语言支持", description: "开启后，时间戳一致的不同歌词将作为多语言翻译同时渲染。此配置项切换曲目生效。", configItem: "lyricMultiLang"},
-		{type: "range", text: "歌词翻译字号", attachTo: "lyricMultiLang" ,configItem: "lyricTranslation", min: .5, max: 1},
-		{type: "title", text: "播放控制"},
-		{type: "boolean", text: "快速重播", description: "在曲目即将结束时按「快退」按钮以回到当前曲目的开头。", configItem: "fastPlayback"},
-		{type: "button", text: "均衡器", description: "下次一定。", button: "配置", onclick: () => { alert("还没写。下次一定。"); }},
+		{type: "range", text: "歌词翻译字号", description: "同时控制歌词视图与桌面歌词中的翻译字号。", attachTo: "lyricMultiLang" ,configItem: "lyricTranslation", min: .5, max: 1},
 		{type: "title", text: "桌面歌词"},
 		{type: "boolean", text: "启动时打开", configItem: "autoDesktopLyrics"},
 		{type: "boolean", text: "在截图中隐藏", description: "其他应用截图或录屏时隐藏桌面歌词的内容，与多数截图或录屏软件相兼容，支持 Windows 10 2004 以上版本及 Windows 11。此功能不会影响您查看歌词，对采集卡等外置硬件无效。", configItem: "desktopLyricsProtection"},
@@ -1264,21 +1268,28 @@ const SettingsPage = {
 		const settingsContainer = document.getElementById("settingsContainer");
 		SettingsPage.loadElementHeight();
 		if (settingsContainer.innerHTML) return;
+		const badges = {
+			"experimental": "<i>&#xED3F;</i>实验性",
+			"pending": "<i>&#xF4C8;</i>暂未支持"
+		};
 		this.data.forEach(data => {
 			const div = document.createElement("div");
+			const normalContent = `
+				<section>
+					<div>
+						${SimMusicTools.escapeHtml(data.text)}
+						${data.badges ? data.badges.map(badge => `<badge>${badges[badge] ?? "<i>&#xF046;</i>未知"}</badge>`) : ""}
+					</div>
+					${data.description ? `<span>${SimMusicTools.escapeHtml(data.description)}</span>` : ""}
+				</section>`;
 			switch (data.type) {
 				case "title":
 					div.classList.add("title");
 					div.textContent = data.text;
 					break;
 				case "boolean":
 					div.classList.add("block");
-					div.innerHTML = `
-						<section>
-							<div>${SimMusicTools.escapeHtml(data.text)}</div>
-							${data.description ? `<span>${SimMusicTools.escapeHtml(data.description)}</span>` : ""}
-						</section>
-						<div class="toggle"></div>`;
+					div.innerHTML = `${normalContent}<div class="toggle"></div>`;
 					div.classList.add(config.getItem(data.configItem) ? "on" : "off");
 					div.onclick = () => {
 						const currentItem = config.getItem(data.configItem);
@@ -1289,36 +1300,21 @@ const SettingsPage = {
 					break;
 				case "range":
 					div.classList.add("block");
-					div.innerHTML = `
-						<section>
-							<div>${SimMusicTools.escapeHtml(data.text)}</div>
-							${data.description ? `<span>${SimMusicTools.escapeHtml(data.description)}</span>` : ""}
-						</section>
-						<div class="range" min="${data.min}" max="${data.max}" value="${config.getItem(data.configItem)}"></div>`;
+					div.innerHTML = `${normalContent}<div class="range" min="${data.min}" max="${data.max}" value="${config.getItem(data.configItem)}"></div>`;
 					const range = new SimProgress(div.querySelector(".range"));
 					range.ondrag = value => { config.setItem(data.configItem, value); };
 					break;
 				case "input":
 					div.classList.add("block");
-					div.innerHTML = `
-						<section>
-							<div>${SimMusicTools.escapeHtml(data.text)}</div>
-							${data.description ? `<span>${SimMusicTools.escapeHtml(data.description)}</span>` : ""}
-						</section>
-						<input type="${data.inputType ?? "text"}">`;
+					div.innerHTML = `${normalContent}<input type="${data.inputType ?? "text"}">`;
 					const input = div.querySelector("input");
 					input.value = config.getItem(data.configItem);
 					input.autocomplete = input.spellcheck = false;
 					input.onchange = () => { config.setItem(data.configItem, input.value); };
 					break;
 				case "select":
 					div.classList.add("block");
-					div.innerHTML = `
-						<section>
-							<div>${SimMusicTools.escapeHtml(data.text)}</div>
-							${data.description ? `<span>${SimMusicTools.escapeHtml(data.description)}</span>` : ""}
-						</section>
-						<select></select>`;
+					div.innerHTML = `${normalContent}<select></select>`;
 					const select = div.querySelector("select");
 					data.options.forEach(option => {
 						const optionEle = document.createElement("option");
@@ -1331,12 +1327,7 @@ const SettingsPage = {
 					break;
 				case "color":
 					div.classList.add("block");
-					div.innerHTML = `
-						<section>
-							<div>${SimMusicTools.escapeHtml(data.text)}</div>
-							${data.description ? `<span>${SimMusicTools.escapeHtml(data.description)}</span>` : ""}
-						</section>
-						<div class="colorInput"><span></span><input type="color"></div>`;
+					div.innerHTML = `${normalContent}<div class="colorInput"><span></span><input type="color"></div>`;
 					const colorInput = div.querySelector("input");
 					colorInput.value = config.getItem(data.configItem);
 					div.querySelector(".colorInput>span").textContent = config.getItem(data.configItem);
@@ -1349,12 +1340,7 @@ const SettingsPage = {
 					break;
 				case "button":
 					div.classList.add("block");
-					div.innerHTML = `
-						<section>
-							<div>${SimMusicTools.escapeHtml(data.text)}</div>
-							${data.description ? `<span>${SimMusicTools.escapeHtml(data.description)}</span>` : ""}
-						</section>
-						<button class="sub">${SimMusicTools.escapeHtml(data.button)}</button>`;
+					div.innerHTML = `${normalContent}<button class="sub">${SimMusicTools.escapeHtml(data.button)}</button>`;
 					div.onclick = data.onclick;
 					break;
 			}

diff --git a/src/frontend/main.html b/src/frontend/main.html
@@ -139,7 +139,6 @@
 							<a>electron/electron</a>
 							<a>Borewit/music-metadata</a>
 							<a>Zazama/node-id3</a>
-							<a>the1812/flac-tagger</a>
 							<a>zhujin917/3sqrt7-context-menu</a>
 							<a>101arrowz/fflate</a>
 							<a>lokesh/color-thief</a>

diff --git a/src/package.json b/src/package.json
@@ -6,7 +6,6 @@
   "author": "Simsv Studio",
   "dependencies": {
     "fflate": "^0.8.2",
-    "flac-tagger": "^1.0.7",
     "music-metadata": "^7.13.5",
     "node-id3": "^0.2.6"
   }