andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

no more siwtch to queue after playing a track, seperately scrolling playlist/tracks

Browse Source
This commit is contained in:
Wouter van Wijk 2013-02-24 21:55:30 +01:00
parent 0eaba322f0
commit 0cc9465faf
7 changed files with 93 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
webclient/css/ws.css
View File

@ -37,7 +37,7 @@
.pl-breakpoint.ui-grid-a .ui-block-a {
clear: left;
}
#playlisttablediv {
#playlisttracksdiv {
margin-left: 10px;
}
/*search*/
@ -51,6 +51,11 @@
#btcontrols {
display: none;
}
.scroll {
overflow-y: scroll;
overflow-x: hidden;
}
}
/* tablet etc */
@ -73,7 +78,7 @@
}
.srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
width: 49.5%;
}
}
}
/* phone */
@ -100,7 +105,11 @@
/*controls*/
#btcontrols {
display: block;
}
}
.scroll {
overflow-y: auto;
overflow-x: auto;
}
}
/* phone portrait */
@ -147,7 +156,7 @@
}
/**********************
* Song information
* Song information
**********************/
#infoname {
@ -199,7 +208,7 @@
#slidercontainer {
margin-top: 7px;
margin-bottom: 5px;
margin-right: 10px;
margin-right: 10px;
float: right;
}
@ -242,15 +251,19 @@
display: none;
}
#playlistspane {
padding: 2px;
}
#artistviewimage, #albumviewcover {
float: right;
heigth: 90px;
}
/*********************
* listviews
********************/
.ui-li-divider {
padding: 2px;
padding-top: 10px;
@ -267,8 +280,8 @@
}
.albumli {
padding-left: 5px;
}
padding-left: 5px;
}
.playlistactive {
background-color: #ccc;
@ -285,18 +298,25 @@
margin-right: 3px;
}
.currenttrack2 {
background-image: url('../images/icons/play_alt_8x8.png');
background-repeat: no-repeat;
background-position: 4px center;
}
.currenttrack {
background-image: url('../images/icons/play_alt_16x16.png');
background-repeat: no-repeat;
background-color: #eee;
background-position: 4px center;
background-position: 6px center;
}
.currenttrack2 a {
margin-left: 8px;
}
.currenttrack a {
margin-left: 14px;
}
/*******************
* Popups
*******************/
@ -326,7 +346,7 @@
}
/***************
* common use
* common use
***************/
a {
text-decoration: none !important;

12
webclient/index.html
View File

@ -94,7 +94,7 @@
</div>
</div>
<div data-role="header" id="header" data-position="fixed" class="ui-grid-b header-breakpoint">
<div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="ui-grid-b header-breakpoint">
<div id="controldiv" class="ui-block-a">
<span id="btback"><a href="#" onclick="return backbt();"> <img id="backimg"src="images/icons/arrow_left_alt1_24x24.png" /></a></span>
@ -119,11 +119,11 @@
</div><!-- /header -->
<div data-role="content" id="playlistspane" class="pane ui-grid-a pl-breakpoint">
<div class="ui-block-a">
<ul id="playlistslist" data-icon="false" data-inset="true" data-role="listview" data-filter="true"></ul>
<div class="ui-block-a scroll">
<ul id="playlistslist" data-icon="false" data-inset="true" data-role="listview"></ul>
</div>
<div class="ui-block-b" id="playlisttablediv">
<ul data-role="listview" data-theme="c" data-icon="false" id="playlisttable" data-inset="true" data-filter="true"></ul>
<div class="ui-block-b scroll" id="playlisttracksdiv">
<ul data-role="listview" data-theme="c" data-icon="false" id="playlisttracks" data-inset="true"></ul>
</div>
</div><!--/playlistspane-->
@ -180,7 +180,7 @@
</div>
<!-- search div -->
<div data-role="footer" data-position="fixed">
<div data-role="footer" data-tap-toggle="false" data-position="fixed">
<div data-role="navbar" data-iconpos="left">
<ul>
<li id="navplaylists">

2
webclient/js/controls.js vendored
View File

@ -29,7 +29,7 @@ function playTrack(addtobottom) {
return false;
}
switchContent('current', uri);
// switchContent('current', uri);
for (var i = 0; i < tracks.length; i++) {
if (tracks[i].uri == uri) {

21
webclient/js/functionsvars.js
View File

@ -32,6 +32,7 @@ var songlength = 0;
var artistshtml = '';
var artiststext = '';
var songname = '';
var songdata = '';
var newposition = 0;
//array of cached playlists (not only user-playlists, also search, artist, album-playlists)
@ -45,7 +46,7 @@ PROGRAM_NAME = 'MusicBox';
//PROGRAM_NAME = 'Mopidy';
ARTIST_TABLE = '#artiststable';
ALBUM_TABLE = '#albumstable';
PLAYLIST_TABLE = '#playlisttable';
PLAYLIST_TABLE = '#playlisttracks';
CURRENT_PLAYLIST_TABLE = '#currenttable';
SEARCH_ALL_TABLE = '#allresulttable';
SEARCH_ALBUM_TABLE = '#albumresulttable';
@ -69,7 +70,7 @@ function scrollToTop() {
}
function scrollToTracklist() {
var divtop = $("#playlisttablediv").offset().top - 25;
var divtop = $("#playlisttracksdiv").offset().top - 25;
$('body,html').animate({
scrollTop : divtop
}, 250);
@ -209,15 +210,15 @@ function resultsToTables(results, target, uri) {
}
//process updated playlist to gui
function playlisttotable(pl, table, uri) {
function playlisttotable(pl, target, uri) {
var tmp = '';
$(table).html('');
$(target).html('');
var targetmin = target.substr(1);
var child = '';
for (var i = 0; i < pl.length; i++) {
popupData[pl[i].uri] = pl[i];
child = '<li id="' + pl[i].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';
child = '<li id="' + targetmin + '-' + pl[i].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';
child += '<h1>' + pl[i].name + "</h1>";
child += '<p>';
child += '<span style="float: right;">' + timeFromSeconds(pl[i].length / 1000) + '</span>';
@ -238,13 +239,13 @@ function playlisttotable(pl, table, uri) {
tmp += child;
};
$(table).html(tmp);
$(table).attr('data', uri);
$(target).html(tmp);
$(target).attr('data', uri);
//create (for new tables)
// $(table).listview().trigger("create");
// $(target).listview().trigger("create");
//refresh
$(table).listview('refresh');
$(target).listview('refresh');
}
function getPlaylistFromUri(uri) {

46
webclient/js/gui.js
View File

@ -24,7 +24,7 @@ function expandSonginfo() {
}
function resizeSonginfo() {
$("#infoname").html(songname);
$("#infoname").html(songdata.name);
$("#infoartist").html(artiststext);
//bug in truncate?
var spanwidth = $("#infoartist").width() - 38;
@ -44,10 +44,14 @@ function resizeSonginfo() {
}
function setSongInfo(data) {
if (data) {
songdata = data;
} else {
data = songdata;
}
artistshtml = '';
artiststext = '';
songname = data.name;
if (songname == '') {
if (data.name == '') {
return;
};
@ -63,7 +67,7 @@ function setSongInfo(data) {
if (data.album) {
$("#modalalbum").html('Album: <a href="#" onclick="return showAlbum(\'' + data.album.uri + '\');">' + data.album.name + '</a>');
}
$("#modalname").html(songname);
$("#modalname").html(data.name);
getCover(artiststext, data.album.name, '#infocover, #controlspopupimage', 'extralarge');
var arttmp = 'Artist';
@ -79,12 +83,37 @@ function setSongInfo(data) {
$("#songlength").html(timeFromSeconds(data.length / 1000));
resizeSonginfo();
$('#currenttable li').each(function() {
$(this).removeClass("currenttrack");
if (this.id == 'currenttable-' + data.uri) {
$(this).addClass('currenttrack');
}
});
$('#playlisttracks li').each(function() {
$(this).removeClass("currenttrack2");
if (this.id == 'playlisttracks-' + data.uri) {
$(this).addClass('currenttrack2');
}
});
$('#trackresulttable li').each(function() {
$(this).removeClass("currenttrack2");
if (this.id == 'trackresulttable-' + data.uri) {
$(this).addClass('currenttrack2');
}
});
$('#artiststable li').each(function() {
$(this).removeClass("currenttrack2");
if (this.id == 'trackresulttable-' + data.uri) {
$(this).addClass('currenttrack2');
}
});
$('#albumstable li').each(function() {
$(this).removeClass("currenttrack2");
if (this.id == 'trackresulttable-' + data.uri) {
$(this).addClass('currenttrack2');
}
});
}
/***************
@ -248,12 +277,12 @@ function initSocketevents() {
$(document).ready(function() {
//$(document).bind("pageinit", function() {
//check for websockets
if(!window.WebSocket) {
if (!window.WebSocket) {
switchContent("playlists");
$('#playlistspane').html('<h2>Old Browser</h2><p>Sorry. Your browser isn\'t modern enough for this webapp. Modern versions of Chrome, Firefox, Safari all will do. Maybe Opera and Internet Explorer 10 also work, but it\'s not tested.</p>');
$('#playlistspane').html('<h2>Old Browser</h2><p>Sorry. Your browser isn\'t modern enough for this webapp. Modern versions of Chrome, Firefox, Safari all will do. Maybe Opera and Internet Explorer 10 also work, but it\'s not tested.</p>');
exit;
}
$(window).hashchange();
// Connect to server
@ -284,8 +313,11 @@ $(document).ready(function() {
$("#btback").hide();
}
$('.scroll').height($(window).height() - 100);
$(window).resize(function() {
resizeSonginfo();
$('.scroll').height($(window).height() - 100);
});
});

3
webclient/js/library.js
View File

@ -85,6 +85,7 @@ function processSearchResults(resultArr) {
$('#expandsearch').show();
playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
setSongInfo();
showLoading(false);
}
@ -111,7 +112,7 @@ function getCurrentPlaylist() {
********************************************************/
function showTracklist(uri) {
$(PLAYLIST_TABLE).empty();
$('#playlisttablediv').show();
$('#playlisttracksdiv').show();
showLoading(true);
var pl = getPlaylistFromUri(uri);

6
webclient/js/process_ws.js
View File

@ -86,8 +86,7 @@ function processGetTracklist(resultArr) {
var newplaylisturi = resultArr.uri;
playlists[newplaylisturi] = resultArr;
resultsToTables(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
// playlisttotable(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
// $('#playlistloader').hide();
setSongInfo();
showLoading(false);
scrollToTracklist();
}
@ -111,6 +110,7 @@ function processArtistResults(resultArr) {
var artistname = getArtist(resultArr);
$('#h_artistname, #artistpopupname').html(artistname);
getArtistImage(artistname, '#artistviewimage, #artistpopupimage', 'extralarge');
setSongInfo();
showLoading(false);
}
@ -127,6 +127,6 @@ function processAlbumResults(resultArr) {
$('#coverpopupalbumname').html(albumname);
$('#coverpopupartist').html(artistname);
getCover(artistname, albumname, '#albumviewcover, #coverpopupimage', 'extralarge');
setSongInfo();
showLoading(false);
// $('#albumsloader').hide();
}