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

recording

Browse source
This commit is contained in:
themancalledjakob 2024-03-16 13:22:08 +01:00
parent c5bdff23ee
commit 997247cde3
5 changed files with 158 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}

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

@ -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) {
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,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 (mapping[layer.id()].hasOwnProperty(propTitle)) {
if (typeof mapping[layer.id()] === 'object') {
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;

2
bin/em/variabletime/web/js/layer.js
View file

@ -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.`);

56
bin/em/variabletime/web/js/record.js
View file

@ -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);
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 +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 {

4
bin/em/variabletime/web/theatre_modules/core-and-studio.js.map
View file

File diff suppressed because one or more lines are too long