diff --git a/css/app.css b/css/app.css index 692eb65..7649e32 100644 --- a/css/app.css +++ b/css/app.css @@ -1 +1 @@ -@font-face{font-family:"sonist font";src:url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff")}[class^="s-icon-"],[class*=" s-icon-"]{display:inline-block;font-family:"sonist font" !important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.s-icon-all:before{content:"\e714"}.s-icon-eq:before{content:"\e715"}.s-icon-heart:before{content:"\e716"}.s-icon-music:before{content:"\e717"}.s-icon-play-list:before{content:"\e719"}.s-icon-mv:before{content:"\e71d"}.s-icon-rank:before{content:"\e71e"}.s-icon-singer:before{content:"\e71f"}.s-icon-random:before{content:"\e720"}.s-icon-radio:before{content:"\e721"}.s-icon-single:before{content:"\e722"}.s-icon-next:before{content:"\e723"}.s-icon-prev:before{content:"\e724"}.s-icon-pause:before{content:"\e725"}.s-icon-play:before{content:"\e726"}.do-fn-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.do-fn-nodrag{-webkit-app-region:no-drag}html{font-size:62.5%}body{line-height:1.5;background:#fff;font-size:1.4rem;color:#62778d}table{overflow:auto;display:table;width:100%;line-height:2.5rem}table thead tr{height:4.5rem;border-bottom:0.1rem solid #f3f5fb}table thead th{padding:1rem .8rem;border:0}table tbody tr{height:auto;transition:background .3s ease-in-out}table tbody tr:hover{background:#f7f8fb}table tbody td{padding:.9rem .8rem}::-webkit-scrollbar{width:8px;height:8px;background:#f7f8fb}::-webkit-scrollbar:hover{background:#f3f5fb}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{background:#dae1e9}::-webkit-scrollbar-thumb:hover{background:#3fc2a7}.do-mod-app{display:flex;position:fixed;left:0;top:0;width:100%;height:100%}.do-mod-app .menubar{position:absolute;left:1.2rem;top:0;z-index:99;width:auto;height:3rem;padding:.9rem 0}.do-mod-app .menubar .item{display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover}.do-mod-app .menubar.focus .quit{background-image:url(/images/btn-close.svg)}.do-mod-app .menubar.focus .min{background-image:url(/images/btn-mini.svg)}.do-mod-app .menubar.focus .max{background-image:url(/images/btn-maxi.svg)}.do-mod-app .menubar:hover .quit{background-image:url(/images/btn-close_a.svg)}.do-mod-app .menubar:hover .min{background-image:url(/images/btn-mini_a.svg)}.do-mod-app .menubar:hover .max{background-image:url(/images/btn-maxi_a.svg)}.do-mod-app .menubar-win{position:absolute;right:1.2rem;top:0;z-index:99;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}.do-mod-app .menubar-win .item,.do-mod-app .menubar-win .opt{position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem}.do-mod-app .menubar-win .item:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .menubar-win .opt i{font-size:1.8rem}.do-mod-app .menubar-win .opt-list{position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 0.5rem 2rem rgba(0,0,0,0.1);font-size:1.4rem}.do-mod-app .menubar-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}.do-mod-app .menubar-win .opt-list span i{padding-right:.8rem}.do-mod-app .menubar-win .opt-list span.pipe{height:.1rem;margin:.5rem 0;border-bottom:0.1rem solid #f3f5fb}.do-mod-app .menubar-win .opt-list span:hover{background:#f3f5fb}.do-mod-app .sidebar{flex:0 1 22rem;position:relative;height:100%;background:#f3f5fb}.do-mod-app .sidebar .user-box{width:18rem;height:16.5rem;margin:4rem 2rem 0;text-align:center}.do-mod-app .sidebar .user-box .avatar{overflow:hidden;width:12rem;height:12rem;margin:0 3rem;border:.6rem solid #fff;border-radius:50%;box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.15)}.do-mod-app .sidebar .user-box img{width:100%;height:100%}.do-mod-app .sidebar .user-box .uname{line-height:2;font-weight:normal}.do-mod-app .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}.do-mod-app .sidebar .music-box dt.title{line-height:4rem;color:#98acae}.do-mod-app .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#748182}.do-mod-app .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}.do-mod-app .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}.do-mod-app .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}.do-mod-app .sidebar .music-box dd.item.disabled{opacity:.25}.do-mod-app .sidebar .play-contrl{position:absolute;left:0;bottom:0;width:100%;height:8rem;background:rgba(255,255,255,0.3)}.do-mod-app .sidebar .play-contrl .item{position:absolute;top:2rem;width:4rem;height:4rem;line-height:4rem;font-size:3.5rem;text-align:center;color:#19b491;transition:all .2s ease-in-out}.do-mod-app .sidebar .play-contrl .item:hover{color:#dae1e9}.do-mod-app .sidebar .play-contrl .item:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .sidebar .play-contrl .prev{left:2.5rem}.do-mod-app .sidebar .play-contrl .play{left:50%;top:1.5rem;width:5rem;height:5rem;margin-left:-2.5rem;line-height:5rem;font-size:4.5rem}.do-mod-app .sidebar .play-contrl .next{right:2.5rem}.do-mod-app .main{flex:1;display:flex;flex-flow:column wrap}.do-mod-app .main .tool-bar{flex:0 1 5rem;padding:1rem}.do-mod-app .main .tool-bar .search{position:relative;display:inline-block;line-height:3rem}.do-mod-app .main .tool-bar .icon{position:absolute;right:0;top:0;width:2.6rem;height:3rem}.do-mod-app .main .tool-bar input{width:20rem;padding:0 1.3rem;border-radius:1.5rem}.do-mod-app .main .module{flex:1;display:flex;flex-flow:column wrap}.do-mod-app .main .play-bar{position:relative;flex:0 1 8rem;display:flex;justify-content:center;align-items:center;background:#f5f6fc}.do-mod-app .main .play-bar .song-stat{flex:1;height:8rem;margin:0 2rem 0 0}.do-mod-app .main .play-bar .song-stat canvas{display:flex;width:100%;height:100%}.do-mod-app .main .play-bar .ctrl{position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:#19b491;font-size:2rem}.do-mod-app .main .play-bar .ctrl:hover{color:#3fc2a7}.do-mod-app .main .play-bar .ctrl:active{color:#16967a}.do-mod-app .main .play-bar .ctrl.lrc{margin-right:2rem;font-size:1.6rem}@-webkit-keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} +@font-face{font-family:"sonist font";src:url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff")}[class^="s-icon-"],[class*=" s-icon-"]{display:inline-block;font-family:"sonist font" !important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.s-icon-all:before{content:"\e714"}.s-icon-eq:before{content:"\e715"}.s-icon-heart:before{content:"\e716"}.s-icon-music:before{content:"\e717"}.s-icon-play-list:before{content:"\e719"}.s-icon-mv:before{content:"\e71d"}.s-icon-rank:before{content:"\e71e"}.s-icon-singer:before{content:"\e71f"}.s-icon-random:before{content:"\e720"}.s-icon-radio:before{content:"\e721"}.s-icon-single:before{content:"\e722"}.s-icon-next:before{content:"\e723"}.s-icon-prev:before{content:"\e724"}.s-icon-pause:before{content:"\e725"}.s-icon-play:before{content:"\e726"}.do-fn-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.do-fn-nodrag{-webkit-app-region:no-drag}html{font-size:62.5%}body{line-height:1.5;background:#fff;font-size:1.4rem;color:#62778d}table{overflow:auto;display:table;width:100%;line-height:2.5rem}table thead tr{height:4.5rem;border-bottom:0.1rem solid #f3f5fb}table thead th{padding:1rem .8rem;border:0}table tbody tr{height:auto;transition:background .3s ease-in-out}table tbody tr:hover{background:#f7f8fb}table tbody td{padding:.9rem .8rem}::-webkit-scrollbar{width:8px;height:8px;background:#f7f8fb}::-webkit-scrollbar:hover{background:#f3f5fb}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{background:#dae1e9}::-webkit-scrollbar-thumb:hover{background:#3fc2a7}.do-mod-app{display:flex;position:fixed;left:0;top:0;width:100%;height:100%}.do-mod-app .menubar{position:absolute;left:1.2rem;top:0;z-index:99;width:auto;height:3rem;padding:.9rem 0}.do-mod-app .menubar .item{display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover}.do-mod-app .menubar.focus .quit{background-image:url(/images/btn-close.svg)}.do-mod-app .menubar.focus .min{background-image:url(/images/btn-mini.svg)}.do-mod-app .menubar.focus .max{background-image:url(/images/btn-maxi.svg)}.do-mod-app .menubar:hover .quit{background-image:url(/images/btn-close_a.svg)}.do-mod-app .menubar:hover .min{background-image:url(/images/btn-mini_a.svg)}.do-mod-app .menubar:hover .max{background-image:url(/images/btn-maxi_a.svg)}.do-mod-app .menubar-win{position:absolute;right:1.2rem;top:0;z-index:99;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}.do-mod-app .menubar-win .item,.do-mod-app .menubar-win .opt{position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem}.do-mod-app .menubar-win .item:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .menubar-win .opt i{font-size:1.8rem}.do-mod-app .menubar-win .opt-list{position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 0.5rem 2rem rgba(0,0,0,0.1);font-size:1.4rem}.do-mod-app .menubar-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}.do-mod-app .menubar-win .opt-list span i{padding-right:.8rem}.do-mod-app .menubar-win .opt-list span.pipe{height:.1rem;margin:.5rem 0;border-bottom:0.1rem solid #f3f5fb}.do-mod-app .menubar-win .opt-list span:hover{background:#f3f5fb}.do-mod-app .sidebar{flex:0 1 22rem;position:relative;height:100%;background:#f3f5fb}.do-mod-app .sidebar .user-box{width:18rem;height:16.5rem;margin:4rem 2rem 0;text-align:center}.do-mod-app .sidebar .user-box .avatar{overflow:hidden;width:12rem;height:12rem;margin:0 3rem;border:.6rem solid #fff;border-radius:50%;box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.15)}.do-mod-app .sidebar .user-box img{width:100%;height:100%}.do-mod-app .sidebar .user-box .uname{line-height:2;font-weight:normal}.do-mod-app .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}.do-mod-app .sidebar .music-box dt.title{line-height:4rem;color:#98acae}.do-mod-app .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#748182}.do-mod-app .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}.do-mod-app .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}.do-mod-app .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}.do-mod-app .sidebar .music-box dd.item.disabled{opacity:.25}.do-mod-app .sidebar .play-contrl{position:absolute;left:0;bottom:0;width:100%;height:8rem;background:rgba(255,255,255,0.3)}.do-mod-app .sidebar .play-contrl .item{position:absolute;top:2rem;width:4rem;height:4rem;line-height:4rem;font-size:3.5rem;text-align:center;color:#19b491;transition:all .2s ease-in-out}.do-mod-app .sidebar .play-contrl .item:hover{color:#dae1e9}.do-mod-app .sidebar .play-contrl .item:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .sidebar .play-contrl .prev{left:2.5rem}.do-mod-app .sidebar .play-contrl .play{left:50%;top:1.5rem;width:5rem;height:5rem;margin-left:-2.5rem;line-height:5rem;font-size:4.5rem}.do-mod-app .sidebar .play-contrl .next{right:2.5rem}.do-mod-app .main{flex:1;display:flex;flex-flow:column wrap}.do-mod-app .main .tool-bar{flex:0 1 5rem;padding:1rem}.do-mod-app .main .tool-bar .search{position:relative;display:inline-block;line-height:3rem}.do-mod-app .main .tool-bar .icon{position:absolute;right:0;top:0;width:2.6rem;height:3rem}.do-mod-app .main .tool-bar input{width:20rem;padding:0 1.3rem;border-radius:1.5rem}.do-mod-app .main .module{flex:1;display:flex;flex-flow:column wrap}.do-mod-app .main .play-bar{position:relative;flex:0 1 8rem;display:flex;justify-content:center;align-items:center;background:#f5f6fc}.do-mod-app .main .play-bar .song-stat{flex:1;height:8rem;margin:0 2rem 0 0}.do-mod-app .main .play-bar .song-stat canvas{display:flex;width:100%;height:100%}.do-mod-app .main .play-bar .ctrl{position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:#19b491;font-size:2rem}.do-mod-app .main .play-bar .ctrl:hover{color:#3fc2a7}.do-mod-app .main .play-bar .ctrl:active{color:#16967a}.do-mod-app .main .play-bar .ctrl.lrc{margin-right:2rem;font-size:1.6rem}.do-mod-app .main .play-bar .ctrl .volume-ctrl{display:none;flex-direction:column;justify-content:flex-end;position:absolute;left:.5rem;bottom:3rem;width:2.4rem;height:12rem;padding:1rem .8rem;background:#fff;border-radius:.3rem;box-shadow:0 0 1rem rgba(0,0,0,0.1)}.do-mod-app .main .play-bar .ctrl .volume-ctrl em{flex:0 0;border-radius:.5rem;background:#3fc2a7}.do-mod-app .main .play-bar .ctrl.volume:hover .volume-ctrl{display:flex}@-webkit-keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} diff --git a/css/app.scss b/css/app.scss index ded79ef..b290e8a 100644 --- a/css/app.scss +++ b/css/app.scss @@ -160,6 +160,13 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem; &:hover {color:nth($ct, 1)} &:active {color:nth($ct, 3)} &.lrc {margin-right:2rem;font-size:1.6rem;} + + .volume-ctrl {display:none;flex-direction:column;justify-content:flex-end;position:absolute;left:.5rem;bottom:3rem;width:2.4rem;height:12rem;padding:1rem .8rem;background:#fff;border-radius:.3rem;box-shadow:0 0 1rem rgba(0, 0, 0, .1); + + em {flex:0 0;border-radius:.5rem;background:nth($ct, 1)} + } + + &.volume:hover .volume-ctrl {display:flex} } } diff --git a/dist/audio/index.js b/dist/audio/index.js index 3621262..d535e15 100644 --- a/dist/audio/index.js +++ b/dist/audio/index.js @@ -17,7 +17,7 @@ class AudioPlayer { this.__LIST__ = [] // 播放列表 this.__CURR__ = -1 // 当前播放的歌曲的id this.__PLAY_MODE__ = 'all' // all | single | random - this.__PLAYER__.valume = 0.7 + this.__PLAYER__.volume = 0.7 this.__init__() } @@ -48,8 +48,8 @@ class AudioPlayer { return this.__PLAYER__.muted } - set valume(val) { - this.__PLAYER__.valume = val / 100 + set volume(val) { + this.__PLAYER__.volume = val / 100 } set mode(val = 'all') { diff --git a/index.html b/index.html index fc97c0e..47c3350 100644 --- a/index.html +++ b/index.html @@ -130,7 +130,19 @@ }" :click="togglePlayMode"> - +
+ + + + + +
词 diff --git a/js/api.js b/js/api.js index e3a8b72..7e6a1df 100644 --- a/js/api.js +++ b/js/api.js @@ -104,5 +104,35 @@ export default { return JSON.parse(res.text) } }) + }, + + search(keyword) { + return request + .get('https://songsearch.kugou.com/song_search_v2') + .send({ + keyword, + platform: 'WebFilter', + tag: '' + }) + .then(res => { + if (res.status === 200) { + return JSON.parse(res.text).data.lists + } + }) + }, + + getSongInfoByHash(hash, album_id = '') { + return request + .get('https://wwwapi.kugou.com/yy') + .send({ + r: 'play/getdata', + hash, + album_id + }) + .then(res => { + if (res.status === 200) { + return JSON.parse(res.text).data + } + }) } } diff --git a/js/app.js b/js/app.js index 1a10854..4a9c6be 100644 --- a/js/app.js +++ b/js/app.js @@ -25,6 +25,7 @@ const { remote } = require('electron') const WIN = remote.getCurrentWindow() const HOME_PATH = remote.app.getPath('appData') const APP_INI_PATH = path.join(HOME_PATH, 'app.ini') +const LYRICS_PATH = path.join(HOME_PATH, 'lyrics') const PLAY_MODE = { 0: 'all', 1: 'single', @@ -48,12 +49,14 @@ appInit = JSON.parse(appInit) Anot({ $id: 'app', state: { - theme: 1, // 1:macos, 2: deepin + theme: appInit.theme || 1, // 1:macos, 2: deepin winFocus: false, mod: 'local', playMode: Anot.ls('play-mode') >>> 0, // 0:all | 1:single | 2:random isPlaying: false, optBoxShow: false, + volumeCtrlShow: false, + volume: Anot.ls('volume') || 70, curr: { id: '', index: 0, @@ -62,10 +65,7 @@ Anot({ album: '', time: 0, duration: 0 - }, - - currTimeBar: '', - currTimeBarPercent: 0 + } }, skip: [], computed: { @@ -77,13 +77,6 @@ Anot({ } }, watch: { - 'curr.*'() { - let { time, duration } = this.curr - let x = time / duration - - this.currTimeBar = `matrix(1, 0, 0, 1, ${x * this.__TB_WIDTH__}, 0)` - this.currTimeBarPercent = 100 * x + '%' - }, mod(val) { this.activeModule(val) } @@ -193,6 +186,20 @@ Anot({ Anot.ls('play-mode', mod) }, + // 修改音量 + changeValume(ev) { + let volume = 535 - ev.pageY + if (volume < 0) { + volume = 0 + } + if (volume > 100) { + volume = 100 + } + this.volume = volume + SONIST.volume = volume + Anot.ls('volume', volume) + }, + draw() { let img1 = new Image() let img2 = new Image() @@ -286,15 +293,12 @@ Anot({ } this.isPlaying = false _p.then(it => { - this.curr = { - ...it, - time: 0, - cover: - 'http://imge.kugou.com/stdmusic/480/20170906/20170906161516611883.jpg' + if (this.mod === 'local') { + Local.__updateSong__(it) } // 通知子模块歌曲已经改变 this.$fire('child!curr', it.id) - this.play() + this.play(it) }) }, @@ -302,16 +306,17 @@ Anot({ this.isPlaying = false }, + updateCurr(obj) { + let old = this.curr.$model + this.curr = Object.assign(old, obj) + }, + play(song) { // 有参数的,说明是播放回调通知 // 此时仅更新播放控制条的信息即可 if (song) { - this.curr = { - ...song, - time: 0, - cover: - 'http://imge.kugou.com/stdmusic/480/20170906/20170906161516611883.jpg' - } + song.time = 0 + this.updateCurr(song) this.isPlaying = true } else { if (SONIST.stat === 'ready') { diff --git a/js/modules/local.js b/js/modules/local.js index 1c0efea..9a5dbe1 100644 --- a/js/modules/local.js +++ b/js/modules/local.js @@ -17,6 +17,7 @@ const { app, dialog } = require('electron').remote const log = console.log const HOME_PATH = app.getPath('appData') const MUSIC_DB_PATH = path.join(HOME_PATH, 'music.db') +const LYRICS_PATH = path.join(HOME_PATH, 'lyrics') let appInit = {} let dbCache = fs.cat(MUSIC_DB_PATH) @@ -56,16 +57,65 @@ export default Anot({ methods: { __init__() { appInit = JSON.parse(Anot.ss('app-init')) - log(appInit) }, - play(idx) { + play(song, idx) { + if (song.id === this.curr) { + return + } SONIST.play(idx).then(it => { this.__APP__.play(it) this.curr = it.id + + this.__updateSong__(it, idx) }) }, + __updateSong__(it, idx) { + if (!it.cover) { + if (idx === undefined) { + for (let i in this.list.$model) { + if (this.list[i].id === it.id) { + idx = i + break + } + } + } + let _P = Promise.resolve(true) + if (!it.kgHash) { + _P = Api.search(`${it.artist} ${it.title}`).then(list => { + if (list.length) { + let { AlbumID, FileHash } = list[0] + it.kgHash = FileHash + it.albumId = AlbumID + return true + } + return false + }) + } + _P.then(next => { + if (next) { + Api.getSongInfoByHash(it.kgHash, it.albumId).then(json => { + it.album = json.album_name + it.albumId = json.album_id + it.kgHash = json.hash + it.cover = json.img + it.lyrics = path.join(LYRICS_PATH, `${it.id}.lrc`) + + this.list.set(idx, it) + LS.insert(it) + + this.__APP__.updateCurr(it) + this.__APP__.draw() + + fs.echo(json.lyrics, it.lyrics) + fs.echo(JSON.stringify(LS.getAll(), '', 2), MUSIC_DB_PATH) + }) + } + }) + } + }, + __checkSong__() { let song = this.__LIST__.pop() diff --git a/main.js b/main.js index 708ad0b..0f82b35 100644 --- a/main.js +++ b/main.js @@ -42,6 +42,7 @@ protocol.registerStandardSchemes(['app'], { secure: true }) let appPath = app.getPath('appData') if (!fs.exists(appPath)) { fs.mkdir(appPath) + fs.mkdir(path.join(appPath, 'lyrics')) fs.echo('{}', path.join(appPath, 'app.ini')) fs.echo('[]', path.join(appPath, 'music.db')) } diff --git a/views/local.htm b/views/local.htm index 8fede00..e7b13ce 100644 --- a/views/local.htm +++ b/views/local.htm @@ -18,7 +18,7 @@ + :dblclick="play(it, $index)">