recording notice, default mapping range

assets/template.html

@@ -359,6 +359,12 @@
      <div class="details"><p></p></div>
    </div>
  </div>
+ <div id="notice_recording">
+   <div class="content">
+     <div class="what"><p>recording</p></div>
+     <div class="details"><p>please wait</p></div>
+   </div>
+ </div>
  <!-- MIDI BEGIN -->
  <div id="midiController">
     <div class="midiMessages"></div>

bin/web/css/demo.css

@@ -223,6 +223,29 @@ body.debug div:not(.centerLine) {
 #notice .content .details p {
     color: black;
 }
+#notice_recording {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.1);
+    z-index: 2000;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    font-family: "Tonka";
+    font-variation-settings: 'wght' 500;
+    font-size: 0.8em;
+    pointer-events: none;
+}
+#notice_recording.visible {
+    display: flex;
+}
+#notice_recording.impenetrable {
+    pointer-events: all;
+    background-color: rgba(0,0,0,0.5);
+}
 
 .exporterChild * {
     font-family: "Tonka";

bin/web/js/audio.js

@@ -50,6 +50,9 @@ const Audio = function(tp, record) {
     const mutationObserver = new MutationObserver(function(e) {
         if (e[0].removedNodes) {
             e[0].removedNodes.forEach((n) => {
+                if (typeof n === 'object' &&
+                    n.hasOwnProperty('hasAttribute') &&
+                    n.hasOwnProperty('querySelectorAll')) {
                     if (n.hasAttribute('data-propTitle')) {
                         const propTitle = n.getAttribute('data-propTitle');
                         delete canvasCombos[propTitle];
@@ -62,6 +65,7 @@ const Audio = function(tp, record) {
                             });
                         }
                     }
+                }
             });
         }
     });
@@ -85,24 +89,68 @@ const Audio = function(tp, record) {
         return true;
     };
 
+    const getDefaultRange = (layer, propTitle) => {
+        if (config.audio.defaultRange.hasOwnProperty(propTitle)) {
+            return config.audio.defaultRange[propTitle];
+        } else if (propTitle.indexOf('width') === 0) {
+            return [
+                getArtboard().theatreObject.value.width / 2,
+                getArtboard().theatreObject.value.width
+            ];
+        } else if (propTitle.indexOf('y') === 0) {
+            return [
+                0,
+                getArtboard().theatreObject.value.height / 2
+            ];
+        } else if (propTitle.indexOf('x') === 0) {
+            return [
+                0,
+                getArtboard().theatreObject.value.width / 2
+            ];
+        } else if (propTitle.indexOf('y') === 0) {
+            return [
+                0,
+                getArtboard().theatreObject.value.height / 2
+            ];
+        } else if (propTitle.indexOf('letterDelay') === 0) {
+            return [
+                config.audio.defaultRange.letterDelay[0],
+                config.audio.defaultRange.letterDelay[1]
+            ];
+        } else if (propTitle.split('.')[0] === 'fontVariationAxes') {
+            return layer.props.fontVariationAxes
+                .props[propTitle.split('.')[1]].range;
+        }
+    };
+
     const getAudioMappingOptions = (layer, propTitle) => {
         if (propTitle === 'color') {
+            const mm = getDefaultRange(layer, 'color');
             if (config.audio.colorSeparateRGBA) {
                 const r = new AudioMappingOptions();
+                r.min_out = mm[0];
+                r.max_out = mm[1];
                 const g = new AudioMappingOptions();
+                g.min_out = mm[0];
+                g.max_out = mm[1];
                 const b = new AudioMappingOptions();
+                b.min_out = mm[0];
+                b.max_out = mm[1];
                 const a = new AudioMappingOptions();
+                a.min_out = mm[0];
+                a.max_out = mm[1];
                 return [{r}, {g}, {b}, {a}];
             } else {
-                const rgba = new AudioMappingOptions();
+                const o = new AudioMappingOptions();
-                rgba.min_out = {r: 0, b: 0, g: 0, a: 0};
+                o.min_out = {r: mm[0], b: mm[0], g: mm[0], a: mm[0]};
-                rgba.max_out = {r: 1, b: 1, g: 1, a: 1};
+                o.max_out = {r: mm[1], b: mm[1], g: mm[1], a: mm[1]};
-                return rgba;
+                return o;
             }
         } else {
             const o = new AudioMappingOptions();
-            // TODO: get min_out, max_out from layer.props
+            const mm = getDefaultRange(layer, propTitle);
-            // check for typeof layer.props[propTitle.split('.')[0]] blabla
+            o.min_out = mm[0];
+            o.max_out = mm[1];
             return o;
         }
     };
