listen1_chrome_extension/listen1.html

387 lines
20 KiB
HTML
Raw Normal View History

2016-04-30 14:42:45 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Listen 1</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/angular-ui-notification.css" rel="stylesheet">
<link href="css/cover.css" rel="stylesheet">
<link href="css/player.css" rel="stylesheet">
<script type="text/javascript" src="js/vendor/jquery-1.12.2.js"></script>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script type="text/javascript" src="js/vendor/angular-soundmanager2.js"></script>
<script type="text/javascript" src="js/vendor/angular-ui-notification.js"></script>
2016-05-21 15:09:43 +08:00
<script type="text/javascript" src="js/vendor/ng-infinite-scroll.js"></script> <!-- require jQuery as dependency -->
2016-04-30 14:42:45 +08:00
<script type="text/javascript" src="js/aes.js"></script>
<script type="text/javascript" src="js/bigint.js"></script>
<script type="text/javascript" src="js/lowebutil.js"></script>
<script type="text/javascript" src="js/xiami.js"></script>
<script type="text/javascript" src="js/qq.js"></script>
<script type="text/javascript" src="js/netease.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
2016-04-30 14:42:45 +08:00
<script type="text/javascript" src="js/loweb.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="listenone" ng-controller="NavigationController">
<!-- dialog -->
<div class="shadow" ng-hide="is_dialog_hidden==1"></div>
2016-04-30 14:42:45 +08:00
<div class="dialog" ng-hide="is_dialog_hidden==1" ng-style="myStyle">
<div class="dialog-header"> <span>{{ dialog_title }}</span> <span class="dialog-close" ng-click="closeDialog()">×</span></div>
<div class="dialog-body">
2016-04-30 14:42:45 +08:00
<!-- choose playlist dialog -->
<ul class="dialog-playlist" ng-show="dialog_type==0">
2016-04-30 14:42:45 +08:00
<li class="detail-add" ng-click="newDialogOption()">
<img src="images/mycover.jpg" />
<h2> 新建歌单 </h2>
</li>
<li ng-repeat="playlist in myplaylist" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="chooseDialogOption(playlist.info.id)">
<img ng-src="{{ playlist.info.cover_img_url }}" />
<h2> {{ playlist.info.title }} </h2>
2016-04-30 14:42:45 +08:00
</li>
</ul>
2016-04-30 14:42:45 +08:00
<!-- create new playlist dialog -->
<div ng-show="dialog_type==1" class="dialog-newplaylist">
2016-04-30 14:42:45 +08:00
<input type="text" class="form-control" placeholder="输入歌单名称" ng-model="newlist_title"/>
<button class="btn btn-primary confirm-button" ng-click="createAndAddPlaylist()">创建并添加</button>
<button class="btn btn-default" ng-click="cancelNewDialog()">取消</button>
</div>
2016-04-30 14:42:45 +08:00
<!-- login douban dialog -->
<!-- <div ng-show="dialog_type==2" class="dbimport" ng-controller="ImportController" ng-init="getLoginInfo()" >
<form class="form-signin" name="loginForm" ng-submit="loginForm.$valid && loginDouban()" novalidate ng-show="!isDoubanLogin">
<label for="inputEmail" class="sr-only">邮件地址</label>
<input type="email" id="inputEmail" class="form-control" name="email" placeholder="登录邮箱" ng-model="session.user" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control" placeholder="密码" ng-model="session.password" required>
<img ng-src="{{validcode_url}}" class="valid-img" ng-click="getLoginInfo()">
<label for="captchaSolution" class="sr-only">验证码</label>
<input type="text" id="captchaSolution" class="form-control" placeholder="请输入验证码,看不清请点击图片" ng-model="session.solution" required>
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="!loginForm.$valid">登录</button>
<p class='security-notice'>注:本软件不保存和传输密码给除豆瓣以外的任何组织和个人。</p>
</form>
<button class="btn btn-lg btn-primary btn-block" ng-click="importDoubanFav()" ng-show="isDoubanLogin">导入红心兆赫到我的歌单</button>
<button class="btn btn-lg btn-primary btn-block" ng-click="logoutDouban()" ng-show="isDoubanLogin">退出登录</button>
<p ng-show="isDoubanLogin">{{ status }}</p>
</div> -->
<!-- edit playlist dialog -->
<div ng-show="dialog_type==3" class="dialog-editplaylist">
<div class="form-group">
<label >标题</label>
<input type="text" class="form-control" placeholder="输入歌单名称" ng-model="dialog_playlist_title"/>
</div>
<div class="form-group">
<label >封面图片url</label>
<input type="text" class="form-control" placeholder="输入歌单名称" ng-model="dialog_cover_img_url"/>
</div>
<button class="btn btn-primary confirm-button" ng-click="editMyPlaylist(list_id)">修改歌单</button>
<button class="btn btn-default" ng-click="cancelNewDialog()">取消</button>
<div class='dialog-footer'>
<button class="btn btn-danger remove-button" ng-click="removeMyPlaylist(list_id)">删除歌单</button>
</div>
</div>
2016-04-30 14:42:45 +08:00
</div>
</div>
2016-04-30 14:42:45 +08:00
<!-- page header -->
<div class="masthead clearfix">
<div class="inner">
<img class="logo" src="images/logo.png" ng-click="showTag(2)" />
<h3 class="masthead-brand" ng-click="showTag(2)">Listen 1</h3>
2016-04-30 14:42:45 +08:00
<nav>
<ul class="nav masthead-nav">
<li ng-class="{ 'active':current_tag==2 }"><a ng-click="showTag(2)">精选歌单</a></li>
<li ng-class="{ 'active':current_tag==1 }"><a ng-click="showTag(1)">我的歌单</a></li>
2016-04-30 14:42:45 +08:00
<li ng-class="{ 'active':current_tag==3 }"><a ng-click="showTag(3)">快速搜索</a></li>
<li ng-class="{ 'active':current_tag==4 }"><a ng-click="showTag(4)">关于</a></li>
</ul>
</nav>
</div>
</div>
<!-- content page: 我的歌单 -->
<div class="site-wrapper" ng-show="current_tag==1" ng-controller="MyPlayListController">
2016-04-30 14:42:45 +08:00
<div class="site-wrapper-innerd" resize>
<div class="cover-container">
<div class="playlist" ng-init="loadMyPlaylist();">
<ul class="playlist-covers">
<li ng-repeat="i in myplaylists ">
<div class="u-cover">
<img ng-src="{{i.info.cover_img_url}}">
<a title="" class="mask" ng-click="showPlaylist(i.info.id)"></a>
2016-04-30 14:42:45 +08:00
<div class="bottom">
<span class="icon-headset"></span>
<a class="icon-play" ng-click="directplaylist(i.info.id)" title="播放"></a>
2016-04-30 14:42:45 +08:00
</div>
</div>
<p class="desc">
<a title="" ng-click="showPlaylist(i.info.id)">{{i.info.title}}</a>
2016-04-30 14:42:45 +08:00
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
2016-04-30 14:42:45 +08:00
<!-- content page: 精选歌单 -->
<div class="site-wrapper" ng-show="current_tag==2" ng-controller="PlayListController" ng-init="loadPlaylist();">
<div class="cover-container container-placeholder">
<!-- make empty placeholder div to position sidebar -->
<div class="btn-group-vertical source-list" ng-show="is_window_hidden==1">
<button type="button" class="btn btn-default" ng-class="{'active':isActiveTab(0)}" ng-click="changeTab(0)">网易</button>
<button type="button" class="btn btn-default" ng-class="{'active':isActiveTab(1)}" ng-click="changeTab(1)">虾米</button>
<button type="button" class="btn btn-default" ng-class="{'active':isActiveTab(2)}" ng-click="changeTab(2)">QQ音乐</button>
<!-- <button type="button" class="btn btn-default" ng-class="{'active':isActiveTab(3)}" ng-click="changeTab(3)" ng-show="isDoubanLogin">豆瓣</button> -->
</div>
</div>
2016-05-21 15:09:43 +08:00
<div class="site-wrapper-innerd" id="hotplaylist" resize>
2016-04-30 14:42:45 +08:00
<div class="cover-container">
<div class="playlist">
2016-05-21 15:09:43 +08:00
<div infinite-scroll='scrolling()' infinite-scroll-disabled='loading==true' infinite-scroll-container="'#hotplaylist'">
<ul class="playlist-covers">
<li ng-repeat="i in result ">
<div class="u-cover">
<img ng-src="{{i.cover_img_url}}">
<a title="" class="mask" ng-click="showPlaylist(i.id)"></a>
<div class="bottom">
<a class="icon-play" title="播放" ng-click="directplaylist(i.id)"></a>
</div>
2016-04-30 14:42:45 +08:00
</div>
<p class="desc">
<a title="{{i.title}}" ng-click="showPlaylist(i.id)">{{i.title}}</a>
</p>
</li>
<div class="loading_bottom">
2016-05-21 15:09:43 +08:00
<div class="loading" ng-show="loading">加载中...</div>
2016-04-30 14:42:45 +08:00
</div>
</ul>
2016-05-21 15:09:43 +08:00
</div>
2016-04-30 14:42:45 +08:00
</div>
</div>
</div>
</div>
<!-- content page: 快速搜索 -->
<div class="site-wrapper" ng-show="current_tag==3">
<div class="site-wrapper-innerd" resize>
<div class="cover-container">
<!-- Initialize a new AngularJS app and associate it with a module named "instantSearch"-->
<div class="searchbox" ng-controller="InstantSearchController" >
<!-- Create a binding between the searchString model and the text field -->
<input type="text" class="form-control" ng-model="keywords" placeholder="输入歌曲名,歌手或专辑" ng-model-options="{debounce: 500}" />
<ul class="nav nav-tabs">
<li ng-class="{'active':isActiveTab(0)}" ng-click="changeTab(0)"><a>网易</a></li>
<li ng-class="{'active':isActiveTab(1)}" ng-click="changeTab(1)"><a href="#">虾米</a></li>
<li ng-class="{'active':isActiveTab(2)}" ng-click="changeTab(2)"><a href="#">QQ音乐</a></li>
<li ng-class="{'active':isActiveTab(3)}" ng-click="changeTab(3)" ng-show="isDoubanLogin"><a href="#">豆瓣</a></li>
</ul>
<ul class="detail-songlist">
<li ng-repeat="song in result" ng-class-odd="'odd'" ng-class-even="'even'" ng-mouseenter="options=true" ng-mouseleave="options=false">
<div class="col2">
<a ng-if="song.disabled" class="disabled" ng-click="copyrightNotice()">{{ song.title }}</a>
<a ng-if="!song.disabled" add-and-play="song">{{ song.title }}</a>
</div>
<div class="col1 detail-artist"><a ng-click="showPlaylist(song.artist_id)">{{ song.artist }}</a></div>
<div class="col2"><a ng-click="showPlaylist(song.album_id)">{{ song.album }}</a></div>
2016-04-30 14:42:45 +08:00
<div class="detail-tools">
<a title="添加到当前播放" class="detail-add-button" add-without-play="song" ng-show="options"></a>
<a title="添加到歌单" class="detail-fav-button" ng-show="options" ng-click="showDialog(0, song)"></a>
<a title="原始链接" class="source-button" open-url="song.source_url" ng-show="options"></a>
2016-04-30 14:42:45 +08:00
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- content page: 设置 -->
<div class="site-wrapper" ng-show="current_tag==4">
<div class="site-wrapper-innerd" resize>
<div class="cover-container">
<!-- <div class="settings-title"><span>第三方登录<span></div>
<div class="settings-content">
<div ng-show="isDoubanLogin"> 豆瓣:<button class="btn btn-primary confirm-button" ng-click="showDialog(2)">已登录</button></div>
<div ng-hide="isDoubanLogin"> 豆瓣:<button class="btn btn-primary confirm-button" ng-click="showDialog(2)">登录</button> </div>
</div> -->
2016-05-13 13:12:02 +08:00
<div class="settings-title"><span>数据备份<span></div>
<div class="settings-content">
<p>重装插件或清除缓存数据会导致我的歌单数据丢失,强烈建议在这些操作前,备份我的歌单。</p>
<div>
<button class="btn btn-primary confirm-button" ng-click="backupMySettings()">下载备份文件</button>
</div>
</div>
<div class="settings-title"><span>数据恢复<span></div>
<div class="settings-content">
<p>选择备份文件,恢复我的歌单。注意:恢复我的歌单会覆盖现有的歌单。</p>
<label class="btn btn-warning" for="my-file-selector">
<input id="my-file-selector" type="file" style="display:none;" ng-model="myuploadfiles" custom-on-change="importMySettings">上传备份文件
</label>
</div>
2016-04-30 14:42:45 +08:00
<div class="settings-title"><span>关于<span></div>
<div class="settings-content">
2016-05-19 23:21:55 +08:00
<p> Listen 1 主页: <a href="http://listen1.github.io/listen1/" target="_blank"> http://listen1.github.io/listen1/ </a> </p>
2016-04-30 14:42:45 +08:00
<p> Listen 1 邮箱: githublisten1@gmail.com </p>
2016-05-19 23:21:55 +08:00
<p> 当前版本 1.1.0 (本软件基于MIT协议开源免费)</p>
2016-04-30 14:42:45 +08:00
</div>
</div>
</div>
</div>
<!-- track list window -->
<div class="site-wrapper" ng-hide="is_window_hidden==1">
<div class="cover-container container-placeholder">
<div class="detail-close">
<span ng-click="popWindow()">&times;</span>
</div>
</div>
2016-04-30 14:42:45 +08:00
<div class="site-wrapper-innerd" resize>
<div class="cover-container" >
<div class="playlist-detail">
2016-04-30 14:42:45 +08:00
<div class="detail-head">
<div class="detail-head-cover">
<img ng-src="{{ cover_img_url }}">
</div>
<div class="detail-head-title">
<h2>{{ playlist_title }}</h2>
<a title="播放歌单" class="play" ng-show="playlist_title!=''" ng-click="playMylist(list_id)">播放</a>
<a title="添加到当前播放" class="add" ng-show="playlist_title!=''" ng-click="addMylist(list_id)">添加到当前播放</a>
<a title="收藏歌单" class="clone" ng-show="playlist_title!='' && !is_mine" ng-click="clonePlaylist(list_id)">收藏</a>
<a title="编辑歌单" class="edit" ng-show="playlist_title!='' && is_mine" ng-click="showDialog(3, {list_id: list_id, playlist_title: playlist_title, cover_img_url: cover_img_url})">编辑</a>
<a title="原始链接" class="link" ng-show="playlist_title!=''" open-url="playlist_source_url">原始链接</a>
2016-04-30 14:42:45 +08:00
</div>
</div>
<ul class="detail-songlist">
<li ng-repeat="song in songs" ng-class-odd="'odd'" ng-class-even="'even'" ng-mouseenter="options=true" ng-mouseleave="options=false">
<div class="col2">
<a ng-if="song.disabled" class="disabled" ng-click="copyrightNotice()">{{ song.title }}</a>
<a ng-if="!song.disabled" add-and-play="song">{{ song.title }}</a>
</div>
<div class="col1 detail-artist"><a ng-click="showPlaylist(song.artist_id)">{{ song.artist }}</a></div>
<div class="col2"><a ng-click="showPlaylist(song.album_id)">{{ song.album }}</a></div>
2016-04-30 14:42:45 +08:00
<div class="detail-tools">
<a title="添加到当前播放" class="detail-add-button" add-without-play="song" ng-show="options"></a>
<a title="添加到歌单" class="detail-fav-button" ng-click="showDialog(0, song)" ng-show="options"></a>
<a title="从歌单删除" class="detail-delete-button" ng-click="removeSongFromPlaylist(song, list_id)" ng-show="options && is_mine=='1' "></a>
<a title="原始链接" class="source-button" open-url="song.source_url" ng-show="options"></a>
2016-04-30 14:42:45 +08:00
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- page footer -->
<div class="mastfoot" ng-controller="PlayController as playCtrl" ng-init="loadLocalSettings()">
<div class="m-playbar" >
<div class="btns">
<a class="previous" title="上一首" prev-track >上一首</a>
<a class="play" ng-class="{pas: isPlaying}" title="播放/暂停" play-pause-toggle>播放/暂停</a>
<a class="next" title="下一首" next-track>下一首</a>
</div>
<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>
2016-04-30 14:42:45 +08:00
</div>
<div class="maininfo">
<div class="words">
<a 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>
2016-04-30 14:42:45 +08:00
</span>
</span>
<a open-url="currentPlaying.source_url" class="src" title="原始链接"></a>
2016-04-30 14:42:45 +08:00
</div>
2016-05-02 20:44:52 +08:00
<div class="m-pbar play" >
<div class="barbg" id="progressbar" mode="play" draggable>
2016-04-30 14:42:45 +08:00
<!-- <div class="rdy" ng-style="{width : myProgress + '%' }"></div> -->
<div class="cur" ng-style="{width : myProgress + '%' }">
<span class="btn"><i></i></span>
</div>
</div>
2016-05-02 20:44:52 +08:00
<span class="time"><em>{{ currentPosition }}</em> <span ng-show=" currentDuration!=none ">/</span> {{ currentDuration }}</span>
2016-04-30 14:42:45 +08:00
</div>
<!-- init soundManager2 player -->
<sound-manager></sound-manager>
</div>
<div class="ctrl">
<a class="icn icn-add" ng-click="showDialog(0, currentPlaying)" title="添加到歌单">添加到歌单</a>
2016-04-30 14:42:45 +08:00
<a class="icn" ng-class="{ 'icn-shuffle': settings.playmode == 1, 'icn-loop': settings.playmode == 0 }" title="{{ settings.playmode | playmode_title }}" ng-click="changePlaymode()"></a>
<a class="icn icn-list" title="列表" ng-click="togglePlaylist()"></a>
</div>
2016-05-02 20:44:52 +08:00
<div class="volume-ctrl">
<a class="icn" ng-class="{ 'icn-vol-mute': mute, 'icn-vol': mute == false }" title="音量" ng-click="toggleMuteStatus()"></a>
<div class="m-pbar volume" >
<div class="barbg" id="volumebar" mode="volume" draggable>
<div class="cur" ng-style="{width : volume + '%' }">
<span class="btn"><i></i></span>
</div>
</div>
</div>
</div>
2016-04-30 14:42:45 +08:00
<div class="menu" ng-hide="menuHidden">
<div class="menu-header">
<span>播放列表</span>
<a clear-playlist class="remove-all"><small>(移除所有)</small></a>
<a class="close-popup" ng-click="menuHidden=!menuHidden">×</a>
2016-04-30 14:42:45 +08:00
</div>
<ul>
<li id="song{{ song.id }}" ng-repeat="song in playlist" ng-class="{ playing: currentPlaying.id == song.id }" ng-mouseenter="playlist_highlight=true" ng-mouseleave="playlist_highlight=false">
<div class="title" play-from-playlist="song"><a>{{ song.title }}</a></div>
<a class="icn-remove" remove-from-playlist="song" data-index="{{$index}}" ng-show="playlist_highlight"></a>
<div class="singer" ng-click="showPlaylist(song.artist_id)">{{ song.artist }}</div>
2016-04-30 14:42:45 +08:00
</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>
2016-04-30 14:42:45 +08:00
</div>
</div>
</div>
</body>
</html>