Various: Added playback progress indicator for audio files (CDR, VM, etc).

themes/enhanced/template.php

@@ -1171,6 +1171,12 @@ legend {
 
 /* operator panel styles end */
 
+SPAN.playback_progress_bar {
+	background-color: #c43e42;
+	height: 1px;
+	display: inline-block;
+	}
+
 </style>
 
 <script type="text/javascript">
@@ -1294,6 +1300,9 @@ legend {
 	var recording_audio;
 
 	function recording_play(recording_id) {
+		if (document.getElementById('recording_progress_bar_'+recording_id)) {
+			document.getElementById('recording_progress_bar_'+recording_id).style.display='';
+		}
 		recording_audio = document.getElementById('recording_audio_'+recording_id)
 
 		if (recording_audio.paused) {
@@ -1307,8 +1316,21 @@ legend {
 	}
 
 	function recording_reset(recording_id) {
+		if (document.getElementById('recording_progress_bar_'+recording_id)) {
+			document.getElementById('recording_progress_bar_'+recording_id).style.display='none';
+		}
 		document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play; ?>";
 	}
+
+	function update_progress(recording_id) {
+		recording_audio = document.getElementById('recording_audio_'+recording_id);
+		var recording_progress = document.getElementById('recording_progress_'+recording_id);
+		var value = 0;
+		if (recording_audio.currentTime > 0) {
+			value = Math.floor((100 / recording_audio.duration) * recording_audio.currentTime);
+		}
+		recording_progress.style.width = value + "%";
+	}
 </script>
 
 </head>

themes/minimized/template.php

@@ -1165,6 +1165,12 @@ legend {
 
 /* operator panel styles end */
 
+SPAN.playback_progress_bar {
+	background-color: #c43e42;
+	height: 1px;
+	display: inline-block;
+	}
+
 </style>
 
 <script type="text/javascript">
@@ -1307,20 +1313,36 @@ legend {
 	var recording_audio;
 
 	function recording_play(recording_id) {
+		if (document.getElementById('recording_progress_bar_'+recording_id)) {
+			document.getElementById('recording_progress_bar_'+recording_id).style.display='';
+		}
 		recording_audio = document.getElementById('recording_audio_'+recording_id)
 
 		if (recording_audio.paused) {
 			recording_audio.play();
-			document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo str_replace("class='list_control_icon'", "class='list_control_icon' style='opacity: 1;'", $v_link_label_pause)?>";
+			document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo str_replace("class='list_control_icon'", "class='list_control_icon' style='opacity: 1;'", $v_link_label_pause); ?>";
 		}
 		else {
 			recording_audio.pause();
-			document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play?>";
+			document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play; ?>";
 		}
 	}
 
 	function recording_reset(recording_id) {
-		document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play?>";
+		if (document.getElementById('recording_progress_bar_'+recording_id)) {
+			document.getElementById('recording_progress_bar_'+recording_id).style.display='none';
+		}
+		document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play; ?>";
+	}
+
+	function update_progress(recording_id) {
+		recording_audio = document.getElementById('recording_audio_'+recording_id);
+		var recording_progress = document.getElementById('recording_progress_'+recording_id);
+		var value = 0;
+		if (recording_audio.currentTime > 0) {
+			value = Math.floor((100 / recording_audio.duration) * recording_audio.currentTime);
+		}
+		recording_progress.style.width = value + "%";
 	}
 </script>