add song homepage
This commit is contained in:
Listen 1
parent
367e6b91f5
commit
bd8c276bf3
@ -1,6 +1,6 @@
|
||||
Listen 1 (Chrome Extension) V1.4.0
|
||||
==========
|
||||
（最后更新于2018年02月14日）
|
||||
（最后更新于2018年02月18日）
|
||||
|
||||
[](LICENSE)
|
||||
|
||||
@ -45,6 +45,10 @@ Firefox打包安装
|
||||
更新日志
|
||||
-------
|
||||
|
||||
`2018-02-18`
|
||||
|
||||
* 增加歌曲主页，点击封面可进入（特别感谢@iparanoid提供歌曲页面UI设计）
|
||||
|
||||
`2018-02-15`
|
||||
|
||||
* 修复随机播放在播放列表播放结束后自动停止的问题，开启无限洗脑循环（感谢@sunjie21的提交）
|
||||
|
||||
@ -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;
|
||||
|
||||
24
js/app.js
24
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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
42
listen1.html
42
listen1.html
@ -43,7 +43,7 @@
|
||||
</head>
|
||||
|
||||
<body ng-controller="NavigationController">
|
||||
|
||||
<div ng-controller="PlayController as playCtrl" ng-init="loadLocalSettings()">
|
||||
<!-- dialog -->
|
||||
<div class="shadow" ng-hide="is_dialog_hidden==1"></div>
|
||||
<div class="dialog" ng-hide="is_dialog_hidden==1" ng-style="myStyle">
|
||||
@ -357,7 +357,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- track list window -->
|
||||
<div class="site-wrapper" ng-hide="is_window_hidden==1">
|
||||
<div class="cover-container container-placeholder">
|
||||
@ -367,7 +366,7 @@
|
||||
</div>
|
||||
<div class="site-wrapper-innerd" resize>
|
||||
<div class="cover-container" >
|
||||
<div class="playlist-detail">
|
||||
<div class="playlist-detail" ng-show="window_type=='list'">
|
||||
<div class="detail-head">
|
||||
<div class="detail-head-cover">
|
||||
<img ng-src="{{ cover_img_url }}">
|
||||
@ -400,13 +399,36 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="playsong-detail" ng-show="window_type=='track'">
|
||||
<div class="detail-head">
|
||||
<div class="detail-head-cover">
|
||||
<img ng-src="{{ currentPlaying.img_url }}">
|
||||
</div>
|
||||
<div class="detail-head-title">
|
||||
|
||||
<!-- <a title="加入收藏" class="clone" ng-click="showDialog(0, currentPlaying)">收藏</a>
|
||||
<a open-url="currentPlaying.source_url" title="原始链接" class="link">原始链接</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<ul class="detail-songinfo">
|
||||
<h2>{{ currentPlaying.title }}</h2>
|
||||
<div class="info">
|
||||
<span>歌手: </span><a class="" ng-click="showPlaylist(currentPlaying.artist_id)">{{ currentPlaying.artist }}</a><span class="album">专辑: </span><a ng-click="showPlaylist(currentPlaying.album_id)">{{ currentPlaying.album }}</a>
|
||||
</div>
|
||||
<div class="lyric">
|
||||
<div class="placeholder"></div>
|
||||
<p ng-repeat="line in lyricArray track by $index" ng-class="{ 'highlight': line.lineNumber == lyricLineNumber }" >{{ line.content }} </p>
|
||||
<div style="placeholder"></div>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- page footer -->
|
||||
<div class="mastfoot" ng-controller="PlayController as playCtrl" ng-init="loadLocalSettings()">
|
||||
<div class="mastfoot">
|
||||
<div class="m-playbar" >
|
||||
<div class="btns">
|
||||
<a class="previous" title="上一首([)" prev-track >上一首([)</a>
|
||||
@ -417,12 +439,13 @@
|
||||
<div class="head">
|
||||
<!-- <img ng-src="{{ currentPlaying.img_url }}" err-src="images/placeholder.png"> -->
|
||||
<img ng-src="{{ currentPlaying.img_url }}">
|
||||
<a ng-click="showPlaylist(currentPlaying.album_id)" class="mask"></a>
|
||||
<!-- <a ng-click="showPlaylist(currentPlaying.album_id)" class="mask"></a> -->
|
||||
<a ng-click="showWindow('/now_playing')" class="mask"></a>
|
||||
</div>
|
||||
|
||||
<div class="maininfo">
|
||||
<div class="words">
|
||||
<a class="overflowhide name notextdeco floatleft" title="{{currentPlaying.title}}">{{currentPlaying.title}}</a>
|
||||
<a ng-click="showWindow('/now_playing')" class="overflowhide name notextdeco floatleft" title="{{currentPlaying.title}}">{{currentPlaying.title}}</a>
|
||||
<span class="by overflowhide floatleft">
|
||||
<span title="{{ currentPlaying.artist }}">
|
||||
<a class="" ng-click="showPlaylist(currentPlaying.artist_id)">{{ currentPlaying.artist }}</a>
|
||||
@ -477,14 +500,9 @@
|
||||
<div class="singer" ng-click="showPlaylist(song.artist_id)">{{ song.artist }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="lyric">
|
||||
<div class="placeholder"></div>
|
||||
<p ng-repeat="line in lyricArray track by $index" ng-class="{ 'highlight': line.lineNumber == lyricLineNumber }" >{{ line.content }} </p>
|
||||
<div style="placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user