diff --git a/app/package.json b/app/package.json index 3632878..af8e715 100644 --- a/app/package.json +++ b/app/package.json @@ -18,7 +18,7 @@ "dependencies": { "chalk": "^2.3.0", "devtron": "^1.4.0", - "electron-config": "^1.0.0", + "electron-store": "^1.3.0", "electron-debug": "^1.4.0", "electron-fetch": "^1.1.0", "electron-is": "^2.4.0", diff --git a/package.json b/package.json index 148a25b..4198b7f 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,6 @@ "electron-is-accelerator": "^0.1.2", "electron-packager": "^10.1.0", "electron-release": "^2.2.0", - "electron-store": "^1.3.0", "eslint": "^4.13.1", "eslint-config-prettier": "^2.9.0", "eslint-config-standard": "^10.2.1", diff --git a/src/main/configs/config.js b/src/main/configs/config.js deleted file mode 100644 index 1ec9728..0000000 --- a/src/main/configs/config.js +++ /dev/null @@ -1,3 +0,0 @@ -import Config from 'electron-config'; - -export default new Config({ name: 'config' }); diff --git a/src/main/configs/index.js b/src/main/configs/index.js new file mode 100644 index 0000000..debbae2 --- /dev/null +++ b/src/main/configs/index.js @@ -0,0 +1,41 @@ +import ElectronStore from 'electron-store'; +import _ from 'lodash'; +import { Log } from '../utils'; + +const Store = new ElectronStore(); +const DefaultConfig = { + windowsSize: [375, 650], + playerSize: [375, 210], + opacity: 1, +}; + +const Configs = { + default: DefaultConfig, + store: _.assign(DefaultConfig, Store.store), + restore: () => (Store.store = DefaultConfig), + get: key => { + const config = Store.has(key) ? Store.get(key) : DefaultConfig[key]; + Log(`[app][setting] get ${key}: ${config}`); + return config; + }, + set: (key, value) => { + if (typeof key === 'object') { + Store.set(key); + Log(`[app][setting] set ${key}`); + } else { + if (typeof value === 'object') { + const oldConfig = Store.has(key) ? Store.get(key) : {}; + Store.set(key, _.assign(oldConfig, value)); + } else { + Store.set(key, value); + } + Log(`[app][setting] set ${key}: ${value}`); + } + }, + delete: key => { + Store.delete(key); + Log(`[app][setting] delete ${key}`); + }, +}; + +export default Configs; diff --git a/src/main/index.js b/src/main/index.js index 3a5e98c..c111636 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -2,10 +2,10 @@ import { app, BrowserWindow } from 'electron'; import is from 'electron-is'; import { join } from 'path'; import { Log } from './utils'; +import Configs from './configs'; import debug from 'electron-debug'; import * as application from './services/app'; import * as window from './services/window'; -import * as config from './configs/config'; Log('[app] start 😘'); @@ -44,6 +44,4 @@ global.services = { window, }; -global.configs = { - config, -}; +global.configs = Configs; diff --git a/src/main/services/loadIpc.js b/src/main/services/loadIpc.js index a44fb71..66d500d 100644 --- a/src/main/services/loadIpc.js +++ b/src/main/services/loadIpc.js @@ -1,29 +1,40 @@ import { Log } from '../utils'; +import Configs from '../configs'; import { ipcMain as ipc, shell } from 'electron'; -let size = [375, 210]; +let windowsSize = Configs.get('windowsSize'); +let playerSize = Configs.get('playerSize'); export default win => { + // 设置 + ipc.on('config-set', (event, data) => { + Configs.set(data); + }); + + // console 转发 ipc.on('console-msg', (event, data) => { Log(`[webview]${data}`); }); + // 浏览器打开外链 ipc.on('link', (event, data) => { shell.openExternal(data); }); + // 关闭按钮处理 ipc.on('close-main-window', () => { win.minimize(); }); + // 界面尺寸 ipc.on('video-on', () => { - win.setSize(size[0], size[1], true); + win.setSize(playerSize[0], playerSize[1], true); win.setResizable(true); }); ipc.on('video-off', () => { - win.setSize(375, 650, true); + win.setSize(windowsSize[0], windowsSize[1], true); win.setResizable(false); }); ipc.on('resize', () => { - size = win.getSize(); - Log('[app][resize]', size); + playerSize = win.getSize(); + Log('[app][resize]', playerSize); }); Log('[app][ipc] load'); }; diff --git a/src/renderer/routes/Setting/About/index.js b/src/renderer/routes/Setting/About/index.js index ae5b390..b367728 100644 --- a/src/renderer/routes/Setting/About/index.js +++ b/src/renderer/routes/Setting/About/index.js @@ -8,7 +8,7 @@ export default () => { const Github = () => Link('https://github.com/canisminor1990/bilibili-client'); return (
-
+
logo
Bilibili Mini-Client
@@ -23,7 +23,6 @@ export default () => { MIT开源于Github
-
Copyright © ️CanisMinor 2018
); }; diff --git a/src/renderer/routes/Setting/About/index.scss b/src/renderer/routes/Setting/About/index.scss index adf94cb..d71a81f 100644 --- a/src/renderer/routes/Setting/About/index.scss +++ b/src/renderer/routes/Setting/About/index.scss @@ -1,10 +1,11 @@ @import 'import'; .band { + cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; - height: 24rem; + padding: 4rem 0; } .info { color: #666; @@ -16,12 +17,6 @@ justify-content: center; box-shadow: 0 2px 8px rgba(#000, 0.1); } -.copyright { - color: #ccc; - margin-top: 1.5rem; - text-align: center; - font-size: 0.8rem; -} .logo { width: 8rem; height: 8rem; diff --git a/src/renderer/routes/Setting/Basic/index.js b/src/renderer/routes/Setting/Basic/index.js index e690916..cecddcb 100644 --- a/src/renderer/routes/Setting/Basic/index.js +++ b/src/renderer/routes/Setting/Basic/index.js @@ -1,13 +1,59 @@ +import { Component } from 'react'; +import _ from 'lodash'; +import { Configs } from '../../../utils'; +import { Input, Button, message } from 'antd'; import style from './index.scss'; -export default () => { - return ( -
- Comming Soon{' '} - - 😘 - {' '} - ... -
- ); -}; +const InputGroup = Input.Group; + +class Basic extends Component { + state = { + configs: Configs.store, + }; + + onClickSave = () => { + message.success('保存成功！'); + }; + onClickRestore = () => { + message.success('重置成功！'); + }; + + render() { + const { configs } = this.state; + const SettingInput = (key, title) => { + const defaultValue = configs[key]; + let InputBox; + if (_.isArray(defaultValue)) { + InputBox = [ + , + , + ]; + } else { + InputBox = ; + } + return ( +
+
{title}:
+ {InputBox} +
+ ); + }; + return ( +
+ {SettingInput('playerSize', '播放器尺寸')} + {SettingInput('windowsSize', '主窗口尺寸')} + {SettingInput('opacity', '透明度')} +
+ + +
+
+ ); + } +} + +export default Basic; diff --git a/src/renderer/routes/Setting/Basic/index.scss b/src/renderer/routes/Setting/Basic/index.scss index 02f6cfa..b0685c0 100644 --- a/src/renderer/routes/Setting/Basic/index.scss +++ b/src/renderer/routes/Setting/Basic/index.scss @@ -1,10 +1,36 @@ @import 'import'; .box { - height: 30rem; - font-size: 1.5rem; + display: flex; + flex-direction: column; + padding: 1rem; +} + +.cell { + display: flex; + margin-bottom: 1rem; +} + +.title { + height: 2rem; + width: 8rem; display: flex; align-items: center; - justify-content: center; - color: #999; + margin-right: 0.5rem; +} + +.btnGroup { + margin-top: 1rem; + display: flex; + flex-direction: column; +} + +.btn { + border-radius: 3rem; + margin-bottom: 0.8rem; + &:first-child { + border: none; + background: linear-gradient(45deg, $c-primary, lighten($c-primary, 10%)); + box-shadow: 0 4px 8px rgba($c-primary, 0.15); + } } diff --git a/src/renderer/routes/Setting/index.js b/src/renderer/routes/Setting/index.js index 2e4d188..944bbe6 100644 --- a/src/renderer/routes/Setting/index.js +++ b/src/renderer/routes/Setting/index.js @@ -11,7 +11,7 @@ const State = state => ({ a: 1 }); const Setting = () => { return (
- +
@@ -23,6 +23,7 @@ const Setting = () => {
+
Copyright © ️ CanisMinor 2018
); }; diff --git a/src/renderer/routes/Setting/index.scss b/src/renderer/routes/Setting/index.scss index 3373fc4..fb81ddc 100644 --- a/src/renderer/routes/Setting/index.scss +++ b/src/renderer/routes/Setting/index.scss @@ -21,3 +21,17 @@ box-shadow: $bar-shadow; } } +.copyright { + color: #ccc; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + height: 4em; + font-size: 0.8rem; + position: fixed; + background: #fff; + width: 100%; + bottom: 0; + left: 0; +} diff --git a/src/renderer/utils.js b/src/renderer/utils.js index 5c548e0..1bc17cc 100644 --- a/src/renderer/utils.js +++ b/src/renderer/utils.js @@ -1,4 +1,4 @@ -import { ipcRenderer as ipc } from 'electron'; +import { ipcRenderer as ipc, remote } from 'electron'; const UserAgent = { desktop: 'bilimini Desktop like Mozilla/233 (Chrome and Safari)', @@ -8,9 +8,10 @@ const AvPrefix = 'https://www.bilibili.com/video/av'; const Log = msg => { console.log(msg); - if ($isDev) ipc.send('console-msg', msg); // eslint-disable-line + if ($isDev) ipc.send('console-msg', msg); // eslint-disable-line }; const Platform = navigator.platform.indexOf('Mac') > -1 ? 'mac' : 'win'; +const Configs = remote.getGlobal('configs'); -export { UserAgent, AvPrefix, Log, Platform }; +export { UserAgent, AvPrefix, Log, Platform, Configs };