beautify AudioOptions

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

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

@@ -160,8 +160,21 @@
     row-gap: 7px;
 }
 
+
+
+.sourceLabel_Cont{
+        font-variation-settings: 'wght' 500;
+}
+
 .source_Dom_Cont {
     padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px dashed #91919177;
+    padding-top: 10px;
+    margin-top: 10px;
+    margin: 10px 0px;
 }
 
 .source_Dom_Cont select {
@@ -187,6 +200,8 @@
     font-variation-settings: "wght" 700;
     height: 26px;
     margin-right: 10px;
+    width: -webkit-fill-available;
+    margin-left: 10px;
 }
 
 .audio_min_Cont,
@@ -225,9 +240,15 @@
     font-variation-settings: "wght" 700;
 }
 
+.audio_min_max label{
+    display: flex;
+    align-items: center;
+}
+
 .audioOptions {
     margin-top: 5px;
     margin-bottom: 5px;
+    padding: 0px 7px 7px 7px;
 }
 
 .audioOptions label {
@@ -249,12 +270,64 @@ input[type=checkbox]:checked+label {
     padding-left: 4px;
 }
 
-input[type=checkbox]+label::after {
+.muteSvg, .soundonSvg{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.consentContainer{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.checkmark, .unchecked {
+    height: 15px;
+    width: 15px;
+    background: rgb(163, 163, 163);
+    border-radius: 50%;
+    padding: 5px;
+    cursor: pointer;
+    margin: 5px;
+}
+
+.consentContainer input ~ .muteSvg {
+    display: block;
+}
+
+.consentContainer input:checked ~ .soundonSvg {
+    display: block;
+}
+
+.consentContainer input ~ .soundonSvg {
+    display: none;
+}
+
+.consentContainer input:checked ~ .muteSvg {
+    display: none;
+}
+
+.consentContainer input {
+    position: absolute;
+    opacity: 0 !important;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    -webkit-tap-highlight-color: transparent;
+}
+
+/*input[type=checkbox]+label::after{
     content: ' OFF';
 }
 
 input[type=checkbox]:checked+label::after {
     content: ' ON';
+}*/
+
+label svg{
+    width: 20px;
+    height: 20px;
 }
 
 .audioOptions input[type="radio"] {
@@ -292,7 +365,7 @@ input[type=checkbox]:checked+label::after {
     justify-content: center;
     align-items: center;
     column-gap: 5px;
-    margin: 5px 15px 5px 0px;
+    margin: 5px 0px 5px 0px;
 }
 
 .sync_Dom {
@@ -300,6 +373,14 @@ input[type=checkbox]:checked+label::after {
     display: flex;
     flex-direction: column;
     row-gap: 7px;
+    border-top: 1px dashed #91919177;
+    padding-top: 10px;
+    margin-top: 10px;
+    margin: 10px 0px 0px 0px;
+}
+
+.sync_Dom p{
+    text-align: center;
 }
 
 .sync_titleDom_Cont {
@@ -471,7 +552,7 @@ li.layerMover div.selected svg circle {
     cursor: pointer
 }
 
-.audioButton:hover {
+.audioButton:hover, .checkmark:hover, .unchecked:hover {
     background: #1cba94;
 }
 
@@ -483,14 +564,19 @@ li.layerMover div.selected svg circle {
     background: #1cba94;
 }
 
+.record_Dom_Cont{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 5px 0px 0px 0px;
+}
+
 .audio_recordButton,
 .recordButton {
-    width: 17px;
+    max-width: 50%;
     margin: 2px;
     flex-shrink: 0;
     display: flex;
-    background: rgb(163, 163, 163);
-    border-radius: 50%;
     height: 17px;
     align-self: center;
     display: flex;
@@ -498,20 +584,39 @@ li.layerMover div.selected svg circle {
     justify-content: center;
     padding: 2px;
     box-sizing: border-box;
-    cursor: pointer
+/*    flex-grow: 1;*/
+    margin-top: 5px;
+}
+
+.audio_recordButton,
+.recordButton, .recordButton label{
+    cursor: pointer;
+}
+
+.recordButton .buttonCont{
+    background: rgb(163, 163, 163);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 17px;
+    height: 17px;
+    padding: 0;
+    border-radius: 50%;
 }
 
 .audio_recordButton {
     justify-content: flex-start;
 }
 
-.recordButton:hover {
+.recordButton:hover .buttonCont{
     background: #1cba94;
 }
 
 .recordButton img {
     max-width: 70%;
-    margin-left: 2px;
+/*    margin-left: 2px;*/
+    width: 10px;
+    height: 10px;
 }
 
 .recordButton label {
@@ -555,5 +660,5 @@ li.layerMover div.selected svg circle {
 
 /* ASYA: color picker can be changed like this */
 .picker_wrapper.popup .picker_arrow::before {
-    background: pink;
+/*    background: pink;*/
 }

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

@@ -265,6 +265,7 @@ const Audio = function(tp, record) {
             const createRecordButton = (type) => {
                 const cssClass = toCssClass(`audio_record${propTitle}`);
                 const recordDom = document.createElement('div');
+                const buttonCont = document.createElement('div');
                 const recordDom_img = document.createElement('img');
                 const recordDom_label = document.createElement('label');
                 recordDom.id = cssClass;
@@ -272,11 +273,13 @@ const Audio = function(tp, record) {
                 recordDom.type = 'button';
                 recordDom.classList.add('recordButton');
                 recordDom.classList.add('audio_recordButton');
+                buttonCont.classList.add('buttonCont');
                 recordDom_img.alt = type;
                 recordDom_img.src = '/web/assets/record.svg';
                 recordDom_label.innerHTML = type;
                 recordDom_label.for = cssClass;
-                recordDom.append(recordDom_img);
+                buttonCont.append(recordDom_img);
+                recordDom.append(buttonCont);
                 recordDom.append(recordDom_label);
                 return recordDom;
             }
@@ -296,6 +299,10 @@ const Audio = function(tp, record) {
         }
 
         const source_Dom_Cont = document.createElement('div');
+        const sourceLabel_Cont = document.createElement('div');
+        const sourceLabel = document.createElement('p');
+        sourceLabel.innerHTML = 'Source: ';
+        
         source_Dom_Cont.classList.add('source_Dom_Cont');
         const source_Dom = document.createElement('select');
         source_Dom.id = toCssClass(`audio_source${propTitle}`);
@@ -303,6 +310,9 @@ const Audio = function(tp, record) {
         source_mic.value = 'microphone';
         source_mic.title = 'microphone';
         source_mic.innerHTML = 'microphone';
+        sourceLabel_Cont.classList.add('sourceLabel_Cont');
+        sourceLabel_Cont.append(sourceLabel);
+        source_Dom_Cont.append(sourceLabel_Cont);
         source_Dom.append(source_mic);
         let selectedSource = 'microphone';
         if (typeof audio.getSavedMapping()[layer.id()] === 'object') {
@@ -332,13 +342,25 @@ const Audio = function(tp, record) {
 
         const muteDom = document.createElement('input');
         const muteDom_label = document.createElement('label');
+        const muteDom_label_mute = document.createElement('div');
+        const muteDom_label_soundon = document.createElement('div');
+        muteDom_label_mute.classList.add("muteSvg");
+        muteDom_label_soundon.classList.add("soundonSvg");
+        muteDom_label_soundon.innerHTML = '<svg class="checkmark" x="0px" y="0px" viewBox="0 0 181 181" style="enable-background:new 0 0 181 181;" xml:space="preserve"><style type="text/css">.st0{clip-path:url(#SVGID_00000128477447822769419410000012099080855783991183_);}.st1{clip-path:url(#SVGID_00000152257361887890000740000010219777030467240887_);}</style><g><g><polygon points="101.9,12.3 101.9,168.7 51.2,137.6 51.2,43 "/><polygon points="12.4,131.1 44.6,137 44.6,44 12.4,51.1 "/></g><g><defs><polygon id="SVGID_1_" points="152.6,27 176.6,37.9 176.6,144.6 154.3,154 111.6,118.7 111.6,63.8 "/></defs><clipPath id="SVGID_00000053544173475919617610000018326737706626706623_"><use xlink:href="#SVGID_1_"  style="overflow:visible;"/></clipPath><g style="clip-path:url(#SVGID_00000053544173475919617610000018326737706626706623_);"><path d="M101,7.5c-35.7,0-64.8,37.6-64.8,83.8s29.1,83.8,64.8,83.8s64.8-37.6,64.8-83.8S136.8,7.5,101,7.5z M99.7,162.3c-30.3,0-54.9-31.9-54.9-71.1s24.6-71.1,54.9-71.1s54.9,31.9,54.9,71.1S130,162.3,99.7,162.3z"/><path d="M93,27.7c-27.1,0-49.1,28.5-49.1,63.5s22,63.5,49.1,63.5s49.1-28.5,49.1-63.5S120.1,27.7,93,27.7z M91.5,141.9c-21.6,0-39.1-22.7-39.1-50.6S70,40.7,91.5,40.7s39.1,22.7,39.1,50.6S113.1,141.9,91.5,141.9z"/></g></g></g></svg>';
+        muteDom_label_mute.innerHTML = '<svg class="unchecked" x="0px" y="0px" viewBox="0 0 181 181" style="enable-background:new 0 0 181 181;" xml:space="preserve"><g><g><polygon points="103.9,12.3 103.9,168.7 53.2,137.6 53.2,43 "/><polygon points="14.4,131.1 46.6,137 46.6,44 14.4,51.1 "/></g><g><g><rect x="134.7" y="61.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.5298 126.2783)" width="13" height="58"/></g><g><rect x="112.5" y="84.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.671 126.5934)" width="58" height="13"/></g></g></g></svg>';
+        
+        muteDom_label.classList.add("consentContainer");
+        // muteDom_label.for = 'vt_audio_muterotation';
         muteDom.id = toCssClass(`audio_mute${propTitle}`);
         muteDom.name = toCssClass(`audio_mute${propTitle}`);
         muteDom.type = 'checkbox';
         muteDom.checked = true;
-        muteDom_label.for = toCssClass(`audio_mute${propTitle}`);
+        muteDom_label.htmlFor = toCssClass(`audio_mute${propTitle}`);
-        muteDom_label.innerHTML = 'muted';
+        
-        source_Dom_Cont.append(muteDom);
+        // muteDom_label.innerHTML = 'muted';
+        muteDom_label.append(muteDom);
+        muteDom_label.append(muteDom_label_mute);
+        muteDom_label.append(muteDom_label_soundon);
         source_Dom_Cont.append(muteDom_label);
 
         const defaultRange = getDefaultRange(layer, propTitle);