#19 progress bar is clickable

bobbyrne01 · bobbyrne01 · commit ef211854589f · 2015-02-04T10:57:13.000Z
diff --git a/addon/data/html/FrameView.html b/addon/data/html/FrameView.html
@@ -4,13 +4,14 @@
 <head>
 	<meta charset="UTF-8" />
 	<link rel="stylesheet" type="text/css" media="all" href="../css/FrameStyle.css" />
-	<script src="../js/FrameController.js"></script>
 	<title>Local Music Player</title>
 </head>
 
 <body>
 	<progress id="frameProgressBar" class="progressBarWidth" value="0" max="1"></progress>
 	<label id="frameCurrentTrack"></label>
+
+	<script src="../js/FrameController.js"></script>
 </body>
 
 </html>
diff --git a/addon/data/js/FrameController.js b/addon/data/js/FrameController.js
@@ -6,12 +6,26 @@ window.addEventListener("message", function (event) {
 
 		document.getElementById('frameCurrentTrack').textContent = payload.value;
 
-	} else if (payload.operation === 'updateProgressBar'){
-		
+	} else if (payload.operation === 'updateProgressBar') {
+
 		document.getElementById('frameProgressBar').value = payload.value;
-	}else {
-		
+	} else {
+
 		document.getElementById('frameCurrentTrack').textContent = '';
 	}
 
 }, false);
+
+document.getElementById('frameProgressBar').addEventListener('click', function (e) {
+
+	var x = e.pageX - this.offsetLeft,
+		y = e.pageY - this.offsetTop,
+		clickedValue = x * this.max / this.offsetWidth;
+
+	var payload = JSON.stringify({
+		operation: 'updateAudioBar',
+		value: clickedValue
+	});
+
+	window.parent.postMessage(payload, "*");
+});
diff --git a/addon/data/js/PanelController.js b/addon/data/js/PanelController.js
@@ -39,9 +39,9 @@ var LocalMusicPlayer = {
 		};
 		document.getElementById("player").ontimeupdate = function () {
 			self.port.emit(
-					'updateProgressBar', 
-					document.getElementById("player").currentTime / 
-					document.getElementById("player").duration);
+				'updateProgressBar',
+				document.getElementById("player").currentTime /
+				document.getElementById("player").duration);
 		};
 		document.getElementById('stopTrack').addEventListener('click', LocalMusicPlayer.stop);
 		document.getElementById('prevTrack').addEventListener('click', LocalMusicPlayer.prevTrack);
@@ -445,6 +445,11 @@ self.port.on('playTrack', function () {
 	}
 });
 
+self.port.on('updateAudioBar', function (value) {
+
+	document.getElementById('player').currentTime = value * document.getElementById("player").duration;
+});
+
 self.port.on('pauseTrack', function () {
 	LocalMusicPlayer.pause();
 });
diff --git a/addon/lib/Panel.js b/addon/lib/Panel.js
@@ -81,13 +81,13 @@ exports.init = function () {
 		Toolbar.getFrame().postMessage(payload, Toolbar.getFrame().url);
 		Toolbar.setPlaying(true);
 	});
-	
+
 	panel.port.on("updateProgressBar", function (value) {
 		var payload = JSON.stringify({
 			operation: 'updateProgressBar',
 			value: value
 		});
-		Toolbar.getFrame().postMessage(payload, Toolbar.getFrame().url)
+		Toolbar.getFrame().postMessage(payload, Toolbar.getFrame().url);
 	});
 
 	panel.port.on("pause", function () {
diff --git a/addon/lib/Toolbar.js b/addon/lib/Toolbar.js
@@ -66,6 +66,8 @@ exports.init = function () {
 		url: Data.get("html/FrameView.html")
 	});
 
+	frameObject.on("message", updateAudioBar);
+
 	repeatAll = ActionButton({
 		id: "localmusicplayer-repeatAll",
 		label: Localisation.getString("repeatAll_title"),
@@ -143,3 +145,12 @@ exports.setRandom = function (value) {
 		random.badge = "";
 	}
 };
+
+function updateAudioBar(e) {
+
+	var payload = JSON.parse(e.data);
+
+	if (payload.operation === "updateAudioBar") {
+		Panel.get().port.emit('updateAudioBar', payload.value);
+	}
+}
