fix disable/enable letterDelay input update

dependencies hashes:
openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501
ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3
ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239
ofxVariableLab 0b5f9bdebc1e5550621957e73c040c258ec6317b
ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8
theatre 86d3e07f6f2c75fd6e08fca8c97e3617c9e23b18

bin/em/variabletime/web/css/theatre.css

@@ -734,3 +734,8 @@ li.layerMover div.selected svg circle {
 .color_preview{
     border: none !important;
 }
+
+input:disabled {
+    background: darkgrey;
+    color: lightgrey;
+}

bin/em/variabletime/web/js/audio.js

@@ -167,6 +167,11 @@ const Audio = function(tp, record) {
         }
     };
 
+    const updateAudioMappingEvent = (type, layerID, propTitle, options) => {
+        const e = new CustomEvent('updateAudioMapping', {type, layerID, propTitle, options});
+        tp.getPanel().dispatchEvent(e);
+    };
+
     // potentially recursive
     const addAudioMapping = (layer, propTitle, options = false) => {
         if (!options) {
@@ -178,6 +183,7 @@ const Audio = function(tp, record) {
                     const subPropTitle = `${propTitle}.${subPropKey}`;
                     isGood = addAudioMapping(layer, subPropTitle, o[subPropKey]) ? isGood : false; 
                 });
+                updateAudioMappingEvent('addAudioMapping', layer.id(), propTitle, options);
                 return isGood;
             }
         }
@@ -186,6 +192,7 @@ const Audio = function(tp, record) {
         }
         if (!mapping[layer.id()].hasOwnProperty(propTitle)) {
             mapping[layer.id()][propTitle] = options;
+            updateAudioMappingEvent('addAudioMapping', layer.id(), propTitle, options);
             return true;
         } else {
             // already there
@@ -194,6 +201,7 @@ const Audio = function(tp, record) {
                 fixColor(mapping[layer.id()][propTitle].max_out);
                 fixColor(mapping[layer.id()][propTitle].value);
             }
+            updateAudioMappingEvent('addAudioMapping', layer.id(), propTitle, options);
             return false;
         }
     };
@@ -206,6 +214,7 @@ const Audio = function(tp, record) {
                 });
                 delete mapping[layerID];
             });
+            updateAudioMappingEvent('removeAudioMapping', false, false, false);
             return true;
         }
         if (!mapping.hasOwnProperty(layer.id())) {
@@ -220,6 +229,7 @@ const Audio = function(tp, record) {
         if (Object.keys(mapping[layer.id()]).length === 0) {
             delete mapping[layer.id()];
         }
+        updateAudioMappingEvent('removeAudioMapping', layer.id(), propTitle, false);
         return true;
     }
 
@@ -229,10 +239,10 @@ const Audio = function(tp, record) {
             config
             .layer.letterDelayProps
             .indexOf(propTitle.split('.')[0]) >= 0
-                && mapping[layer.id()][`letterDelays.${propTitle}`] === 'undefined' // if the letterDelay is mapped itself, we don't do it
                 //&& propTitle.indexOf('color') < 0
                 //&& !tp.isSequenced(propTitle)
         ;
+        let isLetterDelayMapped = typeof mapping[layer.id()][`letterDelays.${propTitle}`] === 'undefined'; // if the letterDelay is mapped itself, we don't do it
         let isSequenced = tp.isSequenced(propTitle, layer);
         const panel = tp.getPanel();
         if (!areMutationsObserved) {
@@ -250,6 +260,8 @@ const Audio = function(tp, record) {
         audioOptions.style.order = parseInt(container.style.order) + 1;
 
         const updateMappingOptions = () => {
+            isSequenced = tp.isSequenced(propTitle, layer);
+            isLetterDelayMapped = typeof mapping[layer.id()][`letterDelays.${propTitle}`] !== 'undefined'; // if the letterDelay is mapped itself, we don't do it
             if (propTitle === 'color') {
                 mappingOptions.min_out = hexaToRgba(panel.querySelector(toCssClass(`audio_min${propTitle}`,'#')).value);
                 const max_cssClass = toCssClass(`audio_max${propTitle}`,'#');
@@ -267,14 +279,25 @@ const Audio = function(tp, record) {
             mappingOptions.smoothing = parseFloat(s);
             if (hasLetterDelay) {
                 const ld = panel.querySelector(toCssClass(`audio_letterDelay${propTitle}`, '#'));
+                if (isLetterDelayMapped) {
+                    ld.setAttribute('disabled', 'disabled');
+                    ld.setAttribute('title', 'disabled, as the letterDelay is audioreactive (scroll down)');
+                } else {
+                    ld.removeAttribute('title');
+                    ld.removeAttribute('disabled');
                     mappingOptions.letterDelay = typeof ld.value === 'number' ? ld.value : parseInt(ld.value);
                     if (isSequenced) {
                         const prop = getNestedProperty(layer.theatreObject.props.letterDelays, propTitle.split('.'));
-                    tp.studio.transaction(({set}) => {
+                        console.log('updateMAppingOptions', prop, propTitle.split('.'));
+                        alert('supposed to update for', propTitle.split('.'));
+                        tp.studio.transaction(({
+                            set
+                        }) => {
                             set(prop, mappingOptions.letterDelay);
                         });
                     }
                 }
+            }
             mappingOptions.source = panel.querySelector(toCssClass(`audio_source${propTitle}`,'#')).value;
             mappingOptions.muted = panel.querySelector(toCssClass(`audio_mute${propTitle}`,'#')).checked;
 
@@ -677,6 +700,11 @@ const Audio = function(tp, record) {
         container.after(audioOptions);
 
         canvasCombos[propTitle] = [fft_imgDom, fft_imgDom.getContext("2d"), layer.id()];
+
+
+        tp.getPanel().addEventListener('updateAudioMapping', () => {
+            updateMappingOptions();
+        });
         updateMappingOptions();
         return audioOptions;
     };