CDR: Added new HTML5 recording playback and download controls.

themes/enhanced/config.php

@@ -5,5 +5,8 @@
 	$v_link_label_add = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_add.png' class='list_control_icon'>";
 	$v_link_label_delete = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_delete.png' class='list_control_icon'>";
 	$v_link_label_view = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_view.png' class='list_control_icon'>";
+	$v_link_label_play = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_play.png' class='list_control_icon'>";
+	$v_link_label_pause = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_pause.png' class='list_control_icon'>";
+	$v_link_label_download = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_download.png' class='list_control_icon'>";
 
 ?>

themes/enhanced/template.php

@@ -209,7 +209,7 @@ td {
 td.list_control_icons {
 	/* multiple icons exist (horizontally) */
 	padding: none;
-	padding-left: 3px;
+	padding-left: 2px;
 	width: 50px;
 	text-align: right;
 	vertical-align: top;
@@ -432,6 +432,16 @@ table.tr_hover tr:hover td a {
 	padding: 5px 7px;
 }
 
+.row_style2 {
+	border-bottom: 1px solid #c5d1e5;
+	background-color: #fff;
+	color: #000;
+	text-align: left;
+	padding: 0 0 0 2px;
+	width: 42px;
+	white-space: nowrap;
+}
+
 .row_stylebg {
 	border-bottom: 1px solid #b9c5d8;
 	background-color: #f0f2f6;
@@ -1065,6 +1075,31 @@ legend {
 	}
 </script>
 
+<script type='text/javascript'>
+	// preload images
+	img_play = new Image();	img_play.src = "<?=$v_link_label_play?>";
+	img_pause = new Image(); img_pause.src = "<?=$v_link_label_pause?>";
+
+	var recording_audio;
+
+	function recording_play(recording_id) {
+		recording_audio = document.getElementById('recording_audio_'+recording_id)
+
+		if (recording_audio.paused) {
+			recording_audio.play();
+			document.getElementById('recording_button_'+recording_id).innerHTML = "<?=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 = "<?=$v_link_label_play?>";
+		}
+	}
+
+	function recording_reset(recording_id) {
+		document.getElementById('recording_button_'+recording_id).innerHTML = "<?=$v_link_label_play?>";
+	}
+</script>
+
 </head>
 
 <?php

themes/minimized/config.php

@@ -1,9 +1,12 @@
 <?php
 
 //define the link labels
-	$v_link_label_edit = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_edit.png' class='list_control_icon'>";
-	$v_link_label_add = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_add.png' class='list_control_icon'>";
-	$v_link_label_delete = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_delete.png' class='list_control_icon'>";
-	$v_link_label_view = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_view.png' class='list_control_icon'>";
+	$v_link_label_edit = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_edit.png' class='list_control_icon'>";
+	$v_link_label_add = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_add.png' class='list_control_icon'>";
+	$v_link_label_delete = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_delete.png' class='list_control_icon'>";
+	$v_link_label_view = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_view.png' class='list_control_icon'>";
+	$v_link_label_play = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_play.png' class='list_control_icon'>";
+	$v_link_label_pause = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_pause.png' class='list_control_icon'>";
+	$v_link_label_download = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_download.png' class='list_control_icon'>";
 
 ?>

themes/minimized/template.php

@@ -209,7 +209,7 @@ td {
 td.list_control_icons {
 	/* multiple icons exist (horizontally) */
 	padding: none;
-	padding-left: 3px;
+	padding-left: 2px;
 	width: 50px;
 	text-align: right;
 	vertical-align: top;
@@ -432,6 +432,16 @@ table.tr_hover tr:hover td a {
 	padding: 5px 7px;
 }
 
+.row_style2 {
+	border-bottom: 1px solid #c5d1e5;
+	background-color: #fff;
+	color: #000;
+	text-align: left;
+	padding: 0 0 0 2px;
+	width: 42px;
+	white-space: nowrap;
+}
+
 .row_stylebg {
 	border-bottom: 1px solid #b9c5d8;
 	background-color: #f0f2f6;
@@ -1079,6 +1089,31 @@ legend {
 	}
 </script>
 
+<script type='text/javascript'>
+	// preload images
+	img_play = new Image();	img_play.src = "<?=$v_link_label_play?>";
+	img_pause = new Image(); img_pause.src = "<?=$v_link_label_pause?>";
+
+	var recording_audio;
+
+	function recording_play(recording_id) {
+		recording_audio = document.getElementById('recording_audio_'+recording_id)
+
+		if (recording_audio.paused) {
+			recording_audio.play();
+			document.getElementById('recording_button_'+recording_id).innerHTML = "<?=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 = "<?=$v_link_label_play?>";
+		}
+	}
+
+	function recording_reset(recording_id) {
+		document.getElementById('recording_button_'+recording_id).innerHTML = "<?=$v_link_label_play?>";
+	}
+</script>
+
 </head>
 
 <?php