main,renderer: add settings to show track name on title bar

src/main/index.js

@@ -65,6 +65,11 @@ function createMainWindow(settings, url = MainURL) {
         }
     });
 
+    win.on('page-title-updated', (ev) => {
+        // prevent window title update from document.title
+        ev.preventDefault();
+    });
+
     if (settings.showTrayIcon && settings.minimizeOnStartup) {
         win.hide();
     }
@@ -228,8 +233,15 @@ ipcMain.on('showLoginWindow', () => {
     });
 });
 
-ipcMain.handle('controlMainWindow', (event, method) => {
+ipcMain.handle('controlMainWindow', (event, method, ...args) => {
     switch (method) {
+        case 'setTitle': {
+            const title = args[0];
+            if (typeof title === 'string') {
+                mainWindow.setTitle(title);
+            }
+            break;
+        }
         case 'maximize':
             if (mainWindow.isMaximized()) {
                 mainWindow.unmaximize();

src/main/settings.js

@@ -25,7 +25,8 @@ export const defaultSettings = {
     themeSecondaryColor: '#ff4081',
     themeVariety: 'auto',
     autoReplacePlaylist: false,
-    lyricTranslation: 'translation'
+    lyricTranslation: 'translation',
+    titleBarShowsTrackName: true
 };
 
 /**

src/renderer/components/AppNav/AppNav.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions } from 'vuex';
 
 import Routes from '@/routes';
 import SearchBox from './SearchBox.vue';
@@ -111,7 +111,11 @@ export default {
         };
     },
     computed: {
-        ...mapState(['settings', 'user']),
+        /** @returns {import('@/store/modules/user').State}*/
+        user() { return this.$store.state.user; },
+        /** @returns {import('@/store/modules/settings').State}*/
+        settings() { return this.$store.state.settings; },
+        /** @returns {import('@/routes').Route[]} */
         validRoutes() {
             return Routes.filter(r => r.title);
         },

src/renderer/main.js

@@ -88,9 +88,6 @@ window.onbeforeunload = () => {
 };
 
 const router = new Router({ routes });
-router.afterEach(() => {
-    store.dispatch('updateDocumentTitle');
-});
 if (store.state.settings.startupPage !== 'index') {
     router.replace({ name: store.state.settings.startupPage });
 }

src/renderer/page/Settings/Settings.vue

@@ -64,7 +64,8 @@ export default {
     methods: {
         ...mapActions([
             'updateSettings',
-            'resetSettings'
+            'resetSettings',
+            'updateMainWindowTitle'
         ]),
         shouldShowOption(item) {
             if (!item.depends && !item.exclude) return true;
@@ -184,6 +185,9 @@ export default {
                         case 'windowBorder':
                             this.$nextTick(() => this.recreateWindow());
                             break;
+                        case 'titleBarShowsTrackName':
+                            this.updateMainWindowTitle(val);
+                            break;
                         case 'windowZoom':
                             webContents.setZoomFactor(val || 1);
                             break;

src/renderer/page/Settings/entries.js

@@ -66,6 +66,11 @@ export const Entries = [
                 title: '使用系统标题栏',
                 prop: 'windowBorder'
             },
+            {
+                type: 'toggle',
+                title: '标题栏显示歌曲名称',
+                prop: 'titleBarShowsTrackName'
+            },
             {
                 type: 'toggle',
                 title: '显示托盘图标',

src/renderer/store/actions.js

@@ -2,8 +2,11 @@ import Api from '@/api/ipc';
 import * as ApiTyped from '@/api/typed';
 import * as DbPlaylist from '@/api/database/playlist';
 import * as DbRadio from '@/api/database/radio';
-import * as types from './mutation-types';
+
 import { Track, Video } from '@/util/models';
+import { browserWindow } from '@/util/globals';
+
+import * as types from './mutation-types';
 import { LOOP_MODE } from './modules/playlist';
 
 /**
@@ -375,21 +378,26 @@ export async function updateUiLyric({ commit, getters }, { ignoreCache = false }
 
 /**
  * @param {ActionContext} param0
+ * @param {boolean} payload show track name in window title
  */
-export function updateDocumentTitle({ getters }) {
+export function updateMainWindowTitle({ getters }, payload = true) {
+    let title;
     const track = getters.playing;
-    if (track && track.id) {
-        document.title = `${track.name} | Electron NCM`;
+    if (payload && track && track.id) {
+        title = `${track.name} | Electron NCM`;
     } else {
-        document.title = 'Electron NCM';
+        title = 'Electron NCM';
     }
+    browserWindow.setTitle(title);
 }
 
 /**
  * @param {ActionContext} param0
  */
-export function updateUiTrack({ dispatch }) {
-    dispatch('updateDocumentTitle');
+export function updateUiTrack({ state, dispatch }) {
+    if (state.settings.titleBarShowsTrackName) {
+        dispatch('updateMainWindowTitle');
+    }
     dispatch('updateUiLyric');
     dispatch('updateUiCoverImgSrc');
     return dispatch('updateUiAudioSrc');

src/renderer/store/modules/settings.js

@@ -17,7 +17,8 @@ const DefaultSettings = {
     themeSecondaryColor: '#ff4081',
     themeVariety: 'auto',
     autoReplacePlaylist: false,
-    lyricTranslation: 'translation'
+    lyricTranslation: 'translation',
+    titleBarShowsTrackName: true
 };
 
 /**

src/renderer/util/globals.js

@@ -7,6 +7,7 @@ export const isLinux = process.platform === 'linux';
 const controlMainWindow = encm.invoke.bind(null, 'controlMainWindow');
 
 export const browserWindow = {
+    setTitle: controlMainWindow.bind(null, 'setTitle'),
     maximize: controlMainWindow.bind(null, 'maximize'),
     minimize: controlMainWindow.bind(null, 'minimize'),
     close: controlMainWindow.bind(null, 'close'),