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 2cafca7..0000000 Binary files a/src/images/avatar.jpg and /dev/null differ 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 }