truncated text of songinfo

css/ws.css

@@ -150,20 +150,22 @@ div {
 }
 
 #songinfo {
-    overflow: hidden;
-    margin-left: auto;
-    margin-right: auto;
+    overflow: hidden; 
     margin-top: 5px;
+/*    border: 1px solid white; */
 }
 
 #infoname {
+    overflow: hidden; 
     font: bold;
     color: #ddd;
     font-size: 14px;
     text-shadow: 1px 1px #555;
+/*    border: 1px solid white;  */
 }
 
 #infoartist {
+    overflow: hidden; 
     color: #aaa;
     font-size: 11px;
     text-shadow: 1px 1px #333;

index.html

@@ -30,7 +30,7 @@
 		<!--[if lt IE 9]>
 		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 		<![endif]-->
-		<script type="text/javascript" src="/mopidy/mopidy.min.js"></script>
+		<script type="text/javascript" src="/mopidy/mopidy.js"></script>
 
 	</head>
 
@@ -73,10 +73,10 @@
 -->
 						</div>
 	
-						<div id="songinfo" class="nav nav-collapse span4">
-							<span id="infoname"></span>
+						<div id="songinfo" class="nav nav-collapse span5" onclick="expandSonginfo();">
+							<span  class="nav nav-collapse span5" id="infoname"></span>
 							<br/>
-							<span id="infoartist"></span>
+							<span  class="nav nav-collapse span5" id="infoartist"></span>
 							<br/>
 						</div>					
 
@@ -254,15 +254,17 @@
 		<script src="js/bootstrap-typeahead.js"></script>
 
 		<script src="js/jquery.ba-hashchange.min.js"></script>
+		<script src="js/jquery.truncate.min.js"></script>
 
-                <!-- Import WS JavaScript Libraries. -->
-  <!--              <script type="text/javascript" src="js/swfobject.js"></script>
-                <script type="text/javascript" src="js/web_socket.js"></script>
-  -->
 		<script src="js/functionsvars.js"></script>
 		<script src="js/ws.js"></script>
 		<script src="js/gui.js"></script>
 
 	</body>
 </html>
+script src="js/ws.js"></script>
+		<script src="js/gui.js"></script>
+
+	</body>
+</html>
 html>

js/functionsvars.js

@@ -23,6 +23,10 @@ var seekTimer;
 var initgui = true;
 var currentpos = 0;
 
+var artistshtml = '';
+var artiststext = '';
+var songname = '';
+
 //array of cached playlists (not only user-playlists, also search, artist, album-playlists)
 var playlists = '';
 var currentplaylist;

js/gui.js

@@ -57,19 +57,44 @@ function resetSong() {
     setSongInfo(data);
 }
 
+function expandSonginfo() {
+    
+}
+
+function resizeSonginfo () {
+    $("#infoname").html(songname);
+
+    $("#infoartist").html(artistshtml);
+
+    if( (artiststext.length > 68) || ( data["name"].length > 90)) {
+        $("#infoartist").html(artiststext);
+        //bug in truncate?
+        var spanwidth = $("#infoartist").width() - 1;
+        $("#infoname").truncate({    width: spanwidth,    token: '…',    center: true,    multiline: false});
+        $("#infoartist").truncate({    width: spanwidth,    token: '…',    center: true,    multiline: false});
+    }
+}
+
 function setSongInfo(data) {
     console.log(data);
-    $("#infoname").html(data["name"]);
-    var artists = '';
+
+    artistshtml = '';
+    artiststext = '';
+    songname = data["name"];
+
     for (var j = 0; j < data["artists"].length; j++) {
-        artists += '<a href="#" onclick="return showartist(\'' + data["artists"][j].uri + '\');">' + data["artists"][j].name + '</a>';
+        artistshtml += '<a href="#" onclick="return showartist(\'' + data["artists"][j].uri + '\');">' + data["artists"][j].name + '</a>';
+        artiststext += data["artists"][j].name;
         if (j != data["artists"].length - 1) {
-            artists += ', ';
+            artistshtml += ', ';
+            artiststext += ', ';
         }
     }
+    
     $("#trackslider").attr("max", data["length"]);
-    $("#infoartist").html(artists);
     $("#songlength").html(timeFromSeconds(data["length"] / 1000));
+
+    resizeSonginfo();
     
     $('#currenttable tr .name').each(  
         function() {
@@ -292,8 +317,11 @@ function initSocketevents() {
         getCurrentPlaylist();
         updateStatusOfAll();
         getPlaylists();
-                $(window).hashchange();
+        $(window).hashchange();
+    });
 
+    mopidy.on("state:offline", function () {
+        resetSong();
     });
 
     mopidy.on("event:trackPlaybackStarted", function (data) {
@@ -304,6 +332,7 @@ function initSocketevents() {
     });
 
     mopidy.on("event:trackPlaybackPaused", function (data) {
+        setSongInfo(data.tl_track.track);
         pauseTimer();
         setPlayState(false);
     });
@@ -451,7 +480,7 @@ $(document).ready(function() {
         if (location.hash.length < 2) {
              switchContent("playlists");
         }
-  
+//  $("#songinfo").resize(resizeSonginfo());
   initgui = false;
 //update gui every x seconds from mopdidy
 //  setInterval(updateStatusOfAll, 5000);

js/jquery.truncate.min.js

@@ -0,0 +1 @@
+(function(a){function b(a){return!isNaN(parseFloat(a))&&isFinite(a)}function c(a,b,d,e,f,g,h,i){var j,k,l;return i?(j=e===0?"":d.slice(-e),k=d.slice(-f)):(j=d.slice(0,e),k=d.slice(0,f)),b<g.html(h)[a]()?0:g.html(k+h)[a]()<g.html(j+h)[a]()?f:(l=parseInt((e+f)/2,10),j=i?d.slice(-l):d.slice(0,l),g.html(j+h),g[a]()===b?l:(g[a]()>b?f=l-1:e=l+1,c(a,b,d,e,f,g,h,i)))}a.fn.truncate=function(d){var e={width:"auto",token:"&hellip;",center:!1,addclass:!1,addtitle:!1,multiline:!1};return d=a.extend(e,d),this.each(function(){var e=a(this),f={fontFamily:e.css("fontFamily"),fontSize:e.css("fontSize"),fontStyle:e.css("fontStyle"),fontWeight:e.css("fontWeight"),"font-variant":e.css("font-variant"),"text-indent":e.css("text-indent"),"text-transform":e.css("text-transform"),"letter-spacing":e.css("letter-spacing"),"word-spacing":e.css("word-spacing"),display:"none"},g=e.text(),h=a("<span/>").css(f).html(g).appendTo("body"),i=h.width(),j=b(d.width)?d.width:e.width(),k="width",l,m,n;d.multiline?(h.width(e.width()),k="height",m=h.height(),n=e.height()+1):(m=i,n=j),m>n&&(h.text(""),d.center?(n=parseInt(n/2,10)+1,l=g.slice(0,c(k,n,g,0,g.length,h,d.token,!1))+d.token+g.slice(-1*c(k,n,g,0,g.length,h,"",!0))):l=g.slice(0,c(k,n,g,0,g.length,h,d.token,!1))+d.token,d.addclass&&e.addClass(d.addclass),d.addtitle&&e.attr("title",g),e.empty().append(l)),h.remove()})}})(jQuery);