diff --git a/package.json b/package.json index 5ace955..149ec18 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "top.yutent.sonist", - "version": "2.0.0-alpha-1", + "version": "2.0.0-alpha-2", "description": "Music Player", "main": "src/main.js", "scripts": { @@ -15,7 +15,8 @@ "license": "MIT", "dependencies": { "crypto.js": "^2.0.2", - "iofs": "^1.5.1" + "iofs": "^1.5.1", + "sqlite3": "^5.0.0" }, "devDependencies": { "electron": "^10.0.0", @@ -33,7 +34,12 @@ "version": "10.1.5", "mirror": "https://npm.taobao.org/mirrors/electron/" }, - "files": ["src/**/*", "node_modules/iofs/*", "node_modules/crypto.js/*"], + "files": [ + "src/**/*", + "node_modules/iofs/*", + "node_modules/sqlite3/*", + "node_modules/crypto.js/*" + ], "mac": { "category": "public.app-category.music", "target": "dmg", diff --git a/src/css/app.css b/src/css/app.css index 0f139eb..5cbaaea 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1 +1 @@ -.app{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:rgba(0,0,0,0.2)}.app .title-bar{position:relative;display:flex;align-items:center;z-index:9;height:26px}.app .title-bar .btn-box{display:inline-flex;width:auto;height:12px;padding:0 8px}.app .title-bar .btn-box .item{display:inline-flex;width:12px;height:12px;margin:0 3px;background:url(/images/btn-grey.svg) no-repeat;background-size:cover}.app .title-bar .btn-box.focus .quit{background-image:url(/images/btn-close.svg)}.app .title-bar .btn-box.focus .min{background-image:url(/images/btn-mini.svg)}.app .title-bar .btn-box:hover .quit{background-image:url(/images/btn-close_a.svg)}.app .title-bar .btn-box:hover .min{background-image:url(/images/btn-mini_a.svg)}.app .main-body{overflow:hidden;flex:1;display:flex;justify-content:space-between}.app .main-body .aside{width:180px;height:100%;padding:0 16px;line-height:2}.app .main-body .aside fieldset{border:0;color:#ebebeb;font-size:12px}.app .main-body .aside fieldset legend{font-size:18px;background:linear-gradient(to bottom, #58ffdf 50%, #459888);-webkit-background-clip:text;background-clip:text;color:transparent}.app .main-body .aside fieldset .item{padding-left:12px;line-height:1.75}.app .main-body .aside fieldset button{width:42px;height:16px;margin-left:12px;font-size:10px;border:0;border-radius:9px;background:#64b5f6;color:#fff}.app .main-body .song-box{width:618px}.app .main-body .song-box .preview{position:relative;display:flex;align-items:center;width:100%;height:99px;padding-bottom:16px;border-bottom:1px solid rgba(200,200,200,0.1)}.app .main-body .song-box .preview .album{width:80px;height:80px}.app .main-body .song-box .preview .album img{width:100%;height:100%}.app .main-body .song-box .preview .info{display:flex;flex-direction:column;justify-content:center;width:320px;margin-left:32px}.app .main-body .song-box .preview .info strong{height:36px;font-size:18px;font-weight:normal}.app .main-body .song-box .preview .info cite{font-size:12px;font-style:normal}.app .main-body .song-box .preview .info p{font-size:12px;color:#bdbdbd}.app .main-body .song-box .preview .duration{position:absolute;right:32px;top:16px;font-size:12px;color:#bdbdbd}.app .main-body .song-box .preview .total{position:absolute;right:32px;bottom:16px;font-size:16px;font-weight:bold;font-family:Raleway}.app .main-body .song-box .scroll-box{width:100%;height:269px;padding:16px 6px;border-top:1px solid rgba(32,32,32,0.1)}.app .main-body .song-box .list{height:237px;font-size:12px}.app .main-body .song-box .list .item{display:flex;align-items:center;height:26px;padding:0 12px;border-radius:13px}.app .main-body .song-box .list .item .idx{position:relative;width:64px;padding-left:16px;font-size:12px;font-family:Raleway}.app .main-body .song-box .list .item .name{overflow:hidden;flex:1}.app .main-body .song-box .list .item .artist{overflow:hidden;width:128px;margin-left:12px}.app .main-body .song-box .list .item .duration{width:42px;margin-left:12px}.app .main-body .song-box .list .item.on{color:#feac23;font-size:14px}.app .main-body .song-box .list .item.on .idx::before{position:absolute;left:0;top:3px;font-size:10px;content:"▶ "}.app .main-body .song-box .list .item.active,.app .main-body .song-box .list .item:hover{color:#58ffdf;background:rgba(29,77,68,0.15)}.app .play-bar{height:66px;width:100%;background:rgba(255,255,255,0.25);color:#fff}.app .play-bar .stat-bar{display:flex;align-items:center;justify-content:space-between;height:20px;color:#ebebeb}.app .play-bar .stat-bar .time{width:42px;margin:0 6px;text-align:center;font-size:12px}.app .play-bar .stat-bar .progress{flex:1;display:flex;align-items:flex-start;height:3px;background:#b2cfe3}.app .play-bar .stat-bar .thumb{width:8%;height:3px;background:#58ffdf}.app .play-bar .ctrl-box{display:flex;align-items:center;height:42px}.app .play-bar .ctrl-box .holder{flex:1}.app .play-bar .ctrl-box .info{display:flex;flex-direction:column;justify-content:center;width:320px;height:42px;padding-left:12px;line-height:1.25}.app .play-bar .ctrl-box .info strong{font-size:14px;font-weight:500}.app .play-bar .ctrl-box .info cite{font-size:12px;font-style:normal;color:#aeaeae}.app .play-bar .ctrl-box .play-btn{display:flex;align-items:center;justify-content:space-between;width:120px;height:42px;margin-left:32px}.app .play-bar .ctrl-box .play-btn .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background .1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-btn .item.prev{background-image:url(/images/ctrl/prev.png)}.app .play-bar .ctrl-box .play-btn .item.prev:hover,.app .play-bar .ctrl-box .play-btn .item.prev:active{background-image:url(/images/ctrl/prev_a.png)}.app .play-bar .ctrl-box .play-btn .item.on,.app .play-bar .ctrl-box .play-btn .item.off{width:42px;height:42px}.app .play-bar .ctrl-box .play-btn .item.on{background-image:url(/images/ctrl/play.png);-webkit-animation:round 2s linear infinite;animation:round 2s linear infinite}.app .play-bar .ctrl-box .play-btn .item.on:hover,.app .play-bar .ctrl-box .play-btn .item.on:active{background-image:url(/images/ctrl/play_a.png)}.app .play-bar .ctrl-box .play-btn .item.off{background-image:url(/images/ctrl/pause.png)}.app .play-bar .ctrl-box .play-btn .item.off:hover,.app .play-bar .ctrl-box .play-btn .item.off:active{background-image:url(/images/ctrl/pause_a.png)}.app .play-bar .ctrl-box .play-btn .item.next{background-image:url(/images/ctrl/next.png)}.app .play-bar .ctrl-box .play-btn .item.next:hover,.app .play-bar .ctrl-box .play-btn .item.next:active{background-image:url(/images/ctrl/next_a.png)}.app .play-bar .ctrl-box .play-action{display:flex;align-items:center;justify-content:space-between;width:64px;height:22px;margin-right:16px}.app .play-bar .ctrl-box .play-action .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background .1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-action .item.volume{background-image:url(/images/ctrl/volume.png)}.app .play-bar .ctrl-box .play-action .item.volume:hover,.app .play-bar .ctrl-box .play-action .item.volume:active{background-image:url(/images/ctrl/volume_a.png)}.app .play-bar .ctrl-box .play-action .item.mute{background-image:url(/images/ctrl/mute.png)}.app .play-bar .ctrl-box .play-action .item.mute:hover,.app .play-bar .ctrl-box .play-action .item.mute:active{background-image:url(/images/ctrl/mute_a.png)}.app .play-bar .ctrl-box .play-action .item.single{background-image:url(/images/ctrl/single.png)}.app .play-bar .ctrl-box .play-action .item.single:hover,.app .play-bar .ctrl-box .play-action .item.single:active{background-image:url(/images/ctrl/single_a.png)}.app .play-bar .ctrl-box .play-action .item.all{background-image:url(/images/ctrl/all.png)}.app .play-bar .ctrl-box .play-action .item.all:hover,.app .play-bar .ctrl-box .play-action .item.all:active{background-image:url(/images/ctrl/all_a.png)}.app .play-bar .ctrl-box .play-action .item.rand{background-image:url(/images/ctrl/rand.png)}.app .play-bar .ctrl-box .play-action .item.rand:hover,.app .play-bar .ctrl-box .play-action .item.rand:active{background-image:url(/images/ctrl/rand_a.png)}@-webkit-keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} +.app{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:rgba(0,0,0,0.3)}.app .title-bar{position:relative;display:flex;align-items:center;z-index:9;height:26px}.app .title-bar .btn-box{display:inline-flex;width:auto;height:12px;padding:0 8px}.app .title-bar .btn-box .item{display:inline-flex;width:12px;height:12px;margin:0 3px;background:url(/images/btn-grey.svg) no-repeat;background-size:cover}.app .title-bar .btn-box.focus .quit{background-image:url(/images/btn-close.svg)}.app .title-bar .btn-box.focus .min{background-image:url(/images/btn-mini.svg)}.app .title-bar .btn-box:hover .quit{background-image:url(/images/btn-close_a.svg)}.app .title-bar .btn-box:hover .min{background-image:url(/images/btn-mini_a.svg)}.app .main-body{overflow:hidden;flex:1;display:flex;justify-content:space-between}.app .main-body .aside{width:180px;height:100%;padding:0 16px;line-height:2}.app .main-body .aside fieldset{border:0;color:#ebebeb;font-size:12px}.app .main-body .aside fieldset legend{font-size:18px;background:linear-gradient(to bottom, #58ffdf 50%, #459888);-webkit-background-clip:text;background-clip:text;color:transparent}.app .main-body .aside fieldset .item{padding-left:12px;line-height:1.75}.app .main-body .aside fieldset button{width:42px;height:16px;margin-left:12px;font-size:10px;border:0;border-radius:9px;background:#64b5f6;color:#fff}.app .main-body .song-box{width:618px}.app .main-body .song-box .preview{position:relative;display:flex;align-items:center;width:100%;height:99px;padding-bottom:16px;border-bottom:1px solid rgba(200,200,200,0.1)}.app .main-body .song-box .preview .album{width:80px;height:80px}.app .main-body .song-box .preview .album img{width:100%;height:100%}.app .main-body .song-box .preview .info{display:flex;flex-direction:column;justify-content:center;width:320px;margin-left:32px}.app .main-body .song-box .preview .info strong{height:36px;font-size:18px;font-weight:normal}.app .main-body .song-box .preview .info cite{font-size:12px;font-style:normal}.app .main-body .song-box .preview .info p{font-size:12px;color:#bdbdbd}.app .main-body .song-box .preview .duration{position:absolute;right:32px;top:16px;font-size:12px;color:#bdbdbd}.app .main-body .song-box .preview .total{position:absolute;right:32px;bottom:16px;font-size:16px;font-weight:bold;font-family:Raleway}.app .main-body .song-box .scroll-box{width:100%;height:269px;padding:16px 6px;border-top:1px solid rgba(32,32,32,0.1)}.app .main-body .song-box .list{height:237px;font-size:12px}.app .main-body .song-box .list .item{display:flex;align-items:center;height:26px;padding:0 12px;border-radius:13px}.app .main-body .song-box .list .item .idx{position:relative;width:64px;padding-left:16px;font-size:12px;font-family:Raleway}.app .main-body .song-box .list .item .name{overflow:hidden;flex:1}.app .main-body .song-box .list .item .artist{overflow:hidden;width:128px;margin-left:12px}.app .main-body .song-box .list .item .duration{width:42px;margin-left:12px}.app .main-body .song-box .list .item.on{color:#feac23;font-size:14px}.app .main-body .song-box .list .item.on .idx::before{position:absolute;left:0;top:3px;font-size:10px;content:"▶ "}.app .main-body .song-box .list .item.active,.app .main-body .song-box .list .item:hover{color:#58ffdf;background:rgba(29,77,68,0.15)}.app .play-bar{height:66px;width:100%;background:rgba(255,255,255,0.25);color:#fff}.app .play-bar .stat-bar{display:flex;align-items:center;justify-content:space-between;height:20px;color:#ebebeb}.app .play-bar .stat-bar .time{width:42px;margin:0 6px;text-align:center;font-size:12px}.app .play-bar .stat-bar .progress{flex:1;display:flex;align-items:flex-start;height:3px;background:#b2cfe3}.app .play-bar .stat-bar .thumb{width:8%;height:3px;background:#58ffdf}.app .play-bar .ctrl-box{display:flex;align-items:center;height:42px}.app .play-bar .ctrl-box .holder{flex:1}.app .play-bar .ctrl-box .info{display:flex;flex-direction:column;justify-content:center;width:320px;height:42px;padding-left:12px;line-height:1.25}.app .play-bar .ctrl-box .info strong{font-size:14px;font-weight:500}.app .play-bar .ctrl-box .info cite{font-size:12px;font-style:normal;color:#aeaeae}.app .play-bar .ctrl-box .play-btn{display:flex;align-items:center;justify-content:space-between;width:120px;height:42px;margin-left:32px}.app .play-bar .ctrl-box .play-btn .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background .1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-btn .item.prev{background-image:url(/images/ctrl/prev.png)}.app .play-bar .ctrl-box .play-btn .item.prev:hover,.app .play-bar .ctrl-box .play-btn .item.prev:active{background-image:url(/images/ctrl/prev_a.png)}.app .play-bar .ctrl-box .play-btn .item.on,.app .play-bar .ctrl-box .play-btn .item.off{width:42px;height:42px}.app .play-bar .ctrl-box .play-btn .item.on{background-image:url(/images/ctrl/play.png);-webkit-animation:round 2s linear infinite;animation:round 2s linear infinite}.app .play-bar .ctrl-box .play-btn .item.on:hover,.app .play-bar .ctrl-box .play-btn .item.on:active{background-image:url(/images/ctrl/play_a.png)}.app .play-bar .ctrl-box .play-btn .item.off{background-image:url(/images/ctrl/pause.png)}.app .play-bar .ctrl-box .play-btn .item.off:hover,.app .play-bar .ctrl-box .play-btn .item.off:active{background-image:url(/images/ctrl/pause_a.png)}.app .play-bar .ctrl-box .play-btn .item.next{background-image:url(/images/ctrl/next.png)}.app .play-bar .ctrl-box .play-btn .item.next:hover,.app .play-bar .ctrl-box .play-btn .item.next:active{background-image:url(/images/ctrl/next_a.png)}.app .play-bar .ctrl-box .play-action{display:flex;align-items:center;justify-content:space-between;width:64px;height:22px;margin-right:16px}.app .play-bar .ctrl-box .play-action .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background .1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-action .item.volume{background-image:url(/images/ctrl/volume.png)}.app .play-bar .ctrl-box .play-action .item.volume:hover,.app .play-bar .ctrl-box .play-action .item.volume:active{background-image:url(/images/ctrl/volume_a.png)}.app .play-bar .ctrl-box .play-action .item.mute{background-image:url(/images/ctrl/mute.png)}.app .play-bar .ctrl-box .play-action .item.mute:hover,.app .play-bar .ctrl-box .play-action .item.mute:active{background-image:url(/images/ctrl/mute_a.png)}.app .play-bar .ctrl-box .play-action .item.single{background-image:url(/images/ctrl/single.png)}.app .play-bar .ctrl-box .play-action .item.single:hover,.app .play-bar .ctrl-box .play-action .item.single:active{background-image:url(/images/ctrl/single_a.png)}.app .play-bar .ctrl-box .play-action .item.all{background-image:url(/images/ctrl/all.png)}.app .play-bar .ctrl-box .play-action .item.all:hover,.app .play-bar .ctrl-box .play-action .item.all:active{background-image:url(/images/ctrl/all_a.png)}.app .play-bar .ctrl-box .play-action .item.rand{background-image:url(/images/ctrl/rand.png)}.app .play-bar .ctrl-box .play-action .item.rand:hover,.app .play-bar .ctrl-box .play-action .item.rand:active{background-image:url(/images/ctrl/rand_a.png)}@-webkit-keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} diff --git a/src/css/app.scss b/src/css/app.scss index 766345b..a533977 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -12,7 +12,7 @@ position:relative; display:flex;flex-direction:column; width:100%;height:100%; - background:rgba(0, 0, 0, .2); + background:rgba(0, 0, 0, .3); // 标题栏样式 .title-bar { diff --git a/src/images/load1.png b/src/images/load1.png deleted file mode 100644 index eea26a7..0000000 Binary files a/src/images/load1.png and /dev/null differ diff --git a/src/images/load2.png b/src/images/load2.png deleted file mode 100755 index 43ea4d4..0000000 Binary files a/src/images/load2.png and /dev/null differ diff --git a/src/index.html b/src/index.html index 4fc8027..9786e79 100644 --- a/src/index.html +++ b/src/index.html @@ -53,71 +53,11 @@