chore: Feature/prettier eslint (#397)

* feat: add translations

* refactor: use trinocular operators instead if

* style: add prettier to eslint, fix lint errors

* chore: add .gitattr

src/background.js

@@ -12,7 +12,6 @@ import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
 import express from "express";
 import expressProxy from "express-http-proxy";
 import Store from "electron-store";
-import path from "path";
 
 class Background {
   constructor() {

src/electron/touchBar.js

@@ -10,6 +10,7 @@ export function createTouchBar(window) {
   // Icon Resource: https://devimages-cdn.apple.com/design/resources/
   function getNativeIcon(name) {
     return nativeImage.createFromPath(
+      // eslint-disable-next-line no-undef
       path.join(__static, "img/touchbar/", name)
     );
   }

src/locale/lang/en.js

@@ -27,6 +27,11 @@ export default {
     albums: "Albums",
     artists: "Artists",
     mvs: "MVs",
+    newPlayList: "New Playlist",
+    userProfileMenu: {
+      settings: "Settings",
+      logout: "Logout",
+    },
   },
   explore: {
     explore: "Explore",
@@ -129,6 +134,8 @@ export default {
     automaticallyCacheSongs: "Automatically cache songs",
     clearSongsCache: "Clear Songs Cache",
     cacheCount: "Cached {song} songs ({size})",
+    showLyricsTranslation: "Show lyrics translation",
+    minimizeToTray: "Minimize to tray",
     showGitHubIcon: "Show GitHub icon",
     showUnavailableSongInGreyStyle: "Show unavailable song in grey style",
     showPlaylistsByAppleMusic: "Show playlists by Apple Music",

src/locale/lang/zh-CN.js

@@ -24,6 +24,11 @@ export default {
     albums: "专辑",
     artists: "艺人",
     mvs: "MV",
+    newPlayList: "新建歌单",
+    userProfileMenu: {
+      settings: "设置",
+      logout: "退出登录",
+    },
   },
   explore: {
     explore: "发现",
@@ -130,6 +135,8 @@ export default {
     automaticallyCacheSongs: "自动缓存歌曲",
     clearSongsCache: "清除歌曲缓存",
     cacheCount: "已缓存 {song} 首 ({size})",
+    showLyricsTranslation: "显示歌词翻译",
+    minimizeToTray: "最小化到托盘",
     showGitHubIcon: "显示 GitHub 图标",
     showUnavailableSongInGreyStyle: "显示不可播放的歌曲为灰色",
     showPlaylistsByAppleMusic: "首页显示来自 Apple Music 的歌单",

src/store/index.js

@@ -26,9 +26,10 @@ const options = {
 const store = new Vuex.Store(options);
 
 if ([undefined, null].includes(store.state.settings.lang)) {
-  let lang = "en";
-  if (navigator.language.slice(0, 2) === "zh") lang = "zh-CN";
-  store.state.settings.lang = lang;
+  const defaultLang = "en";
+  // when more languages are available, use Map instead of prefer logic
+  const preferChinese = navigator.language.slice(0, 2) === "zh";
+  store.state.settings.lang = preferChinese ? "zh-CN" : defaultLang;
   localStorage.setItem("settings", JSON.stringify(store.state.settings));
 }
 

src/views/library.vue

@@ -80,7 +80,7 @@
           icon="plus"
           v-show="currentTab === 'playlists'"
           @click="openAddPlaylistModal"
-          ><svg-icon icon-class="plus" />新建歌单</button
+          ><svg-icon icon-class="plus" />{{ $t("library.newPlayList") }}</button
         >
       </div>
 
@@ -114,12 +114,14 @@
     </div>
 
     <ContextMenu ref="userProfileMenu">
-      <div class="item" @click="settings"
-        ><svg-icon icon-class="settings" />设置</div
-      >
-      <div class="item" @click="logout"
-        ><svg-icon icon-class="logout" />退出登录</div
-      >
+      <div class="item" @click="settings">
+        <svg-icon icon-class="settings" />
+        {{ $t("library.userProfileMenu.settings") }}
+      </div>
+      <div class="item" @click="logout">
+        <svg-icon icon-class="logout" />
+        {{ $t("library.userProfileMenu.logout") }}
+      </div>
     </ContextMenu>
   </div>
 </template>

src/views/settings.vue

@@ -128,7 +128,7 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title">显示歌词翻译</div>
+          <div class="title">{{ $t("settings.showLyricsTranslation") }}</div>
         </div>
         <div class="right">
           <div class="toggle">
@@ -144,7 +144,7 @@
       </div>
       <div class="item" v-if="isElectron && !isMac">
         <div class="left">
-          <div class="title">最小化到托盘</div>
+          <div class="title">{{ $t("settings.minimizeToTray") }}</div>
         </div>
         <div class="right">
           <div class="toggle">