From bd8c276bf31aa558f3d36e6f12c601133795e961 Mon Sep 17 00:00:00 2001 From: Listen 1 Date: Sun, 18 Feb 2018 00:45:32 +0800 Subject: [PATCH] add song homepage --- README.md | 6 ++- css/player.css | 98 +++++++++++++++++++++++++++++++++++--------- js/app.js | 24 ++++++++++- js/provider/xiami.js | 2 +- listen1.html | 42 +++++++++++++------ 5 files changed, 138 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 4eddb21..f36cebd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ Listen 1 (Chrome Extension) V1.4.0 ========== -（最后更新于2018年02月14日） +（最后更新于2018年02月18日） [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE) @@ -45,6 +45,10 @@ Firefox打包安装 更新日志 ------- +`2018-02-18` + +* 增加歌曲主页，点击封面可进入（特别感谢@iparanoid提供歌曲页面UI设计） + `2018-02-15` * 修复随机播放在播放列表播放结束后自动停止的问题，开启无限洗脑循环（感谢@sunjie21的提交） diff --git a/css/player.css b/css/player.css index 18ec4fe..10d3cb0 100644 --- a/css/player.css +++ b/css/player.css @@ -535,7 +535,7 @@ em, i { right: 0px; _right: 0px; height: 349px; - width: 100%; + width: 60%; background-color: #121212; } @@ -544,7 +544,6 @@ em, i { padding-left: 0px; height: 308px; overflow-y: scroll; - width: 60%; margin-bottom: 0px; } @@ -638,7 +637,7 @@ li { .menu .add-all { display: inline-block; position: absolute; - left: 377px; + left: 335px; top: 9px; } @@ -646,7 +645,7 @@ li { .menu .remove-all { display: inline-block; position: absolute; - left: 454px; + left: 410px; top: 9px; } @@ -738,13 +737,13 @@ li { max-height:100%; } -.playlist-detail .detail-head-title { +.detail-head-title { float: left; width: 100%; text-align: center; } -.playlist-detail .detail-head-title a { +.detail-head-title a { display: inline-block; text-indent: -9999px; width: 36px; @@ -753,55 +752,55 @@ li { background: url(../images/player_large.png) no-repeat 0 9999px; } -.playlist-detail .detail-head-title .play { +.detail-head-title .play { background-position: 0px 0px; } -.playlist-detail .detail-head-title .play:hover { +.detail-head-title .play:hover { background-position: 0px -36px; } -.playlist-detail .detail-head-title .add { +.detail-head-title .add { background-position: -216px 0px; } -.playlist-detail .detail-head-title .add:hover { +.detail-head-title .add:hover { background-position: -216px -36px; } -.playlist-detail .detail-head-title .link { +.detail-head-title .link { background-position: -250px 0px; } -.playlist-detail .detail-head-title .link:hover { +.detail-head-title .link:hover { background-position: -250px -36px; } -.playlist-detail .detail-head-title .edit { +.detail-head-title .edit { background-position: -288px 0px; } -.playlist-detail .detail-head-title .edit:hover { +.detail-head-title .edit:hover { background-position: -288px -36px; } -.playlist-detail .detail-head-title .clone { +.detail-head-title .clone { background-position: -144px 0px; } -.playlist-detail .detail-head-title .clone:hover { +.detail-head-title .clone:hover { background-position: -144px -36px; } -.playlist-detail .detail-head-title .merge { +.detail-head-title .merge { background-position: -324px 0px; } -.playlist-detail .detail-head-title .merge:hover { +.detail-head-title .merge:hover { background-position: -324px -36px; } -.playlist-detail .detail-head-title .ply:hover { +.detail-head-title .ply:hover { background-position: -40px -204px; } @@ -816,6 +815,67 @@ li { margin-right: 14px; } +.playsong-detail .detail-head { + width: 390px; + position: fixed; + margin-bottom: 20px; +} + +.playsong-detail .detail-songinfo { + padding-left: 440px; + padding-right: 55px; +} + +.playsong-detail .detail-head .detail-head-cover { + margin: 0 auto; + width: 200px; +} + +.playsong-detail .detail-head .detail-head-cover img { + width: 240px; + height: 240px; +} + +.playsong-detail .detail-songinfo h2 { + font-size: 22px; +} + +.playsong-detail .detail-songinfo .info { + border-bottom: solid #444 1px; + margin-bottom: 5px; + padding-bottom: 10px; +} +.playsong-detail .detail-songinfo .info span{ + color: #9b9b9b; + margin-right: 10px; +} +.playsong-detail .detail-songinfo .info span.album { + margin-left: 30px; +} +.playsong-detail .lyric { + color: #999; /* IE8 proofing */ + color: rgba(255,255,255,.5); + text-align: left; + width: 100%; + display: inline-block; + height: 410px; + overflow-y: scroll; + position: relative; + font-size: 15px; +} + +.playsong-detail .lyric p{ + min-height: 20px; +} + +.playsong-detail .lyric .placeholder{ + height: 50px; +} + +.playsong-detail .lyric .highlight{ + color: #ffffff; +} + .detail-songlist { padding-left: 0px; text-align: left; diff --git a/js/app.js b/js/app.js index 86dcf62..4a460bd 100644 --- a/js/app.js +++ b/js/app.js @@ -128,13 +128,28 @@ $scope.playlist_title = ''; $scope.playlist_source_url = ''; $scope.songs = []; + $scope.window_type = 'list'; }; $scope.showWindow = function(url){ + if ($scope.window_url_stack.length > 0 && $scope.window_url_stack[$scope.window_url_stack.length-1] == url) { + return; + } $scope.is_window_hidden = 0; $scope.resetWindow(); + + if ($scope.window_url_stack.length > 0 && $scope.window_url_stack[$scope.window_url_stack.length-1] == '/now_playing') { + // if now playing is top, pop it + $scope.window_url_stack.splice(-1,1); + } + if (url == '/now_playing') { + $scope.window_type = 'track'; + $scope.window_url_stack.push(url); + return; + } $scope.window_url_stack.push(url); + loWeb.get(url).success(function(data) { if (data.status == '0') { Notification.info(data.reason); @@ -147,6 +162,7 @@ $scope.playlist_source_url = data.info.source_url; $scope.list_id = data.info.id; $scope.is_mine = (data.info.id.slice(0,2) == 'my'); + $scope.window_type = 'list'; }); }; @@ -164,6 +180,11 @@ else { $scope.resetWindow(); var url = $scope.window_url_stack[$scope.window_url_stack.length-1]; + + if (url == '/now_playing') { + $scope.window_type = 'track'; + return; + } loWeb.get(url).success(function(data) { $scope.songs = data.tracks; $scope.list_id = data.info.id; @@ -959,7 +980,8 @@ var lineHeight = 20; var lineElement = $(".lyric p")[lastObject.lineNumber]; var windowHeight = 270; - var offset = lineElement.offsetTop - windowHeight/2; + var AdditionOffset = 4; + var offset = lineElement.offsetTop - windowHeight/2 + AdditionOffset; $(".lyric").animate({ scrollTop: offset+"px" }, 500); $scope.lyricLineNumber = lastObject.lineNumber; } diff --git a/js/provider/xiami.js b/js/provider/xiami.js index c9b29b9..c3389d7 100644 --- a/js/provider/xiami.js +++ b/js/provider/xiami.js @@ -113,7 +113,7 @@ var xiami = (function() { } var location = data.data.trackList[0].location; sound.url = caesar(location); - track.img_url = data.data.trackList[0].pic; + track.img_url = xm_retina_url(data.data.trackList[0].pic); track.album = data.data.trackList[0].album_name; track.album_id = 'xmalbum_' + data.data.trackList[0].album_id; track.lyric_url = data.data.trackList[0].lyric_url; diff --git a/listen1.html b/listen1.html index 700979e..0fae8f6 100644 --- a/listen1.html +++ b/listen1.html @@ -43,7 +43,7 @@ - +
@@ -357,7 +357,6 @@
-
@@ -367,7 +366,7 @@
-
+
@@ -400,13 +399,36 @@
+
+
+
+ +
+
+ + +
+
+ +
-
+
@@ -417,12 +439,13 @@
- + +
- {{currentPlaying.title}} + {{currentPlaying.title}} {{ currentPlaying.artist }} @@ -477,14 +500,9 @@
{{ song.artist }}
-
-
-

{{ line.content }}

-
-
- +