simon/muharni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Some user interface improvements

Browse source 
Close control on popup, progress bar when recording.
This commit is contained in:
Simon Brooke 2022-09-18 18:27:53 +01:00
parent 950eec5fed
commit 353e37cff5
No known key found for this signature in database
GPG key ID: A7A4F18D1D4DF987
4 changed files with 112 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

55
resources/public/scripts/muharni.js
View file

@ -16,13 +16,57 @@
*/
const studentSounds = Array(80).fill(0).map(x => Array(13).fill(null));
/**
* Creates a progressbar. Adapted from
* https://stackoverflow.com/questions/31109581/javascript-timer-progress-bar
*
* @param id the id of the div we want to transform in a progressbar
* @param duration the duration of the timer example: '10s'
* @param callback, optional function which is called when the progressbar reaches 0.
*/
function createProgressbar(id, duration) {
// We select the div that we want to turn into a progressbar
try {
const progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
// We create the div that changes width to show progress
let progressbarinner = progressbar.querySelector('.inner');
if (progressbarinner == null) {
progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
// Now we set the animation parameters
progressbarinner.style.animationDuration = duration;
// Append the progressbar to the main progressbardiv
progressbar.appendChild(progressbarinner);
}
progressbarinner.addEventListener('animationend', () => {
while (progressbar.hasChildNodes()) {
progressbar.removeChild(progressbar.lastChild);
}
});
// When everything is set up we start the animation
progressbarinner.style.animationPlayState = 'running';
} catch (e) {
console.warn("Failed to create progress bar because " +
e.message +
". This does not, cosmically speaking, matter.");
}
}
function recordStudentSound(r, c) {
console.info("Entered recordStudentSound for row " + r + ", column " + c);
if (Number.isInteger(r) && Number.isInteger(c)) {
$('#record-student').css('color', 'green');
$('#record-stop').css('color', 'green');
try {
createProgressbar('progress', '5s');
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
@ -42,18 +86,19 @@ function recordStudentSound(r, c) {
if (audioChunks.length > 0) {
studentSounds[r][c] = new Blob(audioChunks);
$('#play-student').prop('disabled', false);
$('#play-student').css('color', 'black');
$("#play-student").on("click", function (e) {
console.log("Playing student sound for row " + r + ", column " + c);
new Audio(URL.createObjectURL(studentSounds[r][c])).play();
});
});
console.log("Successfully recorded student sound for row " + r + ", column " + c);
} else {
console.warn("Failed to record student sound for row " + r + ", column " + c);
window.alert("No sound detected. Check your microphone?");
}
$('#record-student').css('color', 'red');
$('#record-stop').css('color', 'red');
};
setTimeout(() => {
@ -115,7 +160,9 @@ $(document).ready(function () {
});
$("#play-student").off("click");
$('#play-student').css('color', 'gray');
if (studentAudio != null) {
$('#play-student').css('color', 'black');
$("#play-student").on("click", function (e) {
console.log("Playing student sound for row " + row + ", column " + col);
new Audio(URL.createObjectURL(studentAudio)).play();