@@ -909,9 +957,13 @@ const Audio = function(tp, record) {
                                         }
                                     }
                                     record.addValue(p.id, p.title, p.value, position);
+                                    if (p.title.indexOf('color') === 0) {
                                         if (!config.audio.colorSeparateRGBA || p.title === 'color.a') {
                                             record.liveUpdate(p.layer, position);
                                         }
+                                    } else {
+                                        record.liveUpdate(p.layer, position);
+                                    }
                                 });
                             }
                         }

bin/web/js/config.js

@@ -83,7 +83,18 @@ const config = {
         zoomDynamicMax: 42,
     },
     audio: {
-        ignoreProps: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy'],
+        defaultRange: { // check audio.getDefaultRange for dynamic defaults
+            'textAlignment': [0, 1],
+            'fontSize_px': [42, 100],
+            'letterSpacing': [0, 1],
+            'lineHeight': [0, 1],
+            'rotation': [0, 180],
+            'mirror_x_distance': [0, 200],
+            'mirror_y_distance': [0, 70],
+            'color': [0, 1],
+            'letterDelays': [0, 1000],
+        },
+        ignoreProps: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy', 'height'],
         defaultSmoothing: 0.7,
         fftBandsAnalysed: 256 * 8,
         fftBandsUsed: 256 / 2,

bin/web/js/record.js

@@ -144,10 +144,27 @@ const LiveUpdater = function(tp, buffy) {
 
 const Record = function(tp) {
 
+    const NOT_RECORDING = 0;
+    const STARTING_RECORDING = 1;
+    const RECORDING = 2;
+    const STOPPING_RECORDING = 3;
+
     const hot = {}; 
-    let isRecording = false;
+    let isRecording = NOT_RECORDING;
     const buffy = new LiveBuffer();
     const liveUpdater = new LiveUpdater(tp, buffy);
+    let isInitialized = false;
+
+    const init = () => {
+        if (!isInitialized) {
+            tp.core.onChange(tp.sheet.sequence.pointer.playing, (playing) => {
+                if (isRecording === RECORDING && !playing) {
+                    stopRecording();
+                }
+            });
+            isInitialized = true;
+        }
+    };
 
     const isHot = (layerID, propTitle) => {
         return hot.hasOwnProperty(layerID)
@@ -231,7 +248,7 @@ const Record = function(tp) {
                 button.innerHTML = `<img src="/web/assets/record.svg" alt="record" />`;
                 container.append(button);
                 button.addEventListener('click', () => {
-                    if(isRecording) {
+                    if(isRecording === RECORDING) {
                         stopRecording();
                     } else {
                         if (config.record.recordMapped) {
@@ -369,7 +386,17 @@ const Record = function(tp) {
     };
 
     const startRecording = () => {
+        isRecording = STARTING_RECORDING;
         console.log('Record::startRecording');
+        document.querySelector('#notice_recording')
+            .classList.add('visible');
+        document.querySelector('#notice_recording')
+            .classList.remove('imprenetrable');
+        document.querySelector('#notice_recording .what p').innerHTML = 'recording';
+        document.querySelector('#notice_recording .details p').innerHTML = '';
+        if (!isInitialized) {
+            init();
+        }
         lastPositions = {};
         tp.sheet.sequence.pause();
         const layerKeys = Object.keys(hot);
@@ -398,9 +425,16 @@ const Record = function(tp) {
             tp.sheet.sequence.position = 0;
             tp.sheet.sequence.play();
         });
-        isRecording = true;
+        isRecording = RECORDING;
     };
     const stopRecording = () => {
+        document.querySelector('#notice_recording')
+            .classList.add('visible');
+        document.querySelector('#notice_recording')
+            .classList.add('imprenetrable');
+        document.querySelector('#notice_recording .what p').innerHTML = 'digesting recording';
+        document.querySelector('#notice_recording .details p').innerHTML = 'please wait';
+        isRecording = STOPPING_RECORDING;
         return new Promise((resolve) => {
             const layerKeys = Object.keys(hot);
             const promises = [];
@@ -474,8 +508,10 @@ const Record = function(tp) {
                     });
                     buffy.deregister(layerID);
                 });
+                document.querySelector('#notice_recording')
+                    .classList.remove('visible');
                 console.log('Record::stopRecording', 'stopped recording');
-                isRecording = false;
+                isRecording = NOT_RECORDING;
                 resolve();
             });
         });
@@ -493,7 +529,7 @@ const Record = function(tp) {
         return hot;
     };
     this.isRecording = () => {
-        return isRecording;
+        return isRecording != NOT_RECORDING;
     };
     this.injectPanel = injectPanel;
     this.startRecording = startRecording;