From ce86ce45302d4b87c24aa2c055e896232582b65d Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 21 Apr 2017 19:45:14 +1200
Subject: [PATCH] Red buttons to unload recordings

---
 scripts/system/html/css/record.css | 16 +++++++++-------
 scripts/system/html/js/record.js   | 20 ++++++++++----------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/scripts/system/html/css/record.css b/scripts/system/html/css/record.css
index a061f56128..0351fafa95 100644
--- a/scripts/system/html/css/record.css
+++ b/scripts/system/html/css/record.css
@@ -29,7 +29,7 @@ body {
     height: 100%;
     position: relative;
     box-sizing: border-box;
-    padding: 50px 0 186px 0;
+    padding: 51px 0 185px 0;
     margin: 0 21px 0 21px;
 }
 
@@ -85,15 +85,17 @@ body {
     border-top: 1px solid #1c1c1c;
 }
 
-#recordings-list tr td:last-child span {
-    font-family: HiFi-Glyphs;
-    font-size: 24px;
-    height: 24px;
+#recordings-list input {
+    height: 22px;
+    width: 22px;
+    min-width: 22px;
+    font-size: 16px;
+    padding: 0 1px 0 0;
 }
 
 #recordings tfoot {
     position: absolute;
-    bottom: 161px;
+    bottom: 159px;
     left: 0;
     width: 100%;
     box-sizing: border-box;
@@ -203,7 +205,7 @@ body {
 }
 
 #record-controls #checkbox-container {
-    margin-top: 33px;
+    margin-top: 31px;
 }
 
 #record-controls div.property {
diff --git a/scripts/system/html/js/record.js b/scripts/system/html/js/record.js
index 12a95dce5f..318c17c1f3 100644
--- a/scripts/system/html/js/record.js
+++ b/scripts/system/html/js/record.js
@@ -41,7 +41,7 @@ var isUsingToolbar = false,
     FINISH_ON_OPEN_ACTION = "finishOnOpen";
 
 function stopPlayingRecording(event) {
-    var playerID = event.target.getElementsByTagName("input")[0].value;
+    var playerID = event.target.getAttribute("playerID");
     EventBridge.emitWebEvent(JSON.stringify({
         type: EVENT_BRIDGE_TYPE,
         action: STOP_PLAYING_RECORDING_ACTION,
@@ -61,33 +61,33 @@ function updateRecordings() {
     var tbody,
         tr,
         td,
-        span,
         input,
         ths,
         tds,
         length,
         i,
-        HIFI_GLYPH_CLOSE_SMALL = "C";
+        HIFI_GLYPH_CLOSE = "w";
 
     recordingsBeingPlayed.sort(orderRecording);
 
     tbody = document.createElement("tbody");
     tbody.id = "recordings-list";
 
+
+    // <tr><td>Filename</td><td><input type="button" class="glyph red" value="w" playerID=id /></td></tr>
     for (i = 0, length = recordingsBeingPlayed.length; i < length; i += 1) {
         tr = document.createElement("tr");
         td = document.createElement("td");
         td.innerHTML = recordingsBeingPlayed[i].filename.slice(4);
         tr.appendChild(td);
         td = document.createElement("td");
-        span = document.createElement("span");
-        span.innerHTML = HIFI_GLYPH_CLOSE_SMALL;
-        span.addEventListener("click", stopPlayingRecording);
         input = document.createElement("input");
-        input.setAttribute("type", "hidden");
-        input.setAttribute("value", recordingsBeingPlayed[i].playerID);
-        span.appendChild(input);
-        td.appendChild(span);
+        input.setAttribute("type", "button");
+        input.setAttribute("class", "glyph red");
+        input.setAttribute("value", HIFI_GLYPH_CLOSE);
+        input.setAttribute("playerID", recordingsBeingPlayed[i].playerID);
+        input.addEventListener("click", stopPlayingRecording);
+        td.appendChild(input);
         tr.appendChild(td);
         tbody.appendChild(tr);
     }