added cue_select(), fixed bug with regions drawing incorrectly on first index, hue...

diff --git a/app.js b/app.js
index 7ad9d4cb679a43715d21d8e799adc42db7f12365..921806668f04a1d508c8bfbe39a603e94a0f96bc 100644 (file)
--- a/app.js
+++ b/app.js
@@ -40,6 +40,12 @@ document.addEventListener('DOMContentLoaded', function(){
     //fs.writeFile();
 //}
 
+function cue_select(i) {
+    const all_regions = wsr.getRegions();
+    active_region = all_regions[i];
+    active_region.play();
+}
+
 function get_time_string(running_sec) {
 
     const hrs = Math.floor(running_sec / 3600);
@@ -60,7 +66,7 @@ function add_1_region() {
     //console.log("adding a region with id", num_regions);
 
     wsr.addRegion({
-        channelIdx: num_regions, 
+        channelIdx: num_regions + 1, 
         content: "region" + num_regions + "text",
         id: 'region',
         start: gen[0], 
@@ -72,39 +78,48 @@ function add_1_region() {
 }
 
 function add_3_regions() {
+    let percent_hue = new Number();
+
 
     for(let i = 1; i < 4; i++){
 
         const gen = gen_region_startend();
-        let percent_lum = Math.random() * 100.0;
+        //let percent_lum = Math.random() * 100.0;
+        percent_hue = Math.floor(Math.random() * 100.0);
+        //const test_string = 'hsla(' + percent_hue + ', 100%, 50%, 0.1)';
+        num_regions++;
 
         wsr.addRegion({
-            channelIdx: i, 
-            content: "region" + i + "text",
+            channelIdx: num_regions + 1,
+            content: "region" + num_regions + "text",
             id: 'region',
             start: gen[0], 
             end: gen[1], 
             loop: false, 
-            color: 'hsla(200, 100%, ' + percent_lum + '%, 0.1)'
+           // color: 'hsla(' + percent_hue + '%, 100%, 50%, 0.1)'
+            color: 'hsla(' + percent_hue + ', 100%, 50%, 0.1)'
         });
 
-        num_regions++;
     }
 }
 
 function add_region_at_time(time){
     num_regions++;
-    const percent_lum = Math.random() * 100.0;
+    //const percent_lum = Math.random() * 100.0;
+    let percent_hue = Math.floor(Math.random() * 100.0);
+    const test_string = 'hsla(' + percent_hue + ', 100%, 50%, 0.1)';
+    console.log("test string: ", test_string);
 
     wsr.addRegion({
-        channelIdx: num_regions, 
+        channelIdx: num_regions + 1, 
         content: "region" + num_regions + "text",
         //id: "cue " + i, 
         id: 'region',
         start: time, 
         end: time + global_dur, 
         loop: false, 
-        color: 'hsla(184, 32%, ' + percent_lum + '%, 0.1)'
+        color: test_string
+        //color: 'hsla(' + percent_hue + '%, 100%, 50%, 0.1)'
     });
 }
 
@@ -141,14 +156,45 @@ function marker_view_reset(){
 //
 
 //localStorage read/write/clear/etc
-function localstorage_get() {
-    return JSON.stringify(localStorage);
+function localstorage_post() {
+    console.log(JSON.stringify(localStorage));
 }
 
-function localstorage_write(data) {
-    Object.keys(data).forEach( function(key) { 
-        localStorage.setItem(key, data[key])
+//NOTE: does not upload any audio files.  
+//Audio is exclusively contained to your local machine, and is populated via drag-and-drop operation
+function file_write_to_server() {}
+function file_read_from_server() {}
+
+function localstorage_write() {
+    const all_regions = wsr.getRegions(); 
+    
+    all_regions.forEach(function (region) {
+        const key = region.channelIdx;
+        const value = region.content;
+        localStorage.setItem(key, value);
+        console.log("storing", key, "with a value of", value);
     });
+
+}
+
+function localstorage_read(file) {
+    //set num_regions var here
+    let inc = 0;
+    localStorage.clear();
+    //some sort of initialization for program needed here
+    const ls_json = JSON.stringify(localStorage);
+
+    for(var key in localStorage) {
+        let data = window.localStorage.getItem(key);
+        //set some local variable
+        inc++;
+    }
+
+    num_regions = inc;
+
+    console.log("reading", ls_json);
+
+
 }
 
 //-------------------------------------------------------------
@@ -159,8 +205,8 @@ function initialize(){
 
     ws = WaveSurfer.create({
         container: '#waveform',
-        waveColor: 'hsla(184, 32%, 72%, 0.5)',
-        progressColor: 'hsla(184, 0%, 72%, 0.5)',
+        waveColor: 'hsla(0, 0%, 12%, 0.8)',
+        progressColor: 'hsla(0, 0%, 25%, 0.5)',
         url: filepath
         /*
         , plugins: [
@@ -173,18 +219,36 @@ function initialize(){
     //wsr = window.WaveSurfer.regions;
     wsr = ws.registerPlugin(WaveSurfer.Regions.create())
 
+    const wf = document.getElementById("waveform");
+
+    //append a div for the display of percentage loaded
+    const percent_elem = document.createElement("div");
+    percent_elem.id = "percent";
+    percent_elem.align = "center";
+    wf.appendChild(percent_elem);
+
     ws.on('ready', function (){
         console.log("wavesurfer ready.");
     });
 
     //put a text element over the ws while this is loading
     ws.on('loading', (percent) => {
-        console.log('loading', percent, '%');
+        //console.log('loading', percent, '%');
+        if(percent < 100){
+            percent_elem.innerHTML = `<h1>${percent}%</h2>`;
+        } else {
+            const perc = document.getElementById("percent");
+            if(perc !== null){
+                wf.removeChild(perc);
+            }
+        }
+
     });
 
     ws.on('click', (relativeX) => {
+        ws.pause();
         ws.seekTo(relativeX);
-        ws.play();
+        //ws.play();
         buttons_reset();
         marker_view_reset();
     });
@@ -202,7 +266,6 @@ function initialize(){
             if(looping === true) {
                 active_region.play();
             }
-                
         }
     });
 
@@ -219,22 +282,22 @@ function initialize(){
         e.stopPropagation();
         active_region = region;
 
-        active_region.loop = looping;
+        //active_region.loop = looping;
         active_region.play();
-
-        //this doesn't work as far as I can tell
-        //region.play(region.start, region.end);
+        //this doesn't work as far as I can tell: region.play(region.start, region.end)
         buttons_reset();
         text_input.value = region.content.innerHTML;
-        //curr_region = region.channelIdx; //zero-based
-
-
         console.log("----------------------------------------------------------");
         console.log("a region with id", region.channelIdx, "was clicked.");
         console.log("region range:", region.start, region.end);
         //console.log("this region's text:", region.content.innerHTML);
     });
 
+    wsr.on('region-out', (region) => {
+        //e.stopPropagation();
+        console.log("region-out detected from" + region.channelIdx + "...  try to implement a loop function here");
+    });
+
     //key events -----------------------------------------------------------------
     //
 
@@ -268,7 +331,9 @@ function initialize(){
             clicked: false, 
             call_action: function(){
                 btn_r_reset();
+                cue_select(i);
                 //console.log('recall button', i, 'clicked');
+
             },
         };
         btn_r.push(temp);
@@ -337,6 +402,14 @@ function initialize(){
             call_action: function () {
                 add_1_region();
             }
+        }, 
+        {
+            id: "save", 
+            text: "save your work",
+            clicked: false,
+            call_action: function () {
+                localstorage_write();
+            },
         }
     ];
 }
@@ -492,18 +565,9 @@ function buttons_make() {
 
     //marker text
     text_butt.addEventListener('mousedown', () => {
+
         console.log("the text entered was", text_input.value);
 
-/*
-        let valid;
-        if(active_region != null){
-            valid = true;
-        } else {
-            valid = false;
-        }
-        console.log("is active region valid?:", valid);
-        */
-        
         if(active_region != null){
             console.log("found active region; populating...");
             active_region.content.innerHTML = text_input.value;
@@ -511,6 +575,7 @@ function buttons_make() {
         
         text_butt.classList.add('clicked');
     });
+
     text_butt.addEventListener('mouseup', () => {
         text_butt.classList.remove('clicked');    
     });