add checkUpdate page

.vscode/launch.json

@@ -2,7 +2,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug Main Process",
+      "name": "Debug Main Process via electron",
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceRoot}",
@@ -14,6 +14,19 @@
         "./tsout/app.js"
       ],
       "outputCapture": "std"
+    },
+    {
+      "name": "Debug Main Process via npm",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run-script", "start"],
+      // "windows": {
+      //   "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+      // },
+      "outputCapture": "std",
+      "port": 9229,
     }
   ]
 }

.vscode/settings.json

@@ -2,6 +2,7 @@
   "files.autoSave": "afterDelay",
   "editor.formatOnSave": false,
   "eslint.autoFixOnSave": true,
+  "editor.tabSize": 2,
   "eslint.validate": [
     "javascript",
     {

CONTRIBUTING.md

@@ -48,70 +48,18 @@ Use `electron-builder`:
 Then find the installer under `./dist`
 
 ## TODO
-- [x] option - set on top
-- [x] ready position of main
-- [x] disable login option if logged in
-- [x] ready position of login
-- [x] style of login
-- [x] js in separate folder
-- [x] 窗口边缘阴影
-- [x] 参考itunes缩小
-- [x] 做很小
-- [x] 第二行是artist+album
-- [x] 第二行滚动
-- [x] frameless
-- [x] option icon
-- [x] 所有options放到一个options的图标里
-- [x] 鼠标在mac上会有不同的形态，应该什么都没有，或者按钮是pointer
-- [x] 音乐结束自动下一首
-- [x] options - refresh
-- [x] set up vscode debugger
-- [x] time update
-- [x] about page
-- [x] 各种快捷键单独放到constant里
-- [x] 图标
-- [x] 播放图标和文字距离远点儿
-- [x] 艺术家文字小点儿
-- [x] console.log 有utf-8问题
-- [x] 登录成功自动3S后关闭，文字在消息里
-- [x] 安装
-- [x] redheart -> liked
-- [x] shuffle liked songs
-- [x] mac上显示icon和title有问题: https://stackoverflow.com/questions/41551110/unable-to-override-app-name-on-mac-os-electron-menu
-- [x] 置顶快捷键不管用
-- [x] 每首歌有channel信息
-- [x] 豆瓣推荐
-- [x] 私人频道
-- [x] option menu change channel
-- [x] like event
-- [x] unlike event
-- [x] liked songs playlist
-- [x] 感谢子昭和小炎
-- [x] Electron\[9861:463831\] *** WARNING: Textured window <AtomNSWindow: 0x7f9177c7fa10> is getting an implicitly transparent titlebar. This will break when linking against newer SDKs. Use NSWindow's -titlebarAppearsTransparent=YES instead.~~
-- [x] full sid requires cookie in headers
-- [x] only loggined can like/unlike songs
-- [x] mac上一格的耳机音量都太高了
-- [x] 重启应用
-- [x] 降低初始音量
-- [x] 换个icon
-- [x] macOS的app名字改成douban.fm-electron
-- [x] macOS安装后无法登出
-- [x] change location to save user data
-- [x] refresh也refresh douban selected menu
 - [ ] axios wrap all requests with headers
 - [ ] git version hook
 - [ ] add description
 - [ ] liked songs length == 0 not show
 - [ ] 登录按钮鼠标悬在上面显示名字
 - [ ] refactor main.js, maybe main.ts?
-- [ ] 更新版本: send github apis to fetch the version of latest release
 - [ ] 鼠标移到时间整个窗口变成进度条
 - [ ] style buttons
 - [ ] english support
 - [ ] 鼠标移动到每个选项上显示说明
 - [ ] loading default text
 - [ ] system tray control
-- [ ] sponsor page
 - [ ] 快捷键
     - [ ] 精选
     - [ ] 红心
@@ -124,7 +72,6 @@ Then find the installer under `./dist`
 - [ ] set cookie gracefully: https://stackoverflow.com/questions/46288437/set-cookies-for-cross-origin-requests/46412839#46412839
 - [ ] macOS unable to select text
 - [ ] 登陆成功后倒计时有时不准
-- [ ] remove sponsor tag
 - [ ] check "like" function
 - [ ] check liked songs order
 - [ ] 刷新bug，会把边框也刷出来

README.md

@@ -24,14 +24,14 @@ Mac and Windows installers can be found at https://github.com/estepona/douban.fm
 Currently all releases are pre-releases, if you find any bugs and have any feature improvements, please submit an issue! Thank you!
 
 ## Shortcuts
-- pause or play: `space`
-- next song: `right`
-- like song: `up`
-- unlike song: `down`
-- refresh: `F5` (Win / Linux), `Cmd+R` (Mac)
-- set window on top: `Alt+F2` (Win / Linux), `Cmd+E` (Mac)
-- relaunch: `Alt+F3` (Win / Linux), `Cmd+L` (Mac)
-- quit: `Alt+F4` (Win / Linux), `Cmd+Q` (Mac)
+- pause or play: <kbd>space</kbd>
+- next song: <kbd>right</kbd>
+- like song: <kbd>up</kbd>
+- unlike song: <kbd>down</kbd>
+- refresh: <kbd>F5</kbd> (Win / Linux), <kbd>Cmd</kbd> + <kbd>R</kbd> (Mac)
+- set window on top: <kbd>Alt</kbd> + <kbd>F2</kbd> (Win / Linux), <kbd>Cmd</kbd> + <kbd>E</kbd> (Mac)
+- relaunch: <kbd>Alt</kbd> + <kbd>F3</kbd> (Win / Linux), <kbd>Cmd</kbd> + <kbd>L</kbd> (Mac)
+- quit: <kbd>Alt</kbd> + <kbd>F4</kbd> (Win / Linux), <kbd>Cmd</kbd> + <kbd>Q</kbd> (Mac)
 
 ## Known Issues
 - To view "从单曲出发", please login and relaunch;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "douban.fm-electron",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A tiny, elegant douban.fm desktop client developed with electron.",
   "author": "Binghuan Zhang <esteponawondering@gmail.com>",
   "repository": {
@@ -13,7 +13,7 @@
   "scripts": {
     "build": "npx tsc",
     "watch": "npx tsc -w",
-    "start": "npm run build && npx electron ./tsout/app.js",
+    "start": "npx tsc && npx electron ./tsout/app.js",
     "pack": "npx electron-builder -mwl",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

src/api/client.ts → src/api/douban.ts

@@ -1,7 +1,7 @@
 import Axios from 'axios';
 
 // TODO: put all urls in a separate place
-class ApiClient {
+class Client {
   private clientId = '02646d3fb69a52ff072d47bf23cef8fd';
   private clientSecret = 'cde5d61429abcd7c';
   private headers = {
@@ -174,4 +174,4 @@ class ApiClient {
   }
 }
 
-export default new ApiClient();
+export default new Client();

src/api/github.ts

@@ -0,0 +1,16 @@
+import Axios from 'axios';
+
+class Client {
+  /**
+   * doc: https://developer.github.com/v3/repos/releases/
+   */
+  public async getReleases(): Promise<GithubReleaseResponse[]> {
+    return Axios.get('https://api.github.com/repos/estepona/douban.fm-electron/releases')
+      .then(res => res.data)
+      .catch(err => {
+        throw Error('getReleases request failed');
+      });
+  }
+}
+
+export default new Client();

src/api/index.ts

@@ -0,0 +1,4 @@
+import doubanApiClient from './douban';
+import githubApiClient from './github';
+
+export { doubanApiClient, githubApiClient };

src/app.ts

@@ -4,7 +4,7 @@ import * as _ from 'lodash';
 import { app, ipcMain, screen, shell, BrowserWindow, Event, Menu, MenuItem } from 'electron';
 
 import * as config from './config';
-import apiClient from './api/client';
+import { doubanApiClient, githubApiClient } from './api';
 import { getNextSong } from './ipc/main';
 import { buildDoubanSelectedMenu, OptionMenuItems } from './menu/option_menu';
 import { readAuth, resetAuth, writeAuth } from './util/auth';
@@ -18,25 +18,27 @@ export let authInfo = readAuth();
  */
 export let mainWindow: BrowserWindow | null = null;
 export let loginWindow: BrowserWindow | null = null;
+export let checkUpdateWindow: BrowserWindow | null = null;
 
 const appIconPath = path.join(__dirname, '..', 'build', 'icon.png');
 const mainHtmlPath = path.join(__dirname, '..', 'src', 'window', 'main', 'main.html');
 const loginHtmlPath = path.join(__dirname, '..', 'src', 'window', 'login', 'login.html');
+const checkUpdateHtmlPath = path.join(__dirname, '..', 'src', 'window', 'check_update', 'check_update.html');
 
 export let likedSongs: LikedSongs | null = null;
 export let recChannels: RecChannels | null = null;
 
 const createMainWindow = async () => {
   if (authInfo) {
-    apiClient.setAccessToken(authInfo.access_token);
+    doubanApiClient.setAccessToken(authInfo.access_token);
 
-    likedSongs = await apiClient.getLikedSongs();
+    likedSongs = await doubanApiClient.getLikedSongs();
     if (!likedSongs) {
       authInfo = null;
     }
   }
 
-  await apiClient.getAndSetCookie();
+  await doubanApiClient.getAndSetCookie();
 
   const primaryResoultion = screen.getPrimaryDisplay().workAreaSize;
 
@@ -98,6 +100,34 @@ export const createLoginWindow = () => {
   });
 };
 
+export const createCheckUpdateWindow = () => {
+  checkUpdateWindow = new BrowserWindow({
+    width: 300 + 16,
+    height: 120 + 16,
+
+    title: 'douban.fm检查更新',
+    icon: appIconPath,
+
+    transparent: true,
+    frame: false,
+
+    minimizable: false,
+    maximizable: false,
+    resizable: false,
+    fullscreenable: false,
+
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+
+  checkUpdateWindow.loadFile(checkUpdateHtmlPath);
+
+  checkUpdateWindow.on('closed', () => {
+    checkUpdateWindow = null;
+  });
+};
+
 /**
  * menu
  */
@@ -167,7 +197,7 @@ optionMenu.append(
             click: async () => {
               if (mainWindow) {
                 if (!likedSongs) {
-                  likedSongs = await apiClient.getLikedSongs();
+                  likedSongs = await doubanApiClient.getLikedSongs();
                 }
 
                 const playerState = await getNextSong(
@@ -199,7 +229,7 @@ optionMenu.append(
             click: async () => {
               if (mainWindow) {
                 if (!likedSongs) {
-                  likedSongs = await apiClient.getLikedSongs();
+                  likedSongs = await doubanApiClient.getLikedSongs();
                 }
 
                 if (likedSongs) {
@@ -245,7 +275,7 @@ optionMenu.append(
           if (mainWindow) {
             mainWindow.webContents.send('main:receiveNextSong', {
               channel: -10,
-              song: await apiClient.getDoubanSelectedSong(true),
+              song: await doubanApiClient.getDoubanSelectedSong(true),
             });
 
             // 我的 -> 红心
@@ -315,6 +345,27 @@ optionMenu.append(
 optionMenu.append(
   new MenuItem({
     label: '检查更新',
+    click: async () => {
+      !checkUpdateWindow && createCheckUpdateWindow();
+      checkUpdateWindow && checkUpdateWindow.show();
+
+      const res = await githubApiClient.getReleases();
+      let msg = ['检查更新失败'];
+
+      if (res.length) {
+        if (res[0].tag_name !== config.general.appVersion) {
+          msg[0] = '新版本可供下载';
+          msg.push(res[0].tag_name);
+          msg.push(res[0].html_url);
+        } else {
+          msg[0] = '已是最新版本';
+        }
+      }
+
+      if (checkUpdateWindow) {
+        checkUpdateWindow.webContents.send('checkUpdate:result', msg);
+      }
+    },
   }),
 );
 optionMenu.append(
@@ -342,7 +393,7 @@ optionMenu.append(
  */
 ipcMain.on('login:login', async (event: Event, vals: string[]) => {
   try {
-    authInfo = await apiClient.login(vals[0], vals[1]);
+    authInfo = await doubanApiClient.login(vals[0], vals[1]);
     writeAuth(authInfo);
 
     optionMenu.items[OptionMenuItems.Login].enabled = false;
@@ -387,7 +438,7 @@ ipcMain.on('main:relaunch', (event: Event) => {
 
 ipcMain.on('main:getNextSong', async (event: Event, val: PlayerState | null) => {
   if (val && val.channel === 'liked') {
-    likedSongs = await apiClient.getLikedSongs();
+    likedSongs = await doubanApiClient.getLikedSongs();
   }
 
   const playerState = await getNextSong(val, likedSongs);
@@ -397,13 +448,20 @@ ipcMain.on('main:getNextSong', async (event: Event, val: PlayerState | null) =>
 
 ipcMain.on('main:likeSong', async (event: Event, val: PlayerState | null) => {
   if (authInfo && val && val.song && val.song.sid) {
-    await apiClient.likeSong(val.song.sid);
+    await doubanApiClient.likeSong(val.song.sid);
   }
 });
 
 ipcMain.on('main:unlikeSong', async (event: Event, val: PlayerState | null) => {
   if (authInfo && val && val.song && val.song.sid) {
-    await apiClient.unlikeSong(val.song.sid);
+    await doubanApiClient.unlikeSong(val.song.sid);
+  }
+});
+
+ipcMain.on('checkUpdate:close', () => {
+  if (checkUpdateWindow) {
+    checkUpdateWindow.close();
+    checkUpdateWindow = null;
   }
 });
 
@@ -422,7 +480,7 @@ app.on('ready', async () => {
     // play douban selected songs
     let song: Song | null = null;
     while (!song) {
-      song = await apiClient.getDoubanSelectedSong(true);
+      song = await doubanApiClient.getDoubanSelectedSong(true);
     }
 
     mainWindow.webContents.send('main:receiveNextSong', {

src/asset/style/style.css

@@ -38,6 +38,16 @@ body {
   justify-content: space-evenly;
 }
 
+.lv1-container-checkUpdate {
+  height: 60px;
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
 .component {
   height: 100%;
 }