alert when microphone has no permission

dependencies hashes:
openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501
ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3
ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239
ofxVariableLab 8df98846248a93aa068989a3ebd0d2f0f16e5e69
ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8
theatre 86d3e07f6f2c75fd6e08fca8c97e3617c9e23b18

bin/em/variabletime/web/css/demo.css

@@ -266,6 +266,9 @@ body.debug div:not(.centerLine) {
 #notice_recording.visible {
     display: flex;
 }
+#notice_recording button {
+    pointer-events: all;
+}
 #notice_recording.impenetrable {
     pointer-events: all;
     background-color: rgba(0,0,0,0.5);

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

@@ -46,6 +46,37 @@
 
 .panel>.bottomButtonsContainer {
     order: 3;
+    display: flex;
+    flex-direction: column;
+}
+
+.panel>.bottomButtonsContainer #start_new_project {
+    order: 1;
+    margin: 7px 10px 0px 10px;
+}
+.panel>.bottomButtonsContainer #open_project {
+    order: 2;
+    margin: 7px 10px 0px 10px;
+}
+.panel>.bottomButtonsContainer #save_project {
+    order: 3;
+    margin: 7px 10px 0px 10px;
+}
+.panel>.bottomButtonsContainer #add_font {
+    order: 4;
+    margin: 7px 10px 0px 10px;
+}
+.panel>.bottomButtonsContainer #upload_audio {
+    order: 5;
+    margin: 7px 10px 0px 10px;
+}
+.panel>.bottomButtonsContainer #exporter_open {
+    order: 6;
+    margin: 7px 10px 0px 10px;
+}
+.panel>.bottomButtonsContainer #hide_ui {
+    order: 7;
+    margin: 7px 10px;
 }
 
 .panelWrapper {}

bin/em/variabletime/web/js/artboard.js

@@ -173,6 +173,35 @@ const Artboard = function(tp, domElement = false, autoInit = true) {
     this.hide = () => {
         // nothing to do
     };
+    const getHierarchyPanelButton = () => {
+        if (hierarchyPanelButton === null) {
+            hierarchyPanelButton = tp.shadowRoot.querySelector(`.layerMover${this.id()}`);
+        }
+        return hierarchyPanelButton;
+    };
+    this.isSelected = () => {
+        const panel = getHierarchyPanelButton();
+        if (panel === null) {
+            return false;
+        } else {
+            const notSelected = panel.querySelector('.not-selected');
+            return !notSelected;
+        }
+    };
+    this.select = () => {
+        const panel = getHierarchyPanelButton();
+        const selectables = panel.querySelector('.not-selected');
+        if (selectables !== null && typeof selectables.dispatchEvent === 'function') {
+            var clickEvent = new MouseEvent("click", {
+                    "view": window,
+                    "bubbles": true,
+                    "cancelable": false
+            });
+            selectables.dispatchEvent(clickEvent);
+        } else {
+            window.debugElement = panel;
+        }
+    };
 
     // action
     if (typeof domElement !== 'object') {

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

@@ -44,6 +44,7 @@ const Audio = function(tp, record) {
         //},
     //});
     let started = false;
+    let allowedMicrophone = true; // TODO: actually use this
 
     let mapping = {};
     let savedMapping = {};
@@ -915,7 +916,15 @@ const Audio = function(tp, record) {
                         visualize();
                     })
                     .catch(function(err) {
-                        console.log("The following gUM error occured: " + err);
+                        console.log("Audio::init","The following gUM error occured: " + err);
+                        const noPermission = err.message.toLowerCase().indexOf('permission') >= 0;
+                        if (noPermission) {
+                            if (allowedMicrophone) {
+                                alert("We don't have permission to access the microphone. Microphone input will be silent.");
+                            }
+                            allowedMicrophone = false;
+                            // TODO: actually use this
+                        }
                     });
             } else {
                 console.log("getUserMedia not supported on your browser!");

bin/em/variabletime/web/js/main.js

@@ -121,10 +121,7 @@ window.showAbout = () => {
     if (getAbout() === null) {
         return;
     }
-    
     getAbout().classList.remove("hidden");
-   
-   
 }
 window.hideAbout = () => {
     if (getAbout() !== null) {
@@ -524,9 +521,19 @@ const deleteLayer = (id, saveProject = true) => {
             }
         });
     }
+    const wasSelected = layers[index].isSelected();
     layers[index].prepareForDepartureFromThisBeautifulExperience();
     layers.splice(index, 1);
     delete layersById[id];
+    if (wasSelected) {
+        if (layers.length > index + 1) {
+            layers[index].select();
+        } else if (layers.length > 0) {
+            layers[layers.length - 1].select();
+        } else {
+            artboard.select();
+        }
+    }
     if (saveProject) {
         setTimeout(() => {
             tp.saveProject();

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

@@ -469,9 +469,9 @@ const Record = function(tp) {
         document.querySelector('#notice_recording')
             .classList.add('visible');
         document.querySelector('#notice_recording')
-            .classList.remove('imprenetrable');
+            .classList.remove('impenetrable');
         document.querySelector('#notice_recording .what p').innerHTML = 'recording';
-        document.querySelector('#notice_recording .details p').innerHTML = '';
+        document.querySelector('#notice_recording .details p').innerHTML = '<button onclick="record.stopRecording()">stop recording</button>';
         if (!isInitialized) {
             init();
         }