efront 4.19.6 → 4.20.0

package/coms/kugou/player.js

@@ -3,11 +3,14 @@ var playState = kugou$playState;
 var playModes = kugou$playModes;
 var playModeData = data.getInstance("play-mode");
 var playList = kugou$playList();
+playList.initialStyle = 'marginLeft:-360px';
 var patchMusicInfo = async function (info) {
     var res = null, krc;
     switch (info.type) {
         case "qqjt":
-            info.lrc = (await cross("get", info.lyric)).response;
+            try {
+                info.lrc = (await cross("get", info.lyric)).response;
+            } catch { }
             res = await data.from("qqjt-url", qqjc({
                 TSID: info.id
             }))
@@ -19,19 +22,23 @@ var patchMusicInfo = async function (info) {
                 level: "standard",
                 encodeType: "aac"
             }));
-            info.lrc = await data.from('yyyy-lrc', yyyc.encode({
-                id: info.id,
-                lv: 0,
-                // tv: 0,
-            }));
+            try {
+                info.lrc = await data.from('yyyy-lrc', yyyc.encode({
+                    id: info.id,
+                    lv: 0,
+                    // tv: 0,
+                }));
+            } catch { }
             info.singerName = info.singername;
             info.songName = info.songname;
             break;
         case "kuwo":
             res = await data.from("play-url", info);
-            info.lrc = await data.from("kuwo-lrc", info, function (lrc) {
-                return lrc.map(l => `[${l.time}]${l.lineLyric}`).join('\r\n');
-            });
+            try {
+                info.lrc = await data.from("kuwo-lrc", info, function (lrc) {
+                    return lrc.map(l => `[${l.time}]${l.lineLyric}`).join('\r\n');
+                });
+            } catch { }
             info.avatar = info.pic;
             info.singerName = info.singername;
             info.songName = info.songname;
