Skip to content
Snippets Groups Projects
Commit 4d916fe0 authored by RANWEZ Pierre's avatar RANWEZ Pierre :anchor:
Browse files

:sparkles: feat: controlchange mapping for recording play/pause

parent 63b9f23a
No related branches found
No related tags found
1 merge request!1✨ feat: CSSLSD V2
Hide whitespace changes
Inline Side-by-side
background.js
+ 4
− 4
View file @ 4d916fe0
...@@ -40,10 +40,10 @@ let records = { ...@@ -40,10 +40,10 @@ let records = {
[] []
], ],
info: [ info: [
{isLoop:false}, {isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''},
{isLoop:false}, {isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''},
{isLoop:false}, {isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''},
{isLoop:false} {isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''}
] ]
}; };
let all = ""; let all = "";
......
content.js
+ 11
− 0
View file @ 4d916fe0
...@@ -163,6 +163,16 @@ function midiEvent(type, data) { ...@@ -163,6 +163,16 @@ function midiEvent(type, data) {
}); });
}); });
for (let index = 0; index < INFOLOOP.length; index++) {
const element = INFOLOOP[index];
if (element.controllerPlayPause == data.note.number) {
loop(index);
}
else if (element.controllerRecord == data.note.number) {
INFOLOOP[index].isRecording = !INFOLOOP[index].isRecording;
record(INFOLOOP[index].isRecording, index);
}
};
if (isRecording) { if (isRecording) {
const time = Math.floor(performance.now() - recordingTime); const time = Math.floor(performance.now() - recordingTime);
...@@ -380,6 +390,7 @@ const record = (status, number) => { ...@@ -380,6 +390,7 @@ const record = (status, number) => {
// Start loop // Start loop
const loop = (number) => { const loop = (number) => {
INFOLOOP[number].isLoop = !INFOLOOP[number].isLoop; INFOLOOP[number].isLoop = !INFOLOOP[number].isLoop;
chrome.storage.sync.set({ 'records': { loop: RECORDED, info: INFOLOOP } });
isRecording = false; isRecording = false;
if (RECORDED[number].length) { if (RECORDED[number].length) {
const loopLength = RECORDED[number][RECORDED[number].length - 1].time; const loopLength = RECORDED[number][RECORDED[number].length - 1].time;
......
main.js
+ 98
− 86
View file @ 4d916fe0
...@@ -113,10 +113,10 @@ function initUi() { ...@@ -113,10 +113,10 @@ function initUi() {
$('#loopList').text(''); $('#loopList').text('');
for (let i = 0; i < result.records.loop.length; i++) { for (let i = 0; i < result.records.loop.length; i++) {
if (result.records.loop[i].length > 0) { if (result.records.loop[i].length > 0) {
$('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td>' + result.records.loop[i][result.records.loop[i].length - 1].time + 'ms</td><td>' + result.records.loop[i].length + '</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><button id="loopPlay" value="' + i + '">' + (result.records.info[i].isLoop?pauseIcon:playIcon) + '</button><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>'); $('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td>' + result.records.loop[i][result.records.loop[i].length - 1].time + 'ms</td><td>' + result.records.loop[i].length + '</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a><button id="loopPlay" value="' + i + '">' + (result.records.info[i].isLoop ? pauseIcon : playIcon) + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a></td><td><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
} }
else { else {
$('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td></td><td>0</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><button id="loopPlay" value="' + i + '">' + playIcon + '</button><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>'); $('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td></td><td>0</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a><button id="loopPlay" value="' + i + '">' + playIcon + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a></td><td><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
} }
} }
}); });
...@@ -141,6 +141,19 @@ function initUi() { ...@@ -141,6 +141,19 @@ function initUi() {
}); });
}); });
} }
$(document).on('input', '#loopList span', function () {
spans = $('#loopList span');
chrome.storage.sync.get(['records'], function (result) {
records = result.records;
row = 0;
for (let i = 0; i < 4; i++) {
row = i * 2;
records.info[i].controllerPlayPause = spans[row].textContent;
records.info[i].controllerRecord = spans[row + 1].textContent;
}
chrome.storage.sync.set({ 'records': records });
});
});
var allParameters; var allParameters;
document.getElementById("parameters").addEventListener("input", function () { document.getElementById("parameters").addEventListener("input", function () {
...@@ -272,7 +285,6 @@ function analyseAll() { ...@@ -272,7 +285,6 @@ function analyseAll() {
} }
/** /**
* Save CSS in editor via save button * Save CSS in editor via save button
*/ */
...@@ -287,74 +299,9 @@ function updateCss() { ...@@ -287,74 +299,9 @@ function updateCss() {
); );
} }
$('#download').on('click', function () {
const filename = 'data.json';
chrome.storage.sync.get(['parameters'], function (result) {
const jsonStr = JSON.stringify([editor.getValue(), result.parameters]);
let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(jsonStr));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
});
});
$('#upload').on('change', function () {
const file = this.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const jsonStr = e.target.result;
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);
chrome.storage.sync.set({ css: jsonObj[0] });
chrome.storage.sync.set({ parameters: jsonObj[1] });
editor.setValue(jsonObj[0]);
initUi();
};
reader.readAsText(file);
this.value = "";
});
/**
* Function trigger when new message received.
* @param {type, data} message parameters
*/
function onMessage({ type, data }) {
console.log('onMessage', type, data);
switch (type) {
case 'updateUi': {
initUi();
break;
}
case 'midiEvent': {
if (dataMidi != data) {
$('#midiEvent').text(data);
$('#midiEvent').parent().animate({ 'background-color': 'red' }, 'slow');
$('#midiEvent').parent().animate({ 'background-color': 'transparent' }, 'slow');
var focusedTd = $('[contenteditable]:focus');
var focusedCol = $(focusedTd).index('#parameters tr:eq(' + $(focusedTd).parent().index('#parameters tr') + ') td');
if (focusedTd.length > 0 && focusedCol == 4) {
focused.text(focused.text() + ' ' + data);
}
dataMidi = data;
}
break;
}
case 'midiDevices': {
$('#midiDevices').text(data);
break;
}
}
}
$('#onOff').on('click', function () { $('#onOff').on('click', function () {
activateButton = !activateButton; activateButton = !activateButton;
...@@ -403,6 +350,25 @@ $('.midiI').on('click', function () { ...@@ -403,6 +350,25 @@ $('.midiI').on('click', function () {
}); });
initUi(); initUi();
}); });
$(document).on('click', '.icon-tabler-plus', function () {
// Find parent row of the button and duplicate it
var row = $(this).parent().parent();
var newRow = row.clone();
// Add the new row after the original one
row.after(newRow);
saveParameters();
});
$(document).on('click', '.icon-tabler-minus', function () {
// Find parent row of the button and delete it
var row = $(this).parent().parent();
var table = row.parent();
row.remove();
saveParameters();
// If table has no row left, add a new one
if (table.children().length == 0) {
table.append("<tr><td>" + icon + plus + minus + "</td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td></tr>");
}
});
/** /**
* Record loop button * Record loop button
...@@ -423,7 +389,6 @@ $(document).on('click', '#record', function () { ...@@ -423,7 +389,6 @@ $(document).on('click', '#record', function () {
}); });
}); });
$(document).on('click', '#loopPlay', function () { $(document).on('click', '#loopPlay', function () {
if ($(this).html().includes('player-play')) { if ($(this).html().includes('player-play')) {
$(this).html(pauseIcon); $(this).html(pauseIcon);
...@@ -449,28 +414,75 @@ $(document).on('click', '#loopReset', function () { ...@@ -449,28 +414,75 @@ $(document).on('click', '#loopReset', function () {
); );
}); });
$(document).on('click', '.icon-tabler-plus', function () {
// Find parent row of the button and duplicate it $('#download').on('click', function () {
var row = $(this).parent().parent(); const filename = 'data.json';
var newRow = row.clone(); chrome.storage.sync.get(['parameters'], function (result) {
// Add the new row after the original one const jsonStr = JSON.stringify([editor.getValue(), result.parameters]);
row.after(newRow);
saveParameters(); let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(jsonStr));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
});
}); });
$(document).on('click', '.icon-tabler-minus', function () {
// Find parent row of the button and delete it $('#upload').on('change', function () {
var row = $(this).parent().parent(); const file = this.files[0];
var table = row.parent(); const reader = new FileReader();
row.remove(); reader.onload = function (e) {
saveParameters(); const jsonStr = e.target.result;
// If table has no row left, add a new one const jsonObj = JSON.parse(jsonStr);
if (table.children().length == 0) { console.log(jsonObj);
table.append("<tr><td>" + icon + plus + minus + "</td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td></tr>"); chrome.storage.sync.set({ css: jsonObj[0] });
} chrome.storage.sync.set({ parameters: jsonObj[1] });
editor.setValue(jsonObj[0]);
initUi();
};
reader.readAsText(file);
this.value = "";
}); });
/**
* Function trigger when new message received.
* @param {type, data} message parameters
*/
function onMessage({ type, data }) {
console.log('onMessage', type, data);
switch (type) {
case 'updateUi': {
initUi();
break;
}
case 'midiEvent': {
if (dataMidi != data) {
$('#midiEvent').text(data);
$('#midiEvent').parent().animate({ 'background-color': 'red' }, 'slow');
$('#midiEvent').parent().animate({ 'background-color': 'transparent' }, 'slow');
var focusedTd = $('[contenteditable]:focus');
var focusedCol = $(focusedTd).index('#parameters tr:eq(' + $(focusedTd).parent().index('#parameters tr') + ') td');
if (focusedTd.length > 0 && focusedCol == 4) {
focused.text(focused.text() + ' ' + data);
}
dataMidi = data;
}
break;
}
case 'midiDevices': {
$('#midiDevices').text(data);
break;
}
}
}
// Wait messages from content script // Wait messages from content script
chrome.runtime.onMessage.addListener(onMessage); chrome.runtime.onMessage.addListener(onMessage);
// Indicate to Background that the popup is ready // Indicate to Background that the popup is ready
......
popup.html
+ 2
− 1
View file @ 4d916fe0
...@@ -71,8 +71,9 @@ ...@@ -71,8 +71,9 @@
<tr> <tr>
<th>Nom</th> <th>Nom</th>
<th>Temps</th> <th>Temps</th>
<th>Nombre d'evenements</th> <th>Changes</th>
<th>Actions</th> <th>Actions</th>
<th></th>
</tr> </tr>
</thead> </thead>
<tbody id="loopList"></tbody> <tbody id="loopList"></tbody>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment