added transport cue selector and play_cue button feature

diff --git a/app.js b/app.js
index 6bf84eb4428a2a7a71530a8845d18246c4859fc3..219b5863456490ab8ac52011f843317ad2537648 100644 (file)
--- a/app.js
+++ b/app.js
@@ -1,16 +1,15 @@
-const num_storage_slots = 16;
 const skip_factor = 0.5;
 let wf_nregions = 1;
 let global_dict = new Object();
 let active_region, was_clicked = null;
 let global_dur = 3.0;
 let text_input, text_butt, timevalues;
-let btn_r = [];
 let btn_tp = [];
 let btn_misc = [];
 let ws, wsr;
 let sep_window;
 let looping, in_region;
+let cue_value = 0;
 
 //index 0: wavesurfer instances
 //index 1: ws regions
@@ -242,13 +241,12 @@ function clear_regions() {
 
 function buttons_reset() {
     btn_tp_reset();
-    btn_r_reset();
     btn_m_reset();
 }
 
 function region_view_reset(){
     active_region = null;
-    text_update("<no region active>");
+    text_update(" ");
 }
 
 function text_update(text_string) {
@@ -405,7 +403,7 @@ function localstorage_restore() {
 //Initialization
 
 function audio_load(a_path) {
-    
+
     ws = WaveSurfer.create({
         container: '#wsurfer',
         progressColor: 'rgb(150,150,150)',
@@ -717,21 +715,6 @@ function initialize() {
 
     //interface data--------------------------------------------------------------
     //
-    
-    //generate cue marker section
-    for(let i = 0; i < num_storage_slots; i++){
-        let temp = {
-            id: "button-" + i, 
-            text: (i + 1), 
-            clicked: false, 
-            call_action: function(){
-                btn_r_reset();
-                cue_region(i);
-                console.log('recall button', i, 'clicked');
-            },
-        };
-        btn_r.push(temp);
-    }
 
     btn_tp = [
         {
@@ -878,20 +861,6 @@ function btn_tp_reset() {
     });
 }
 
-//try to abstract this to be one function
-function btn_r_reset() {
-
-    btn_r.forEach((button, index) => {
-
-        btn_r[index].clicked = false;
-        const elem = document.getElementById(button.id);
-        
-        if (elem) {
-            elem.classList.remove("clicked");
-        }
-
-    });
-}
 
 function btn_m_reset() {
     //console.log('btn_m_reset() called');
@@ -906,14 +875,53 @@ function btn_m_reset() {
     });
 }
 
+function update_cue_val(){
+    const idval = document.getElementById('incdec_val');
+    idval.textContent = cue_value;
+}
+
 function buttons_make() {
 
     const cont_tp = document.getElementById("container_tp");
-    const cont_cue = document.getElementById("container_cue");
     const cont_misc = document.getElementById("container_misc");
     
     //transport button area -----------------------------------------------
     //
+    //transport -> cue region area ----------------------------------------
+    
+    const incbutt = document.getElementById('increment');
+    const decbutt = document.getElementById('decrement');
+
+    incbutt.addEventListener('click', () => {
+        cue_value++;
+        update_cue_val();
+    });
+
+    decbutt.addEventListener('click', () => {
+        if(cue_value > 0) { 
+            cue_value--;
+            update_cue_val();
+        }
+    });
+
+    const cueplay = document.createElement("div");
+    cueplay.id = "cueplay";
+    cueplay.clicked = false;
+    cueplay.classList.add("buttons");
+    cueplay.innerHTML = '<h2>play cue</h2>';
+
+    cueplay.addEventListener('click', () => {
+        if (cue_value != 0) {
+            cue_region(cue_value - 1); 
+        } else {
+            console.error("cannot play cue; no valid selection made");
+        }
+    });
+
+    cont_tp.appendChild(cueplay);
+
+    //transport: normal buttons -------------------------------------------
+    
     btn_tp.forEach((button) => {
         const button_elem = document.createElement("div");
 
@@ -959,28 +967,7 @@ function buttons_make() {
     timevalues = timedisp.firstChild;
     cont_tp.appendChild(timedisp);
 
-    //cue region area -----------------------------------------------------
-    btn_r.forEach((button) => {
-
-        const button_elem = document.createElement("div");
-
-        button_elem.id = button.id;
-        button_elem.classList.add("buttons");
-        button_elem.innerHTML = `<h2>${button.text}</h2>`;
-
-        button_elem.addEventListener("click", () => {
-
-            if (!button.clicked) {
-                btn_r_reset();
-                button.clicked = true;
-                button.call_action();
-                button_elem.classList.add("clicked");
-            }
-
-        });
-
-        cont_cue.appendChild(button_elem);
-    });
+    
 
     //misc button area ----------------------------------------------------
     //
@@ -1011,8 +998,6 @@ function buttons_make() {
         cont_misc.appendChild(button_elem);
     });
 
-    
-
     //region properties
     const check = document.getElementById("loop");