基本完成设置页面和自定义键位绑定

从 Rome 迁移到 Biome 更新部分依赖
Steve-xmh · Feb 10, 2024 · c8834bd · c8834bd
1 parent fbc9518
commit c8834bd
Show file tree

Hide file tree

Showing 20 changed files with 1,475 additions and 878 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 # Apple Music-like Lyrics TTML Tool
 
-一个全新的逐词歌词编辑器！针对 [Apple Music-like Lyrics 网易云插件](https://github.com/Steve-xmh/applemusic-like-lyrics)设计！
+一个全新的逐词歌词编辑器！针对 [Apple Music-like Lyrics 生态](https://github.com/Steve-xmh/applemusic-like-lyrics)制作！
 
 </div>
 

diff --git a/rome.json → biome.json b/rome.json → biome.json
@@ -1,5 +1,5 @@
 {
-    "$schema": "./node_modules/rome/configuration_schema.json",
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
     "formatter": {
         "enabled": true,
         "indentStyle": "tab",
@@ -14,4 +14,4 @@
             }
         }
     }
-}
+}
diff --git a/package.json b/package.json
@@ -8,15 +8,15 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "fmt": "rome format --write ./src",
+    "fmt": "biome format --write ./src",
     "tauri": "tauri"
   },
   "workspaces": [
     "./libs/*"
   ],
   "dependencies": {
     "@applemusic-like-lyrics/lyric": "^0.1.1",
-    "@applemusic-like-lyrics/vue": "^0.0.13",
+    "@applemusic-like-lyrics/vue": "^0.0.15",
     "@pixi/app": "^7.2.4",
     "@pixi/core": "^7.2.4",
     "@pixi/display": "^7.2.4",
@@ -25,8 +25,6 @@
     "@pixi/sprite": "^7.2.4",
     "@pixi/utils": "^7.2.4",
     "@tauri-apps/api": "^1.2.0",
-    "@types/ungap__structured-clone": "^0.3.0",
-    "@ungap/structured-clone": "^1.2.0",
     "@vicons/fluent": "^0.12.0",
     "@vue/tsconfig": "^0.4.0",
     "codemirror": "^6.0.1",
@@ -41,24 +39,28 @@
     "pinia-plugin-persistedstate": "^3.2.0",
     "sass": "^1.64.1",
     "save-file": "^2.3.1",
-    "vue": "^3.3.4",
+    "ua-parser-js": "^1.0.37",
+    "vue": "^3.4.18",
     "vue-codemirror": "^6.1.1",
     "vue-i18n": "9",
     "vue-virtual-scroller": "next",
     "vuedraggable": "next"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.5.3",
     "@tauri-apps/cli": "^1.2.2",
     "@types/node": "^18.7.10",
     "@types/pangu": "^4.0.0",
+    "@types/ua-parser-js": "^0.7.39",
+    "@types/ungap__structured-clone": "^0.3.0",
+    "@ungap/structured-clone": "^1.2.0",
     "@vitejs/plugin-vue": "^4.2.3",
-    "rome": "^12.1.3",
     "typescript": "^5.1.6",
-    "vite": "^4.4.7",
-    "vite-plugin-pwa": "^0.16.4",
-    "vite-plugin-top-level-await": "^1.3.1",
-    "vite-plugin-wasm": "^3.2.2",
-    "vite-svg-loader": "^4.0.0"
+    "vite": "^5.1.1",
+    "vite-plugin-pwa": "^0.18.0",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0",
+    "vite-svg-loader": "^5.1.0"
   },
   "packageManager": "yarn@4.0.2",
   "resolutions": {

diff --git a/src/App.vue b/src/App.vue
@@ -67,6 +67,7 @@
 	<ImportPlainTextModal/>
 	<ImportFromDBDialog/>
 	<MetadataDialog/>
+  <SettingsModal/>
 	<ServiceWorkerUpdater v-if="enableSW"/>
 	<!-- <SplitWordModal /> -->
 </template>
@@ -86,6 +87,7 @@ import ServiceWorkerUpdater from "./components/ServiceWorkerUpdater.vue";
 import ImportPlainTextModal from "./components/modals/ImportPlainTextModal.vue";
 import {useI18n} from "vue-i18n";
 import MetadataDialog from "./components/modals/MetadataDialog.vue";
+import SettingsModal from "./components/modals/SettingsModal.vue";
 
 const LyricEditor = defineAsyncComponent(() => import("./components/LyricEditor.vue"));
 const LyricSyncEditor = defineAsyncComponent(() => import("./components/LyricSyncEditor.vue"));

diff --git a/src/components/AudioPlayerBar.vue b/src/components/AudioPlayerBar.vue
@@ -11,7 +11,7 @@
 
 <template>
     <NLayoutFooter bordered class="audio-player-bar">
-        <NUpload :default-upload="false" :multiple="false" :show-file-list="false" style="width: unset"
+      <NUpload ref="uploadRef" :default-upload="false" :multiple="false" :show-file-list="false" style="width: unset"
             @change="onUploadMusic">
             <NButton v-if="!curFile">
                 <i18n-t keypath="audioPlayerBar.loadMusicBtn" />
@@ -55,28 +55,17 @@
 </template>
 
 <script setup lang="ts">
-import {
-    NLayoutFooter,
-    NSlider,
-    NIcon,
-    NButton,
-    NUpload,
-    type UploadFileInfo,
-} from "naive-ui";
-import {
-    Play48Filled,
-    Pause48Filled,
-    Speaker248Filled,
-    MusicNote224Filled,
-    TopSpeed24Regular,
-} from "@vicons/fluent";
-import { ref, reactive, onUnmounted, onMounted } from "vue";
-import { useAudio, useSettings } from "../store";
+import {NButton, NIcon, NLayoutFooter, NSlider, NUpload, type UploadFileInfo, type UploadInst,} from "naive-ui";
+import {MusicNote224Filled, Pause48Filled, Play48Filled, Speaker248Filled, TopSpeed24Regular,} from "@vicons/fluent";
+import {onMounted, onUnmounted, ref} from "vue";
+import {useAudio, useSettings} from "../store";
+import {useKeyBinding} from "../utils/keybindings";
 
 const curFile = ref<UploadFileInfo>();
 const audioPlayer = ref(new Audio());
 const settings = useSettings();
 const audio = useAudio();
+const uploadRef = ref<UploadInst | null>(null)
 
 audio.$onAction((e) => {
     if (e.name === "setCurrentTime") {
@@ -163,61 +152,75 @@ onMounted(() => {
     audioPlayer.value.volume = Math.max(0, Math.min(1, settings.volume));
 });
 
-function onKeyPress(e: KeyboardEvent) {
-    if((e.target as HTMLElement)?.nodeName === 'INPUT') return;
-    let collected = false;
-    switch (e.code) {
-        case "Space":
-            if (audioPlayer.value.paused) {
-                audioPlayer.value.play();
-            } else {
-                audioPlayer.value.pause();
-            }
-            collected = true;
-            break;
-        case "ArrowUp":
-            settings.volume = Math.min(1, Math.max(0, settings.volume + 0.1));
-            collected = true;
-            break;
-        case "ArrowDown":
-            settings.volume = Math.min(1, Math.max(0, settings.volume - 0.1));
-            collected = true;
-            break;
-        case "ArrowLeft":
-            if (audioPlayer.value.seekable) {
-                audioPlayer.value.currentTime = Math.max(
-                    0,
-                    audioPlayer.value.currentTime - 5
-                )
-            }
-            collected = true;
-            break;
-        case "ArrowRight":
-            if (audioPlayer.value.seekable) {
-                audioPlayer.value.currentTime = Math.min(
-                    audioPlayer.value.duration,
-                    audioPlayer.value.currentTime + 5
-                )
-            }
-            collected = true;
-            break;
-        case "BracketLeft":
-            settings.speed = Math.max(0.25, Math.min(4, settings.speed - 0.25));
-            collected = true;
-            break;
-        case "BracketRight":
-            settings.speed = Math.max(0.25, Math.min(4, settings.speed + 0.25));
-            collected = true;
-            break;
-    }
-    if (collected) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-}
-
-onMounted(() => {
-    window.addEventListener("keyup", onKeyPress);
+useKeyBinding(settings.keybindings.resumeOrPause, () => {
+  if (audioPlayer.value.paused) {
+    audioPlayer.value.play();
+  } else {
+    audioPlayer.value.pause();
+  }
+});
+useKeyBinding(settings.keybindings.volumeUp, () => {
+  settings.volume = Math.min(1, Math.max(0, settings.volume + 0.1));
+});
+useKeyBinding(settings.keybindings.volumeDown, () => {
+  settings.volume = Math.min(1, Math.max(0, settings.volume - 0.1));
+});
+useKeyBinding(settings.keybindings.seekPlayForward5s, () => {
+  if (audioPlayer.value.seekable) {
+    audioPlayer.value.currentTime = Math.min(
+        audioPlayer.value.duration,
+        audioPlayer.value.currentTime + 5
+    );
+  }
+});
+useKeyBinding(settings.keybindings.seekPlayBackward5s, () => {
+  if (audioPlayer.value.seekable) {
+    audioPlayer.value.currentTime = Math.max(
+        0,
+        audioPlayer.value.currentTime - 5
+    );
+  }
+});
+useKeyBinding(settings.keybindings.seekPlayForward1s, () => {
+  if (audioPlayer.value.seekable) {
+    audioPlayer.value.currentTime = Math.min(
+        audioPlayer.value.duration,
+        audioPlayer.value.currentTime + 1
+    );
+  }
+});
+useKeyBinding(settings.keybindings.seekPlayBackward1s, () => {
+  if (audioPlayer.value.seekable) {
+    audioPlayer.value.currentTime = Math.max(
+        0,
+        audioPlayer.value.currentTime - 1
+    );
+  }
+});
+useKeyBinding(settings.keybindings.seekPlayForward100ms, () => {
+  if (audioPlayer.value.seekable) {
+    audioPlayer.value.currentTime = Math.min(
+        audioPlayer.value.duration,
+        audioPlayer.value.currentTime + 0.1
+    );
+  }
+});
+useKeyBinding(settings.keybindings.seekPlayBackward100ms, () => {
+  if (audioPlayer.value.seekable) {
+    audioPlayer.value.currentTime = Math.max(
+        0,
+        audioPlayer.value.currentTime - 0.1
+    );
+  }
+});
+useKeyBinding(settings.keybindings.speedUp, () => {
+  settings.speed = Math.max(0.25, Math.min(4, settings.speed + 0.25));
+});
+useKeyBinding(settings.keybindings.speedDown, () => {
+  settings.speed = Math.max(0.25, Math.min(4, settings.speed - 0.25));
+});
+useKeyBinding(settings.keybindings.openMusicFile, () => {
+  uploadRef.value?.openOpenFileDialog();
 });
 
 onUnmounted(() => {
@@ -226,7 +229,6 @@ onUnmounted(() => {
     }
     audioPlayer.value.pause();
     audioPlayer.value.remove();
-    window.removeEventListener("keyup", onKeyPress);
 });
 </script>