recording

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

@@ -226,9 +226,6 @@ input[type=checkbox]:checked+label::after {
     content: ' ON';
 }
 
-input[type=button].audio_recordButton {
-}
-
 .audioOptions input[type="radio"] {
     appearance: none;
     background-color: #fff;
@@ -455,6 +452,7 @@ li.layerMover div.selected svg circle {
     background: #1cba94;
 }
 
+.audio_recordButton,
 .recordButton {
     width: 17px;
     margin: 2px;
@@ -472,6 +470,28 @@ li.layerMover div.selected svg circle {
     cursor: pointer
 }
 
+.audio_recordButton {
+    justify-content: flex-start;
+}
+
+.recordButton:hover {
+    background: #1cba94;
+}
+
+.recordButton img {
+    max-width: 70%;
+    margin-left: 2px;
+}
+
+.recordButton label {
+    margin-left: 8px;
+    white-space: nowrap;
+}
+
+.recordButton.active {
+    background: #1cba94;
+}
+
 .recording {
     overflow: hidden;
     background: rgb(255, 255, 255);
@@ -498,18 +518,6 @@ li.layerMover div.selected svg circle {
     font-variation-settings: "wght" 700;
 }
 
-.recordButton:hover {
-    background: #1cba94;
-}
-
-.recordButton img {
-    max-width: 70%;
-}
-
-.recordButton.active {
-    background: #1cba94;
-}
-
 .panelMomWrapper {
     overflow-x: hidden;
 }

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

@@ -284,6 +284,42 @@ const Audio = function(tp, record) {
             }
             savedMapping[layer.id()][propTitle] = mappingOptions;
         };
+        if (config.record.active) {
+            const record_Dom_Cont = document.createElement('div');
+            record_Dom_Cont.classList.add('record_Dom_Cont');
+            const createRecordButton = (type) => {
+                const cssClass = toCssClass(`audio_record${propTitle}`);
+                const recordDom = document.createElement('div');
+                const recordDom_img = document.createElement('img');
+                const recordDom_label = document.createElement('label');
+                recordDom.id = cssClass;
+                recordDom.name = cssClass;
+                recordDom.type = 'button';
+                recordDom.classList.add('recordButton');
+                recordDom.classList.add('audio_recordButton');
+                recordDom_img.alt = type;
+                recordDom_img.src = '/web/assets/record.svg';
+                recordDom_label.innerHTML = type;
+                recordDom_label.for = cssClass;
+                recordDom.append(recordDom_img);
+                recordDom.append(recordDom_label);
+                return recordDom;
+            }
+            const recordSoloButton = createRecordButton('record solo');
+            const recordAllButton = createRecordButton('record all');
+            record_Dom_Cont.append(recordSoloButton);
+            record_Dom_Cont.append(recordAllButton);
+
+            recordSoloButton.addEventListener('click', () => {
+                record.toggleRecording([[layer.id()].concat(propTitle.split('.'))]);
+            });
+            recordAllButton.addEventListener('click', () => {
+                record.toggleRecording();
+            });
+
+            audioOptions.append(record_Dom_Cont);
+        }
+
         const source_Dom_Cont = document.createElement('div');
         source_Dom_Cont.classList.add('source_Dom_Cont');
         const source_Dom = document.createElement('select');
@@ -551,6 +587,10 @@ const Audio = function(tp, record) {
             // audioOptions need a started init
             init();
         }
+        if (!layer.isSelected()) {
+            // whoopsie, can only add options for selected layer
+            return;
+        }
         const panelPropTitle = tp.getPanelPropTitle(propTitle);
         if (panelPropTitle === null) {
             console.log('Audio::addAudioOptions::error',`cannot find panelPropTitle "${propTitle}"`);
@@ -576,6 +616,10 @@ const Audio = function(tp, record) {
         audioButton.classList.add('active');
     };
 
+    const hasAudioOptions = (propTitle) => {
+        return tp.shadowRoot.querySelector('.' + toCssClass(`audioOptions${propTitle}`)) !== null;
+    };
+
     const removeAudioOptions = (layer = false, propTitle = false) => {
         const panel = tp.getPanel();
         if (!layer && !propTitle) {
@@ -613,6 +657,33 @@ const Audio = function(tp, record) {
         }
     };
 
+    const toggleAudio = (layer, propTitle) => {
+        if (!started) {
+            init();
+        }
+        if (!isMapped(layer, propTitle)) {
+            addAudio(layer, propTitle);
+        } else {
+            removeAudio(layer, propTitle);
+        }
+    };
+    const addAudio = (layer, propTitle) => {
+        console.log('adding audio for', layer, propTitle);
+        if (!started) {
+            init();
+        }
+        addAudioMapping(layer, propTitle);
+        addAudioOptions(layer, propTitle);
+        layer.updateValuesViaTheatre(false);
+    };
+    const removeAudio = (layer, propTitle) => {
+        if (!started) {
+            init();
+        }
+        removeAudioMapping(layer, propTitle);
+        removeAudioOptions(layer, propTitle);
+        layer.updateValuesViaTheatre(true);
+    };
     const addAudioButton = (layer, propTitle, isActive) => {
         const panel = tp.getPanel();
         const panelPropTitle = tp.getPanelPropTitle(propTitle);
@@ -634,22 +705,10 @@ const Audio = function(tp, record) {
                 button.innerHTML = `<img src="/web/assets/sound.svg" alt="audio" />`;
                 container.append(button);
                 button.addEventListener('click', () => {
-                    if (!started) {
+                    toggleAudio(layer, propTitle);
-                        init();
-                    }
-                    if (!isMapped(layer, propTitle)) {
-                        addAudioMapping(layer, propTitle);
-                        addAudioOptions(layer, propTitle);
-                        layer.updateValuesViaTheatre(false);
-                    } else {
-                        removeAudioMapping(layer, propTitle);
-                        removeAudioOptions(layer, propTitle);
-                        layer.updateValuesViaTheatre(true);
-                    }
                 });
                 if (isActive) {
-                    addAudioMapping(layer, propTitle);
+                    addAudio(layer, propTitle);
-                    addAudioOptions(layer, propTitle);
                 }
             }
         } else {
@@ -666,14 +725,22 @@ const Audio = function(tp, record) {
         props.forEach((propTitle) => {
             if (config.audio.ignoreProps[layerType].indexOf(propTitle) < 0) {
                 let isActive = false;
-                if (mapping.hasOwnProperty(layer.id())) {
+                if (typeof mapping[layer.id()] === 'object') {
-                    if (mapping[layer.id()].hasOwnProperty(propTitle)) {
+                    if (typeof mapping[layer.id()][propTitle] === 'object') {
                         isActive = true;
                     }
                 }
                 addAudioButton(layer, propTitle, isActive);
             }
         });
+        //if (typeof getMapping()[layer.id()] === 'object') {
+            //Object.keys(getMapping()[layer.id()]).forEach((e) => {
+                //if (e.indexOf('color') === 0) {
+                //} else {
+                    //addAudioOptions(layer.id(), 
+                //}
+            //});
+        //}
     };
     const audioSourceCombos = {};
     const readAudioFiles = () => {
@@ -1188,6 +1255,8 @@ const Audio = function(tp, record) {
     this.removeAudioMapping = removeAudioMapping;
     this.addAudioOptions = addAudioOptions;
     this.removeAudioOptions = removeAudioOptions;
+    this.addAudio = addAudio;
+    this.removeAudio = removeAudio;
     this.AudioMappingOptions = AudioMappingOptions;
     this.readAudioFiles = readAudioFiles;
 

bin/em/variabletime/web/js/layer.js

@@ -823,7 +823,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                         panel.addEventListener("mouseleave", hideBoundingBoxDiv);
 
                         // should we have an audio object, let's inject the buttons, etc
-                        if (typeof audio === 'object' && audio.hasOwnProperty('injectPanel')) {
+                        if (typeof audio === 'object' && typeof audio.injectPanel === 'function') {
                             audio.injectPanel(this);
                         } else {
                             console.log('Layer::findInjectPanel', `cannot inject audio panel for ${this.id()} for some reason.`);

bin/em/variabletime/web/js/record.js

@@ -289,6 +289,38 @@ const Record = function(tp) {
         }
     };
 
+    const toggleRecording = (propPaths = false) => {
+        if(isRecording === RECORDING) {
+            stopRecording();
+        } else {
+            if (!propPaths) {
+                // make all mapped props hot and
+                Object.keys(audio.getMapping())
+                    .forEach((layerID) => {
+                        //if (getLayer(layerID).isSelected()) { // NOTE: multilayer recording
+                            Object.keys(audio.getMapping()[layerID])
+                                .forEach((propTitle) => {
+                                    addHot(layerID, propTitle);
+                                });
+                        //}
+                    });
+            } else if (Array.isArray(propPaths)) {
+                // only make these propTitles hot and
+                // register their layer for recording
+                propPaths.forEach((p) => {
+                    if (Array.isArray(p)) {
+                        const layerID = p[0];
+                        const propTitle = p.slice(1).join('.');
+                        addHot(layerID, propTitle);
+                    } else if (typeof p === 'string') {
+                        console.error('not implemented yet, so sorry');
+                    }
+                });
+            }
+            startRecording();
+        }
+    };
+
     const cloneInput = (layer, propTitle) => {
         const panel = tp.getPanel();
         const panelPropTitle = tp.getPanelPropTitle(propTitle);
@@ -350,15 +382,15 @@ const Record = function(tp) {
     };
 
     const injectPanel = (layer) => {
-        const flatValues = clone(layer.theatreObject.value);
+        //const flatValues = clone(layer.theatreObject.value);
-        flattenObject(flatValues, ['color']);
+        //flattenObject(flatValues, ['color']);
-        const props = Object.keys(flatValues);
+        //const props = Object.keys(flatValues);
-        const layerType = layer.id().split('-')[0];
+        //const layerType = layer.id().split('-')[0];
-        props.forEach((propTitle) => {
+        //props.forEach((propTitle) => {
-            if (config.record.ignoreProps[layerType].indexOf(propTitle) < 0) {
+            //if (config.record.ignoreProps[layerType].indexOf(propTitle) < 0) {
-                addRecordButton(layer, propTitle);
+                //addRecordButton(layer, propTitle);
-            }
+            //}
-        });
+        //});
     };
 
     let lastPositions = {};
@@ -447,6 +479,11 @@ const Record = function(tp) {
         lastPositions = {};
         remember.isPlaying = tp.core.val(tp.sheet.sequence.pointer.playing);
         tp.sheet.sequence.pause();
+        // if there are no sequenced values,
+        // we very very likely want to start recording from start
+        if (tp.getSequencePanelLeft() === null) {
+            tp.sheet.sequence.position = 0;
+        }
         const layerKeys = Object.keys(hot);
         layerKeys.forEach((layerID) => {
             const layer = getLayer(layerID);
@@ -588,6 +625,7 @@ const Record = function(tp) {
     this.injectPanel = injectPanel;
     this.startRecording = startRecording;
     this.stopRecording = stopRecording;
+    this.toggleRecording = toggleRecording;
 };
 
 export {