Moved controls from "currentTrack"-view to a modal dialog wich is acc…

…essible from every view.
nachinius · Nov 6, 2009 · 33a50ea · 33a50ea
1 parent e777e6e
commit 33a50ea
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 7 deletions.
diff --git a/amarokcontent.js b/amarokcontent.js
@@ -63,12 +63,27 @@ albumCover = function(path){
     return response;
 }
 
+/**
+ * Show dialog with controls: play, pause, stop, 
+ * next/prev track, ind/dec volume, reload.
+ */
+controlsDlg = function(path){
+	response = new HandlerResponse();
+	engineState = Amarok.Engine.engineState();
+	div = loadFile("/www/controls.html");
+	/*if(Amarok.Engine.engineState() == ENGINE_STATE_PLAY)
+        div = div.replace("###playpause###", "pause");
+    else
+        div = div.replace("###playpause###", "play");*/
+    response.append(div);
+	return response;
+}
+
 /**
  *  Send div with info about the track currently playing.
  */
 currentTrackDiv = function(path){
     response = new HandlerResponse();    
-    engineState = Amarok.Engine.engineState();
     div = loadFile("/www/currentTrack.html");
     if(engineState == ENGINE_STATE_PAUSE || engineState == ENGINE_STATE_PLAY){
         div = div.replace("###artist###", shorten(Amarok.Engine.currentTrack().artist, 18));
@@ -90,10 +105,6 @@ currentTrackDiv = function(path){
         div = div.replace("###seconds###", "");
         div = div.replace("###coverimg###", "");
     }
-    if(Amarok.Engine.engineState() == 0)/*currently playing*/
-        div = div.replace("###playpause###", "pause");
-    else
-        div = div.replace("###playpause###", "play");
     response.append(div);
     return response;
 }

diff --git a/amarokctrl.js b/amarokctrl.js
@@ -30,6 +30,16 @@ prevTrack = function(path){
     return new HandlerResponse();
 }
 
+play = function(path){
+    Amarok.Engine.Play();
+    return new HandlerResponse();
+}
+
+pause = function(path){
+    Amarok.Engine.Pause();
+    return new HandlerResponse();
+}
+
 playPause = function(path){
     if(Amarok.Engine.engineState() == 0)
         Amarok.Engine.Pause();

diff --git a/main.js b/main.js
@@ -35,6 +35,7 @@ ENGINE_STATE_PAUSE = 1
  */
 http = new HTTPServer();
 http.setDefaultHandler(fileHandler);
+http.registerHandler("/ajax/controls", controlsDlg);
 http.registerHandler("/ajax/currentTrackCover", currentTrackCover);
 http.registerHandler("/ajax/currentTrackDiv", currentTrackDiv);
 http.registerHandler("/ajax/playlistDiv", playlistDiv);
@@ -47,6 +48,8 @@ http.registerHandler("/ajax/albumCover", albumCover);
 http.registerHandler("/ajax/nextTrack", nextTrack);
 http.registerHandler("/ajax/prevTrack", prevTrack);
 http.registerHandler("/ajax/playPause", playPause);
+http.registerHandler("/ajax/play", play);
+http.registerHandler("/ajax/pause", pause);
 http.registerHandler("/ajax/stop", stop);
 http.registerHandler("/ajax/incVolume", incVolume);
 http.registerHandler("/ajax/decVolume", decVolume);

diff --git a/www/controls.html b/www/controls.html
@@ -0,0 +1,18 @@
+<form id="controls" class="dialog" action="/index.thml" selected="true">
+	<fieldset>
+		<h1>Controls</h1>
+		<a class="button leftButton" type="cancel" onclick="alert(currentPage);">Close</a>    
+		<div style="text-align:center; margin-top:15px;">
+			<img src="/btn-prev.png" style="display:inline" onClick="prevTrack();setTimeout(reloadCurrentTrack, 1000);"/>
+			<img src="/btn-play.png" style="display:inline" onClick="play();setTimeout(reloadCurrentTrack, 1000);"/>
+			<img src="/btn-pause.png" style="display:inline" onClick="pause();setTimeout(reloadCurrentTrack, 1000);"/>
+			<img src="/btn-stop.png" style="display:inline" onClick="stop();setTimeout(reloadCurrentTrack, 1000);"/>
+			<img src="/btn-next.png" style="display:inline" onClick="nextTrack();setTimeout(reloadCurrentTrack, 1000);"/>
+		</div>
+		<div style="text-align:center">
+			<img src="/btn-minus.png" style="display:inline" onClick="decVolume();"/>
+			<img src="/btn-reload.png" onClick="reloadCurrentTrack();" />
+			<img src="/btn-plus.png" style="display:inline" onClick="incVolume();"/>
+		</div>
+	</fieldset>
+</form>
diff --git a/www/currentTrack.html b/www/currentTrack.html
@@ -16,7 +16,7 @@
             <span>###minutes###:###seconds###</span>
         </div>
     </fieldset>
-	<div style="text-align:center">
+	<!--<div style="text-align:center">
 		<img src="/btn-prev.png" style="display:inline" onClick="prevTrack();setTimeout(reloadCurrentTrack, 1000);"/>
 		<img src="/btn-###playpause###.png" style="display:inline" onClick="playPause();setTimeout(reloadCurrentTrack, 1000);"/>
 		<img src="/btn-stop.png" style="display:inline" onClick="stop();setTimeout(reloadCurrentTrack, 1000);"/>
@@ -26,8 +26,11 @@
 		<img src="/btn-minus.png" style="display:inline" onClick="decVolume();"/>
 		<img src="/btn-reload.png" onClick="reloadCurrentTrack();" />
 		<img src="/btn-plus.png" style="display:inline" onClick="incVolume();"/>
-	</div>
+	</div>-->
 	<div style="margin-top: 15px; text-align: center;">
     	###coverimg###
 	</div>
+	<div style="text-align:center">
+		<img src="/btn-reload.png" onClick="reloadCurrentTrack();" />
+	</div>
 </div>
diff --git a/www/index.html b/www/index.html
@@ -21,8 +21,10 @@
                 if (req.readyState == 4) {
                     if (req.status == 200) {
                         document.getElementById(target).innerHTML = req.responseText;
+						//window.iui.replaceElementWithSource(target, req.responseText);
                     } else {
                         document.getElementById(target).innerHTML=" Error:\n"+ req.status + "\n" +req.statusText;
+						//window.iui.replaceElementWithSource(target, " Error:\n"+ req.status + "\n" +req.statusText);
                     }
                 }
             }
@@ -95,6 +97,7 @@
     <div class="toolbar">
         <h1 id="pageTitle"></h1>
         <a id="backButton" class="button" href="#"></a>
+		<a class="button" href="/ajax/controls">Controls</a>
     </div>
     <ul id="home" title="Amarok WebUI" selected="true">
        <li><a href="/ajax/currentTrackDiv">Current Track</a></li>