Skip to content

Commit

Permalink
Sync 0.0.4-beta
Browse files Browse the repository at this point in the history
  • Loading branch information
@YanJi314
YanJi314 committed Aug 15, 2024
1 parent 98cc194 commit f40c3f8
Show file tree
Hide file tree
Showing 14 changed files with 436 additions and 207 deletions.
2 changes: 1 addition & 1 deletion src/frontend/assets/components/ContextMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ class ContextMenu {
if (item.label) {
d = document.createElement("div");
d.classList.add("item");
d.innerText = item.label;
d.textContent = item.label;
if (item.submenu) {
if (item.submenu.length == 0) {
item.submenu = [{
Expand Down
3 changes: 2 additions & 1 deletion src/frontend/assets/components/PublicConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ const defaultConfig = {
loop: 0,
lrcShow: true,
musicFormats: ".mp3 .wav .flac",
listDomCache: true,
backgroundBlur: true,
"3dEffect": false,
lyricBlur: true,
lyricSize: 1.5,
lyricTranslation: .8,
Expand All @@ -26,6 +26,7 @@ const defaultConfig = {
desktopLyricsLeft: screen.width / 2,
extensions: ["assets/extensions/local.json"],
extensionCache: {},
musicListSort: [1, 1],
}

const configListeners = {};
Expand Down
13 changes: 11 additions & 2 deletions src/frontend/assets/components/SimAP.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ body:not(.playing) #background>div{animation-play-state:paused;}
@keyframes animation-left{0%{transform:translateY(25%) translateX(0%) skew(-40deg, 20deg);}50%{transform:translateY(200%) translateX(150%) skew(40deg, 0deg);}100%{transform:translateY(25%) translateX(0%) skew(-40deg, 20deg);}}
@keyframes animation-right{0%{transform:translateY(5%) translateX(0%) skew(40deg, 20deg);}50%{transform:translateY(200%) translateX(-150%) skew(-40deg, 0deg);}100%{transform:translateY(5%) translateX(0%) skew(40deg, 20deg);}}

.playerContainer{position:absolute;inset:0;margin:20px max(calc(50vw - 500px), 90px);}
.playerContainer{position:absolute;inset:0;margin:20px max(calc(50vw - 500px), 90px);transition:transform .2s;}
#playPage .SimProgress{--SimProgressTheme:var(--SimAPTheme)!important;}

/* 音频控件 */
Expand All @@ -27,6 +27,8 @@ body:not(.playing) #background>div{animation-play-state:paused;}
.controls .progressControl{display:flex;align-items:center;margin:10px 0;}
.controls .progressControl span{width:55px;font-size:.85em;opacity:.8;}
.controls .progressControl span:last-child{text-align:right;}
.musicLoading #progressBar>div,.musicLoading #bottomProgressBar>div{animation:progressLoading 1s linear infinite;background-image:linear-gradient(-45deg,rgba(0,0,0,.1) 25%,transparent 0,transparent 50%,rgba(0,0,0,.1) 0,rgba(0,0,0,.1) 75%,transparent 0,transparent)!important;background-repeat:repeat-x;background-size:25px 20px;}
@keyframes progressLoading{to{background-position:25px 0;}}
/* 下方按钮 */
.controls .buttons,.bottom .center{align-items:center;margin-top:5px;display:flex;align-items:center;justify-content:center;}
.controls .buttons>div,.bottom .center>div,.bottom .volBtnBottom>div{width:50px;height:50px;position:relative;font-size:1.5em;transition:all .3s;opacity:.3;border-radius:100px;overflow:hidden;}
Expand All @@ -38,6 +40,9 @@ body:not(.playing) #background>div{animation-play-state:paused;}
.controls .buttons>.play>i:last-child,.bottom .center>.play>i:last-child{opacity:0;transform:scale(.4);}
.playing .controls .buttons>.play>i:first-child,.playing .bottom .center>.play>i:first-child{opacity:0;transform:scale(.4);}
.playing .controls .buttons>.play>i:last-child,.playing .bottom .center>.play>i:last-child{opacity:1;transform:none;}
.controls .buttons>.play i:first-child,.bottom .center>.play i:first-child{padding-left:3.5px;}
.playBtnColor .controls .buttons{color:var(--SimAPTheme);}
.playBtnColor .bottom .center>.play{color:#1E9FFF;}
/* 音量控制 */
.volume .controls .buttons>div{width:0;opacity:0!important;}
.volume .controls .buttons>.volBtn{width:180px;color:rgba(0,0,0,.7);background:rgba(0,0,0,.05)!important;transform:none!important;opacity:1!important;mask:unset;border-radius:100px;}
Expand All @@ -48,6 +53,10 @@ body:not(.playing) #background>div{animation-play-state:paused;}
.loopList .loopBtn i::after{content:"\F072";}
.loopSingle .loopBtn i::after{content:"\F075";}
.loopRandom .loopBtn i::after{content:"\F124";}
/* 3D特效 */
body:not(.hideLyrics.hideList) .playerContainer{transform:translateX(-25px);}
.threeEffect .controls{transform:perspective(900px) rotateY(10deg);}
.threeEffect .lyrics,.list{transform:perspective(900px) rotateY(-12.5deg);}

/* 歌词区域 */
.lyrics{position:absolute;left:410px;top:0;width:calc(100% - 410px);font-size:var(--lrcSize);height:100%;transform-origin:left center;transition:all .3s;mask:linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.6) 15%,#fff 25%,#fff 75%,hsla(0,0%,100%,.6) 85%,hsla(0,0%,100%,0));}
Expand All @@ -71,5 +80,5 @@ body:not(.hideList) .listBtn{color:var(--SimAPTheme);opacity:.7;}
.list>div>div>b{display:block;width:100%;font-size:1.1em;}
.list>div>div>span{display:block;width:100%;opacity:.8;font-size:.9em;}
.list>div i{opacity:.3;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:opacity .2s;}
.list>div i:hover{opacity:.8;}
.list>div i:hover,.list>div i:active{opacity:.8;}
.list>div.active i{opacity:0;pointer-events:none;}
51 changes: 35 additions & 16 deletions src/frontend/assets/components/SimAP.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,16 @@ const SimAPTools = {
const switchMusic = (playConfig) => {
// 初始化界面
document.getElementById("album").src = document.getElementById("albumBottom").src = playConfig.album;
document.querySelector(".musicInfo>b").innerText = document.querySelector(".musicInfoBottom>b").innerText = playConfig.title;
document.querySelector(".musicInfo>div").innerText = document.querySelector(".musicInfoBottom>div").innerText = playConfig.artist;
document.querySelector(".musicInfo>b").textContent = document.querySelector(".musicInfoBottom>b").textContent = playConfig.title;
document.querySelector(".musicInfo>div").textContent = document.querySelector(".musicInfoBottom>div").textContent = playConfig.artist;
document.getElementById("audio").src = playConfig.audio;
document.getElementById("audio").currentTime = 0;
if (playConfig.play) setTimeout(() => {document.body.classList.add("playing");SimAPControls.loadAudioState();});
document.body.classList.add("withCurrentMusic");
document.body.classList.add("musicLoading");
if (playConfig.play) setTimeout(() => {
document.body.classList.add("playing");
SimAPControls.loadAudioState();
});
SimAPControls.loadLoop();
document.title = playConfig.title + " - SimMusic";
// 初始化背景
Expand All @@ -81,26 +86,34 @@ const switchMusic = (playConfig) => {
const current = document.getElementById("progressCurrent");
const duration = document.getElementById("progressDuration");
audio.onloadedmetadata = () => {
document.body.classList.add("withCurrentMusic");
document.body.classList.remove("musicLoading");
SimAPProgress.max = SimAPProgressBottom.max = audio.duration;
SimAPProgress.setValue(0); SimAPProgressBottom.setValue(0);
duration.innerText = SimAPTools.formatTime(audio.duration);
duration.textContent = SimAPTools.formatTime(audio.duration);
SimAPProgress.onchange = SimAPProgressBottom.onchange = value => { audio.currentTime = value; }
if (playConfig.play) audio.play(); else audio.pause();
};
audio.ontimeupdate = () => {
document.body.classList.remove("musicLoading");
SimAPProgress.setValue(audio.currentTime); SimAPProgressBottom.setValue(audio.currentTime);
current.innerText = SimAPTools.formatTime(audio.currentTime);
current.textContent = SimAPTools.formatTime(audio.currentTime);
document.body.classList[!audio.paused ? "add" : "remove"]("playing");
SimAPControls.loadAudioState();
};
audio.onwaiting = () => {
document.body.classList.add("musicLoading");
};
audio.onended = () => {
if (config.getItem("loop") == 1) { audio.duration = 0; audio.play(); }
if (config.getItem("loop") == 1) { PlayerController.switchMusic(config.getItem("currentMusic"), false, true); }
else SimAPControls.next();
};
audio.onerror = () => {
document.body.classList.add("withCurrentMusic");
shell.beep();
document.body.classList.remove("playing");
document.body.classList.remove("musicLoading");
confirm("当前曲目播放失败，是否从播放列表中移除？", () => {
PlayerController.deleteFromList(config.getItem("currentMusic"));
});
};
// 系统级控件
navigator.mediaSession.metadata = new MediaMetadata({ title: playConfig.title, artist: playConfig.artist, artwork: [{ src: playConfig.album }], });
Expand Down Expand Up @@ -128,6 +141,7 @@ const SimAPControls = {
ipcRenderer.invoke(playing ? "musicPlay" : "musicPause");
},
togglePlay() {
if (document.body.classList.contains("musicLoading")) return;
document.body.classList[audio.paused ? "add" : "remove"]("playing");
audio[audio.paused ? "play" : "pause"]();
SimAPControls.loadAudioState();
Expand Down Expand Up @@ -222,7 +236,7 @@ const SimAPUI = {
document.querySelector(".list div.active").scrollIntoView({block: "center"});
document.querySelector(".lyrics div.active").scrollIntoView({block: "center"});
this.playingAnimation = false;
this.toggleDesktopLyrics();
this.toggleDesktopLyrics(null, false);
addEventListener("visibilitychange", this.toggleDesktopLyrics);
}, 50);
},
Expand All @@ -232,22 +246,26 @@ const SimAPUI = {
document.body.classList.remove("playerShown");
this.playingAnimation = true;
setTimeout(() => {
this.toggleDesktopLyrics();
this.toggleDesktopLyrics(null, true);
removeEventListener("visibilitychange", this.toggleDesktopLyrics);
document.getElementById("playPage").hidden = true;
this.playingAnimation = false;
}, 300);
},
toggleDesktopLyrics() {
if (config.getItem("desktopLyricsAutoHide") && WindowStatus.lyricsWin) ipcRenderer.invoke("toggleLyrics");
}
toggleDesktopLyrics(_event, showWindow = document.visibilityState == "hidden" ? true : false) {
if (config.getItem("desktopLyricsAutoHide") && WindowStatus.lyricsWin) ipcRenderer.invoke("toggleLyrics", showWindow);
},
}
ipcRenderer.invoke("musicPause");


document.documentElement.addEventListener("keydown", event => {
let keydownLock;
document.documentElement.addEventListener("keydown", e => {
if (keydownLock) return;
keydownLock = true;
setTimeout(() => { keydownLock = false; }, 150)
if (document.activeElement.tagName.toLowerCase() == "input") return;
const audio = document.getElementById("audio");
switch (event.key) {
switch (e.key) {
case " ":
SimAPControls.togglePlay();
break;
Expand All @@ -265,6 +283,7 @@ document.documentElement.addEventListener("keydown", event => {
break;
case "Escape":
SimAPUI.hide();
document.body.classList.remove("volume");
break;
}
});
Expand Down
6 changes: 3 additions & 3 deletions src/frontend/assets/components/SimLRC.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ class SimLRC {
lrcDiv.dataset.stamp = timestamp;
currentLrc.forEach((text, index) => {
const textElement = document.createElement(index ? "small" : "span");
textElement.innerText = text;
textElement.textContent = text;
lrcDiv.appendChild(textElement);
});
container.appendChild(lrcDiv);
Expand All @@ -63,7 +63,7 @@ class SimLRC {
currentLrc.forEach(text => {
const lrcDiv = document.createElement("div");
lrcDiv.dataset.stamp = timestamp;
lrcDiv.innerText = text;
lrcDiv.textContent = text;
container.appendChild(lrcDiv);
});
}
Expand All @@ -84,7 +84,7 @@ class SimLRC {
let div = lrcEles[index];
if (div.dataset.stamp <= currentTime && (!div.nextElementSibling || div.nextElementSibling.dataset.stamp > currentTime)) {
// 执行回调
if (!div.classList.contains("active") && options.callback) options.callback(div.querySelector("span") ? div.querySelector("span").innerText : div.innerText);
if (!div.classList.contains("active") && options.callback) options.callback(div.querySelector("span") ? div.querySelector("span").textContent : div.textContent);
if (!div.classList.contains("active") || forceScroll) {
// 取消用户滚动模式
if (forceScroll) {
Expand Down
1 change: 1 addition & 0 deletions src/frontend/assets/components/SimProgress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ class SimProgress {
// 拖动处理
const handleDrag = e => {
e.preventDefault();
if (!element.classList.contains("dragging")) return;
const clickX = (e.pageX || e.changedTouches[0].pageX || e.touches[0].pageX) - element.getBoundingClientRect().left;
const progress = Math.min(Math.max(clickX / element.clientWidth, 0), 1);
element.style.setProperty("--SimProgressWidth", progress * 100 + "%");
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/assets/components/dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ <h1>提示</h1>
case "alert":
document.getElementById("prompt").hidden = true;
document.getElementById("subBtn").hidden = true;
document.getElementById("text").innerText = queryParams.get("txt");
document.getElementById("text").textContent = queryParams.get("txt");
break;
case "prompt":
document.getElementById("prompt").placeholder = queryParams.get("txt");
break;
case "confirm":
document.getElementById("prompt").hidden = true;
document.getElementById("text").innerText = queryParams.get("txt");
document.getElementById("text").textContent = queryParams.get("txt");
break;
}
function submitDialog() {
Expand Down
19 changes: 8 additions & 11 deletions src/frontend/assets/extensions/local.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

/**************** 基础配置 ****************/
// ExtensionRuntime在加载时会自动添加json中的scheme字段到ExtensionConfig下，所以无需担心ExtensionConfig.xxx是否存在
ExtensionConfig.file.uiName = "目录";
ExtensionConfig.file.uiName = "本地";
// 当没有config.setItem时，调用config.getItem会返回defaultConfig中的值
defaultConfig["folderLists"] = [];

Expand Down Expand Up @@ -86,7 +86,7 @@ ExtensionConfig.file.musicList = {
const folderName = spilitted[spilitted.length - 1];
// 创建一个div即可，可以不需要有类名
const element = document.createElement("div");
element.innerText = folderName;
element.textContent = folderName;
element.dataset.folderName = name;
// 处理点击，一般直接switchList即可
element.onclick = () => {this.switchList(name);};
Expand Down Expand Up @@ -118,16 +118,13 @@ ExtensionConfig.file.musicList = {
// 这个函数用于切换歌单
switchList(name) {
const spilitted = name.split("\\");
// 由于搜索和歌单共用界面，需要先隐藏搜索顶栏、显示歌单顶栏，因此这两行请勿删除
document.querySelector(".musicListTitle").hidden = false;
document.querySelector(".searchTitle").hidden = true;
// 这仨是渲染右侧顶部界面使用，分别为标题和目录，如果你的插件没有“目录”的概念（例如在线歌单）把第二行hidden=true然后删掉第三行就可以了
document.getElementById("musicListName").innerText = spilitted[spilitted.length - 1];
document.getElementById("folderDir").hidden = false;
document.getElementById("musicListDir").innerText = name;
// 统一调用renderMusicList即可，第二个参数需要传入一个用于识别“当前歌单”的唯一的参数，推荐使用插件名+歌单id以防重复
// 如果你的scanMusic必须是异步的，可以先renderMusicList([], id)以切换界面，再renderMusicList(list, id)，id一样就可以
renderMusicList(FileExtensionTools.scanMusic(name), "folder-" + name, false, false, "当前目录为空", FileExtensionTools.fileMenuItem);
// rML第三个参数请固定false，第4个参数指定是否进行预先渲染，如果为true则在二次渲染之前不会显示歌单（适用于在线歌曲必须要获取metadata的情况）
renderMusicList(FileExtensionTools.scanMusic(name), "folder-" + name, false, false, "当前目录为空", FileExtensionTools.fileMenuItem, {
name: spilitted[spilitted.length - 1],
dirName: name,
});
// 这个用于把当前歌单标蓝，放在renderMusicList函数后运行，推荐借鉴我的写法在renderList函数里自己设一个dataset，然后遍历dataset
document.querySelectorAll(".left .leftBar div").forEach(ele => {
if (ele.dataset.folderName != name) ele.classList.remove("active");
Expand Down Expand Up @@ -212,5 +209,5 @@ ExtensionConfig.file.search = async keyword => {
if (songInfoString.includes(keyword)) resultArray.push(file);
}
});
return {files: resultArray, menu: FileExtensionTools.fileMenuItem};
return {files: resultArray, menu: FileExtensionTools.fileMenuItem, hasMore: false};
}
2 changes: 1 addition & 1 deletion src/frontend/assets/extensions/local.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
"url": "assets/extensions/local.js",
"isDev": true,
"scheme": "file",
"version": "1.0.3"
"version": "1.0.4"
}
Loading

0 comments on commit f40c3f8

Please sign in to comment.