variablelab/variabletime
variablelab/variabletime
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

beautify AudioOptions

Browse source 
dependencies hashes:
openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501
ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3
ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239
ofxVariableLab 0b5f9bdebc1e5550621957e73c040c258ec6317b
ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8
This commit is contained in:
asuk 2024-04-01 10:56:31 +02:00
parent 87e296a1d5
commit 30c662f5a4
2 changed files with 141 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
bin/em/variabletime/web/css/theatre.css
View file

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

30
bin/em/variabletime/web/js/audio.js
View file

@ -265,6 +265,7 @@ const Audio = function(tp, record) {
const createRecordButton = (type) => { const createRecordButton = (type) => {
const cssClass = toCssClass(`audio_record${propTitle}`); const cssClass = toCssClass(`audio_record${propTitle}`);
const recordDom = document.createElement('div'); const recordDom = document.createElement('div');
const buttonCont = document.createElement('div');
const recordDom_img = document.createElement('img'); const recordDom_img = document.createElement('img');
const recordDom_label = document.createElement('label'); const recordDom_label = document.createElement('label');
recordDom.id = cssClass; recordDom.id = cssClass;
@ -272,11 +273,13 @@ const Audio = function(tp, record) {
recordDom.type = 'button'; recordDom.type = 'button';
recordDom.classList.add('recordButton'); recordDom.classList.add('recordButton');
recordDom.classList.add('audio_recordButton'); recordDom.classList.add('audio_recordButton');
buttonCont.classList.add('buttonCont');
recordDom_img.alt = type; recordDom_img.alt = type;
recordDom_img.src = '/web/assets/record.svg'; recordDom_img.src = '/web/assets/record.svg';
recordDom_label.innerHTML = type; recordDom_label.innerHTML = type;
recordDom_label.for = cssClass; recordDom_label.for = cssClass;
recordDom.append(recordDom_img); buttonCont.append(recordDom_img);
recordDom.append(buttonCont);
recordDom.append(recordDom_label); recordDom.append(recordDom_label);
return recordDom; return recordDom;
} }
@ -296,6 +299,10 @@ const Audio = function(tp, record) {
} }
const source_Dom_Cont = document.createElement('div'); 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'); source_Dom_Cont.classList.add('source_Dom_Cont');
const source_Dom = document.createElement('select'); const source_Dom = document.createElement('select');
source_Dom.id = toCssClass(`audio_source${propTitle}`); source_Dom.id = toCssClass(`audio_source${propTitle}`);
@ -303,6 +310,9 @@ const Audio = function(tp, record) {
source_mic.value = 'microphone'; source_mic.value = 'microphone';
source_mic.title = 'microphone'; source_mic.title = 'microphone';
source_mic.innerHTML = '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); source_Dom.append(source_mic);
let selectedSource = 'microphone'; let selectedSource = 'microphone';
if (typeof audio.getSavedMapping()[layer.id()] === 'object') { if (typeof audio.getSavedMapping()[layer.id()] === 'object') {
@ -332,13 +342,25 @@ const Audio = function(tp, record) {
const muteDom = document.createElement('input'); const muteDom = document.createElement('input');
const muteDom_label = document.createElement('label'); 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.id = toCssClass(`audio_mute${propTitle}`);
muteDom.name = toCssClass(`audio_mute${propTitle}`); muteDom.name = toCssClass(`audio_mute${propTitle}`);
muteDom.type = 'checkbox'; muteDom.type = 'checkbox';
muteDom.checked = true; 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); source_Dom_Cont.append(muteDom_label);
const defaultRange = getDefaultRange(layer, propTitle); const defaultRange = getDefaultRange(layer, propTitle);