Work on Progress bar (not done yet!)

This commit is contained in:
Simon Brooke 2025-08-30 19:59:01 +01:00
parent 20f471236c
commit ca4835aeef

View file

@ -76,114 +76,6 @@
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script> <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.reagent.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.reagent.js" type="text/javascript"></script>
<script type="text/javascript">
/* Yes, I should rewrite this in Scittle, especially since it depends on JQuery
* which we otherwise don't need. However it's ugly and I don't have time.
*/
/**
* 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(phrase-data) {
console.info("Entered recordStudentSound for phrase " + phrase-data);
if (!!phrase-data) {
$('#record-stop').css('color', 'green');
try {
createProgressbar('progress', '5s');
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.start();
mediaRecorder.onerror = function (e) {
console.log("An error has occurred: " + e.message);
};
mediaRecorder.addEventListener("dataavailable", event => {
console.info("Audio recorded...")
audioChunks.push(event.data);
});
mediaRecorder.onstop = function (e) {
console.log("data available after MediaRecorder.stop() called.");
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-stop').css('color', 'red');
};
setTimeout(() => {
mediaRecorder.requestData();
mediaRecorder.stop();
}, 5000);
});
} catch (error) {
console.error(error);
if (error instanceof TypeError) {
window.alert("Sound recording is only possible on secure connections.");
}
else if (error instanceof DOMException) {
window.alert("No microphone detected? " + error.message);
}
}
}
}
</script>
<script type="application/x-scittle"> <script type="application/x-scittle">
(require '[reagent.core :as r] (require '[reagent.core :as r]
'[reagent.dom :as rdom]) '[reagent.dom :as rdom])
@ -1866,6 +1758,9 @@
;; initially styled; so style needs to be embedded. ;; initially styled; so style needs to be embedded.
(let [popup (.getElementById js/document "popup") (let [popup (.getElementById js/document "popup")
phrase-data (nth data phrase-no) phrase-data (nth data phrase-no)
duration (- (:lineEnd phrase-data) (:lineStart phrase-data))
progress-width (atom 0)
progress-step (int (/ duration 10))
content [:div {:id "popup-content" content [:div {:id "popup-content"
:style {:border "thin solid #331f16" :style {:border "thin solid #331f16"
:background-color "whitesmoke" :background-color "whitesmoke"
@ -1905,7 +1800,20 @@
:on-click #(record-student phrase-no) :on-click #(record-student phrase-no)
:style popup-control-style :style popup-control-style
:title "Record yourself saying this phrase"} :title "Record yourself saying this phrase"}
"⏺"]]]]] "⏺"]]
[:tr [:td {:id "progress"
:colspan 3}
(do
(.info js/console (str "Duration is: " duration "; step is: " progress-step))
(js/setTimeout #(when (and (> @progress-width -1)
(< @progress-width 100))
(.info js/console (str "Incrementing progress-width from " @progress-width))
(swap! progress-width inc))
progress-step)
[:div {:id "progress-bar"
:style {:background-color "red"
:width @progress-width}}
@progress-width])]]]]]
(rdom/render content popup))) (rdom/render content popup)))
(defn markup-phrase [record n] (defn markup-phrase [record n]