@@ -40,14 +47,29 @@ var patchMusicInfo = async function (info) {
         default:
             if (info.hash) {
                 res = await data.from("song-info", info);
-                krc = await data.from("search-krc", res);
-                krc = await data.from("download-krc", krc);
-                info.krc = fromBase64(krc);
+                try {
+                    krc = await data.from("search-krc", res);
+                    krc = await data.from("download-krc", krc);
+                    info.krc = fromBase64(krc);
+                } catch { }
                 if (res.fail_process === 12) res.priced = true;
                 if (res.imgUrl) {
                     res.avatar = res.imgUrl.replace(/\{size\}/ig, 200);
                 }
             }
+            else if (/\.\w+\#[klg]rc$/i.test(info.url)) {
+                var Uint8Array = window.Uint8Array;
+                if (!Uint8Array) break;
+                try {
+                    var krl = info.url.replace(/\.\w+#(\w+)$/i, '.$1');
+                    var ext = /\.(\w+)$/.exec(krl);
+                    var xhr = cross("get", krl);
+                    if (/krc$/i.test(krl)) xhr.responseType = 'arraybuffer';
+                    await xhr;
+                    var krc = xhr.response;
+                    info[ext[1].toLowerCase()] = krc instanceof ArrayBuffer ? new Uint8Array(krc) : krc;
+                } catch { }
+            }
             break;
     }
     Object.assign(info, res);
@@ -71,6 +93,7 @@ on("keydown")(window, function (event) {
         case 32:
         case 179:
             if (event.repeat) break;
+            event.preventDefault();
             if ($scope.playing) $scope.pause();
             else $scope.play();
             break;
@@ -141,6 +164,7 @@ var $scope = {
     canvas: kugou$dance,
     activeList: playList,
     index: 0,
+    container,
     getSongName() {
         return this.info.songname || this.info.songName;
     },
@@ -355,7 +379,7 @@ if (hasContext) {
 }
 
 playList.play = index => $scope.play(index);
-var touching = false;
+var touching = false, touched = 0;
 var createControls = function () {
     var player = document.createElement("music-player");
     player.setAttribute("ng-class", "{play:playing===true,pause:playing===false,page:page,effect:effect}");
@@ -366,6 +390,7 @@ var createControls = function () {
         var x = event.clientX - getScreenPosition(player).left;
         let _audio = $scope.audio
         css(progress, { width: x });
+        touched = x;
         $scope.process(x / player.offsetWidth * _audio.duration, _audio.duration);
     }, "x");
     bindtouch(player, function (value) {
@@ -389,9 +414,8 @@ var createControls = function () {
         }
         return { y: getScreenPosition(player).top };
     }, 'y');
+
     moveupon(player, {
-        start() {
-        },
         end() {
             var currentHeight = calcPixel(this.offsetHeight), windowHeight = calcPixel(window.innerHeight);
             var $scope = this.$scope;
@@ -429,7 +453,7 @@ var createControls = function () {
             });
             if (!touching) return;
             let _audio = $scope.audio;
-            _audio.currentTime = progress.offsetWidth * _audio.duration / player.offsetWidth;
+            _audio.currentTime = touched * _audio.duration / player.offsetWidth;
             touching = false;
         }
     });
@@ -437,13 +461,6 @@ var createControls = function () {
 };
 
 var player = function (player) {
-    var savatar = player.querySelector('canvas');
-    var switchPlayList = function () {
-        if (onclick.preventClick) return;
-        onclick.preventClick = true;
-        if (playList.parentNode) remove(playList);
-        else popup(playList, savatar);
-    }
     render(player, $scope);
     player.play = function (hash) {
         $scope.play(hash);
@@ -457,14 +474,5 @@ var player = function (player) {
         if ($scope.playing) $scope.pause();
         else $scope.play();
     });
-    var timeout = 0;
-    moveupon(player, {
-        start() {
-            timeout = setTimeout(switchPlayList, 560);
-        },
-        end() {
-            clearTimeout(timeout);
-        }
-    })
     return player;
 }(createControls());

package/coms/kugou/player.less

@@ -1,8 +1,10 @@
 @avatar-left: 36px;
 @avatar-top: -12px;
 @avatar-size: 72px;
-
-@main-color: #021c;
+@shade-color: #acb;
+@main-color: #000c;
+@list-width: 320px;
+@list-only-width: 640px;
 
 &.pause .play:before {
     content: "";
@@ -15,9 +17,6 @@
     vertical-align: middle;
 }
 
-krc {
-    pointer-events: none;
-}
 
 &.play .play:before {
     display: none;
@@ -33,6 +32,7 @@ krc {
     left: @avatar-left;
     position: absolute;
     background-size: cover;
+    background-position: center;
     border: 3px solid #000;
     background-clip: content-box;
 }
@@ -63,12 +63,6 @@ krc {
     // -webkit-animation-play-state: paused;
 }
 
-&:after {
-    content: "";
-    display: block;
-    box-sizing: border-box;
-}
-
 &.play,
 &.pause {
     height: 60px;
@@ -94,10 +88,9 @@ krc {
         content: "";
         left: @avatar-left+@border-width + 72px;
         position: absolute;
-        min-width: 100px;
         width: auto;
         height: auto;
-        border-radius: 60px 0 0 0;
+        border-radius: 60px 0 60px 0;
         right: 0;
         top: 0;
         bottom: 0;
@@ -133,7 +126,7 @@ krc {
 
     >.track:after,
     >.avatar {
-        border-color: @main-color;
+        transition: border-color .2s ease-out;
         box-shadow: 0 0 6px -3px @main-color;
     }
 
@@ -141,6 +134,10 @@ krc {
         opacity: .7;
         transition: height .3s, opacity .3s;
         top: -@avatar-top;
+
+        &:before {
+            transition: background-color .2s ease-out;
+        }
     }
 
     >.avatar {
@@ -175,15 +172,18 @@ krc {
 
     >btn,
     >sbtn {
+        color: @shade-color;
         @btn-width: 42px;
         text-align: center;
         line-height: 60px;
         width: @btn-width;
         height: 60px;
         vertical-align: top;
+        box-shadow: none;
         position: absolute;
         background: transparent;
         z-index: 2;
+        font-size: 14px;
 
         &.play {
             top: @avatar-top/2;
@@ -193,16 +193,20 @@ krc {
 
         &.next {
             right: 0;
+            padding-right: 12px;
+            text-align: right;
         }
 
         &.prev {
+            text-align: left;
+            padding-left: 12px;
             top: 0;
             left: @avatar-left - @btn-width+6px;
         }
 
     }
 
-    .time {
+    >.time {
         left: 6px;
         text-align: center;
         top: 46px;
@@ -212,7 +216,7 @@ krc {
         font-size: 12px;
     }
 
-    .total {
+    >.total {
         z-index: 2;
         right: 6px;
         top: 46px;
@@ -221,7 +225,7 @@ krc {
         font-size: 12px;
     }
 
-    .singer {
+    >.singer {
         color: #fffc;
         font-size: 8px;
         display: block;
@@ -232,7 +236,7 @@ krc {
     }
 
 
-    .song {
+    >.song {
         left: @avatar-left + @avatar-size + 6px;
         line-height: 1;
         top: 22px;
@@ -259,8 +263,21 @@ krc {
     opacity: 1;
     @ptop: -@avatar-top;
 
+    >div.progress>.avatar {
+        border-color: @shade-color;
+    }
+
     >div.progress>.track {
         height: 3px;
+
+        &:after {
+            border-color: @shade-color;
+        }
+
+        &:before {
+            background-color: @shade-color;
+        }
+
         opacity: 1;
         top: @ptop;
 
@@ -285,8 +302,7 @@ krc {
     z-index: 1;
 }
 
-
-&:not(.page)>.krc {
+.nkrc() {
     top: 0;
     height: 16px;
     font-size: 8px;
@@ -303,19 +319,31 @@ krc {
     .after-active+.after {
         clear: both;
     }
+}
 
+&:not(.page)>.krc {
+    .nkrc();
 }
 
 &.page>.krc {
-    text-align: center;
-    line-height: 2.2;
-    margin-bottom: -80px;
-    bottom: 50%;
-    height: 180px;
-    max-height: 60%;
-    top: auto;
-    padding: 0;
-    font-size: 16px;
+    @media all and (min-width:@list-only-width) {
+        text-align: center;
+        line-height: 2.2;
+        margin-bottom: -80px;
+        bottom: 50%;
+        height: 180px;
+        max-height: 60%;
+        top: auto;
+        left: @list-width;
+        padding: 0;
+        font-size: 16px;
+    }
+
+    @list-only-width1: @list-only-width - 1px;
+
+    @media all and (max-width:@list-only-width1) {
+        .nkrc();
+    }
 }
 
 
@@ -336,19 +364,18 @@ krc {
     background-repeat: no-repeat;
     background-position: center;
 
-    &:before {
+    &:after {
         content: "";
         display: block;
         position: absolute;
-        background: inherit;
         left: 0;
         right: 0;
-        top: 0;
+        top: 60px;
         bottom: 0;
-        filter: blur(15px);
+        backdrop-filter: blur(60px);
     }
 
-    &:after {
+    &:before {
         background-color: #000;
         opacity: .6;
         content: "";
@@ -477,4 +504,68 @@ krc {
     >.background {
         opacity: 1 !important;
     }
+}
+
+
+>.playList {
+    position: absolute;
+    max-width: 100%;
+    background: transparent;
+
+    @media all and (min-width: @list-only-width) {
+        >.body {
+            padding-right: calc(100% - @list-width);
+        }
+    }
+
+    z-index: 0;
+
+    left: 0;
+    top: 0;
+    height: 100%;
+    bottom: 0;
+    min-height: 240px;
+    border-left: none;
+    border-radius: 0;
+    text-align: left;
+    border-color: #000;
+    background: inherit;
+    box-shadow: none;
+
+    >.foot {
+        height: 0;
+        border: none;
+        overflow: visible;
+        padding: 0;
+
+        a {
+            color: #fff;
+            margin: -60px 20px 0 0;
+        }
+    }
+
+    >.head {
+        // text-align: right;
+        border: none;
+        height: 60px;
+        background: inherit;
+        backdrop-filter: none;
+
+        &:before {
+            left: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            width: auto;
+            height: auto;
+            position: absolute;
+            backdrop-filter: blur(10px);
+        }
+    }
+
+    >.body {
+        border-radius: inherit;
+        border-bottom: none;
+    }
+
 }

package/coms/kugou/song.html

@@ -1,4 +1,7 @@
 <bg></bg>
+<div refresh class="play-state" -if="isActived()" ng-class={error:playState.error}>
+    <div ng-style="{width:playState.width}"></div>
+</div>
 <png class="logo" ng-if="song.imgurl" ng-src=song.imgurl></png>
 <div class="singer" ng-if="song.singer" ng-html=song.singerMarked></div>
 <div class="song" style:="{whiteSpace:song.items?'normal':'nowrap'}">
@@ -7,7 +10,4 @@
         <i type_="s.type" ng-class="{actived:musicList.isActived(s)}" priced_="!!s.priced" @click="event.stopPropagation(),play(s)" -repeat="s in song.items"></i>
     </span>
 </div>
-<div class="filterTime(song.timeLength)"></div>
-<div refresh class="play-state" -if="isActived()" ng-class={error:playState.error}>
-    <div ng-style="{width:playState.width}"></div>
-</div>
+<div -bind="filterTime(song.timeLength)"></div>

package/coms/kugou/song.js

@@ -50,5 +50,6 @@ function main(elem) {
         render(elem.children, $scope, 0);
     });
     onclick(elem, dplay);
+    patchHover(elem);
     return block(elem);
 }

package/coms/kugou/song.less

@@ -1,33 +1,43 @@
 & {
     height: auto;
-    line-height: 40px;
-    padding: 10px 10px 0 10px;
+    line-height: 28px;
+    padding: 10px 10px 0 20px;
     font-size: 16px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     background: #202226;
     color: #fffc;
+    border-radius: 30px;
 
     border: 2px solid transparent;
 
-    &:hover {
-        border-color: #acb;
+    .bg:after {
+        border: 1px solid transparent;
     }
 
-    &:active {
-        border-color: #ccc;
+    &.hover {
+        .bg:after {
+            border-color: #fff9;
+        }
     }
+
 }
 
 >.logo {
-    height: 40px;
-    width: 40px;
-    margin: -4px -2px;
+    width: 52px;
+    height: 52px;
+    font-size: 0;
+    margin: -10px -2px -10px -20px;
+    border-radius: 50%;
+    border: 6px double #323336;
+    position: relative;
+    transition: border-width .2s;
+    background-clip: border-box;
 
     &+.singer+.song,
     &+.song {
-        margin-left: -38px;
+        margin-left: -32px;
         padding-left: 46px;
         display: inline-block;
         vertical-align: top;
@@ -35,25 +45,52 @@
     }
 
     &+.singer {
-        padding-left: 46px;
+        padding-left: 28px;
     }
 
 }
 
+&.activate {
+    >.logo {
+        // border-color: #acb;
+        border-width: 3.6px;
+        background-clip: content-box;
+        outline: 1.2px solid #acb;
+        outline-offset: -1.2px;
+    }
+
+    png {
+        filter: none;
+    }
+
+    &.error {
+        >.logo {
+            border-color: #c26;
+        }
+    }
+}
+
 &.imgonly {
     padding: 0;
     line-height: 0;
     font-size: 0;
-    padding-bottom: 76%;
     height: auto;
 
-    >:not(png) {
+    >:not(png, bg) {
         display: none;
     }
 
+    >.bg:after {
+        right: -10px;
+        bottom: -30px;
+    }
+
     >.logo {
-        position: absolute;
-        height: 100%;
+        border: none;
+        padding-bottom: 100%;
+        height: 0;
+        font-size: 0;
+        line-height: 0;
         width: 100%;
         margin: 0;
     }
@@ -138,7 +175,7 @@ b {
 
 >.singer {
     position: absolute;
-    left: 8px;
+    left: 26px;
     top: 6px;
     // right: 10px;
     text-align: center;
@@ -148,7 +185,7 @@ b {
 
     &+.song {
         padding-top: 12px;
-        padding-bottom: 6px;
+        padding-bottom: 2px;
     }
 }
 
@@ -159,22 +196,36 @@ png {
 >.play-state {
     position: absolute;
     bottom: 0;
-    right: 2px;
-    left: 2px;
+    right: 0;
+    left: 0;
     display: block;
-    background: #2c7bb522;
-    height: 2px;
-    border-radius: 2px 0 2px 0;
-    overflow: hidden;
+    border-bottom: 1.2px solid #323336;
+    height: 30px;
+    border-radius: 0px 0 26px 26px;
+    overflow: visible;
+    padding: 0 16px 0 26px;
 
     >div {
         width: 100%;
         height: 100%;
-        border-radius: inherit;
-        background: #2c7bb5;
+        box-sizing: content-box;
+        border-bottom: 1.2px solid #acb;
+        margin-bottom: -1.2px;
+
     }
 
     &.error {
-        background-color: #c26;
+
+        &+.logo {
+            outline-color: #c26;
+        }
+
+        & {
+            border-color: #c26;
+        }
+
+        >div {
+            display: none;
+        }
     }
 }

package/coms/kugou/titlebar.less

@@ -1,7 +1,10 @@
 & {
     height: 44px;
     line-height: 42px;
+    border: none;
+    background-color: transparent;
     font-size: 16px;
+
     >.button {
         height: 44px;
         line-height: 44px;