more instructions

dependencies hashes:
openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501
ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3
ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239
ofxVariableLab 8df98846248a93aa068989a3ebd0d2f0f16e5e69
ofxProfiler fa1d70e6a5fae16633eed2ce65fb8b23f2edbbb8
-----> watch out ofxProfiler has uncommitted changes!
theatre 86d3e07f6f2c75fd6e08fca8c97e3617c9e23b18

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}

README.md

@@ -26,6 +26,7 @@ Install all dependencies, then
 
 ### Optional:
 - [ofxProfiler](https://git.pointer.click/ofxAddons/ofxProfiler)
+This allows us to profile the web export in the same way as a desktop export
 
 ### Included dependencies:
 - [ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm)

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

@@ -0,0 +1,523 @@
+.alignButtons,
+.textAlignButtons {
+    flex-direction: row;
+    padding: 10px 0px !important;
+    justify-content: center;
+}
+
+.word {
+    margin-right: 10px;
+}
+
+.letter {
+    transition: 0.5s font-variation-settings;
+}
+
+@font-face {
+    font-family: 'vtVF';
+    src: url("/web/fonts/vtVF.ttf") format("TrueType");
+}
+
+.vtTitle {
+    font-family: 'vtVF';
+    font-size: 3em;
+    font-variation-settings: "wght" 0, "wdth" 0, "opsz" 0;
+    height: 50px;
+    width: 100%;
+    position: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#panel,
+.panel {
+    display: flex;
+    flex-direction: column;
+}
+
+.panel>div {
+    order: 1;
+}
+
+.panel>.panelWrapperMom {
+    order: 2;
+}
+
+.panel>.bottomButtonsContainer {
+    order: 3;
+}
+
+.panelWrapper {}
+
+.panelControlsWrapper {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-row-start: 2;
+    grid-column-start: 1;
+    grid-column-end: 7;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.xWrapper,
+.yWrapper,
+.fontFamilyWrapper,
+.fontFamilyWrapper,
+.rotationWrapper,
+.letterDelayWrapper,
+.transformOriginWrapper,
+.widthWrapper,
+.fontSizeWrapper,
+.letterSpacingWrapper,
+.lineHeighWrapper,
+.textWrapper,
+.colorWrapper,
+.mirror_xWrapper,
+.mirror_yWrapper,
+.mirror_xyWrapper,
+.mirror_x_distanceWrapper,
+.mirror_y_distanceWrapper,
+.alignButtons,
+.textAlignButtons {
+
+    border: none;
+    padding: 0px;
+    display: flex;
+    width: 100%;
+
+}
+
+.textWrappingButton {
+    margin-left: 30px;
+}
+
+.textWrappingButton.active {
+    background: white;
+}
+
+
+.alignButtonsVertical {
+
+    padding-bottom: 10px;
+}
+
+.alignButtons {
+    display: flex;
+    width: 50%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.xWrapper {}
+
+.yWrapper {}
+
+.mirror_xWrapper {}
+
+.mirror_xWrapper input,
+.mirror_yWrapper input,
+.mirror_xyWrapper input {
+    margin: 0px 10px;
+}
+
+.audio_min_max {
+    padding: 5px;
+    box-sizing: border-box;
+    display: grid;
+    /* flex-direction: column; */
+    grid-template-columns: 1fr 1fr;
+    row-gap: 7px;
+}
+
+.source_Dom_Cont {
+    padding: 5px;
+}
+
+.source_Dom_Cont select {
+    background-color: white;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    color: rgb(0, 0, 0);
+    padding: 1px 6px;
+    font-style: inherit;
+    font-variant: inherit;
+    font-weight: inherit;
+    font-stretch: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    font-optical-sizing: inherit;
+    font-kerning: inherit;
+    font-feature-settings: inherit;
+    outline: none;
+    text-align: left;
+    /* width: 100%; */
+    border-radius: 0px;
+    font-variation-settings: "wght" 700;
+    height: 26px;
+    margin-right: 10px;
+}
+
+.audio_min_Cont,
+.audio_max_Cont,
+.letterDelayCont {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    display: flex;
+    justify-content: space-between;
+
+
+}
+
+.audio_min_max input {
+    background: rgb(255, 255, 255);
+    border: none;
+    color: rgb(0, 0, 0);
+    padding: 3px 6px 1px;
+    font-style: inherit;
+    font-variant: inherit;
+    font-weight: inherit;
+    font-stretch: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    font-optical-sizing: inherit;
+    font-kerning: inherit;
+    font-feature-settings: inherit;
+    outline: none;
+    /* cursor: ew-resize; */
+    /* width: 100%; */
+    height: calc(100% - 4px);
+    border-radius: 0px;
+    margin-bottom: 0px;
+    text-align: center;
+    font-variation-settings: "wght" 700;
+}
+
+.audioOptions {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.audioOptions label {
+    color: black;
+    font-family: 'Tonka';
+    font-variation-settings: 'wght' 500;
+}
+
+.mirror_xWrapper label,
+.mirror_yWrapper label,
+.mirror_xyWrapper label {
+    color: #ea2333;
+}
+
+input[type=checkbox] {}
+
+input[type=checkbox]:checked+label {
+    color: #1cba94;
+    padding-left: 4px;
+}
+
+input[type=checkbox]+label::after {
+    content: ' OFF';
+}
+
+input[type=checkbox]:checked+label::after {
+    content: ' ON';
+}
+
+.audioOptions input[type="radio"] {
+    appearance: none;
+    background-color: #fff;
+    margin: 0;
+    font: inherit;
+    color: black;
+    width: 1.15em;
+    height: 1.15em;
+
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.audioOptions input[type="radio"]::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    border-radius: 50%;
+    opacity: 0;
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em black;
+}
+
+.audioOptions input[type="radio"]:checked::before {
+    opacity: 1;
+}
+
+.sync_inputDom_Cont {
+    display: flex;
+    width: fit-content;
+    justify-content: center;
+    align-items: center;
+    column-gap: 5px;
+    margin: 5px 15px 5px 0px;
+}
+
+.sync_Dom {
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 7px;
+}
+
+.sync_titleDom_Cont {
+    display: flex;
+    justify-content: space-between;
+}
+
+.mirror_yWrapper {}
+
+.mirror_xyWrapper {}
+
+.mirror_x_distanceWrapper {}
+
+.mirror_y_distanceWrapper {}
+
+.fontFamilyWrapper {}
+
+.rotationWrapper {
+    border-top: 1px dashed #91919177;
+    padding-top: 10px;
+}
+
+.transformOriginWrapper {}
+
+.widthWrapper {}
+
+.heightWrapper {
+    display: none;
+}
+
+.fontSizeWrapper {}
+
+.letterSpacingWrapper {}
+
+.letterDelayWrapper {}
+
+.lineHeighWrapper {}
+
+.textWrapper {}
+
+.colorWrapper {
+    border-bottom: 1px dashed #91919177;
+    border-top: 1px dashed #91919177;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+
+span.icon {
+    font-family: 'VariableIcons';
+    font-size: 3em;
+    margin: 2px 5px;
+    line-height: 0.2em;
+    box-sizing: border-box;
+}
+
+
+.main_panel_button,
+.vte_button {
+    background-color: white;
+    font-size: 1.1em;
+    padding: 5px 5px 4px 5px;
+    margin: 7px 10px;
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    border-radius: 10px;
+    border: none;
+    padding: 7px;
+    text-transform: uppercase;
+    width: calc(100% - 20px);
+    box-sizing: border-box;
+    cursor: pointer;
+    font-variation-settings: 'wght' 750, 'wdth' 100;
+
+}
+
+.main_panel_button:hover,
+.vte_button:hover {
+    color: white;
+    background-color: black;
+}
+
+.removeButtonContainer {
+    display: flex;
+    padding-right: 10px;
+    padding-bottom: 10px;
+}
+
+.alignButtons img,
+.textAlignButtons img {
+    height: 19px;
+    cursor: pointer;
+    margin: 5px 5px 2px 5px;
+
+}
+
+li.layerMover div {}
+
+li.layerMover div.selected {
+    background: rgba(255, 255, 255, 1);
+}
+
+li.layerMover div.selected svg circle {
+    fill: #ea2333;
+}
+
+.letterDelaysContWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-bottom: 10px;
+}
+
+.letterDelaysContWrapper>*,
+.fontVariationAxesContWrapper>* {
+    margin-left: calc(var(--left-pad) * (var(--depth) - 1));
+}
+
+.fontVariationAxesContWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px dashed #91919177;
+    border-top: 1px dashed #91919177;
+    margin-top: 10px;
+}
+
+.moveLayerButton {}
+
+.removeLayerButton img,
+.duplicateLayerButton img,
+.addLayerButton img,
+.moveLayerButton img {
+    height: 10px;
+    cursor: pointer;
+}
+
+.propTitleStuff {
+    color: red;
+}
+
+.addLayerButton {
+    width: calc(100% - 40px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* padding-left: 15px; */
+    align-self: end;
+    margin-top: 5px;
+}
+
+.audioButton {
+    width: 17px;
+    margin: 2px 2px 2px 5px;
+    flex-shrink: 0;
+    display: flex;
+    background: rgb(163, 163, 163);
+    border-radius: 50%;
+    height: 17px;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    box-sizing: border-box;
+    cursor: pointer
+}
+
+.audioButton:hover {
+    background: #1cba94;
+}
+
+.audioButton img {
+    max-width: 70%;
+}
+
+.audioButton.active {
+    background: #1cba94;
+}
+
+.audio_recordButton,
+.recordButton {
+    width: 17px;
+    margin: 2px;
+    flex-shrink: 0;
+    display: flex;
+    background: rgb(163, 163, 163);
+    border-radius: 50%;
+    height: 17px;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    box-sizing: border-box;
+    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);
+    border: none;
+    color: rgb(0, 0, 0);
+    padding: 3px 6px 1px;
+    font-style: inherit;
+    font-variant: inherit;
+    font-weight: inherit;
+    font-stretch: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    font-optical-sizing: inherit;
+    font-kerning: inherit;
+    font-feature-settings: inherit;
+    outline: none;
+    cursor: ew-resize;
+    width: 100%;
+    height: calc(100% - 4px);
+    border-radius: 0px;
+    margin-bottom: 0px;
+    text-align: center;
+    font-variation-settings: "wght" 700;
+}
+
+.panelMomWrapper {
+    overflow-x: hidden;
+}

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

@@ -43,12 +43,10 @@ const Audio = function(tp, record) {
             //return e.toString.match(/\(([\S\s]*)\)/)[1]
         //},
     //});
-    //document.body.addEventListener("click", init);
     let started = false;
 
     let mapping = {};
     let savedMapping = {};
-    //const canvass = [];
     let canvasCombos = {};
     const mutationObserver = new MutationObserver(function(e) {
         if (e[0].removedNodes) {
@@ -222,11 +220,11 @@ const Audio = function(tp, record) {
 
     const createAudioOptions = (layer, propTitle, container) => {
         const mappingOptions = mapping[layer.id()][propTitle];
-        let hasLetterDelay = //false;
+        let hasLetterDelay =
             config
             .layer.letterDelayProps
-            .indexOf(propTitle.split('.')[0]) >= 0 && propTitle.indexOf('color') < 0
-            && !tp.isSequenced(propTitle);
+            .indexOf(propTitle.split('.')[0]) >= 0 && propTitle.indexOf('color') < 0 &&
+            !tp.isSequenced(propTitle);
         const panel = tp.getPanel();
         if (!areMutationsObserved) {
             mutationObserver.observe(panel, { childList: true, subtree: true });
@@ -284,6 +282,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');
@@ -540,7 +574,6 @@ const Audio = function(tp, record) {
 
         container.after(audioOptions);
 
-        //canvass.push(fft_imgDom);
         canvasCombos[propTitle] = [fft_imgDom, fft_imgDom.getContext("2d"), layer.id()];
         updateMappingOptions();
         return audioOptions;
@@ -551,6 +584,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 +613,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) {
@@ -590,17 +631,17 @@ const Audio = function(tp, record) {
                 button.classList.remove('active');
             });
         } else {
+            if (config.audio.colorSeparateRGBA && propTitle === 'color') {
+                delete canvasCombos['color.r'];
+                delete canvasCombos['color.g'];
+                delete canvasCombos['color.b'];
+                delete canvasCombos['color.a'];
+            } else {
+                delete canvasCombos[propTitle];
+            }
             // only selected layers have options
             // otherwise the ui is not there
             if (layer.isSelected()) {
-                if (config.audio.colorSeparateRGBA && propTitle === 'color') {
-                    delete canvasCombos['color.r'];
-                    delete canvasCombos['color.g'];
-                    delete canvasCombos['color.b'];
-                    delete canvasCombos['color.a'];
-                } else {
-                    delete canvasCombos[propTitle];
-                }
                 const audioOptions = panel.querySelectorAll(toCssClass(`audioOptions${propTitle}`,'.'));
                 if (audioOptions.length > 0) {
                     audioOptions.forEach((e) => { e.remove(); });
@@ -613,11 +654,37 @@ 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);
         if (panelPropTitle !== null) {
-            //const container = tp.getPanelPropContainer(panelPropTitle);
             const container = panelPropTitle.parentNode.parentNode;
 
             if (container === null) {
@@ -634,22 +701,10 @@ const Audio = function(tp, record) {
                 button.innerHTML = `<img src="/web/assets/sound.svg" alt="audio" />`;
                 container.append(button);
                 button.addEventListener('click', () => {
-                    if (!started) {
-                        init();
-                    }
-                    if (!isMapped(layer, propTitle)) {
-                        addAudioMapping(layer, propTitle);
-                        addAudioOptions(layer, propTitle);
-                        layer.updateValuesViaTheatre(false);
-                    } else {
-                        removeAudioMapping(layer, propTitle);
-                        removeAudioOptions(layer, propTitle);
-                        layer.updateValuesViaTheatre(true);
-                    }
+                    toggleAudio(layer, propTitle);
                 });
                 if (isActive) {
-                    addAudioMapping(layer, propTitle);
-                    addAudioOptions(layer, propTitle);
+                    addAudio(layer, propTitle);
                 }
             }
         } else {
@@ -666,8 +721,8 @@ 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 (mapping[layer.id()].hasOwnProperty(propTitle)) {
+                if (typeof mapping[layer.id()] === 'object') {
+                    if (typeof mapping[layer.id()][propTitle] === 'object') {
                         isActive = true;
                     }
                 }
@@ -711,7 +766,6 @@ const Audio = function(tp, record) {
                 gain.gain.value = 0;
                 source.connect(gain);
                 gain.connect(audioCtx.destination);
-                //source.connect(audioCtx.destination);
                 const analyser = new AnalyserNode(audioCtx, config.audio.analyser);
                 const bufferLength = analyser.frequencyBinCount / 2;
                 const dataArray = new Uint8Array(bufferLength);
@@ -1127,14 +1181,6 @@ const Audio = function(tp, record) {
                                 });
                             }
                         }
-                        //const panel = tp.getPanel();
-                        //const fft_images = panel.querySelectorAll('.audio_fft');
-                        //if (fft_images !== null) {
-                        //const src = canvas.toDataURL();
-                        //fft_images.forEach((e) => {
-                        //e.src = src;
-                        //});
-                        //}
                         frameCount++;
                     };
                     drawAlt();
@@ -1188,6 +1234,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/main.js

@@ -475,9 +475,7 @@ const duplicateLayer = (originalLayer) => {
             const givenKeys = e.detail.titles;
             let allKeysFound = true;
             for (let i = 0; i < originalKeys.length; i++) {
-                //const originalValue = originalValues[originalKeys[i]];
                 if (givenKeys.indexOf(originalKeys[i]) < 0) {
-                    //delete originalValues[originalKeys[i]];
                     allKeysFound = false;
                 }
             }
@@ -492,7 +490,6 @@ const duplicateLayer = (originalLayer) => {
         };
         tp.getPanel().addEventListener("injected", addKeyframes);
         newLayer.select();
-        //tp.shadowRoot.querySelector(`.layerMover${newLayer.id()} div`).click();
     });
     });
 };

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

@@ -233,11 +233,6 @@ const Record = function(tp) {
             }
         }
     };
-    //const makeNotHot = (layerID, propTitle) => {
-        //if (isHot(layerID, propTitle)) {
-            //// whatever
-        //}
-    //};
 
     const addRecordButton = (layer, propTitle) => {
         const panel = tp.getPanel();
@@ -289,6 +284,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 +377,15 @@ const Record = function(tp) {
     };
 
     const injectPanel = (layer) => {
-        const flatValues = clone(layer.theatreObject.value);
-        flattenObject(flatValues, ['color']);
-        const props = Object.keys(flatValues);
-        const layerType = layer.id().split('-')[0];
-        props.forEach((propTitle) => {
-            if (config.record.ignoreProps[layerType].indexOf(propTitle) < 0) {
-                addRecordButton(layer, propTitle);
-            }
-        });
+        //const flatValues = clone(layer.theatreObject.value);
+        //flattenObject(flatValues, ['color']);
+        //const props = Object.keys(flatValues);
+        //const layerType = layer.id().split('-')[0];
+        //props.forEach((propTitle) => {
+            //if (config.record.ignoreProps[layerType].indexOf(propTitle) < 0) {
+                //addRecordButton(layer, propTitle);
+            //}
+        //});
     };
 
     let lastPositions = {};
@@ -447,6 +474,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);
@@ -486,23 +518,12 @@ const Record = function(tp) {
         return new Promise((resolve) => {
             const layerKeys = Object.keys(hot);
             const promises = [];
-            promises.push(() => {
-                return new Promise((subResolve) => {
-                    const audioOptionsButtons = tp.getPanel()
-                        .querySelectorAll(`.audioButton.active`);
-                    if (audioOptionsButtons !== null) {
-                        audioOptionsButtons.forEach((audioOptionsButton) => {
-                            audioOptionsButton.click();
-                        });
-                    }
-                    subResolve();
-                });
-            });
             layerKeys.forEach((layerID) => {
                 const layer = getLayer(layerID);
                 const propTitles = Object.keys(hot[layerID]);
                 const keyframes = [];
                 propTitles.forEach((propTitle) => {
+                    audio.removeAudio(getLayer(layerID),propTitle);
                     // NOTE: layerID is not actually used atm
                     // and should be the layer anyways
                     uncloneInput(layerID, propTitle);
@@ -537,7 +558,6 @@ const Record = function(tp) {
                         });
                     }
                 });
-                //setTimeout(() => {
                 promises.push(() => {
                     return new Promise((subResolve) => {
                         tp.addKeyframes(layer, keyframes).then(() => {
@@ -547,7 +567,6 @@ const Record = function(tp) {
                         });
                     })
                 });
-                //}, 2000);
             });
             sequencialPromises(promises, () => {
                 Object.keys(hot).forEach((layerID) => {
@@ -588,6 +607,7 @@ const Record = function(tp) {
     this.injectPanel = injectPanel;
     this.startRecording = startRecording;
     this.stopRecording = stopRecording;
+    this.toggleRecording = toggleRecording;
 };
 
 export {

bin/em/variabletime/web/js/theatre-play.js

@@ -11,10 +11,6 @@ import {
     getNestedProperty,
 } from './utils.js';
 
-//import {
-    //config
-//} from './config.js';
-
 const TheatrePlay = function(autoInit = false) {
 
     //private
@@ -28,9 +24,7 @@ const TheatrePlay = function(autoInit = false) {
     let theatrePanel = null;
     let sequencePanelLeft = null;
     const getSequencePanelLeft = () => {
-        // if (sequencePanelLeft === null) {
             sequencePanelLeft = tp.shadowRoot.querySelector('[data-testid="SequencePanel-Left"]');
-        // }
         return sequencePanelLeft;
     };
     const getPanel = () => {
@@ -148,8 +142,6 @@ const TheatrePlay = function(autoInit = false) {
         }
         const prop = getNestedProperty(layer.theatreObject.props, path);
         return studio.__experimental.__experimental_isPropSequenced(prop);
-        // is this better than this?
-        //return getSequenceButton(path) === null;
     };
 
     const setSequenced = (path, sequenced = true, layer = getLayer()) => {
@@ -354,470 +346,11 @@ const TheatrePlay = function(autoInit = false) {
     };
     this.addShadowCss = () => {
         if (this.shadowRoot.querySelector(`#tpShadowCss`) === null) {
-            let style = document.createElement("style");
+            let style = document.createElement("link");
             style.setAttribute('id', 'tpShadowCss');
-
-            // ASYA: here you can adjust css
-            style.textContent = `
-        .alignButtons, .textAlignButtons {
-            flex-direction: row;
-            padding: 10px 0px !important;
-            justify-content: center;
-        }
-
-        .word{
-            margin-right: 10px;
-        }
-        .letter{
-            transition: 0.5s font-variation-settings;
-        }
-
-        @font-face {
-          font-family: 'vtVF';
-          src: url("/web/fonts/vtVF.ttf") format("TrueType");
-        }
-
-        .vtTitle{
-            font-family: 'vtVF';
-            font-size: 3em;
-            font-variation-settings: "wght" 0, "wdth" 0, "opsz" 0;
-            height: 50px;
-            width: 100%;
-            position: inherit;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        #panel,
-        .panel {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .panel > div {
-            order: 1;
-        }
-        .panel > .panelWrapperMom {
-            order: 2;
-        }
-        .panel > .bottomButtonsContainer {
-            order: 3;
-        }
-
-        .panelWrapper{
-        }
-
-        .panelControlsWrapper{
-            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-            grid-row-start: 2;
-            grid-column-start: 1;
-            grid-column-end: 7;
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .xWrapper, .yWrapper, .fontFamilyWrapper, .fontFamilyWrapper, .rotationWrapper, .letterDelayWrapper, .transformOriginWrapper, .widthWrapper, .fontSizeWrapper, .letterSpacingWrapper, .lineHeighWrapper, .textWrapper, .colorWrapper, .mirror_xWrapper, .mirror_yWrapper, .mirror_xyWrapper, .mirror_x_distanceWrapper, .mirror_y_distanceWrapper, .alignButtons, .textAlignButtons{
-
-            border: none;
-            padding: 0px;
-            display: flex;
-            width: 100%;
-
-        }
-
-        .textWrappingButton {
-            margin-left: 30px;
-        }
-        .textWrappingButton.active {
-            background: white;
-        }
-
-        
-        .alignButtonsVertical{
-           
-            padding-bottom: 10px;
-        }
-
-        .alignButtons{
-            display: flex;
-            width: 50%;
-            padding-top: 10px;
-            padding-bottom: 10px;
-        }
-
-        .xWrapper{
-        } 
-        .yWrapper{
-        }
-        .mirror_xWrapper{
-        } 
-        .mirror_xWrapper input, .mirror_yWrapper input, .mirror_xyWrapper input{
-            margin: 0px 10px;
-        }
-        .audio_min_max{
-            padding: 5px;
-            box-sizing: border-box;
-            display: grid;
-            /* flex-direction: column; */
-            grid-template-columns: 1fr 1fr;
-            row-gap: 7px;
-        }
-        .source_Dom_Cont{
-            padding: 5px;
-        }
-        .source_Dom_Cont select{
-            background-color: white;
-            box-sizing: border-box;
-            border: 1px solid transparent;
-            color: rgb(0, 0, 0);
-            padding: 1px 6px;
-            font-style: inherit;
-            font-variant: inherit;
-            font-weight: inherit;
-            font-stretch: inherit;
-            font-size: inherit;
-            line-height: inherit;
-            font-family: inherit;
-            font-optical-sizing: inherit;
-            font-kerning: inherit;
-            font-feature-settings: inherit;
-            outline: none;
-            text-align: left;
-            /* width: 100%; */
-            border-radius: 0px;
-            font-variation-settings: "wght" 700;
-            height: 26px;
-            margin-right: 10px;
-        }
-        .audio_min_Cont, .audio_max_Cont, .letterDelayCont{
-            grid-column-start: 1;
-            grid-column-end: 3;
-            display: flex;
-            justify-content: space-between;
-
-
-        }
-        .audio_min_max input{
-            background: rgb(255, 255, 255);
-            border: none;
-            color: rgb(0, 0, 0);
-            padding: 3px 6px 1px;
-            font-style: inherit;
-            font-variant: inherit;
-            font-weight: inherit;
-            font-stretch: inherit;
-            font-size: inherit;
-            line-height: inherit;
-            font-family: inherit;
-            font-optical-sizing: inherit;
-            font-kerning: inherit;
-            font-feature-settings: inherit;
-            outline: none;
-            /* cursor: ew-resize; */
-            /* width: 100%; */
-            height: calc(100% - 4px);
-            border-radius: 0px;
-            margin-bottom: 0px;
-            text-align: center;
-            font-variation-settings: "wght" 700;
-        }
-        .audioOptions{
-            margin-top: 5px;
-            margin-bottom: 5px;
-        }
-        .audioOptions label {
-            color: black;
-            font-family: 'Tonka';
-            font-variation-settings: 'wght' 500;
-        }
-        .mirror_xWrapper label, .mirror_yWrapper label, .mirror_xyWrapper label{
-            color:#ea2333;
-        }
-        // .mirror_xWrapper div:first-of-type, .mirror_yWrapper div:first-of-type, .mirror_xyWrapper div:first-of-type{
-        //     width: fit-content;
-        //     background: red;
-        //     flex-grow: 0;
-        //     margin-right: 15px;
-        // }
-        input[type=checkbox] {
-        }
-        input[type=checkbox]:checked + label {
-          color: #1cba94;
-          padding-left: 4px;
-        }
-        input[type=checkbox] + label::after{
-          content: ' OFF';
-        }
-        input[type=checkbox]:checked + label::after{
-          content: ' ON';
-        }
-        .audioOptions input[type="radio"] {
-          appearance: none;
-          background-color: #fff;
-          margin: 0;
-          font: inherit;
-          color: black;
-          width: 1.15em;
-          height: 1.15em;
-        
-          border-radius: 50%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .audioOptions input[type="radio"]::before {
-          content: "";
-          width: 0.65em;
-          height: 0.65em;
-          border-radius: 50%;
-          opacity: 0;
-          transition: 120ms transform ease-in-out;
-          box-shadow: inset 1em 1em black;
-        }
-        .audioOptions input[type="radio"]:checked::before {
-          opacity: 1;
-        }
-        .sync_inputDom_Cont{
-            display: flex;
-            width: fit-content;
-            justify-content: center;
-            align-items: center;
-            column-gap: 5px;
-            margin: 5px 15px 5px 0px;
-        }
-        .sync_Dom{
-            padding: 5px;
-            display: flex;
-            flex-direction: column;
-            row-gap: 7px;
-        }
-        .sync_titleDom_Cont{
-            display: flex;
-            justify-content: space-between;
-        }
-        .mirror_yWrapper{
-        }
-        .mirror_xyWrapper{
-        }
-        .mirror_x_distanceWrapper{
-        }
-        .mirror_y_distanceWrapper{
-        }
-
-        .fontFamilyWrapper{
-        }
-        .rotationWrapper{
-             border-top: 1px dashed #91919177;
-             padding-top: 10px;
-        }
-        .transformOriginWrapper{
-        }
-        .widthWrapper{
-        }
-        .heightWrapper{
-            display: none;
-        }
-        .fontSizeWrapper{
-        }
-        .letterSpacingWrapper{
-        }
-        .letterDelayWrapper{
-        }
-        .lineHeighWrapper{
-        }
-        .textWrapper{
-        }
-        .colorWrapper{
-            border-bottom: 1px dashed #91919177;
-            border-top: 1px dashed #91919177;
-            margin-bottom: 10px;
-            padding-bottom: 10px;
-            padding-top: 10px;
-        }
-
-        span.icon{
-            font-family: 'VariableIcons';
-            font-size: 3em;
-            margin: 2px 5px;
-            line-height: 0.2em;
-            box-sizing: border-box;
-        }
-
-        
-        .main_panel_button, .vte_button{
-            background-color: white;
-            font-size: 1.1em;
-            padding: 5px 5px 4px 5px;
-            margin: 7px 10px;
-            display: flex;
-            flex-grow: 1;
-            justify-content: center;
-            border-radius: 10px;
-            border: none;
-            padding: 7px;
-            text-transform: uppercase;
-            width: calc(100% - 20px);
-            box-sizing: border-box;
-            cursor: pointer;
-            font-variation-settings: 'wght' 750, 'wdth' 100;
-
-        }
-        .main_panel_button:hover, .vte_button:hover{
-            color: white;
-            background-color:black;
-        }
-
-        .removeButtonContainer{
-            display: flex;
-            padding-right: 10px;
-            padding-bottom: 10px;
-        }
-        
-        .alignButtons img,
-        .textAlignButtons img{
-            height: 19px;
-            cursor: pointer;
-            margin: 5px 5px 2px 5px;
-           
-        }
-
-        li.layerMover div {
-            
-        }
-
-        li.layerMover div.selected {
-            background: rgba(255, 255, 255, 1);
-        }
-
-        li.layerMover div.selected svg circle{
-            fill: #ea2333;
-        }
-
-        .letterDelaysContWrapper{
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            padding-bottom: 10px;
-        }
-
-        .letterDelaysContWrapper > *, .fontVariationAxesContWrapper > *{
-            margin-left: calc(var(--left-pad) * (var(--depth) - 1));
-        }
-
-        .fontVariationAxesContWrapper{
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            padding-bottom: 10px;
-            margin-bottom: 10px;
-            border-bottom: 1px dashed #91919177;
-            border-top: 1px dashed #91919177;
-            margin-top: 10px;
-        }
-
-        .moveLayerButton {
-            
-        }
-        .removeLayerButton img,
-        .duplicateLayerButton img,
-        .addLayerButton img,
-        .moveLayerButton img {
-            height: 10px;
-            cursor: pointer;
-        }
-        .propTitleStuff {
-            color: red;
-        }
-        .addLayerButton{
-            width: calc(100% - 40px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            /* padding-left: 15px; */
-            align-self: end;
-            margin-top: 5px;
-        }
-        .audioButton{
-            width: 17px;
-            margin: 2px 2px 2px 5px;
-            flex-shrink: 0;
-            display: flex;
-            background: rgb(163, 163, 163);
-            border-radius: 50%;
-            height: 17px;
-            align-self: center;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 2px;
-            box-sizing: border-box;
-            cursor: pointer
-        }
-        .audioButton:hover{
-            background: #1cba94;
-        }
-        .audioButton img{
-            max-width: 70%;
-        }
-        .audioButton.active{
-            background: #1cba94;
-        }
-        .recordButton{
-            width: 17px;
-            margin: 2px;
-            flex-shrink: 0;
-            display: flex;
-            background: rgb(163, 163, 163);
-            border-radius: 50%;
-            height: 17px;
-            align-self: center;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 2px;
-            box-sizing: border-box;
-            cursor: pointer
-        }
-        .recording{
-            overflow: hidden;
-            background: rgb(255, 255, 255);
-            border: none;
-            color: rgb(0, 0, 0);
-            padding: 3px 6px 1px;
-            font-style: inherit;
-            font-variant: inherit;
-            font-weight: inherit;
-            font-stretch: inherit;
-            font-size: inherit;
-            line-height: inherit;
-            font-family: inherit;
-            font-optical-sizing: inherit;
-            font-kerning: inherit;
-            font-feature-settings: inherit;
-            outline: none;
-            cursor: ew-resize;
-            width: 100%;
-            height: calc(100% - 4px);
-            border-radius: 0px;
-            margin-bottom: 0px;
-            text-align: center;
-            font-variation-settings: "wght" 700;
-        }
-        .recordButton:hover{
-            background: #1cba94;
-        }
-        .recordButton img{
-            max-width: 70%;
-        }
-        .recordButton.active{
-            background: #1cba94;
-        }
-        .panelMomWrapper{
-            overflow-x: hidden;
-        }
-    `;
-            this.shadowRoot.appendChild(style);
+            style.setAttribute('rel', 'stylesheet');
+            style.setAttribute('href', '/web/css/theatre.css');
+            this.shadowRoot.insertBefore(style, this.shadowRoot.querySelector('#pointer-root'));
         }
     };
     const waitingForShadowRoot = (callback) => {
@@ -1026,13 +559,9 @@ const TheatrePlay = function(autoInit = false) {
                         console.log('TheatrePlay::uploadProject', 'could not verify project');
                     }
                 });
-                //Module.importProjectAsZip(vt_project.arrayBuffer, vt_project.fileSize, "debug_tmp");
             } else if (verifyVariableTimeProject(vt_project)) {
                 this.possiblyAskForFontsPromise(vt_project).then((vt_project_u) => {
                     vt_project = vt_project_u;
-                    //if (reeeload) {
-                    //localStorage.clear();
-                    //}
                     this.saveProject(vt_project.projectId, vt_project, true);
                     if (reeeload) {
                         this.reloadToProject(vt_project.projectId);
@@ -1083,12 +612,10 @@ const TheatrePlay = function(autoInit = false) {
             if (saveBeforeDownloading) {
                 this.saveProject(projectId, vt_project, true);
             }
-            //downloadFile(JSON.stringify(vt_project), `${config.projects.savePrefix}${projectId}.json`, 'application/json');
             Module.downloadProject(projectId, JSON.stringify(vt_project));
         } else {
             const p = this.getProject(projectId);
             if (p !== false) {
-                //downloadFile(p, `${config.projects.savePrefix}${projectId}.json`, 'application/json');
                 Module.downloadProject(projectId, JSON.stringify(p));
             } else {
                 console.error('TheatrePlay::downloadProject', `cannot download project with id ${projectId}, because it is neither current project or saved in localStorage`);
@@ -1201,14 +728,7 @@ const TheatrePlay = function(autoInit = false) {
                         getLayers().forEach((layer) => {
                             if (layer.id() === project.layerOrder[project.layerOrder.length - 1]) {
                                 layer.select();
-                                const addAudioMapping = (e) => {
-                                    //if (project.audioMapping.hasOwnProperty(layer.id())) {
-                                        //Object.keys(project.audioMapping[layer.id()]).forEach((propTitle) => {
-                                            //audio.addAudioOptions(layer, propTitle);
-                                        //});
-                                    //}
-                                };
-                                //tp.getPanel().addEventListener('injected', addAudioMapping);
+                                // add audio mapping?
                             }
                         });
                     }
@@ -1277,9 +797,6 @@ const TheatrePlay = function(autoInit = false) {
     }
     this.connectModuleCallbacks = () => {
         console.log('TheatrePlay::connectModuleCallbacks');
-        //onChange(sequence.pointer.length, (len) => {
-        //console.log('Length of the sequence changed to:', len)
-        //})
 
         if (config.timeline.rolloverReset) {
             core.onChange(this.sheet.sequence.pointer.position, (position) => {

browser.sh

@@ -6,7 +6,15 @@ fly ()
         echo $!
 }
 
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+PREVIOUS_DIR=$(pwd)
+
+cd $DIR
+
 #echo $(fly /usr/bin/chromium --incognito --screen=1 $@)
 #/usr/bin/chromium --incognito --screen=1 $@ &
 fly flatpak run com.github.Eloston.UngoogledChromium --screen=1 --disk-cache-dir=/dev/null --disk-cache-size=1 --enable-logging --password-store=basic --v=1 $@ &
-echo $!
+browser_pid=$!
+echo $browser_pid > .browserpid
+
+cd $PREVIOUS_DIR

rebuild.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+PREVIOUS_DIR=$(pwd)
+
+cd $DIR
+
+./lightclean.sh
+
+emmake make -j12
+
+./reloadbrowser.sh
+
+cd $PREVIOUS_DIR

reloadbrowser.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+PREVIOUS_DIR=$(pwd)
+
+cd $DIR
+
+# get active window in a variable
+lol=$(xdotool getactivewindow)
+
+# reload the browser
+xdotool search --onlyvisible --sync --pid $(cat ./.browserpid) --name chromium windowactivate --sync key CTRL+SHIFT+R
+
+# reactivate old window
+xdotool windowactivate $lol
+
+cd $PREVIOUS_DIR

serve.py

@@ -36,18 +36,18 @@ def serve(root, port, run_browser):
     host = '0.0.0.0'
     server_address = (host, port)
 
-    # test(CORSRequestHandler, HTTPServer, port=port)
     httpd = HTTPServer(server_address, CORSRequestHandler)
     certfile = "ssl/localhost+4.pem"
     keyfile = "ssl/localhost+4-key.pem"
 
     if not os.path.exists(certfile):
-        print("using ssl/server.pm")
         certfile = "ssl/server.pem"
     if not os.path.exists(keyfile):
-        print("using ssl/key.pm")
         keyfile = "ssl/key.pem"
+
+    print(f"using {certfile} and {keyfile} for ssl")
     
+    # NOTE: read README.md for more instructions if you want a CA
     if os.path.exists(certfile) and os.path.exists(keyfile):
         context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
         context.load_cert_chain(certfile, keyfile)
@@ -65,7 +65,7 @@ def serve(root, port, run_browser):
     print(f"serving on port {port}")
     httpd.serve_forever()
 
-
+# The main function
 if __name__ == "__main__":
     parser = argparse.ArgumentParser()
     parser.add_argument("-p", "--port", help="port to listen on", default=8060, type=int)

watch.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+PREVIOUS_DIR=$(pwd)
+
+cd $DIR
+
+echo "$(git ls-files src && git ls-files bin/data)" | entr -d ./rebuild.sh
+
+cd $PREVIOUS_DIR

watchJs.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+PREVIOUS_DIR=$(pwd)
+
+cd $DIR
+
+echo "$(git ls-files bin/em/variabletime/web)" | entr -d ./reloadbrowser.sh
+
+cd $PREVIOUS_DIR