From df36541c70a724655c9b51edb91c944da0a2a272 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Mon, 16 Nov 2020 19:38:44 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/app.css | 2 +- src/css/app.scss | 553 +++++++++++++------------ src/css/common.css | 2 +- src/css/common.scss | 24 +- src/{lib => }/css/reset-basic.css | 25 +- src/css/var.scss | 16 +- src/images/avatar.jpg | Bin 21036 -> 0 bytes src/images/ctrl/next.jsx | 5 + src/images/ctrl/pause.jsx | 5 + src/images/ctrl/play.jsx | 8 + src/images/ctrl/prev.jsx | 5 + src/images/ctrl/prev.svg | 11 + src/index.html | 298 ++++++------- src/js/app.js | 543 +----------------------- src/{ => js}/lib/anot.js | 0 src/{ => js}/lib/audio/index.js | 0 src/{ => js}/lib/avatar/def.jpg | Bin src/{ => js}/lib/avatar/index.js | 0 src/{ => js}/lib/drag/core.js | 0 src/{ => js}/lib/drag/index.js | 0 src/{ => js}/lib/form/button.js | 0 src/{ => js}/lib/form/checkbox.js | 0 src/{ => js}/lib/form/input.js | 0 src/{ => js}/lib/form/number.js | 0 src/{ => js}/lib/form/progress.js | 0 src/{ => js}/lib/form/radio.js | 0 src/{ => js}/lib/form/select.js | 0 src/{ => js}/lib/form/star.js | 0 src/{ => js}/lib/form/switch.js | 0 src/{ => js}/lib/icon/index.js | 0 src/{ => js}/lib/icon/svg.js | 0 src/{ => js}/lib/layer/index.js | 0 src/{ => js}/lib/lyrics/index.js | 0 src/{ => js}/lib/pager/index.js | 0 src/{ => js}/lib/request/index.js | 0 src/{ => js}/lib/request/lib/format.js | 0 src/{ => js}/lib/s-ico/index.js | 0 src/{ => js}/lib/s-ico/svg.js | 0 src/{ => js}/lib/scroll/index.js | 0 src/{ => js}/lib/store/index.js | 0 src/{ => js}/lib/utils.js | 0 src/main.js | 25 +- src/tools/windows.js | 10 +- 43 files changed, 518 insertions(+), 1014 deletions(-) rename src/{lib => }/css/reset-basic.css (65%) delete mode 100644 src/images/avatar.jpg create mode 100644 src/images/ctrl/next.jsx create mode 100644 src/images/ctrl/pause.jsx create mode 100644 src/images/ctrl/play.jsx create mode 100644 src/images/ctrl/prev.jsx create mode 100644 src/images/ctrl/prev.svg rename src/{ => js}/lib/anot.js (100%) rename src/{ => js}/lib/audio/index.js (100%) rename src/{ => js}/lib/avatar/def.jpg (100%) rename src/{ => js}/lib/avatar/index.js (100%) rename src/{ => js}/lib/drag/core.js (100%) rename src/{ => js}/lib/drag/index.js (100%) rename src/{ => js}/lib/form/button.js (100%) rename src/{ => js}/lib/form/checkbox.js (100%) rename src/{ => js}/lib/form/input.js (100%) rename src/{ => js}/lib/form/number.js (100%) rename src/{ => js}/lib/form/progress.js (100%) rename src/{ => js}/lib/form/radio.js (100%) rename src/{ => js}/lib/form/select.js (100%) rename src/{ => js}/lib/form/star.js (100%) rename src/{ => js}/lib/form/switch.js (100%) rename src/{ => js}/lib/icon/index.js (100%) rename src/{ => js}/lib/icon/svg.js (100%) rename src/{ => js}/lib/layer/index.js (100%) rename src/{ => js}/lib/lyrics/index.js (100%) rename src/{ => js}/lib/pager/index.js (100%) rename src/{ => js}/lib/request/index.js (100%) rename src/{ => js}/lib/request/lib/format.js (100%) rename src/{ => js}/lib/s-ico/index.js (100%) rename src/{ => js}/lib/s-ico/svg.js (100%) rename src/{ => js}/lib/scroll/index.js (100%) rename src/{ => js}/lib/store/index.js (100%) rename src/{ => js}/lib/utils.js (100%) diff --git a/src/css/app.css b/src/css/app.css index d57868b..974064e 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:linear-gradient(to bottom, #fff, #f3f5fb)}#app .title-bar{position:relative;z-index:9;display:flex;height:5rem}#app .title-bar .btn-box{width:auto;height:3rem;padding:.9rem 0}#app .title-bar .btn-box .item{display:inline-block;width:1.2rem;height:1.2rem;margin:0 2rem;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 .title-bar .btn-box-win{width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}#app .title-bar .btn-box-win .item,#app .title-bar .btn-box-win .opt{position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem}#app .title-bar .btn-box-win .item{text-align:center}#app .title-bar .btn-box-win .item:hover{background:rgba(0,0,0,0.05)}#app .title-bar .btn-box-win .item.quit:hover{color:#ff5061}#app .title-bar .btn-box-win .item.disabled{color:#dae1e9;background:none}#app .title-bar .btn-box-win .opt i{font-size:1.8rem}#app .title-bar .btn-box-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}#app .title-bar .btn-box-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}#app .title-bar .btn-box-win .opt-list span i{padding-right:.8rem}#app .title-bar .btn-box-win .opt-list span.pipe{height:.1rem;margin:.5rem 0;border-bottom:0.1rem solid #f3f5fb}#app .title-bar .btn-box-win .opt-list span:hover{background:#f3f5fb}#app .title-bar .holder{width:18rem;height:100%}#app .title-bar .tools{flex:1;padding:1rem}#app .title-bar .tools .search{display:flex;width:30rem}#app .main-body{overflow:hidden;flex:1;display:flex}#app .main-body .sidebar{width:18rem;position:relative;height:100%}#app .main-body .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}#app .main-body .sidebar .music-box dt.title{line-height:4rem;color:#aabac3}#app .main-body .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#7e909a}#app .main-body .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}#app .main-body .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}#app .main-body .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}#app .main-body .sidebar .music-box dd.item.disabled{opacity:.25}#app .main-body .module{overflow:hidden;position:relative;flex:1;display:flex;height:100%}#app .contrl-bar{position:relative;z-index:99;display:flex;height:6.5rem}#app .contrl-bar .play-box{display:flex;align-items:center;width:16rem;height:4.5rem;margin:1rem;padding:.5rem 1rem;border-radius:.75rem;background:#fff;box-shadow:0 0.25rem 1rem rgba(0,0,0,0.075)}#app .contrl-bar .play-box .btn-bg{position:absolute;left:3.25rem;height:3.5rem;border-left:3.25rem solid #f3f5fb;border-top:.25rem solid transparent;border-bottom:.25rem solid transparent}#app .contrl-bar .play-box .btn-bg::before{position:absolute;left:-5rem;top:-.25rem;width:3.5rem;height:3.5rem;border-radius:50%;background:#f3f5fb;content:""}#app .contrl-bar .play-box .btn-bg::after{position:absolute;right:-1.5rem;top:0;width:3rem;height:3rem;border-radius:50%;background:#f3f5fb;content:""}#app .contrl-bar .play-box .action{position:relative;display:flex;justify-content:center;align-items:center}#app .contrl-bar .play-box .action.play{width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;box-shadow:0 0.25rem 0.5rem rgba(0,0,0,0.2)}#app .contrl-bar .play-box .action.next{width:2rem;height:2rem;margin-left:.75rem}#app .contrl-bar .stat-box{position:relative;flex:1;display:flex;justify-content:center;align-items:center}#app .contrl-bar .stat-box .song-stat{flex:1;height:6.5rem;margin:0 2rem 0 0}#app .contrl-bar .stat-box .song-stat canvas{display:flex;width:100%;height:100%}#app .contrl-bar .stat-box .ctrl{position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:#19b491;font-size:2rem}#app .contrl-bar .stat-box .ctrl:hover{color:#3fc2a7}#app .contrl-bar .stat-box .ctrl:active{color:#16967a}#app .contrl-bar .stat-box .ctrl.lrc{margin-right:2rem;font-size:1.6rem}#app .contrl-bar .stat-box .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)}#app .contrl-bar .stat-box .ctrl .volume-ctrl em{flex:0 0;border-radius:.5rem;background:#3fc2a7}#app .contrl-bar .stat-box .ctrl.volume:hover .volume-ctrl{display:flex}#app.blur{background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}#app.blur .title-bar .holder{background:rgba(255,255,255,0.3)}#app.blur .title-bar .tools input{background:rgba(255,255,255,0.8)}#app.blur .main-body .sidebar{background:rgba(255,255,255,0.3)}#app.blur .contrl-bar{background:rgba(255,255,255,0.35)}#app.ktv .contrl-bar{background:rgba(233,233,233,0.1)}#app.ktv .contrl-bar .play-box .item,#app.ktv .contrl-bar .stat-box .ctrl{color:#fff}#app.ktv .contrl-bar .play-box .item:hover,#app.ktv .contrl-bar .stat-box .ctrl:hover{color:#ff5061}#app .ktv-box{overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background:#425064;background-size:cover;background-repeat:no-repeat;color:#fff}#app .ktv-box .inner-content{display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29,35,44,0.767);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}#app .ktv-box .inner-content .info{flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2}#app .ktv-box .inner-content .info img{width:30rem;height:30rem;border:0.5rem solid rgba(255,255,255,0.5);border-radius:50%}#app .ktv-box .inner-content .info .summary{flex:1;padding:0 5rem}#app .ktv-box .inner-content .info pre{overflow:auto;height:30rem}#app .ktv-box .inner-content .info h3{line-height:3;font-size:1.8rem}#app .ktv-box .inner-content .lrc-box{flex:0 10rem;display:flex;flex-flow:column wrap;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}#app .ktv-box .inner-content .lrc-box section{flex:1;display:flex}#app .ktv-box .inner-content .lrc-box section.left{justify-content:flex-start}#app .ktv-box .inner-content .lrc-box section.right{justify-content:flex-end}#app .ktv-box .inner-content .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}#app .ktv-box .inner-content .tool-box{position:absolute;right:0;top:15rem;width:13rem;height:auto;padding:1.5rem 0;background:rgba(255,255,255,0.1);border-radius:.3rem 0 0 .3rem;opacity:.3;-webkit-transform:translateX(8.8rem);transform:translateX(8.8rem);transition:all .2s ease-in-out}#app .ktv-box .inner-content .tool-box .item{height:3.4rem;padding:0 .8rem;line-height:3.4rem}#app .ktv-box .inner-content .tool-box .item:hover{background:rgba(255,255,255,0.1)}#app .ktv-box .inner-content .tool-box i{padding:0 1rem 0 .8rem}#app .ktv-box .inner-content .tool-box:hover{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}#app .ktv-box .inner-content .slide-down{position:absolute;right:1rem;top:1rem;width:3rem;height:2rem;line-height:1.8rem;border:0.1rem solid #aabac3;border-radius:.3rem;text-align:center}#app .ktv-box .inner-content .slide-down i{-webkit-transform:rotate(90deg);transform:rotate(90deg)}#app .ktv-box .inner-content .search-box{display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;z-index:82;width:100%;height:56rem;background:rgba(29,35,44,0.5);-webkit-backdrop-filter:blur(0.4rem);backdrop-filter:blur(0.4rem)}#app .ktv-box .inner-content .search-box .content{width:60rem;height:auto;padding:2rem;background:rgba(255,255,255,0.8);color:#62778d}#app .ktv-box .inner-content .search-box .content .title{height:3rem;line-height:2rem;font-size:1.4rem;text-align:center}#app .ktv-box .inner-content .search-box .content .title i{float:right;font-size:2rem;color:#ff5061}#app .ktv-box .inner-content .search-box .content .section{height:3.5rem}#app .ktv-box .inner-content .search-box .content .section input{width:100%}#app .ktv-box .inner-content .search-box .content .result{overflow-y:auto;width:100%;max-height:30rem;padding:1rem;background:rgba(255,255,255,0.2)}#app .ktv-box .inner-content .search-box .content .result .item{display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center}#app .ktv-box .inner-content .search-box .content .result .item:nth-child(1){line-height:2;border-bottom:0.1rem solid #aabac3}#app .ktv-box .inner-content .search-box .content .result .item span{flex:1}#app .ktv-box .inner-content .search-box .content .result .item span:nth-child(1){flex:3}#app .loading{position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%}#app .loading .box{position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem}#app .loading .box i{position:absolute;width:8rem;height:8rem;border:3px solid #3fc2a7;border-radius:50%;opacity:.5}#app .loading .box i:nth-child(1){-webkit-animation:load 2.5s ease-in-out infinite;animation:load 2.5s ease-in-out infinite}#app .loading .box i:nth-child(2){-webkit-animation:load 2.5s .5s ease-in-out infinite;animation:load 2.5s .5s ease-in-out infinite}#app .loading .box i:nth-child(3){-webkit-animation:load 2.5s 1s ease-in-out infinite;animation:load 2.5s 1s ease-in-out infinite}#app .loading .box i:nth-child(4){-webkit-animation:load 2.5s 1.5s ease-in-out infinite;animation:load 2.5s 1.5s ease-in-out infinite}#app .loading .box i:nth-child(5){-webkit-animation:load 2.5s 2s ease-in-out infinite;animation:load 2.5s 2s ease-in-out infinite}#app .loading .box span{position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover}#app .loading .box span:nth-child(6){-webkit-animation:play 1.5s linear infinite;animation:play 1.5s linear infinite}#app .loading .box span:nth-child(7){background-image:url(/images/load2.png);-webkit-animation:load2 2.5s linear infinite;animation:load2 2.5s linear infinite}#app .loading .box cite{font-size:2.4rem}.do-mod-contextmenu{width:145px;height:auto;padding:8px 0;line-height:35px;font-size:1.3rem}.do-mod-contextmenu li{overflow:hidden;width:100%;height:35px;padding:0 10px;transition:background .2s ease-in-out;cursor:default}.do-mod-contextmenu li:hover{background:#f3f5fb}.do-mod-contextmenu li i{padding:0 3px;font-size:1.6rem;vertical-align:bottom}.do-layer .layer-box.do-mod-contextmenu__fixed{padding:0}@-webkit-keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-webkit-keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-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)}} +.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;height:46px}.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:38px;margin-left:32px;text-align:center}.app .play-bar .ctrl-box .play-btn .item{width:28px;height:28px;line-height:28px;border-radius:50%;background:rgba(255,255,255,0.1);fill:currentColor;cursor:pointer;transition:color .1s ease-in-out}.app .play-bar .ctrl-box .play-btn .item.on{width:36px;height:36px;line-height:36px;font-size:16px}.app .play-bar .ctrl-box .play-btn .item:hover{color:#58ffdf}.app .play-bar .ctrl-box .play-btn .item:active{color:#46d1b8}.app .play-bar .ctrl-box .play-action{display:flex;align-items:center;justify-content:space-between;width:64px;height:38px;margin-right:16px;font-size:12px}.app .play-bar .ctrl-box .play-action .item{width:28px;height:28px;line-height:28px;fill:currentColor;transition:color .1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-action .item:hover{color:#58ffdf}.app .play-bar .ctrl-box .play-action .item:active{color:#46d1b8} diff --git a/src/css/app.scss b/src/css/app.scss index c8c1711..8ab5652 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -8,16 +8,30 @@ @import "./var.scss"; -#app { - position:relative;display:flex;flex-direction:column; - width:100%;height:100%;background:linear-gradient(to bottom, #fff, nth($cp, 1)); +.app { + position:relative; + display:flex;flex-direction:column; + width:100%;height:100%; + background:rgba(0, 0, 0, .2); // 标题栏样式 - .title-bar {position:relative;z-index:9;display:flex;height:5rem; + .title-bar { + position:relative; + display:flex; + align-items:center; + z-index:9; + height:26px; - .btn-box {width:auto;height:3rem;padding:.9rem 0; + .btn-box { + display:inline-flex;; + width:auto;height:12px;padding:0 8px; - .item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover;} + .item { + display:inline-flex; + width:12px;height:12px; + margin:0 3px; + background:url(/images/btn-grey.svg) no-repeat;background-size:cover; + } &.focus { .quit {background-image:url(/images/btn-close.svg);} @@ -30,302 +44,295 @@ // .max {background-image:url(/images/btn-maxi_a.svg);} } } - - .btn-box-win { - width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem; - - .item, - .opt {position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem; - } - .item {text-align:center; + + } - &:hover {background:rgba(0, 0, 0, .05);} - &.quit:hover {color:nth($cr, 1);} - &.disabled {color:nth($cp, 3);background:none} + .main-body { + overflow:hidden; + flex:1; + display: flex; + justify-content:space-between; + + .aside { + width:180px; + height:100%; + padding:0 16px; + line-height:2; + + fieldset { + border:0; + color:#ebebeb; + font-size:12px; + + legend { + font-size:18px; + background:linear-gradient(to bottom,#58ffdf 50%, #459888); + background-clip:text; + color:transparent; + } + + .item { + padding-left:12px; + line-height:1.75; + } + + button { + width:42px;height:16px; + margin-left:12px; + font-size:10px; + border:0; + border-radius:9px; + background:nth($cb, 1); + color:#fff; + } } + } + + .song-box { + width:618px; + + .preview { + position:relative; + display:flex; + align-items:center; + width:100%; + height:99px; + padding-bottom:16px; + border-bottom:1px solid rgba(200, 200, 200, .1); + + .album { + width:80px;height:80px; + img {width:100%;height:100%;} + } + + .info { + display:flex; + flex-direction:column; + justify-content:center; + width:320px; + margin-left:32px; - .opt i {font-size:1.8rem;} + strong { + height:36px; + font-size:18px; + font-weight: normal; + } - .opt-list {position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 .5rem 2rem rgba(0, 0, 0, .1);font-size:1.4rem; - span {display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem; + cite { + font-size:12px; + font-style:normal; + + } + p {font-size:12px;color:#bdbdbd;} + } + + .duration { + position:absolute; + right:32px; + top:16px; + font-size:12px; + color:#bdbdbd; - i {padding-right:.8rem;} - &.pipe {height:.1rem;margin:.5rem 0;border-bottom:.1rem solid nth($cp, 1)} - &:hover {background:nth($cp, 1)} + } + .total { + position:absolute; + right:32px; + bottom:16px; + font-size:16px; + font-weight:bold; + font-family:Raleway; } } - } - // 工具栏 - .holder {width:18rem;height:100%;} - - .tools {flex:1;padding:1rem; - - .search {display:flex;width:30rem;} - } - } - - - // 主体样式 - .main-body {overflow:hidden;;flex:1;display:flex; - - // 侧边栏 - .sidebar {width:18rem;position:relative;height:100%; - - // 功能菜单导航 - .music-box {width:100%;height:auto;padding:0 1.5rem; - - dt.title {line-height:4rem;color:nth($cgr, 1)} - dd.item {height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:nth($cgr, 3); - - .icon {float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem;} - &:hover {padding-left:.9rem;color:nth($ct, 1);} - &.active {border-radius:.3rem;background:nth($ct, 1);color:#fff;} - &.disabled {opacity:.25} - } - } - - - } - - // 功能模块 - .module {overflow:hidden;position:relative;flex:1;display:flex;height:100%;} - } - - - .contrl-bar {position:relative;z-index:99;display:flex;height:6.5rem; - - // 播放控制按钮 - .play-box { - display:flex;align-items:center;width:16rem;height:4.5rem;margin:1rem;padding:.5rem 1rem;border-radius:.75rem;background:#fff;box-shadow:0 .25rem 1rem rgba(0, 0, 0, .075); - - - .btn-bg { - position:absolute; - left:3.25rem; - height: 3.5rem; - border-left: 3.25rem solid nth($cp, 1); - border-top: .25rem solid transparent; - border-bottom: .25rem solid transparent; - - &::before {position:absolute;left:-5rem;top:-.25rem;width:3.5rem;height:3.5rem;border-radius:50%;background:nth($cp, 1);content:""} - &::after {position:absolute;right:-1.5rem;top:0;width:3rem;height:3rem;border-radius:50%;background:nth($cp, 1);content:""} + .scroll-box { + width:100%; + height:269px; + padding:16px 6px; + border-top:1px solid rgba(32, 32, 32, .1); } - .action {position:relative;display:flex;justify-content:center;align-items:center; + .list { + height:237px; + font-size:12px; - &.play {width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;box-shadow:0 .25rem .5rem rgba(0, 0, 0, .2)} - &.next {width:2rem;height:2rem;margin-left:.75rem} - } - } + .item { + display:flex; + align-items:center; + height:26px; + padding:0 12px; + border-radius:13px; - // 播放条 - .stat-box {position:relative;flex:1;display:flex;justify-content:center;align-items:center; - - .song-stat {flex:1;height:6.5rem;margin:0 2rem 0 0; - - canvas {display:flex;width:100%;height:100%;} - } - - .ctrl {position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:nth($ct, 2);font-size:2rem; - - &: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} - } - - } - - } - - - - - // 播放状态下的 模糊特效 - &.blur {background:rgba(255, 255, 255, .85);backdrop-filter:blur(1rem); - - - .title-bar { - .holder {background:rgba(255, 255, 255, .3);} - .tools input {background:rgba(255, 255, 255, .8);} - } - - .main-body { - - .sidebar {background:rgba(255, 255, 255, .3);} - } - - .contrl-bar {background:rgba(255, 255, 255, .35)} - - - } - - // ktv状态下的 模糊特效 - &.ktv { - .contrl-bar {background:rgba(233, 233, 233, .1); - - .play-box .item, - .stat-box .ctrl {color:#fff; - - &:hover {color:nth($cr, 1)} - } - } - } - - - .ktv-box { - overflow:hidden;position:absolute;z-index:80;left:0;top:0; - width:100%;height:100%; - background:nth($cd, 3);background-size:cover;background-repeat:no-repeat; - color:#fff; - - .inner-content { - display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem); - - .info {flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2; - - img {width:30rem;height:30rem;border:.5rem solid rgba(255, 255, 255, .5);border-radius:50%;} - .summary {flex:1; padding:0 5rem} - pre {overflow:auto;height:30rem} - h3 {line-height:3;font-size:1.8rem;} - } - .lrc-box {flex:0 10rem;display:flex;flex-flow:column wrap;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem; - - section {flex:1;display:flex; - - &.left {justify-content:flex-start;} - &.right {justify-content:flex-end} - - span {background-clip:text!important;color:transparent;} - } - - } - - - .tool-box {position:absolute;right:0;top:15rem;width:13rem;height:auto;padding:1.5rem 0;background:rgba(255, 255, 255, .1);border-radius:.3rem 0 0 .3rem;opacity:.3;transform:translateX(8.8rem);@include ts(); - - .item {height:3.4rem;padding:0 .8rem;line-height:3.4rem; - - &:hover {background:rgba(255, 255, 255, .1);} - } - i {padding:0 1rem 0 .8rem} - - &:hover {opacity:1;transform:translateX(0)} - } - - .slide-down {position:absolute;right:1rem;top:1rem;width:3rem;height:2rem;line-height:1.8rem;border:.1rem solid nth($cgr, 1);border-radius:.3rem;text-align:center; - i {transform:rotate(90deg)} - } - - - .search-box {display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;z-index:82;width:100%;height:56rem;background:rgba(29, 35, 44, 0.5);backdrop-filter:blur(.4rem); - - .content {width:60rem;height:auto;padding:2rem;background:rgba(255, 255, 255, .8);color:nth($cd, 1); - - .title {height:3rem;line-height:2rem;font-size:1.4rem;text-align:center; + .idx { + position:relative; + width:64px; + padding-left:16px; + font-size:12px; + font-family:Raleway; + } - i {float:right;font-size:2rem;color:nth($cr, 1);} + .name { + overflow:hidden; + flex:1; + } + .artist { + overflow:hidden; + width:128px; + margin-left:12px; + } + .duration { + width:42px; + margin-left:12px; } - .section {height:3.5rem; - - input {width:100%;} - } + &.on { + color:#feac23; + font-size:14px; - .result {overflow-y:auto;width:100%;max-height:30rem;padding:1rem;background:rgba(255, 255, 255, .2); - - .item {display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center; - - &:nth-child(1) {line-height:2;border-bottom:.1rem solid nth($cgr, 1);} - - span {flex:1; - - &:nth-child(1) {flex:3} - } + .idx::before { + position:absolute; + left:0;top:3px; + font-size:10px; + content:"▶ "; } - } - + + &.active, &:hover { + color:#58ffdf; + background: rgba(29, 77, 68, 0.15); + } } - - } - - - } - } - .loading { - position:fixed;left:0;top:0;z-index:65536; - display:flex;justify-content:center;align-items:center; - width:100%;height:100%; - - .box {position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem; - - i {position:absolute;width:8rem;height:8rem;border:3px solid nth($ct, 1);border-radius:50%;opacity:.5; - &:nth-child(1) {animation:load 2.5s ease-in-out infinite;} - &:nth-child(2) {animation:load 2.5s .5s ease-in-out infinite;} - &:nth-child(3) {animation:load 2.5s 1s ease-in-out infinite;} - &:nth-child(4) {animation:load 2.5s 1.5s ease-in-out infinite;} - &:nth-child(5) {animation:load 2.5s 2s ease-in-out infinite;} + + + + .play-bar { + height:66px;width:100%; + background:rgba(255, 255, 255, .25); + color:#fff; + + .stat-bar { + display:flex; + align-items:center; + justify-content:space-between; + height:20px; + color: #ebebeb; + + .time { + width:42px; + margin:0 6px; + text-align:center; + font-size:12px; } - span {position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover; - - &:nth-child(6) {animation:play 1.5s linear infinite;} - &:nth-child(7) {background-image:url(/images/load2.png);animation:load2 2.5s linear infinite;} + + .progress { + flex:1; + display:flex; + align-items: flex-start; + height:3px; + background: #b2cfe3; + } + + .thumb { + width:8%; + height:3px; + background:#58ffdf; + } + } + + .ctrl-box { + display:flex; + height:46px; + + .holder { + flex:1; + } + + .info { + display:flex; + flex-direction:column; + justify-content:center; + width:320px; + height:42px; + padding-left:12px; + line-height:1.25; + + strong { + font-size:14px; + font-weight: 500; + } + + cite { + font-size:12px; + font-style:normal; + color:#aeaeae; + } + } + + .play-btn { + display:flex; + align-items:center; + justify-content:space-between; + width:120px; + height:38px; + margin-left:32px; + text-align:center; + + .item { + width:28px;height:28px; + line-height:28px; + border-radius:50%; + background:rgba(255, 255, 255, .1); + fill: currentColor; + cursor:pointer; + transition:color .1s ease-in-out; + + &.on { + width:36px;height:36px; + line-height:36px; + font-size:16px; + } + + &:hover { + color: #58ffdf; + } + &:active { + color: #46d1b8; + } + } + } + + .play-action { + display:flex; + align-items:center; + justify-content:space-between; + width:64px; + height:38px; + margin-right:16px; + font-size:12px; + + .item { + width:28px;height:28px; + line-height:28px; + fill: currentColor; + transition:color .1s ease-in-out; + cursor:pointer; + + &:hover { + color: #58ffdf; + } + &:active { + color: #46d1b8; + } + } } - cite {font-size:2.4rem;} } - } + } - - - - - - - - - - - - - - -.do-mod-contextmenu {width:145px;height:auto;padding:8px 0;line-height:35px;font-size:1.3rem; - li {overflow:hidden;width:100%;height:35px;padding:0 10px;@include ts(background);cursor:default; - &:hover {background:nth($cp, 1)} - i {padding:0 3px;font-size:1.6rem;vertical-align:bottom;} - } -} -.do-layer .layer-box.do-mod-contextmenu__fixed {padding:0} - - -@keyframes load { - from {opacity: .5; transform: scale(1)} - to {opacity: 0; transform: scale(1.5)} -} - -@keyframes load2 { - from {transform:rotate(360deg)} - to {transform:rotate(0deg)} -} - -@keyframes play { - from {transform:rotate(0deg)} - to {transform:rotate(360deg)} -} \ No newline at end of file diff --git a/src/css/common.css b/src/css/common.css index e92ccc2..90b40c1 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -1 +1 @@ -.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:1vw}body{position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;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 rgba(200,200,200,0.15)}table thead th{padding:1rem .8rem;border:0}table tbody tr{height:auto;transition:background .3s ease-in-out}table tbody tr:hover{background:rgba(29,35,44,0.08)}table tbody td{padding:.9rem .8rem}table .ac{text-align:center}table .idx{color:#dae1e9;text-shadow:0 0.1rem 0 rgba(255,255,255,0.6)}table .active{color:#3fc2a7;background:rgba(255,255,255,0.6);font-weight:bold} +.app-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.app-nodrag{-webkit-app-region:no-drag}body{position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:14px;color:#fff} diff --git a/src/css/common.scss b/src/css/common.scss index 40393c6..ebdba71 100644 --- a/src/css/common.scss +++ b/src/css/common.scss @@ -8,20 +8,14 @@ @import "./var.scss"; -.do-fn-drag {-webkit-app-region:drag;user-select: none;} -.do-fn-nodrag {-webkit-app-region:no-drag;} +.app-drag {-webkit-app-region:drag;user-select: none;} +.app-nodrag {-webkit-app-region:no-drag;} -html {font-size:1vw} -body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:1.4rem;color:nth($cd, 1);} - -table {overflow:auto;display:table;width:100%;line-height:2.5rem; - thead tr {height:4.5rem;border-bottom:.1rem solid rgba(200, 200, 200, .15)} - thead th {padding:1rem .8rem;border:0;} - tbody tr {height:auto;@include ts(background, .3s); - &:hover {background:rgba(29, 35, 44, .08);} - } - tbody td {padding:.9rem .8rem} - .ac {text-align:center} - .idx {color:nth($cp, 3);text-shadow:0 .1rem 0 rgba(255, 255, 255, 0.6)} - .active {color:nth($ct, 1);background:rgba(255, 255, 255, 0.6);font-weight:bold} +body { + position:fixed;left:0;top:0; + width:100%;height:100%; + line-height:1.5; + font-size:14px; + color:#fff; } + diff --git a/src/lib/css/reset-basic.css b/src/css/reset-basic.css similarity index 65% rename from src/lib/css/reset-basic.css rename to src/css/reset-basic.css index 4546277..0fd9c4d 100644 --- a/src/lib/css/reset-basic.css +++ b/src/css/reset-basic.css @@ -39,22 +39,13 @@ a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;} } body {font-family:Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;} code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;} -[anot],[\:repeat],[\:if],[is-widget],slot {visibility:hidden;} - -.do-fn-cl { *zoom: 1; } -.do-fn-cl::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} -.do-fn-clear {clear:both;display:inline;} - -.do-fn-show{display:block;} -.do-fn-hide{display:none;} -.do-fn-fl{float:left;} -.do-fn-fr{float:right;} -.do-fn-noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;} -.do-fn-noselect img, .do-fn-noselect a {-webkit-user-drag:none;} -.do-fn-ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis } -.do-st-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} -.do-st-hand {cursor:pointer;} - -[class^="do-icon-"], [class*=" do-icon-"] {display:inline-block;font-family:"uifont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} +[anot],[\:repeat],[\:if] {visibility:hidden;} + + + +.noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;} +.noselect img, .noselect a {-webkit-user-drag:none;} +.text-ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis } +.osx-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} diff --git a/src/css/var.scss b/src/css/var.scss index ae2d183..4b72258 100644 --- a/src/css/var.scss +++ b/src/css/var.scss @@ -1,13 +1,17 @@ -$ct: #3fc2a7 #19b491 #16967a; -$cg: #58d68d #2ecc71 #27ae60; -$cpp: #ac61ce #9b59b6 #8e44ad; -$cb: #66b1ff #409eff #3a8ee6; +$ct: #4db6ac #26a69a #009688; +$cg: #81c784 #66bb6a #4caf50; +$cpp: #9575cd #9575cd #673ab7; +$cb: #64b5f6 #42a5f5 #2196f3; $cr: #ff5061 #eb3b48 #ce3742; $co: #ffb618 #f39c12 #e67e22; -$cp: #f3f5fb #e8ebf4 #dae1e9; -$cgr: #aabac3 #90a3ae #7e909a; +$cp: #f2f5fc #e8ebf4 #dae1e9; +$cgr: #bdbdbd #9e9e9e #757575; $cd: #62778d #526273 #425064; @mixin ts($c: all, $t: .2s, $m: ease-in-out){ transition:$c $t $m; +} + +@function px($n: 1) { + @return ($n / 10) + rem; } \ No newline at end of file diff --git a/src/images/avatar.jpg b/src/images/avatar.jpg deleted file mode 100644 index 2cafca77a00c2436074f9a2451c1b828b73f9103..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 21036 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 B7nuM6 diff --git a/src/images/ctrl/next.jsx b/src/images/ctrl/next.jsx new file mode 100644 index 0000000..a0937af --- /dev/null +++ b/src/images/ctrl/next.jsx @@ -0,0 +1,5 @@ +;<> + + + + diff --git a/src/images/ctrl/pause.jsx b/src/images/ctrl/pause.jsx new file mode 100644 index 0000000..8e0688f --- /dev/null +++ b/src/images/ctrl/pause.jsx @@ -0,0 +1,5 @@ +;<> + + + + diff --git a/src/images/ctrl/play.jsx b/src/images/ctrl/play.jsx new file mode 100644 index 0000000..f0b6093 --- /dev/null +++ b/src/images/ctrl/play.jsx @@ -0,0 +1,8 @@ +;<> + + + + + + + diff --git a/src/images/ctrl/prev.jsx b/src/images/ctrl/prev.jsx new file mode 100644 index 0000000..0eb310b --- /dev/null +++ b/src/images/ctrl/prev.jsx @@ -0,0 +1,5 @@ +;<> + + + + diff --git a/src/images/ctrl/prev.svg b/src/images/ctrl/prev.svg new file mode 100644 index 0000000..1058b91 --- /dev/null +++ b/src/images/ctrl/prev.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/index.html b/src/index.html index cf56552..91f98c8 100644 --- a/src/index.html +++ b/src/index.html @@ -2,167 +2,179 @@ - + - - -
+ -
+
- - - - - -
- +
+
+ + +
- - -
- - -
- -
+
+
+ 00:13 +
+ +
+ 05:31 +
+
+
+ 情是何物 + 周深 +
-
-
- - - - {{progress}}% -
+
+ + + + + + + + +
+ +
+ +
+ + + + + + + + + + + +
+
diff --git a/src/js/app.js b/src/js/app.js index dc373b0..a0cc04f 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,542 +1,7 @@ /** - * {sonist app} - * @author yutent - * @date 2018/12/16 17:15:57 + * + * @author yutent + * @date 2020/11/16 16:21:52 */ -import '/lib/anot.js' -import '/lib/layer/index.js' -import '/lib/form/button.js' -import '/lib/form/input.js' -import '/lib/form/switch.js' -import '/lib/form/checkbox.js' -import '/lib/form/radio.js' -import '/lib/store/index.js' - -import AudioPlayer from '/lib/audio/index.js' -import Lyrics from '/lib/lyrics/index.js' - -import Api from '/js/api.js' - -import Artist from '/js/modules/artist.js' -import Local from '/js/modules/local.js' -// import Profile from '/js/modules/profile.js' -import Search from '/js/modules/search.js' - -import KTV from '/js/modules/ktv.js' -import PLAYCTRL from '/js/modules/play-ctrl.js' - -const log = console.log - -const fs = require('iofs') -const path = require('path') - -const { remote, ipcRenderer } = require('electron') -// const { createDesktopLrcWindow, createMiniWindow } = remote.require( -// './tools/windows' -// ) - -// const WIN = remote.getCurrentWindow() -// const __LRC__ = createDesktopLrcWindow(screen) -// const __MINI__ = createMiniWindow(screen) - -const PLAY_MODE = { - 0: 'all', - 1: 'single', - 2: 'random' -} - -// window.onblur = function() { -// location.reload() -// } - -// 本地音乐和试用音乐列表 -window.LS = store.collection('local') -window.TS = store.collection('temp') -// 音乐播放器 -window.SONIST = new AudioPlayer() -window.LYRICS = new Lyrics() - -let appInit = ipcRenderer.sendSync('sonist', { type: 'get-init' }) - -Anot.ss('app-init', appInit) - -SONIST.target = 'local' //播放目标是本地音乐 - -Anot({ - $id: 'app', - state: { - theme: appInit.theme || 1, // 1:macos, 2: deepin - winFocus: false, - winShow: true, - mod: 'local', - searchTxt: '', - playMode: Anot.ls('play-mode') >>> 0, // 0:all | 1:single | 2:random - ktvMode: 0, - isPlaying: false, - optBoxShow: false, - volumeCtrlShow: false, - volume: Anot.ls('volume') || 70, - muted: false, - curr: { - id: '', - cover: '', - title: '', - artist: '', - album: '', - time: 0, - duration: 0 - }, - ctrlLrc: '暂无歌词...', - ...KTV.data, - loading: false, - progress: 0 - }, - skip: ['winShow'], - computed: { - views() { - if (!this.mod) { - return - } - return '/views/' + this.mod + '.htm' - }, - coverBG() { - if (this.curr.cover) { - return `url(${this.curr.cover})` - } else { - return '' - } - } - }, - watch: { - mod(val) { - this.activeModule(val) - } - }, - mounted() { - let canvas = this.$refs.player - - // 画布放大4倍, 以解决模糊的问题 - this.__WIDTH__ = canvas.clientWidth * 4 - this.__HEIGHT__ = canvas.clientHeight * 4 - - canvas.width = this.__WIDTH__ - canvas.height = this.__HEIGHT__ - this.__CTX__ = canvas.getContext('2d') - - this.draw(true) - - // 修改歌曲进度 - canvas.addEventListener( - 'click', - ev => { - if (!this.curr.id) { - return - } - let rect = canvas.getBoundingClientRect() - let aw = rect.width - let ax = ev.pageX - rect.left - let ay = ev.pageY - rect.top - - if (ax < 80) { - this.ktvMode = this.ktvMode ^ 1 - if (!this.isPlaying) { - this.draw() - } - return - } - if (ax > 124 && ay > 55 && ay < 64) { - let pp = (ax - 124) / (aw - 124) - this.curr.time = pp * this.curr.duration - SONIST.seek(this.curr.time) - LYRICS.seek(this.curr.time) - if (!this.isPlaying) { - this.draw() - } - } - }, - false - ) - - // 设置循环模式 - SONIST.mode = PLAY_MODE[this.playMode] - SONIST.volume = this.volume - - SONIST.on('play', time => { - this.curr.time = time - LYRICS.update(time) - }) - - SONIST.on('end', time => { - this.nextSong(1) - }) - - // 控制条的单行歌词 - LYRICS.on('ctrl-lrc', lrc => { - this.ctrlLrc = lrc - }) - - // ktv模式的歌词 - LYRICS.on('ktv-lrc', lrc => { - this.lrc = lrc - __LRC__.emit('ktv-lrc', lrc) - }) - - // ktv模式的歌词 - LYRICS.on('view-all', lrc => { - this.allLrc = lrc - }) - - this.activeModule(this.mod) - - remote.app.on('browser-window-focus', _ => { - this.winFocus = true - }) - remote.app.on('browser-window-blur', _ => { - this.winFocus = false - }) - - /** - * 响应mini窗口的事件 - */ - WIN.on('mini-ctrl', ev => { - switch (ev) { - case 'prev': - this.nextSong(-1) - break - case 'play': - this.play() - break - case 'next': - this.nextSong(1) - break - case 'desktoplrc': - this.toggleDesktopLrc() - break - default: - if (ev.name === 'play-mode') { - this.playMode = ev.value - SONIST.mode = PLAY_MODE[ev.value] - Anot.ls('play-mode', ev.value) - } - } - }) - - /** - * 响应 全局快捷键的事件 - */ - WIN.on('gs-ctrl', ev => { - switch (ev) { - case 'prev': - this.nextSong(-1) - break - case 'play': - this.play() - break - case 'next': - this.nextSong(1) - break - case 'stop': - this.isPlaying = false - this.curr.time = 0 - SONIST.seek(0) - LYRICS.seek(0) - SONIST.pause() - this.draw() - break - case 'vu': - this.volume += 5 - if (this.volume >= 100) { - this.volume = 100 - } - SONIST.volume = this.volume - break - case 'vd': - this.volume -= 5 - if (this.volume <= 0) { - this.volume = 0 - } - SONIST.volume = this.volume - break - case 'lrc': - this.toggleDesktopLrc() - break - case 'mini': - this.change2mini() - break - default: - break - } - }) - - // 迷你模式开启时, 不响应托盘和dock栏的点击事件 - ipcRenderer.on('dock-click', () => { - if (!__MINI__.isVisible()) { - WIN.show() - } - }) - - Anot(document).bind('keydown', ev => { - if (ev.target === document.body) { - switch (ev.keyCode) { - case 32: // 空格 - this.play() - break - case 37: // 向左 (prev) - if (ev.metaKey) { - this.nextSong(-1) - } - break - case 39: // 向右 (next) - if (ev.metaKey) { - this.nextSong(1) - } - break - case 38: // 向上 (音量+ - if (ev.metaKey) { - this.volume += 5 - if (this.volume >= 100) { - this.volume = 100 - } - SONIST.volume = this.volume - } - break - case 40: // 向下 (音量- - if (ev.metaKey) { - this.volume -= 5 - if (this.volume <= 0) { - this.volume = 0 - } - SONIST.volume = this.volume - } - break - case 77: // M (迷你模式) - if (ev.metaKey && ev.altKey) { - this.change2mini() - } - break - case 82: // R (桌面歌词) - if (ev.metaKey) { - this.toggleDesktopLrc() - } - break - } - } - }) - - WIN.on('show', ev => { - this.winShow = true - this.draw() - }) - WIN.on('hide', ev => { - this.winShow = false - this.draw() - }) - }, - methods: { - quit(force) { - if (force) { - remote.app.exit() - } else { - if (appInit.allowPlayOnBack) { - WIN.hide() - } else { - remote.app.exit() - } - } - }, - minimize() { - WIN.minimize() - }, - change2mini() { - this.optBoxShow = false - WIN.hide() - __MINI__.show() - let song = this.curr.$model - if (!this.isPlaying) { - delete song.id - } - __MINI__.emit('mini-init', song) - }, - - activeModule(mod) { - switch (mod) { - case 'artist': - Artist.__init__() - break - case 'local': - Local.__init__() - break - case 'profile': - Profile.__init__() - break - case 'search': - Search.__init__() - break - default: - break - } - }, - - toggleOptBox() { - this.optBoxShow = !this.optBoxShow - }, - toggleDesktopLrc() { - if (__LRC__.isVisible()) { - __LRC__.hide() - } else { - __LRC__.showInactive() - } - }, - toggleModule(mod) { - if ('mv' === mod) { - return - } - this.optBoxShow = false - this.__last__ = this.mod - this.mod = mod - }, - // 设置保存 回调 - onProfileSaved() { - this.toggleModule(this.__last__) - appInit = JSON.parse(Anot.ss('app-init')) - }, - - // 切换循环模式 - togglePlayMode() { - let mod = this.playMode - mod++ - if (mod > 2) { - mod = 0 - } - this.playMode = mod - SONIST.mode = PLAY_MODE[mod] - Anot.ls('play-mode', mod) - }, - - // 修改音量 - changeValume(ev) { - let volume = 575 - ev.pageY - if (volume < 0) { - volume = 0 - } - if (volume > 100) { - volume = 100 - } - this.volume = volume - SONIST.volume = volume - Anot.ls('volume', volume) - }, - - searchMusic(ev) { - if (ev.keyCode === 13) { - let txt = this.searchTxt.trim() - - if (!txt) { - return - } - - if (txt === ':debug:') { - log('----- 调试模式 -----') - this.searchTxt = '' - WIN.openDevTools() - return - } - if (this.mod !== 'search') { - this.toggleModule('search') - } - - Search.search(txt) - this.searchTxt = '' - // layer.toast('搜索功能还未开放') - } - }, - - /** - * 播放按钮的事件 - */ - handleCtrl(ev) { - let key = ev.target.dataset.key - - switch (key) { - case 'prev': - this.nextSong(-1) - break - case 'play': - this.play() - break - case 'next': - this.nextSong(1) - break - default: - break - } - }, - - nextSong(step) { - let _p = null - if (step > 0) { - _p = SONIST.next() - } else { - _p = SONIST.prev() - } - this.isPlaying = false - _p.then(it => { - if (this.mod === 'local') { - Local.__updateSong__(it) - } - // 通知子模块歌曲已经改变 - this.$fire('child!curr', it.id) - this.play(it) - }) - }, - - updateCurr(obj) { - let old = this.curr.$model - this.curr = Object.assign(old, obj) - __MINI__.emit('mini-init', this.curr.$model) - }, - - play(song) { - // 有参数的,说明是播放回调通知 - // 此时仅更新播放控制条的信息即可 - if (song) { - song.time = 0 - this.ctrlLrc = '暂无歌词...' - this.updateCurr(song) - this.isPlaying = true - this.draw(true) - LYRICS.__init__(song.id) - } else { - if (SONIST.stat === 'ready') { - let played = this.isPlaying - this.isPlaying = !this.isPlaying - if (this.curr.id) { - if (played) { - SONIST.pause() - } else { - SONIST.play() - } - this.draw() - } else { - let lastPlay = Anot.ls('last-play') || 0 - SONIST.play(lastPlay).then(it => { - it.time = 0 - this.ctrlLrc = '暂无歌词...' - this.updateCurr(it) - this.draw(true) - // this.ktvMode = 1 - - LYRICS.__init__(it.id) - }) - } - if (!this.winShow) { - __MINI__.emit('mini-ctrl', this.isPlaying ? 'play' : 'pause') - } - } - } - }, - ...PLAYCTRL.methods, - ...KTV.methods - } -}) +import '/js/lib/scroll/index.js' diff --git a/src/lib/anot.js b/src/js/lib/anot.js similarity index 100% rename from src/lib/anot.js rename to src/js/lib/anot.js diff --git a/src/lib/audio/index.js b/src/js/lib/audio/index.js similarity index 100% rename from src/lib/audio/index.js rename to src/js/lib/audio/index.js diff --git a/src/lib/avatar/def.jpg b/src/js/lib/avatar/def.jpg similarity index 100% rename from src/lib/avatar/def.jpg rename to src/js/lib/avatar/def.jpg diff --git a/src/lib/avatar/index.js b/src/js/lib/avatar/index.js similarity index 100% rename from src/lib/avatar/index.js rename to src/js/lib/avatar/index.js diff --git a/src/lib/drag/core.js b/src/js/lib/drag/core.js similarity index 100% rename from src/lib/drag/core.js rename to src/js/lib/drag/core.js diff --git a/src/lib/drag/index.js b/src/js/lib/drag/index.js similarity index 100% rename from src/lib/drag/index.js rename to src/js/lib/drag/index.js diff --git a/src/lib/form/button.js b/src/js/lib/form/button.js similarity index 100% rename from src/lib/form/button.js rename to src/js/lib/form/button.js diff --git a/src/lib/form/checkbox.js b/src/js/lib/form/checkbox.js similarity index 100% rename from src/lib/form/checkbox.js rename to src/js/lib/form/checkbox.js diff --git a/src/lib/form/input.js b/src/js/lib/form/input.js similarity index 100% rename from src/lib/form/input.js rename to src/js/lib/form/input.js diff --git a/src/lib/form/number.js b/src/js/lib/form/number.js similarity index 100% rename from src/lib/form/number.js rename to src/js/lib/form/number.js diff --git a/src/lib/form/progress.js b/src/js/lib/form/progress.js similarity index 100% rename from src/lib/form/progress.js rename to src/js/lib/form/progress.js diff --git a/src/lib/form/radio.js b/src/js/lib/form/radio.js similarity index 100% rename from src/lib/form/radio.js rename to src/js/lib/form/radio.js diff --git a/src/lib/form/select.js b/src/js/lib/form/select.js similarity index 100% rename from src/lib/form/select.js rename to src/js/lib/form/select.js diff --git a/src/lib/form/star.js b/src/js/lib/form/star.js similarity index 100% rename from src/lib/form/star.js rename to src/js/lib/form/star.js diff --git a/src/lib/form/switch.js b/src/js/lib/form/switch.js similarity index 100% rename from src/lib/form/switch.js rename to src/js/lib/form/switch.js diff --git a/src/lib/icon/index.js b/src/js/lib/icon/index.js similarity index 100% rename from src/lib/icon/index.js rename to src/js/lib/icon/index.js diff --git a/src/lib/icon/svg.js b/src/js/lib/icon/svg.js similarity index 100% rename from src/lib/icon/svg.js rename to src/js/lib/icon/svg.js diff --git a/src/lib/layer/index.js b/src/js/lib/layer/index.js similarity index 100% rename from src/lib/layer/index.js rename to src/js/lib/layer/index.js diff --git a/src/lib/lyrics/index.js b/src/js/lib/lyrics/index.js similarity index 100% rename from src/lib/lyrics/index.js rename to src/js/lib/lyrics/index.js diff --git a/src/lib/pager/index.js b/src/js/lib/pager/index.js similarity index 100% rename from src/lib/pager/index.js rename to src/js/lib/pager/index.js diff --git a/src/lib/request/index.js b/src/js/lib/request/index.js similarity index 100% rename from src/lib/request/index.js rename to src/js/lib/request/index.js diff --git a/src/lib/request/lib/format.js b/src/js/lib/request/lib/format.js similarity index 100% rename from src/lib/request/lib/format.js rename to src/js/lib/request/lib/format.js diff --git a/src/lib/s-ico/index.js b/src/js/lib/s-ico/index.js similarity index 100% rename from src/lib/s-ico/index.js rename to src/js/lib/s-ico/index.js diff --git a/src/lib/s-ico/svg.js b/src/js/lib/s-ico/svg.js similarity index 100% rename from src/lib/s-ico/svg.js rename to src/js/lib/s-ico/svg.js diff --git a/src/lib/scroll/index.js b/src/js/lib/scroll/index.js similarity index 100% rename from src/lib/scroll/index.js rename to src/js/lib/scroll/index.js diff --git a/src/lib/store/index.js b/src/js/lib/store/index.js similarity index 100% rename from src/lib/store/index.js rename to src/js/lib/store/index.js diff --git a/src/lib/utils.js b/src/js/lib/utils.js similarity index 100% rename from src/lib/utils.js rename to src/js/lib/utils.js diff --git a/src/main.js b/src/main.js index 3b3dd4b..8be74c2 100644 --- a/src/main.js +++ b/src/main.js @@ -52,27 +52,20 @@ app.once('ready', () => { }) // 修改app的UA session.defaultSession.setUserAgent( - 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36' + 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36' ) - // 判断依赖 - exec('which ffprobe', (err, res) => { - if (res) { - let win = createMainWindow(path.resolve(ROOT, './images/app.png')) + let win = createMainWindow(path.resolve(ROOT, './images/app.png')) - createTray(win) - createMenu(win) + createTray(win) + createMenu(win) - app.__MAIN__ = win + app.__MAIN__ = win - // mac专属事件,点击dock栏图标,可激活窗口 - app.on('activate', _ => { - if (win) { - win.webContents.send('dock-click') - } - }) - } else { - createErrorWindow() + // mac专属事件,点击dock栏图标,可激活窗口 + app.on('activate', _ => { + if (win) { + win.webContents.send('dock-click') } }) }) diff --git a/src/tools/windows.js b/src/tools/windows.js index 767eb1d..8901e04 100644 --- a/src/tools/windows.js +++ b/src/tools/windows.js @@ -15,11 +15,16 @@ exports.createMainWindow = function(icon) { // 创建浏览器窗口 let win = new BrowserWindow({ title: 'sonist', - width: 1000, - height: 640, + width: 820, + height: 460, frame: false, resizable: false, + maximizable: false, icon, + transparent: true, + backgroundColor: '#00ffffff', + vibrancy: 'dark', + visualEffectState: 'active', webPreferences: { webSecurity: false, experimentalFeatures: true, @@ -51,7 +56,6 @@ exports.createErrorWindow = function() { maximizable: false, minimizable: false, resizable: false, - titleBarStyle: 'hiddenInset', webPreferences: { devTools: false }