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

Compare commits

base: variablelab:3b6a57024d40bb0398ed9faf12e165901bec9f27
Branches Tags
variablelab:main
variablelab:audio
..
compare: variablelab:8075cf2b168c5620bc770feef0cd0c63a806636c
Branches Tags
variablelab:audio
variablelab:main

No commits in common. "3b6a57024d40bb0398ed9faf12e165901bec9f27" and "8075cf2b168c5620bc770feef0cd0c63a806636c" have entirely different histories.
3b6a57024d ... 8075cf2b16

6 changed files with 41 additions and 277 deletions
Show stats Expand all files Collapse all files

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

@ -732,19 +732,3 @@ input:disabled {
background: darkgrey;
color: lightgrey;
}
/* ASYA: most the following code does not work*/
.onOffIndicatorWrapper input[type=checkbox] + label::after {
content: ' OFF';
}
.onOffIndicatorWrapper input[type=checkbox]:checked + label{
color: #1cba94;
}
.onOffIndicatorWrapper input[type=checkbox]:checked + label::after{
content: ' ON';
}
.onOffIndicatorWrapper {
width: auto;
}

253
bin/em/variabletime/web/js/audioLayer.js
View file

@ -1,28 +1,26 @@
import {
sanitizeTheatreKey,
arraysEqual,
clone,
} from './utils.js';
const AudioLayer = function(tp, audioLayerID, values = false, autoInit = true) {
// private
let props = { };
if (typeof values === 'string') {
const audioID = sanitizeTheatreKey(values);
const filename = sanitizeTheatreKey(values);
values = {};
values[audioID] = false;
values[filename] = false;
}
if (typeof values === 'object') {
props[Object.keys(values)[0]] = tp.core.types.boolean(false);
}
const onValuesChangeCallbacks = [];
let hierarchyPanelButton = null;
let panelFinderTimeout = false;
// private functions
//
const onValuesChange = (values) => {
console.log(values);
const n_callbacks = onValuesChangeCallbacks.length;
const successes = [];
if (n_callbacks > 0) {
@ -40,173 +38,18 @@ const AudioLayer = function(tp, audioLayerID, values = false, autoInit = true) {
});
}
};
const getHierarchyPanelButton = () => {
if (hierarchyPanelButton === null) {
hierarchyPanelButton = tp.shadowRoot.querySelector(`.layerMover${this.id()}`);
}
return hierarchyPanelButton;
};
const getPanelPropDiamond = (panelPropTitle) => {
return panelPropTitle.previousSibling;
};
const getPanelPropInput = (panelPropTitle) => {
return panelPropTitle
.parentElement
.nextSibling
.querySelector('input');
};
const findInjectPanel = () => {
let doItAgain = true;
console.log('AudioLayer::findInjectPanel');
const panel = tp.getPanel();
let panelSuccesses = 0;
const audioIDs = Object.keys(this.theatreObject.value);
{ // PANEL
for (let i = 0; i < audioIDs.length; i++) {
const audioID = audioIDs[i];
let panelPropTitle = tp.getPanelPropTitle(audioID);
const panelPropContainer = tp.getPanelPropContainer(panelPropTitle);
if (panelPropTitle === null || panelPropContainer == null) {
continue;
}
// Phase 1) prevent unwanted interaction
// remove theatrejs listeners
// such as contextmenu
// NOTE: this does not work with stop(Immediate)Propagation here
const tmp = panelPropTitle.cloneNode(true);
panelPropTitle.parentNode.replaceChild(tmp, panelPropTitle);
panelPropTitle = tmp;
// remove diamond
const diamond = getPanelPropDiamond(panelPropTitle);
if (diamond !== null) {
diamond.remove();
}
// unchangeable boolean
const boolean = getPanelPropInput(panelPropTitle);
boolean.disabled = true;
boolean.parentElement.classList.add('onOffIndicatorWrapper');
boolean.classList.add('onOffIndicator');
boolean.style.width = 'auto';
const container = document.createElement('div');
container.innerHTML = `
<div class="main_panel_button button delete${audioID}">
delete
</div>
`;
for (let i = 0; i < container.children.length; i++) {
panelPropContainer.append(container.children[i]);
};
panelPropContainer.querySelector(`.button.delete${audioID}`)
.addEventListener('click', () => {
this.removeFile(audioID);
});
panelSuccesses++;
};
}
if (panelSuccesses === audioIDs.length) {
doItAgain = false;
}
if (doItAgain) {
clearTimeout(panelFinderTimeout);
panelFinderTimeout = setTimeout(() => {
this.findInjectPanel();
}, 30);
}
}
const findInjectSequencePanel = () => {
let doItAgain = true;
let sequencePanelSuccess = 0;
const sequencePanel = tp.getSequencePanel();
const sequencePanelLeft = tp.getSequencePanelLeft();
if (sequencePanelLeft !== null) { // SEQUENCE PANEL LEFT
const propTitles = sequencePanelLeft.querySelectorAll('[data-testid="SequencePanel-PropTitle"]');
const audioLayerTitle = (() => {
const titles = sequencePanelLeft.querySelectorAll('[data-testid="SequencePanel-Title"]');
for (let i = 0; i < titles.length; i++) {
if (titles[i].innerHTML === this.id()) {
return titles[i];
}
}
return null;
})();
if (audioLayerTitle !== null) {
const audioSection = audioLayerTitle.closest('li');
if (audioSection !== null) {
const audioPropTitles = audioSection.querySelectorAll('[data-testid="SequencePanel-PropTitle"]');
window.audioPropTitles = audioPropTitles;
audioPropTitles.forEach((audioPropTitle) => {
const diamond = (() => {
const potential = audioPropTitle.nextSibling;
if (potential !== null
&& potential.nodeName.toLowerCase() === 'div'
&& potential.querySelectorAll(':scope > [data-pi-key]').length === 3) {
return potential;
}
return null;
})();
if (diamond !== null) {
diamond.style.display = 'none';
}
if (audioPropTitle.innerHTML.length > config.audio.maxFilenameLength) {
const file = audioPropTitle.innerHTML;
const m = (config.audio.maxFilenameLength / 2) - 2;
audioPropTitle.innerHTML = file.substr(0,m) + '..' + file.substr(file.length - m, m);
}
});
sequencePanelSuccess++;
}
}
}
if (sequencePanelLeft !== null) { // SEQUENCE PANEL RIGHT
const audioSectionAnchor = sequencePanelLeft
.nextSibling
.querySelector(`[data-pi-key*="${this.id()}"]`);
if (audioSectionAnchor !== null) {
const audioSection = audioSectionAnchor.closest('li');
if (audioSection !== null) {
audioSection.addEventListener('contextmenu', (e) => {
e.stopPropagation();
e.stopImmediatePropagation();
});
audioSection.querySelectorAll('*').forEach((element) => {
element.addEventListener('contextmenu', (e) => {
e.stopPropagation();
e.stopImmediatePropagation();
});
});
sequencePanelSuccess++;
}
}
}
if (sequencePanelSuccess === 2) {
doItAgain = false;
}
if (doItAgain) {
clearTimeout(panelFinderTimeout);
panelFinderTimeout = setTimeout(() => {
this.findInjectSequencePanel();
}, 30);
}
};
const setTime = (audioID, start, stop) => {
audioID = sanitizeTheatreKey(audioID);
const setTime = (filename, start, stop) => {
filename = sanitizeTheatreKey(filename);
return new Promise((resolve) => {
const keyframes = [{
path: [audioID],
path: [filename],
keyframes: [{
position: -1,
value: false,
@ -224,11 +67,11 @@ const AudioLayer = function(tp, audioLayerID, values = false, autoInit = true) {
},
],
}];
if (tp.getKeyframes(this, [audioID]).length > 0) {
if (tp.getKeyframes(this, [filename]).length > 0) {
tp.studio.transaction(({
__experimental_deleteKeyframes
}) => {
__experimental_deleteKeyframes(this.theatreObject.props[audioID]);
__experimental_deleteKeyframes(this.theatreObject.props[filename]);
});
}
tp.addKeyframes(this, keyframes).then(() => {
@ -237,15 +80,6 @@ const AudioLayer = function(tp, audioLayerID, values = false, autoInit = true) {
});
};
const getValue = (audioID) => {
const values = this.theatreObject.value;
if (typeof values[audioID] !== 'undefined') {
return values[audioID];
} else {
return null;
}
};
const init = () => {
return new Promise((resolve) => {
this.theatreObject = tp.addObject(audioLayerID, this.props, onValuesChange);
@ -263,21 +97,33 @@ const AudioLayer = function(tp, audioLayerID, values = false, autoInit = true) {
};
const remove = () => {
tp.removeObject(audioLayerID);
};
// public
this.props = props;
this.findInjectPanel = findInjectPanel;
this.findInjectSequencePanel = findInjectSequencePanel;
this.addFile = (audioID) => {
this.setFile = (filename) => {
filename = sanitizeTheatreKey(filename);
const values = {};
values[filename] = false;
props = {};
props[filename] = tp.core.types.boolean(values[filename]);
this.props = props;
tp.changeObject(audioLayerID, this.props);
tp.studio.transaction(({
set
}) => {
set(this.theatreObject.props, values);
});
};
this.addFile = (filename) => {
return new Promise((resolve) => {
audioID = sanitizeTheatreKey(audioID);
filename = sanitizeTheatreKey(filename);
const values = this.theatreObject.value;
values[audioID] = false;
props[audioID] = tp.core.types.boolean(values[audioID]);
values[filename] = false;
props[filename] = tp.core.types.boolean(values[filename]);
this.props = props;
const setDummy = () => {
@ -308,12 +154,12 @@ const AudioLayer = function(tp, audioLayerID, values = false, autoInit = true) {
setDummy();
});
};
this.removeFile = (audioID) => {
this.removeFile = (filename) => {
return new Promise((resolve) => {
audioID = sanitizeTheatreKey(audioID);
const values = clone(this.theatreObject.value);
delete values[audioID];
delete props[audioID];
filename = sanitizeTheatreKey(filename);
const values = this.theatreObject.value;
delete values[filename];
delete props[filename];
this.props = props;
const setDummy = () => {
tp.changeObject(audioLayerID, {
@ -329,53 +175,16 @@ const AudioLayer = function(tp, audioLayerID, values = false, autoInit = true) {
const givenValueKeys = Object.keys(againChangedValues);
if (arraysEqual(expectedValueKeys, givenValueKeys)) {
resolve();
return true;
} else {
return false;
}
});
tp.changeObject(audioLayerID, this.props);
return true;
} else {
return false;
}
});
setDummy();
if (!audio.audioPlayer.remove(audioID)) {
console.log('AudioLayer::remove', `could not remove ${audioID} from audioPlayer`);
}
});
};
this.setTime = setTime;
this.getValue = getValue;
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;
}
};
this.init = init;
this.id = () => {

33
bin/em/variabletime/web/js/audioPlayer.js
View file

@ -59,32 +59,19 @@ const AudioPlayer = function() {
startTime
});
};
this.remove = (audioID) => {
const index = audioElements.findIndex((e) => { return e.audioID === audioID; });
if (index < 0) {
return false;
} else {
audioElements.splice(index, 1);
return true;
}
};
this.update = () => {
audioElements.forEach((audioElement, i) => {
if (tp.isPlaying() && !record.isRecording()) {
const shouldBePlaying = getAudioLayer().getValue([audioElement.audioID]);
if (shouldBePlaying !== null) {
if (shouldBePlaying && audioElement.audioDomElement.paused) {
// sequence position is always greater than startTime
// this is true, as it is written
const diff = tp.sheet.sequence.position - audioElement.startTime;
audioElement.audioDomElement.currentTime = diff;
audioElement.audioDomElement.play();
} else if (!shouldBePlaying && !audioElement.audioDomElement.paused) {
audioElement.audioDomElement.pause();
audioElement.audioDomElement.currentTime = 0;
}
} else {
console.log('AudioPlayer::update',`${audioElement.audioID} does not exist in audioLayer.`);
const shouldBePlaying = getAudioLayer().theatreObject.value[audioElement.audioID];
if (shouldBePlaying && audioElement.audioDomElement.paused) {
// sequence position is always greater than startTime
// this is true, as it is written
const diff = tp.sheet.sequence.position - audioElement.startTime;
audioElement.audioDomElement.currentTime = diff;
audioElement.audioDomElement.play();
} else if (!shouldBePlaying && !audioElement.audioDomElement.paused) {
audioElement.audioDomElement.pause();
audioElement.audioDomElement.currentTime = 0;
}
} else if (!audioElement.audioDomElement.paused) {
audioElement.audioDomElement.pause();

3
bin/em/variabletime/web/js/main.js
View file

@ -586,9 +586,6 @@ const deleteLayer = (id, saveProject = true) => {
const addAudioLayer = (filename = false) => {
return new Promise((resolve) => {
const audioLayerID = (() => {
if (audioLayers.length === 0) {
return 'audio';
}
let index = 0;
for (let i = 0; i < audioLayers.length; i++) {
if (audioLayers.findIndex((audioLayer) => audioLayer.id() === `audio-${index}`) < 0) {

6
bin/em/variabletime/web/js/theatre-play.js
View file

@ -284,11 +284,6 @@ const TheatrePlay = function(autoInit = false) {
friendlySequenceNames();
}, 1000);
}
// dirty, should be not in here:
if (getAudioLayers().length > 0) {
getAudioLayer().findInjectSequencePanel();
}
};
//public
@ -766,7 +761,6 @@ const TheatrePlay = function(autoInit = false) {
});
if (typeof project['audioPlayerElements'] === 'object') {
audio.audioPlayer.addMany(project['audioPlayerElements']);
audio.audioPlayer.init();
}
if (typeof project['audioLayers'] === 'object') {
const audioLayerIDs = Object.keys(project['audioLayers']);

7
bin/em/variabletime/web/js/utils.js
View file

@ -372,12 +372,6 @@ function getParents(elem, until = null) {
return parents;
}
function removeAllEventListeners(elem) {
const tmp = elem.cloneNode(true);
elem.parentNode.replaceChild(tmp, elem);
elem = tmp;
}
function arraysEqual(a, b, sortingMatters = false) {
if (a === b) return true;
if (a == null || b == null) return false;
@ -624,7 +618,6 @@ export {
mixObject,
clone,
getParents,
removeAllEventListeners,
arraysEqual,
mapValue,
smoothValue,