From c55389a3ffbf7499cd9dd49f210c38c24ab340ec Mon Sep 17 00:00:00 2001 From: Trevor Squillario Date: Wed, 22 Feb 2012 18:16:42 -0500 Subject: [PATCH] .021 added sidebar for chat and now playing, bug fixes --- README | 1 + images/arrow_left_gl_12x12.png | Bin 0 -> 213 bytes images/arrow_right_gl_12x12.png | Bin 0 -> 199 bytes images/comment_stroke_gl_12x11.png | Bin 0 -> 263 bytes index.html | 175 ++++++++++++++++------------- js/app.js | 142 ++++++++++------------- style/Style.css | 85 +++++++++++--- 7 files changed, 223 insertions(+), 180 deletions(-) create mode 100644 images/arrow_left_gl_12x12.png create mode 100644 images/arrow_right_gl_12x12.png create mode 100644 images/comment_stroke_gl_12x11.png diff --git a/README b/README index 96a16c7..51e6a6f 100644 --- a/README +++ b/README @@ -20,6 +20,7 @@ External Subsonic Music Player 1/9/2012 .018 added media keyboard bindings from @itchy 1/18/2012 .019 rating support, random playlist, new preferences added 1/25/2012 .020 table layout for songs, bug fixes, display tweaks +2/22/2012 .021 added sidebar for chat and now playing, bug fixes TO DO: (In no particular order...) - Jukebox Control diff --git a/images/arrow_left_gl_12x12.png b/images/arrow_left_gl_12x12.png new file mode 100644 index 0000000000000000000000000000000000000000..5619aabef7afbdb7211bb559809a82fe5c12e491 GIT binary patch literal 213 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1G<(@8%Ar-fhQXH69Ut1&25cIq8hf{<{g3>M1Sg~cjf3lV#UB> zNA@)byAI1M@b*c}QxjMtG3!BH1DBPP=t0v5TN-aHVH8MU;FL7^dGd{UBG3s8p00i_ I>zopr014?tbN~PV literal 0 HcmV?d00001 diff --git a/images/arrow_right_gl_12x12.png b/images/arrow_right_gl_12x12.png new file mode 100644 index 0000000000000000000000000000000000000000..fae3d98fccd1aedc065d9957da254a4cae969c00 GIT binary patch literal 199 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1GnVv3=Ar-fhQVuYMt&Oyo_mE`Rm>l8pfIY?1O{PnD!5!`w zvm`Exa5Jp@8*o{2L*}70<~ZLT2iD&kE1Vg8nPY^xCln+o@HOzN7x&FC{1#zR48LeVqLLEk^4%Dz;VHhL##Q+n0e>&FA;KJGj^O?$S^%gfZ>!X z(@J&+nFB1MyH7YsG?*9|7z*%= 700) { + $('.tabcontent').css({ 'width': tabwidth + 'px' }); + } + var sbheight = $(window).height() - 160; + $('#SideBar').css({ 'height': sbheight + 'px' }); + $('#ChatMsgs').css({ 'height': (sbheight - 270) + 'px' }); + } else { + var tabwidth = $(window).width() - 11; + if (tabwidth >= 700) { + $('.tabcontent').css({ 'width': tabwidth + 'px' }); + } + } + var tabwidth = $('.tabcontent').width(); + $('#AlbumContainer, #TrackContainer, #CurrentPlaylistContainer').css({ 'width': (tabwidth - smwidth - 30) + 'px' }); + $('#CurrentPlaylistContainer').css({ 'width': (tabwidth - 30) + 'px' }); } function resizeSMSection(x) { var smwidth = $('.smsection').width(); @@ -644,31 +654,21 @@ $('#AutoAlbumSize').val($.cookie('AutoAlbumSize')); $('#AutoPlaylistSize').val($.cookie('AutoPlaylistSize')); $('#SubDirectory').val($.cookie('subdirectory')); + $('#ApplicationName').val($.cookie('applicationname')); }); -
+
+ Reset + Save +
-
+





-
-
-
-
- Save - Reset
-
-
-
- *For custom installations
-
- Save -
-
  • Keyboard Shortcuts
    • @@ -679,10 +679,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -701,19 +726,7 @@
- - -
- Chat - Now Playing - -
- +
diff --git a/js/app.js b/js/app.js index a7ea6fd..f345145 100644 --- a/js/app.js +++ b/js/app.js @@ -6,6 +6,12 @@ if ($.cookie('subdirectory')) { } else { baseURL = location.protocol + '//' + location.host + '/rest'; } +var applicationName; +if ($.cookie('applicationname')) { + applicationName = $.cookie('applicationname'); +} else { + applicationName = 'MiniSub'; +} var username = $.cookie('username'); var password = $.cookie('password'); var auth = makeBaseAuth(username, password); @@ -38,7 +44,7 @@ function loadArtists(refresh) { if (content == "") { // Load Artist List $.ajax({ - url: baseURL + '/getIndexes.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getIndexes.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -86,58 +92,20 @@ function loadArtists(refresh) { }); } } -function getAlbums(id, appendto) { +function getAlbums(id, action, appendto) { $.ajax({ - url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + id, + url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + id, method: 'GET', dataType: 'json', beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, success: function (data) { - $("#AlbumRows").empty(); - if (data["subsonic-response"].directory.child != undefined) { - // There is a bug in the API that doesn't return a JSON array for one artist - var children = []; - if (data["subsonic-response"].directory.child.length > 0) { - children = data["subsonic-response"].directory.child; - } else { - children[0] = data["subsonic-response"].directory.child; - } - - var rowcolor; - var albumhtml; - $.each(children, function (i, child) { - if (i % 2 == 0) { - rowcolor = 'even'; - } else { - rowcolor = 'odd'; - } - albumhtml = generateAlbumHTML(rowcolor, child.id, child.parent, child.coverArt, child.title, child.artist, child.userRating); - $(albumhtml).appendTo("#AlbumRows"); - }); - var header = generateAlbumHeaderHTML(); - $("#AlbumHeader").html(header); - } - } - }); -} -function getSongs(id, artistid, action, appendto) { - $.ajax({ - url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + id, - method: 'GET', - dataType: 'json', - beforeSend: function (req) { - req.setRequestHeader('Authorization', auth); - }, - success: function (data) { - if (appendto == '#AlbumRows' && action == '') { + if (action == '') { $('#AlbumRows').empty(); - var header = generateSongHeaderHTML(); - $("#AlbumHeader").html(header); } if (action == 'autoplay') { - $('#CurrentPlaylistContainer').empty(); + $('#CurrentPlaylistContainer tbody').empty(); } if (data["subsonic-response"].directory.child != undefined) { // There is a bug in the API that doesn't return a JSON array for one artist @@ -150,27 +118,31 @@ function getSongs(id, artistid, action, appendto) { var rowcolor; var albumhtml; + var isDir; $.each(children, function (i, child) { if (i % 2 == 0) { rowcolor = 'even'; } else { rowcolor = 'odd'; } - var track; - if (child.track === undefined) { track = " "; } else { track = child.track; } - var time = secondsToTime(child.duration); - albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']); - /* - if (appendto == '#AlbumRows') { - if (i == 0) { - //var backhtml = '« Back to ' + child.artist + ''; - var backhtml = '' + child.artist + ''; - $("#BreadCrumb").html($(backhtml)); - } + isDir = child.isDir; + if (isDir == true) { + albumhtml = generateAlbumHTML(rowcolor, child.id, child.parent, child.coverArt, child.title, child.artist, child.userRating); + } else { + var track; + if (child.track === undefined) { track = " "; } else { track = child.track; } + var time = secondsToTime(child.duration); + albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']); } - */ $(albumhtml).appendTo(appendto); }); + if (appendto == '#AlbumRows' && isDir == true) { + var header = generateAlbumHeaderHTML(); + } + if (appendto == '#AlbumRows' && isDir == false) { + var header = generateSongHeaderHTML(); + } + $("#AlbumHeader").html(header); if (action == 'autoplay') { autoPlay(); } @@ -186,7 +158,7 @@ function getAlbumListBy(id) { size = $.cookie('AutoAlbumSize'); } $.ajax({ - url: baseURL + '/getAlbumList.view?v=1.6.0&c=subweb&f=json&size=' + size + '&type=' + id, + url: baseURL + '/getAlbumList.view?v=1.6.0&c=' + applicationName + '&f=json&size=' + size + '&type=' + id, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -234,7 +206,7 @@ function getRandomSongList(action, appendto) { size = $.cookie('AutoPlaylistSize'); } $.ajax({ - url: baseURL + '/getRandomSongs.view?v=1.5.0&c=subweb&f=json&size=' + size, + url: baseURL + '/getRandomSongs.view?v=1.6.0&c=' + applicationName + '&f=json&size=' + size, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -295,7 +267,7 @@ function generateAlbumHTML(rowcolor, childid, parentid, coverart, title, artist, html += ''; } html += ''; - html += ''; + html += ''; html += '' + title + ''; html += '' + artist + ''; html += ''; @@ -321,7 +293,7 @@ function generateSongHTML(rowcolor, childid, parentid, track, title, artist, alb html += '' + track + ''; html += '' + title + ''; html += '' + artist + ''; - html += '' + album + ''; + html += '' + album + ''; html += '' + m + ':' + s + ''; html += ''; return html; @@ -342,7 +314,7 @@ function refreshRowColor() { var scrobbled = false; function playSong(el, songid, albumid) { $.ajax({ - url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + albumid, + url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + albumid, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -365,10 +337,9 @@ function playSong(el, songid, albumid) { $('#songdetails_song').attr('parentid', albumid); $('#songdetails_song').attr('childid', songid); $('#songdetails_artist').html(artist + ' - ' + album); - //$('#songdetails_artist').html('« Back to ' + artist + ''); - $('#coverartimage').attr('href', baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&id=' + songid); - $('#coverartimage img').attr('src', baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&size=56&id=' + songid); - audio.load(baseURL + '/stream.view?v=1.6.0&c=subweb&f=json&id=' + songid); + $('#coverartimage').attr('href', baseURL + '/getCoverArt.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid); + $('#coverartimage img').attr('src', baseURL + '/getCoverArt.view?v=1.6.0&c=' + applicationName + '&f=json&size=56&id=' + songid); + audio.load(baseURL + '/stream.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid); audio.play(); $('table.songlist tr.song').removeClass('playing'); $(el).addClass('playing'); @@ -382,7 +353,7 @@ function playSong(el, songid, albumid) { function scrobbleSong(submission) { var songid = $('#songdetails_song').attr('childid'); $.ajax({ - url: baseURL + '/scrobble.view?v=1.6.0&c=subweb&f=json&id=' + songid + "&submission=" + submission, + url: baseURL + '/scrobble.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid + "&submission=" + submission, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -397,7 +368,7 @@ function scrobbleSong(submission) { } function rateSong(songid, rating) { $.ajax({ - url: baseURL + '/setRating.view?v=1.6.0&c=subweb&f=json&id=' + songid + "&rating=" + rating, + url: baseURL + '/setRating.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid + "&rating=" + rating, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -452,7 +423,7 @@ function autoPlay() { } function search(type, query) { $.ajax({ - url: baseURL + '/search2.view?v=1.6.0&c=subweb&f=json&query=' + query, + url: baseURL + '/search2.view?v=1.6.0&c=' + applicationName + '&f=json&query=' + query, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -493,7 +464,7 @@ function search(type, query) { var starttime; function loadChatMessages() { $.ajax({ - url: baseURL + '/getChatMessages.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getChatMessages.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -520,10 +491,10 @@ function loadChatMessages() { } var updater; function updateChatMessages() { - updater = $.periodic({ period: 2000, decay: 1.5, max_period: 1800000 }, function () { + updater = $.periodic({ period: 1000, decay: 1.5, max_period: 1800000 }, function () { $.ajax({ periodic: this, - url: baseURL + '/getChatMessages.view?v=1.6.0&c=subweb&f=json&since=' + starttime, + url: baseURL + '/getChatMessages.view?v=1.6.0&c=' + applicationName + '&f=json&since=' + starttime, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -554,16 +525,20 @@ function updateChatMessages() { starttime = msg.time; } }); + $("#ChatMsgs").attr({ scrollTop: $("#ChatMsgs").attr("scrollHeight") }); } } }); }); } +function stopUpdateChatMessages() { + updater.cancel(); +} function addChatMessage(msg) { $.ajax({ type: 'POST', url: baseURL + '/addChatMessage.view', - data: { v: "1.5.0", c: "subweb", f: "json", message: msg }, + data: { v: "1.6.0", c: applicationName, f: "json", message: msg }, beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, @@ -577,10 +552,10 @@ function addChatMessage(msg) { var updaterNowPlaying; var updaterNowPlayingData; function updateNowPlaying() { - updaterNowPlaying = $.periodic({ period: 2000, decay: 1.5, max_period: 1800000 }, function () { + updaterNowPlaying = $.periodic({ period: 4000, decay: 1.5, max_period: 1800000 }, function () { $.ajax({ periodic: this, - url: baseURL + '/getNowPlaying.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getNowPlaying.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -622,6 +597,9 @@ function updateNowPlaying() { }); }); } +function stopUpdateNowPlaying() { + updaterNowPlaying.cancel(); +} function loadPlaylists(refresh) { if (refresh) { @@ -631,7 +609,7 @@ function loadPlaylists(refresh) { if (content == "") { // Load Playlists $.ajax({ - url: baseURL + '/getPlaylists.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getPlaylists.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -654,7 +632,7 @@ function loadPlaylists(refresh) { function loadPlaylistsForMenu(menu) { $('#' + menu).empty(); $.ajax({ - url: baseURL + '/getPlaylists.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getPlaylists.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -676,7 +654,7 @@ function newPlaylist() { var reply = prompt("Choose a name for your new playlist.", ""); if (reply) { $.ajax({ - url: baseURL + '/createPlaylist.view?v=1.6.0&c=subweb&f=json&name=' + reply, + url: baseURL + '/createPlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&name=' + reply, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -690,7 +668,7 @@ function newPlaylist() { } function deletePlaylist(id) { $.ajax({ - url: baseURL + '/deletePlaylist.view?v=1.6.0&c=subweb&f=json&id=' + id, + url: baseURL + '/deletePlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + id, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -718,7 +696,7 @@ function addToPlaylist(playlistid, from) { // Get songs from playlist var currentsongs = []; $.ajax({ - url: baseURL + '/getPlaylist.view?v=1.6.0&c=subweb&f=json&id=' + playlistid, + url: baseURL + '/getPlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + playlistid, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -749,7 +727,7 @@ function addToPlaylist(playlistid, from) { $.ajax({ type: 'POST', url: baseURL + '/createPlaylist.view', - data: { v: "1.5.0", c: "subweb", f: "json", playlistId: playlistid, songId: currentsongs }, + data: { v: "1.6.0", c: applicationName, f: "json", playlistId: playlistid, songId: currentsongs }, beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, @@ -768,7 +746,7 @@ function addToPlaylist(playlistid, from) { $.ajax({ type: 'POST', url: baseURL + '/createPlaylist.view', - data: { v: "1.5.0", c: "subweb", f: "json", name: 'New Playlist', songId: selected }, + data: { v: "1.6.0", c: applicationName, f: "json", name: 'New Playlist', songId: selected }, beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, @@ -799,7 +777,7 @@ function savePlaylist(playlistid) { $.ajax({ type: 'POST', url: baseURL + '/createPlaylist.view', - data: { v: "1.5.0", c: "subweb", f: "json", playlistId: playlistid, songId: songs }, + data: { v: "1.6.0", c: applicationName, f: "json", playlistId: playlistid, songId: songs }, beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, @@ -813,7 +791,7 @@ function savePlaylist(playlistid) { } function getPlaylist(id, action, appendto) { $.ajax({ - url: baseURL + '/getPlaylist.view?v=1.6.0&c=subweb&f=json&id=' + id, + url: baseURL + '/getPlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + id, method: 'GET', dataType: 'json', beforeSend: function (req) { diff --git a/style/Style.css b/style/Style.css index b6678ae..cb7b98b 100644 --- a/style/Style.css +++ b/style/Style.css @@ -89,11 +89,13 @@ img } .tabcontent { + min-height: 400px; + min-width: 700px; } .smsection { width: 200px; - min-height: 200px; + min-height: 360px; padding: 0 0 40px 0; float: left; overflow-y: auto; @@ -108,7 +110,7 @@ img { height: 100%; width: 100%; - min-height: 200px; + min-height: 400px; overflow: auto; background: #fff; border: 1px solid #cbcbcb; @@ -119,7 +121,7 @@ img height: 100%; width: 100%; min-width: 450px; - min-height: 200px; + min-height: 400px; overflow: auto; background: #fff; border: 1px solid #cbcbcb; @@ -129,14 +131,9 @@ img { padding: 5px; } -.nosection -{ - height: 100%; - margin: 5px 5px 0 5px; -} .subsection { - margin: 5px 10px; + margin: 15px 20px; } .subsection small { @@ -311,7 +308,7 @@ table.songlist tr.album td.albumart img { margin: 5px 10px 0 10px; padding: 2px; - border: 1px solid #F0F0F0; + border: 1px solid #DEDEDE; } table.songlist tr.album a.play { @@ -395,7 +392,7 @@ table.songlist tr.song td.album } table.songlist tr.song td.album img { - border: 1px solid #F0F0F0; + border: 1px solid #DEDEDE; display: block; float: left; margin: 0 5px; @@ -458,14 +455,21 @@ table.songlist tr.song a.favorite } table.songlist tr.playing { - background: url('../images/play_alt_16x16.png') 6px 10px no-repeat #DEEBFA; + background-color: #DEEBFA; +} +table.songlist tr.playing td:first-child +{ + background: url('../images/play_alt_16x16.png') 6px 10px no-repeat; } table.songlist tr.selected { color: #f2f2f2; - background: url('../images/check_8x7.png') 10px 16px no-repeat; - background-color: #4B95E5; border-bottom: 1px solid #73ABE7; + background-color: #4B95E5; +} +table.songlist tr.selected td:first-child +{ + background: url('../images/check_8x7.png') 10px 16px no-repeat; } /* tablesorter style */ table.tablesorter { @@ -507,12 +511,17 @@ table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSo background-color: #8dbdd8; } +#ArtistContainer +{ + min-height: 360px; +} #BottomContainer { border-top: 1px solid #F2F2F2; background: #fff; position: fixed; height: 43px; + width: 184px; } #BottomContainer ul { @@ -571,10 +580,33 @@ background-color: #8dbdd8; width: 220px; text-align: right; } -#ChatMsgs +#SideBar +{ + display: none; + width: 200px; + position: fixed; + top: 78px; + right: 4px; + background: none repeat scroll 0 0 #FFFFFF; + border: 1px solid #CBCBCB; + min-height: 400px; +} +#SideBar .header { padding: 5px; + font-size: 12px; + color: #545454; + font-variant: small-caps; + font-weight: bold; +} +#ChatMsgs +{ + border-bottom: 1px solid #F2F2F2; + padding: 5px; + margin: 0 0 2px; text-align: right; + overflow-y: auto; + overflow-x: hidden; } #ChatMsgs .msg { @@ -594,6 +626,10 @@ background-color: #8dbdd8; font-size: 9px; color: #CAD0D7; } +#Chat .submit +{ + padding: 0 2px; +} #submenu_NowPlaying { left: 605px; @@ -603,10 +639,18 @@ background-color: #8dbdd8; width: 220px; text-align: right; } +#NowPlaying +{ + border-bottom: 1px solid #F2F2F2; + margin: 2px 0; +} #NowPlayingList { + height: 150px; padding: 5px; text-align: right; + overflow-y: auto; + overflow-x: hidden; } #NowPlayingList .msg { @@ -679,7 +723,7 @@ background-color: #8dbdd8; margin: 2px 0 2px 0; float: left; padding: 2px; - border: 1px solid #F0F0F0; + border: 1px solid #DEDEDE; } #songdetails { @@ -710,7 +754,7 @@ ul.preferences { list-style-type: none; padding: 0; - margin: 5px; + margin: 0 5px; } ul.preferences li { @@ -723,6 +767,7 @@ ul.preferences li.title font-weight: bold; font-size: 14px; font-variant: small-caps; + padding: 0; } ul.preferences li span { @@ -800,6 +845,12 @@ input.large width: 180px; margin: 5px; } +input.chat +{ + border: 1px solid #ffffff; + width: 150px; + margin: 5px; +} select { font-family: Calibri, Arial, Verdana;